美化合集 - 晚安的静谧小屋

1. 哪吒监控#

使用主题：Official

美化代码：

1
<!-- 自定义设置 -->
2
<script>
3
  window.CustomBackgroundImage = "https://cf-api.goodnightan.com/p/wolp";
4
  window.DisableAnimatedMan = "true";
5
  window.CustomIllustration = 'https://img.028029.xyz/1734592545615.png';
6
  window.ShowNetTransfer = "true";
7
  window.CustomDesc = "欢迎查看晚安的服务器监控.";
8
</script>
9

10
<!-- 状态和进度条逻辑 -->
11
<script>
12
  function applyCardStyles() {
13
    const cards = document.querySelectorAll('div.rounded-lg.border.text-card-foreground');
14

15
    cards.forEach(card => {
16
      // 跳过无 section.grid 的卡片（例如统计卡片）
17
      if (!card.querySelector('section.grid')) return;
18

19
      // 1️⃣ 获取剩余天数
20
      const remarkEls = card.querySelectorAll('[class*="text-muted-foreground"]');
21
      let daysLeft = null;
22
      remarkEls.forEach(el => {
23
        const m = el.innerText.match(/剩余天数[:：]?\s*(\d+)\s*天/);
24
        if (m) daysLeft = parseInt(m[1]);
25
      });
26

27
      // 2️⃣ 设置进度条颜色
28
      const bar = card.querySelector('[aria-label="Server Usage Bar"] > div');
29
      if (bar) {
30
        if (daysLeft !== null) {
31
          if (daysLeft <= 10) {
32
            bar.style.backgroundColor = "#ef4444"; // 红色
33
          } else if (daysLeft > 30) {
34
            bar.style.backgroundColor = "#22c55e"; // 绿色
35
          } else {
36
            bar.style.backgroundColor = "#ffffff"; // 白色
37
          }
38
        } else {
39
          bar.style.backgroundColor = "#ffffff"; // 默认白色
40
        }
41
      }
42

43
      // 3️⃣ 判断状态（是否在线/过期）
44
      const statusDot = card.querySelector('section.grid span.h-2.w-2');
45
      card.classList.remove('expired-offline', 'expired-online');
46
      if (!statusDot) return;
47

48
      const isOnline = statusDot.classList.contains('bg-green-500');
49
      const expiredEl = [...card.querySelectorAll('*')].find(el =>
50
        el.textContent.includes('已过期')
51
      );
52
      const isExpired = !!expiredEl;
53

54
      if (isExpired && isOnline) {
55
        card.classList.add('expired-online');
56
      } else if (!isOnline) {
57
        card.classList.add('expired-offline');
58
      }
59
    });
60
  }
61

62
  // 启动时监听 DOM
63
  const observer = new MutationObserver(() => applyCardStyles());
64

65
  window.addEventListener("load", () => {
66
    const target = document.querySelector("main") || document.body;
67
    if (target) {
68
      observer.observe(target, { childList: true, subtree: true });
69
      applyCardStyles();
70
    }
71
  });
72
</script>
73

74
<!-- 样式控制 -->
75
<style>
76
  /* 上传字体颜色：红 */
77
  [class*="上传"] > .text-xs.font-semibold,
78
  [class*="上传"] + div > .text-xs.font-semibold {
79
    color: #ef4444 !important;
80
  }
81

82
  /* 下载字体颜色：绿 */
83
  [class*="下载"] > .text-xs.font-semibold,
84
  [class*="下载"] + div > .text-xs.font-semibold {
85
    color: #22c55e !important;
86
  }
87

88
  /* 左边上传统计条颜色 */
89
  section.flex.items-center.w-full.justify-between.gap-1 > div:first-child {
90
    color: #ef4444 !important;
91
    border-color: #ef444433 !important;
92
  }
93

94
  /* 右边下载统计条颜色 */
95
  section.flex.items-center.w-full.justify-between.gap-1 > div:last-child {
96
    color: #22c55e !important;
97
    border-color: #22c55e33 !important;
98
  }
99

100
  /* 🚫 删除进度条默认强制样式，改为 JS 控制 */
101
  /* [aria-label="Server Usage Bar"] > div {
102
    background-color: hsl(var(--primary)) !important;
103
    background-image: none !important;
104
  } */
105

106
  /* 过期但离线或离线未过期：红色背景 + 红边 */
107
  .expired-offline {
108
    background-color: rgba(255, 86, 86, 0.15) !important;
109
    border-color: #ef4444 !important;
110
    color: inherit !important;
111
  }
112

113
  /* 过期但在线：黄色背景 + 黄边 */
114
  .expired-online {
115
    background-color: rgba(255, 221, 86, 0.15) !important;
116
    border-color: rgb(228, 239, 68) !important;
117
    color: inherit !important;
118
  }
119
</style>

2. Uptime Kuma#

方案一：#

