Naposledy aktivní 1728749223

Alist全局和页脚简单美化,适配暗夜模式

Revize cd47d7c6cd7ffbd03a1d1f93015c664af8d59e68

content.html Raw
1<div class="copyright" align="center">
2 <div class="about">
3 <div class="runtime">
4 <span class="run_item">
5 <span class="name">AList</span>
6 <span class="link">UI</span>
7 </span>
8 <span class="run_item">
9 <span class="name">阿里云服务器</span>
10 <span class="link">搭建</span>
11 </span>
12 <span class="run_item">
13 <span class="name">WillowGod</span>
14 <span class="link">版权</span>
15 </span>
16 </div>
17 </div>
18 <div class="state">
19 <p>免责声明:本站为个人网盘,网盘所发布的一切影视、源代码、注册信息及软件等资源仅限用于学习和研究目的</p>
20 </div>
21 <div class="by">
22 <span>Powered By</span>
23 <a href="https://www.qyliu.top" target="_blank">
24 <span>LiuShen</span>
25 <div class="xhx"></div>
26 </a>
27 <span>| ©2023 </span><a href="https://github.com/willow-god" target="_blank">Willow-God</a>
28 </div>
29 <div class="by">
30 <span>ICP备:</span><a href="https://beian.miit.gov.cn/" target="_blank">陕ICP备2024028531号-1</a><span> | 公安网备:</span><a href="https://beian.mps.gov.cn/#/query/webSearch?code=61011602000637" target="_blank">陕公网安备61011602000637号</a>
31 </div>
32 <div class="by">
33 <a href="/@login">登录页面</a><span>| 由Alist驱动 | </span><a href="/@manage">管理页面</a>
34 </div>
35</div>
head.css Raw
1/# 自定义头部 #/
2<link rel="stylesheet" href="https://cdn.staticfile.net/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaigbscreen.min.css">
3<style>
4.hope-ui-light {
5 --my-color: rgba(255,255,255,0.4);
6 --color-main-custom: #ffffff;
7}
8.hope-ui-dark {
9 --my-color: rgba(0,0,0,0.4);
10 --color-main-custom: #000000;
11}
12
13* {
14 font-family: LXGW WenKai Screen;
15}
16/* 背景 */
17body {
18 background-image: linear-gradient(to bottom, var(--my-color), var(--my-color)), url(https://api.qjqq.cn/api/Img) !important;
19 background-repeat: no-repeat !important;
20 background-size: cover !important;
21 background-attachment: fixed !important;
22 background-position-x: center !important;
23}
24
25.hope-c-PJLV-igScBhH-css,
26.hope-c-PJLV-ikSuVsl-css {
27 background-color: #ffffff9e !important;
28 backdrop-filter: blur(10px);
29}
30
31.hope-c-PJLV-idaeksS-css,
32.hope-c-PJLV-ikaMhsQ-css {
33 background: none !important;
34}
35
36.footer {
37 display: none !important;
38}
39
40 ::selection {
41 background: #fbc2eb;
42 color: #fff;
43 }
44
45 * {
46 letter-spacing: 2px;
47 }
48
49 .hope-ui-dark .markdown-body a {
50 color: #fff !important;
51 }
52
53 .copyright a,
54 .copyright .by {
55 text-decoration: none;
56 }
57
58 .copyright .by {
59 display: flex;
60 align-items: center;
61 justify-content: center;
62 margin-top: 20px;
63 }
64
65 .copyright a {
66 display: flex;
67 justify-content: center;
68 margin: 0 10px;
69 position: relative;
70 transition: .5s;
71 }
72
73 .copyright .xhx {
74 background: pink;
75 height: 3px;
76 border-radius: 10px;
77 width: 0;
78 position: absolute;
79 bottom: -3px;
80 transition: .5s;
81 }
82
83 .copyright a:hover {
84 color: pink;
85 }
86
87 .copyright a:hover .xhx {
88 width: 100%;
89 }
90
91 .copyright .run_item {
92 display: flex;
93 align-items: center;
94 margin: 10px;
95 }
96
97 .copyright .link {
98 padding: 4px;
99 background: rgba(255, 133, 153);
100 border-radius: 0 8px 8px 0;
101 }
102
103 .copyright .name {
104 padding: 4px;
105 background: var(--color-main-custom);
106 border-radius: 8px 0 0 8px;
107 }
108
109 .copyright {
110 padding: 50px;
111 }
112
113 .runtime {
114 width: 100%;
115 padding: 10px;
116 box-sizing: border-box;
117 display: flex;
118 justify-content: center;
119 align-items: center;
120 }
121
122 .about,
123 .state {
124 width: min(99%, 980px);
125 text-align: center;
126 padding-inline: 2%;
127 }
128
129 .state {
130 margin-top: 20px;
131 }
132</style>