Alist 美化样式

笔记
12k words

说明

  • 一部分是copy的，一部分是自己写的。
  • 自用样式，可复制需要的部分，按需取用。
  • 若使用背景图片样式，建议更换图片链接，自带链接不保证一直有效。
  • 适配所有 Alist 版本（2024-3-9）（点此直达）

使用方式

1.进入Alist管理后台-设置-全局。

2.开始编辑【自定义头部】，光标移到最后面，或回车另起一行。

3.以下方法按需选择

  • 可将下方全部复制，粘贴进去。
  • 按需复制代码块，粘贴进去。但要注意的是样式代码之前要有<style>，之后要有</style>。

样式（新版，基于 Alist_V3.32.0）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
<style>

/* 去除通知栏 右上角 X */
.notify-render .hope-close-button {
    display: none;
}

/* 白天模式背景 */
.hope-ui-light {
    background-image: url(https://static.lllvlll.com/alist/light.jpg) !important;
    background-attachment: fixed;
    background-position: 100%;
    background-size: cover;
}

/* 白天模式主框体毛玻璃 */
.hope-c-PJLV-igScBhH-css {
    background-color: #ffffff72 !important;
    backdrop-filter: blur(8px);
}

/* 白天模式Readme框体毛玻璃 */
.hope-c-PJLV-ikSuVsl-css {
    background-color: #ffffff72 !important;
    backdrop-filter: blur(8px);
}

/* 黑夜模式背景 */
.hope-ui-dark {
    background-image: url(https://static.lllvlll.com/alist/dark.jpg) !important;
    background-attachment: fixed;
    background-position: 100%;
    background-size: cover;
}

/* 黑夜模式主框体毛玻璃 */
.hope-c-PJLV-iigjoxS-css {
    background-color: #00000090 !important;
    backdrop-filter: blur(8px);
}

/* 黑夜模式Readme框体毛玻璃 */
.hope-c-PJLV-iiuDLME-css {
    background-color: #00000090 !important;
    backdrop-filter: blur(8px);
}

/*顶部右上角切换按钮透明*/
.hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
    background-color: rgba(255, 255, 255, 0.3)!important;
}
.hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
    background-color:rgb(0 0 0 / 10%)!important;
	
}

/*右下角侧边栏按钮透明 第一个是白天 第二个是夜间*/
.hope-ui-light .hope-c-PJLV-ijgzmFG-css {
    background-color: #ffffff72 !important;
    backdrop-filter: blur(8px);
}
.hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
    background-color: #00000090 !important;
    backdrop-filter: blur(8px);
}

/*白天模式代码块模糊*/
.hope-ui-light pre {
    background-color: rgba(255, 255, 255, 0.1)!important;
}
/*夜间模式代码块模糊*/
.hope-ui-dark pre {
    background-color: rgba(255, 255, 255, 0)!important;
}

/*右上打开菜单栏模糊 第一个是白天 第二个是夜间*/
.hope-ui-light .hope-c-PJLV-iSMXDf-css {
background-color: #ffffff72 !important;
backdrop-filter: blur(10px);
}
.hope-ui-dark .hope-c-PJLV-iSMXDf-css {
background-color: #00000090 !important;
backdrop-filter: blur(10px);
}

/*白天模式 搜索按钮+毛玻璃*/
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
   background-color: rgba(255,255,255,0.3)!important;
   backdrop-filter: blur(10px)!important;
   padding: var(--hope-space-1)!important;
}

/*夜间模式 搜索按钮+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
    background-color: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
    padding: var(--hope-space-1)!important;
}

/* 白天模式右键菜单毛玻璃 */
.solid-contextmenu__theme--light {
    background-color: #ffffff72 !important;
    backdrop-filter: blur(8px);
}
/* 黑夜模式右键菜单毛玻璃 */
.solid-contextmenu__theme--dark {
    background-color: #00000090 !important;
    backdrop-filter: blur(8px);
}

