shuguang/nezha
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
nap0o 2024-07-24 11:15:17 -04:00 committed by GitHub
parent 519882c4a9
commit 5bb7efdeb9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 99 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

146
resource/static/theme-server-status/css/dark.css vendored
View File

@ -1,5 +1,6 @@
body[theme="dark"] {
background: #31363b;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
background: rgba(49, 54, 59, 1);
color: #f1f1f1;
}
@ -7,14 +8,10 @@ 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,57 +49,10 @@ 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-striped tbody > tr.even > td,
body[theme="dark"] .table-striped tbody > tr.even > th {
background-color: #1c1d26;
}
body[theme="dark"] .table-striped tbody > tr.odd > td,
body[theme="dark"] .table-striped tbody > tr.odd > th {
background-color: #1c1d26;
}
body[theme="dark"] .progress {
background-image: linear-gradient(#2c2c2c 0,#1c1d26 100%);
background-color: #1c1d26;
}
body[theme="dark"] .progress-bar {
color: white;
}
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%);
}
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%);
}
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,
@ -115,17 +60,69 @@ 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-striped tbody > tr,
body[theme="dark"] .table-striped tbody > tr.even > td,
body[theme="dark"] .table-striped tbody > tr.even > th {
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: 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: #171a1e;
background-color: rgba(48, 50, 65, 1);
}
body[theme="dark"] .table-striped > tbody > tr:nth-of-type(2n+1) {
background-color: #1c1d26;
/* 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,rgba(28, 29, 38, 1) 100%);
background-color: rgba(28, 29, 38, 1);
}
body[theme="dark"] .progress-bar {
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(#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(#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(#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);
}

20
resource/static/theme-server-status/css/main.css vendored
View File

@ -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;

6
resource/template/theme-server-status/content-footer.html vendored
View File

@ -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">

4
resource/template/theme-server-status/header.html vendored
View File

@ -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">

4
resource/template/theme-server-status/home.html vendored
View File

@ -157,7 +157,7 @@
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 @@
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";
// 渲染图表