🎉 通过自定义代码实现server-status主题深色模式半透明样式的前置准备 (#395)

nezhahq · Jul 24, 2024 · 5bb7efd · 5bb7efd
1 parent 519882c
commit 5bb7efd
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 58 deletions.
diff --git a/resource/static/theme-server-status/css/dark.css b/resource/static/theme-server-status/css/dark.css
@@ -1,20 +1,17 @@
 body[theme="dark"] {
-    background: #31363b;
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+    background: rgba(49, 54, 59, 1);
     color: #f1f1f1;
 }
 
 body[theme="dark"] .navbar .navbar-brand {
     color: #ffffff;
 }
 
-body[theme="dark"] .navbar .navbar-brand {
-    color: #ffffff;
-}
-
 body[theme="dark"] .navbar .dropdown-menu {
     list-style-image: initial;
-    background-color: #171a1e;
-    border-color: #31363b;
+    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;
 }
 
@@ -24,8 +21,8 @@ body[theme="dark"] .navbar .dropdown-menu > li > a {
 
 body[theme="dark"] .navbar .dropdown-menu > li > a:focus,
 body[theme="dark"] .navbar .dropdown-menu > li > a:hover {
-    background-color: #25282a;
-    background-image: linear-gradient(#1c1d26 0, #1c1d26 100%);
+    background-color: rgba(37, 40, 42, 1);
+    background-image: linear-gradient(rgba(28, 29, 38, 1) 0, rgba(28, 29, 38, 1) 100%);
 }
 
 body[theme="dark"] .navbar .navbar-nav > .open > a:focus,
@@ -37,18 +34,13 @@ body[theme="dark"] .navbar .navbar-nav > .open > a{
     background-color: transparent !important;
 }
 
-body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu>li>a {
+body[theme="dark"] .navbar .navbar-nav .open .dropdown-menu > li > a {
     color: #f1f1f1;
 }
 
-body[theme="dark"] .toolbox i{
-    color: rgba(241,241,241,1);
-    background-color: rgba(0,0,0,0.5);
-}
-
 body[theme="dark"] .content {
     background-image: initial;
-    background-color: #1c1d26;
+    background-color: rgba(28, 29, 38, 1);
     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;
@@ -57,75 +49,80 @@ body[theme="dark"] .content {
 
 body[theme="dark"] .table {
     background-image: initial;
-    background-color: #1c1d26;
+    background-color: rgba(28, 29, 38, 1);
     border-color: #545b5e;
 }
 
-body[theme="dark"] .table>thead>tr.node-group-tag>th {
-    background-color: #1c1d26;
+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{
+    background-color: rgba(58, 62, 65, 1);
 }
 
+body[theme="dark"] .table-striped tbody > tr,
 body[theme="dark"] .table-striped tbody > tr.even > td,
 body[theme="dark"] .table-striped tbody > tr.even > th {
-    background-color: #1c1d26;
+    background-color: rgba(28, 29, 38, 1);
 }
 
+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: #1c1d26;
+    /* background-color: rgba(28, 29, 38, 1); 282B2E*/
+    background-color: rgba(34, 35, 46, 1);
+}
+
+body[theme="dark"] .table-hover > tbody > tr:hover{
+    background-color: unset;
+}
+
+body[theme="dark"] .table-hover > tbody > tr:not(.expandRow):hover > td {
+    background-color: rgba(48, 50, 65, 1);
+}
+
+/* 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);
 }
 
+body[theme="dark"] .table > tbody > tr.expandRow.even > td:before{
+    background-color: rgba(28, 29, 38, 1);
+}
+/* expandRow展开部分样式结束 */
+
 body[theme="dark"] .progress {
-    background-image: linear-gradient(#2c2c2c 0,#1c1d26 100%);
-    background-color: #1c1d26;
+    background-image: linear-gradient(#2c2c2c 0,rgba(28, 29, 38, 1) 100%);
+    background-color: rgba(28, 29, 38, 1);
 }
 
 body[theme="dark"] .progress-bar {
-    color: white;
+    color: #ffffff;
 }
 
 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(grey 0, grey 100%);
+    background-image: linear-gradient(#808080 0, #808080 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(grey 0, grey 100%);
+    background-image: linear-gradient(#808080 0, #808080 100%);
 }
 
 body[theme="dark"] .progress-bar-danger {
     background-image: linear-gradient(#942320 0, #a12623 100%);
 }
 
 body[theme="dark"] .progress-offline .progress-bar-danger {
-    background-image: linear-gradient(grey 0, grey 100%);
-}
-
-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{
-    background-color: rgba(58, 62, 65, 1);
-}
-
-body[theme="dark"] .table > tbody > tr.expandRow > td:before,
-body[theme="dark"] .table > thead > tr.node-group-tag > th:before{
-    background-color: #1c1d26;
-}
-
-body[theme="dark"] .table-hover > tbody > tr:not(.expandRow):hover > td {
-    background-color: #171a1e;
-}
-
-body[theme="dark"] .table-striped > tbody > tr:nth-of-type(2n+1) {
-    background-color: #1c1d26;
+    background-image: linear-gradient(#808080 0, #808080 100%);
 }
 
 body[theme="dark"] .node-cell.status .status-icon.online {
@@ -149,7 +146,7 @@ body[theme="dark"] .service-status .warning {
 }
 
 body[theme="dark"] .service-day-status-icon {
-    background-color: grey;
+    background-color: rgba(128, 128, 128, 1);
 }
 
 body[theme="dark"] footer p a, 
@@ -159,7 +156,7 @@ body[theme="dark"] footer p a:hover {
 }
 
 body[theme="dark"] .modal-content{
-    background-color: #1c1d26;
+    background-color: rgba(28, 29, 38, 1);
     color: #f1f1f1;
 }
 
@@ -170,3 +167,8 @@ body[theme="dark"] .modal-header{
 body[theme="dark"] .modal-header i{
     color: #f1f1f1;
 }
+
+body[theme="dark"] .toolbox i{
+    color: rgba(241, 241, 241, 1);
+    background-color: rgba(0, 0, 0, 0.5);
+}
diff --git a/resource/static/theme-server-status/css/main.css b/resource/static/theme-server-status/css/main.css
@@ -50,6 +50,11 @@ body {
     /*margin-right: 5px;*/
 }
 
+.navbar .dropdown:hover,
+.navbar .dropdown a{
+    cursor: pointer;
+}
+
 .navbar .dropdown .dropdown-toggle {
     padding-bottom: 10px;
     padding-top: 10px;
@@ -59,7 +64,7 @@ body {
     margin:0px -15px;
 }
 
-.navbar .navbar-nav>li>a {
+.navbar .navbar-nav > li > a {
     color:#f1f1f1;
 }
 
@@ -137,6 +142,10 @@ body {
     text-align: left;
 }
 
+tr.accordion-toggle{
+    cursor:pointer;
+}
+
 .table > tbody > tr > td,
 .table > tbody > tr > th,
 .table > tfoot > tr > td,
@@ -334,6 +343,15 @@ body {
     right: 13px;
 }
 
+footer{
+    padding-bottom: 2rem;
+}
+
+footer p{
+    text-align: center;
+    font-size: 10px;
+}
+
 @media only screen and (max-width: 1200px) {
     .accordian-body{
         margin: 5px 0px 5px 10px;        

diff --git a/resource/template/theme-server-status/content-footer.html b/resource/template/theme-server-status/content-footer.html
@@ -1,8 +1,6 @@
 {{define "theme-server-status/content-footer"}}
-<footer class="container" style="padding-bottom: 2rem;">
-    <p style="text-align: center; font-size: 10px;">
-        {{ .Conf.Site.Brand }} | Theme ServerStatus | Powered by <a target="_blank" href="https://github.com/naiba/nezha">{{tr "NezhaMonitoring"}}</a> {{.Version}}
-    </p>
+<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">

diff --git a/resource/template/theme-server-status/header.html b/resource/template/theme-server-status/header.html
@@ -9,8 +9,8 @@
     <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?v20240712">
-    <link rel="stylesheet" href="/static/theme-server-status/css/dark.css?v20240407">
+    <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">

diff --git a/resource/template/theme-server-status/home.html b/resource/template/theme-server-status/home.html
@@ -157,7 +157,7 @@ <h4 class="modal-title" id="mapChartTitle">{{tr "ServersOnWorldMap"}}</h4>
                 const isMobile = this.checkIsMobile();
                 const width = isMobile ? 338 : 1102;
                 const height = isMobile ? 200 : 500;
-                const backgroundColor = this.theme == "dark" ? '#1C1D26' : '#ffffff';
+                const backgroundColor = this.theme == "dark" ? '' : '';
                 const inRangeColor = this.theme == "dark" ? '#D2B206' : '#FFDF32';
                 const tooltipBackgroundColor = this.theme == "dark" ? "#ffffff" : '#ffffff';
                 const tooltipBorderColor = this.theme == "dark" ? "#ffffff" : "#ffffff"; 
@@ -520,7 +520,7 @@ <h4 class="modal-title" id="mapChartTitle">{{tr "ServersOnWorldMap"}}</h4>
                 const theme = localStorage.getItem("theme") ? localStorage.getItem("theme") : systemDarkMode;
                 const chartTheme = theme == "dark" ? "dark" : "default";
                 const fontColor = theme == "dark" ? "#f1f1f1" : "#000000";
-                const backgroundColor = theme == "dark" ? "#1C1D26" : '';
+                const backgroundColor = theme == "dark" ? '' : '';
                 const tooltipBackgroundColor = theme == "dark" ? "#1C1D26" : '#ffffff';
                 const tooltipBorderColor = theme == "dark" ? "#31363B" : "#ffffff";
                 // 渲染图表