1
/* ============================
2
   1. 字体引入
3
============================ */
4
/* 标题字体 */
5
@font-face {
6
    font-family: "TitleFont";
7
    src: url("https://cdn.jsdelivr.net/gh/nulijiazaizhong/fonts/harmonyOS/HarmonyOS_Sans.woff2") format("woff2"); /* 替换为自己的字体 */
8
    font-weight: normal;
9
    font-style: normal;
10
}
11

12
/* 正文字体 */
13
@font-face {
14
    font-family: "BodyFont";
15
    src: url("https://cdn.jsdelivr.net/gh/nulijiazaizhong/fonts/saye/saye.woff2") format("woff2");  /* 替换为自己的字体 */
16
    font-weight: normal;
17
    font-style: normal;
18
}
19

20
/* ============================
21
   2. 全局字体设置
22
============================ */
23
body, p, span, div {
24
    font-family: "BodyFont", sans-serif;
25
}
26

27
#app {
28
    font-family: '1666963922', BlinkMacSystemFont, 'segoe ui', Roboto, 'helvetica neue',
29
                 Arial, 'noto sans', sans-serif, 'apple color emoji', 'segoe ui emoji',
30
                 'segoe ui symbol', 'noto color emoji' !important;
31
}
32

33
/* ============================
34
   3. 背景设置
35
============================ */
36
body {
37
    background: url("https://cf-api.goodnightan.com/p/wolp") no-repeat center center fixed;
38
    background-size: cover;
39
}
40

41
/* ============================
42
   4. 标题字体应用
43
============================ */
44
/* 分组标题 */
45
.group-title span[data-v-f71ca08e],
46
h1, h2, h3, h4, h5, h6 {
47
    font-family: "TitleFont", sans-serif;
48
    font-weight: 700;
49
}
50

51
/* 全局状态栏 */
52
.overall-status[data-v-b8247e57],
53
h1.page-title {
54
    font-family: "TitleFont", sans-serif !important;
55
    font-weight: 800;
56
    font-size: 2.5rem;
57
    text-align: center;
58
    margin: 20px 0;
59
}
60

61
/* 页面主标题（带 logo） */
62
h1.title-flex,
63
h1.title-flex span[data-v-7d4a7f28] {
64
    font-family: "TitleFont", sans-serif !important;
65
    font-weight: 800;
66
    font-size: 2.5rem;
67
    text-align: center;
68
    display: block;
69
    margin: 20px auto;
70
    background-image: linear-gradient(
71
        90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079
72
    );
73
    -webkit-text-fill-color: transparent;
74
    -webkit-background-clip: text;
75
    background-clip: text;
76
    background-size: 400% 100%;
77
    animation: wzw 10s linear infinite;
78
}
79

80
/* 页面主标题 Logo */
81
h1.title-flex .logo-wrapper img {
82
    width: 40px;
83
    height: 40px;
84
    display: inline-block;
85
    vertical-align: middle;
86
    margin-right: 10px;
87
}
88

89
/* ============================
90
   5. 渐变动画定义
91
============================ */
92
h1, h2, h3, .h1, .h2, .h3,
93
.group-title span,
94
.alert-heading.p-2 > h1,
95
.alert-heading.p-2 > h2 {
96
    background-image: linear-gradient(
97
        90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079
98
    );
99
    font-family: '1666963922', sans-serif;
100
    -webkit-text-fill-color: transparent;
101
    -webkit-background-clip: text;
102
    background-clip: text;
103
    background-size: 400% 100%;
104
    animation: wzw 10s linear infinite;
105
}
106

107
@keyframes wzw {
108
    0%   { background-position: 0% 50%; }
109
    50%  { background-position: 100% 50%; }
110
    100% { background-position: 0% 50%; }
111
}
112

113
/* ============================
114
   6. 网格布局（监控项容器）
115
============================ */
116
.monitor-list > .monitor-list {
117
    display: grid;
118
    grid-template-columns: repeat(3, minmax(300px, 1fr));
119
    grid-gap: 1rem;
120
    justify-content: center;
121
}
122

123
/* 响应式布局 */
124
@media (max-width: 900px) {
125
    .monitor-list > .monitor-list {
126
        grid-template-columns: repeat(1, 1fr);
127
    }
128
}
129
@media (min-width: 901px) and (max-width: 1400px) {
130
    .monitor-list > .monitor-list {
131
        grid-template-columns: repeat(2, 1fr);
132
    }
133
}
134
@media (min-width: 1401px) {
135
    .monitor-list > .monitor-list {
136
        grid-template-columns: repeat(3, 1fr);
137
    }
138
}
139

140
/* ============================
141
   7. 卡片样式（监控项）
142
============================ */
143
/* 明亮主题 */
144
.shadow-box {
145
    background-color: rgba(255, 255, 255, 0.65);
146
    padding: 10px;
147
    margin: 5px;
148
    border-radius: 12px;
149
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
150
    text-decoration: none;
151
}
152

153
/* 暗色主题 */
154
.dark .shadow-box:not(.alert) {
155
    background-color: rgba(0, 0, 0, 0.35);
156
    padding: 20px;
157
    margin: 10px;
158
    border-radius: 12px;
159
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
160
}
161

