diff --git a/css/main.css b/css/main.css index 8a9725e..eac1472 100644 --- a/css/main.css +++ b/css/main.css @@ -1 +1 @@ -body{background:#fff;margin:0;margin-top:80px;height:100%;line-height:24px;font-family:"Open Sans",sans-serif}body .h1,body .h2,body .h3,body h1,body h2,body h3{margin-top:18px}img{height:auto;max-width:100%}a{padding:0;margin:0;text-decoration:none}a:hover,a:focus{text-decoration:none;color:#f5f4f4}.centered{text-align:center}#switch{height:auto;line-height:34px;font-size:25px;margin-bottom:5px}#switch .switch{position:relative;display:inline-block;width:60px;height:34px}#switch .switch input{opacity:0;width:0;height:0}#switch .switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}#switch .switch .slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s}#switch .switch .slider.round{border-radius:34px}#switch .switch .slider.round:before{border-radius:50%}#switch input:checked+.slider{background-color:#2196f3}#switch input:focus+.slider{box-shadow:0 0 1px #2196f3}#switch input:checked+.slider:before{transform:translateX(26px)}header.navbar{background-color:gray;border-radius:0px 0px 30px 30px}main.container{max-width:1024px;min-height:calc(100vh - 157px);padding-right:15px;padding-left:15px;margin-left:auto;margin-right:auto}main.container#install .settings{padding-bottom:25px}main.container#install .settings,main.container#install form .card:not(:first-child){margin-top:30px}main.container#status #status-big,main.container#dashboard #status-big{margin-bottom:20px;padding:15px;border-radius:5px;font-size:1.3em}main.container#status .timeline,main.container#dashboard .timeline{position:relative;padding:0 0px 10px;margin-top:4px}main.container#status .timeline h3,main.container#dashboard .timeline h3{margin-top:40px;padding-left:70px}main.container#status .timeline .line,main.container#dashboard .timeline .line{position:absolute;width:2px;display:block;background:#c2c2c2;top:0px;bottom:0px;margin-left:31px}main.container#status .timeline .line::before,main.container#dashboard .timeline .line::before{top:-4px;left:-4px;content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#c2c2c2}main.container#status .timeline .servicelist,main.container#dashboard .timeline .servicelist{position:relative;margin:10px 0px 21px 70px;clear:both}main.container#status .timeline .card,main.container#dashboard .timeline .card{margin:10px 0px 21px 70px}main.container#status .timeline .card::before,main.container#dashboard .timeline .card::before{position:absolute;top:8px;left:-24px;content:"";border:inherit;border-width:12px;border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent}main.container#status .timeline .card .card-colore.icon,main.container#dashboard .timeline .card .card-colore.icon{position:absolute;left:-59px;width:40px;height:40px;border-radius:50%;text-align:center}main.container#status .timeline .card .card-colore.icon i,main.container#dashboard .timeline .card .card-colore.icon i{font-size:20px;line-height:40px}main.container#status{font-size:1.05em}main.container#dashboard #status{width:230px;text-align:right}main.container#dashboard .card-header.bg-primary input{width:80%}main.container#dashboard .card-header:not(.border-primary) input#title{width:100%}main.container#dashboard .card-header:not(.border-primary) #time,main.container#dashboard .card-header:not(.border-primary) #end_time_wrapper{display:none}main.container#dashboard article.card input{background:transparent;border:none;border-bottom:1px #fff outset}main.container#dashboard article.card textarea{width:100%;background:transparent;border:none;resize:vertical;min-height:100px}main.container#dashboard article.card .delete{margin-left:5px;font-size:1.2em;color:#fff;line-height:25px}main.container#dashboard article.card .delete:hover,main.container#dashboard article.card .delete:focus{color:#eee}main.container#dashboard #type{margin-left:70px}main.container#dashboard #status-container.error input{box-shadow:0px 0 2px 1px red}main.container#login .wrapper{padding-top:20px}main.container#settings .input-group-text{width:230px}footer#footerwrap{border-radius:30px 30px 0px 0px;min-height:60px;padding-top:15px;padding-bottom:10px;background:gray}footer#footerwrap .dropdown-menu{background:gray}footer#footerwrap .dropdown-menu a{color:#fff;width:100%;padding:2px 5px;display:block}footer#footerwrap .dropdown-menu a:hover{background-color:#2f8ad8}footer#footerwrap .input-group.dropup.mb-3{display:block}footer#footerwrap .input-group.dropup.mb-3 img{max-height:20px;max-width:25px;margin-right:5px;vertical-align:middle}/*# sourceMappingURL=main.css.map */ \ No newline at end of file +body{background-color:#fff;color:#111;margin:0;margin-top:80px;height:100%;line-height:24px;font-family:"Open Sans",sans-serif}body .h1,body .h2,body .h3,body h1,body h2,body h3{margin-top:18px}img{height:auto;max-width:100%}a{padding:0;margin:0;text-decoration:none}a:hover,a:focus{text-decoration:none;color:#f5f4f4}.centered{text-align:center}#switch{height:auto;line-height:34px;font-size:25px;margin-bottom:5px}#switch .switch{position:relative;display:inline-block;width:60px;height:34px}#switch .switch input{opacity:0;width:0;height:0}#switch .switch .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s}#switch .switch .slider:before{position:absolute;content:"";height:26px;width:26px;left:4px;bottom:4px;background-color:#fff;transition:.4s}#switch .switch .slider.round{border-radius:34px}#switch .switch .slider.round:before{border-radius:50%}#switch input:checked+.slider{background-color:#2196f3}#switch input:focus+.slider{box-shadow:0 0 1px #2196f3}#switch input:checked+.slider:before{transform:translateX(26px)}header{background-color:gray;border-radius:0px 0px 30px 30px}main.container{max-width:1024px;min-height:calc(100vh - 157px);padding-right:15px;padding-left:15px;margin-left:auto;margin-right:auto}main.container#install .settings{padding-bottom:25px}main.container#install .settings,main.container#install form .card:not(:first-child){margin-top:30px}main.container#status #status-big,main.container#dashboard #status-big{margin-bottom:20px;padding:15px;border-radius:5px;font-size:1.3em}main.container#status .timeline,main.container#dashboard .timeline{position:relative;padding:0 0px 10px;margin-top:4px}main.container#status .timeline h3,main.container#dashboard .timeline h3{margin-top:40px;padding-left:70px}main.container#status .timeline .line,main.container#dashboard .timeline .line{position:absolute;width:2px;display:block;background:#c2c2c2;top:0px;bottom:0px;margin-left:31px}main.container#status .timeline .line::before,main.container#dashboard .timeline .line::before{top:-4px;left:-4px;content:"";position:absolute;width:10px;height:10px;border-radius:50%;background:#c2c2c2}main.container#status .timeline .servicelist,main.container#dashboard .timeline .servicelist{position:relative;margin:10px 0px 21px 70px;clear:both}main.container#status .timeline .card,main.container#dashboard .timeline .card{margin:10px 0px 21px 70px}main.container#status .timeline .card::before,main.container#dashboard .timeline .card::before{position:absolute;top:8px;left:-24px;content:"";border:inherit;border-width:12px;border-top-color:transparent;border-bottom-color:transparent;border-left-color:transparent}main.container#status .timeline .card .card-colore.icon,main.container#dashboard .timeline .card .card-colore.icon{position:absolute;left:-59px;width:40px;height:40px;border-radius:50%;text-align:center}main.container#status .timeline .card .card-colore.icon i,main.container#dashboard .timeline .card .card-colore.icon i{font-size:20px;line-height:40px}main.container#status{font-size:1.05em}main.container#dashboard #status{width:230px;text-align:right}main.container#dashboard .card-header.bg-primary input{width:80%}main.container#dashboard .card-header:not(.border-primary) input#title{width:100%}main.container#dashboard .card-header:not(.border-primary) #time,main.container#dashboard .card-header:not(.border-primary) #end_time_wrapper{display:none}main.container#dashboard article.card input{background:transparent;border:none;border-bottom:1px #fff outset}main.container#dashboard article.card textarea{width:100%;background:transparent;border:none;resize:vertical;min-height:100px}main.container#dashboard article.card .delete{margin-left:5px;font-size:1.2em;color:#fff;line-height:25px}main.container#dashboard article.card .delete:hover,main.container#dashboard article.card .delete:focus{color:#eee}main.container#dashboard #type{margin-left:70px}main.container#dashboard #status-container.error input{box-shadow:0px 0 2px 1px red}main.container#login .wrapper{padding-top:20px}main.container#settings .input-group-text{width:230px}footer#footerwrap{border-radius:30px 30px 0px 0px;min-height:60px;padding-top:15px;padding-bottom:10px;background:gray}footer#footerwrap .dropdown-menu{background:gray}footer#footerwrap .dropdown-menu a{color:#fff;width:100%;padding:2px 5px;display:block}footer#footerwrap .dropdown-menu a:hover{background-color:#2f8ad8}footer#footerwrap .input-group.dropup.mb-3{display:block}footer#footerwrap .input-group.dropup.mb-3 img{max-height:20px;max-width:25px;margin-right:5px;vertical-align:middle}body[data-theme=dark]{background-color:#111}body[data-theme=dark] main{color:#fff}body[data-theme=dark] .fa-moon::before{content:""}body[data-theme=dark] .list-group-item{border-color:rgba(255,255,255,.125)}body[data-theme=dark] .list-group-item.sub-component{background-color:#111;color:#fff}body[data-theme=dark] .card{background-color:#111;color:#fff;border-color:rgba(255,255,255,.125)}body[data-theme=dark] .table{color:#fff}/*# sourceMappingURL=main.css.map */ \ No newline at end of file diff --git a/css/main.css.map b/css/main.css.map index 9557cc8..69cbefc 100644 --- a/css/main.css.map +++ b/css/main.css.map @@ -1 +1 @@ -{"version":3,"sources":["main.sass"],"names":[],"mappings":"AAAA,KACE,eAAA,CACA,QAAA,CACA,eAAA,CACA,WAAA,CACA,gBAAA,CACA,kCAAA,CAEA,mDACE,eAAA,CAEJ,IACE,WAAA,CACA,cAAA,CAEF,EACE,SAAA,CACA,QAAA,CACA,oBAAA,CAEA,gBACE,oBAAA,CACA,aAAA,CAEJ,UACE,iBAAA,CAEF,QACE,WAAA,CACA,gBAAA,CACA,cAAA,CACA,iBAAA,CAEA,gBACE,iBAAA,CACA,oBAAA,CACA,UAAA,CACA,WAAA,CAEA,sBACE,SAAA,CACA,OAAA,CACA,QAAA,CAEF,wBACE,iBAAA,CACA,cAAA,CACA,KAAA,CACA,MAAA,CACA,OAAA,CACA,QAAA,CACA,qBAAA,CAEA,cAAA,CAEA,+BACE,iBAAA,CACA,UAAA,CACA,WAAA,CACA,UAAA,CACA,QAAA,CACA,UAAA,CACA,qBAAA,CAEA,cAAA,CAEF,8BACE,kBAAA,CAEA,qCACE,iBAAA,CAGN,8BACE,wBAAA,CAEF,4BACE,0BAAA,CAEF,qCACE,0BAAA,CAEN,cACI,qBAAA,CACA,+BAAA,CAEJ,eACE,gBAAA,CACA,8BAAA,CACA,kBAAA,CACA,iBAAA,CACA,gBAAA,CACA,iBAAA,CAIE,iCACE,mBAAA,CAEF,qFAEE,eAAA,CAKF,uEACE,kBAAA,CACA,YAAA,CACA,iBAAA,CACA,eAAA,CAEF,mEACE,iBAAA,CACA,kBAAA,CACA,cAAA,CAEA,yEACE,eAAA,CACA,iBAAA,CAEF,+EACE,iBAAA,CACA,SAAA,CACA,aAAA,CACA,kBAAA,CACA,OAAA,CACA,UAAA,CACA,gBAAA,CAEA,+FACE,QAAA,CACA,SAAA,CACA,UAAA,CACA,iBAAA,CACA,UAAA,CACA,WAAA,CACA,iBAAA,CACA,kBAAA,CAEJ,6FACE,iBAAA,CACA,yBAAA,CACA,UAAA,CAEF,+EACE,yBAAA,CAEA,+FACE,iBAAA,CACA,OAAA,CACA,UAAA,CACA,UAAA,CACA,cAAA,CACA,iBAAA,CACA,4BAAA,CACA,+BAAA,CACA,6BAAA,CAEF,mHACE,iBAAA,CACA,UAAA,CACA,UAAA,CACA,WAAA,CACA,iBAAA,CACA,iBAAA,CAEA,uHACE,cAAA,CACA,gBAAA,CAEV,sBACE,gBAAA,CAYA,iCACE,WAAA,CACA,gBAAA,CAEF,uDACI,SAAA,CAIF,uEACE,UAAA,CAEF,8IAEE,YAAA,CAIF,4CACE,sBAAA,CACA,WAAA,CACA,6BAAA,CAEF,+CACE,UAAA,CACA,sBAAA,CACA,WAAA,CACA,eAAA,CACA,gBAAA,CAEF,8CACE,eAAA,CACA,eAAA,CACA,UAAA,CACA,gBAAA,CAEA,wGACE,UAAA,CAEN,+BACE,gBAAA,CAEF,uDACE,4BAAA,CAIF,8BACE,gBAAA,CAYF,0CACE,WAAA,CAKN,kBACE,+BAAA,CACA,eAAA,CACA,gBAAA,CACA,mBAAA,CACA,eAAA,CAEA,iCACE,eAAA,CAEA,mCACE,UAAA,CACA,UAAA,CACA,eAAA,CACA,aAAA,CAEA,yCACE,wBAAA,CAEN,2CACE,aAAA,CAEA,+CACE,eAAA,CACA,cAAA,CACA,gBAAA,CACA,qBAAA","file":"main.css"} \ No newline at end of file +{"version":3,"sources":["main.sass"],"names":[],"mappings":"AAAA,KAMA,qBANW,CAAA,UACE,CAAA,QAQX,CAAA,eACA,CAAA,WACA,CAAA,gBACA,CAAA,kCACA,CAAA,mDAEA,eACE,CAAA,IAEJ,WACE,CAAA,cACA,CAAA,EAEF,SACE,CAAA,QACA,CAAA,oBACA,CAAA,gBAEA,oBACE,CAAA,aACA,CAAA,UAEJ,iBACE,CAAA,QAEF,WACE,CAAA,gBACA,CAAA,cACA,CAAA,iBACA,CAAA,gBAEA,iBACE,CAAA,oBACA,CAAA,UACA,CAAA,WACA,CAAA,sBAEA,SACE,CAAA,OACA,CAAA,QACA,CAAA,wBAEF,iBACE,CAAA,cACA,CAAA,KACA,CAAA,MACA,CAAA,OACA,CAAA,QACA,CAAA,qBACA,CACA,cACA,CAAA,+BAEA,iBACE,CAAA,UACA,CAAA,WACA,CAAA,UACA,CAAA,QACA,CAAA,UACA,CAAA,qBACA,CACA,cACA,CAAA,8BAEF,kBACE,CAAA,qCAEA,iBACE,CAAA,8BAGN,wBACE,CAAA,4BAEF,0BACE,CAAA,qCAEF,0BACE,CAAA,OAEN,qBACI,CAAA,+BACA,CAAA,eAEJ,gBACE,CAAA,8BACA,CAAA,kBACA,CAAA,iBACA,CAAA,gBACA,CAAA,iBACA,CAAA,iCAIE,mBACE,CAAA,qFAEF,eAEE,CAAA,uEAKF,kBACE,CAAA,YACA,CAAA,iBACA,CAAA,eACA,CAAA,mEAEF,iBACE,CAAA,kBACA,CAAA,cACA,CAAA,yEAEA,eACE,CAAA,iBACA,CAAA,+EAEF,iBACE,CAAA,SACA,CAAA,aACA,CAAA,kBACA,CAAA,OACA,CAAA,UACA,CAAA,gBACA,CAAA,+FAEA,QACE,CAAA,SACA,CAAA,UACA,CAAA,iBACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,kBACA,CAAA,6FAEJ,iBACE,CAAA,yBACA,CAAA,UACA,CAAA,+EAEF,yBACE,CAAA,+FAEA,iBACE,CAAA,OACA,CAAA,UACA,CAAA,UACA,CAAA,cACA,CAAA,iBACA,CAAA,4BACA,CAAA,+BACA,CAAA,6BACA,CAAA,mHAEF,iBACE,CAAA,UACA,CAAA,UACA,CAAA,WACA,CAAA,iBACA,CAAA,iBACA,CAAA,uHAEA,cACE,CAAA,gBACA,CAAA,sBAEV,gBACE,CAAA,iCAYA,WACE,CAAA,gBACA,CAAA,uDAEF,SACI,CAAA,uEAIF,UACE,CAAA,8IAEF,YAEE,CAAA,4CAIF,sBACE,CAAA,WACA,CAAA,6BACA,CAAA,+CAEF,UACE,CAAA,sBACA,CAAA,WACA,CAAA,eACA,CAAA,gBACA,CAAA,8CAEF,eACE,CAAA,eACA,CAAA,UACA,CAAA,gBACA,CAAA,wGAEA,UACE,CAAA,+BAEN,gBACE,CAAA,uDAEF,4BACE,CAAA,8BAIF,gBACE,CAAA,0CAYF,WACE,CAAA,kBAKN,+BACE,CAAA,eACA,CAAA,gBACA,CAAA,mBACA,CAAA,eACA,CAAA,iCAEA,eACE,CAAA,mCAEA,UACE,CAAA,UACA,CAAA,eACA,CAAA,aACA,CAAA,yCAEA,wBACE,CAAA,2CAEN,aACE,CAAA,+CAEA,eACE,CAAA,cACA,CAAA,gBACA,CAAA,qBACA,CAAA,sBAEN,qBA3RU,CAAA,2BA8RR,UA7RU,CAAA,uCAgSV,WACE,CAAA,uCAEF,mCAlSY,CAAA,qDAqSV,qBAvSM,CAAA,UACE,CAAA,4BA0SV,qBA3SQ,CAAA,UACE,CAAA,mCACE,CAAA,6BA8SZ,UA/SU","file":"main.css"} \ No newline at end of file diff --git a/css/main.sass b/css/main.sass index 8581bd1..8829be6 100644 --- a/css/main.sass +++ b/css/main.sass @@ -1,5 +1,12 @@ +$bg_light: #fff +$text_light: #111 +$bg_dark: #111 +$text_dark: #fff +$border_dark: rgba(255,255,255,.125) + body - background: #ffffff + background-color: $bg_light + color: $text_light margin: 0 margin-top: 80px height: 100% @@ -80,7 +87,7 @@ a &:checked + .slider:before transform: translateX(26px) -header.navbar +header background-color: gray border-radius: 0px 0px 30px 30px @@ -274,4 +281,28 @@ footer#footerwrap max-height: 20px max-width: 25px margin-right: 5px - vertical-align: middle \ No newline at end of file + vertical-align: middle + +body[data-theme="dark"] + background-color: $bg_dark + + main + color: $text_dark + + .fa-moon::before + content: "\f185" + + .list-group-item + border-color: $border_dark + + &.sub-component + background-color: $bg_dark + color: $text_dark + + .card + background-color: $bg_dark + color: $text_dark + border-color: $border_dark + + .table + color: $text_dark \ No newline at end of file diff --git a/js/main.js b/js/main.js index 68f4a70..253b3f9 100644 --- a/js/main.js +++ b/js/main.js @@ -27,3 +27,29 @@ function timeago() { }); }); })(); + +var darkSwitch = document.getElementById("darkSwitch"); +window.addEventListener("load", function () { + if (darkSwitch) { + initTheme(); + darkSwitch.addEventListener("change", function () { + resetTheme(); + }); + } +}); + +function initTheme() { + var darkThemeSelected = localStorage.getItem("darkSwitch") !== null && localStorage.getItem("darkSwitch") === "dark"; + darkSwitch.checked = darkThemeSelected; + darkThemeSelected ? document.body.setAttribute("data-theme", "dark") : document.body.removeAttribute("data-theme"); +} + +function resetTheme() { + if (darkSwitch.checked) { + document.body.setAttribute("data-theme", "dark"); + localStorage.setItem("darkSwitch", "dark"); + } else { + document.body.removeAttribute("data-theme"); + localStorage.removeItem("darkSwitch"); + } +} diff --git a/template.php b/template.php index 5f58994..6b6fc64 100644 --- a/template.php +++ b/template.php @@ -101,8 +101,8 @@ class Template -
-