Like 1
Fork 0

Last active 1 year ago

设置了部分半透明，不过被注释了，请自行打开

style.css Raw
1/* #card-newest-comments img {border-radius: 10px; /* 设置最新评论圆角半径为10px，可以根据需要调整} */
2
3/* 说说轮播 */
4#bber-talk {
5 background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
6 rgba(255, 255, 255, .8),
7 rgba(255, 255, 255, .8),
8 rgba(255, 255, 255, .7));
9 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
10 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
11}
12
13/* 说说轮播 */
14[data-theme=dark] #bber-talk {
15 background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
16 rgba(35, 37, 58, .8),
17 rgba(35, 37, 58, .8),
18 rgba(24, 40, 72, .7));
19 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
20 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
21}
22
23/* 侧边栏个人信息卡片动态渐变色 */
24#aside-content>.card-widget.card-info {
25 position: relative;
26 z-index: 1; /* 确保原内容在上层显示 */
27 background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
28 rgba(255, 255, 255, .8),
29 rgba(255, 255, 255, .8),
30 rgba(255, 255, 255, .7));
31 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
32 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
33}
34
35#aside-content > .card-widget.card-info::before {
36 content: "";
37 position: absolute;
38 top: 0;
39 left: 0;
40 width: 100%;
41 height: 100%;
42 background: linear-gradient(to bottom,
43 rgba(255, 255, 255, 0.0),
44 rgba(255, 255, 255, 0.3),
45 rgba(255, 255, 255, 0.6),
46 rgba(255, 255, 255, 0.7)),
47 url('/config/img/dog.jpg'); /* 鼠标悬停时显示的背景图片 */
48 background-size: cover;
49 background-repeat: no-repeat;
50 opacity: 0.5;
51 transition: opacity 0.8s; /* 过渡效果持续时间 */
52 z-index: -1;
53}
54
55[data-theme=dark] #aside-content > .card-widget.card-info::before {
56 background: linear-gradient(to bottom,
57 rgba(24, 40, 72, .1),
58 rgba(35, 37, 58, .3),
59 rgba(35, 37, 58, .6),
60 rgba(24, 40, 72, .7)),
61 url('/config/img/dog.jpg'); /* 鼠标悬停时显示的背景图片 */
62 background-size: cover;
63 background-repeat: no-repeat;
64}
65
66#aside-content > .card-widget.card-info:hover::before {
67 opacity: 1;
68}
69/* 卡片动态效果，好好看哈哈 */
70#aside-content div.card-widget.card-info .avatar-img {
71 transition: opacity 0.3s ease; /* 添加渐变效果 */
72}
73
74#aside-content div.card-widget.card-info .avatar-img:hover {
75 opacity: 0; /* 鼠标移上去时完全透明 */
76}
77
78#card-info-btn:hover, #card-info-btn:hover .icon, #card-info-btn:hover span {
79 transform: scale(1.1); /* 鼠标悬停时放大到110% */
80}
81
82[data-theme=dark] #aside-content>.card-widget.card-info {
83 background: linear-gradient(-45deg, rgba(24, 40, 72, .6),
84 rgba(35, 37, 58, .5),
85 rgba(35, 37, 58, .5),
86 rgba(24, 40, 72, .6));
87 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
88 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
89}
90
91/* 侧边栏公告栏卡片渐变色 */
92#aside-content>.card-widget.card-announcement {
93 background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
94 rgba(255, 255, 255, .8),
95 rgba(255, 255, 255, .8),
96 rgba(255, 255, 255, .7));
97 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
98 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
99}
100
101[data-theme=dark] #aside-content>.card-widget.card-announcement {
102 background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
103 rgba(35, 37, 58, .8),
104 rgba(35, 37, 58, .8),
105 rgba(24, 40, 72, .7));
106 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
107 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
108}
109
110/* 侧边栏目录最新文章卡片渐变色 */
111#aside-content>.sticky_layout>.card-widget {
112 background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
113 rgba(255, 255, 255, .8),
114 rgba(255, 255, 255, .8),
115 rgba(255, 255, 255, .7));
116 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
117 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
118}
119
120[data-theme=dark] #aside-content>.sticky_layout>.card-widget {
121 background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
122 rgba(35, 37, 58, .8),
123 rgba(35, 37, 58, .8),
124 rgba(24, 40, 72, .7));
125 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
126 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
127}
128
129/* 侧边栏欢迎卡片渐变色 */
130#aside-content>.card-widget.welcomeBoxClass {
131 background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
132 rgba(255, 255, 255, .8),
133 rgba(255, 255, 255, .8),
134 rgba(255, 255, 255, .7));
135 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
136 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
137}
138
139[data-theme=dark] #aside-content>.card-widget.welcomeBoxClass {
140 background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
141 rgba(35, 37, 58, .8),
142 rgba(35, 37, 58, .8),
143 rgba(24, 40, 72, .7));
144 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
145 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
146}
147
148/* 公告卡片渐变色 */
149#recent-posts>#noticeList {
150 background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
151 rgba(255, 255, 255, .8),
152 rgba(255, 255, 255, .8),
153 rgba(255, 255, 255, .7));
154 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
155 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
156}
157
158[data-theme=dark] #recent-posts>#noticeList {
159 background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
160 rgba(35, 37, 58, .8),
161 rgba(35, 37, 58, .8),
162 rgba(24, 40, 72, .7));
163 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
164 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
165}
166
167/* 个人信息Follow me按钮 */
168#aside-content>.card-widget.card-info>#card-info-btn {
169 background-color: #3eb8be;
170 border-radius: 10px;
171}
172
173/*文章页面*/
174.layout>#post {
175 background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
176 rgba(255, 255, 255, .8),
177 rgba(255, 255, 255, .8),
178 rgba(255, 255, 255, .7));
179 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
180 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
181}
182
183[data-theme=dark] .layout>#post {
184 background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
185 rgba(35, 37, 58, .8),
186 rgba(35, 37, 58, .8),
187 rgba(24, 40, 72, .7));
188 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
189 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
190}
191
192/*主页文章预览页面*/
193#recent-posts>.recent-post-item {
194 background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
195 rgba(255, 255, 255, .8),
196 rgba(255, 255, 255, .8),
197 rgba(255, 255, 255, .7));
198 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
199 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
200}
201
202[data-theme=dark] #recent-posts>.recent-post-item {
203 background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
204 rgba(35, 37, 58, .8),
205 rgba(35, 37, 58, .8),
206 rgba(24, 40, 72, .7));
207 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
208 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
209}
210
211/*分类页面*/
212.layout>#page {
213 background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
214 rgba(255, 255, 255, .8),
215 rgba(255, 255, 255, .8),
216 rgba(255, 255, 255, .7));
217 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
218 /* -webkit-backdrop-filter: blur(10px); 兼容性前缀，适用于一些旧版本的浏览器 */
219}
220
221[data-theme=dark] .layout>#page {
222 background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
223 rgba(35, 37, 58, .8),
224 rgba(35, 37, 58, .8),
225 rgba(24, 40, 72, .7));
226 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
227 /* -webkit-backdrop-filter: blur(10px); 兼容性前缀，适用于一些旧版本的浏览器 */
228}
229
230
231/*时间轴页面*/
232.layout>#archive {
233 background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
234 rgba(255, 255, 255, .8),
235 rgba(255, 255, 255, .8),
236 rgba(255, 255, 255, .7));
237 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
238 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
239}
240
241[data-theme=dark] .layout>#archive {
242 background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
243 rgba(35, 37, 58, .8),
244 rgba(35, 37, 58, .8),
245 rgba(24, 40, 72, .7));
246 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
247 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
248}
249
250/*分类点进去的页面*/
251.layout>#category {
252 background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
253 rgba(255, 255, 255, .8),
254 rgba(255, 255, 255, .8),
255 rgba(255, 255, 255, .7));
256 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
257 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
258}
259
260[data-theme=dark] .layout>#category {
261 background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
262 rgba(35, 37, 58, .8),
263 rgba(35, 37, 58, .8),
264 rgba(24, 40, 72, .7));
265 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
266 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
267}
268
269/*标签点进去的页面*/
270.layout>#tag {
271 background: linear-gradient(-45deg, rgba(255, 255, 255, .7),
272 rgba(255, 255, 255, .8),
273 rgba(255, 255, 255, .8),
274 rgba(255, 255, 255, .7));
275 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
276 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
277}
278
279[data-theme=dark] .layout>#tag {
280 background: linear-gradient(-45deg, rgba(24, 40, 72, .7),
281 rgba(35, 37, 58, .8),
282 rgba(35, 37, 58, .8),
283 rgba(24, 40, 72, .7));
284 /* backdrop-filter: blur(10px); 应用高斯模糊效果，可以根据需要调整模糊程度 */
285 /* -webkit-backdrop-filter: blur(10px);兼容性前缀，适用于一些旧版本的浏览器 */
286}
287
288.layout.hide-aside {
289 max-width: 1200px;
290}
291
292/* 设置黑夜的时候，社交按钮为白色 */
293[data-theme=dark] .social-icon i {
294 color: rgba(188, 188, 188) !important; /* 设置为白色 */
295}

Powered by Opengist ⋅ Load: 77ms⋅

English
⋅ 个人主页 ⋅ 站长博客