Skip to content

Commit 241d3a9

Browse files
kasuiekasuie
committed
style: v3
1 parent 75f99de commit 241d3a9

File tree

3 files changed

+65
-44
lines changed

3 files changed

+65
-44
lines changed

‎README.md

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,11 @@
1+
<!--
2+
* @Author: kasuie
3+
* @Date: 2023-05-08 22:52:57
4+
* @LastEditors: kasuie
5+
* @LastEditTime: 2024-04-25 19:47:29
6+
* @Description:
7+
-->
8+
19
# alist-customize
2-
alist的一些魔改
10+
11+
> alist 样式上的一些调整美化，都是迎合自己的审美做的调整

‎v3/css/style.css

Lines changed: 42 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,20 @@
33
--mio-text: 0, 0, 0;
44
--mio-primary: 100, 209, 226;
55
--mio-primary50: 63, 194, 214;
6-
--hope-colors-info9: rgba(var(--mio-primary), 1);
7-
--hope-colors-info4: rgba(var(--mio-primary), 1);
8-
--hope-colors-info5: rgba(var(--mio-primary50), 1);
9-
--hope-colors-info11: rgba(var(--mio-main), 1);
6+
--hope-colors-info9: rgba(var(--mio-primary-js, --mio-primary), 1);
7+
--hope-colors-info4: rgba(var(--mio-primary-js, --mio-primary), 1);
8+
--hope-colors-info5: rgba(var(--mio-primary50-js, --mio-primary50), 1);
9+
--hope-colors-info11: rgba(var(--mio-main-js, --mio-main), 1);
1010

1111
.hope-ui-dark {
1212
--mio-main: 0, 0, 0;
1313
--mio-text: 255, 255, 255;
1414
--mio-primary: 100, 209, 226;
1515
--mio-primary50: 63, 194, 214;
16-
--hope-colors-info9: rgba(var(--mio-primary), 1);
17-
--hope-colors-info4: rgba(var(--mio-primary), 0.4);
18-
--hope-colors-info5: rgba(var(--mio-primary50), 0.4);
19-
--hope-colors-info11: rgba(var(--mio-primary50), 1);
16+
--hope-colors-info9: rgba(var(--mio-primary-js, --mio-primary), 1);
17+
--hope-colors-info4: rgba(var(--mio-primary-js, --mio-primary), 0.4);
18+
--hope-colors-info5: rgba(var(--mio-primary50-js, --mio-primary50), 0.4);
19+
--hope-colors-info11: rgba(var(--mio-primary50-js, --mio-primary50), 1);
2020
}
2121
}
2222

@@ -63,32 +63,32 @@ div#root div.hope-c-PJLV-iiLzBwx-css {
6363

6464
/**头部*/
6565
div#root div.hope-c-PJLV-iiLzBwx-css header {
66-
background-color: rgba(var(--mio-main), 0.3);
66+
background-color: rgba(var(--mio-main-js, --mio-main), 0.3);
6767
}
6868

6969
/**内容区*/
7070

7171
/**侧边栏*/
7272
div.hope-c-PJLV-ibpTetR-css > div:first-child {
73-
background-color: rgba(var(--mio-main), 0.3);
73+
background-color: rgba(var(--mio-main-js, --mio-main), 0.3);
7474
}
7575

7676
div.hope-c-PJLV-ibpTetR-css > div:first-child div.hope-c-PJLV-ibBheSN-css {
77-
color: var(--mio-main);
77+
color: var(--mio-main-js, --mio-main);
7878
}
7979

8080
/**tag a*/
8181
div.hope-c-PJLV-ibpTetR-css > div:first-child a.hope-c-PJLV-ikmVjeJ-css {
82-
color: rgba(var(--mio-primary));
83-
background-color: rgba(var(--mio-primary), 0.2);
82+
color: rgba(var(--mio-primary-js, --mio-primary));
83+
background-color: rgba(var(--mio-primary-js, --mio-primary), 0.2);
8484
}
8585
/**暗色模式*/
8686
div.hope-c-PJLV-ibpTetR-css > div:first-child .hope-c-PJLV-ijrehjy-css {
87-
background: rgba(var(--mio-main), 0.3);
87+
background: rgba(var(--mio-main-js, --mio-main), 0.3);
8888
}
8989
/**亮色模式*/
9090
div.hope-c-PJLV-ibpTetR-css > div:first-child .hope-c-PJLV-ikaEncD-css {
91-
background: rgba(var(--mio-primary), 0.3);
91+
background: rgba(var(--mio-primary-js, --mio-primary), 0.3);
9292
}
9393

