server-status主题优化 (#405)

* server-status主题优化 1.前台增加半透明样式切换按钮，同时适配了深色和浅色模式 2.右小角功能区增加收纳，点击展开，滚动页面关闭 3.vps世界分布地图全屏展示 4.修改默认页底版权信息位置，从跟随container box修改为默认置于页面底部，container box到底底部后再跟随 5.修改container box默认宽度和最大宽度，适配高分辨率显示器 6.优化样式文件结构,删除无用的样式文件 7.一些小优化 * 修改默认背景图 * 修改背景图片 * 1.echart图表适配半透明样式切换 2.echart图表移动端设置更细折线 3.修改半透明样式下的默认背景图 * echart Y轴移动端更细刻度线 * fixbug * 修改半透明样式默认背景图片为本地调用
2026-11-04 16:40:21 +00:00 · 2024-08-09 21:49:45 +08:00
1 parent eb60a1afc8
commit 0f4c1b6ab4
@@ -1,6 +0,0 @@
-/*!
- * Bootstrap v3.4.1 (https://getbootstrap.com/)
- * Copyright 2011-2019 Twitter, Inc.
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
- */.btn-danger,.btn-default,.btn-info,.btn-primary,.btn-success,.btn-warning{text-shadow:0 -1px 0 rgba(0,0,0,.2);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075);box-shadow:inset 0 1px 0 rgba(255,255,255,.15),0 1px 1px rgba(0,0,0,.075)}.btn-danger.active,.btn-danger:active,.btn-default.active,.btn-default:active,.btn-info.active,.btn-info:active,.btn-primary.active,.btn-primary:active,.btn-success.active,.btn-success:active,.btn-warning.active,.btn-warning:active{-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}.btn-danger.disabled,.btn-danger[disabled],.btn-default.disabled,.btn-default[disabled],.btn-info.disabled,.btn-info[disabled],.btn-primary.disabled,.btn-primary[disabled],.btn-success.disabled,.btn-success[disabled],.btn-warning.disabled,.btn-warning[disabled],fieldset[disabled] .btn-danger,fieldset[disabled] .btn-default,fieldset[disabled] .btn-info,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-success,fieldset[disabled] .btn-warning{-webkit-box-shadow:none;box-shadow:none}.btn-danger .badge,.btn-default .badge,.btn-info .badge,.btn-primary .badge,.btn-success .badge,.btn-warning .badge{text-shadow:none}.btn.active,.btn:active{background-image:none}.btn-default{background-image:-webkit-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image:-o-linear-gradient(top,#fff 0,#e0e0e0 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#fff),to(#e0e0e0));background-image:linear-gradient(to bottom,#fff 0,#e0e0e0 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#dbdbdb;text-shadow:0 1px 0 #fff;border-color:#ccc}.btn-default:focus,.btn-default:hover{background-color:#e0e0e0;background-position:0 -15px}.btn-default.active,.btn-default:active{background-color:#e0e0e0;border-color:#dbdbdb}.btn-default.disabled,.btn-default.disabled.active,.btn-default.disabled.focus,.btn-default.disabled:active,.btn-default.disabled:focus,.btn-default.disabled:hover,.btn-default[disabled],.btn-default[disabled].active,.btn-default[disabled].focus,.btn-default[disabled]:active,.btn-default[disabled]:focus,.btn-default[disabled]:hover,fieldset[disabled] .btn-default,fieldset[disabled] .btn-default.active,fieldset[disabled] .btn-default.focus,fieldset[disabled] .btn-default:active,fieldset[disabled] .btn-default:focus,fieldset[disabled] .btn-default:hover{background-color:#e0e0e0;background-image:none}.btn-primary{background-image:-webkit-linear-gradient(top,#337ab7 0,#265a88 100%);background-image:-o-linear-gradient(top,#337ab7 0,#265a88 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#337ab7),to(#265a88));background-image:linear-gradient(to bottom,#337ab7 0,#265a88 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff337ab7', endColorstr='#ff265a88', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#245580}.btn-primary:focus,.btn-primary:hover{background-color:#265a88;background-position:0 -15px}.btn-primary.active,.btn-primary:active{background-color:#265a88;border-color:#245580}.btn-primary.disabled,.btn-primary.disabled.active,.btn-primary.disabled.focus,.btn-primary.disabled:active,.btn-primary.disabled:focus,.btn-primary.disabled:hover,.btn-primary[disabled],.btn-primary[disabled].active,.btn-primary[disabled].focus,.btn-primary[disabled]:active,.btn-primary[disabled]:focus,.btn-primary[disabled]:hover,fieldset[disabled] .btn-primary,fieldset[disabled] .btn-primary.active,fieldset[disabled] .btn-primary.focus,fieldset[disabled] .btn-primary:active,fieldset[disabled] .btn-primary:focus,fieldset[disabled] .btn-primary:hover{background-color:#265a88;background-image:none}.btn-success{background-image:-webkit-linear-gradient(top,#5cb85c 0,#419641 100%);background-image:-o-linear-gradient(top,#5cb85c 0,#419641 100%);background-image:-webkit-gradient(linear,left top,left bottom,from(#5cb85c),to(#419641));background-image:linear-gradient(to bottom,#5cb85c 0,#419641 100%);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);filter:progid:DXImageTransform.Microsoft.gradient(enabled=false);background-repeat:repeat-x;border-color:#3e8f3e}.btn-success:focus,.btn-success:hover{background-color:#419641;background-position:0 -15px}.btn-success.active,.btn-success:active{background-color:#419641;border-color:#3e8f3e}.btn-success.disabled,.btn-success.disabled.active,.btn-success.disabled.focus,.btn-success.disabled:active,.btn-success.disabled:focus,.btn-success.disabled:hover,.btn-success[disabled],.btn-success[disabled].active,.btn-success[disabled].focus,.btn-success[disabled]:active,.btn-success[disabled]:focus,.btn-success[disabled]:hover,fieldset[disabled] .btn-succLine truncated
-/*# sourceMappingURL=bootstrap-theme.min.css.map */
@@ -1 +0,0 @@
-{"version":3,"sources":["bootstrap-theme.css","dist/css/bootstrap-theme.css","less/theme.less","less/mixins/vendor-prefixes.less","less/mixins/gradients.less","less/mixins/reset-filter.less"],"names":[],"mappings":"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 truncated
@@ -1,6 +1,6 @@
 body[theme="dark"] {
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
-    background: rgba(49, 54, 59, 1);
+    background-color: rgba(49, 54, 59, 1);
    color: #f1f1f1;
 }

@@ -9,7 +9,6 @@ body[theme="dark"] .navbar .navbar-brand {
 }

 body[theme="dark"] .navbar .dropdown-menu {
-    list-style-image: initial;
    background-color: rgba(23, 26, 30, 1);
    border-color: rgba(49, 54, 59, 1);
    box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 12px;
@@ -29,9 +28,9 @@ body[theme="dark"] .navbar .navbar-nav > .open > a:focus,
 body[theme="dark"] .navbar .navbar-nav > .open > a:hover,
 body[theme="dark"] .navbar .navbar-nav > .active > a,
 body[theme="dark"] .navbar .navbar-nav > .open > a{
-    background-image: none !important;
-    box-shadow: none !important;
-    background-color: transparent !important;
+    background-image: none;
+    box-shadow: none;
+    background-color: transparent;
 }

 body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu > li > a {
@@ -39,7 +38,6 @@ body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu > li > a {
 }

 body[theme="dark"] .content {
-    background-image: initial;
    background-color: rgba(28, 29, 38, 1);
    border: none;
    box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
@@ -48,7 +46,6 @@ body[theme="dark"] .content {
 }

 body[theme="dark"] .table {
-    background-image: initial;
    background-color: rgba(28, 29, 38, 1);
    border-color: #545b5e;
 }
@@ -69,7 +66,6 @@ body[theme="dark"] .table-striped tbody > tr.even > th {
 body[theme="dark"] .table-striped tbody > tr,
 body[theme="dark"] .table-striped tbody > tr.odd > td,
 body[theme="dark"] .table-striped tbody > tr.odd > th {
-    /* background-color: rgba(28, 29, 38, 1); 282B2E*/
    background-color: rgba(34, 35, 46, 1);
 }

@@ -83,7 +79,6 @@ body[theme="dark"] .table-hover > tbody > tr:not(.expandRow):hover > td {

 /* expandRow展开部分样式 */
 body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before{
-    /* background-color: rgba(28, 29, 38, 1); 282B2E*/
    background-color: rgba(34, 35, 46, 1);
 }

@@ -102,35 +97,35 @@ body[theme="dark"] .progress-bar {
 }

 body[theme="dark"] .progress-bar-success {
-    background-image: linear-gradient(#4d853a 0, #367e36 100%);
-}
-
-body[theme="dark"] .progress-offline .progress-bar-success {
-    background-image: linear-gradient(#808080 0, #808080 100%);
+    background-image: linear-gradient(to right, rgba(77, 133, 58, 1) 0, rgba(54, 126, 54, 1) 100%);
 }

 body[theme="dark"] .progress-bar-warning {
-    background-image: linear-gradient(#995f0d 0, #b5710f 100%);
-}
-
-body[theme="dark"] .progress-offline .progress-bar-warning {
-    background-image: linear-gradient(#808080 0, #808080 100%);
+    background-image: linear-gradient(to right, rgba(153, 95, 13, 1) 0, rgba(181, 113, 15, 1) 100%);
 }

 body[theme="dark"] .progress-bar-danger {
-    background-image: linear-gradient(#942320 0, #a12623 100%);
+    background-image: linear-gradient(to right, rgba(145, 35, 32, 1) 0, rgba(161, 38, 35, 1) 100%);
+}
+
+body[theme="dark"] .progress-offline .progress-bar-success {
+    background-image: linear-gradient(rgba(128, 128, 128, 1) 0, rgba(128, 128, 128, 1) 100%);
+}
+
+body[theme="dark"] .progress-offline .progress-bar-warning {
+    background-image: linear-gradient(rgba(128, 128, 128, 1) 0, rgba(128, 128, 128, 1) 100%);
 }

 body[theme="dark"] .progress-offline .progress-bar-danger {
-    background-image: linear-gradient(#808080 0, #808080 100%);
+    background-image: linear-gradient(rgba(128, 128, 128, 1) 0, rgba(128, 128, 128, 1) 100%);
 }

 body[theme="dark"] .node-cell.status .status-icon.online {
-    background-image: linear-gradient(#4d853a 0, #367e36 100%);
+    background-image: linear-gradient(rgba(77, 133, 58, 1) 0, rgba(54, 126, 54, 1) 100%);
 }

 body[theme="dark"] .node-cell.status .status-icon.offline {
-    background-image: linear-gradient(#9b2522 0, #9b2522 100%);
+    background-image: linear-gradient(rgba(155, 37, 34, 1) 0, rgba(161, 38, 35, 1) 100%);
 }

 body[theme="dark"] .service-status .danger {
@@ -160,11 +155,16 @@ body[theme="dark"] .modal-content{
    color: #f1f1f1;
 }

+body[theme="dark"] #earthChartBox .modal-content{
+    background-color: rgba(0, 0, 0, 1);
+    color: #f1f1f1;
+}
+
 body[theme="dark"] .modal-header{
    border-bottom-color:#080808;
 }

-body[theme="dark"] .modal-header i{
+body[theme="dark"] .modal-header i.xclose{
    color: #f1f1f1;
 }

@@ -0,0 +1,123 @@
+body[theme="dark"]::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-image: url(/static/theme-server-status/img/bg.jpg);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: cover;
+    z-index: -1;
+}
+
+body[theme="dark"] {
+    background-color: rgba(0, 0, 0, 0.8);
+    color: #f1f1f1;
+}
+
+body[theme="dark"] .navbar {
+    /** 顶部导航条 背景 **/
+    background-color: rgba(0, 0, 0, 0.8);
+    box-shadow: none;
+    border: none;
+}
+
+body[theme="dark"] .navbar .navbar-brand {
+    color: #ffffff;
+}
+
+body[theme="dark"] .navbar .dropdown-menu {
+    /** 二级导航下拉 背景 **/
+    background-color: rgba(0, 0, 0, 0.85);
+    border-top: none;
+    border-color: #31363b;
+    box-shadow: rgba(0, 0, 0, 0.18) 0px 6px 12px;
+}
+
+body[theme="dark"] .navbar .dropdown-menu > li > a {
+    color: #c8c3bc;
+}
+
+body[theme="dark"] .navbar .dropdown-menu > li > a:focus,
+body[theme="dark"] .navbar .dropdown-menu > li > a:hover {
+    /** 二级导航鼠标悬停选中背景 **/
+    background-color: rgba(0, 0, 0, 0.95);
+    background-image: linear-gradient(#1c1d26 0, #1c1d26 100%);
+}
+
+body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu > li > a {
+    color: #f1f1f1;
+}
+
+body[theme="dark"] .table,
+body[theme="dark"] .table-condensed > tbody > tr,
+body[theme="dark"] .table-hover > tbody > tr,
+body[theme="dark"] .table-hover > tbody > tr:hover,
+body[theme="dark"] .table-striped tbody > tr.even,
+body[theme="dark"] .table-striped tbody > tr.odd,
+body[theme="dark"] .table-striped tbody > tr.even > td,
+body[theme="dark"] .table-striped tbody > tr.even > th,
+body[theme="dark"] .table-striped tbody > tr.odd > td,
+body[theme="dark"] .table-striped tbody > tr.odd > th,
+body[theme="dark"] .table-striped tbody > tr.even > td:hover,
+body[theme="dark"] .table-striped tbody > tr.even > th:hover,
+body[theme="dark"] .table-striped tbody > tr.odd > td:hover,
+body[theme="dark"] .table-striped tbody > tr.odd > th:hover,
+body[theme="dark"] .table-striped tbody > tr.expandRow:hover {
+    background-color: transparent !important;
+}
+
+body[theme="dark"] .content {
+    /** 主box 背景 **/
+    background-color: rgba(28, 29, 38, 0.8); 
+    border: none;
+    box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
+    -webkit-box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
+    box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
+}
+
+body[theme="dark"] .table > thead > tr.node-group-tag > th,
+body[theme="dark"] .table > thead > tr.node-group-tag > th:before {
+    background: unset;
+}
+
+body[theme="dark"] .table > tbody > tr > td:before,
+body[theme="dark"] .table > tfoot > tr > td:before,
+body[theme="dark"] .table > thead > tr > td:before,
+body[theme="dark"] .table > thead > tr.node-group-cell > th:before{
+     /** border-bottom 颜色 **/
+    background-color: rgba(155, 155, 155, 0.1); 
+}
+
+body[theme="dark"] .table-hover > tbody > tr:not(.expandRow):hover > td {
+    background-color: unset;
+}
+
+/* expandRow展开部分样式 */
+body[theme="dark"] .table > tbody > tr.expandRow.odd > td:before{
+    background-color: unset;
+}
+
+body[theme="dark"] .table > tbody > tr.expandRow.even > td:before{
+    background-color: unset;
+}
+/* expandRow展开部分样式结束 */
+
+body[theme="dark"] .progress {
+    background-image: none;
+    background-color: rgba(255, 255, 255, 0.075); 
+}
+
+body[theme="dark"] .progress-bar-success {
+    background-image: linear-gradient(to right, rgba(77, 133, 58, 0.9) 0, rgba(54, 126, 54, 0.9) 100%);
+}
+
+body[theme="dark"] .progress-bar-warning {
+    background-image: linear-gradient(to right, rgba(153, 95, 13, 0.9) 0, rgba(181, 113, 15, 0.9) 100%);
+}
+
+body[theme="dark"] .progress-bar-danger {
+    background-image: linear-gradient(to right, rgba(145, 35, 32, 0.8) 0, rgba(161, 38, 35, 0.8) 100%);
+}
@@ -1,32 +1,68 @@
 body[theme="light"] {
-    background: #ebebeb url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAMFBMVEXw8PDx8fHy8vLz8/P09PT19fX29vb39/f4+Pj5+fn6+vr7+/v8/Pz9/f3+/v7///9pUqNZAABLh0lEQVR4AQXBR2BSBwMA4AdZhKoQMghUJQlkgIMEMrFKQgYJDrJDcJBJgNaSxQgOkpBJtUA2WGVPa6mt/o6T1taqJ7fWk3ud2A84/d8HTEftGhTTkk6fgQZZOJE8nIVrSP6qPT64bE5GFOXE1pUQlC+HTcgJTODM47cnldYhO8U744r143IKL2MQQ0VfG0UehrVYI8vxVR0pk9/K2A+VxgQGzEYMjuXLPneeSAHghtRXpYiN6pvVp8f1wYTNmX2gcDNkJbiqREpi+b/BK/9xirWsq3ns+ragFpco9Rs0RdJrGex82IOOb3vaoyXeRUpoTTMouVpvXOy752YrskMwr7Tl2fQWhjUiO1YkercBhPpPussChO8S64K59IkGMHX3ht03SB9IDOXsKZr/kLFDlPK+5ML4xMs6ZQnkafkPJblPMnFdXL/gVKX5xSRvOS+G9LalB5r2SzL/4ypTE8Garfacl2Maw2QU611fuzOPYBoAaHc0bSvWDZJE3Qw/ZV/FQqhBTCD+MWlwYC9LNKipyBC7Ghsyn8vucWAQbfgASimE+jxHRvMchF/wfa/qjBhrMIVkaQInsbODX+v21Uh85fSJ9WjOZkpTdOV0bvK/eV5ApymbDY2IpcIXBQjMSqCB3Ej8oxO3Anwt3G4qfwHlCeHxkYu5orB00/SMX3gpAR1eZ1PUgWH6GhwcV2bXBBvFC9Jo7ZFGUqySbgNAg4Y5GSnekqyLqy8lLzumxVLII0AeTSRTuIFmds7cH05lnShAwPWVRpN3ECV+Apla429FFLrvtakbkPFiXDPGhz0ga/uazkZlvmoQQzMiG7sdBWHHBR0/PK1hdUdl4mxrqFBE63o6jqPmRIt/FI4EAXIywEO13kchxjN9FnJ6Eyj7Sdrvk51TtVxJxLaoQTQtb9A/cbRWH3PyOrLAlV8750NMUW/Dy+RfbMP3m38Ycvxh92rRt7Pp8vRIkZgoAUkna/mXh5Qj9bFkOjI/hDduJH0oAXye40Krr+S4xRCb8o62BDgahjY2huD0hIg/LMpup5LhnjCeLkl6LD+nm3Vk8EjJpgFlkuEa9ZsG9QPZHuvK7/Xe0lRQjxBk+Zm7RrEmmphUHKd4pwDbwhGPJDKtSZ8FKlw20ckN8+tS70bhGzzPPf9BzRt2XZn0uip8HtzqyAcCvR/9voFXMnFDzWqD/kM1dkFfmMVJ8kA6wjP5wsNuLn2ShCsArsGViTBT6R4p/sYsmaCKLdOnUWCNFzYaK6ADi16WKYY01k35qti5jLdT7G78k9o9+RuusePy5QiMXcd5OMXLZIFMegL6yRC9E3Ob4LUUR/I325H+Sd6Q7Y85r7krnoygrYQsSnf+y8kfaw1vZn+do0ZH6EmOuMSYJPAB3R/njIUTYBrLBLtP+WYBE0Xj0vI/pYvgnT6kCG16ad+xOgjKt2+U+oaVRdXXm5QjrU8lOFZzPIm85AwMn85uATMv5iUE9aexjpfpXkadH07HZ4StiIb0e2nH5tY/ybcKADK18O+FLVWYKFKcXRda0sCQj7KPO1SvijXyhRhKM2n53Eme4Pqav7VXPuw6AvPE+ca1nDs5PObwq162FIgwEEsrPhR9Y+ye4iJs49mkN3UtCiAGmF+JvBVSyOJd6owYgNDqj9OF92rY3YR/0sV5lkgBFua2aBEUdLjIm2nzSBBo4PrCvjxZjMTu1b1s4lVNugWnS6Rg2gEV7GvX2TVkxLXdpbpu+rFE9qlQuSCJ9hm7ZJHSk911UTmv0HxbttW8CvS6fTqamhCfgXcXBwe/s7WbSxD9uWHFdscSiGK3d8dVPJsqBqFDCuJaDYn/VrYHCwuIvOv6+IARoogXe1uWw3lneiS/q39ql71jHWhbCEq/a159ZecRp+K9SndajHgE4CMGc59MGJvgT6HnYTKLZQ/V4l7CdYkCVN7sZDxdKUr+X+kmlTVE3SvFPFBvRfbd7GHR8l7W4bpElix6/nKoz9ix8YrwzcrQZ45SWPGOSRYU/09I05ddH9y0yvgwzmY0/AcUOAuU/bOx6p97GvwGL3YskGCszorNfasu+XvoV5oqUPXtwHJ4DFc9HG08nSuLwjVCyifi1pXsR7pLTZ0PDEYLN2QWy60PHd655iBRbJGE8N+qrb7M7zikIN+4lBpNwbUACFlagHaiSfYkCzfT5ZlDVGWASdvsQFxPhyxc6VXSMl2LuITFD8m/ANaYQQydeVW3dQkWw7M3FvyS3SRSQCsuWXvL9K4n2movJI8F58kDg+aNXa2YiGirJyWQTYcMR0aAmOMEXPKU6i13PMEezKEF28UTHaYl77LkQ+JWGPo+6ZsVdZCgbm8Jo5XFmQGipj8hWnfGRPPZ2XyI300mTFwz0Bvwj1twtXJwY8vMsr9dU5QWVXnXXH6iuKsyyKEnNANtlljZz6NIX+ux/Ny/TeyWvMu9iDWrr5M3jvcRcRadnaOR5/ug7D7YvTb2/BwoUpLmwOlvUCWPu07KTSH8t/ld/rIDqMlYGzlF/7FKvMB0V/DGM2PLdFpbrF+5IfwyxAbyyS6+f25Tynho7afs8QeLv+Qjf59BTOYG9GRoXwzYop8O6c82LAVqDb0TDyAIZ8OnDPa8KiRSUpmBOkRLnWfsQF7xX/YzY/kP9UdNemsfLoEZrmInoSMKHqHpNvpQWvNXYNnjJM+uBLhHy0vDLGVSbjjByJ2N1SqT7b6c8wPI0LpGXmZKpK+bA30HMOVRiRGA+ivJ2rbIiAZL+ZeFQOb5c38RuX2Nx2ezn+b8Vp3qXyAXOcHUkx38eJOyeD1cunceYHMIgSwEevrTugLeF+/DtUg8qkMt4wE0bqYs2Cy2VvicmvK0u904+FCE8WPPeKRDU1r6eoo8KfFh9gxiI7WHJCgf3tvhtBMRq/UvkQYoLVipHKt4BsFld75IuTSWEa8GItnHkSUeKk44FSraPpAYbzQK56MSo6H149r53q5XSSe4i5+oO5z1L1Qa/KKvV1lv/px/aSLh79JdWmwQakyZi+o0dVXgCJuCCZqN9Y2xJCOzPphxSS99o/ip3gou7x7IBnLQln6NIeN/8hO1HNC6ZbrXt3IC5byTQzdl3GWJG9MflJGnZG+xp9dQb9G4moIgmjzdH1wUM8dAqVinszTj6mZvrRytZziztsITQo0I9GIk60zyXDRTo6JEu70zM5FWHgDQhvThAfpYtq+Wx0+5ssKGD/nQR6ELV2e+QQ9/KNtfLQuV8nSMh6h949IoBYHt/ateIxu6rfZmQgPN7BnpS/WhNd3jZKWo0b+GaNEFJtW16mgRQt3ixNJb1hwORG7JeyD3FYW+Jgkivx0pjRMvQFBxxlFqS2TDmJkSdB0pY960bUWj46t0z8iHSaW0xJ/DS5p/CYdXTHs4vAW1H4krn/CtsUUZDok3qz1KZYuskRG2jQSiDzCtLjTbg34OO9AD0NEj8RplHT5Sxh7KB6nn6nWhwWO21ct9+236kPkkhfK+5aB54b+CXaLWYIVRnRCqMLQAjkLest2S/OPaiN+qNKmuIk9MwP9JRPQlu2kIfW18Atff8lHLW8wHiw1Qqr0JCDr3lDV8GhG3KfzMbV29N9bOQbBgzsmpvnuVZHxesO63mZzXFpEt5yb37BA0ZqbD+Le6eC1SMNPrSg9SPQvLN2c07hQT6hfHTMy6uX/oZufR5bpIx2YGIzathBT9NX3ONQ2k1Ybbce2Q50zvINMnZRcVh4d256z/nazhroDdlzZaPqVrJObAGFnXEMXwOrmRDm/GpD93Jz4ZbPRKDP4iNoUaTWTnIcP87aXdIISHSfAlbikvdkN/UqBeTmhkZR6VGEBrLGnPK77NZQb1vA1UYOUstPD9hLGnIrL6C9NkWTBO6yylxs60wJTBsf7ezlsrCJI0dVURFG+o10c8ma+LMjTVrTEmr6kLxIsztU/k9D7Zm2YedzneIlZs+Baw1hY70P+u7sx0zv2Eze2ScLsmce4PuYcjucdAEDHhRXF3QXBdU8IJ45WcgU+rxs615wK6nBiGGwSL0SU1Yco2IM7LfzZ8GpL5tJW+XhmnHJNPxQfVg5KwwFOV+9RwgW+/mbPdAiinuiOtNBsUzDmYpv1ageuu/Wd8c0L94wx6OvpvIc/SFWo3NFXGGr5NhUaHdiVBXpBO6omXy84Nd/5nNrpFsXZxNySsNygW3g9psgeDy7s7Nz5a4dXtVyxK3UbAzKZKwzDA0bpPneljeVNLwwxNxWRYRM9LvZLwfXOdv45NaY5yD0nSfe3ioc7g+MXE1Tj07KgtjtzNWr+RddI5ExpmJ08GEy60OQNI8YAtvqqomrrGPDIqj6wr4Y0RDq9r4+7EeRoHKBjyLRvXakLpbBk3BqdNFgcwPBkhMk1qHonL4BhRmLJNBb/R553PC6V9Dy8JZnCxMzaH2FUQpZLxWVErm1Dp71PMltozDpJGw60ntIUW9J6xulgmbmoxXH10rNHeZAQSvzV0RQbozcOXhw0JSVe6xSy3j3qpi/a2kl5GCdUr12Af5Ych+ZbWveUyP/Pisvyx5KeikZBob06FbxYxrXggRYzORjsRRem+ZaMq598FDV70lLZptT7Ud7iyA9ThqhfiADeq4hm0roTTq7Abg+f4Iy9ayFL45QI6x+7HissofoVmVhhCeiqSbvd6myDvkPuS1KZCpQUTTlSa8v/DiweyY8KTLf3XZeLWQofFK28NEi7BtNcylMjJQN4OYkIEhssFEPWWWIY3sTlg1XCb471wa+MjiXGmzCPRJPaG24/X5/kblWtr0QEjcsg6zaupDlaJ8xWRBPpKbki219kRs/HgFRG3cpAba6Bjl+P9Line truncated
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADIBAMAAABfdrOtAAAAMFBMVEXw8PDx8fHy8vLz8/P09PT19fX29vb39/f4+Pj5+fn6+vr7+/v8/Pz9/f3+/v7///9pUqNZAABLh0lEQVR4AQXBR2BSBwMA4AdZhKoQMghUJQlkgIMEMrFKQgYJDrJDcJBJgNaSxQgOkpBJtUA2WGVPa6mt/o6T1taqJ7fWk3ud2A84/d8HTEftGhTTkk6fgQZZOJE8nIVrSP6qPT64bE5GFOXE1pUQlC+HTcgJTODM47cnldYhO8U744r143IKL2MQQ0VfG0UehrVYI8vxVR0pk9/K2A+VxgQGzEYMjuXLPneeSAHghtRXpYiN6pvVp8f1wYTNmX2gcDNkJbiqREpi+b/BK/9xirWsq3ns+ragFpco9Rs0RdJrGex82IOOb3vaoyXeRUpoTTMouVpvXOy752YrskMwr7Tl2fQWhjUiO1YkercBhPpPussChO8S64K59IkGMHX3ht03SB9IDOXsKZr/kLFDlPK+5ML4xMs6ZQnkafkPJblPMnFdXL/gVKX5xSRvOS+G9LalB5r2SzL/4ypTE8Garfacl2Maw2QU611fuzOPYBoAaHc0bSvWDZJE3Qw/ZV/FQqhBTCD+MWlwYC9LNKipyBC7Ghsyn8vucWAQbfgASimE+jxHRvMchF/wfa/qjBhrMIVkaQInsbODX+v21Uh85fSJ9WjOZkpTdOV0bvK/eV5ApymbDY2IpcIXBQjMSqCB3Ej8oxO3Anwt3G4qfwHlCeHxkYu5orB00/SMX3gpAR1eZ1PUgWH6GhwcV2bXBBvFC9Jo7ZFGUqySbgNAg4Y5GSnekqyLqy8lLzumxVLII0AeTSRTuIFmds7cH05lnShAwPWVRpN3ECV+Apla429FFLrvtakbkPFiXDPGhz0ga/uazkZlvmoQQzMiG7sdBWHHBR0/PK1hdUdl4mxrqFBE63o6jqPmRIt/FI4EAXIywEO13kchxjN9FnJ6Eyj7Sdrvk51TtVxJxLaoQTQtb9A/cbRWH3PyOrLAlV8750NMUW/Dy+RfbMP3m38Ycvxh92rRt7Pp8vRIkZgoAUkna/mXh5Qj9bFkOjI/hDduJH0oAXye40Krr+S4xRCb8o62BDgahjY2huD0hIg/LMpup5LhnjCeLkl6LD+nm3Vk8EjJpgFlkuEa9ZsG9QPZHuvK7/Xe0lRQjxBk+Zm7RrEmmphUHKd4pwDbwhGPJDKtSZ8FKlw20ckN8+tS70bhGzzPPf9BzRt2XZn0uip8HtzqyAcCvR/9voFXMnFDzWqD/kM1dkFfmMVJ8kA6wjP5wsNuLn2ShCsArsGViTBT6R4p/sYsmaCKLdOnUWCNFzYaK6ADi16WKYY01k35qti5jLdT7G78k9o9+RuusePy5QiMXcd5OMXLZIFMegL6yRC9E3Ob4LUUR/I325H+Sd6Q7Y85r7krnoygrYQsSnf+y8kfaw1vZn+do0ZH6EmOuMSYJPAB3R/njIUTYBrLBLtP+WYBE0Xj0vI/pYvgnT6kCG16ad+xOgjKt2+U+oaVRdXXm5QjrU8lOFZzPIm85AwMn85uATMv5iUE9aexjpfpXkadH07HZ4StiIb0e2nH5tY/ybcKADK18O+FLVWYKFKcXRda0sCQj7KPO1SvijXyhRhKM2n53Eme4Pqav7VXPuw6AvPE+ca1nDs5PObwq162FIgwEEsrPhR9Y+ye4iJs49mkN3UtCiAGmF+JvBVSyOJd6owYgNDqj9OF92rY3YR/0sV5lkgBFua2aBEUdLjIm2nzSBBo4PrCvjxZjMTu1b1s4lVNugWnS6Rg2gEV7GvX2TVkxLXdpbpu+rFE9qlQuSCJ9hm7ZJHSk911UTmv0HxbttW8CvS6fTqamhCfgXcXBwe/s7WbSxD9uWHFdscSiGK3d8dVPJsqBqFDCuJaDYn/VrYHCwuIvOv6+IARoogXe1uWw3lneiS/q39ql71jHWhbCEq/a159ZecRp+K9SndajHgE4CMGc59MGJvgT6HnYTKLZQ/V4l7CdYkCVN7sZDxdKUr+X+kmlTVE3SvFPFBvRfbd7GHR8l7W4bpElix6/nKoz9ix8YrwzcrQZ45SWPGOSRYU/09I05ddH9y0yvgwzmY0/AcUOAuU/bOx6p97GvwGL3YskGCszorNfasu+XvoV5oqUPXtwHJ4DFc9HG08nSuLwjVCyifi1pXsR7pLTZ0PDEYLN2QWy60PHd655iBRbJGE8N+qrb7M7zikIN+4lBpNwbUACFlagHaiSfYkCzfT5ZlDVGWASdvsQFxPhyxc6VXSMl2LuITFD8m/ANaYQQydeVW3dQkWw7M3FvyS3SRSQCsuWXvL9K4n2movJI8F58kDg+aNXa2YiGirJyWQTYcMR0aAmOMEXPKU6i13PMEezKEF28UTHaYl77LkQ+JWGPo+6ZsVdZCgbm8Jo5XFmQGipj8hWnfGRPPZ2XyI300mTFwz0Bvwj1twtXJwY8vMsr9dU5QWVXnXXH6iuKsyyKEnNANtlljZz6NIX+ux/Ny/TeyWvMu9iDWrr5M3jvcRcRadnaOR5/ug7D7YvTb2/BwoUpLmwOlvUCWPu07KTSH8t/ld/rIDqMlYGzlF/7FKvMB0V/DGM2PLdFpbrF+5IfwyxAbyyS6+f25Tynho7afs8QeLv+Qjf59BTOYG9GRoXwzYop8O6c82LAVqDb0TDyAIZ8OnDPa8KiRSUpmBOkRLnWfsQF7xX/YzY/kP9UdNemsfLoEZrmInoSMKHqHpNvpQWvNXYNnjJM+uBLhHy0vDLGVSbjjByJ2N1SqT7b6c8wPI0LpGXmZKpK+bA30HMOVRiRGA+ivJ2rbIiAZL+ZeFQOb5c38RuX2Nx2ezn+b8Vp3qXyAXOcHUkx38eJOyeD1cunceYHMIgSwEevrTugLeF+/DtUg8qkMt4wE0bqYs2Cy2VvicmvK0u904+FCE8WPPeKRDU1r6eoo8KfFh9gxiI7WHJCgf3tvhtBMRq/UvkQYoLVipHKt4BsFld75IuTSWEa8GItnHkSUeKk44FSraPpAYbzQK56MSo6H149r53q5XSSe4i5+oO5z1L1Qa/KKvV1lv/px/aSLh79JdWmwQakyZi+o0dVXgCJuCCZqN9Y2xJCOzPphxSS99o/ip3gou7x7IBnLQln6NIeN/8hO1HNC6ZbrXt3IC5byTQzdl3GWJG9MflJGnZG+xp9dQb9G4moIgmjzdH1wUM8dAqVinszTj6mZvrRytZziztsITQo0I9GIk60zyXDRTo6JEu70zM5FWHgDQhvThAfpYtq+Wx0+5ssKGD/nQR6ELV2e+QQ9/KNtfLQuV8nSMh6h949IoBYHt/ateIxu6rfZmQgPN7BnpS/WhNd3jZKWo0b+GaNEFJtW16mgRQt3ixNJb1hwORG7JeyD3FYW+Jgkivx0pjRMvQFBxxlFqS2TDmJkSdB0pY960bUWj46t0z8iHSaW0xJ/DS5p/CYdXTHs4vAW1H4krn/CtsUUZDok3qz1KZYuskRG2jQSiDzCtLjTbg34OO9AD0NEj8RplHT5Sxh7KB6nn6nWhwWO21ct9+236kPkkhfK+5aB54b+CXaLWYIVRnRCqMLQAjkLest2S/OPaiN+qNKmuIk9MwP9JRPQlu2kIfW18Atff8lHLW8wHiw1Qqr0JCDr3lDV8GhG3KfzMbV29N9bOQbBgzsmpvnuVZHxesO63mZzXFpEt5yb37BA0ZqbD+Le6eC1SMNPrSg9SPQvLN2c07hQT6hfHTMy6uX/oZufR5bpIx2YGIzathBT9NX3ONQ2k1Ybbce2Q50zvINMnZRcVh4d256z/nazhroDdlzZaPqVrJObAGFnXEMXwOrmRDm/GpD93Jz4ZbPRKDP4iNoUaTWTnIcP87aXdIISHSfAlbikvdkN/UqBeTmhkZR6VGEBrLGnPK77NZQb1vA1UYOUstPD9hLGnIrL6C9NkWTBO6yylxs60wJTBsf7ezlsrCJI0dVURFG+o10c8ma+LMjTVrTEmr6kLxIsztU/k9D7Zm2YedzneIlZs+Baw1hY70P+u7sx0zv2Eze2ScLsmce4PuYcjucdAEDHhRXF3QXBdU8IJ45WcgU+rxs615wK6nBiGGwSL0SU1Yco2IM7LfzZ8GpL5tJW+XhmnHJNPxQfVg5KwwFOV+9RwgW+/mbPdAiinuiOtNBsUzDmYpv1ageuu/Wd8c0L94wx6OvpvIc/SFWo3NFXGGr5NhUaHdiVBXpBO6omXy84Nd/5nNrpFsXZxNySsNygW3g9psgeDy7s7Nz5a4dXtVyxK3UbAzKZKwzDA0bpPneljeVNLwwxNxWRYRM9LvZLwfXOdv45NaY5yD0nSfe3ioc7g+MXE1Tj07KgtjtzNWr+RddI5ExpmJ08GEy60OQNI8YAtvqqomrrGPDIqj6wr4Y0RDq9r4+7EeRoHKBjyLRvXakLpbBk3BqdNFgcwPBkhMk1qHonL4BhRmLJNBb/R553PC6V9Dy8JZnCxMzaH2FUQpZLxWVErm1Dp71PMltozDpJGw60ntIUW9J6xulgmbmoxXH10rNHeZAQSvzV0RQbozcOXhw0JSVe6xSy3j3qpi/a2kl5GCdUr12Af5Ych+ZbWveUyP/Pisvyx5KeikZBob06FbxYxrXggRYzORjsRRem+ZaMq598FDV70lLZptT7Ud7iyA9ThqhfiADeq4hm0roTTq7Abg+f4Iy9ayFL45QI6x+7HissofoVmVhhCeiqSbvd6myDvkPuS1KZCpQUTTlSa8v/DiweyY8KTLf3XZeLWQofFK28NEi7BtNcylMjJQN4OYkIEhssFEPWWWIY3sTlg1XCb471wa+MjiXGmzCPRJPaG24/X5/kblWtr0QEjcsg6zaupDlaJ8xWRBPpKbki219kRs/HgFRG3cpAba6Bjl+P9BrLine truncated
+    background-color: rgba(255, 255, 255, 0.95);
+    color: rgba(0, 0, 0, 0.87);
+}
+
+body[theme="light"] .navbar {
+    /** 顶部导航条 背景 **/
+    background-color: rgba(249, 249, 249, 1);
+    border-bottom: 1px #cecece solid;
+    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
 }

 body[theme="light"] .navbar .navbar-brand {
-    color: #fff;
+    color: rgba(0, 0, 0, 0.87);
 }

-body[theme="light"] .navbar .navbar-brand {
-    color: #fff;
+body[theme="light"] .navbar .navbar-nav > li > a{
+    color: rgba(0, 0, 0, 0.87);
 }

 body[theme="light"] .navbar .navbar-nav > .open > a:focus,
 body[theme="light"] .navbar .navbar-nav > .open > a:hover,
 body[theme="light"] .navbar .navbar-nav > .active > a,
 body[theme="light"] .navbar .navbar-nav > .open > a {
-    background-image: none !important;
-    box-shadow: none !important;
-    background-color: transparent !important;
+    background-image: none;
+    box-shadow: none;
+    background-color: transparent;
 }

-body[theme="light"] .toolbox i{
-    color: rgba(94, 114, 228, .9);
-    background-color: rgba(255, 255, 255, .5);
-    box-shadow:0 .125rem .25rem rgba(0, 0, 0, .15) !important;
+body[theme="light"] .navbar .dropdown-menu {
+    /** 二级导航下拉 背景 **/
+    background-color: rgba(255, 255, 255, 1) ;
+    border-top: none;
+    border-color: rgba(206, 206, 206, 0.65);
+    box-shadow: rgba(255, 255, 255, 0.18) 0px 6px 12px;
+}
+
+body[theme="light"] .navbar .navbar-nav .open a,
+body[theme="light"] .navbar .navbar-nav .open .dropdown-menu > li > a {
+    color: rgba(0, 0, 0, 0.87);
+}
+
+body[theme="light"] .navbar .navbar-toggle{
+    border:none;
+    padding:9px 12px;
+}
+
+body[theme="light"] .navbar .navbar-collapse{
+    border-color:rgba(0, 0, 0, 0.085);
+}
+
+body[theme="light"]  .navbar .navbar-toggle .icon-bar{
+    background-color: rgba(0, 0, 0, 0.87);
+}
+
+body[theme="light"] .navbar .navbar-toggle:focus, 
+body[theme="light"] .navbar .navbar-toggle:hover {
+    background-color: unset;
 }

 body[theme="light"] .content {
-    background: #ffffff;
+    background: rgba(255, 255, 255, 1);
+    color: rgba(0, 0, 0, 0.87);
    border: 1px #cecece solid;
    -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
    -moz-box-shadow: 0 1px 10px rgba(0, 0, 0, .1);
@@ -43,7 +79,7 @@ body[theme="light"] .table>thead>tr.node-group-tag>th {

 body[theme="light"] .table-striped tbody > tr.even > td,
 body[theme="light"] .table-striped tbody > tr.even > th {
-    background-color: #F9F9F9;
+    background-color: #f9f9f9;
 }

 body[theme="light"] .table-striped tbody > tr.odd > td,
@@ -63,34 +99,6 @@ body[theme="light"] .table > thead > tr.node-group-tag > th:before{
    background-color: rgba(255, 255, 255, 1);
 }

-body[theme="light"] .progress-bar {
-    color: #000000;
-}
-
-body[theme="light"] .progress-bar-success {
-    background-image: linear-gradient(rgb(92, 184, 92) 0, rgb(68, 157, 68) 100%);
-}
-
-body[theme="light"] .progress-offline .progress-bar-success {
-    background-image: linear-gradient(grey 0, grey 100%);
-}
-
-body[theme="light"] .progress-bar-warning {
-    background-image: linear-gradient(rgb(240, 173, 78) 0, rgb(236, 151, 31) 100%);
-}
-
-body[theme="light"] .progress-offline .progress-bar-warning {
-    background-image: linear-gradient(grey 0, grey 100%);
-}
-
-body[theme="light"] .progress-bar-danger {
-    background-image: linear-gradient(rgb(217, 83, 79) 0, rgb(201, 48, 44) 100%);
-}
-
-body[theme="light"] .progress-offline .progress-bar-danger {
-    background-image: linear-gradient(grey 0, grey 100%);
-}
-
 body[theme="light"] .table-hover > tbody > tr:hover > td {
    background: #E6E6E6;
 }
@@ -103,6 +111,34 @@ body[theme="light"] tr.odd.expandRow > :hover {
    background: #ffffff !important;
 }

+body[theme="light"] .progress-bar {
+    color: #000000;
+}
+
+body[theme="light"] .progress-bar-success {
+    background-image: linear-gradient(rgb(92, 184, 92) 0, rgb(68, 157, 68) 100%);
+}
+
+body[theme="light"] .progress-bar-warning {
+    background-image: linear-gradient(rgb(240, 173, 78) 0, rgb(236, 151, 31) 100%);
+}
+
+body[theme="light"] .progress-bar-danger {
+    background-image: linear-gradient(rgb(217, 83, 79) 0, rgb(201, 48, 44) 100%);
+}
+
+body[theme="light"] .progress-offline .progress-bar-success {
+    background-image: linear-gradient(rgb(128, 128, 128) 0, rgb(128, 128, 128) 100%);
+}
+
+body[theme="light"] .progress-offline .progress-bar-warning {
+    background-image: linear-gradient(rgb(128, 128, 128) 0, rgb(128, 128, 128) 100%);
+}
+
+body[theme="light"] .progress-offline .progress-bar-danger {
+    background-image: linear-gradient(rgb(128, 128, 128) 0, rgb(128, 128, 128) 100%);
+}
+
 body[theme="light"] .node-cell.status .status-icon.online {
    background-image: linear-gradient(rgb(92, 184, 92) 0, rgb(68, 157, 68) 100%);
 }
@@ -133,8 +169,23 @@ body[theme="light"] footer p a:hover {
    text-decoration: none;
 }

+body[theme="light"] .toolbox i{
+    color: rgba(94, 114, 228, .9);
+    background-color: rgba(255, 255, 255, .5);
+    box-shadow:0 .125rem .25rem rgba(0, 0, 0, .15) !important;
+}
+
+body[theme="light"] .toolbox .mytoggle .tooltip-inner{
+    background: #ffffff;
+    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .15) !important;
+}
+
+body[theme="light"] .toolbox .mytoggle li:hover{
+    background-color:#e6e6e6;
+}
+
 body[theme="light"] .modal-content{
-    background-color: #ffffff;
+    background-color: rgba(249, 249, 249, 1);
    color: rgba(0, 0, 0, 0.87);
 }

@@ -142,6 +193,15 @@ body[theme="light"] .modal-header{
    border-bottom-color:#f1f1f1;
 }

-body[theme="light"] .modal-header i{
+body[theme="light"] .modal-header i.xclose{
    color: rgba(0, 0, 0, 0.87);
-}
+}
+
+@media only screen and (max-width: 767px) {
+    body[theme="light"] .navbar .navbar-nav .open .dropdown-menu {
+        background-color: rgba(249, 249, 249, 1);
+        border-top: none;
+        border-color: rgba(0, 0, 0, .05);
+        box-shadow: rgba(255, 255, 255, 0.18) 0px 6px 12px;
+    }
+}
@@ -0,0 +1,134 @@
+body[theme="light"]::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-image: url(/static/theme-server-status/img/bg.jpg);
+    background-repeat: no-repeat;
+    background-position: 50% 50%;
+    background-size: cover;
+    z-index: -1;
+}
+
+body[theme="light"] {
+    background-image: unset;
+}
+
+body[theme="light"]::after {
+    content: "";
+    position: fixed;
+}
+
+body[theme="light"] .navbar {
+    /** 顶部导航条 背景 **/
+    background-color: rgba(255, 255, 255, 0.9);
+    border-bottom: 1px #cecece solid;
+    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
+}
+
+body[theme="light"] .navbar .dropdown-menu {
+    /** 二级导航下拉 **/
+    background-color: rgba(255, 255, 255, 0.8);
+    border-color: rgba(0, 0, 0, .05);
+}
+
+
+body[theme="light"] .navbar .dropdown-menu > li > a:focus,
+body[theme="light"] .navbar .dropdown-menu > li > a:hover{
+    /** 二级导航鼠标悬停选中背景 **/
+    background-color: rgba(0, 0, 0, .05);
+}
+
+body[theme="light"] .navbar .navbar-collapse{
+    border-color:rgba(0, 0, 0, 0.085);
+}
+
+body[theme="light"]  .navbar .navbar-toggle .icon-bar{
+    background-color: rgba(0, 0, 0, 0.9);
+}
+
+body[theme="light"] .navbar .navbar-toggle:focus, 
+body[theme="light"] .navbar .navbar-toggle:hover {
+    background-color: unset;
+}
+
+body[theme="light"] .table,
+body[theme="light"] .table-condensed > tbody > tr,
+body[theme="light"] .table-hover > tbody > tr,
+body[theme="light"] .table-hover > tbody > tr:hover,
+body[theme="light"] .table-striped tbody > tr.even,
+body[theme="light"] .table-striped tbody > tr.odd,
+body[theme="light"] .table-striped tbody > tr.even > td,
+body[theme="light"] .table-striped tbody > tr.even > th,
+body[theme="light"] .table-striped tbody > tr.odd > td,
+body[theme="light"] .table-striped tbody > tr.odd > th,
+body[theme="light"] .table-striped tbody > tr.even > td:hover,
+body[theme="light"] .table-striped tbody > tr.even > th:hover,
+body[theme="light"] .table-striped tbody > tr.odd > td:hover,
+body[theme="light"] .table-striped tbody > tr.odd > th:hover,
+body[theme="light"] .table-striped tbody > tr.expandRow:hover {
+    background-color: transparent !important;
+}
+
+body[theme="light"] .content {
+    /** 主box 背景 **/
+    background-color: rgba(245, 245, 245, 0.8);
+    border: none;
+    box-shadow: rgba(0, 0, 0, 0.5) 0 0.625em 2em;
+}
+
+body[theme="light"] .table > thead > tr.node-group-tag > th,
+body[theme="light"] .table > thead > tr.node-group-tag > th:before {
+    background: unset;
+}
+
+body[theme="light"] .table > tbody > tr > td:before,
+body[theme="light"] .table > tfoot > tr > td:before,
+body[theme="light"] .table > thead > tr > td:before,
+body[theme="light"] .table > thead > tr.node-group-cell > th:before{
+     /** border-bottom 颜色 **/
+    background-color: rgba(0, 0, 0, 0.075); 
+}
+
+body[theme="light"] .table-hover > tbody > tr:not(.expandRow):hover > td {
+    background-color: unset;
+}
+
+/* expandRow展开部分样式 */
+body[theme="light"] .table > tbody > tr.expandRow.odd > td:before{
+    background-color: unset;
+}
+
+body[theme="light"] .table > tbody > tr.expandRow.even > td:before{
+    background-color: unset;
+}
+/* expandRow展开部分样式结束 */
+
+body[theme="light"] .progress {
+    background-image: none;
+    background-color: rgba(0, 0, 0, 0.015); 
+}
+
+body[theme="light"] .progress-bar-success {
+    background-image: linear-gradient(to right, rgba(50, 205, 50, 0.6) 0, rgba(68, 157, 68, 0.6) 100%);
+}
+
+body[theme="light"] .progress-bar-warning {
+    background-image: linear-gradient(to right, rgba(236, 151, 31, 0.6) 0, rgba(255, 125, 80, 0.6) 100%);
+}
+
+body[theme="light"] .progress-bar-danger {
+    background-image: linear-gradient(to right, rgba(255, 70, 0, 0.6) 0, rgba(201, 48, 44,0.6) 100%);   
+}
+
+body[theme="light"] .toolbox i{
+    background-color: rgba(255, 255, 255, .55);
+}
+
+@media only screen and (max-width: 767px) {
+    body[theme="light"] .navbar .navbar-nav .open .dropdown-menu {
+        background-color: rgba(235, 235, 235, 0.75);
+    }
+}
@@ -3,16 +3,22 @@ body {
    padding-bottom: 30px !important;
 }

+.container-fluid{
+    max-width: 1680px;
+    width: 95vw;
+    margin: 0 auto;
+}
+
+.nezha {
+    min-height: calc(100vh - 100px);
+}
+
 /* 导航部分 开始*/
 .navbar {
    min-height: 40px !important;
    margin:0 auto;
    font-size: 14px;
-}
-
-.navbar .container{
-    max-width: 95vw;
-    margin: 0 auto;
+    z-index:99999999;
 }

 .navbar-inverse{
@@ -46,11 +52,6 @@ body {
    word-break: break-all;
 }

-.navbar .node-cell-expand-label {
-    /*margin-right: 5px;*/
-}
-
-.navbar .dropdown:hover,
 .navbar .dropdown a{
    cursor: pointer;
 }
@@ -75,12 +76,10 @@ body {
 .navbar .navbar-collapse{
    max-height: 500px;
 }
-
 /* 导航部分 结束 */


 /* toolbox 开始 */
-
 .toolbox {
    position: fixed;
    bottom:20px;
@@ -121,7 +120,6 @@ body {
 .toolbox .showGoTop i.goTop {
    font-size: 1.55rem;
 }
-
 /* toolbox 结束 */


@@ -138,12 +136,12 @@ body {
    border-radius: 3px;
 }

-.table th, .table td {
-    text-align: left;
+.table-responsive{
+    border: none;
 }

-tr.accordion-toggle{
-    cursor:pointer;
+.table th, .table td {
+    text-align: left;
 }

 .table > tbody > tr > td,
@@ -171,6 +169,15 @@ tr.accordion-toggle{
    height: 0.7px;
 }

+table.monitor-detail{
+    margin:5px 0px 10px 0px;
+}
+
+tr.accordion-toggle{
+    cursor:pointer;
+}
+
+.table .network-thead-tr th,
 .table .node-group-tag th{
    font-size: 18px;
    padding-bottom:15px;
@@ -243,7 +250,7 @@ tr.accordion-toggle{
    cursor: pointer;
 }

-/*加快Agent详情下拉展示速度*/
+/*agent详情下拉速度*/
 .collapsing{
    -webkit-transition-property:height,visibility;
    -o-transition-property:height,visibility;
@@ -255,13 +262,10 @@ tr.accordion-toggle{
    -o-transition-timing-function: linear;
    transition-timing-function: linear
 }
-
 /*正文结束*/

 /* 服务页 正文*/
-.service-status {
-
-}
+.service-status {}

 .service-status .service-status-th{
    min-width:60px;
@@ -307,44 +311,67 @@ tr.accordion-toggle{
 .service-status .tooltip-inner {
    max-width: 500px;
 }
+
+td.ping-network-quality {
+    width: 600px;
+}
 /* 服务页 正文结束 */

-
-/* 服务器分布图 */
+/* 地图版服务器分布图 */
 #mapChartBox{
    z-index: 999999999;
+    padding-left: 0 !important;
 }

-.modal-content{
-    display: flex;
-    flex-direction: column;
-    pointer-events: auto;
+.modal-open .modal{
+    overflow-x: hidden;
+    overflow-y: hidden;
 }

 .modal-dialog-centered{
    margin: 0 auto;
-    width: 1134px;
-    max-width: 1134px;
+    width: 100%;
+    max-width: 100%;
    display: flex;
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
    min-height: calc(100%) /* 确保模态框占据整个视口高度 */
 }

+.modal-content{
+    display: flex;
+    flex-direction: column;
+    pointer-events: auto;
+    border-radius: unset;
+    border: none;
+}
+
 .modal-header{
    position: relative;
 }

-.modal-header i{
+.modal-header h4{
+    cursor: pointer;
+}
+
+.modal-header i.xclose{
    cursor: pointer;
    position: absolute;
-    font-size: 2em;
-    top: 13px;
-    right: 13px;
+    font-size: 30px;
+    top: 12px;
+    right: 10px;
+}
+
+.modal-body{
+    padding: 0px;
+}
+
+a.template-item, a.cdn-item{
+    display: block;
 }

 footer{
-    padding-bottom: 2rem;
+    padding-bottom: 20px;
 }

 footer p{
@@ -356,6 +383,10 @@ footer p{
    .accordian-body{
        margin: 5px 0px 5px 10px;        
    }
+    table.monitor-detail{
+        margin:0px 0px 2px 0px;
+    }
+    .table .network-thead-tr th,
    .table .node-group-tag th{
        font-size:16px;
        padding-bottom:6px;
@@ -367,10 +398,19 @@ footer p{
        font-size: 10px !important;
        padding-top:60px !important;
    }
+    .nezha {
+        min-height: calc(100vh - 80px);
+    }
    .content {
        padding: 0;
        margin-bottom: 10px;
    }
+    footer{
+        padding-bottom: 10px;
+    }
+    .cycle-transfer-stats .dataTables_wrapper{
+        margin-bottom: -10px;
+    }
    .navbar .navbar-nav .open .dropdown-menu>li>a {
        color: #f1f1f1;
    }
@@ -405,10 +445,17 @@ footer p{
    .accordian-body{
        margin: 5px 0px 5px 10px;        
    }
+    table.monitor-detail{
+        margin:0px 0px 2px 0px;
+    }
+    .table .network-thead-tr th,
    .table .node-group-tag th{
-        font-size:16px;
+        font-size:14px;
        padding-bottom:6px;
    }
+    .table tr.network td{
+        font-size: 12px;
+    }
    .service-status .service-status-th{
        min-width:30px;
    }
@@ -432,15 +479,8 @@ footer p{
    .toolbox {
        right: 18px;
    }
-    .modal-dialog-centered{
-        width: 95%;
-    }
-    .modal-title{
-        line-height: 0.5;
-    }
-    .modal-header i{
-        top: 8px;
-        right: 8px;
+    td.ping-network-quality {
+        width: 110px;
    }
 }

@@ -1,326 +0,0 @@
-/**
-* @preserve HTML5 Shiv 3.7.3 | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
-*/
-;(function(window, document) {
-/*jshint evil:true */
-  /** version */
-  var version = '3.7.3';
-
-  /** Preset options */
-  var options = window.html5 || {};
-
-  /** Used to skip problem elements */
-  var reSkip = /^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i;
-
-  /** Not all elements can be cloned in IE **/
-  var saveClones = /^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i;
-
-  /** Detect whether the browser supports default html5 styles */
-  var supportsHtml5Styles;
-
-  /** Name of the expando, to work with multiple documents or to re-shiv one document */
-  var expando = '_html5shiv';
-
-  /** The id for the documents expando */
-  var expanID = 0;
-
-  /** Cached data for each document */
-  var expandoData = {};
-
-  /** Detect whether the browser supports unknown elements */
-  var supportsUnknownElements;
-
-  (function() {
-    try {
-        var a = document.createElement('a');
-        a.innerHTML = '<xyz></xyz>';
-        //if the hidden property is implemented we can assume, that the browser supports basic HTML5 Styles
-        supportsHtml5Styles = ('hidden' in a);
-
-        supportsUnknownElements = a.childNodes.length == 1 || (function() {
-          // assign a false positive if unable to shiv
-          (document.createElement)('a');
-          var frag = document.createDocumentFragment();
-          return (
-            typeof frag.cloneNode == 'undefined' ||
-            typeof frag.createDocumentFragment == 'undefined' ||
-            typeof frag.createElement == 'undefined'
-          );
-        }());
-    } catch(e) {
-      // assign a false positive if detection fails => unable to shiv
-      supportsHtml5Styles = true;
-      supportsUnknownElements = true;
-    }
-
-  }());
-
-  /*--------------------------------------------------------------------------*/
-
-  /**
-   * Creates a style sheet with the given CSS text and adds it to the document.
-   * @private
-   * @param {Document} ownerDocument The document.
-   * @param {String} cssText The CSS text.
-   * @returns {StyleSheet} The style element.
-   */
-  function addStyleSheet(ownerDocument, cssText) {
-    var p = ownerDocument.createElement('p'),
-        parent = ownerDocument.getElementsByTagName('head')[0] || ownerDocument.documentElement;
-
-    p.innerHTML = 'x<style>' + cssText + '</style>';
-    return parent.insertBefore(p.lastChild, parent.firstChild);
-  }
-
-  /**
-   * Returns the value of `html5.elements` as an array.
-   * @private
-   * @returns {Array} An array of shived element node names.
-   */
-  function getElements() {
-    var elements = html5.elements;
-    return typeof elements == 'string' ? elements.split(' ') : elements;
-  }
-
-  /**
-   * Extends the built-in list of html5 elements
-   * @memberOf html5
-   * @param {String|Array} newElements whitespace separated list or array of new element names to shiv
-   * @param {Document} ownerDocument The context document.
-   */
-  function addElements(newElements, ownerDocument) {
-    var elements = html5.elements;
-    if(typeof elements != 'string'){
-      elements = elements.join(' ');
-    }
-    if(typeof newElements != 'string'){
-      newElements = newElements.join(' ');
-    }
-    html5.elements = elements +' '+ newElements;
-    shivDocument(ownerDocument);
-  }
-
-   /**
-   * Returns the data associated to the given document
-   * @private
-   * @param {Document} ownerDocument The document.
-   * @returns {Object} An object of data.
-   */
-  function getExpandoData(ownerDocument) {
-    var data = expandoData[ownerDocument[expando]];
-    if (!data) {
-        data = {};
-        expanID++;
-        ownerDocument[expando] = expanID;
-        expandoData[expanID] = data;
-    }
-    return data;
-  }
-
-  /**
-   * returns a shived element for the given nodeName and document
-   * @memberOf html5
-   * @param {String} nodeName name of the element
-   * @param {Document|DocumentFragment} ownerDocument The context document.
-   * @returns {Object} The shived element.
-   */
-  function createElement(nodeName, ownerDocument, data){
-    if (!ownerDocument) {
-        ownerDocument = document;
-    }
-    if(supportsUnknownElements){
-        return ownerDocument.createElement(nodeName);
-    }
-    if (!data) {
-        data = getExpandoData(ownerDocument);
-    }
-    var node;
-
-    if (data.cache[nodeName]) {
-        node = data.cache[nodeName].cloneNode();
-    } else if (saveClones.test(nodeName)) {
-        node = (data.cache[nodeName] = data.createElem(nodeName)).cloneNode();
-    } else {
-        node = data.createElem(nodeName);
-    }
-
-    // Avoid adding some elements to fragments in IE < 9 because
-    // * Attributes like `name` or `type` cannot be set/changed once an element
-    //   is inserted into a document/fragment
-    // * Link elements with `src` attributes that are inaccessible, as with
-    //   a 403 response, will cause the tab/window to crash
-    // * Script elements appended to fragments will execute when their `src`
-    //   or `text` property is set
-    return node.canHaveChildren && !reSkip.test(nodeName) && !node.tagUrn ? data.frag.appendChild(node) : node;
-  }
-
-  /**
-   * returns a shived DocumentFragment for the given document
-   * @memberOf html5
-   * @param {Document} ownerDocument The context document.
-   * @returns {Object} The shived DocumentFragment.
-   */
-  function createDocumentFragment(ownerDocument, data){
-    if (!ownerDocument) {
-        ownerDocument = document;
-    }
-    if(supportsUnknownElements){
-        return ownerDocument.createDocumentFragment();
-    }
-    data = data || getExpandoData(ownerDocument);
-    var clone = data.frag.cloneNode(),
-        i = 0,
-        elems = getElements(),
-        l = elems.length;
-    for(;i<l;i++){
-        clone.createElement(elems[i]);
-    }
-    return clone;
-  }
-
-  /**
-   * Shivs the `createElement` and `createDocumentFragment` methods of the document.
-   * @private
-   * @param {Document|DocumentFragment} ownerDocument The document.
-   * @param {Object} data of the document.
-   */
-  function shivMethods(ownerDocument, data) {
-    if (!data.cache) {
-        data.cache = {};
-        data.createElem = ownerDocument.createElement;
-        data.createFrag = ownerDocument.createDocumentFragment;
-        data.frag = data.createFrag();
-    }
-
-
-    ownerDocument.createElement = function(nodeName) {
-      //abort shiv
-      if (!html5.shivMethods) {
-          return data.createElem(nodeName);
-      }
-      return createElement(nodeName, ownerDocument, data);
-    };
-
-    ownerDocument.createDocumentFragment = Function('h,f', 'return function(){' +
-      'var n=f.cloneNode(),c=n.createElement;' +
-      'h.shivMethods&&(' +
-        // unroll the `createElement` calls
-        getElements().join().replace(/[\w\-:]+/g, function(nodeName) {
-          data.createElem(nodeName);
-          data.frag.createElement(nodeName);
-          return 'c("' + nodeName + '")';
-        }) +
-      ');return n}'
-    )(html5, data.frag);
-  }
-
-  /*--------------------------------------------------------------------------*/
-
-  /**
-   * Shivs the given document.
-   * @memberOf html5
-   * @param {Document} ownerDocument The document to shiv.
-   * @returns {Document} The shived document.
-   */
-  function shivDocument(ownerDocument) {
-    if (!ownerDocument) {
-        ownerDocument = document;
-    }
-    var data = getExpandoData(ownerDocument);
-
-    if (html5.shivCSS && !supportsHtml5Styles && !data.hasCSS) {
-      data.hasCSS = !!addStyleSheet(ownerDocument,
-        // corrects block display not defined in IE6/7/8/9
-        'article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}' +
-        // adds styling not present in IE6/7/8/9
-        'mark{background:#FF0;color:#000}' +
-        // hides non-rendered elements
-        'template{display:none}'
-      );
-    }
-    if (!supportsUnknownElements) {
-      shivMethods(ownerDocument, data);
-    }
-    return ownerDocument;
-  }
-
-  /*--------------------------------------------------------------------------*/
-
-  /**
-   * The `html5` object is exposed so that more elements can be shived and
-   * existing shiving can be detected on iframes.
-   * @type Object
-   * @example
-   *
-   * // options can be changed before the script is included
-   * html5 = { 'elements': 'mark section', 'shivCSS': false, 'shivMethods': false };
-   */
-  var html5 = {
-
-    /**
-     * An array or space separated string of node names of the elements to shiv.
-     * @memberOf html5
-     * @type Array|String
-     */
-    'elements': options.elements || 'abbr article aside audio bdi canvas data datalist details dialog figcaption figure footer header hgroup main mark meter nav output picture progress section summary template time video',
-
-    /**
-     * current version of html5shiv
-     */
-    'version': version,
-
-    /**
-     * A flag to indicate that the HTML5 style sheet should be inserted.
-     * @memberOf html5
-     * @type Boolean
-     */
-    'shivCSS': (options.shivCSS !== false),
-
-    /**
-     * Is equal to true if a browser supports creating unknown/HTML5 elements
-     * @memberOf html5
-     * @type boolean
-     */
-    'supportsUnknownElements': supportsUnknownElements,
-
-    /**
-     * A flag to indicate that the document's `createElement` and `createDocumentFragment`
-     * methods should be overwritten.
-     * @memberOf html5
-     * @type Boolean
-     */
-    'shivMethods': (options.shivMethods !== false),
-
-    /**
-     * A string to describe the type of `html5` object ("default" or "default print").
-     * @memberOf html5
-     * @type String
-     */
-    'type': 'default',
-
-    // shivs the document according to the specified `html5` object options
-    'shivDocument': shivDocument,
-
-    //creates a shived element
-    createElement: createElement,
-
-    //creates a shived documentFragment
-    createDocumentFragment: createDocumentFragment,
-
-    //extends list of elements
-    addElements: addElements
-  };
-
-  /*--------------------------------------------------------------------------*/
-
-  // expose html5
-  window.html5 = html5;
-
-  // shiv the document
-  shivDocument(document);
-
-  if(typeof module == 'object' && module.exports){
-    module.exports = html5;
-  }
-
-}(typeof window !== "undefined" ? window : this, document));
@@ -1,12 +1,14 @@
 const mixinsVue = {
    data: {
        cache: [],
+        isMobile: false,
        theme: "light",
        isSystemTheme: false,
        showGroup: false,
        showGoTop: false,
+        showTools: false,
        preferredTemplate: null,
-        isMobile: false,
+        semiTransparent: false,
        staticUrl: '/static/theme-server-status',
        adaptedTemplates: [
            { key: 'default', name: 'Default', icon: 'th large' },
@@ -18,6 +20,7 @@ const mixinsVue = {
        this.isMobile = this.checkIsMobile();
        this.theme = this.initTheme();
        this.showGroup = this.initShowGroup();
+        this.semiTransparent = this.initSemiTransparent();
        this.preferredTemplate = this.getCookie('preferred_theme') ? this.getCookie('preferred_theme') : this.$root.defaultTemplate;
        window.addEventListener('scroll', this.handleScroll);
    },
@@ -32,6 +35,9 @@ const mixinsVue = {
                window.location.reload();
            }
        },
+        toggleShowTools() {
+            this.showTools = !this.showTools;
+        },
        initTheme() {
            const storedTheme = localStorage.getItem("theme");
            const theme = (storedTheme === 'dark' || storedTheme === 'light') ? storedTheme : (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
@@ -64,6 +70,21 @@ const mixinsVue = {
                this.$root.initTooltip();
            }
        },
+        initSemiTransparent() {
+            const storedSemiTransparent = localStorage.getItem("semiTransparent");
+            const semiTransparent = storedSemiTransparent !== null ? JSON.parse(storedSemiTransparent) : false;
+            if (storedSemiTransparent === null) {
+                localStorage.setItem("semiTransparent", semiTransparent);
+            }
+            return semiTransparent;
+        },
+        toggleSemiTransparent(){
+            this.semiTransparent = !this.semiTransparent;
+            localStorage.setItem("semiTransparent", this.semiTransparent);
+            if(this.$root.page == 'index') {
+                this.reloadCharts(); // 重新载入echarts图表
+            }
+        },
        updateCookie(name, value) {
            document.cookie = name + "=" + value +"; path=/";
        },
@@ -106,6 +127,7 @@ const mixinsVue = {
        },
        handleScroll() {
            this.showGoTop = window.scrollY >= 100;
+            if(this.showTools) this.showTools = false;
        },
        groupingData(data, field) {
            let map = new Map();
@@ -1,5 +0,0 @@
-/*! Respond.js v1.4.2: min/max-width media query polyfill * Copyright 2013 Scott Jehl
- * Licensed under https://github.com/scottjehl/Respond/blob/master/LICENSE-MIT
- *  */
-
-!function(a){"use strict";a.matchMedia=a.matchMedia||function(a){var b,c=a.documentElement,d=c.firstElementChild||c.firstChild,e=a.createElement("body"),f=a.createElement("div");return f.id="mq-test-1",f.style.cssText="position:absolute;top:-100em",e.style.background="none",e.appendChild(f),function(a){return f.innerHTML='&shy;<style media="'+a+'"> #mq-test-1 { width: 42px; }</style>',c.insertBefore(e,d),b=42===f.offsetWidth,c.removeChild(e),{matches:b,media:a}}}(a.document)}(this),function(a){"use strict";function b(){u(!0)}var c={};a.respond=c,c.update=function(){};var d=[],e=function(){var b=!1;try{b=new a.XMLHttpRequest}catch(c){b=new a.ActiveXObject("Microsoft.XMLHTTP")}return function(){return b}}(),f=function(a,b){var c=e();c&&(c.open("GET",a,!0),c.onreadystatechange=function(){4!==c.readyState||200!==c.status&&304!==c.status||b(c.responseText)},4!==c.readyState&&c.send(null))};if(c.ajax=f,c.queue=d,c.regex={media:/@media[^\{]+\{([^\{\}]*\{[^\}\{]*\})+/gi,keyframes:/@(?:\-(?:o|moz|webkit)\-)?keyframes[^\{]+\{(?:[^\{\}]*\{[^\}\{]*\})+[^\}]*\}/gi,urls:/(url\()['"]?([^\/\)'"][^:\)'"]+)['"]?(\))/g,findStyles:/@media *([^\{]+)\{([\S\s]+?)$/,only:/(only\s+)?([a-zA-Z]+)\s?/,minw:/\([\s]*min\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/,maxw:/\([\s]*max\-width\s*:[\s]*([\s]*[0-9\.]+)(px|em)[\s]*\)/},c.mediaQueriesSupported=a.matchMedia&&null!==a.matchMedia("only all")&&a.matchMedia("only all").matches,!c.mediaQueriesSupported){var g,h,i,j=a.document,k=j.documentElement,l=[],m=[],n=[],o={},p=30,q=j.getElementsByTagName("head")[0]||k,r=j.getElementsByTagName("base")[0],s=q.getElementsByTagName("link"),t=function(){var a,b=j.createElement("div"),c=j.body,d=k.style.fontSize,e=c&&c.style.fontSize,f=!1;return b.style.cssText="position:absolute;font-size:1em;width:1em",c||(c=f=j.createElement("body"),c.style.background="none"),k.style.fontSize="100%",c.style.fontSize="100%",c.appendChild(b),f&&k.insertBefore(c,k.firstChild),a=b.offsetWidth,f?k.removeChild(c):c.removeChild(b),k.style.fontSize=d,e&&(c.style.fontSize=e),a=i=parseFloat(a)},u=function(b){var c="clientWidth",d=k[c],e="CSS1Compat"===j.compatMode&&d||j.body[c]||d,f={},o=s[s.length-1],r=(new Date).getTime();if(b&&g&&p>r-g)return a.clearTimeout(h),h=a.setTimeout(u,p),void 0;g=r;for(var v in l)if(l.hasOwnProperty(v)){var w=l[v],x=w.minw,y=w.maxw,z=null===x,A=null===y,B="em";x&&(x=parseFloat(x)*(x.indexOf(B)>-1?i||t():1)),y&&(y=parseFloat(y)*(y.indexOf(B)>-1?i||t():1)),w.hasquery&&(z&&A||!(z||e>=x)||!(A||y>=e))||(f[w.media]||(f[w.media]=[]),f[w.media].push(m[w.rules]))}for(var C in n)n.hasOwnProperty(C)&&n[C]&&n[C].parentNode===q&&q.removeChild(n[C]);n.length=0;for(var D in f)if(f.hasOwnProperty(D)){var E=j.createElement("style"),F=f[D].join("\n");E.type="text/css",E.media=D,q.insertBefore(E,o.nextSibling),E.styleSheet?E.styleSheet.cssText=F:E.appendChild(j.createTextNode(F)),n.push(E)}},v=function(a,b,d){var e=a.replace(c.regex.keyframes,"").match(c.regex.media),f=e&&e.length||0;b=b.substring(0,b.lastIndexOf("/"));var g=function(a){return a.replace(c.regex.urls,"$1"+b+"$2$3")},h=!f&&d;b.length&&(b+="/"),h&&(f=1);for(var i=0;f>i;i++){var j,k,n,o;h?(j=d,m.push(g(a))):(j=e[i].match(c.regex.findStyles)&&RegExp.$1,m.push(RegExp.$2&&g(RegExp.$2))),n=j.split(","),o=n.length;for(var p=0;o>p;p++)k=n[p],l.push({media:k.split("(")[0].match(c.regex.only)&&RegExp.$2||"all",rules:m.length-1,hasquery:k.indexOf("(")>-1,minw:k.match(c.regex.minw)&&parseFloat(RegExp.$1)+(RegExp.$2||""),maxw:k.match(c.regex.maxw)&&parseFloat(RegExp.$1)+(RegExp.$2||"")})}u()},w=function(){if(d.length){var b=d.shift();f(b.href,function(c){v(c,b.href,b.media),o[b.href]=!0,a.setTimeout(function(){w()},0)})}},x=function(){for(var b=0;b<s.length;b++){var c=s[b],e=c.href,f=c.media,g=c.rel&&"stylesheet"===c.rel.toLowerCase();e&&g&&!o[e]&&(c.styleSheet&&c.styleSheet.rawCssText?(v(c.styleSheet.rawCssText,e,f),o[e]=!0):(!/^([a-zA-Z:]*\/\/)/.test(e)&&!r||e.replace(RegExp.$1,"").split("/")[0]===a.location.host)&&("//"===e.substring(0,2)&&(e=a.location.protocol+e),d.push({href:e,media:f})))}w()};x(),c.update=x,c.getEmValue=t,a.addEventListener?a.addEventListener("resize",b,!1):a.attachEvent&&a.attachEvent("onresize",b)}}(this);
@@ -1,21 +0,0 @@
-{{define "theme-server-status/content-footer"}}
-<footer>
-    <p>{{ .Conf.Site.Brand }} | Theme ServerStatus | Powered by <a target="_blank" href="https://github.com/naiba/nezha">{{tr "NezhaMonitoring"}}</a> {{.Version}}</p>
-</footer>
-<aside class="toolbox">
-    <span v-if="page=='index' && countryMapChartData.length!=0" class="showMapChart">
-        <i @click="showMapChart" data-toggle="modal" data-target="#mapChartBox" class="bi bi-geo-alt"></i>
-    </span>
-    <span class="toggleView">
-        <i v-if="showGroup" @click="toggleShowGroup" class="show-nogroup bi bi-justify"></i>
-        <i v-else @click="toggleShowGroup" class="show-group bi bi-view-stacked"></i>
-    </span>
-    <span class="setTheme">
-        <i v-if="theme === 'light'" @click="setTheme('dark')" class="setTheme-dark bi bi-moon-fill"></i>
-        <i v-else @click="setTheme('light')" class="setTheme-light bi bi-brightness-high-fill"></i>
-    </span>
-    <span v-if="showGoTop" class="showGoTop">
-        <i @click="goTop" class="goTop bi bi-arrow-up"></i>
-    </span>
-</aside>
-{{end}}
@@ -1,4 +1,38 @@
 {{define "theme-server-status/footer"}}
+	</div>
+	<footer class="container-fluid">
+	    <p>{{ .Conf.Site.Brand }} | Theme ServerStatus | Powered by <a target="_blank" href="https://github.com/naiba/nezha">{{tr "NezhaMonitoring"}}</a> {{.Version}}</p>
+	</footer>
+	<aside class="toolbox">
+		<template v-if="showTools">
+		    <span v-if="page=='index' && countryMapChartData.length!=0" class="showMapChart">
+		        <i @click="showMapChart" data-toggle="modal" data-target="#mapChartBox" class="bi bi-geo-alt"></i>
+		    </span>
+		    <span class="toggleView">
+		        <i v-if="showGroup" @click="toggleShowGroup" class="show-nogroup bi bi-justify"></i>
+		        <i v-else @click="toggleShowGroup" class="show-group bi bi-view-stacked"></i>
+		    </span>
+			<span class="toggleSemiTransparent" @click="toggleSemiTransparent">
+			    <i class="bi" :class="semiTransparent ? 'bi-droplet' : 'bi-droplet-half'"></i>
+			</span>
+	    </template>
+	   	<span v-if="!showTools">
+	    	<i @click="toggleShowTools" class="bi bi-three-dots"></i>
+	    </span>
+	    <span class="setTheme">
+	        <i v-if="theme === 'light'" @click="setTheme('dark')" class="setTheme-dark bi bi-moon-fill"></i>
+	        <i v-else @click="setTheme('light')" class="setTheme-light bi bi-brightness-high-fill"></i>
+	    </span>
+	    <span v-if="showGoTop" class="showGoTop">
+	        <i @click="goTop" class="goTop bi bi-arrow-up"></i>
+	    </span>
+	</aside>
+	<template v-if="semiTransparent">
+   		<link rel="stylesheet" href="/static/theme-server-status/css/light.plus.css?v20240807">
+   		<link rel="stylesheet" href="/static/theme-server-status/css/dark.plus.css?v20240807"> 
+	</template>
+</div>
+{{if ts .CustomCode}}{{.CustomCode|safe}}{{end}}
 </body>
 </html>
 {{end}}
@@ -8,10 +8,6 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" type="image/png" href="/static/logo.svg" />
    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.4.1/dist/css/bootstrap.min.css">
-    <link rel="stylesheet" href="https://unpkg.com/bootstrap@3.4.1/dist/css/bootstrap-theme.min.css">
-    <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240724">
-    <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20240724">
-    <link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240407">
    <link rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="https://unpkg.com/font-logos@0.17.0/assets/font-logos.css">
    <link rel="stylesheet" href="https://unpkg.com/flag-icons@7.2.3/css/flag-icons.min.css">
@@ -20,17 +16,13 @@
    <script src="https://unpkg.com/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script>
    <script src="https://unpkg.com/echarts@5.5.0/dist/echarts.min.js"></script>
-    <script src="/static/theme-server-status/js/mixin.js?v20240711"></script>
-    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
-    <!--[if lt IE 9]>
-    <script src="/static/theme-server-status/js/html5shiv.js"></script>
-    <script src="/static/theme-server-status/js/respond.min.js"></script>
-    <![endif]-->
-    {{if ts .CustomCode}}
-    {{.CustomCode|safe}}
-    {{end}}
+    <link rel="stylesheet" href="/static/theme-server-status/css/main.css?v20240807">
+    <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20240807">
+    <link rel="stylesheet" href="/static/theme-server-status/css/light.css?v20240807">
+    <script src="/static/theme-server-status/js/mixin.js?v20240807"></script>
 </head>
 <body>
+<div id="app">
 {{end}}


@@ -1,34 +1,35 @@
 {{define "theme-server-status/home"}}
 {{template "theme-server-status/header" .}}
-<div id="app">
-    {{template "theme-server-status/content-nav" .}}   
-    <!--  showGroup true -->
-    <template v-if="showGroup">
-        <section class="container table-responsive content" style="max-width: 95vw" v-for="group in nodesTag">
-            {{template "theme-server-status/home-group-true" .}} 
-        </section>
-    </template>
-    <!--  showGroup false -->
-    <template v-else>
-        <section class="container table-responsive content" style="max-width: 95vw">
-            {{template "theme-server-status/home-group-false" .}}
-        </section>
-    </template>
-    <div class="modal fade" id="mapChartBox" tabindex="-1" role="dialog" aria-labelledby="mapChartTitle" aria-hidden="true">
-        <div class="modal-dialog modal-lg modal-dialog-centered">
-            <div class="modal-content">
-                <div class="modal-header">
-                    <h4 class="modal-title" id="mapChartTitle">{{tr "ServersOnWorldMap"}}</h4>
-                    <i class="bi bi-x" data-dismiss="modal" aria-label="Close"></i>
-                </div>
-                <div class="modal-body">
-                    <div id="mapChart" style="width:100%;height:auto;"></div>
-                </div>
+{{template "theme-server-status/menu" .}}   
+<!--  showGroup true -->
+<template v-if="showGroup">
+    <section class="container-fluid table-responsive content" v-for="group in nodesTag">
+        {{template "theme-server-status/home-group-true" .}} 
+    </section>
+</template>
+<!--  showGroup false -->
+<template v-else>
+    <section class="container-fluid table-responsive content">
+        {{template "theme-server-status/home-group-false" .}}
+    </section>
+</template>
+<div class="modal fade" id="mapChartBox" tabindex="-1" role="dialog" aria-labelledby="mapChartTitle" aria-hidden="true" style="padding-left:0">
+    <div class="modal-dialog modal-lg modal-dialog-centered">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h4 class="modal-title" id="mapChartTitle">
+                    <i class="bi bi-geo-alt"></i>
+                    <span>{{tr "ServersOnWorldMap"}}</span>
+                </h4>
+                <i class="bi bi-x xclose" data-dismiss="modal" aria-label="Close"></i>
+            </div>
+            <div class="modal-body">
+                <div id="mapChart"></div>
            </div>
        </div>
    </div>
-    {{template "theme-server-status/content-footer" .}}
 </div>
+{{template "theme-server-status/footer" .}}
 <script>
    new Vue({
        el: '#app',
@@ -155,8 +156,8 @@
                }
                const unit = this.language=='zh-CN' ? '台' : 'servers';
                const isMobile = this.checkIsMobile();
-                const width = isMobile ? 338 : 1102;
-                const height = isMobile ? 200 : 500;
+                const width = window.innerWidth;
+                const height = 0.95 * window.innerHeight;
                const backgroundColor = this.theme == "dark" ? '' : '';
                const inRangeColor = this.theme == "dark" ? '#D2B206' : '#FFDF32';
                const tooltipBackgroundColor = this.theme == "dark" ? "#ffffff" : '#ffffff';
@@ -521,8 +522,10 @@
                const chartTheme = theme == "dark" ? "dark" : "default";
                const fontColor = theme == "dark" ? "#f1f1f1" : "#000000";
                const backgroundColor = theme == "dark" ? '' : '';
-                const tooltipBackgroundColor = theme == "dark" ? "#1C1D26" : '#ffffff';
-                const tooltipBorderColor = theme == "dark" ? "#31363B" : "#ffffff";
+                const tooltipBackgroundColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.85)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.85)" : "rgba(255,255,255,1)");
+                const tooltipBorderColor = this.theme == "dark" ? (this.semiTransparent ? "rgba(28,29,38,0.9)" : "rgba(28,29,38,1)") : (this.semiTransparent ? "rgba(255,255,255,0.9)" : "rgba(255,255,255,1)");
+                const lineStyleWidth = isMobile ? 1 : 2;
+                const splitLineWidth = isMobile ? 0.5 : 1;
                // 渲染图表
                const chart = echarts.init(chartContainer, chartTheme, {
                    renderer: 'canvas',
@@ -549,7 +552,10 @@
                        smooth: true,
                        symbol: 'none',
                        data: data,
-                        connectNulls: true
+                        connectNulls: true,
+                        lineStyle: {
+                            width: lineStyleWidth
+                        }  
                    };
                });

@@ -611,6 +617,11 @@
                            textStyle: {
                                fontSize: fontSize
                            }
+                        },
+                        splitLine: {
+                            lineStyle: {
+                                width: splitLineWidth
+                            }
                        }
                    },
                    dataZoom: [
@@ -645,5 +656,4 @@
        }
    })
 </script>
-{{template "theme-server-status/footer" .}}
 {{end}}
@@ -1,6 +1,6 @@
-{{define "theme-server-status/content-nav"}}
-<header role="navigation" class="navbar navbar-inverse navbar-fixed-top" style="z-index:99999999;">
-    <div class="container">
+{{define "theme-server-status/menu"}}
+<header role="navigation" class="navbar navbar-inverse navbar-fixed-top">
+    <div class="container-fluid">
        <div class="navbar-header">
            <button data-target=".navbar-collapse" data-toggle="collapse" class="navbar-toggle" type="button">
                <span class="sr-only">Toggle navigation</span>
@@ -64,5 +64,6 @@
        </nav>
    </div>
 </header>
+<div class="nezha">
 {{end}}

@@ -1,23 +1,20 @@
 {{define "theme-server-status/network"}}
 {{template "theme-server-status/header" .}}
-<div id="app">
-    {{template "theme-server-status/content-nav" .}}
-    <div class="container table-responsive content" style="max-width: 95vw">
-        <table class="table table-striped table-condensed table-hover">
-            <button class="ui nezha-primary-btn button"
-                    v-for="server in servers"
-                    style="margin-top: 3px"
-                    @click="redirectNetwork(server.ID)">
-                @#server.Name#@&nbsp;&nbsp;<i :class="'fi fi-' + server.Host.CountryCode"></i><span class="node-cell-location-text text-uppercase">&nbsp;&nbsp;@#server.Host.CountryCode#@</span>
-            </button>
-        </table>
-    </div>
-    <div class="container table-responsive content" style="max-width: 95vw">
-        <div ref="chartDom" style="border-radius: 28px; margin-top: 15px;height: 520px;max-width: 1400px;overflow: hidden"></div>
-    </div>
-    {{template "theme-server-status/content-footer" .}}
+{{template "theme-server-status/menu" .}}
+<div class="container-fluid table-responsive content">
+    <table class="table table-striped table-condensed table-hover">
+        <button class="ui nezha-primary-btn button"
+                v-for="server in servers"
+                style="margin-top: 3px"
+                @click="redirectNetwork(server.ID)">
+            @#server.Name#@&nbsp;&nbsp;<i :class="'fi fi-' + server.Host.CountryCode"></i><span class="node-cell-location-text text-uppercase">&nbsp;&nbsp;@#server.Host.CountryCode#@</span>
+        </button>
+    </table>
 </div>
-
+<div class="container-fluid table-responsive content">
+    <div ref="chartDom" style="border-radius: 28px; margin-top: 15px;height: 520px;max-width: 1400px;overflow: hidden"></div>
+</div>
+{{template "theme-server-status/footer" .}}
 <script>
    const monitorInfo =  JSON.parse('{{.MonitorInfos}}');
    const initData = JSON.parse('{{.Servers}}').servers;
@@ -239,5 +236,4 @@
        },
    });
 </script>
-{{template "theme-server-status/footer" .}}
 {{end}}
@@ -1,77 +1,75 @@
 {{define "theme-server-status/service"}}
 {{template "theme-server-status/header" .}}
-<div id="app">
-    {{template "theme-server-status/content-nav" .}}
-    <!--  showGroup true -->
-    <template v-if="showGroup">
-        <section v-if="servicesTag.length === 0" class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;">
-            <p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
-        </section>
-        <section v-else class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;" v-for="group in servicesTag">
-            {{template "theme-server-status/service-group-true" .}} 
-        </section>
-    </template>
-    <!--  showGroup false -->
-    <template v-else>
-        <section v-if="servicesNoTag.length === 0" class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;">
-            <p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
-        </section>
-        <section v-else class="container content" style="max-width: 95vw; min-height: .01%;overflow-x: auto;">
-            {{template "theme-server-status/service-group-false" .}}
-        </section>
-    </template>
-    {{if .CycleTransferStats}}
-        <section class="container content table-responsive" style="max-width: 95vw">
-            <table class="table table-striped table-condensed table-hover">
-                <thead>
-                    <tr class="node-group-tag">
-                        <th colspan="16" style="border:none;">
-                            {{tr "CycleTransferStats"}}
-                        </th>
-                    </tr>
-                    <tr class="node-group-cell">
-                        <th class="node-cell center">ID</th>
-                        <th class="node-cell center">{{tr "Rules"}}</th>
-                        <th class="node-cell center">{{tr "Server"}}</th>
-                        <th class="node-cell center">{{tr "From"}}</th>
-                        <th class="node-cell center">{{tr "To"}}</th>
-                        <th class="node-cell center">MAX</th>
-                        <th class="node-cell center">MIN</th>
-                        <th class="node-cell center">{{tr "NextCheck"}}</th>
-                        <th class="node-cell center">{{tr "CurrentUsage"}}</th>
-                        <th class="node-cell center">{{tr "Transleft"}}</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    {{range $id, $stats := .CycleTransferStats}}
-                        {{range $innerId, $transfer := $stats.Transfer}}
-                            {{$TransLeftPercent := TransLeftPercent (UintToFloat $transfer) (UintToFloat $stats.Max)}}
-                            <tr>
-                                <td class="node-cell center">{{$id}}</td>
-                                <td class="node-cell center">{{$stats.Name}}</td>
-                                <td class="node-cell center">{{index $stats.ServerName $innerId}}</td>
-                                <td class="node-cell center">{{$stats.From|tf}}</td>
-                                <td class="node-cell center">{{$stats.To|tf}}</td>
-                                <td class="node-cell center">{{$stats.Max|bf}}</td>
-                                <td class="node-cell center">{{$stats.Min|bf}}</td>
-                                <td class="node-cell center">{{(index $stats.NextUpdate $innerId)|sft}}</td>
-                                <td class="node-cell center">{{$transfer|bf}}</td>
-                                <td class="node-cell center">
-                                    <div class="progress">
-                                        <div style="width: {{$TransLeftPercent}}%" :class="'progress-bar progress-bar-' + toSSBar('{{TransClassName $TransLeftPercent}}')">
-                                            <small style="display: inline-block;width: max-content;">{{TransLeft $stats.Max $transfer}} / {{$TransLeftPercent}} %</small>
-                                        </div>
+{{template "theme-server-status/menu" .}}
+<!--  showGroup true -->
+<template v-if="showGroup">
+    <section v-if="servicesTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
+        <p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
+    </section>
+    <section v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;" v-for="group in servicesTag">
+        {{template "theme-server-status/service-group-true" .}} 
+    </section>
+</template>
+<!--  showGroup false -->
+<template v-else>
+    <section v-if="servicesNoTag.length === 0" class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
+        <p>No Valid Service Monitor Configuration Entries Found. Please Verify in the <a href="/monitor">Admin Panel</a>.</p>
+    </section>
+    <section v-else class="container-fluid content" style="min-height: .01%;overflow-x: auto;">
+        {{template "theme-server-status/service-group-false" .}}
+    </section>
+</template>
+{{if .CycleTransferStats}}
+    <section class="container-fluid content table-responsive">
+        <table class="table table-striped table-condensed table-hover">
+            <thead>
+                <tr class="node-group-tag">
+                    <th colspan="16" style="border:none;">
+                        {{tr "CycleTransferStats"}}
+                    </th>
+                </tr>
+                <tr class="node-group-cell">
+                    <th class="node-cell center">ID</th>
+                    <th class="node-cell center">{{tr "Rules"}}</th>
+                    <th class="node-cell center">{{tr "Server"}}</th>
+                    <th class="node-cell center">{{tr "From"}}</th>
+                    <th class="node-cell center">{{tr "To"}}</th>
+                    <th class="node-cell center">MAX</th>
+                    <th class="node-cell center">MIN</th>
+                    <th class="node-cell center">{{tr "NextCheck"}}</th>
+                    <th class="node-cell center">{{tr "CurrentUsage"}}</th>
+                    <th class="node-cell center">{{tr "Transleft"}}</th>
+                </tr>
+            </thead>
+            <tbody>
+                {{range $id, $stats := .CycleTransferStats}}
+                    {{range $innerId, $transfer := $stats.Transfer}}
+                        {{$TransLeftPercent := TransLeftPercent (UintToFloat $transfer) (UintToFloat $stats.Max)}}
+                        <tr>
+                            <td class="node-cell center">{{$id}}</td>
+                            <td class="node-cell center">{{$stats.Name}}</td>
+                            <td class="node-cell center">{{index $stats.ServerName $innerId}}</td>
+                            <td class="node-cell center">{{$stats.From|tf}}</td>
+                            <td class="node-cell center">{{$stats.To|tf}}</td>
+                            <td class="node-cell center">{{$stats.Max|bf}}</td>
+                            <td class="node-cell center">{{$stats.Min|bf}}</td>
+                            <td class="node-cell center">{{(index $stats.NextUpdate $innerId)|sft}}</td>
+                            <td class="node-cell center">{{$transfer|bf}}</td>
+                            <td class="node-cell center">
+                                <div class="progress">
+                                    <div style="width: {{$TransLeftPercent}}%" :class="'progress-bar progress-bar-' + toSSBar('{{TransClassName $TransLeftPercent}}')">
+                                        <small style="display: inline-block;width: max-content;">{{TransLeft $stats.Max $transfer}} / {{$TransLeftPercent}} %</small>
                                    </div>
-                                </td>
-                            </tr>
-                        {{end}}
+                                </div>
+                            </td>
+                        </tr>
                    {{end}}
-                </tbody>
-            </table>
-        </section>
-    {{end}}
-    {{template "theme-server-status/content-footer" .}}
-</div>
+                {{end}}
+            </tbody>
+        </table>
+    </section>
+{{end}}
+{{template "theme-server-status/footer" .}}
 <script>
    new Vue({
        el: '#app',
@@ -240,5 +238,4 @@
        }
    })
 </script>
-{{template "theme-server-status/footer" .}}
 {{end}}
				`@@ -1 +0,0 @@`
				{"version":3,"sources":["bootstrap-theme.css","dist/css/bootstrap-theme.css","less/theme.less","less/mixins/vendor-prefixes.less","less/mixins/gradients.less","less/mixins/reset-filter.less"],"names":[],"mappings":"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 truncated