Responsive and UI update
This commit is contained in:
jackiesung4ev committed
1 parent
db8a42e820
commit
918938f6e4
2 files changed
+56
-48
No files matched your search
@@ -1,19 +1,19 @@
|
||||
.toggle-dark-mode input[type=checkbox],.toggle-container .toggle-grid-mode input[type=checkbox]{height:0;width:0;visibility:hidden}.toggle-dark-mode label,.toggle-container .toggle-grid-mode label{cursor:pointer;text-indent:-9999px;width:52px;height:27px;background:grey;display:block;border-radius:100px;position:relative}.toggle-dark-mode label:after,.toggle-container .toggle-grid-mode label:after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:90px;-webkit-transition:0.3s;transition:0.3s}.toggle-dark-mode input:checked+label,.toggle-container .toggle-grid-mode input:checked+label{background:#444;border:1px solid rgba(255,255,255,0.1)}.toggle-dark-mode input:checked+label:after,.toggle-container .toggle-grid-mode input:checked+label:after{left:calc(100% - 5px);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.toggle-dark-mode label:active:after,.toggle-container .toggle-grid-mode label:active:after{width:45px}body.transition-theme,body.transition-theme *,body.transition-theme *:before,body.transition-theme *:after{-webkit-transition:cubic-bezier(0.68, -0.55, 0.27, 1.55) 200ms !important;transition:cubic-bezier(0.68, -0.55, 0.27, 1.55) 200ms !important;-webkit-transition-delay:0 !important;transition-delay:0 !important}body[data-theme='dark']{background-color:#121212}body[data-theme='dark'] #app{background-color:#121212}body[data-theme='dark'] .toggle-container{color:#c8c8c8}body[data-theme='dark'] .toggle-container .fas.fa-th.fa-lg{color:#c8c8c8}body[data-theme='dark'] .toggle-container .fas.fa-list-ul.fa-lg{color:#c8c8c8}body[data-theme='dark'] .state-online{background-color:#4ba242}body[data-theme='dark'] .server-info-container{background-color:#1E1E1E;color:#E1E1E1;border:1px solid rgba(255,255,255,0.1);-webkit-box-shadow:0 2px 10px rgba(255,255,255,0.1);box-shadow:0 2px 10px rgba(255,255,255,0.1)}body[data-theme='dark'] .info-body ul li{border-bottom:1px solid rgba(255,255,255,0.2)}body[data-theme='dark'] .info-body ul li p{color:#fff}body[data-theme='dark'] .info-body ul li img{border:1px solid rgba(255,255,255,0.3)}body[data-theme='dark'] .info-body ul li:nth-child(1),body[data-theme='dark'] .info-body ul li:nth-child(2),body[data-theme='dark'] .info-body ul li:nth-child(3),body[data-theme='dark'] .info-body ul li:nth-child(12),body[data-theme='dark'] .info-body ul li:nth-child(13),body[data-theme='dark'] .info-body ul li:nth-child(14){border:none}body[data-theme='dark'] .info-body ul li:nth-child(4):before,body[data-theme='dark'] .info-body ul li:nth-child(5):before,body[data-theme='dark'] .info-body ul li:nth-child(6):before,body[data-theme='dark'] .info-body ul li:nth-child(7):before,body[data-theme='dark'] .info-body ul li:nth-child(8):before,body[data-theme='dark'] .info-body ul li:nth-child(9):before,body[data-theme='dark'] .info-body ul li:nth-child(10):before,body[data-theme='dark'] .info-body ul li:nth-child(11):before,body[data-theme='dark'] .info-body ul li:nth-child(12):before,body[data-theme='dark'] .info-body ul li:nth-child(13):before,body[data-theme='dark'] .info-body ul li:nth-child(14):before{color:#959595}body[data-theme='dark'] .info-body ul li h4{color:#959595}body[data-theme='dark'] .info-body .cpu-bar h4,body[data-theme='dark'] .info-body .ram-bar h4,body[data-theme='dark'] .info-body .disk-bar h4{color:#959595}body[data-theme='dark'] .info-body .cpu-bar p,body[data-theme='dark'] .info-body .ram-bar p,body[data-theme='dark'] .info-body .disk-bar p{color:#fff !important}body[data-theme='dark'] .info-body .ui.progress{background-color:#111;border:1px solid rgba(255,255,255,0.15)}body[data-theme='dark'] .info-body .ui.progress.fine>.bar{background-color:#1670C5 !important}body[data-theme='dark'] .info-body .ui.progress.warning>.bar{background-color:#975FE4 !important}footer{background-color:#2f2f2f;color:#f2f2f2;font-size:14px}footer .footer-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;text-align:center;padding:1rem}footer .footer-container p{width:100%;margin-top:1rem}footer .footer-container a{color:#f2f2f2}footer .footer-container div{width:100%}#back-to-top{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;background-color:#FF9800;width:45px;height:45px;border-radius:50%;position:fixed;bottom:30px;right:30px;-webkit-transition:background-color .3s,
|
||||
body.transition-theme,body.transition-theme *,body.transition-theme *:before,body.transition-theme *:after{-webkit-transition:cubic-bezier(0.68, -0.55, 0.27, 1.55) 200ms !important;transition:cubic-bezier(0.68, -0.55, 0.27, 1.55) 200ms !important;-webkit-transition-delay:0 !important;transition-delay:0 !important}body[data-theme="dark"]{background-color:#121212}body[data-theme="dark"] .switcher{background-color:#124b8c}body[data-theme="dark"] .grid-mode-toggle .switcher{background-color:#2f2f2f}body[data-theme="dark"] .grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child{color:#121212}body[data-theme="dark"] #app{background-color:#121212}body[data-theme="dark"] .toggle-container{color:#c8c8c8}body[data-theme="dark"] .toggle-container .fas.fa-th.fa-lg{color:#c8c8c8}body[data-theme="dark"] .toggle-container .fas.fa-list-ul.fa-lg{color:#c8c8c8}body[data-theme="dark"] .state-online{background-color:#4ba242}body[data-theme="dark"] .server-info-container{background-color:#1e1e1e;color:#e1e1e1;border:1px solid rgba(255,255,255,0.1);-webkit-box-shadow:0 2px 10px rgba(255,255,255,0.1);box-shadow:0 2px 10px rgba(255,255,255,0.1)}body[data-theme="dark"] .info-body ul li{border-bottom:1px solid rgba(255,255,255,0.2)}body[data-theme="dark"] .info-body ul li p{color:#fff}body[data-theme="dark"] .info-body ul li img{border:1px solid rgba(255,255,255,0.3)}body[data-theme="dark"] .info-body ul li:nth-child(-n+3){border:none}body[data-theme="dark"] .info-body ul li:nth-last-child(-n+3){border:none}body[data-theme="dark"] .info-body ul li:nth-child(n+4)::before{color:#959595}body[data-theme="dark"] .info-body ul li h4{color:#959595}body[data-theme="dark"] .info-body .cpu-bar h4,body[data-theme="dark"] .info-body .ram-bar h4,body[data-theme="dark"] .info-body .disk-bar h4{color:#959595}body[data-theme="dark"] .info-body .cpu-bar p,body[data-theme="dark"] .info-body .ram-bar p,body[data-theme="dark"] .info-body .disk-bar p{color:#fff !important}body[data-theme="dark"] .info-body .ui.progress{background-color:#111;border:1px solid rgba(255,255,255,0.15)}body[data-theme="dark"] .info-body .ui.progress.fine>.bar{background-color:#1670c5 !important}body[data-theme="dark"] .info-body .ui.progress.warning>.bar{background-color:#975fe4 !important}.dark-mode-toggle,.grid-mode-toggle{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.dark-mode-toggle .switcher,.grid-mode-toggle .switcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;padding:.8em 1.2em;border-radius:10px;border:1px solid rgba(255,255,255,0.1);background:#fbb142;-webkit-transition:background-color 400ms cubic-bezier(0.995, -0.265, 0.855, 0.505),-webkit-box-shadow 100ms linear;transition:background-color 400ms cubic-bezier(0.995, -0.265, 0.855, 0.505),-webkit-box-shadow 100ms linear;transition:background-color 400ms cubic-bezier(0.995, -0.265, 0.855, 0.505),box-shadow 100ms linear;transition:background-color 400ms cubic-bezier(0.995, -0.265, 0.855, 0.505),box-shadow 100ms linear,-webkit-box-shadow 100ms linear}.dark-mode-toggle .switcher div i+i,.grid-mode-toggle .switcher div i+i{margin-left:1em}.dark-mode-toggle .switcher div .fas.fa-sun,.grid-mode-toggle .switcher div .fas.fa-sun,.dark-mode-toggle .switcher div .fas.fa-moon,.grid-mode-toggle .switcher div .fas.fa-moon,.dark-mode-toggle .switcher div .fas.fa-th,.grid-mode-toggle .switcher div .fas.fa-th,.dark-mode-toggle .switcher div .fas.fas.fa-list-ul,.grid-mode-toggle .switcher div .fas.fas.fa-list-ul{font-size:1.4em}.dark-mode-toggle .switcher input[type="checkbox"],.grid-mode-toggle .switcher input[type="checkbox"]{height:0;width:0;display:none}.dark-mode-toggle .switcher input[type="checkbox"]+div>i,.grid-mode-toggle .switcher input[type="checkbox"]+div>i{-webkit-transition:all 400ms cubic-bezier(0.995, -0.265, 0.855, 0.505);transition:all 400ms cubic-bezier(0.995, -0.265, 0.855, 0.505)}.dark-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child,.grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child{color:grey}.dark-mode-toggle .switcher input[type="checkbox"]:checked+div>:last-child,.grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:last-child{color:#fff;-webkit-transform:rotate(-25deg);transform:rotate(-25deg)}.dark-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:last-child,.grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:last-child{color:grey}.dark-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:first-child,.grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:first-child{color:#f2f2f2;-webkit-transform:rotate(-180deg);transform:rotate(-180deg)}footer{background-color:#2f2f2f;color:#f2f2f2;font-size:14px}footer .footer-container{display:-webkit-box;display:-ms-flexbox;display:flex;-weLine truncated
|
||||
opacity .5s, visibility .5s;transition:background-color .3s,
|
||||
opacity .5s, visibility .5s;opacity:0;visibility:hidden;z-index:1000}#back-to-top:after{font-family:"Font Awesome 5 Free";font-weight:900;content:"\f106";font-size:2.2em;color:#fff}#back-to-top:hover{cursor:pointer;background-color:#cc7a00}#back-to-top:active{background-color:#cc7a00}#back-to-top.show{opacity:1;visibility:visible}.nav-bar{display:-ms-grid;display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-columns:1fr 3fr;grid-template-columns:1fr 3fr;-ms-grid-rows:auto 1fr;grid-template-rows:auto 1fr;background-color:#2A3950;padding:.8em 8em}@media (max-width: 1250px){.nav-bar{padding:.8em 3em}}@media (max-width: 900px){.nav-bar{padding:.8em 1em}}.nav-bar .logo{color:#f2f2f2;-ms-grid-column-align:start;justify-self:start;font-size:1.2em}.nav-bar a{color:#f2f2f2}.nav-bar li:last-child{background-color:#07090d}.icon-container{-ms-grid-column-align:end;justify-self:end;display:none}.icon-container .col{display:block;float:left;margin:1% 0 1% 1.6%}.icon-container .col:first-of-type{margin-left:0}.icon-container .cf:before,.icon-container .cf:after{content:" ";display:table}.icon-container .cf:after{clear:both}.icon-container .cf{*zoom:1}.icon-container .three{color:#ecf0f1;text-align:center}.icon-container .hamburger .line{width:50px;height:5px;background-color:#ecf0f1;display:block;margin:8px auto;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}.icon-container .hamburger:hover{cursor:pointer}.icon-container #hamburger-icon.is-active{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;-webkit-transition-delay:0.6s;transition-delay:0.6s;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.icon-container #hamburger-icon.is-active .line:nth-child(2){width:0px}.icon-container #hamburger-icon.is-active .line:nth-child(1),.icon-container #hamburger-icon.is-active .line:nth-child(3){-webkit-transition-delay:0.3s;transition-delay:0.3s}.icon-container #hamburger-icon.is-active .line:nth-child(1){-webkit-transform:translateY(13px);transform:translateY(13px)}.icon-container #hamburger-icon.is-active .line:nth-child(3){-webkit-transform:translateY(-13px) rotate(90deg);transform:translateY(-13px) rotate(90deg)}.nav-menu{-ms-grid-column-align:end;justify-self:end}.nav-menu li{display:inline-block}.nav-menu li a{display:block;padding:.8em 1.6em}@media screen and (max-width: 900px){.icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transform:scale(0.8);transform:scale(0.8)}.nav-menu{display:none;width:100%}.nav-menu.active{display:block;grid-column:1 / -1}.nav-menu li{display:block;border-bottom:1px solid rgba(255,255,255,0.3)}.nav-menu li:last-child{border:none}.nav-menu li a{padding:1em;font-weight:bold}}.toggle-grid-mode input[type=checkbox]{height:0;width:0;visibility:hidden}.toggle-grid-mode label{cursor:pointer;text-indent:-9999px;width:52px;height:27px;background:grey;display:block;border-radius:100px;position:relative}.toggle-grid-mode label:after{content:'';position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:90px;-webkit-transition:0.3s;transition:0.3s}.toggle-grid-mode input:checked+label{background:#444;border:1px solid rgba(255,255,255,0.1)}.toggle-grid-mode input:checked+label:after{left:calc(100% - 5px);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.toggle-grid-mode label:active:after{width:45px}body[data-gridlist='list'] #app{-ms-grid-columns:1fr;grid-template-columns:1fr;grid-gap:2em}body[data-gridlist='list'] .server-info-container{-ms-grid-rows:1fr auto;grid-template-rows:1fr auto}body[data-gridlist='list'] .info-body ul{grid-template-areas:"state flag . system location memory boot ram disk down up cpu-bar cpu-bar ram-bar ram-bar disk-bar disk-bar"
|
||||
"name name name system location memory boot ram disk down up cpu-bar cpu-bar ram-bar ram-bar disk-bar disk-bar"}@media (max-width: 1250px){body[data-gridlist='list'] .info-body ul{grid-template-areas:"state state state name name name name name flag flag flag flag flag flag"
|
||||
"system location memory boot ram disk down up cpu-bar cpu-bar ram-bar ram-bar disk-bar disk-bar"}}@media (max-width: 900px){body[data-gridlist='list'] .info-body ul{grid-template-areas:"state state state state name name name name name name name flag flag flag"
|
||||
opacity .5s, visibility .5s;opacity:0;visibility:hidden;z-index:1000}#back-to-top:after{font-family:"Font Awesome 5 Free";font-weight:900;content:"\f106";font-size:2.2em;color:#fff}#back-to-top:hover{cursor:pointer;background-color:#cc7a00}#back-to-top:active{background-color:#cc7a00}#back-to-top.show{opacity:1;visibility:visible}.nav-bar{display:-ms-grid;display:grid;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-columns:1fr 3fr;grid-template-columns:1fr 3fr;-ms-grid-rows:auto 1fr;grid-template-rows:auto 1fr;background-color:#2a3950;padding:.8em 8em}@media (max-width: 1250px){.nav-bar{padding:.8em 3em}}@media (max-width: 900px){.nav-bar{padding:.8em 1em}}@media (max-width: 500px){.nav-bar{-ms-grid-columns:auto 3fr;grid-template-columns:auto 3fr}}.nav-bar .logo{color:#f2f2f2;-ms-grid-column-align:start;justify-self:start;font-size:1.2em}.nav-bar a{color:#f2f2f2}.nav-bar li:last-child{background-color:#07090d}.icon-container{-ms-grid-column-align:end;justify-self:end;display:none}.icon-container .col{display:block;float:left;margin:1% 0 1% 1.6%}.icon-container .col:first-of-type{margin-left:0}.icon-container .cf:before,.icon-container .cf:after{content:" ";display:table}.icon-container .cf:after{clear:both}.icon-container .cf{*zoom:1}.icon-container .three{color:#ecf0f1;text-align:center}.icon-container .hamburger .line{width:50px;height:5px;background-color:#ecf0f1;display:block;margin:8px auto;-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}.icon-container .hamburger:hover{cursor:pointer}.icon-container #hamburger-icon.is-active{-webkit-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;-webkit-transition-delay:0.6s;transition-delay:0.6s;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.icon-container #hamburger-icon.is-active .line:nth-child(2){width:0px}.icon-container #hamburger-icon.is-active .line:nth-child(1),.icon-container #hamburger-icon.is-active .line:nth-child(3){-webkit-transition-delay:0.3s;transition-delay:0.3s}.icon-container #hamburger-icon.is-active .line:nth-child(1){-webkit-transform:translateY(13px);transform:translateY(13px)}.icon-container #hamburger-icon.is-active .line:nth-child(3){-webkit-transform:translateY(-13px) rotate(90deg);transform:translateY(-13px) rotate(90deg)}.nav-menu{-ms-grid-column-align:end;justify-self:end}.nav-menu li{display:inline-block}.nav-menu li a{display:block;padding:.8em 1.6em}@media screen and (max-width: 900px){.icon-container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-transform:scale(0.8);transform:scale(0.8)}.nav-menu{display:none;width:100%}.nav-menu.active{display:block;grid-column:1 / -1}.nav-menu li{display:block;border-bottom:1px solid rgba(255,255,255,0.3)}.nav-menu li:last-child{border:none}.nav-menu li a{padding:1em;font-weight:bold}}.toggle-grid-mode input[type="checkbox"]{height:0;width:0;visibility:hidden}.toggle-grid-mode label{cursor:pointer;text-indent:-9999px;width:52px;height:27px;background:grey !important;display:block;border-radius:100px;position:relative}.toggle-grid-mode label:after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;background:#fff;border-radius:90px;-webkit-transition:0.3s;transition:0.3s}.toggle-grid-mode input:checked+label{background:#444;border:1px solid rgba(255,255,255,0.1)}.toggle-grid-mode input:checked+label:after{left:calc(100% - 5px);-webkit-transform:translateX(-100%);transform:translateX(-100%)}.toggle-grid-mode label:active:after{width:45px}body[data-gridlist="list"] #app{-ms-grid-columns:1fr;grid-template-columns:1fr;grid-gap:2em}@media (max-width: 1250px){body[data-gridlist="list"] #app{grid-row-gap:3em}}body[data-gridlist="list"] .server-info-container{-ms-grid-rows:1fr auto;grid-template-rows:1fr auto}body[data-gridlist="list"] .info-body ul{grid-template-areas:"state flag . system location memory boot ram disk down up cpu-bar cpu-bar ram-bar ram-bar disk-bar disk-bar"
|
||||
"name name name system location memory boot ram disk down up cpu-bar cpu-bar ram-bar ram-bar disk-bar disk-bar"}@media (max-width: 1250px){body[data-gridlist="list"] .info-body ul{grid-template-areas:"state state state name name name name name flag flag flag flag flag flag"
|
||||
"system location memory boot ram disk down up cpu-bar cpu-bar ram-bar ram-bar disk-bar disk-bar"}}@media (max-width: 900px){body[data-gridlist="list"] .info-body ul{grid-template-areas:"state state state state name name name name name name name flag flag flag"
|
||||
"system system system system system system system location location location location location location location"
|
||||
"memory memory memory memory memory memory memory boot boot boot boot boot boot boot"
|
||||
"ram ram ram ram ram ram ram disk disk disk disk disk disk disk"
|
||||
"down down down down down down down up up up up up up up"
|
||||
"cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar"
|
||||
"ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar"
|
||||
"disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar"}body[data-gridlist='list'] .info-body ul li{-webkit-box-orient:horizontal !important;-webkit-box-direction:normal !important;-ms-flex-direction:row !important;flex-direction:row !important}body[data-gridlist='list'] .info-body ul li:nth-child(4):before,body[data-gridlist='list'] .info-body ul li:nth-child(5):before,body[data-gridlist='list'] .info-body ul li:nth-child(6):before,body[data-gridlist='list'] .info-body ul li:nth-child(7):before,body[data-gridlist='list'] .info-body ul li:nth-child(8):before,body[data-gridlist='list'] .info-body ul li:nth-child(9):before,body[data-gridlist='list'] .info-body ul li:nth-child(10):before,body[data-gridlist='list'] .info-body ul li:nth-child(11):before,body[data-gridlist='list'] .info-body ul li:nth-child(12):before,body[data-gridlist='list'] .info-body ul li:nth-child(13):before,body[data-gridlist='list'] .info-body ul li:nth-child(14):before{padding-bottom:0 !important}body[data-gridlist='list'] .info-body ul li:nth-child(4){border:none !important}body[data-gridlist='list'] .info-body ul li:nth-child(5){border:none !important}body[data-gridlist='list'] .info-body ul li:nth-child(6){border:none !important}body[data-gridlist='list'] .info-body ul li:nth-child(7){border:none !important}body[data-gridlist='list'] .info-body ul li:nth-child(8){border:none !important}body[data-gridlist='list'] .info-body ul li:nth-child(9){border:none !important}body[data-gridlist='list'] .info-body ul li:nth-child(10){border:none !important}body[data-gridlist='list'] .info-body ul li:nth-child(11){border:none !important}body[data-gridlist='list'] .info-body ul li:nth-child(12):before{content:'' !important}body[data-gridlist='list'] .info-body ul li:nth-child(13):before{content:'' !important}body[data-gridlist='list'] .info-body ul li:nth-child(14):before{content:'' !important}body[data-gridlist='list'] .info-body ul li .cpu-bar,body[data-gridlist='list'] .info-body ul li .ram-bar,body[data-gridlist='list'] .info-body ul li .disk-bar{-ms-grid-columns:15% auto !important;grid-template-columns:15% auto !important;width:100%}body[data-gridlist='list'] .info-body ul li .cpu-bar h4,body[data-gridlist='list'] .info-body ul li .ram-bar h4,body[data-gridlist='list'] .info-body ul li .disk-bar h4{display:block !important}}body[data-gridlist='list'] .info-body ul li{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}body[data-gridlist='list'] .info-body ul li:nth-child(4):before,body[data-gridlist='list'] .info-body ul li:nth-child(5):before,body[data-gridlist='list'] .info-body ul li:nth-child(6):before,body[data-gridlist='list'] .info-body ul li:nth-child(7):before,body[data-gridlist='list'] .info-body ul li:nth-child(8):before,body[data-gridlist='list'] .info-body ul li:nth-child(9):before,body[data-gridlist='list'] .info-body ul li:nth-child(10):before,body[data-gridlist='list'] .info-body ul li:nth-child(11):before,body[data-gridlist='list'] .info-body ul li:nth-child(12):before,body[data-gridlist='list'] .info-body ul li:nth-child(13):before,body[data-gridlist='list'] .info-body ul li:nth-child(14):before{padding-bottom:.5em}body[data-gridlist='list'] .info-body ul li:nth-child(1){-ms-grid-column:1;-ms-grid-column-span:1;grid-column:1 / 2;-ms-grid-column-align:start;justify-self:start}body[data-gridlist='list'] .info-body ul li:nth-child(2){-ms-grid-column:1;-ms-grid-column-span:2;grid-column:1 / 3;-ms-grid-column-align:start;justify-self:start}@media (max-width: 1250px){body[data-gridlist='list'] .info-body ul li:nth-child(2){-ms-grid-column:2;-ms-grid-column-span:10;grid-column:2 / 12;-ms-grid-column-align:center;justify-self:center}}body[data-gridlist='list'] .info-body ul li:nth-child(3){-ms-grid-column-align:end;justify-self:end;-ms-grid-column:2;-ms-grid-column-span:1;grid-column:2 / 3}@media (max-width: 1250px){body[data-gridlist='list'] .info-body ul li:nth-child(3){grid-column:1 / -1}}body[data-gridlist='list'] .info-body ul li:nth-child(4){border:none}body[data-gridlist='list'] .info-body ul li:nth-child(5){border:none}body[data-gridlist='list'] .info-body ul li:nth-child(6){border:none}body[data-gridlist='list'] .info-body ul li:nth-child(7){border:none}body[data-gridlist='list'] .info-body ul li:nth-child(8){border:none}body[data-gridlist='list'] .info-body ul li:nth-child(9){border:none}body[data-gridlist='list'] .info-body ul li:nth-child(10){border:none}body[data-gridlist='list'] .info-body ul li:nth-child(11){border:none}body[data-gridlist='list'] .info-body ul li:nth-child(12){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}body[data-gridlist='list'] .info-body ul li:nth-child(12):before{content:'CPU'}body[data-gridlist='list'] .info-body ul li:nth-child(13){display:-webkit-box;displayLine truncated
|
||||
"disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar"}body[data-gridlist="list"] .info-body ul li{-webkit-box-orient:horizontal !important;-webkit-box-direction:normal !important;-ms-flex-direction:row !important;flex-direction:row !important}body[data-gridlist="list"] .info-body ul li:nth-child(n+4)::before{padding-bottom:0 !important}body[data-gridlist="list"] .info-body ul li:nth-last-child(-n+3):before{content:"" !important}body[data-gridlist="list"] .info-body ul li .cpu-bar,body[data-gridlist="list"] .info-body ul li .ram-bar,body[data-gridlist="list"] .info-body ul li .disk-bar{-ms-grid-columns:15% auto !important;grid-template-columns:15% auto !important;width:100%}body[data-gridlist="list"] .info-body ul li .cpu-bar h4,body[data-gridlist="list"] .info-body ul li .ram-bar h4,body[data-gridlist="list"] .info-body ul li .disk-bar h4{display:block !important}}body[data-gridlist="list"] .info-body ul li{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}body[data-gridlist="list"] .info-body ul li:nth-child(n+4):before{padding-bottom:0.5em}body[data-gridlist="list"] .info-body ul li:nth-child(1){-ms-grid-column:1;-ms-grid-column-span:1;grid-column:1 / 2;-ms-grid-column-align:start;justify-self:start}body[data-gridlist="list"] .info-body ul li:nth-child(2){-ms-grid-column:1;-ms-grid-column-span:2;grid-column:1 / 3;-ms-grid-column-align:start;justify-self:start}@media (max-width: 1250px){body[data-gridlist="list"] .info-body ul li:nth-child(2){-ms-grid-column:2;-ms-grid-column-span:10;grid-column:2 / 12;-ms-grid-column-align:center;justify-self:center}}body[data-gridlist="list"] .info-body ul li:nth-child(3){-ms-grid-column-align:end;justify-self:end;-ms-grid-column:2;-ms-grid-column-span:1;grid-column:2 / 3}@media (max-width: 1250px){body[data-gridlist="list"] .info-body ul li:nth-child(3){grid-column:1 / -1}}body[data-gridlist="list"] .info-body ul li:nth-child(n+4):nth-child(-n+11){border:none}body[data-gridlist="list"] .info-body ul li:nth-child(12){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:.6em}body[data-gridlist="list"] .info-body ul li:nth-child(12):before{content:"CPU"}body[data-gridlist="list"] .info-body ul li:nth-child(13){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:.6em}body[data-gridlist="list"] .info-body ul li:nth-child(13):before{content:"RAM"}body[data-gridlist="list"] .info-body ul li:nth-child(14){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:.6em}body[data-gridlist="list"] .info-body ul li:nth-child(14):before{content:"硬盘"}body[data-gridlist="list"] .info-body ul li .cpu-bar,body[data-gridlist="list"] .info-body ul li .ram-bar,body[data-gridlist="list"] .info-body ul li .disk-bar{-ms-grid-columns:1fr;grid-template-columns:1fr}body[data-gridlist="list"] .info-body ul li .cpu-bar h4,body[data-gridlist="list"] .info-body ul li .ram-bar h4,body[data-gridlist="list"] .info-body ul li .disk-bar h4{display:none}.grid-mode-toggle .switcher{background-color:#1670c5;border:1px solid rgba(255,255,255,0.1)}.grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child{color:#2a3950}.grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:last-child{color:#fff;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:last-child{color:#121212}.grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:first-child{color:#fff;-webkit-transform:rotate(0deg);transform:rotate(0deg)}.toggle-container{display:-ms-grid;display:grid;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;padding-top:2em}*,*::before,*::after{-webkit-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;text-decoration:none}body{font-family:Microsoft Yahei, Avenir, Segoe UI, Hiragino Sans GB, STHeiti, Microsoft Sans Serif, WenQuanYi Micro Hei, sans-serif;overflow-x:hidden;background-color:#e5e5e5}#app{background-color:#e5e5e5;min-height:100vh;display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr);grid-gap:3em;width:100%;width:calc(100vw - 6em);max-width:1400px;margin:2em auto 4em;-ms-flex-line-pack:start;align-content:start}@media (max-width: 1250px){#app{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr);grid-gap:2.5em;width:calc(100vw - 4em)}}@media (max-width: 900px){#app{-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;grid-gap:2em;grid-row-gap:Line truncated
|
||||
"system system system location location location"
|
||||
"memory memory memory boot boot boot"
|
||||
"ram ram ram disk disk disk"
|
||||
"down down down up up up"
|
||||
"cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar cpu-bar"
|
||||
"ram-bar ram-bar ram-bar ram-bar ram-bar ram-bar"
|
||||
"disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar"}.info-body ul li{list-style:none;padding:.6em;margin:0.3em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;word-break:break-all;border-bottom:1px solid #d9d9d9}.info-body ul li p{padding:0.3em 1em;font-size:0.6em}.info-body ul li h3{font-size:1.05em}.info-body ul li .state-online{background-color:#53B449;border-radius:4px}.info-body ul li .state-offline{background-color:#EF4B4C;border-radius:4px}.info-body ul li img{border:1px solid rgba(0,0,0,0.25);border-radius:6px}.info-body ul li:nth-child(1):before,.info-body ul li:nth-child(2):before,.info-body ul li:nth-child(3):before,.info-body ul li:nth-child(4):before,.info-body ul li:nth-child(5):before,.info-body ul li:nth-child(6):before,.info-body ul li:nth-child(7):before,.info-body ul li:nth-child(8):before,.info-body ul li:nth-child(9):before,.info-body ul li:nth-child(10):before,.info-body ul li:nth-child(11):before,.info-body ul li:nth-child(12):before,.info-body ul li:nth-child(13):before,.info-body ul li:nth-child(14):before{font-weight:bold}.info-body ul li:nth-child(1){-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:2;grid-area:state;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:center;justify-self:center;border:none;font-size:1.2em}@media (max-width: 500px){.info-body ul li:nth-child(1){-ms-grid-column-align:start;justify-self:start}}.info-body ul li:nth-child(2){-ms-grid-row:1;-ms-grid-column:3;-ms-grid-column-span:2;grid-area:name;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:center;justify-self:center;border:none}.info-body ul li:nth-child(3){-ms-grid-row:1;-ms-grid-column:5;-ms-grid-column-span:2;grid-area:flag;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:center;justify-self:center;border:none}@media (max-width: 500px){.info-body ul li:nth-child(3){-ms-grid-column-align:end;justify-self:end}}.info-body ul li:nth-child(4){-ms-grid-row:2;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:system;text-transform:capitalize}.info-body ul li:nth-child(4):before{content:"系统"}.info-body ul li:nth-child(5){-ms-grid-row:2;-ms-grid-column:4;-ms-grid-column-span:3;grid-area:location}.info-body ul li:nth-child(5):before{content:"位置"}.info-body ul li:nth-child(6){-ms-grid-row:3;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:memory}.info-body ul li:nth-child(6):before{content:"内存"}.info-body ul li:nth-child(7){-ms-grid-row:3;-ms-grid-column:4;-ms-grid-column-span:3;grid-area:boot}.info-body ul li:nth-child(7):before{content:"在线"}.info-body ul li:nth-child(8){-ms-grid-row:4;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:ram}.info-body ul li:nth-child(8):before{content:"交换"}.info-body ul li:nth-child(9){-ms-grid-row:4;-ms-grid-column:4;-ms-grid-column-span:3;grid-area:disk}.info-body ul li:nth-child(9):before{content:"硬盘"}.info-body ul li:nth-child(10){-ms-grid-row:5;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:down}.info-body ul li:nth-child(10):before{content:"下载 \f884";font-family:"Font Awesome 5 Free";font-weight:900}.info-body ul li:nth-child(11){-ms-grid-row:5;-ms-grid-column:4;-ms-grid-column-span:3;grid-area:up}.info-body ul li:nth-child(11):before{content:"上传 \f161";font-family:"Font Awesome 5 Free";font-weight:900}.info-body ul li:nth-child(12){-ms-grid-row:6;-ms-grid-column:1;-ms-grid-column-span:6;grid-area:cpu-bar;border:none;display:inline-block;padding:.3em .6em}.info-body ul li:nth-child(13){-ms-grid-row:7;-ms-grid-column:1;-ms-grid-column-span:6;grid-area:ram-bar;border:none;display:inline-block;padding:.3em .6em}.info-body ul li:nth-child(14){-ms-grid-row:8;-ms-grid-column:1;-ms-grid-column-span:6;grid-area:disk-bar;border:none;display:inline-block;padding:.3em .6em .6em}.info-body ul li .cpu-bar,.info-body ul li .ram-bar,.info-body ul li .disk-bar{display:-ms-grid;display:grid;-ms-grid-columns:15% auto;grid-template-columns:15% auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.info-body ul li .cpu-bar div:first-child,.info-body ul li .ram-bar div:first-child,.info-body ul li .disk-bar div:first-child{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.info-body ul li .cpu-bar p,.info-body ul li .ram-bar p,.info-body ul li .disk-bar p{word-break:keep-all;font-size:0.8em}@media (max-width: 500px){.info-body ul li .cpu-bar p,.info-body ul li .ram-bar p,.info-body ul li .disk-bar p{font-size:1em}}.info-body ul li .cpu-bar h4,.info-body ul li .ram-bar h4,.info-body ul li .disk-bar h4{font-weight:bold}.info-body ul li .ui.progress{margin-bottom:0 !important;background-color:lightgray;border-radius:4px;border:1px solid #bfbfbf}.info-body ul li .ui.progress .bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;bordLine truncated
|
||||
"disk-bar disk-bar disk-bar disk-bar disk-bar disk-bar"}.info-body ul li{list-style:none;padding:.6em;margin:0.3em;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;word-break:break-all;border-bottom:1px solid #d9d9d9}.info-body ul li p{padding:0.3em 1em;font-size:0.6em}.info-body ul li h3{font-size:1.05em}.info-body ul li .state-online{background-color:#53b449;border-radius:4px}.info-body ul li .state-offline{background-color:#ef4b4c;border-radius:4px}.info-body ul li img{border:1px solid rgba(0,0,0,0.25);border-radius:6px}.info-body ul li:not(:nth-child(1))::before{font-weight:bold}.info-body ul li:nth-child(1){-ms-grid-row:1;-ms-grid-column:1;-ms-grid-column-span:2;grid-area:state;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:center;justify-self:center;border:none;font-size:1.2em}@media (max-width: 500px){.info-body ul li:nth-child(1){-ms-grid-column-align:start;justify-self:start}}.info-body ul li:nth-child(2){-ms-grid-row:1;-ms-grid-column:3;-ms-grid-column-span:2;grid-area:name;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:center;justify-self:center;border:none}.info-body ul li:nth-child(3){-ms-grid-row:1;-ms-grid-column:5;-ms-grid-column-span:2;grid-area:flag;-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center;-ms-grid-column-align:center;justify-self:center;border:none}@media (max-width: 500px){.info-body ul li:nth-child(3){-ms-grid-column-align:end;justify-self:end}}.info-body ul li:nth-child(4){-ms-grid-row:2;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:system;text-transform:capitalize}.info-body ul li:nth-child(4):before{content:"系统"}.info-body ul li:nth-child(5){-ms-grid-row:2;-ms-grid-column:4;-ms-grid-column-span:3;grid-area:location}.info-body ul li:nth-child(5):before{content:"位置"}.info-body ul li:nth-child(6){-ms-grid-row:3;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:memory}.info-body ul li:nth-child(6):before{content:"内存"}.info-body ul li:nth-child(7){-ms-grid-row:3;-ms-grid-column:4;-ms-grid-column-span:3;grid-area:boot}.info-body ul li:nth-child(7):before{content:"在线"}.info-body ul li:nth-child(8){-ms-grid-row:4;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:ram}.info-body ul li:nth-child(8):before{content:"交换"}.info-body ul li:nth-child(9){-ms-grid-row:4;-ms-grid-column:4;-ms-grid-column-span:3;grid-area:disk}.info-body ul li:nth-child(9):before{content:"硬盘"}.info-body ul li:nth-child(10){-ms-grid-row:5;-ms-grid-column:1;-ms-grid-column-span:3;grid-area:down}.info-body ul li:nth-child(10):before{content:"下载 \f884";font-family:"Font Awesome 5 Free";font-weight:900}.info-body ul li:nth-child(11){-ms-grid-row:5;-ms-grid-column:4;-ms-grid-column-span:3;grid-area:up}.info-body ul li:nth-child(11):before{content:"上传 \f161";font-family:"Font Awesome 5 Free";font-weight:900}.info-body ul li:nth-child(12){-ms-grid-row:6;-ms-grid-column:1;-ms-grid-column-span:6;grid-area:cpu-bar;border:none;display:inline-block;padding:.3em .6em}.info-body ul li:nth-child(13){-ms-grid-row:7;-ms-grid-column:1;-ms-grid-column-span:6;grid-area:ram-bar;border:none;display:inline-block;padding:.3em .6em}.info-body ul li:nth-child(14){-ms-grid-row:8;-ms-grid-column:1;-ms-grid-column-span:6;grid-area:disk-bar;border:none;display:inline-block;padding:.3em .6em .6em}.info-body ul li .cpu-bar,.info-body ul li .ram-bar,.info-body ul li .disk-bar{display:-ms-grid;display:grid;-ms-grid-columns:15% auto;grid-template-columns:15% auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.info-body ul li .cpu-bar div:first-child,.info-body ul li .ram-bar div:first-child,.info-body ul li .disk-bar div:first-child{-ms-flex-item-align:center;-ms-grid-row-align:center;align-self:center}.info-body ul li .cpu-bar p,.info-body ul li .ram-bar p,.info-body ul li .disk-bar p{word-break:keep-all;font-size:0.8em}@media (max-width: 500px){.info-body ul li .cpu-bar p,.info-body ul li .ram-bar p,.info-body ul li .disk-bar p{font-size:1em}}.info-body ul li .cpu-bar h4,.info-body ul li .ram-bar h4,.info-body ul li .disk-bar h4{font-weight:bold}.info-body ul li .ui.progress{margin-bottom:0 !important;background-color:lightgray;border-radius:4px;border:1px solid #bfbfbf}.info-body ul li .ui.progress .bar{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;border-radius:4px}.info-body ul li .td-padding{padding-left:0.5em}
|
||||
@@ -43,14 +43,25 @@
|
||||
</header>
|
||||
<script>$(document).ready(function () { $(".hamburger").click(function () { $(this).toggleClass("is-active"); $('.nav-menu').toggleClass('active'); $('.nav-bar').toggleClass('active'); }); }); </script>
|
||||
<section class="toggle-container">
|
||||
<div class="toggle-dark-mode">
|
||||
<h4><i class="fas fa-sun fa-lg" title="白昼模式"></i> / <i class="fas fa-moon fa-lg" title="暗黑模式"></i></h4>
|
||||
<input type="checkbox" name="theme" id="switch"><label for="switch">Toggle</label>
|
||||
</div>
|
||||
<div class="toggle-grid-mode">
|
||||
<h4><i class="fas fa-th fa-lg" title="网格视图"></i> / <i class="fas fa-list-ul fa-lg" title="列表视图"></i></h4>
|
||||
<input type="checkbox" name="grid" id="grid-list"><label for="grid-list">Toggle</label>
|
||||
</div>
|
||||
<div class="dark-mode-toggle">
|
||||
<label class="switcher">
|
||||
<input type="checkbox" name="theme" id="switch" />
|
||||
<div>
|
||||
<i class="fas fa-sun" title="白昼模式"></i>
|
||||
<i class="fas fa-moon" title="暗黑模式"></i>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="grid-mode-toggle">
|
||||
<label class="switcher">
|
||||
<input type="checkbox" name="grid" id="grid-list" />
|
||||
<div>
|
||||
<i class="fas fa-th" title="网格视图"></i>
|
||||
<i class="fas fa-list-ul" title="列表视图"></i>
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
</section>
|
||||
<div id="app">
|
||||
<div class="server-info-container" v-for='server in servers' :id="server.ID">
|
||||
@@ -72,8 +83,8 @@
|
||||
<li>@#server.State?secondToDate(server.State.Uptime):'-'#@</li>
|
||||
<li>@#formatByteSize(server.State.SwapUsed)#@ / @#formatByteSize(server.Host.SwapTotal)#@</li>
|
||||
<li>@#formatByteSize(server.State.DiskUsed)#@ / @#formatByteSize(server.Host.DiskTotal)#@</li>
|
||||
<li>@#formatByteSize(server.State.NetInTransfer) #@(@#formatByteSize(server.State.NetInSpeed)#@/s)</li>
|
||||
<li>@#formatByteSize(server.State.NetOutTransfer) #@(@#formatByteSize(server.State.NetOutSpeed)#@/s)</li>
|
||||
<li>@#formatByteSize(server.State.NetInTransfer)#@ (@#formatByteSize(server.State.NetInSpeed)#@/s)</li>
|
||||
<li>@#formatByteSize(server.State.NetOutTransfer)#@ (@#formatByteSize(server.State.NetOutSpeed)#@/s)</li>
|
||||
<li>
|
||||
<div class="cpu-bar">
|
||||
<div>
|
||||
@@ -125,42 +136,36 @@
|
||||
|
||||
<!-- Dark mode toggle -->
|
||||
<script>
|
||||
var checkbox = document.querySelector('input[name=theme]');
|
||||
checkbox.addEventListener('change', function () {
|
||||
if (this.checked) {
|
||||
trans()
|
||||
document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark')
|
||||
} else {
|
||||
trans()
|
||||
document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'light')
|
||||
}
|
||||
})
|
||||
let trans = () => {
|
||||
document.getElementsByTagName("BODY")[0].classList.add('transition-theme');
|
||||
window.setTimeout(() => {
|
||||
document.getElementsByTagName("BODY")[0].classList.remove('transition-theme')
|
||||
}, 1000)
|
||||
var checkbox = document.querySelector("input[name=theme]");
|
||||
var themeStatue = document.getElementsByTagName("BODY")[0];
|
||||
checkbox.addEventListener("change", function () {
|
||||
if (this.checked) {
|
||||
themeStatue.setAttribute("data-theme", "dark");
|
||||
} else {
|
||||
themeStatue.setAttribute("data-theme", "light");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<!-- Grid list mode toggle -->
|
||||
<script>
|
||||
var checkboxs = document.querySelector('input[name=grid]');
|
||||
checkboxs.addEventListener('change', function () {
|
||||
if (this.checked) {
|
||||
transs()
|
||||
document.getElementsByTagName("BODY")[0].setAttribute('data-gridlist', 'list')
|
||||
} else {
|
||||
transs()
|
||||
document.getElementsByTagName("BODY")[0].setAttribute('data-gridlist', 'grid')
|
||||
}
|
||||
})
|
||||
let transs = () => {
|
||||
document.getElementsByTagName("BODY")[0].classList.add('transition-theme');
|
||||
window.setTimeout(() => {
|
||||
document.getElementsByTagName("BODY")[0].classList.remove('transition-theme')
|
||||
}, 1000)
|
||||
var checkboxs = document.querySelector("input[name=grid]");
|
||||
var themeStatue = document.getElementsByTagName("BODY")[0];
|
||||
checkboxs.addEventListener("change", function () {
|
||||
if (this.checked) {
|
||||
transs();
|
||||
themeStatue.setAttribute("data-gridlist", "list");
|
||||
} else {
|
||||
transs();
|
||||
themeStatue.setAttribute("data-gridlist", "grid");
|
||||
}
|
||||
});
|
||||
let transs = () => {
|
||||
themeStatue.classList.add("transition-theme");
|
||||
window.setTimeout(() => {
|
||||
themeStatue.classList.remove("transition-theme");
|
||||
}, 1000);
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Back to top button -->
|
||||
@@ -243,6 +248,7 @@
|
||||
DarkMode() {
|
||||
const hour = new Date(Date.now()).getHours()
|
||||
if (hour > 17 || hour < 4) {
|
||||
document.querySelector("input[name=theme]").checked = true;
|
||||
document.getElementsByTagName("BODY")[0].setAttribute('data-theme', 'dark');
|
||||
}
|
||||
},
|
||||
@@ -272,8 +278,9 @@
|
||||
position: 'top',
|
||||
icon: 'success',
|
||||
title: '实时通道建立',
|
||||
text: '可以实时获取最新监控数据啦',
|
||||
showConfirmButton: false,
|
||||
timer: 1500
|
||||
timer: 2000
|
||||
});
|
||||
}
|
||||
ws.onmessage = function (evt) {
|
||||
@@ -297,8 +304,9 @@
|
||||
position: 'top',
|
||||
icon: 'error',
|
||||
title: '实时通道断开',
|
||||
text: '无法实时获取最新监控数据咯',
|
||||
showConfirmButton: false,
|
||||
timer: 1500
|
||||
timer: 2000
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
Reference in new issue
Block a user