Alist美化代码

Revision cd47d7c6cd7ffbd03a1d1f93015c664af8d59e68

content.html · 1.5 KiB · 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 · 2.9 KiB · CSS Raw

/# 自定义头部 #/ <link rel="stylesheet" href="https://cdn.staticfile.net/lxgw-wenkai-screen-webfont/1.7.0/lxgwwenkaigbscreen.min.css"> <style> .hope-ui-light { --my-color: rgba(255,255,255,0.4); --color-main-custom: #ffffff; } .hope-ui-dark { --my-color: rgba(0,0,0,0.4); --color-main-custom: #000000; } * { font-family: LXGW WenKai Screen; } /* 背景 */ body { background-image: linear-gradient(to bottom, var(--my-color), var(--my-color)), url(https://api.qjqq.cn/api/Img) !important; background-repeat: no-repeat !important; background-size: cover !important; background-attachment: fixed !important; background-position-x: center !important; } .hope-c-PJLV-igScBhH-css, .hope-c-PJLV-ikSuVsl-css { background-color: #ffffff9e !important; backdrop-filter: blur(10px); } .hope-c-PJLV-idaeksS-css, .hope-c-PJLV-ikaMhsQ-css { background: none !important; } .footer { display: none !important; } ::selection { background: #fbc2eb; color: #fff; } * { letter-spacing: 2px; } .hope-ui-dark .markdown-body a { color: #fff !important; } .copyright a, .copyright .by { text-decoration: none; } .copyright .by { display: flex; align-items: center; justify-content: center; margin-top: 20px; } .copyright a { display: flex; justify-content: center; margin: 0 10px; position: relative; transition: .5s; } .copyright .xhx { background: pink; height: 3px; border-radius: 10px; width: 0; position: absolute; bottom: -3px; transition: .5s; } .copyright a:hover { color: pink; } .copyright a:hover .xhx { width: 100%; } .copyright .run_item { display: flex; align-items: center; margin: 10px; } .copyright .link { padding: 4px; background: rgba(255, 133, 153); border-radius: 0 8px 8px 0; } .copyright .name { padding: 4px; background: var(--color-main-custom); border-radius: 8px 0 0 8px; } .copyright { padding: 50px; } .runtime { width: 100%; padding: 10px; box-sizing: border-box; display: flex; justify-content: center; align-items: center; } .about, .state { width: min(99%, 980px); text-align: center; padding-inline: 2%; } .state { margin-top: 20px; } </style>

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>