Skip to content

Commit 6185fe1

Browse files
fishcpyfishcpy
committed
添加Uptime Kuma监控美化文章
1 parent c7aa6e8 commit 6185fe1

1 file changed

Lines changed: 295 additions & 0 deletions

File tree

‎src/content/posts/29.md‎

Lines changed: 295 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,295 @@
1+
---
2+
title: Uptime Kuma监控美化
3+
published: 2025-08-09
4+
description: 这是一个关于部署和美化Uptime Kuma监控面板的分享，内容总结如下：首先介绍了Uptime Kuma的部署，可以通过Docker等平台部署，具体细节见官方GitHub仓库。接着提供了一份自定义CSS，用于美化界面，特点包括浅色和暗色模式切换、自定义颜色变量、背景固定图片、卡片半透明和模糊效果、按钮带玻璃质感、状态指示点和百分比徽章的呼吸动画、响应式移动端布局、隐藏更新时间信息，以及柔和的文字边框阴影等视觉优化。最后给出了示例监控站点链接https://status.fishcpy.top/status/web，适合喜欢暗色模式和现代玻璃拟态风格的用户，方便直接套用或二次修改。
5+
#image:
6+
tags: [监控, Uptime Kuma]
7+
category: Uptime Kuma
8+
draft: false
9+
---
10+
# 部署Uptime Kuma
11+
12+
首先需要部署[Uptime Kuma](https://github.com/louislam/uptime-kuma)，可以在docker等平台部署，这里不多说，自己看看github仓库
13+
14+
# 美化
15+
16+
我这里提供一个css，可以参考一下，我也是用别人css加了一点效果
17+
18+
具体效果可以看我的[监控站](https://status.fishcpy.top/status/web)
19+
20+
```markdown
21+
:root {
22+
--bs-white: #fff;
23+
--bs-dark: #212529;
24+
--bs-green: #008000;
25+
--bs-danger: #dc3545;
26+
--bs-body-bg: #f6f7f9;
27+
--bs-blue: #0d6efd;
28+
--bg-linear-gradient: linear-gradient(180deg, #f6f6f6, #f8f8f8);
29+
--border-solid-main: 2px solid var(--bs-white);
30+
--border-solid-small: 1px solid var(--bs-white);
31+
--shadow-inset-box: inset -4px -4px 12px #f1f1f1, inset 4px 4px 12px #e2e2e2;
32+
}
33+
34+
.dark {
35+
--bs-white: #2d2d2d;
36+
--bs-dark: #e9ecef;
37+
--bs-green: #00c800;
38+
--bs-danger: #dc3545;
39+
--bs-body-bg: #222222;
40+
--bg-linear-gradient: linear-gradient(180deg, #242424, #222222);
41+
--border-solid-main: 2px solid rgba(45, 45, 45, 0.8);
42+
--border-solid-small: 1px solid rgba(45, 45, 45, 0.6);
43+
--shadow-inset-box: inset -4px -4px 12px #0d0d0d, inset 4px 4px 12px #1a1a1a;
44+
}
45+
46+
body {
47+
background-color: var(--bs-body-bg) !important;
48+
}
49+
50+
/* 全局样式 */
51+
body {
52+
font-family: 'CustomFont', sans-serif;
53+
color: #333;
54+
margin: 0;
55+
padding: 0;
56+
background-image: url('https://api.fis.ink/mc');
57+
background-attachment: fixed;
58+
background-size: cover;
59+
background-position: center center;
60+
background-repeat: no-repeat;
61+
}
62+
63+
/* LOGO标题样式 */
64+
.title-flex {
65+
font-weight: bold;
66+
justify-content: center;
67+
}
68+
69+
/* 按钮 */
70+
.btn-info {
71+
color: var(--bs-dark);
72+
background-image: var(--bg-linear-gradient);
73+
border: var(--border-solid-main);
74+
background-color: rgba(255, 255, 255, 0.2) !important;
75+
backdrop-filter: blur(6px);
76+
-webkit-backdrop-filter: blur(6px);
77+
border: 1px solid rgba(255, 255, 255, 0.3);
78+
box-shadow: none !important;
79+
}
80+
81+
.btn-info:hover {
82+
color: var(--bs-dark);
83+
background-color: transparent;
84+
border-color: unset;
85+
box-shadow: none !important;
86+
}
87+
88+
/* 服务组标题 */
89+
.group-title {
90+
font-size: 2.5rem;
91+
font-weight: 700;
92+
opacity: .5;
93+
-webkit-mask: linear-gradient(var(--bs-white) 50%, transparent);
94+
mask: linear-gradient(var(--bs-white) 50%, transparent);
95+
text-stroke: 1px var(--bs-dark);
96+
-webkit-text-stroke: 1px var(--bs-dark);
97+
-webkit-text-fill-color: transparent;
98+
}
99+
100+
/* 服务项目列表样式 */
101+
.monitor-list .monitor-list {
102+
min-height: 45px;
103+
display: grid;
104+
grid-template-columns: repeat(2, 1fr);
105+
}
106+
107+
.monitor-list .item .info {
108+
display: flex;
109+
flex-wrap: wrap;
110+
align-items: center;
111+
}
112+
113+
.info1::before,
114+
.info1::after {
115+
content: "";
116+
display: inline-block;
117+
width: 10px;
118+
height: 10px;
119+
background-color: var(--bs-white);
120+
margin: 0.5rem 0;
121+
border-radius: 50%;
122+
animation: breath 1.5s ease-in-out infinite;
123+
}
124+
125+
.info1::after {
126+
animation-delay: 0.75s;
127+
}
128+
129+
.info .bg-danger+.item-name {
130+
color: var(--bs-red);
131+
}
132+
133+
.shadow-box {
134+
margin-top: 0 !important;
135+
background-image: var(--bg-linear-gradient);
136+
box-shadow: none !important;
137+
}
138+
139+
div[data-v-f71ca08e].mb-5:hover .group-title {
140+
-webkit-text-fill-color: var(--bs-dark);
141+
}
142+
143+
.monitor-list .item {
144+
box-shadow: none !important;
145+
}
146+
147+
.monitor-list .item:hover {
148+
background-color: rgba(0, 0, 0, 0.5) !important;
149+
box-shadow: none !important;
150+
}
151+
152+
.dark .monitor-list .item:hover {
153+
background-color: var(--bs-body-bg);
154+
box-shadow: none !important;
155+
}
156+
157+
/* 服务项目列表标题样式 */
158+
.item-name {
159+
font-weight: bold;
160+
}
161+
162+
a {
163+
text-decoration: none !important;
164+
}
165+
166+
a.item-name:hover {
167+
color: var(--bs-blue) !important;
168+
}
169+
170+
/* 服务OK样式 */
171+
.overall-status .ok {
172+
color: var(--bs-green) !important;
173+
}
174+
175+
.hp-bar-big .beat[data-v-636dc6a9] {
176+
background-color: var(--bs-green);
177+
}
178+
179+
.item .row {
180+
justify-content: space-between;
181+
}
182+
183+
/* 状态百分比呼吸效果 */
184+
.info .badge.rounded-pill.bg-primary {
185+
--bg: var(--bs-green);
186+
}
187+
188+
.info .badge.rounded-pill.bg-danger {
189+
--bg: var(--bs-danger);
190+
}
191+
192+
.info .badge.rounded-pill {
193+
position: relative;
194+
display: flex;
195+
min-width: auto;
196+
width: 1rem;
197+
margin-left: 0.1rem;
198+
font-size: 0;
199+
justify-content: center;
200+
align-items: center;
201+
background-color: transparent !important;
202+
}
203+
204+
.info .badge.rounded-pill::before {
205+
position: absolute;
206+
content: "";
207+
width: 1rem;
208+
height: 1rem;
209+
border-radius: 50%;
210+
background-color: var(--bg);
211+
animation: breath 1.1s ease-in-out infinite;
212+
}
213+
214+
.info .badge.rounded-pill::after {
215+
content: "";
216+
width: 0.6rem;
217+
height: 0.6rem;
218+
border-radius: 50%;
219+
background-color: var(--bg);
220+
}
221+
222+
@keyframes breath {
223+
0%, 100% {
224+
transform: scale(1);
225+
opacity: 0.2;
226+
}
227+
50% {
228+
transform: scale(1.2);
229+
opacity: 0;
230+
}
231+
}
232+
233+
/* 隐藏更新时间 */
234+
.refresh-info.mb-2 {
235+
display: none;
236+
}
237+
238+
/* 公共样式优化 */
239+
.col-md-4 {
240+
width: 50%;
241+
}
242+
243+
.col-md-8 {
244+
max-width: 50%;
245+
display: flex;
246+
flex-wrap: wrap;
247+
flex-direction: column;
248+
}
249+
250+
.mb-5 {
251+
margin-bottom: 2rem !important;
252+
}
253+
254+
/* 底部样式 */
255+
footer[data-v-b8247e57] {
256+
margin: 1.5rem 0 !important;
257+
}
258+
259+
footer p {
260+
margin: 0 !important;
261+
}
262+
263+
/* 适配手机 */
264+
@media screen and (max-width: 768px) {
265+
.monitor-list .monitor-list {
266+
grid-template-columns: repeat(1, 1fr);
267+
}
268+
.group-title {
269+
font-size: 2rem;
270+
}
271+
}
272+
273+
/* 全局半透明背景卡片 */
274+
.shadow-box,
275+
.monitor-list .item {
276+
background-color: rgba(0, 0, 0, 0.4) !important;
277+
backdrop-filter: blur(8px);
278+
-webkit-backdrop-filter: blur(8px);
279+
border: 1px solid rgba(255, 255, 255, 0.1);
280+
}
281+
282+
/* 暗色模式下卡片透明度调低 */
283+
.dark .shadow-box,
284+
.dark .monitor-list .item,
285+
.dark .btn-info {
286+
background-color: rgba(34, 34, 34, 0.3) !important;
287+
border: 1px solid rgba(255, 255, 255, 0.1);
288+
}
289+
290+
/* 标题透明度柔和 */
291+
.group-title {
292+
opacity: 0.5;
293+
}
294+
295+
```

0 commit comments

Comments
 (0)