/* 深色模式 右键菜单栏 鼠标悬停 背景模糊*/
.solid-contextmenu__item:not(.solid-contextmenu__item--disabled):hover>.solid-contextmenu__item__content,.solid-contextmenu__item:not(.solid-contextmenu__item--disabled):focus>.solid-contextmenu__item__content {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1)!important;
}
/* 浅色模式 右键菜单栏 鼠标悬停 背景模糊*/
.solid-contextmenu__theme--light .solid-contextmenu__item:not(.solid-contextmenu__item--disabled):hover>.solid-contextmenu__item__content,.solid-contextmenu__theme--light .solid-contextmenu__item:not(.solid-contextmenu__item--disabled):focus>.solid-contextmenu__item__content {
    color: #4393e6 !important;
    background-color: rgba(255, 255, 255, 0.3)!important;
    backdrop-filter: blur(8px)!important;
}

/* 弹出式窗口背景虚化 */
 .hope-modal__overlay, .hope-drawer__overlay {
    background-color:rgb(0 0 0 / 50%) !important;
    backdrop-filter: blur(10px);
}
/* 对话框 */
/*白天模式*/
 .hope-modal__content, .hope-drawer__content {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px);
}
/*夜间模式*/
.hope-ui-dark .hope-modal__content, .hope-ui-dark .hope-drawer__content {
    background-color:rgb(0 0 0 / 50%) !important;
    backdrop-filter: blur(10px);
}
/* 按钮 */
.hope-c-ivMHWx-kWSPeQ-size-md {
    opacity:0.8;
}


/* 返回顶部 */
 .hope-c-PJLV-ihVEsOa-css {
    background: rgba(255, 255, 255, 0.5) !important;
}
.hope-ui-dark .hope-c-PJLV-ihVEsOa-css {
    background-color:rgb(0 0 0 / 50%) !important;
}

/*顶部*/
/*白天模式*/
 .hope-ui-light .hope-c-PJLV-ikaMhsQ-css {
    background: rgba(255, 255, 255, 0) !important;
    backdrop-filter: blur(10px);
}
/*夜间模式*/
 .hope-ui-dark .hope-c-PJLV-ikaMhsQ-css {
    background: rgb(0 0 0 / 0%) !important;
    backdrop-filter: blur(10px);
}
/*导航条*/ 
/*白天模式*/
 .hope-ui-light .hope-c-PJLV-idaeksS-css {
    background-color: rgba(255, 255, 255, 0) !important;
    backdrop-filter: blur(8px)!important;
    border-radius: var(--hope-radii-xl) !important;
}
/*夜间模式*/
 .hope-ui-dark .hope-c-PJLV-idaeksS-css {
    background-color:rgb(0 0 0 / 0%) !important;
    backdrop-filter: blur(8px)!important;
    border-radius: var(--hope-radii-xl) !important;
}


