From d831c00895c54d66a6157413e0d9c0c858cfad8c Mon Sep 17 00:00:00 2001 From: Jackie Sung Date: Fri, 29 Jan 2021 00:49:49 +0800 Subject: [PATCH] Progressbar restructure and UI design update --- resource/static/theme-daynight/css/main.css | 20 +- .../static/theme-daynight/css/service.css | 2 +- resource/static/theme-daynight/js/main.js | 2 +- resource/static/theme-daynight/js/mode.js | 2 +- resource/static/theme-daynight/js/navtop.js | 2 +- resource/static/theme-daynight/js/service.js | 2 +- resource/template/theme-daynight/home.html | 495 +++++++++--------- resource/template/theme-daynight/service.html | 65 ++- 8 files changed, 285 insertions(+), 305 deletions(-) diff --git a/resource/static/theme-daynight/css/main.css b/resource/static/theme-daynight/css/main.css index 3abda7f..999cdb4 100644 --- a/resource/static/theme-daynight/css/main.css +++ b/resource/static/theme-daynight/css/main.css @@ -1,19 +1 @@ -body.transition-theme,body.transition-theme *,body.transition-theme *:before,body.transition-theme *:after{-webkit-transition:400ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important;transition:400ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !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}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, - 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}}@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}}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(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}.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}.toggle-container .dark-mode-toggle,.toggle-container .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}.toggle-container .dark-mode-toggle .switcher,.toggle-container .grid-mode-toggle .switcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;padding:.6em .88em;border-radius:10px;border:1px solid rgba(255,255,255,0.1);background:#fbb142}.toggle-container .dark-mode-toggle .switcher div i+i,.toggle-container .grid-mode-toggle .switcher div i+i{margin-left:1em}.toggle-container .dark-mode-toggle .switcher div .fas.fa-sun,.toggle-container .grid-mode-toggle .switcher div .fas.fa-sun,.toggle-container .dark-mode-toggle .switcher div .fas.fa-moon,.toggle-container .grid-mode-toggle .switcher div .fas.fa-moon,.toggle-container .dark-mode-toggle .switcher div .fas.fa-th,.toggle-container .grid-mode-toggle .switcher div .fas.fa-th,.toggle-container .dark-mode-toggle .switcher div .fas.fas.fa-list-ul,.toggle-container .grid-mode-toggle .switcher div .fas.fas.fa-list-ul{font-size:1.4em}.toggle-container .dark-mode-toggle .switcher input[type="checkbox"],.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]{height:0;width:0;display:none}.toggle-container .dark-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child,.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child{color:grey}.toggle-container .dark-mode-toggle .switcher input[type="checkbox"]:checked+div>:last-child,.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:last-child{color:#fff;-webkit-transform:rotate(-135deg);transform:rotate(-135deg)}.toggle-container .dark-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:last-child,.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:last-child{color:#9e9e9e}.toggle-container .dark-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:first-child,.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:first-child{color:#f2f2f2;-webkit-transform:rotate(-360deg);transform:rotate(-360deg)}.toggle-container .grid-mode-toggle .switcher{background-color:#1670c5;border:1px solid rgba(255,255,255,0.1)}.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]+div>i{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:first-child{color:#2a3950}.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]:checked+div>:last-child{color:#fff;-webkit-transform:rotateY(-360deg);transform:rotateY(-360deg)}.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:last-child{color:#121212}.toggle-container .grid-mode-toggle .switcher input[type="checkbox"]:not(:checked)+div>:first-child{color:#fff;-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}*,*::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:3em;width:calc(100vw - 3em)}}@media (max-width: 500px){#app{-ms-grid-columns:1fr;grid-template-columns:1fr;grid-gap:1em;grid-row-gap:3em;width:calc(100vw - 2em)}}.server-info-container{background-color:#f1f1f2;display:-ms-grid;display:grid;font-size:0.9em;border-radius:5px;border:1px solid #d9d9d9;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24);-webkit-transition:-webkit-transform 500ms ease-in-out;transition:-webkit-transform 500ms ease-in-out;transition:transform 500ms ease-in-out;transition:transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out}.server-info-container .info-body{display:-ms-grid;display:grid}.server-info-container:hover{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.info-body ul{display:-ms-grid;display:grid;grid-template-areas:"state state name name flag flag" - "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: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:3px}.info-body ul li .td-padding{padding-left:0.5em} +body.transition-theme,body.transition-theme *,body.transition-theme *:before,body.transition-theme *:after{-webkit-transition:400ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important;transition:400ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important;-webkit-transition-delay:0 !important;transition-delay:0 !important}body.transition-sidebar,body.transition-sidebar *,body.transition-sidebar *:before,body.transition-sidebar *:after{-webkit-transition:100ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important;transition:100ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important;-webkit-transition-delay:0 !important;transition-delay:0 !important}body[data-theme="dark"]{background-color:#121212}body[data-theme="dark"] .dark-light-toggle .switcher{background-color:#124b8c}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>.progress-bar{background-color:#1670c5 !important}body[data-theme="dark"] .info-body .ui.progress.warning>.progress-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:20px;right:30px;-webkit-transition:background-color 0.3s, opacity 0.5s, visibility 0.5s;transition:background-color 0.3s, opacity 0.5s, visibility 0.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}@media (max-width: 500px){#back-to-top{background-color:#975fe4}#back-to-top:hover,#back-to-top:active{background-color:#7b33dd}}@media (max-width: 500px){.sidebar-container{display:none}}.sidebar-container ul{position:fixed;top:50%;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:10;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;right:0}.sidebar-container ul li+li{margin-top:1.5em}.sidebar-container ul li{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0.4em 0 0.4em 0;color:#f2f2f2;cursor:pointer;height:2em;-webkit-box-shadow:0 2px 3px -1px rgba(47,47,47,0.2);box-shadow:0 2px 3px -1px rgba(47,47,47,0.2);width:35px;border-radius:0.5em 0 0 0.5em;border:1px solid rgba(255,255,255,0.2)}@media (min-width: 1400px){.sidebar-container ul li{height:2.6em;width:45px}}.sidebar-container ul li:first-child{background-color:#fbb142}.sidebar-container ul li:nth-child(2){background-color:#124b8c}.sidebar-container ul li:nth-child(3){background-color:#2f2f2f}.sidebar-container ul li:last-child{background-color:#555}.sidebar-container ul li i.fas{font-size:1em;width:36px;text-align:center;position:relative;top:0.04em}.sidebar-container ul li .fas.fa-sun{font-size:1.3em}@media (min-width: 1400px){.sidebar-container ul li .fas.fa-sun{font-size:1.6em}}.sidebar-container ul li .fas.fa-moon{font-size:1.2em}@media (min-width: 1400px){.sidebar-container ul li .fas.fa-moon{font-size:1.5em}}@media (min-width: 1400px){.sidebar-container ul li .fas.fa-th{font-size:1.45em}}.sidebar-container ul li .fas.fa-list-ul{font-size:1.15em}@media (min-width: 1400px){.sidebar-container ul li .fas.fa-list-ul{font-size:1.5em}}.sidebar-container ul li span{font-size:1em;left:36px;position:absolute;opacity:0;visibility:hidden;font-weight:bold}.sidebar-container ul li:hover{width:110px !important;-webkit-box-shadow:0 2px 10px -1px rgba(0,0,0,0.1);box-shadow:0 2px 10px -1px rgba(0,0,0,0.1)}.sidebar-container ul li:hover span{visibility:visible;opacity:1;-webkit-transition-delay:90ms;transition-delay:90ms}.sidebar-container ul li:hover i{opacity:1}.sidebar-container ul li:hover i.fa-sun{-webkit-animation:rotateSun 3s linear infinite;animation:rotateSun 3s linear infinite}@-webkit-keyframes rotateSun{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotateSun{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.sidebar-container ul li:hover i.fa-moon{-webkit-animation:rotateMoon 2s linear infinite;animation:rotateMoon 2s linear infinite}@-webkit-keyframes rotateMoon{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes rotateMoon{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.sidebar-container ul li:hover i.fa-th{-webkit-animation:rotateTh 1s linear infinite;animation:rotateTh 1s linear infinite}@-webkit-keyframes rotateTh{0%{-webkit-transform:perspective(400px) rotateY(0);transform:perspective(400px) rotateY(0)}100%{-webkit-transform:perspective(400px) rotateY(180deg);transform:perspective(400px) rotateY(180deg)}}@keyframes rotateTh{0%{-webkit-transform:perspective(400px) rotateY(0);transform:perspective(400px) rotateY(0)}100%{-webkit-transform:perspective(400px) rotateY(180deg);transform:perspective(400px) rotateY(180deg)}}.sidebar-container ul li:hover i.fa-list-ul{-webkit-animation:rotateList 1s linear infinite;animation:rotateList 1s linear infinite}@-webkit-keyframes rotateList{0%{-webkit-transform:perspective(400px) rotateY(0);transform:perspective(400px) rotateY(0)}100%{-webkit-transform:perspective(400px) rotateY(-180deg);transform:perspective(400px) rotateY(-180deg)}}@keyframes rotateList{0%{-webkit-transform:perspective(400px) rotateY(0);transform:perspective(400px) rotateY(0)}100%{-webkit-transform:perspective(400px) rotateY(-180deg);transform:perspective(400px) rotateY(-180deg)}}.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 1.6em;width:100%;margin:0 auto}@media (min-width: 1400px){.nav-bar{padding:.8em 3.2em}}@media (max-width: 1250px){.nav-bar{padding:.8em 1.2em}}@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}}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(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}*,*::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:4em auto;-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:3em;width:calc(100vw - 3em)}}@media (max-width: 500px){#app{-ms-grid-columns:1fr;grid-template-columns:1fr;grid-gap:1em;grid-row-gap:3em;width:calc(100vw - 2em);margin:2em auto 4em}}.server-info-container{background-color:#f1f1f2;display:-ms-grid;display:grid;font-size:0.9em;border-radius:5px;border:1px solid #d9d9d9;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24);-webkit-transition:-webkit-transform 500ms ease-in-out;transition:-webkit-transform 500ms ease-in-out;transition:transform 500ms ease-in-out;transition:transform 500ms ease-in-out, -webkit-transform 500ms ease-in-out}.server-info-container .info-body{display:-ms-grid;display:grid}.server-info-container:hover{-webkit-transform:translateY(-10px);transform:translateY(-10px)}.info-body ul{display:-ms-grid;display:grid;grid-template-areas:"state state name name flag flag" "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: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:nth-last-child(-n+3) .progress-bar{-webkit-animation:progress-bar-stripes 2s linear infinite;animation:progress-bar-stripes 2s linear infinite;background-image:linear-gradient(135deg, rgba(255,255,255,0.15) 25%, transparent 25%, transparent 50%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.15) 75%, transparent 75%, transparent)}.info-body:nth-last-child(-n+3) .progress-bar,.info-body:nth-last-child(-n+3) .ui.progress{background-color:lightgray;background-size:40px 40px;border-radius:4px}.info-body:nth-last-child(-n+3) .ui.progress{border:1px solid #bfbfbf}.info-body:nth-last-child(-n+3) .ui.progress.fine .progress-bar{background-color:#53b449}.info-body:nth-last-child(-n+3) .ui.progress.warning .progress-bar{background-color:#fbb142}.info-body:nth-last-child(-n+3) .ui.progress.error .progress-bar{background-color:#ef4b4c}@-webkit-keyframes progress-bar-stripes{from{background-position:0 0}to{background-position:40px 0}}@keyframes progress-bar-stripes{from{background-position:0 0}to{background-position:40px 0}}.dark-light-toggle{display:none}@media (max-width: 500px){.dark-light-toggle{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:999;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:45px;height:45px;position:fixed;bottom:80px;right:30px;-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-light-toggle .switcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;padding:.48em;border-radius:50%;border:1px solid rgba(255,255,255,0.1);background-color:#fbb142}.dark-light-toggle .switcher input[type="checkbox"]{height:0;width:0;display:none}.dark-light-toggle .switcher input[type="checkbox"]:checked+div{-webkit-transform:rotate(-900deg);transform:rotate(-900deg)}.dark-light-toggle .fa-adjust{font-size:1.8em;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;color:#f2f2f2}} diff --git a/resource/static/theme-daynight/css/service.css b/resource/static/theme-daynight/css/service.css index a3d1c3f..760c0f0 100644 --- a/resource/static/theme-daynight/css/service.css +++ b/resource/static/theme-daynight/css/service.css @@ -1 +1 @@ -body.transition-theme,body.transition-theme *,body.transition-theme *:before,body.transition-theme *:after{-webkit-transition:400ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important;transition:400ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important;-webkit-transition-delay:0 !important;transition-delay:0 !important}body[data-theme="dark"]{background-color:#121212}body[data-theme="dark"] .monitor-header h2{color:#e1e1e1}body[data-theme="dark"] .monitor-header h2 span{color:#a6a6a6}body[data-theme="dark"] .monitor-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"] .monitor-info-container .monitor-state-text{color:#959595}body[data-theme="dark"] .corner{background-color:#161616;border:1px solid rgba(255,255,255,0.15)}body[data-theme="dark"] .corner.good{background-color:#46973d}body[data-theme="dark"] .corner.warning{background-color:#975fe4}body[data-theme="dark"] .corner.danger{background-color:#940d0e}body[data-theme="dark"] .corner:hover{background-color:#2b2b2b}body[data-theme="dark"] .monitor-state-dot{background:#46973d}body[data-theme="dark"] .monitor-state-dot.warning{color:#faa11a;background:#faa11a}body[data-theme="dark"] .monitor-state-dot:after{background:#46973d}body[data-theme="dark"] .sub-content{color:#f2f2f2;background-color:#092f52;border:1px solid rgba(255,255,255,0.1);position:relative;z-index:10}body[data-theme="dark"] .sub-content::after{content:"";width:0;height:0;display:block;position:absolute;z-index:10;border:0;border-left:.5em solid transparent;border-right:.5em solid transparent;margin-left:-.5em;left:50%;border-top:.5em solid #092f52;bottom:-.5em}@media (max-width: 900px){body[data-theme="dark"] .sub-content{position:relative;z-index:10}body[data-theme="dark"] .sub-content::after{content:"";width:0;height:0;display:block;position:absolute;z-index:10;border:0;border-left:.5em solid transparent;border-right:.5em solid transparent;margin-left:-.5em;left:50%;border-bottom:.5em solid #092f52;top:-.5em}}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}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, 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}}@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}}body[data-gridlist="grid"] .monitor-container{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4, 1fr);-ms-grid-rows:1fr;grid-template-rows:1fr}@media (max-width: 1250px){body[data-gridlist="grid"] .monitor-container{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr)}}@media (max-width: 900px){body[data-gridlist="grid"] .monitor-container{-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr}}@media (max-width: 500px){body[data-gridlist="grid"] .monitor-container{grid-gap:1em;grid-row-gap:3em}}body[data-gridlist="grid"] .monitor-info-container{grid-template-areas:"status name name uptime" "corner corner corner corner";grid-row-gap:0.8em}@media (max-width: 500px){body[data-gridlist="grid"] .monitor-info-container{grid-template-areas:"name name name name" "status status uptime uptime" "corner corner corner corner";-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;grid-row-gap:0.3em}}@media (max-width: 500px){body[data-gridlist="grid"] .monitor-info-container .monitor-name{padding:0}}body[data-gridlist="grid"] .corner-container{-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6, 1fr);-ms-grid-rows:(1fr)[5];grid-template-rows:repeat(5, 1fr);grid-gap:1em}@media (max-width: 1250px){body[data-gridlist="grid"] .corner-container{grid-gap:0.9em}}@media (max-width: 900px){body[data-gridlist="grid"] .corner-container{grid-gap:1em}}@media (max-width: 500px){body[data-gridlist="grid"] .corner-container{grid-gap:0.6em}}.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}.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:.6em .88em;border-radius:10px;border:1px solid rgba(255,255,255,0.1);background:#fbb142}.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"]: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(-135deg);transform:rotate(-135deg)}.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:#9e9e9e}.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(-360deg);transform:rotate(-360deg)}.grid-mode-toggle .switcher{background-color:#1670c5;border:1px solid rgba(255,255,255,0.1)}.grid-mode-toggle .switcher input[type="checkbox"]+div>i{-webkit-transform-style:preserve-3d;transform-style:preserve-3d}.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:rotateY(-360deg);transform:rotateY(-360deg)}.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:rotateY(360deg);transform:rotateY(360deg)}*,*::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}article{display:-ms-grid;display:grid;-ms-grid-rows:auto auto 1fr auto;grid-template-rows:auto auto 1fr auto;min-height:100vh;-ms-grid-columns:100%;grid-template-columns:100%}main{display:-ms-grid;display:grid;-ms-grid-columns:1fr;grid-template-columns:1fr;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){main{width:calc(100vw - 4em)}}@media (max-width: 900px){main{width:calc(100vw - 3em)}}@media (max-width: 500px){main{width:calc(100vw - 2em)}}.monitor-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;font-size:1.6em;color:#2f2f2f;padding-bottom:1.5em;line-height:1.5em}@media (max-width: 500px){.monitor-header{font-size:1.3em}}.monitor-header h4{font-size:1.1rem;color:#737373}.monitor-container{display:-ms-grid;display:grid;grid-gap:2.5em}@media (max-width: 500px){.monitor-container{grid-gap:3em}}.monitor-info-container{display:-ms-grid;display:grid;grid-template-areas:"status name corner uptime";-ms-grid-columns:auto 1fr 10fr 1fr;grid-template-columns:auto 1fr 10fr 1fr;-ms-grid-rows:auto;grid-template-rows:auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0.6em 0.5em;background-color:#f1f1f2;border-radius:5px;border:1px solid #d9d9d9;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24)}@media (max-width: 1250px){.monitor-info-container{grid-template-areas:"status name name uptime" "corner corner corner corner"}}@media (max-width: 500px){.monitor-info-container{grid-row-gap:0.6em}}.monitor-info-container .monitor-state{-ms-grid-row:1;-ms-grid-column:1;grid-area:status;padding:.5em}.monitor-info-container .monitor-name{-ms-grid-row:1;-ms-grid-column:2;grid-area:name;padding:.5em;-ms-grid-column-align:center;justify-self:center;word-break:keep-all;font-weight:bold}.monitor-info-container .monitor-uptime{-ms-grid-row:1;-ms-grid-column:4;grid-area:uptime;padding:.5em;-ms-grid-column-align:center;justify-self:center}.monitor-info-container .corner-container{-ms-grid-row:1;-ms-grid-column:3;grid-area:corner}.monitor-info-container .monitor-state-text{padding-left:.5em;word-break:keep-all}.monitor-info-container .monitor-state-dot{width:14px;height:14px;display:inline-block;border-radius:50%;color:#53b449;background:#53b449;position:relative;-webkit-transform:none;transform:none}@media (max-width: 500px){.monitor-info-container .monitor-state-dot{width:12px;height:12px}}.monitor-info-container .monitor-state-dot.warning{color:#fbb142;background:#fbb142}.monitor-info-container .monitor-state-dot.danger{color:#ef4b4c;background:#ef4b4c}.monitor-info-container .monitor-state-dot:after{content:"";opacity:1;width:100%;height:100%;position:absolute;top:0;left:0;background:#53b449;border-radius:50%;-webkit-animation:dotwave 1.5s infinite;animation:dotwave 1.5s infinite}.monitor-info-container .monitor-state-dot.warning:after{background:#fbb142}.monitor-info-container .monitor-state-dot.danger:after{background:#ef4b4c}@-webkit-keyframes dotwave{0%{opacity:0.6}70%{opacity:0;-webkit-transform:scale(2.5);transform:scale(2.5)}100%{opacity:0.1}}@keyframes dotwave{0%{opacity:0.6}70%{opacity:0;-webkit-transform:scale(2.5);transform:scale(2.5)}100%{opacity:0.1}}.corner-container{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[30];grid-template-columns:repeat(30, 1fr);-ms-grid-rows:1fr;grid-template-rows:1fr;grid-gap:0.5em;padding:.5em;-ms-flex-pack:distribute;justify-content:space-around}@media (max-width: 900px){.corner-container{-ms-grid-columns:(1fr)[15];grid-template-columns:repeat(15, 1fr);-ms-grid-rows:1fr 1fr;grid-template-rows:1fr 1fr;grid-gap:0.8em}}@media (max-width: 500px){.corner-container{grid-gap:0.4em;padding:0}}.corner-container .corner{background-color:lightgrey;cursor:pointer;position:relative;border-radius:5px}.corner-container .corner.good{background-color:#53b449}.corner-container .corner.warning{background-color:#fbb142}.corner-container .corner.danger{background-color:#ef4b4c}.corner-container .corner:hover{background-color:grey;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24)}.corner-container .corner:before{content:"";float:left;padding-top:100%}.corner-container .corner:hover .sub-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:fixed}.sub-content{display:none;color:#f2f2f2;background-color:#2a3950;padding:0.3em 1em;z-index:999;position:relative;z-index:10;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform-origin:bottom right 2cm;transform-origin:bottom right 2cm;-webkit-transition:all ease-in-out 200ms;transition:all ease-in-out 200ms;border-radius:6px;line-height:1.2em}.sub-content::after{content:"";width:0;height:0;display:block;position:absolute;z-index:10;border:0;border-left:.5em solid transparent;border-right:.5em solid transparent;margin-left:-.5em;left:50%;border-top:.5em solid #2a3950;bottom:-.5em}@media (max-width: 900px){.sub-content{position:relative;z-index:10}.sub-content::after{content:"";width:0;height:0;display:block;position:absolute;z-index:10;border:0;border-left:.5em solid transparent;border-right:.5em solid transparent;margin-left:-.5em;left:50%;border-bottom:.5em solid #2a3950;top:-.5em}}.sub-content li{list-style:none}.sub-content li:first-child{color:#a6a6a6;font-size:0.8em;letter-spacing:1px}.sub-content li:nth-child(2){font-size:1.1em;line-height:1.35em}.sub-content li:last-child{color:#bfbfbf;font-size:0.8em} +body.transition-theme,body.transition-theme *,body.transition-theme *:before,body.transition-theme *:after{-webkit-transition:400ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important;transition:400ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important;-webkit-transition-delay:0 !important;transition-delay:0 !important}body[data-theme="dark"]{background-color:#121212}body[data-theme="dark"] .monitor-header h2{color:#e1e1e1}body[data-theme="dark"] .monitor-header h2 span{color:#a6a6a6}body[data-theme="dark"] .monitor-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"] .monitor-info-container .monitor-state-text{color:#959595}body[data-theme="dark"] .corner{background-color:#161616;border:1px solid rgba(255,255,255,0.15)}body[data-theme="dark"] .corner.good{background-color:#46973d}body[data-theme="dark"] .corner.warning{background-color:#fa9c10}body[data-theme="dark"] .corner.danger{background-color:#940d0e}body[data-theme="dark"] .corner:hover{background-color:#2b2b2b}body[data-theme="dark"] .monitor-state-dot{background:#46973d}body[data-theme="dark"] .monitor-state-dot.warning{color:#faa11a;background:#faa11a}body[data-theme="dark"] .monitor-state-dot:after{background:#46973d}body[data-theme="dark"] .sub-content{color:#f2f2f2;background-color:#092f52;border:1px solid rgba(255,255,255,0.1);position:relative;z-index:10}body[data-theme="dark"] .sub-content::after{content:"";width:0;height:0;display:block;position:absolute;z-index:10;border:0;border-left:.5em solid transparent;border-right:.5em solid transparent;margin-left:-.5em;left:50%;border-top:.5em solid #092f52;bottom:-.5em}@media (max-width: 900px){body[data-theme="dark"] .sub-content{position:relative;z-index:10}body[data-theme="dark"] .sub-content::after{content:"";width:0;height:0;display:block;position:absolute;z-index:10;border:0;border-left:.5em solid transparent;border-right:.5em solid transparent;margin-left:-.5em;left:50%;border-bottom:.5em solid #092f52;top:-.5em}}body[data-theme="dark"] .service-mobile-toggle.smt-active ul li:nth-child(2){background-color:#124b8c}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:20px;right:30px;-webkit-transition:background-color 0.3s, opacity 0.5s, visibility 0.5s;transition:background-color 0.3s, opacity 0.5s, visibility 0.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}@media (max-width: 500px){#back-to-top{background-color:#975fe4}#back-to-top:hover,#back-to-top:active{background-color:#7b33dd}}@media (max-width: 500px){.sidebar-container{display:none}}.sidebar-container ul{position:fixed;top:50%;list-style:none;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-transform:translateY(-50%);transform:translateY(-50%);z-index:10;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;right:0}.sidebar-container ul li+li{margin-top:1.5em}.sidebar-container ul li{position:relative;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0.4em 0 0.4em 0;color:#f2f2f2;cursor:pointer;height:2em;-webkit-box-shadow:0 2px 3px -1px rgba(47,47,47,0.2);box-shadow:0 2px 3px -1px rgba(47,47,47,0.2);width:35px;border-radius:0.5em 0 0 0.5em;border:1px solid rgba(255,255,255,0.2)}@media (min-width: 1400px){.sidebar-container ul li{height:2.6em;width:45px}}.sidebar-container ul li:first-child{background-color:#fbb142}.sidebar-container ul li:nth-child(2){background-color:#124b8c}.sidebar-container ul li:nth-child(3){background-color:#2f2f2f}.sidebar-container ul li:last-child{background-color:#555}.sidebar-container ul li i.fas{font-size:1em;width:36px;text-align:center;position:relative;top:0.04em}.sidebar-container ul li .fas.fa-sun{font-size:1.3em}@media (min-width: 1400px){.sidebar-container ul li .fas.fa-sun{font-size:1.6em}}.sidebar-container ul li .fas.fa-moon{font-size:1.2em}@media (min-width: 1400px){.sidebar-container ul li .fas.fa-moon{font-size:1.5em}}@media (min-width: 1400px){.sidebar-container ul li .fas.fa-th{font-size:1.45em}}.sidebar-container ul li .fas.fa-list-ul{font-size:1.15em}@media (min-width: 1400px){.sidebar-container ul li .fas.fa-list-ul{font-size:1.5em}}.sidebar-container ul li span{font-size:1em;left:36px;position:absolute;opacity:0;visibility:hidden;font-weight:bold}.sidebar-container ul li:hover{width:110px !important;-webkit-box-shadow:0 2px 10px -1px rgba(0,0,0,0.1);box-shadow:0 2px 10px -1px rgba(0,0,0,0.1)}.sidebar-container ul li:hover span{visibility:visible;opacity:1;-webkit-transition-delay:90ms;transition-delay:90ms}.sidebar-container ul li:hover i{opacity:1}.sidebar-container ul li:hover i.fa-sun{-webkit-animation:rotateSun 3s linear infinite;animation:rotateSun 3s linear infinite}@-webkit-keyframes rotateSun{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}@keyframes rotateSun{to{-webkit-transform:rotate(360deg);transform:rotate(360deg)}}.sidebar-container ul li:hover i.fa-moon{-webkit-animation:rotateMoon 2s linear infinite;animation:rotateMoon 2s linear infinite}@-webkit-keyframes rotateMoon{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@keyframes rotateMoon{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}50%{-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}100%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}.sidebar-container ul li:hover i.fa-th{-webkit-animation:rotateTh 1s linear infinite;animation:rotateTh 1s linear infinite}@-webkit-keyframes rotateTh{0%{-webkit-transform:perspective(400px) rotateY(0);transform:perspective(400px) rotateY(0)}100%{-webkit-transform:perspective(400px) rotateY(180deg);transform:perspective(400px) rotateY(180deg)}}@keyframes rotateTh{0%{-webkit-transform:perspective(400px) rotateY(0);transform:perspective(400px) rotateY(0)}100%{-webkit-transform:perspective(400px) rotateY(180deg);transform:perspective(400px) rotateY(180deg)}}.sidebar-container ul li:hover i.fa-list-ul{-webkit-animation:rotateList 1s linear infinite;animation:rotateList 1s linear infinite}@-webkit-keyframes rotateList{0%{-webkit-transform:perspective(400px) rotateY(0);transform:perspective(400px) rotateY(0)}100%{-webkit-transform:perspective(400px) rotateY(-180deg);transform:perspective(400px) rotateY(-180deg)}}@keyframes rotateList{0%{-webkit-transform:perspective(400px) rotateY(0);transform:perspective(400px) rotateY(0)}100%{-webkit-transform:perspective(400px) rotateY(-180deg);transform:perspective(400px) rotateY(-180deg)}}.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 1.6em;width:100%;margin:0 auto}@media (min-width: 1400px){.nav-bar{padding:.8em 3.2em}}@media (max-width: 1250px){.nav-bar{padding:.8em 1.2em}}@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}}body[data-gridlist="grid"] .monitor-container{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4, 1fr);-ms-grid-rows:1fr;grid-template-rows:1fr}@media (max-width: 1250px){body[data-gridlist="grid"] .monitor-container{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3, 1fr)}}@media (max-width: 900px){body[data-gridlist="grid"] .monitor-container{-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr}}@media (max-width: 500px){body[data-gridlist="grid"] .monitor-container{grid-gap:1em;grid-row-gap:3em}}body[data-gridlist="grid"] .monitor-info-container{grid-template-areas:"status name name uptime" "corner corner corner corner";grid-row-gap:0.8em}@media (max-width: 500px){body[data-gridlist="grid"] .monitor-info-container{grid-template-areas:"name name name name" "status status uptime uptime" "corner corner corner corner";-ms-grid-columns:1fr 1fr;grid-template-columns:1fr 1fr;grid-row-gap:0.3em}}@media (max-width: 500px){body[data-gridlist="grid"] .monitor-info-container .monitor-name{padding:0}}body[data-gridlist="grid"] .corner-container{-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6, 1fr);-ms-grid-rows:(1fr)[5];grid-template-rows:repeat(5, 1fr);grid-gap:1em}@media (max-width: 1250px){body[data-gridlist="grid"] .corner-container{grid-gap:0.9em}}@media (max-width: 900px){body[data-gridlist="grid"] .corner-container{grid-gap:1em}}@media (max-width: 500px){body[data-gridlist="grid"] .corner-container{grid-gap:0.6em}}*,*::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}article{display:-ms-grid;display:grid;-ms-grid-rows:auto 1fr auto;grid-template-rows:auto 1fr auto;min-height:100vh;-ms-grid-columns:100%;grid-template-columns:100%}main{display:-ms-grid;display:grid;-ms-grid-columns:1fr;grid-template-columns:1fr;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){main{width:calc(100vw - 4em)}}@media (max-width: 900px){main{width:calc(100vw - 3em)}}@media (max-width: 500px){main{width:calc(100vw - 2em)}}.monitor-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end;font-size:1.6em;color:#2f2f2f;padding-bottom:1.5em;line-height:1.5em}@media (max-width: 500px){.monitor-header{font-size:1.3em}}.monitor-header h4{font-size:1.1rem;color:#737373}.monitor-container{display:-ms-grid;display:grid;grid-gap:2.5em}@media (max-width: 500px){.monitor-container{grid-gap:3em}}.monitor-info-container{display:-ms-grid;display:grid;grid-template-areas:"status name corner uptime";-ms-grid-columns:auto 1fr 10fr 1fr;grid-template-columns:auto 1fr 10fr 1fr;-ms-grid-rows:auto;grid-template-rows:auto;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:0.6em 0.5em;background-color:#f1f1f2;border-radius:5px;border:1px solid #d9d9d9;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24)}@media (max-width: 1250px){.monitor-info-container{grid-template-areas:"status name name uptime" "corner corner corner corner"}}@media (max-width: 500px){.monitor-info-container{grid-row-gap:0.6em}}.monitor-info-container .monitor-state{-ms-grid-row:1;-ms-grid-column:1;grid-area:status;padding:.5em}.monitor-info-container .monitor-name{-ms-grid-row:1;-ms-grid-column:2;grid-area:name;padding:.5em;-ms-grid-column-align:center;justify-self:center;word-break:keep-all;font-weight:bold}.monitor-info-container .monitor-uptime{-ms-grid-row:1;-ms-grid-column:4;grid-area:uptime;padding:.5em;-ms-grid-column-align:center;justify-self:center}.monitor-info-container .corner-container{-ms-grid-row:1;-ms-grid-column:3;grid-area:corner}.monitor-info-container .monitor-state-text{padding-left:.5em;word-break:keep-all}.monitor-info-container .monitor-state-dot{width:14px;height:14px;display:inline-block;border-radius:50%;color:#53b449;background:#53b449;position:relative;-webkit-transform:none;transform:none}@media (max-width: 500px){.monitor-info-container .monitor-state-dot{width:12px;height:12px}}.monitor-info-container .monitor-state-dot.warning{color:#fbb142;background:#fbb142}.monitor-info-container .monitor-state-dot.danger{color:#ef4b4c;background:#ef4b4c}.monitor-info-container .monitor-state-dot:after{content:"";opacity:1;width:100%;height:100%;position:absolute;top:0;left:0;background:#53b449;border-radius:50%;-webkit-animation:dotwave 1.5s infinite;animation:dotwave 1.5s infinite}.monitor-info-container .monitor-state-dot.warning:after{background:#fbb142}.monitor-info-container .monitor-state-dot.danger:after{background:#ef4b4c}@-webkit-keyframes dotwave{0%{opacity:0.6}70%{opacity:0;-webkit-transform:scale(2.5);transform:scale(2.5)}100%{opacity:0.1}}@keyframes dotwave{0%{opacity:0.6}70%{opacity:0;-webkit-transform:scale(2.5);transform:scale(2.5)}100%{opacity:0.1}}.corner-container{display:-ms-grid;display:grid;-ms-grid-columns:(1fr)[30];grid-template-columns:repeat(30, 1fr);-ms-grid-rows:1fr;grid-template-rows:1fr;grid-gap:0.5em;padding:.5em;-ms-flex-pack:distribute;justify-content:space-around}@media (max-width: 900px){.corner-container{-ms-grid-columns:(1fr)[15];grid-template-columns:repeat(15, 1fr);-ms-grid-rows:1fr 1fr;grid-template-rows:1fr 1fr;grid-gap:0.8em}}@media (max-width: 500px){.corner-container{grid-gap:0.4em;padding:0}}.corner-container .corner{background-color:lightgrey;cursor:pointer;position:relative;border-radius:5px}.corner-container .corner.good{background-color:#53b449}.corner-container .corner.warning{background-color:#fbb142}.corner-container .corner.danger{background-color:#ef4b4c}.corner-container .corner:hover{background-color:grey;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24);box-shadow:0 1px 3px rgba(0,0,0,0.12),0 1px 3px rgba(0,0,0,0.24)}.corner-container .corner:before{content:"";float:left;padding-top:100%}.corner-container .corner:hover .sub-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;position:fixed}.sub-content{display:none;color:#f2f2f2;background-color:#2a3950;padding:0.3em 1em;z-index:999;position:relative;z-index:10;-webkit-transform-origin:50% 100%;transform-origin:50% 100%;-webkit-transform-origin:bottom right 2cm;transform-origin:bottom right 2cm;-webkit-transition:all ease-in-out 200ms;transition:all ease-in-out 200ms;border-radius:6px;line-height:1.2em}.sub-content::after{content:"";width:0;height:0;display:block;position:absolute;z-index:10;border:0;border-left:.5em solid transparent;border-right:.5em solid transparent;margin-left:-.5em;left:50%;border-top:.5em solid #2a3950;bottom:-.5em}@media (max-width: 900px){.sub-content{position:relative;z-index:10}.sub-content::after{content:"";width:0;height:0;display:block;position:absolute;z-index:10;border:0;border-left:.5em solid transparent;border-right:.5em solid transparent;margin-left:-.5em;left:50%;border-bottom:.5em solid #2a3950;top:-.5em}}.sub-content li{list-style:none}.sub-content li:first-child{color:#a6a6a6;font-size:0.8em;letter-spacing:1px}.sub-content li:nth-child(2){font-size:1.1em;line-height:1.35em}.sub-content li:last-child{color:#bfbfbf;font-size:0.8em}@media (max-width: 500px){.service-mobile-toggle.smt-active ul li:first-child{z-index:10;position:fixed;bottom:80px;right:30px;-webkit-transform:rotate(135deg);transform:rotate(135deg)}.service-mobile-toggle.smt-active ul li:nth-child(2){z-index:4;position:fixed;bottom:80px;right:85px;-webkit-transform:scale(1);transform:scale(1);-webkit-transition-delay:0.05s;transition-delay:0.05s;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.service-mobile-toggle.smt-active ul li:last-child{z-index:3;position:fixed;bottom:80px;right:140px;-webkit-transform:scale(1);transform:scale(1);-webkit-transition-delay:0.1s;transition-delay:0.1s;-webkit-transform:rotate(180deg);transform:rotate(180deg)}}.service-mobile-toggle{display:none}@media (max-width: 500px){.service-mobile-toggle{display:-webkit-box;display:-ms-flexbox;display:flex;z-index:999;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:45px;height:45px;position:fixed;bottom:80px;right:30px;-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)}.service-mobile-toggle ul li{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;list-style:none;border-radius:50%;min-width:45px;min-height:45px;cursor:pointer;-webkit-transition:all 400ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important;transition:all 400ms cubic-bezier(0.995, -0.265, 0.855, 0.505) !important}.service-mobile-toggle ul li:first-child{z-index:5;position:fixed;bottom:80px;right:30px;background-color:#02a898}.service-mobile-toggle ul li:nth-child(2){z-index:4;position:fixed;bottom:80px;right:30px;-webkit-transform:scale(0);transform:scale(0);background-color:#fbb142}.service-mobile-toggle ul li:last-child{z-index:3;position:fixed;bottom:80px;right:30px;-webkit-transform:scale(0);transform:scale(0);background-color:#626262}.service-mobile-toggle .switcher{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:pointer;padding:.48em;border:1px solid rgba(255,255,255,0.1)}.service-mobile-toggle .switcher input[type="checkbox"]{height:0;width:0;display:none}.service-mobile-toggle .switcher input[type="checkbox"]:checked+div{-webkit-transform:rotate(-900deg);transform:rotate(-900deg)}.service-mobile-toggle .switcher input[type="checkbox"][name="service-grid"]:checked+div{-webkit-transform:rotate(-630deg);transform:rotate(-630deg)}.service-mobile-toggle .fa-plus,.service-mobile-toggle .fa-grip-horizontal,.service-mobile-toggle .fa-adjust{font-size:1.8em;color:#f2f2f2}} diff --git a/resource/static/theme-daynight/js/main.js b/resource/static/theme-daynight/js/main.js index 1454976..98ced7a 100644 --- a/resource/static/theme-daynight/js/main.js +++ b/resource/static/theme-daynight/js/main.js @@ -1 +1 @@ -function callAllJsFiles(t){var e=document.createElement("script");e.setAttribute("type","text/javascript"),e.setAttribute("src",t),document.getElementsByTagName("head")[0].appendChild(e)}callAllJsFiles("/static/theme-daynight/js/mode.js?v202101241800"),callAllJsFiles("/static/theme-daynight/js/navtop.js?v202101241800"); +function callAllJsFiles(t){var e=document.createElement("script");e.setAttribute("type","text/javascript"),e.setAttribute("src",t),document.getElementsByTagName("head")[0].appendChild(e)}callAllJsFiles("/static/theme-daynight/js/mode.js?v202101290086"),callAllJsFiles("/static/theme-daynight/js/navtop.js?v202101290086"); diff --git a/resource/static/theme-daynight/js/mode.js b/resource/static/theme-daynight/js/mode.js index 4cdb2bb..30ce180 100644 --- a/resource/static/theme-daynight/js/mode.js +++ b/resource/static/theme-daynight/js/mode.js @@ -1 +1 @@ -var darkCheckBox=document.querySelector("input[name=theme]"),themeStatus=document.getElementsByTagName("BODY")[0];darkCheckBox.addEventListener("change",(function(){this.checked?(trans(),themeStatus.setAttribute("data-theme","dark")):(trans(),themeStatus.setAttribute("data-theme","light"))}));let trans=()=>{themeStatus.classList.add("transition-theme"),window.setTimeout(()=>{themeStatus.classList.remove("transition-theme")},1e3)};var listCheckBox=document.querySelector("input[name=grid]");themeStatus=document.getElementsByTagName("BODY")[0];listCheckBox.addEventListener("change",(function(){this.checked?(transs(),themeStatus.setAttribute("data-gridlist","list")):(transs(),themeStatus.setAttribute("data-gridlist","grid"))}));let transs=()=>{themeStatus.classList.add("transition-theme"),window.setTimeout(()=>{themeStatus.classList.remove("transition-theme")},1e3)}; +let darkCheckBox=$("input[name=theme]"),listCheckBox=$("input[name=grid]");darkCheckBox.change((function(){this.checked?(trans(),$("body").attr("data-theme","dark")):(trans(),$("body").attr("data-theme","light"))})),listCheckBox.change((function(){this.checked?(trans(),$("body").attr("data-gridlist","list")):(trans(),$("body").attr("data-gridlist","grid"))}));let servicedarkCheckBox=$("input[name=service-theme]"),servicelistCheckBox=$("input[name=service-grid]");function lightModeSwitch(){trans(),$("body").attr("data-theme","light")}function darkModeSwitch(){trans(),$("body").attr("data-theme","dark")}function gridModeSwitch(){trans(),$("body").attr("data-gridlist","grid")}function listModeSwitch(){trans(),$("body").attr("data-gridlist","list")}servicedarkCheckBox.change((function(){this.checked?(trans(),$("body").attr("data-theme","dark"),$(".service-mobile-toggle").toggleClass("smt-active")):(trans(),$("body").attr("data-theme","light"),$(".service-mobile-toggle").toggleClass("smt-active"))})),servicelistCheckBox.change((function(){this.checked?(trans(),$("body").attr("data-gridlist","list"),$(".service-mobile-toggle").toggleClass("smt-active")):(trans(),$("body").attr("data-gridlist","grid"),$(".service-mobile-toggle").toggleClass("smt-active"))})),$(document).ready((function(){$(".sidebar-container ul li:first-child").click(lightModeSwitch),$(".sidebar-container ul li:nth-child(2)").click(darkModeSwitch),$(".sidebar-container ul li:nth-child(3)").click(gridModeSwitch),$(".sidebar-container ul li:last-child").click(listModeSwitch)}));let trans=()=>{$("body").addClass("transition-theme"),window.setTimeout(()=>{$("body").removeClass("transition-theme")},1e3)},transSidebar=()=>{$("body").addClass("transition-sidebar"),window.setTimeout(()=>{$("body").removeClass("transition-sidebar")},1e3)};$(document).ready((function(){$(".sidebar-container ul li").hover((function(){transSidebar()}))})); \ No newline at end of file diff --git a/resource/static/theme-daynight/js/navtop.js b/resource/static/theme-daynight/js/navtop.js index 41f9a22..ad67ee3 100644 --- a/resource/static/theme-daynight/js/navtop.js +++ b/resource/static/theme-daynight/js/navtop.js @@ -1 +1 @@ -$(document).ready((function(){$(".hamburger").click((function(){$(this).toggleClass("is-active"),$(".nav-menu").toggleClass("active"),$(".nav-bar").toggleClass("active")}))}));var btn=$("#back-to-top");$(window).scroll((function(){$(window).scrollTop()>300?btn.addClass("show"):btn.removeClass("show")})),btn.on("click",(function(o){o.preventDefault(),$("html, body").animate({scrollTop:0},"300")})); \ No newline at end of file +$(document).ready((function(){$(".hamburger").click((function(){$(this).toggleClass("is-active"),$(".nav-menu").toggleClass("active"),$(".nav-bar").toggleClass("active")}))}));var btn=$("#back-to-top");$(window).scroll((function(){$(window).scrollTop()>300?btn.addClass("show"):btn.removeClass("show")})),btn.on("click",(function(o){o.preventDefault(),$(".service-mobile-toggle").hasClass("smt-active")&&($(".service-mobile-toggle ").removeClass("smt-active"),$("html, body").animate({scrollTop:0},"300")),$("html, body").animate({scrollTop:0},"300")})); \ No newline at end of file diff --git a/resource/static/theme-daynight/js/service.js b/resource/static/theme-daynight/js/service.js index a39c08a..9d337a5 100644 --- a/resource/static/theme-daynight/js/service.js +++ b/resource/static/theme-daynight/js/service.js @@ -1 +1 @@ -function callAllJsFiles(t){var e=document.createElement("script");e.setAttribute("type","text/javascript"),e.setAttribute("src",t),document.getElementsByTagName("head")[0].appendChild(e)}callAllJsFiles("/static/theme-daynight/js/navtop.js?v202101241800"),callAllJsFiles("/static/theme-daynight/js/mode.js?v202101241800"),callAllJsFiles("/static/theme-daynight/js/tooltip.js?v202101241800"),$(".corner").hover((function(){$(this).attr("aria-expanded","true")}));const hour=new Date(Date.now()).getHours();(hour>17||hour<4)&&(document.querySelector("input[name=theme]").checked=!0,document.getElementsByTagName("BODY")[0].setAttribute("data-theme","dark")); \ No newline at end of file +function callAllJsFiles(e){var t=document.createElement("script");t.setAttribute("type","text/javascript"),t.setAttribute("src",e),document.getElementsByTagName("head")[0].appendChild(t)}callAllJsFiles("/static/theme-daynight/js/navtop.js?v202101290086"),callAllJsFiles("/static/theme-daynight/js/mode.js?v202101290086"),callAllJsFiles("/static/theme-daynight/js/tooltip.js?v202101290086"),$(".corner").hover((function(){$(this).attr("aria-expanded","true"===$(this).attr("aria-expanded")?"false":"true")}));const hour=new Date(Date.now()).getHours();(hour>17||hour<4)&&(document.querySelector("input[name=service-theme]").checked=!0,document.getElementsByTagName("BODY")[0].setAttribute("data-theme","dark")),$(document).ready((function(){$(".fa-plus").click((function(){$(".service-mobile-toggle").toggleClass("smt-active")}))})); diff --git a/resource/template/theme-daynight/home.html b/resource/template/theme-daynight/home.html index a00ed02..1e3df9d 100644 --- a/resource/template/theme-daynight/home.html +++ b/resource/template/theme-daynight/home.html @@ -1,282 +1,273 @@ {{define "theme-daynight/home"}} - + - - - - - + + + + {{.Title}} - - + + - {{if ts .CustomCode}} - {{.CustomCode|safe}} - {{end}} - + {{if ts .CustomCode}} {{.CustomCode|safe}} {{end}} + - +
- -
-
-
-
-
-
-
- -
- -
-
-
-
-
-
-
    -
  • -
    -

    @#server.live?'Running':'Down'#@

    -
    -
    • -
  • -

    @#server.Name#@

    -
    • -
    • -
  • @#server.Host.Platform#@
    • -
  • @#server.Host.CountryCode.toUpperCase()#@
    • -
  • @#formatByteSize(server.State.MemUsed)#@ / @#formatByteSize(server.Host.MemTotal)#@
    • -
  • @#server.State?secondToDate(server.State.Uptime):'-'#@
    • -
  • @#formatByteSize(server.State.SwapUsed)#@ / @#formatByteSize(server.Host.SwapTotal)#@
    • -
  • @#formatByteSize(server.State.DiskUsed)#@ / @#formatByteSize(server.Host.DiskTotal)#@
    • -
  • @#formatByteSize(server.State.NetInTransfer)#@ (@#formatByteSize(server.State.NetInSpeed)#@/s)
    • -
  • @#formatByteSize(server.State.NetOutTransfer)#@ (@#formatByteSize(server.State.NetOutSpeed)#@/s)
    • -
  • -
    -
    -

    CPU

    -
    -
    -
    -

    @#formatPercent(server.live,server.State.CPU,100).percent#@%

    -
    -
    -
    -
    • -
  • -
    -
    -

    RAM

    -
    -
    -
    -

    @#parseInt(server.State?server.State.MemUsed/server.Host.MemTotal*100:0)#@%

    -
    -
    -
    -
    • -
  • -
    -
    -

    硬盘

    -
    -
    -
    -

    @#parseInt(server.State?server.State.DiskUsed/server.Host.DiskTotal*100:0)#@%

    -
    -
    -
    -
    • -
-
+ + +
+
+ + - + - - + {{end}} diff --git a/resource/template/theme-daynight/service.html b/resource/template/theme-daynight/service.html index f9bd506..8382d82 100644 --- a/resource/template/theme-daynight/service.html +++ b/resource/template/theme-daynight/service.html @@ -7,14 +7,12 @@ {{.Title}} - + - {{if ts .CustomCode}} - {{.CustomCode|safe}} - {{end}} + {{if ts .CustomCode}} {{.CustomCode|safe}} {{end}} @@ -33,7 +31,7 @@
  • 首页
  • 服务状态
    • {{if .Admin}} -
  • 管理后台
    • +
  • 管理后台
    • {{else}}
  • 登录
    • {{end}} @@ -41,28 +39,6 @@ -
    -
    - -
    - -
    - -
    -
    -

    服务状态

    @@ -94,6 +70,37 @@
    +
    +
      +
    • 白昼模式
      • +
    • 暗黑模式
      • +
    • 网格视图
      • +
    • 列表视图
      • +
    +
    + +
    +
      +
      • +
    • + +
      • +
    • + +
      • +
    +
    +
    @@ -110,12 +117,12 @@
    + - - + {{end}}