Last active 1728749223

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

LiuShen's Avatar LiuShen revised this gist 1728749222. Go to revision

2 files changed, 167 insertions

content.html(file created)

@@ -0,0 +1,35 @@
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(file created)

@@ -0,0 +1,132 @@
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 + /* 背景 */
17 + body {
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>
Newer Older