1
/* 适用于 Uptime-Kuma 1.23.16 版本 */
2
/* 浅色模式 */
3
/* 添加背景 */
4
body.light {
5
    background-image: url("这里替换为自己的背景图");
6
    background-repeat: no-repeat;
7
    background-size: cover;
8
    background-attachment: fixed;
9
    background-position-x: center;
10
}
11

12
/* 为服务状态显示区域添加阴影和透明效果 */
13
.light .shadow-box:not(.alert) {
14
    background-color: #ffffff33;
15
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
16
}
17
.light .monitor-list .item:hover {
18
    background-color: #ffffff55;
19
}
20

21
/* 检测时间设置为黑色 */
22
.light .word[data-v-636dc6a9] {
23
    color: #000;
24
}
25

26
/* 修改侧边栏背景颜色为半透明白色 */
27
.light .sidebar {
28
    background-color: #ffffffcc !important;
29
}
30
/* 深色模式 */
31
/* 添加背景 */
32
body.dark {
33
    background-image: url("这里替换为自己的背景图");
34
    background-repeat: no-repeat;
35
    background-size: cover;
36
    background-attachment: fixed;
37
    background-position-x: center;
38
}
39

40
/* 全局白色字体 */
41
.dark div {
42
    color: white;
43
}
44

45
/* 为服务状态显示区域添加阴影和透明效果 */
46
.dark .shadow-box:not(.alert) {
47
    background-color: rgba(255, 255, 255, 0.1);
48
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
49
}
50

51
/* 鼠标悬停时，将服务状态显示区域背景色设置为半透明 */
52
.dark .monitor-list .item:hover,
53
.dark .monitor-list .item.active {
54
    background-color: rgba(255, 255, 255, 0.1);
55
}
56

57
/* 全局样式 */
58
/* 滚动条隐藏 */
59
::-webkit-scrollbar {
60
    display: none;
61
}
62

63
/* 修改“编辑状态页面”和“前往仪表盘”按钮样式 */
64
.btn-info {
65
    color: #fff;
66
    background-color: rgba(92, 221, 139, 0.7);  /* 修改按钮颜色为绿色，和整体的Uptime-Kuma颜色保持一致 */
67
    border-color: rgba(255, 255, 255, 0);  /* 修改边框为透明 */
68
}
69
.btn-info:hover {
70
    background-color: rgba(92, 221, 139, 0.9);  /* 鼠标悬停时按钮颜色变深 */
71
    border-color: rgba(255, 255, 255, 0);  /* 鼠标悬停时边框仍然为透明 */
72
}
73

74
/* 隐藏“服务”标识 */
75
h2[data-v-f71ca08e].group-title,div[data-v-b8247e57].alert-heading.p-2 {
76
    display: none;
77
}
78

79
/* 检测状态条样式为半透明 */
80
.beat {
81
    opacity: 0.6;
82
}
83
.beat:hover {
84
    opacity: 0.6;
85
}