9494
/**主内容区*/
@@ -100,7 +100,7 @@ div.hope-c-PJLV-ibpTetR-css
100100
div.hope-c-PJLV-ijycFhp-css
101101
div.hope-c-PJLV-iiVJRSE-css {
102102
transition: all 0.2s ease-in-out;
103-
background: rgba(var(--mio-main), 0.3);
103+
background: rgba(var(--mio-main-js, --mio-main), 0.3);
104104
}
105105

106106
div.hope-c-PJLV-ibpTetR-css
@@ -109,33 +109,33 @@ div.hope-c-PJLV-ibpTetR-css
109109
div.hope-c-PJLV-ibpTetR-css
110110
div.hope-c-PJLV-ijycFhp-css
111111
div.hope-c-PJLV-iiVJRSE-css:hover {
112-
border-color: rgba(var(--mio-primary), 0.7);
112+
border-color: rgba(var(--mio-primary-js, --mio-primary), 0.7);
113113
}
114114

115115
/**字段*/
116116
.hope-c-kvTTWD-hYRNAb-variant-filled {
117-
background-color: rgba(var(--mio-main), 0.2);
117+
background-color: rgba(var(--mio-main-js, --mio-main), 0.2);
118118
}
119119

120120
.hope-c-kvTTWD-hYRNAb-variant-filled:hover,
121121
.hope-c-kvTTWD-hYRNAb-variant-filled:focus {
122-
background-color: rgba(var(--mio-main), 0.7);
123-
border-color: rgba(var(--mio-primary), 0.5);
122+
background-color: rgba(var(--mio-main-js, --mio-main), 0.7);
123+
border-color: rgba(var(--mio-primary-js, --mio-primary), 0.5);
124124
}
125125

126126
/**开关*/
127127
.hope-c-mHASU-byiOue-variant-filled {
128-
color: rgb(var(--mio-primary), 0.5);
129-
background-color: rgba(var(--mio-main), 0.2);
128+
color: rgb(var(--mio-primary-js, --mio-primary), 0.5);
129+
background-color: rgba(var(--mio-main-js, --mio-main), 0.2);
130130
}
131131

132132
.hope-c-mHASU-byiOue-variant-filled[data-checked] {
133133
background-color: currentcolor;
134134
}
135135

136136
.hope-c-mHASU-byiOue-variant-filled[data-focus] {
137-
box-shadow: 0 0 0 3px var(--mio-primary);
138-
border-color: var(--mio-primary);
137+
box-shadow: 0 0 0 3px var(--mio-primary-js, --mio-primary);
138+
border-color: var(--mio-primary-js, --mio-primary);
139139
}
140140

141141
/**头部*/
@@ -153,7 +153,7 @@ div#root div.header .header-right > button {
153153
}
154154

155155
div#root div.header svg {
156-
color: rgba(var(--mio-primary));
156+
color: rgba(var(--mio-primary-js, --mio-primary));
157157
}
158158

159159
/**内容部分*/
@@ -169,7 +169,7 @@ div#root div.body nav.nav::after {
169169

170170
/*列表部分*/
171171
div#root div.body div.obj-box {
172-
background-color: rgba(var(--mio-main), 0.3);
172+
background-color: rgba(var(--mio-main-js, --mio-main), 0.3);
173173
min-height: 300px;
174174
max-height: calc(100vh - 180px);
175175
overflow-y: auto;
@@ -196,32 +196,32 @@ div#root div.body div.obj-box::-webkit-scrollbar-track {
196196
}
197197

198198
div#root div.body div.obj-box::-webkit-scrollbar-thumb:hover {
199-
background-color: rgba(var(--mio-primary), 0.4);
199+
background-color: rgba(var(--mio-primary-js, --mio-primary), 0.4);
200200
}
201201

202202
div#root div.body div.obj-box span.hope-c-iojPKw svg {
203-
color: rgba(var(--mio-main), 1);
203+
color: rgba(var(--mio-main-js, --mio-main), 1);
204204
}
205205

206206
/*底部MD*/
207207
div#root div.body div.hope-c-PJLV-ikSuVsl-css,
208208
div#root div.body .hope-c-PJLV-iiuDLME-css {
209-
background-color: rgba(var(--mio-main), 0.3);
209+
background-color: rgba(var(--mio-main-js, --mio-main), 0.3);
210210
backdrop-filter: blur(5px);
211211
}
212212

213213
/**MD*/
214214
.markdown-body > ul > li::marker {
215-
color: rgba(var(--mio-primary), 1);
215+
color: rgba(var(--mio-primary-js, --mio-primary), 1);
216216
}
217217

218218
/**侧边栏*/
219219
div#root div.body div.hope-c-PJLV-ieGWMbI-css {
220-
background-color: rgba(var(--mio-main), 0.3);
220+
background-color: rgba(var(--mio-main-js, --mio-main), 0.3);
221221
}
222222

