Uptime Kuma 玻璃拟态、状态动效主题CSS分享

1
/* 字体：有网络时用 Orbitron/Rajdhani；不可用时回退到系统字体 */
2
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@700;800;900&family=Rajdhani:wght@500;600;700&display=swap");
3

4
:root {
5
  --bs-white: rgba(255, 255, 255, 0.92);
6
  --bs-dark: rgba(255, 255, 255, 0.96);
7
  --bs-green: oklch(0.8 0.12 150);
8
  --bs-danger: oklch(0.7 0.16 25);
9
  --bs-body-bg: #050611;
10
  --bs-blue: oklch(0.72 0.15 260);
11

12
  --wr-font-main:
13
    "Rajdhani",
14
    "Segoe UI",
15
    "Microsoft YaHei",
16
    sans-serif;
17

18
  --wr-font-title:
19
    "Orbitron",
20
    "Rajdhani",
21
    "Bahnschrift",
22
    "Agency FB",
23
    "DIN Condensed",
24
    "Segoe UI",
25
    "Microsoft YaHei",
26
    sans-serif;
27

28
  --wr-glass-bg: rgba(18, 20, 38, 0.46);
29
  --wr-glass-bg-light: rgba(255, 255, 255, 0.075);
30
  --wr-glass-hover: rgba(255, 255, 255, 0.14);
31
  --wr-glass-border: 1px solid rgba(255, 255, 255, 0.11);
32
  --wr-shadow-main: 0 18px 55px rgba(0, 0, 0, 0.34);
33
  --wr-shadow-small: 0 8px 26px rgba(0, 0, 0, 0.24);
34
  --wr-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
35
}
36

37
/* 暗色模式保持同一套高级深色效果 */
38
.dark {
39
  --bs-white: rgba(255, 255, 255, 0.92);
40
  --bs-dark: rgba(255, 255, 255, 0.96);
41
  --bs-green: oklch(0.82 0.13 150);
42
  --bs-danger: oklch(0.72 0.17 25);
43
  --bs-body-bg: #050611;
44
  --bs-blue: oklch(0.76 0.15 260);
45

46
  --wr-glass-bg: rgba(18, 20, 38, 0.46);
47
  --wr-glass-bg-light: rgba(255, 255, 255, 0.075);
48
  --wr-glass-hover: rgba(255, 255, 255, 0.14);
49
  --wr-glass-border: 1px solid rgba(255, 255, 255, 0.11);
50
  --wr-shadow-main: 0 18px 55px rgba(0, 0, 0, 0.34);
51
  --wr-shadow-small: 0 8px 26px rgba(0, 0, 0, 0.24);
52
  --wr-inner-glow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
53
}
54

55
/* ========================================================
56
   1. 背景与基础字体
57
======================================================== */
58

59
body {
60
  background: var(--bs-body-bg) !important;
61
  color: var(--bs-dark) !important;
62
  font-family: var(--wr-font-main) !important;
63
  position: relative;
64
  min-height: 100vh;
65
  overflow-x: hidden;
66
}
67

68
/* 雾化夜景背景 */
69
body::before {
70
  content: "";
71
  position: fixed;
72
  inset: -5%;
73
  background-image: url("https://winered-0v0.com/night.jpg");
74
  background-size: cover;
75
  background-position: center;
76
  background-repeat: no-repeat;
77
  filter: blur(13px) brightness(0.38) saturate(0.92);
78
  transform: scale(1.03);
79
  z-index: -100;
80
}
81

82
/* 深色渐变遮罩 */
83
body::after {
84
  content: "";
85
  position: fixed;
86
  inset: 0;
87
  background:
88
    radial-gradient(circle at top center, rgba(120, 130, 255, 0.18), transparent 28%),
89
    radial-gradient(circle at 20% 35%, rgba(60, 120, 255, 0.10), transparent 25%),
90
    linear-gradient(180deg, rgba(0, 0, 0, 0.08), rgba(0, 0, 0, 0.42));
91
  pointer-events: none;
92
  z-index: -99;
93
}
94

95
/* 顶部留白 */
96
.container {
97
  margin-top: 6rem !important;
98
}
99

100
/* ========================================================
101
   2. LOGO 与标题样式
102
   保留原 title-flex 结构，只强化视觉
103
======================================================== */
104

