improve & fix : 主题优化及bug修复 (#409)

* 主题优化及bug修复 default主题 1.修复主box过宽导致的系列问题（pc和移动端） 2.network页面适配深色模式和浅色模式 status-server主题 1. network页面折线图取数逻辑优化，丢包率一直是100%时，不显示丢包markline线 2. 隐藏所有table横向滚动条 3. 关闭折线图hover效果，大幅提升echarts图表渲染速度 4. 移动端页底显示位置优化 * 刷新cdn缓存 * 修复default深色模式在ios设备不生效bug * 1. 恢复主baox 1680px宽度，用其他方式修复上一版存在bug（移动端左右留空不一致等） 2. 首页echarts自动适配深色浅色模式 * fix
nezhahq · Aug 17, 2024 · e9428d5 · e9428d5
1 parent daab64d
commit e9428d5
Show file tree

Hide file tree

Showing 12 changed files with 239 additions and 254 deletions.
diff --git a/resource/static/darkmode.css b/resource/static/darkmode.css
@@ -1,148 +1,141 @@
-.ui.container {
-    width: 95vw !important;
-    max-width: 1680px !important;
-}
-
-html[nz-theme='dark'] {
-    body {
-        background-color: #121212 !important;
-        color: #fff !important;
-    }
-
-    .ui.menu {
-        background-color: #282828 !important;
-    }
-
-    .ui.menu * {
-        color: #fff !important;
-    }
-
-    .accordion {
-        background-color: #282828 !important;
-    }
-
-    .accordion .title {
-        color: #fff !important;
-    }
-
-    .ui.card {
-        background-color: #3f3f3f !important;
-        border: none !important;
-        box-shadow: none !important;
-    }
-
-    .header {
-        color: #fff !important;
-    }
-
-    .description {
-        color: #fff !important;
-    }
-
-    .icon {
-        color: #fff !important;
-    }
-
-    .ui.popup {
-        background-color: #575757 !important;
-        color: #fff !important;
-    }
-
-    .ui.table {
-        background-color: #282828 !important;
-        color: #fff !important;
-    }
-
-    .ui thead th {
-        background-color: #3f3f3f !important;
-        color: #fff !important;
-    }
-
-    .ui.buttons .button {
-        background-color: #3f3f3f !important;
-        color: #fff !important;
-    }
-
-    .ui.modal {
-        background-color: #282828 !important;
-    }
-
-    .ui.modal * {
-        color: #fff !important;
-    }
-
-    textarea,
-    input,
-    select,
-    .dropdown {
-        background-color: #3f3f3f !important;
-        color: #fff !important;
-    }
-
-    .ui.message {
-        background-color: unset !important;
-    }
-
-    .ui.dropdown .menu {
-        background-color: #575757 !important;
-        color: #fff !important;
-    }
-
-    .ui.modal>.header {
-        background-color: #3f3f3f !important;
-    }
-
-    .ui.modal>.content {
-        background-color: #282828 !important;
-    }
-
-    .ui.modal>.actions {
-        background-color: #3f3f3f !important;
-    }
-
-    #alert {
-        background-color: #3f3f3f !important;
-        color: #fff !important;
-    }
-
-    .ui.form .field>label {
-        color: unset !important;
-    }
-
-    .ui.segment {
-        background-color: #3f3f3f !important;
-    }
-
-    .ui.segment textarea,
-    input,
-    select,
-    .dropdown {
-        background-color: #575757 !important;
-        color: #fff !important;
-    }
-
-    form label {
-        color: #fff !important;
-    }
-
-    .ui.inverted.segment {
-        background-color: #121212 !important;
-    }
-
-    .ui.inverted.segment * {
-        color: #8b8b8b !important;
-    }
-
-    .menu .dropdown {
-        background-color: #282828 !important;
-        color: #fff !important;
-    }
-
-    .ui.menu .ui.dropdown .menu>.item {
-        color: #fff !important;
-    }
-
-    .login .ui.message{
-        color: #8b8b8b !important;
-    }
-}
+html[nz-theme='dark'] body {
+    background-color: #121212 !important;
+    color: #fff !important;
+}
+
+html[nz-theme='dark']  .ui.menu {
+    background-color: #282828 !important;
+}
+
+html[nz-theme='dark'] .ui.menu * {
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] .accordion {
+    background-color: #282828 !important;
+}
+
+html[nz-theme='dark'] .accordion .title {
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] .ui.card {
+    background-color: #3f3f3f !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+html[nz-theme='dark'] .header {
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] .description {
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] .icon {
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] .ui.popup {
+    background-color: #575757 !important;
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] .ui.table {
+    background-color: #282828 !important;
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] .ui thead th {
+    background-color: #3f3f3f !important;
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] .ui.buttons .button {
+    background-color: #3f3f3f !important;
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] .ui.modal {
+    background-color: #282828 !important;
+}
+
+html[nz-theme='dark'] .ui.modal * {
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] textarea,
+html[nz-theme='dark'] input,
+html[nz-theme='dark'] select,
+html[nz-theme='dark'] .dropdown {
+    background-color: #3f3f3f !important;
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] .ui.message {
+    background-color: unset !important;
+}
+
+html[nz-theme='dark'] .ui.dropdown .menu {
+    background-color: #575757 !important;
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] .ui.modal>.header {
+    background-color: #3f3f3f !important;
+}
+
+html[nz-theme='dark'] .ui.modal>.content {
+    background-color: #282828 !important;
+}
+
+html[nz-theme='dark'] .ui.modal>.actions {
+    background-color: #3f3f3f !important;
+}
+
+html[nz-theme='dark'] #alert {
+    background-color: #3f3f3f !important;
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] .ui.form .field>label {
+    color: unset !important;
+}
+
+html[nz-theme='dark'] .ui.segment {
+    background-color: #3f3f3f !important;
+}
+
+html[nz-theme='dark'] .ui.segment textarea,
+html[nz-theme='dark'] input,
+html[nz-theme='dark'] select,
+html[nz-theme='dark'] .dropdown {
+    background-color: #575757 !important;
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] form label {
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] .ui.inverted.segment {
+    background-color: #121212 !important;
+}
+
+html[nz-theme='dark'] .ui.inverted.segment * {
+    color: #8b8b8b !important;
+}
+
+html[nz-theme='dark'] .menu .dropdown {
+    background-color: #282828 !important;
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] .ui.menu .ui.dropdown .menu>.item {
+    color: #fff !important;
+}
+
+html[nz-theme='dark'] .login .ui.message{
+    color: #8b8b8b !important;
+}
diff --git a/resource/static/main.css b/resource/static/main.css
@@ -9,6 +9,11 @@ td {
   word-break: break-all;
 }
 
