Alist 美化样式

4.3k words

说明

  • 一部分是copy的,一部分是自己写的。
  • 自用样式,可复制需要的部分,按需取用。
  • 若使用背景图片样式,建议更换图片链接,自带链接不保证一直有效。

使用方式

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

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

3.以下方法按需选择

  • 可将下方全部复制,粘贴进去。
  • 按需复制代码块,粘贴进去。但要注意的是样式代码之前要有<style>,之后要有</style>
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
<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;
}

</style>