Like 0
Fork 0

Last active 7 months ago

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

alist css footer html javascript

LiuShen's Avatar LiuShen revised this gist 7 months ago. Go to revision

1 file changed, 1 insertion, 1 deletion

head.html

@@ -17,7 +17,7 @@
17 17 }
18 18 /* 背景 */
19 19 body {
20 - background-image: linear-gradient(to bottom, var(--my-color), var(--my-color)), url("https://bing.liushen.fun/daily.webp") !important;
20 + background-image: linear-gradient(to bottom, var(--my-color), var(--my-color)), url("https://api.kdcc.cn/") !important;
21 21 background-repeat: no-repeat !important;
22 22 background-size: cover !important;
23 23 background-attachment: fixed !important;

LiuShen's Avatar LiuShen revised this gist 7 months ago. Go to revision

2 files changed, 20 insertions, 11 deletions

content.html

@@ -6,7 +6,7 @@
6 6 <span class="link">UI</span>
7 7 </span>
8 8 <span class="run_item">
9 - <span class="name">阿里云服务器</span>
9 + <span class="name">云驰互联</span>
10 10 <span class="link">搭建</span>
11 11 </span>
12 12 <span class="run_item">
@@ -20,14 +20,14 @@
20 20 </div>
21 21 <div class="by">
22 22 <span>Powered By</span>
23 - <a href="https://www.qyliu.top" target="_blank">
23 + <a href="https://blog.liushen.fun/" target="_blank">
24 24 <span>LiuShen</span>
25 25 <div class="xhx"></div>
26 26 </a>
27 27 <span>| ©2023 </span><a href="https://github.com/willow-god" target="_blank">Willow-God</a>
28 28 </div>
29 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>
30 + <span>ICP备:</span><a href="https://beian.miit.gov.cn/" target="_blank">陕ICP备2024028531号</a><span> | 公安网备:</span><a href="https://beian.mps.gov.cn/#/query/webSearch?code=61011602000637" target="_blank">陕公网安备61011602000637号</a>
31 31 </div>
32 32 <div class="by">
33 33 <a href="/@login">登录页面</a><span>| 由Alist驱动 | </span><a href="/@manage">管理页面</a>

head.css renamed to head.html

@@ -1,21 +1,23 @@
1 - /# 自定义头部 #/
2 - <link rel="stylesheet" href="https://cdn.staticfile.net/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaigbscreen.min.css">
1 + <link rel="preconnect" href="https://fontsapi.zeoseven.com" crossorigin />
2 + <link rel="stylesheet"
3 + href="https://fontsapi.zeoseven.com/7/main/result.css"
4 + onerror="this.href='https://fontsapi-storage.zeoseven.com/7/main/result.css'" />
3 5 <style>
4 6 .hope-ui-light {
5 7 --my-color: rgba(255,255,255,0.4);
6 - --color-main-custom: #ffffff;
8 + --color-main-custom: #ffffff9e;
7 9 }
8 10 .hope-ui-dark {
9 11 --my-color: rgba(0,0,0,0.4);
10 - --color-main-custom: #000000;
12 + --color-main-custom: #2e2e2e70;
11 13 }
12 14
13 15 * {
14 - font-family: LXGW WenKai Screen;
16 + font-family: "Zhuque Fangsong (technical preview)";
15 17 }
16 18 /* 背景 */
17 19 body {
18 - background-image: linear-gradient(to bottom, var(--my-color), var(--my-color)), url(https://api.qjqq.cn/api/Img) !important;
20 + background-image: linear-gradient(to bottom, var(--my-color), var(--my-color)), url("https://bing.liushen.fun/daily.webp") !important;
19 21 background-repeat: no-repeat !important;
20 22 background-size: cover !important;
21 23 background-attachment: fixed !important;
@@ -23,11 +25,16 @@ body {
23 25 }
24 26
25 27 .hope-c-PJLV-igScBhH-css,
26 - .hope-c-PJLV-ikSuVsl-css {
28 + .hope-c-PJLV-ikSuVsl-css,
29 + .hope-c-PJLV-ieGWMbI-css {
27 30 background-color: #ffffff9e !important;
28 31 backdrop-filter: blur(10px);
29 32 }
30 33
34 + .hope-ui-dark .hope-c-PJLV-ieGWMbI-css {
35 + background-color: var(--hope-colors-neutral3) !important;
36 + }
37 +
31 38 .hope-c-PJLV-idaeksS-css,
32 39 .hope-c-PJLV-ikaMhsQ-css {
33 40 background: none !important;
@@ -96,12 +103,14 @@ body {
96 103
97 104 .copyright .link {
98 105 padding: 4px;
99 - background: rgba(255, 133, 153);
106 + background: #479fff96;
107 + backdrop-filter: blur(10px);
100 108 border-radius: 0 8px 8px 0;
101 109 }
102 110
103 111 .copyright .name {
104 112 padding: 4px;
113 + backdrop-filter: blur(10px);
105 114 background: var(--color-main-custom);
106 115 border-radius: 8px 0 0 8px;
107 116 }

LiuShen's Avatar LiuShen revised this gist 8 months ago. Go to revision

No changes

LiuShen's Avatar LiuShen revised this gist 1 year ago. 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

Powered by Opengist ⋅ Load: 42ms⋅

English
⋅ 个人主页 ⋅ 站长博客