Revision of Uptime-Kuma美化代码 - 清羽飞扬の代码片段

1

+

@import url("https://fontsapi.zeoseven.com/488/main/result.css");

2

+

3

+

:root {

4

+

--bs-white: #fff;

5

+

--bs-dark: #212529;

6

+

--bs-green: #008000;

7

+

--bs-danger: #dc3545;

8

+

--bs-body-bg: #f6f7f9;

9

+

--bs-blue: #0d6efd;

10

+

--bg-linear-gradient: linear-gradient(180deg, #f6f6f6, #f8f8f8);

11

+

--border-solid-main: 2px solid var(--bs-white);

12

+

--border-solid-small: 1px solid var(--bs-white);

13

+

--shadow-box-main: 8px 8px 15px 0 rgba(55, 99, 170, 0.1), -8px -8px 15px 0 var(--bs-white), inset 0 4px 15px 0 rgba(255, 255, 255, 0.5);

14

+

--shadow-box-small: 5px 5px 12px 0 rgba(55, 99, 170, 0.1), -5px -5px 12px 0 var(--bs-body-bg), inset 0 4px 10px 0 rgba(255, 255, 255, 0.5);

15

+

--shadow-inset-box: inset -4px -4px 12px #f1f1f1, inset 4px 4px 12px #e2e2e2;

16

+

}

17

+

18

+

.dark {

19

+

--bs-white: #2d2d2d;

20

+

--bs-dark: #e9ecef;

21

+

--bs-green: #00c800;

22

+

--bs-danger: #dc3545;

23

+

--bs-body-bg: #222222;

24

+

--bg-linear-gradient: linear-gradient(180deg, #242424, #222222);

25

+

--border-solid-main: 2px solid rgba(45, 45, 45, 0.8);

26

+

--border-solid-small: 1px solid rgba(45, 45, 45, 0.6);

27

+

--shadow-box-main: 8px 8px 15px 0 rgba(0, 0, 0, 0.3), -8px -8px 15px 0 #242424, inset 0 4px 15px 0 #222222;

28

+

--shadow-box-small: 5px 5px 12px 0 rgba(0, 0, 0, 0.25), -5px -5px 12px 0 #242424, inset 0 4px 10px 0 #222222;

29

+

--shadow-inset-box: inset -4px -4px 12px #0d0d0d, inset 4px 4px 12px #1a1a1a;

30

+

}

31

+

32

+

body {

33

+

background-color: var(--bs-body-bg) !important;

34

+

}

35

+

36

+

#app {

37

+

font-family: "STDongGuanTi" !important;

38

+

}

39

+

40

+

/* LOGO标题样式 */

41

+

.title-flex {

42

+

font-weight: bold;

43

+

justify-content: center;

44

+

}

45

+

46

+

/* 按钮 */

47

+

.btn-info {

48

+

color: var(--bs-dark);

49

+

background-image: var(--bg-linear-gradient);

50

+

box-shadow: var(--shadow-box-small);

51

+

border: var(--border-solid-main);

52

+

}

53

+

54

+

.btn-info:hover {

55

+

color: var(--bs-dark);

56

+

background-color: transparent;

57

+

border-color: unset;

58

+

box-shadow: var(--shadow-inset-box);

59

+

}

60

+

61

+

/* 服务组标题 */

62

+

.group-title {

63

+

font-size: 2.5rem;

64

+

font-weight: 500;

65

+

opacity: .6;

66

+

-webkit-mask: linear-gradient(var(--bs-white) 50%, transparent);

67

+

mask: linear-gradient(var(--bs-white) 50%, transparent);

68

+

text-stroke: 1px var(--bs-dark);

69

+

-webkit-text-stroke: 1px var(--bs-dark);

70

+

-webkit-text-fill-color: transparent;

71

+

}

72

+

73

+

/* 服务项目列表样式 */

74

+

.monitor-list .monitor-list {

75

+

min-height: 45px;

76

+

display: grid;

77

+

grid-template-columns: repeat(2, 1fr);

78

+

}

79

+

80

+

.monitor-list .item .info {

81

+

display: flex;

82

+

flex-wrap: wrap;

83

+

align-items: center;

84

+

}

85

+

86

+

.info1::before,

87

+

.info1::after {

88

+

content: "";

89

+

display: inline-block;

90

+

width: 10px;

91

+

height: 10px;

92

+

background-color: var(--bs-white);

93

+

margin: 0.5rem 0;

94

+

border-radius: 50%;

95

+

animation: breath 1.5s ease-in-out infinite;

96

+

}

97

+

98

+

.info1::after {

99

+

animation-delay: 0.75s;

100

+

/* 使两个圆点呼吸交替进行 */

101

+

}

102

+

103

+

.info .bg-danger+.item-name {

104

+

color: var(--bs-red);

105

+

}

106

+

107

+

.shadow-box {

108

+

margin-top: 0 !important;

109

+

background-image: var(--bg-linear-gradient);

110

+

border: var(--border-solid-main);

111

+

box-shadow: var(--shadow-box-main);

112

+

}

113

+

114

+

div[data-v-f71ca08e].mb-5:hover .group-title {

115

+

-webkit-text-fill-color: var(--bs-dark);

116

+

}

117

+

118

+

.monitor-list .item:hover {

119

+

background-color: var(--bs-white);

120

+

box-shadow: var(--shadow-inset-box);

121

+

}

122

+

123

+

.dark .monitor-list .item:hover {

124

+

background-color: var(--bs-body-bg);

125

+

}

126

+

127

+

/* 服务项目列表标题样式 */

128

+

.item-name {

129

+

font-weight: bold;

130

+

}

131

+

132

+

a {

133

+

text-decoration: none !important;

134

+

}

135

+

136

+

a.item-name:hover {

137

+

color: var(--bs-blue) !important;

138

+

}

139

+

140

+

/* 服务OK样式 */

141

+

.overall-status .ok {

142

+

color: var(--bs-green) !important;

143

+

}

144

+

145

+

.hp-bar-big .beat[data-v-636dc6a9] {

146

+

background-color: var(--bs-green);

147

+

}

148

+

149

+

.item .row {

150

+

justify-content: space-between;

151

+

}

152

+

153

+

/* 状态百分比改为呼吸状态 */

154

+

.info .badge.rounded-pill.bg-primary {

155

+

--bg: var(--bs-green);

156

+

}

157

+

158

+

.info .badge.rounded-pill.bg-danger {

159

+

--bg: var(--bs-danger);

160

+

}

161

+

162

+

.info .badge.rounded-pill {

163

+

position: relative;

164

+

display: flex;

165

+

min-width: auto;

166

+

width: 1rem;

167

+

margin-left: 0.1rem;

168

+

font-size: 0;

169

+

justify-content: center;

170

+

align-items: center;

171

+

background-color: transparent !important;

172

+

}

173

+

174

+

.info .badge.rounded-pill::before {

175

+

position: absolute;

176

+

content: "";

177

+

width: 1rem;

178

+

height: 1rem;

179

+

border-radius: 50%;

180

+

background-color: var(--bg);

181

+

animation: breath 1.1s ease-in-out infinite;

182

+

}

183

+

184

+

.info .badge.rounded-pill::after {

185

+

content: "";

186

+

width: 0.6rem;

187

+

height: 0.6rem;

188

+

border-radius: 50%;

189

+

background-color: var(--bg);

190

+

}

191

+

192

+

193

+

@keyframes breath {

194

+

195

+

0%,

196

+

100% {

197

+

transform: scale(1);

198

+

opacity: 0.2;

199

+

}

200

+

201

+

50% {

202

+

transform: scale(1.2);

203

+

opacity: 0;

204

+

}

205

+

}

206

+

207

+

/* 公共样式优化 */

208

+

.col-md-4 {

209

+

width: 50%;

210

+

}

211

+

212

+

.col-md-8 {

213

+

max-width: 50%;

214

+

display: flex;

215

+

flex-wrap: wrap;

216

+

flex-direction: column;

217

+

}

218

+

219

+

.mb-5 {

220

+

margin-bottom: 2rem !important;

221

+

}

222

+

223

+

/* 底部样式 */

224

+

footer[data-v-b8247e57] {

225

+

margin: 1.5rem 0 !important;

226

+

}

227

+

228

+

footer p {

229

+

margin: 0 !important;

230

+

}

231

+

232

+

/* 适配手机 */

233

+

@media screen and (max-width: 768px) {

234

+

.monitor-list .monitor-list {

235

+

grid-template-columns: repeat(1, 1fr);

236

+

}

237

+

238

+

.group-title {

239

+

font-size: 2rem;

240

+

}

241

+

}

LiuShen / Uptime-Kuma美化代码

LiuShen revised this gist 1 month ago. Go to revision

		@@ -0,0 +1,241 @@
1	+	@import url("https://fontsapi.zeoseven.com/488/main/result.css");
2	+
3	+	:root {
4	+	--bs-white: #fff;
5	+	--bs-dark: #212529;
6	+	--bs-green: #008000;
7	+	--bs-danger: #dc3545;
8	+	--bs-body-bg: #f6f7f9;
9	+	--bs-blue: #0d6efd;
10	+	--bg-linear-gradient: linear-gradient(180deg, #f6f6f6, #f8f8f8);
11	+	--border-solid-main: 2px solid var(--bs-white);
12	+	--border-solid-small: 1px solid var(--bs-white);
13	+	--shadow-box-main: 8px 8px 15px 0 rgba(55, 99, 170, 0.1), -8px -8px 15px 0 var(--bs-white), inset 0 4px 15px 0 rgba(255, 255, 255, 0.5);
14	+	--shadow-box-small: 5px 5px 12px 0 rgba(55, 99, 170, 0.1), -5px -5px 12px 0 var(--bs-body-bg), inset 0 4px 10px 0 rgba(255, 255, 255, 0.5);
15	+	--shadow-inset-box: inset -4px -4px 12px #f1f1f1, inset 4px 4px 12px #e2e2e2;
16	+	}
17	+
18	+	.dark {
19	+	--bs-white: #2d2d2d;
20	+	--bs-dark: #e9ecef;
21	+	--bs-green: #00c800;
22	+	--bs-danger: #dc3545;
23	+	--bs-body-bg: #222222;
24	+	--bg-linear-gradient: linear-gradient(180deg, #242424, #222222);
25	+	--border-solid-main: 2px solid rgba(45, 45, 45, 0.8);
26	+	--border-solid-small: 1px solid rgba(45, 45, 45, 0.6);
27	+	--shadow-box-main: 8px 8px 15px 0 rgba(0, 0, 0, 0.3), -8px -8px 15px 0 #242424, inset 0 4px 15px 0 #222222;
28	+	--shadow-box-small: 5px 5px 12px 0 rgba(0, 0, 0, 0.25), -5px -5px 12px 0 #242424, inset 0 4px 10px 0 #222222;
29	+	--shadow-inset-box: inset -4px -4px 12px #0d0d0d, inset 4px 4px 12px #1a1a1a;
30	+	}
31	+
32	+	body {
33	+	background-color: var(--bs-body-bg) !important;
34	+	}
35	+
36	+	#app {
37	+	font-family: "STDongGuanTi" !important;
38	+	}
39	+
40	+	/* LOGO标题样式 */
41	+	.title-flex {
42	+	font-weight: bold;
43	+	justify-content: center;
44	+	}
45	+
46	+	/* 按钮 */
47	+	.btn-info {
48	+	color: var(--bs-dark);
49	+	background-image: var(--bg-linear-gradient);
50	+	box-shadow: var(--shadow-box-small);
51	+	border: var(--border-solid-main);
52	+	}
53	+
54	+	.btn-info:hover {
55	+	color: var(--bs-dark);
56	+	background-color: transparent;
57	+	border-color: unset;
58	+	box-shadow: var(--shadow-inset-box);
59	+	}
60	+
61	+	/* 服务组标题 */
62	+	.group-title {
63	+	font-size: 2.5rem;
64	+	font-weight: 500;
65	+	opacity: .6;
66	+	-webkit-mask: linear-gradient(var(--bs-white) 50%, transparent);
67	+	mask: linear-gradient(var(--bs-white) 50%, transparent);
68	+	text-stroke: 1px var(--bs-dark);
69	+	-webkit-text-stroke: 1px var(--bs-dark);
70	+	-webkit-text-fill-color: transparent;
71	+	}
72	+
73	+	/* 服务项目列表样式 */
74	+	.monitor-list .monitor-list {
75	+	min-height: 45px;
76	+	display: grid;
77	+	grid-template-columns: repeat(2, 1fr);
78	+	}
79	+
80	+	.monitor-list .item .info {
81	+	display: flex;
82	+	flex-wrap: wrap;
83	+	align-items: center;
84	+	}
85	+
86	+	.info1::before,
87	+	.info1::after {
88	+	content: "";
89	+	display: inline-block;
90	+	width: 10px;
91	+	height: 10px;
92	+	background-color: var(--bs-white);
93	+	margin: 0.5rem 0;
94	+	border-radius: 50%;
95	+	animation: breath 1.5s ease-in-out infinite;
96	+	}
97	+
98	+	.info1::after {
99	+	animation-delay: 0.75s;
100	+	/* 使两个圆点呼吸交替进行 */
101	+	}
102	+
103	+	.info .bg-danger+.item-name {
104	+	color: var(--bs-red);
105	+	}
106	+
107	+	.shadow-box {
108	+	margin-top: 0 !important;
109	+	background-image: var(--bg-linear-gradient);
110	+	border: var(--border-solid-main);
111	+	box-shadow: var(--shadow-box-main);
112	+	}
113	+
114	+	div[data-v-f71ca08e].mb-5:hover .group-title {
115	+	-webkit-text-fill-color: var(--bs-dark);
116	+	}
117	+
118	+	.monitor-list .item:hover {
119	+	background-color: var(--bs-white);
120	+	box-shadow: var(--shadow-inset-box);
121	+	}
122	+
123	+	.dark .monitor-list .item:hover {
124	+	background-color: var(--bs-body-bg);
125	+	}
126	+
127	+	/* 服务项目列表标题样式 */
128	+	.item-name {
129	+	font-weight: bold;
130	+	}
131	+
132	+	a {
133	+	text-decoration: none !important;
134	+	}
135	+
136	+	a.item-name:hover {
137	+	color: var(--bs-blue) !important;
138	+	}
139	+
140	+	/* 服务OK样式 */
141	+	.overall-status .ok {
142	+	color: var(--bs-green) !important;
143	+	}
144	+
145	+	.hp-bar-big .beat[data-v-636dc6a9] {
146	+	background-color: var(--bs-green);
147	+	}
148	+
149	+	.item .row {
150	+	justify-content: space-between;
151	+	}
152	+
153	+	/* 状态百分比改为呼吸状态 */
154	+	.info .badge.rounded-pill.bg-primary {
155	+	--bg: var(--bs-green);
156	+	}
157	+
158	+	.info .badge.rounded-pill.bg-danger {
159	+	--bg: var(--bs-danger);
160	+	}
161	+
162	+	.info .badge.rounded-pill {
163	+	position: relative;
164	+	display: flex;
165	+	min-width: auto;
166	+	width: 1rem;
167	+	margin-left: 0.1rem;
168	+	font-size: 0;
169	+	justify-content: center;
170	+	align-items: center;
171	+	background-color: transparent !important;
172	+	}
173	+
174	+	.info .badge.rounded-pill::before {
175	+	position: absolute;
176	+	content: "";
177	+	width: 1rem;
178	+	height: 1rem;
179	+	border-radius: 50%;
180	+	background-color: var(--bg);
181	+	animation: breath 1.1s ease-in-out infinite;
182	+	}
183	+
184	+	.info .badge.rounded-pill::after {
185	+	content: "";
186	+	width: 0.6rem;
187	+	height: 0.6rem;
188	+	border-radius: 50%;
189	+	background-color: var(--bg);
190	+	}
191	+
192	+
193	+	@keyframes breath {
194	+
195	+	0%,
196	+	100% {
197	+	transform: scale(1);
198	+	opacity: 0.2;
199	+	}
200	+
201	+	50% {
202	+	transform: scale(1.2);
203	+	opacity: 0;
204	+	}
205	+	}
206	+
207	+	/* 公共样式优化 */
208	+	.col-md-4 {
209	+	width: 50%;
210	+	}
211	+
212	+	.col-md-8 {
213	+	max-width: 50%;
214	+	display: flex;
215	+	flex-wrap: wrap;
216	+	flex-direction: column;
217	+	}
218	+
219	+	.mb-5 {
220	+	margin-bottom: 2rem !important;
221	+	}
222	+
223	+	/* 底部样式 */
224	+	footer[data-v-b8247e57] {
225	+	margin: 1.5rem 0 !important;
226	+	}
227	+
228	+	footer p {
229	+	margin: 0 !important;
230	+	}
231	+
232	+	/* 适配手机 */
233	+	@media screen and (max-width: 768px) {
234	+	.monitor-list .monitor-list {
235	+	grid-template-columns: repeat(1, 1fr);
236	+	}
237	+
238	+	.group-title {
239	+	font-size: 2rem;
240	+	}
241	+	}