105
.title-flex {
106
  font-family: var(--wr-font-title) !important;
107
  font-weight: 900 !important;
108
  justify-content: center;
109
  align-items: center;
110
  gap: 22px !important;
111

112
  font-size: 3.6rem !important;
113
  letter-spacing: 0.1em !important;
114
  line-height: 1.05 !important;
115
  text-transform: uppercase !important;
116

117
  color: var(--bs-dark) !important;
118
  -webkit-text-fill-color: var(--bs-dark) !important;
119
  text-shadow:
120
    0 0 14px rgba(255, 255, 255, 0.18),
121
    0 8px 24px rgba(0, 0, 0, 0.72) !important;
122
}
123

124
/* 标题里的 Logo 放大 */
125
.title-flex img,
126
.logo,
127
img.logo {
128
  width: 96px !important;
129
  height: 96px !important;
130
  max-width: 96px !important;
131
  max-height: 96px !important;
132
  object-fit: contain !important;
133

134
  filter:
135
    drop-shadow(0 0 12px rgba(255, 255, 255, 0.24))
136
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55)) !important;
137
}
138

139
/* ========================================================
140
   3. 按钮样式
141
======================================================== */
142

143
.btn-info,
144
.btn-primary,
145
.btn-default {
146
  color: var(--bs-dark) !important;
147
  background: rgba(255, 255, 255, 0.075) !important;
148
  box-shadow: var(--wr-shadow-small), var(--wr-inner-glow) !important;
149
  border: var(--wr-glass-border) !important;
150

151
  backdrop-filter: blur(14px) saturate(140%) !important;
152
  -webkit-backdrop-filter: blur(14px) saturate(140%) !important;
153

154
  border-radius: 10px !important;
155
  transition:
156
    background 0.22s ease,
157
    transform 0.22s ease,
158
    box-shadow 0.22s ease !important;
159
}
160

161
.btn-info:hover,
162
.btn-primary:hover,
163
.btn-default:hover {
164
  color: var(--bs-dark) !important;
165
  background: rgba(255, 255, 255, 0.14) !important;
166
  border-color: rgba(255, 255, 255, 0.18) !important;
167
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32), var(--wr-inner-glow) !important;
168
  transform: translateY(-1px);
169
}
170

171
/* ========================================================
172
   4. 服务组标题
173
======================================================== */
174

175
.group-title {
176
  font-family: var(--wr-font-title) !important;
177
  font-size: 2.5rem;
178
  font-weight: 900;
179
  letter-spacing: 0.08em;
180
  text-transform: uppercase;
181

182
  opacity: 1;
183
  color: var(--bs-dark) !important;
184

185
  -webkit-mask: none !important;
186
  mask: none !important;
187
  text-stroke: 0 !important;
188
  -webkit-text-stroke: 0 !important;
189
  -webkit-text-fill-color: var(--bs-dark) !important;
190

191
  text-shadow:
192
    0 0 10px rgba(255, 255, 255, 0.12),
193
    0 4px 14px rgba(0, 0, 0, 0.62);
194
}
195

196
/* ========================================================
197
   5. 服务项目列表布局
198
   保留你原版布局：双列 / 手机单列
199
======================================================== */
200

201
.monitor-list .monitor-list {
202
  min-height: 45px;
203
  display: grid;
204
  grid-template-columns: repeat(2, 1fr);
205
  gap: 14px;
206
}
207

208
.monitor-list .item .info {
209
  display: flex;
210
  flex-wrap: wrap;
211
  align-items: center;
212
}
213

214
/* 服务项状态点 */
215
.info1::before,
216
.info1::after {
217
  content: "";
218
  display: inline-block;
219
  width: 10px;
220
  height: 10px;
221
  background-color: var(--bs-green);
222
  margin: 0.5rem 0;
223
  border-radius: 50%;
224
  box-shadow: 0 0 10px color-mix(in oklch, var(--bs-green), transparent 40%);
225
  animation: breath 1.5s ease-in-out infinite;
226
}
227

228
.info1::after {
229
  animation-delay: 0.75s;
230
}
231

232
/* ========================================================
233
   6. 大卡片与服务项玻璃质感
234
======================================================== */
235

236
.shadow-box {
237
  margin-top: 0 !important;
238
  background: var(--wr-glass-bg) !important;
239
  border: var(--wr-glass-border) !important;
240
  box-shadow: var(--wr-shadow-main), var(--wr-inner-glow) !important;
241

242
  backdrop-filter: blur(22px) saturate(155%) !important;
243
  -webkit-backdrop-filter: blur(22px) saturate(155%) !important;
244

245
  border-radius: 16px !important;
246
}
247

248
/* 分组 hover 时标题轻微提亮 */
249
div[data-v-f71ca08e].mb-5:hover .group-title {
250
  -webkit-text-fill-color: var(--bs-dark);
251
  color: var(--bs-dark) !important;
252
}
253

