diff --git a/WebContent/html/css/stylesheet.css b/WebContent/html/css/stylesheet.css index 0238400..7026714 100644 --- a/WebContent/html/css/stylesheet.css +++ b/WebContent/html/css/stylesheet.css @@ -25,7 +25,8 @@ div.displayDevice{ overflow: scroll; } -div.profileContainer{ +div.profileContainer, +div.notificationContainer{ display: inline-block; position: absolute; padding-left: 30px; @@ -94,3 +95,63 @@ span.close:focus{ ul.nav{ padding: 0px; } + +/*this is all to make slider-switches*/ +/* The switch - the box around the slider */ +.switch { + position: relative; + display: inline-block; + width: 60px; + height: 34px; +} + +/* Hide default HTML checkbox */ +.switch input {display:none;} + +/* The slider */ +.slider { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + background-color: #ccc; + -webkit-transition: .4s; + transition: .4s; +} + +.slider:before { + position: absolute; + content: ""; + height: 26px; + width: 26px; + left: 4px; + bottom: 4px; + background-color: white; + -webkit-transition: .4s; + transition: .4s; +} + +input:checked + .slider { + background-color: #2196F3; +} + +input:focus + .slider { + box-shadow: 0 0 1px #2196F3; +} + +input:checked + .slider:before { + -webkit-transform: translateX(26px); + -ms-transform: translateX(26px); + transform: translateX(26px); +} + +/* Rounded sliders */ +.slider.round { + border-radius: 34px; +} + +.slider.round:before { + border-radius: 50%; +} \ No newline at end of file diff --git a/WebContent/html/webpages/profileSettings.jsp b/WebContent/html/webpages/profileSettings.jsp index d5fd7de..71cd20b 100644 --- a/WebContent/html/webpages/profileSettings.jsp +++ b/WebContent/html/webpages/profileSettings.jsp @@ -69,95 +69,131 @@