自用AList样式分享

引用字体CDN

<link rel="stylesheet" href="https://npm.elemecdn.com/lxgw-wenkai-webfont@1.1.0/lxgwwenkai-regular.css" />

主界面美化

可以保存为单独的CSS文件，也可以用<style>标签包裹

/* 全局字体 */
* {
    font-family: 'LXGW Wenkai Screen', 'LXGW Wenkai', sans-serif;
    font-weight: bold
}
/* 浅色模式背景 */
 .hope-ui-light {
    background-image: url("https://rainview.net/wp-content/uploads/2025/02/20250218111838954634.webp") !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position-x: center;
} 
/* 深色模式背景 */
 .hope-ui-dark {
    background-image: url("https://rainview.net/wp-content/uploads/2025/02/20250218112849417237.webp") !important;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position-x: center;
} 
/* Alist网页顶部背景 */
div.header.hope-center.hope-c-jKOUQW.hope-c-PJLV.hope-c-PJLV-ikaMhsQ-css {
    background-color: #FFF0;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
/* 导航条样式 */
.body>.nav {
    background-color: #FFF0;
}
/* 修改“吸附到页面顶部”模式下导航栏的浅色背景 */
.hope-c-PJLV-icKsjdm-css::after {
    background-color: #fff0 !important;
}
/* 修改“吸附到页面顶部”模式下导航栏的深色背景 */
.hope-c-PJLV-icKsjdm-css {
    background-color: #fff0 !important;
}
/* 修改“仅吸附导航栏”模式下导航栏的浅色背景 */
.hope-c-PJLV-ifdXShc-css::after {
    background-color: #fff0 !important;
}
/* 修改“仅吸附导航栏”模式下导航栏的深色背景 */
.hope-c-PJLV-ifdXShc-css {
    background-color: #fff0 !important;
}
/* 文件列表背景（深色） */
.hope-c-PJLV-iigjoxS-css {
    background-color: #FFF0 !important;
    backdrop-filter: blur(1px);
    -webkit-backdrop-filter: blur(1px);
}
/* 文件列表背景（浅色） */
.hope-c-PJLV-igScBhH-css {
    background-color: #FFFFFF40 !important;
    /* backdrop-filter: blur(10px); */
    box-shadow: var(--hope-shadows-lg) !important;
}
/* 浅色模式下侧边栏的背景 */
.hope-ui-light .hope-c-PJLV-ieGWMbI-css {
    background-color: #fff0 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* 深色模式下侧边栏的背景 */
.hope-ui-dark .hope-c-PJLV-ieGWMbI-css {
    background-color: #fff0 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
/* 更多选项菜单背景 */
.hope-c-PJLV-ijgzmFG-css {
    background-color: #FFF0 !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
    border-radius: var(--hope-radii-xl);
    box-shadow: var(--hope-shadows-lg);
}
/* 视图列表背景 */
.hope-c-zbPwS {
    background-color: #FFFFFF20 !important;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
}
/* 视图列表选中状态 */
.hope-c-kRwRnM-gSazcJ-colorScheme-neutral[data-active] {
    background-color: #FFFFFF20 !important;
}
/* 右键菜单深色模式 */
.solid-contextmenu__theme--dark {
    background-color: #FFF0 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 60px -16px black;
}
/* 右键菜单浅色模式*/
.solid-contextmenu {
    background-color: #FFFFFF40 !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 60px -16px black;
}
/* 隐藏本地设置菜单中Aria2 RPC链接和密钥选项 */
div.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ikjnSaO-css > div.hope-form-control.hope-c-dXIoOt.hope-c-PJLV.hope-c-PJLV-ijhzIfm-css[role="group"]:first-child,div.hope-stack.hope-c-dhzjXW.hope-c-PJLV.hope-c-PJLV-ikjnSaO-css > div.hope-form-control.hope-c-dXIoOt.hope-c-PJLV.hope-c-PJLV-ijhzIfm-css[role="group"]:nth-child(2) {
    display: none;
}
/* 修改AList登录背景样式 */
.hope-c-PJLV-ihWgyFw-css,.hope-c-PJLV-ibiABng-css {
background-color: #fff0 !important;
backdrop-filter:blur(10px);
-webkit-backdrop-filter:blur(10px);
}
g[opacity="1"] {
display: none;
}
/* 修改AList弹窗样式 */
div.hope-notification.hope-c-cIFneQ.hope-c-PJLV.hope-c-PJLV-idwKBiq-css[role="alert"] {
    background-color: #ffffff20;
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

添加页脚鱼

<style>
/* 页脚鱼的样式 */
.fish-container {
	margin: 0;
	padding: 0;
	background-color: transparent;
	width: 100%;
	height: 200px;
	z-index: -1;
	position: fixed;
	bottom: 0;
	left: 0;
	opacity: .5;
}
<style>
<script src="https://rainview.net/js/jq.js"></script>
<script src="https://rainview.net/js/fish.js"></script>
<script src="https://rainview.net/js/lib.js"></script>
<div id="jsi-flying-fish-container" class="fish-container"></div>

添加蜘蛛网效果

<script src="https://rainview.net/js/mouse-line.js"></script>

效果图