☃共享一段美化 ALIST 页面的代码

newscat

复制下面这段代码：

1. <script src="https://polyfill.io/v3/polyfill.min.js?features=String.prototype.replaceAll"></script>
   
2. <link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />
   
3. <style>
   
4. 
   
5. /*左侧侧边栏目录*/
   
6. /*白天模式*/
   
7. .hope-ui-light .hope-c-PJLV-ieGWMbI-css {
   
8. background: rgba(255, 255, 255, 0.3) !important;
   
9. }
   
10. /*夜间模式*/
    
11. .hope-ui-dark .hope-c-PJLV-ieGWMbI-css {
    
12. background-color:rgb(0 0 0 / 50%)!important;
    
13. }
    
14. /* 返回顶部 */
    
15. .hope-c-PJLV-ihVEsOa-css {
    
16. background: rgba(255, 255, 255, 0.3) !important;
    
17. }
    
18. .hope-ui-dark .hope-c-PJLV-ihVEsOa-css {
    
19. background-color:rgb(0 0 0 / 50%)!important;
    
20. }
    
21. 
    
22. /*正常情况未使用吸附功能*/
    
23. /*导航条*/
    
24. /*白天模式*/
    
25. .hope-ui-light .hope-c-PJLV-idaeksS-css {
    
26. background-color: rgba(255, 255, 255, 0.5)!important;
    
27. border-radius: 10px !important;
    
28. }
    
29. /*夜间模式*/
    
30. .hope-ui-dark .hope-c-PJLV-idaeksS-css {
    
31. background-color:rgb(0 0 0 / 50%)!important;
    
32. border-radius: 10px !important;
    
33. }
    
34. /*顶栏*/
    
35. .hope-c-PJLV-ikaMhsQ-css {
    
36. background: rgba(255, 255, 255, 0) !important;
    
37. }
    
38. 
    
39. 
    
40. /* 吸附到页面顶部 */
    
41. /*顶部*/
    
42. .hope-c-PJLV-icWrYmg-css {
    
43. background: rgba(255, 255, 255, 0) !important;
    
44. }
    
45. /*导航条*/
    
46. .hope-c-PJLV-icKsjdm-css::after {
    
47. background: rgba(255, 255, 255, 0) !important;
    
48. }
    
49. /*白天模式*/
    
50. .hope-ui-light .hope-c-PJLV-icKsjdm-css {
    
51. background-color: rgba(255, 255, 255, 0.5)!important;
    
52. border-radius: 10px !important;
    
53. }
    
54. /*夜间模式*/
    
55. .hope-ui-dark .hope-c-PJLV-icKsjdm-css {
    
56. background-color:rgb(0 0 0 / 50%)!important;
    
57. border-radius: 10px !important;
    
58. }
    
59. 
    
60. /*仅吸附导航栏*/
    
61. /*导航条*/
    
62. .hope-c-PJLV-ifdXShc-css::after {
    
63. background: rgba(255, 255, 255, 0) !important;
    
64. }
    
65. /*白天模式*/
    
66. .hope-ui-light .hope-c-hrsMRY {
    
67. background-color: rgba(255, 255, 255, 0.5)!important;
    
68. border-radius: 10px !important;
    
69. }
    
70. /*夜间模式*/
    
71. .hope-ui-dark .hope-c-hrsMRY {
    
72. background-color:rgb(0 0 0 / 50%)!important;
    
73. border-radius: 10px !important;
    
74. }
    
75. 
    
76. /*白天*/
    
77. .hope-ui-light{
    
78. background-image:url(https://images2.alphacoders.com/743/743487.jpg) !important;
    
79. background-attachment: fixed;
    
80. background-position: 100%;
    
81. background-size: cover;
    
82. background-color: rgba(255, 255, 255, 0.1) !important;
    
83. }
    
84. /*黑夜*/
    
85. .hope-ui-dark{
    
86. background-image:url(https://images2.alphacoders.com/743/743487.jpg) !important;
    
87. background-attachment: fixed;
    
88. background-position: 100%;
    
89. background-size: cover;
    
90. background-color: rgba(255, 255, 255, 0) !important;
    
91. border-top: #768ba2 !important;
    
92. }
    
93. /*列表*/
    
94. .hope-c-PJLV-igScBhH-css {
    
95. background-color:#ffffff70 !important;
    
96. box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.09) !important;
    
97. border-radius: 0.5rem !important;
    
98. padding: 0.75rem !important;
    
99. backdrop-filter: blur(8px)!important;
    
100. }
     
101. .hope-c-PJLV-iigjoxS-css {
     
102. background-color:#ffffff33 !important;
     
103. box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.09) !important;
     
104. border-radius: 0.5rem !important;
     
105. padding: 0.75rem !important;
     
106. backdrop-filter: blur(8px)!important;
     
107. }
     
108. .hope-c-kvTTWD-hYRNAb-variant-filled {
     
109. background-color:#ffffff00 !important;
     
110. }
     
111. .hope-c-PJLV-ijgzmFG-css {
     
112. background-color:#ffffff70 !important;
     
113. }
     
114. .hope-c-hOYTCS {
     
115. background-color:#66ccff88 !important;
     
116. }
     
117. .aplayer-lrc {
     
118. background-color:#ffffff70 !important;
     
119. }
     
120. .aplayer {
     
121. background-color:#ffffff70 !important;
     
122. }
     
123. </style>

复制代码

结果效果是这样的：

ljwwz

这个页面试下先

雨夜有点冷

回帖是一种美德

freeqiu

瞅瞅美化 ALIST 页面的代码

shikuang21

感谢分享棒棒哒支持

sdwg518

好东西，谢谢楼主的无私奉献

skyqingmu

回复看看            

heklfy

美化 ALIST 页面的代码

baiqianlover

这是一只猫吗？

hwlon

谢谢分享，页面代码

510581934

插眼！谢谢！

gky008

看看啥样呢
多谢

wangaigui

怎么梅花啊？没看到

kkwangchaoyi

这个页面试下先，谢谢分享

m2wyz

一段美化 ALIST 页面的代码