254
/* 服务项卡片 */
255
.monitor-list .item {
256
  background: var(--wr-glass-bg-light) !important;
257
  border: var(--wr-glass-border) !important;
258
  border-radius: 13px !important;
259
  box-shadow: var(--wr-shadow-small), var(--wr-inner-glow) !important;
260

261
  backdrop-filter: blur(12px) saturate(140%) !important;
262
  -webkit-backdrop-filter: blur(12px) saturate(140%) !important;
263

264
  transition:
265
    background 0.22s ease,
266
    transform 0.22s ease,
267
    box-shadow 0.22s ease !important;
268
}
269

270
.monitor-list .item:hover {
271
  background: var(--wr-glass-hover) !important;
272
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32), var(--wr-inner-glow) !important;
273
  transform: translateY(-1px);
274
}
275

276
.dark .monitor-list .item:hover {
277
  background: var(--wr-glass-hover) !important;
278
}
279

280
/* ========================================================
281
   7. 服务项目文字
282
======================================================== */
283

284
.item-name {
285
  font-family: var(--wr-font-main) !important;
286
  font-weight: 700;
287
  letter-spacing: 0.02em;
288
  color: var(--bs-dark) !important;
289
}
290

291
a {
292
  text-decoration: none !important;
293
  color: var(--bs-dark) !important;
294
}
295

296
a.item-name:hover {
297
  color: var(--bs-blue) !important;
298
}
299

300
/* 错误状态服务名 */
301
.info .bg-danger + .item-name {
302
  color: var(--bs-danger) !important;
303
}
304

305
/* ========================================================
306
   8. 全局状态横幅
307
======================================================== */
308

309
.overall-status {
310
  background: var(--wr-glass-bg) !important;
311
  border: var(--wr-glass-border) !important;
312
  box-shadow: var(--wr-shadow-main), var(--wr-inner-glow) !important;
313

314
  backdrop-filter: blur(22px) saturate(155%) !important;
315
  -webkit-backdrop-filter: blur(22px) saturate(155%) !important;
316

317
  border-radius: 16px !important;
318

319
  display: flex !important;
320
  justify-content: center !important;
321
  align-items: center !important;
322
  text-align: center !important;
323

324
  font-family: var(--wr-font-title) !important;
325
  font-weight: 800 !important;
326
  letter-spacing: 0.06em !important;
327
}
328

329
.overall-status .ok {
330
  color: var(--bs-green) !important;
331
}
332

333
/* ========================================================
334
   9. Uptime 小竖条
335
======================================================== */
336

337
.hp-bar-big .beat[data-v-636dc6a9],
338
.ping-bar.bg-primary,
339
.ping-bar.bg-success {
340
  background-color: var(--bs-green) !important;
341
  box-shadow: 0 0 8px color-mix(in oklch, var(--bs-green), transparent 40%);
342
}
343

344
.ping-bar.bg-danger {
345
  background-color: var(--bs-danger) !important;
346
  box-shadow: 0 0 8px color-mix(in oklch, var(--bs-danger), transparent 35%);
347
}
348

349
.ping-bar {
350
  border-radius: 4px !important;
351
}
352

353
/* ========================================================
354
   9.1 绿色状态竖条：从右到左颜色传递
355
   不改变高度，不做波浪，只做亮度流动
356
======================================================== */
357

358
.hp-bar-big .beat[data-v-636dc6a9],
359
.ping-bar.bg-primary,
360
.ping-bar.bg-success {
361
  animation: wr-green-flow 2.8s ease-in-out infinite;
362
}
363

364
/* 右侧先亮，往左依次延迟 */
365
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(1),
366
.ping-bar.bg-primary:nth-last-child(1),
367
.ping-bar.bg-success:nth-last-child(1) {
368
  animation-delay: 0s;
369
}
370

371
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(2),
372
.ping-bar.bg-primary:nth-last-child(2),
373
.ping-bar.bg-success:nth-last-child(2) {
374
  animation-delay: 0.05s;
375
}
376

377
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(3),
378
.ping-bar.bg-primary:nth-last-child(3),
379
.ping-bar.bg-success:nth-last-child(3) {
380
  animation-delay: 0.10s;
381
}
382

383
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(4),
384
.ping-bar.bg-primary:nth-last-child(4),
385
.ping-bar.bg-success:nth-last-child(4) {
386
  animation-delay: 0.15s;
387
}
388

389
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(5),
390
.ping-bar.bg-primary:nth-last-child(5),
391
.ping-bar.bg-success:nth-last-child(5) {
392
  animation-delay: 0.20s;
393
}
394