223223
div#root div.body div.hope-c-PJLV-ieGWMbI-css p.hope-c-PJLV-iZZmce-css {
224-
background-color: rgba(var(--mio-primary), 0.7);
224+
background-color: rgba(var(--mio-primary-js, --mio-primary), 0.7);
225225
}
226226

227227
div#root div.body div.hope-c-PJLV-ieGWMbI-css p.hope-c-PJLV-igSqJIB-css {
@@ -231,7 +231,7 @@ div#root div.body div.hope-c-PJLV-ieGWMbI-css p.hope-c-PJLV-igSqJIB-css {
231231
}
232232

233233
div#root div.body svg {
234-
color: rgba(var(--mio-primary));
234+
color: rgba(var(--mio-primary-js, --mio-primary));
235235
}
236236

237237
/**底部*/
@@ -246,44 +246,44 @@ div.center-toolbar {
246246
}
247247

248248
div.left-toolbar-box div.left-toolbar {
249-
background-color: rgba(var(--mio-main), 0.8);
249+
background-color: rgba(var(--mio-main-js, --mio-main), 0.8);
250250
}
251251

252252
div.left-toolbar-box div.left-toolbar svg.hope-icon,
253253
div.left-toolbar-box svg.hope-icon {
254-
color: rgba(var(--mio-primary));
254+
color: rgba(var(--mio-primary-js, --mio-primary));
255255
}
256256

257257
div.left-toolbar-box div.left-toolbar svg.hope-icon:hover,
258258
div.left-toolbar-box svg.hope-icon:hover {
259259
color: rgba(255, 255, 255, 1);
260-
background-color: rgba(var(--mio-primary));
260+
background-color: rgba(var(--mio-primary-js, --mio-primary));
261261
}
262262

263263
/**返回顶部*/
264264
div.hope-c-PJLV-ihMpUpe-css {
265-
background-color: rgba(var(--mio-primary)) !important;
265+
background-color: rgba(var(--mio-primary-js, --mio-primary)) !important;
266266
}
267267

268268
/**tooltip提示*/
269269
div.hope-tooltip {
270270
color: rgba(255, 255, 255, 1);
271-
background-color: rgba(var(--mio-primary), 1);
271+
background-color: rgba(var(--mio-primary-js, --mio-primary), 1);
272272
}
273273

274274
/**加载图标*/
275275
div.hope-spinner {
276-
color: rgba(var(--mio-primary));
276+
color: rgba(var(--mio-primary-js, --mio-primary));
277277
}
278278

279279
/**menu下拉区域*/
280280
div.hope-menu__content {
281-
background-color: rgba(var(--mio-main), 0.3);
281+
background-color: rgba(var(--mio-main-js, --mio-main), 0.3);
282282
}
283283

284284
/**select下拉区域*/
285285
div.hope-c-XJURY {
286-
background: rgba(var(--mio-main), 0.8);
286+
background: rgba(var(--mio-main-js, --mio-main), 0.8);
287287
}
288288

289289
/**登录页*/
@@ -299,7 +299,7 @@ div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-ihWgyFw-css {
299299
/**登录框*/
300300
div.hope-c-PJLV-ibcBsNO-css div.hope-c-PJLV-iubUra-css,
301301
div.hope-c-PJLV-ibcBsNO-css .hope-c-PJLV-ifjOQLV-css {
302-
background-color: rgba(var(--mio-main), 0.5);
302+
background-color: rgba(var(--mio-main-js, --mio-main), 0.5);
303303
backdrop-filter: blur(5px);
304304
}
305305

‎v3/js/style.js

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* @Author: kasuie
33
* @Date: 2024-04-24 15:35:59
44
* @LastEditors: kasuie
5-
* @LastEditTime: 2024-04-25 17:52:50
5+
* @LastEditTime: 2024-04-25 20:15:51
66
* @Description:
77
*/
88
let footer = false;
@@ -42,6 +42,18 @@ const onPatchStyle = (style) => {
4242
head.appendChild(styleElement);
4343
};
4444

45+
const setCssVariable = (variable, value) => {
46+
document.documentElement.style.setProperty(variable, value);
47+
};
48+
49+
const hexToRgb = (hex) => {
50+
hex = hex.replace(/^#/, "");
51+
let r = parseInt(hex.substring(0, 2), 16);
52+
let g = parseInt(hex.substring(2, 4), 16);
53+
let b = parseInt(hex.substring(4, 6), 16);
54+
return r + ", " + g + ", " + b;
55+
};
56+
4557
const onCreateElement = (tag, attrs) => {
4658
const dom = document.createElement(tag);
4759
if (attrs && typeof attrs == "object") {

0 commit comments

Comments
 (0)