+.ui.container{
+  width: 95vw !important;
+  max-width: 1680px !important;
+}
+
 .nb-container {
   padding-top: 75px;
   min-height: 100vh;

diff --git a/resource/static/theme-default/css/main.css b/resource/static/theme-default/css/main.css
@@ -1,14 +1,5 @@
 /* 屏幕适配 */
-@media only screen and (min-width:1200px) {
-  .ui.container {
-    width: 95% !important;
-    font-size: 90% !important;
-    max-width: 1300px !important;
-  }
-}
-
 @media only screen and (max-width:767px) {
-
   .ui.card>.content>.header:not(.ui),
   .ui.cards>.card>.content>.header:not(.ui) {
     margin-top: 0.4em !important;
@@ -41,16 +32,6 @@ i.fi {
   margin: 0px 6px 0px 2px;
 }
 
-body {
-  content: " " !important;
-  background: fixed !important;
-  z-index: -1 !important;
-  top: 0 !important;
-  right: 0 !important;
-  bottom: 0 !important;
-  left: 0 !important;
-}
-
 td {
   word-wrap: break-word;
   word-break: break-all;
@@ -63,6 +44,11 @@ td {
   margin-bottom: -47px;
 }
 
+.ui.container {
+  width: 95%;
+  max-width: 1680px !important;
+}
+
 #app .ui.fluid.accordion {
   margin-bottom: 1rem;
 }

diff --git a/resource/static/theme-server-status/css/main.css b/resource/static/theme-server-status/css/main.css
@@ -9,6 +9,10 @@ body {
     margin: 0 auto;
 }
 
+.container-fluid::-webkit-scrollbar {
+    display: none;
+}
+
 .nezha {
     min-height: calc(100vh - 100px);
 }
@@ -470,14 +474,13 @@ footer p{
     background-image: url(/static/theme-server-status/img/rb.png);
 }
 
-
 @media only screen and (max-width: 767px) {
     body {
         font-size: 10px !important;
         padding-top:60px !important;
     }
     .nezha {
-        min-height: calc(100vh - 80px);
+        min-height: calc(74.5vh);
     }
     .content {
         padding: 0;

diff --git a/resource/template/theme-default/footer.html b/resource/template/theme-default/footer.html
@@ -16,8 +16,6 @@
     showSwitchTemplate({{ .Themes }}, {{ .Conf.Site.Theme }})
 </script>
 {{ end }}
-<script>
-</script>
 </body>
 </html>
 {{end}}