395
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(6),
396
.ping-bar.bg-primary:nth-last-child(6),
397
.ping-bar.bg-success:nth-last-child(6) {
398
  animation-delay: 0.25s;
399
}
400

401
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(7),
402
.ping-bar.bg-primary:nth-last-child(7),
403
.ping-bar.bg-success:nth-last-child(7) {
404
  animation-delay: 0.30s;
405
}
406

407
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(8),
408
.ping-bar.bg-primary:nth-last-child(8),
409
.ping-bar.bg-success:nth-last-child(8) {
410
  animation-delay: 0.35s;
411
}
412

413
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(9),
414
.ping-bar.bg-primary:nth-last-child(9),
415
.ping-bar.bg-success:nth-last-child(9) {
416
  animation-delay: 0.40s;
417
}
418

419
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(10),
420
.ping-bar.bg-primary:nth-last-child(10),
421
.ping-bar.bg-success:nth-last-child(10) {
422
  animation-delay: 0.45s;
423
}
424

425
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(11),
426
.ping-bar.bg-primary:nth-last-child(11),
427
.ping-bar.bg-success:nth-last-child(11) {
428
  animation-delay: 0.50s;
429
}
430

431
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(12),
432
.ping-bar.bg-primary:nth-last-child(12),
433
.ping-bar.bg-success:nth-last-child(12) {
434
  animation-delay: 0.55s;
435
}
436

437
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(13),
438
.ping-bar.bg-primary:nth-last-child(13),
439
.ping-bar.bg-success:nth-last-child(13) {
440
  animation-delay: 0.60s;
441
}
442

443
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(14),
444
.ping-bar.bg-primary:nth-last-child(14),
445
.ping-bar.bg-success:nth-last-child(14) {
446
  animation-delay: 0.65s;
447
}
448

449
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(15),
450
.ping-bar.bg-primary:nth-last-child(15),
451
.ping-bar.bg-success:nth-last-child(15) {
452
  animation-delay: 0.70s;
453
}
454

455
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(16),
456
.ping-bar.bg-primary:nth-last-child(16),
457
.ping-bar.bg-success:nth-last-child(16) {
458
  animation-delay: 0.75s;
459
}
460

461
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(17),
462
.ping-bar.bg-primary:nth-last-child(17),
463
.ping-bar.bg-success:nth-last-child(17) {
464
  animation-delay: 0.80s;
465
}
466

467
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(18),
468
.ping-bar.bg-primary:nth-last-child(18),
469
.ping-bar.bg-success:nth-last-child(18) {
470
  animation-delay: 0.85s;
471
}
472

473
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(19),
474
.ping-bar.bg-primary:nth-last-child(19),
475
.ping-bar.bg-success:nth-last-child(19) {
476
  animation-delay: 0.90s;
477
}
478

479
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(20),
480
.ping-bar.bg-primary:nth-last-child(20),
481
.ping-bar.bg-success:nth-last-child(20) {
482
  animation-delay: 0.95s;
483
}
484

485
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(21),
486
.ping-bar.bg-primary:nth-last-child(21),
487
.ping-bar.bg-success:nth-last-child(21) {
488
  animation-delay: 1.00s;
489
}
490

491
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(22),
492
.ping-bar.bg-primary:nth-last-child(22),
493
.ping-bar.bg-success:nth-last-child(22) {
494
  animation-delay: 1.05s;
495
}
496

497
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(23),
498
.ping-bar.bg-primary:nth-last-child(23),
499
.ping-bar.bg-success:nth-last-child(23) {
500
  animation-delay: 1.10s;
501
}
502

503
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(24),
504
.ping-bar.bg-primary:nth-last-child(24),
505
.ping-bar.bg-success:nth-last-child(24) {
506
  animation-delay: 1.15s;
507
}
508

509
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(25),
510
.ping-bar.bg-primary:nth-last-child(25),
511
.ping-bar.bg-success:nth-last-child(25) {
512
  animation-delay: 1.20s;
513
}
514

515
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(26),
516
.ping-bar.bg-primary:nth-last-child(26),
517
.ping-bar.bg-success:nth-last-child(26) {
518
  animation-delay: 1.25s;
519
}
520

521
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(27),
522
.ping-bar.bg-primary:nth-last-child(27),
523
.ping-bar.bg-success:nth-last-child(27) {
524
  animation-delay: 1.30s;
525
}
526

527
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(28),
528
.ping-bar.bg-primary:nth-last-child(28),
529
.ping-bar.bg-success:nth-last-child(28) {
530
  animation-delay: 1.35s;
531
}
532