162
/* 边框 + Hover 效果 */
163
.monitor-list .item,
164
.shadow-box {
165
    border: 1px solid rgba(0, 0, 0, 0.2);
166
    border-radius: 12px;
167
    overflow: hidden;
168
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
169
}
170

171
.dark .monitor-list .item,
172
.dark .shadow-box {
173
    border: 1px solid rgba(255, 255, 255, 0.2);
174
}
175

176
.monitor-list .item:hover,
177
.shadow-box:hover {
178
    border-color: rgba(0, 123, 255, 0.8);
179
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
180
}
181

182
/* ============================
183
   8. 侧边栏样式
184
============================ */
185
.sidebar {
186
    background-color: rgba(255, 255, 255, 0.9);
187
    padding: 20px;
188
    margin: 10px;
189
    border-radius: 12px;
190
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
191
}
192

193
/* ============================
194
   9. 服务文字样式
195
============================ */
196
/* 服务名称 */
197
.item-name {
198
    font-family: "BodyFont", sans-serif;
199
}
200

201
/* 服务描述 */
202
.description {
203
    font-family: "BodyFont", sans-serif;
204
}
205

206
/* 刷新信息 */
207
.refresh-info[data-v-b8247e57] {
208
    font-family: "BodyFont", sans-serif;
209
}

方案二：#

1
/* 自定义字体定义 */
2
@font-face {
3
    font-family: '1666963922';
4
    src: url('https://jsd.cdn.zzko.cn/gh/54ayao/ACG@main/static/fonts/1666963922.woff') format('woff');
5
    font-weight: normal;
6
    font-style: normal;
7
}
8

9
/* 全局样式 */
10
body {
11
    font-family: '1666963922', sans-serif; /* 使用自定义字体 */
12
    color: #333;
13
    margin: 0;
14
    padding: 0;
15
    background-image: url('https://cf-api.goodnightan.com/p/wolp'); /* 自适应背景图片API */
16
    background-attachment: fixed;
17
    background-size: cover;
18
    background-position: center center;
19
    background-repeat: no-repeat;
20
}
21

22
/* 导航栏链接悬停样式 */
23
.navbar a:hover {
24
    text-decoration: underline;
25
}
26

27
/* 卡片样式 */
28
.card {
29
    background-color: #fff;
30
    border-radius: 5px;
31
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
32
    margin-bottom: 20px;
33
    padding: 20px;
34
}
35

36
/* 卡片标题样式 */
37
.card-title {
38
    font-size: 18px;
39
    font-weight: bold;
40
    margin-bottom: 10px;
41
}
42

43

44
/* 在明亮主题下，应用不同的背景色及75%透明度 */
45
.shadow-box {
46
    background-color: rgba(255, 255, 255, 0.75);
47
    padding: 10px;
48
    margin: 5px;
49
    border-radius: 10px;
50
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
51
  text-decoration: none;
52

53
}
54
/* 在暗色主题下，应用不同的背景色及65%透明度 */
55
.dark .shadow-box:not(.alert) {
56
    background-color: rgba(0, 0, 0, 0.65);
57
     padding: 20px;
58
    margin: 10px;
59
    border-radius: 5px;
60
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
61
}
62
/* 侧边栏样式 */
63
.sidebar {
64
    background-color: rgba(255, 255, 255, 0.9);
65
    padding: 20px;
66
    margin: 10px;
67
    border-radius: 5px;
68
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
69
}
70

71
/* 特定元素和类的样式 */
72
span[data-v-7d4a7f28],
73
.item-name,
74
div.description[data-v-7d4a7f28][data-v-b8247e57][contenteditable="true"],
75
div[data-v-7d4a7f28][data-v-b8247e57].alert-heading.p-2,
76
.refresh-info > div,
77
.alert-heading.p-2 > div,
78
.alert-heading.p-2 > p,
79
.alert-heading.p-2 > h1 {
80
    background-image: linear-gradient(90deg, #07c160, #fb6bea 25%, #3aedff 50%, #fb6bea 75%, #28d079);
81
    font-family: '1666963922', sans-serif;
82
    -webkit-text-fill-color: transparent;
83
    -webkit-background-clip: text;
84
    background-size: 400% 100%;
85
    animation: wzw 10s linear infinite;
86
}
87

88
/* 动画关键帧定义 */
89
@keyframes wzw {
90
    0% {
91
        background-position: 0% 50%;
92
    }
93
    50% {
94
        background-position: 100% 50%;
95
    }
96
    100% {
97
        background-position: 0% 50%;
98
    }
99
}
100
  #app {
101
font-family: '1666963922', BlinkMacSystemFont, 'segoe ui', Roboto, 'helvetica neue', Arial, 'noto sans', sans-serif, 'apple color emoji', 'segoe ui emoji', 'segoe ui symbol', 'noto color emoji' !important;
102
}