/*底部CSS，.App .table这三个一起的*/
 dibu {
    border-top: 0px;
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.App {
    min-height: 85vh;
}
.table {
    margin: auto;
}

/*选择框*/ 
/*白天模式*/
 .hope-ui-light .hope-c-PJLV-ijpihTg-css {
    background-color: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(8px)!important;
}
/*夜间模式*/
 .hope-ui-dark .hope-c-PJLV-ijpihTg-css {
    background-color:rgb(0 0 0 / 30%) !important;
    backdrop-filter: blur(8px)!important;
}

</style>

全版本兼容（不再维护，建议将 Alist 升级至新版）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
<style>

/* 去除通知栏 右上角 X */
.notify-render .hope-close-button {
    display: none;
}

/* 白天模式背景 */
.hope-ui-light {
    background-image: url(https://static.lllvlll.com/alist/light.jpg) !important;
    background-attachment: fixed;
    background-position: 100%;
    background-size: cover;
}

/* 白天模式主框体毛玻璃 */
.hope-c-PJLV-igScBhH-css {
    background-color: #ffffff72 !important;
    backdrop-filter: blur(8px);
}

/* 白天模式Readme框体毛玻璃 */
.hope-c-PJLV-ikSuVsl-css {
    background-color: #ffffff72 !important;
    backdrop-filter: blur(8px);
}

/* 黑夜模式背景 */
.hope-ui-dark {
    background-image: url(https://static.lllvlll.com/alist/dark.jpg) !important;
    background-attachment: fixed;
    background-position: 100%;
    background-size: cover;
}

/* 黑夜模式主框体毛玻璃 */
.hope-c-PJLV-iigjoxS-css {
    background-color: #00000090 !important;
    backdrop-filter: blur(8px);
}

/* 黑夜模式Readme框体毛玻璃 */
.hope-c-PJLV-iiuDLME-css {
    background-color: #00000090 !important;
    backdrop-filter: blur(8px);
}

/*顶部右上角切换按钮透明*/
.hope-ui-light .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
    background-color: rgba(255, 255, 255, 0.3)!important;
}
.hope-ui-dark .hope-c-ivMHWx-hZistB-cv.hope-icon-button {
    background-color:rgb(0 0 0 / 10%)!important;
	
}

/*右下角侧边栏按钮透明 第一个是白天 第二个是夜间*/
.hope-ui-light .hope-c-PJLV-ijgzmFG-css {
    background-color: #ffffff72 !important;
    backdrop-filter: blur(8px);
}
.hope-ui-dark .hope-c-PJLV-ijgzmFG-css {
    background-color: #00000090 !important;
    backdrop-filter: blur(8px);
}

/*白天模式代码块模糊*/
.hope-ui-light pre {
    background-color: rgba(255, 255, 255, 0.1)!important;
}
/*夜间模式代码块模糊*/
.hope-ui-dark pre {
    background-color: rgba(255, 255, 255, 0)!important;
}

/*右上打开菜单栏模糊 第一个是白天 第二个是夜间*/
.hope-ui-light .hope-c-PJLV-iSMXDf-css {
background-color: #ffffff72 !important;
backdrop-filter: blur(10px);
}
.hope-ui-dark .hope-c-PJLV-iSMXDf-css {
background-color: #00000090 !important;
backdrop-filter: blur(10px);
}

/*白天模式 搜索主体+毛玻璃*/
.hope-ui-light .hope-c-PJLV-iiBaxsN-css{
   background-color: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}

/*白天模式 搜索栏输入框+毛玻璃*/
.hope-ui-light .hope-c-kvTTWD-hYRNAb-variant-filled{
   background-color: rgba(255,255,255,0.2)!important;
   backdrop-filter: blur(10px)!important;
}

/*白天模式 搜索按钮+毛玻璃*/
.hope-ui-light .hope-c-PJLV-ikEIIxw-css{
   background-color: rgba(255,255,255,0.3)!important;
   backdrop-filter: blur(10px)!important;
   padding: var(--hope-space-1)!important;
}

/*夜间模式搜索主体+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-iiBaxsN-css{
    background-color: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}

/*夜间模式搜索栏+毛玻璃*/
.hope-ui-dark .hope-c-kvTTWD-hYRNAb-variant-filled{
    background-color: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
}

/*夜间模式 搜索按钮+毛玻璃*/
.hope-ui-dark .hope-c-PJLV-ikEIIxw-css{
    background-color: rgb(0 0 0 / 10%)!important;
    backdrop-filter: blur(10px)!important;
    padding: var(--hope-space-1)!important;
}


/* 白天模式右键菜单毛玻璃 */
.solid-contextmenu__theme--light {
    background-color: #ffffff72 !important;
    backdrop-filter: blur(8px);
}
/* 黑夜模式右键菜单毛玻璃 */
.solid-contextmenu__theme--dark {
    background-color: #00000090 !important;
    backdrop-filter: blur(8px);
}

/* 深色模式 右键菜单栏 鼠标悬停 背景模糊*/
.solid-contextmenu__item:not(.solid-contextmenu__item--disabled):hover>.solid-contextmenu__item__content,.solid-contextmenu__item:not(.solid-contextmenu__item--disabled):focus>.solid-contextmenu__item__content {
    color: #fff !important;
    background-color: rgba(255, 255, 255, 0.1)!important;
}
/* 浅色模式 右键菜单栏 鼠标悬停 背景模糊*/
.solid-contextmenu__theme--light .solid-contextmenu__item:not(.solid-contextmenu__item--disabled):hover>.solid-contextmenu__item__content,.solid-contextmenu__theme--light .solid-contextmenu__item:not(.solid-contextmenu__item--disabled):focus>.solid-contextmenu__item__content {
    color: #4393e6 !important;
    background-color: rgba(255, 255, 255, 0.3)!important;
    backdrop-filter: blur(8px)!important;
}


/* 打包下载 */
/* 背景虚化 */
 .hope-modal__overlay {
    background-color:rgb(0 0 0 / 50%) !important;
    backdrop-filter: blur(10px);
}
/* 对话框 */
/*白天模式*/
 .hope-modal__content {
    background: rgba(255, 255, 255, 0.8) !important;
    backdrop-filter: blur(10px);
}
/*夜间模式*/
.hope-ui-dark .hope-modal__content {
    background-color:rgb(0 0 0 / 60%) !important;
    backdrop-filter: blur(10px);
}
/* 按钮 */
.hope-c-ivMHWx-kWSPeQ-size-md {
    opacity:0.8;
}


/* 返回顶部 */
 .hope-c-PJLV-ihVEsOa-css {
    background: rgba(255, 255, 255, 0.5) !important;
}
.hope-ui-dark .hope-c-PJLV-ihVEsOa-css {
    background-color:rgb(0 0 0 / 50%) !important;
}

/*顶部*/
/*白天模式*/
 .hope-ui-light .hope-c-PJLV-ikaMhsQ-css {
    background: rgba(255, 255, 255, 0) !important;
    backdrop-filter: blur(10px);
}
/*夜间模式*/
 .hope-ui-dark .hope-c-PJLV-ikaMhsQ-css {
    background: rgb(0 0 0 / 0%) !important;
    backdrop-filter: blur(10px);
}
/*导航条*/ 
/*白天模式*/
 .hope-ui-light .hope-c-PJLV-idaeksS-css {
    background-color: rgba(255, 255, 255, 0) !important;
    backdrop-filter: blur(8px)!important;
    border-radius: var(--hope-radii-xl) !important;
}
/*夜间模式*/
 .hope-ui-dark .hope-c-PJLV-idaeksS-css {
    background-color:rgb(0 0 0 / 0%) !important;
    backdrop-filter: blur(8px)!important;
    border-radius: var(--hope-radii-xl) !important;
}


/*底部CSS，.App .table这三个一起的*/
 dibu {
    border-top: 0px;
    position: absolute;
    bottom: 0;
    width: 100%;
    margin: 0px;
    padding: 0px;
}
.App {
    min-height: 85vh;
}
.table {
    margin: auto;
}

/*选择框*/ 
/*白天模式*/
 .hope-ui-light .hope-c-PJLV-ijpihTg-css {
    background-color: rgba(255, 255, 255, 0.3) !important;
    backdrop-filter: blur(8px)!important;
}
/*夜间模式*/
 .hope-ui-dark .hope-c-PJLV-ijpihTg-css {
    background-color:rgb(0 0 0 / 30%) !important;
    backdrop-filter: blur(8px)!important;
}

</style>

更新日志

  • 2024-3-12

    • 已适配【打包下载】
    • 已适配【设置（侧栏）】
    • 不再保证全版本适配（对之前的样式进行过修改，懒得测试老版本，索性一刀切）

  • 2024-3-9

    • 已适配【选择框】
    • 已适配 Alist_V3.31.0 及以上版本（感谢 安稳 提供的样式）