533
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(29),
534
.ping-bar.bg-primary:nth-last-child(29),
535
.ping-bar.bg-success:nth-last-child(29) {
536
  animation-delay: 1.40s;
537
}
538

539
.hp-bar-big .beat[data-v-636dc6a9]:nth-last-child(30),
540
.ping-bar.bg-primary:nth-last-child(30),
541
.ping-bar.bg-success:nth-last-child(30) {
542
  animation-delay: 1.45s;
543
}
544

545
@keyframes wr-green-flow {
546
  0%,
547
  100% {
548
    background-color: var(--bs-green) !important;
549
    filter: brightness(0.92);
550
    box-shadow: 0 0 5px color-mix(in oklch, var(--bs-green), transparent 62%);
551
  }
552

553
  38% {
554
    background-color: oklch(0.84 0.12 150) !important;
555
    filter: brightness(1.12);
556
    box-shadow:
557
      0 0 7px color-mix(in oklch, var(--bs-green), transparent 48%),
558
      0 0 14px color-mix(in oklch, var(--bs-green), transparent 68%);
559
  }
560

561
  70% {
562
    background-color: var(--bs-green) !important;
563
    filter: brightness(0.98);
564
    box-shadow: 0 0 6px color-mix(in oklch, var(--bs-green), transparent 56%);
565
  }
566
}
567
/* ========================================================
568
   10. 状态百分比改为呼吸状态
569
======================================================== */
570

571
.info .badge.rounded-pill.bg-primary {
572
  --bg: var(--bs-green);
573
}
574

575
.info .badge.rounded-pill.bg-danger {
576
  --bg: var(--bs-danger);
577
}
578

579
.info .badge.rounded-pill {
580
  position: relative;
581
  display: flex;
582
  min-width: auto;
583
  width: 1rem;
584
  margin-left: 0.1rem;
585
  font-size: 0;
586
  justify-content: center;
587
  align-items: center;
588
  background-color: transparent !important;
589
}
590

591
.info .badge.rounded-pill::before {
592
  position: absolute;
593
  content: "";
594
  width: 1rem;
595
  height: 1rem;
596
  border-radius: 50%;
597
  background-color: var(--bg);
598
  animation: breath 1.1s ease-in-out infinite;
599
}
600

601
.info .badge.rounded-pill::after {
602
  content: "";
603
  width: 0.6rem;
604
  height: 0.6rem;
605
  border-radius: 50%;
606
  background-color: var(--bg);
607
}
608

609
@keyframes breath {
610
  0%,
611
  100% {
612
    transform: scale(1);
613
    opacity: 0.2;
614
  }
615

616
  50% {
617
    transform: scale(1.2);
618
    opacity: 0;
619
  }
620
}
621

622
/* ========================================================
623
   11. 保留原公共布局优化
624
======================================================== */
625

626
/* 隐藏更新时间 */
627
.refresh-info.mb-2 {
628
  display: none;
629
}
630

631
/* 原版布局比例：不改 */
632
.col-md-4 {
633
  width: 50%;
634
}
635

636
.col-md-8 {
637
  max-width: 50%;
638
  display: flex;
639
  flex-wrap: wrap;
640
  flex-direction: column;
641
}
642

643
.mb-5 {
644
  margin-bottom: 2rem !important;
645
}
646

647
/* 行内左右分布：保留 */
648
.item .row {
649
  justify-content: space-between;
650
}
651

652
/* 底部样式 */
653
footer[data-v-b8247e57] {
654
  margin: 1.5rem 0 !important;
655
}
656

657
footer p {
658
  margin: 0 !important;
659
  color: rgba(255, 255, 255, 0.58) !important;
660
}
661

662
/* ========================================================
663
   12. 手机适配：保留原版逻辑
664
======================================================== */
665

666
@media screen and (max-width: 768px) {
667
  .container {
668
    margin-top: 3.5rem !important;
669
  }
670

671
  .title-flex {
672
    font-size: 2.2rem !important;
673
    letter-spacing: 0.06em !important;
674
    gap: 14px !important;
675
  }
676

677
  .title-flex img,
678
  .logo,
679
  img.logo {
680
    width: 68px !important;
681
    height: 68px !important;
682
    max-width: 68px !important;
683
    max-height: 68px !important;
684
  }
685

686
  .monitor-list .monitor-list {
687
    grid-template-columns: repeat(1, 1fr);
688
  }
689

690
  .group-title {
691
    font-size: 2rem;
692
  }
693

694
  .col-md-4 {
695
    width: 100%;
696
  }
697

698
  .col-md-8 {
699
    max-width: 100%;
700
  }
701
}