butterfly

1
/* @font-face {
2
  font-family: Candyhome;
3
  src: url(https://npm.elemecdn.com/[email protected]/fonts/Candyhome.ttf);
4
  font-display: swap;
5
  font-weight: lighter;
6
} */
7
@font-face {
8
  font-family: ZhuZiAYuanJWD;
9
  src: url(https://npm.elemecdn.com/[email protected]/fonts/ZhuZiAWan.woff2);
10
  font-display: swap;
11
  font-weight: lighter;
12
}
13

14
div#menus {
15
  font-family: "ZhuZiAYuanJWD";
16
}
17
h1#site-title {
18
  font-family: ZhuZiAYuanJWD;
19
  font-size: 3em !important;
20
}
21
a.article-title,
22
a.blog-slider__title,
23
a.categoryBar-list-link,
24
h1.post-title {
25
  font-family: ZhuZiAYuanJWD;
26
}
27

28
.iconfont {
29
  font-family: "iconfont" !important;
30
  font-size: 3em;
31
  /* 可以定义图标大小 */
32
  font-style: normal;
33
  -webkit-font-smoothing: antialiased;
34
  -moz-osx-font-smoothing: grayscale;
35
}
36

37
/* 时间轴生肖icon */
38
svg.icon {
39
  /* 这里定义svg.icon，避免和Butterfly自带的note标签冲突 */
40
  width: 1em;
41
  height: 1em;
42
  /* width和height定义图标的默认宽度和高度*/
43
  vertical-align: -0.15em;
44
  fill: currentColor;
45
  overflow: hidden;
46
}
47

48
.icon-zhongbiao::before {
49
  color: #f7c768;
50
}
51

52
/* bilibli番剧插件 */
53
#article-container .bangumi-tab.bangumi-active {
54
  background: var(--anzhiyu-theme);
55
  color: var(--anzhiyu-ahoverbg);
56
  border-radius: 10px;
57
}
58
a.bangumi-tab:hover {
59
  text-decoration: none !important;
60
}
61
.bangumi-button:hover {
62
  background: var(--anzhiyu-theme) !important;
63
  border-radius: 10px !important;
64
  color: var(--anzhiyu-ahoverbg) !important;
65
}
66
a.bangumi-button.bangumi-nextpage:hover {
67
  text-decoration: none !important;
68
}
69
.bangumi-button {
70
  padding: 5px 10px !important;
71
}
72

73
a.bangumi-tab {
74
  padding: 5px 10px !important;
75
}
76
svg.icon.faa-tada {
77
  font-size: 1.1em;
78
}
79
.bangumi-info-item {
80
  border-right: 1px solid #f2b94b;
81
}
82
.bangumi-info-item span {
83
  color: #f2b94b;
84
}
85
.bangumi-info-item em {
86
  color: #f2b94b;
87
}
88

89
/* 解决artitalk的图标问题 */
90
#uploadSource > svg {
91
  width: 1.19em;
92
  height: 1.5em;
93
}
94

95
/*top-img黑色透明玻璃效果移除，不建议加，除非你执着于完全一图流或者背景图对比色明显 */
96
#page-header:not(.not-top-img):before {
97
  background-color: transparent !important;
98
}
99

100
/* 首页文章卡片 */
101
#recent-posts > .recent-post-item {
102
  background: rgba(255, 255, 255, 0.9);
103
}
104

105
/* 首页侧栏卡片 */
106
#aside-content .card-widget {
107
  background: rgba(255, 255, 255, 0.9);
108
}
109

110
/* 文章页面正文背景 */
111
div#post {
112
  background: rgba(255, 255, 255, 0.9);
113
}
114

115
/* 分页页面 */
116
div#page {
117
  background: rgba(255, 255, 255, 0.9);
118
}
119

120
/* 归档页面 */
121
div#archive {
122
  background: rgba(255, 255, 255, 0.9);
123
}
124

125
/* 标签页面 */
126
div#tag {
127
  background: rgba(255, 255, 255, 0.9);
128
}
129

130
/* 分类页面 */
131
div#category {
132
  background: rgba(255, 255, 255, 0.9);
133
}
134

135
/*夜间模式伪类遮罩层透明*/
136
[data-theme="dark"] #recent-posts > .recent-post-item {
137
  background: #121212;
138
}
139

140
[data-theme="dark"] .card-widget {
141
  background: #121212 !important;
142
}
143

144
[data-theme="dark"] div#post {
145
  background: #121212 !important;
146
}
147

148
[data-theme="dark"] div#tag {
149
  background: #121212 !important;
150
}
151

152
[data-theme="dark"] div#archive {
153
  background: #121212 !important;
154
}
155

156
[data-theme="dark"] div#page {
157
  background: #121212 !important;
158
}
159

160
[data-theme="dark"] div#category {
161
  background: #121212 !important;
162
}
163

164
[data-theme="dark"] div#category {
165
  background: transparent !important;
166
}
167
/* 页脚透明 */
168
#footer {
169
  background: transparent !important;
170
}
171

172
/* 头图透明 */
173
#page-header {
174
  background: transparent !important;
175
}
176

177
#rightside > div > button {
178
  border-radius: 5px;
179
}
180

181
/* 滚动条 */
182

183
::-webkit-scrollbar {
184
  width: 10px;
185
  height: 10px;
186
}
187

188
::-webkit-scrollbar-thumb {
189
  background-color: #3b70fc;
190
  border-radius: 2em;
191
}
192

193
::-webkit-scrollbar-corner {
194
  background-color: transparent;
195
}
196

197
::-moz-selection {
198
  color: #fff;
199
  background-color: #3b70fc;
200
}
201

202
/* 音乐播放器 */
203

204
/* .aplayer .aplayer-lrc {
205
  display: none !important;
206
} */
207

208
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
209
  left: -66px !important;
210
  transition: all 0.3s;
211
  /* 默认情况下缩进左侧66px，只留一点箭头部分 */
212
}
213

214
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
215
  left: 0 !important;
216
  transition: all 0.3s;
217
  /* 鼠标悬停是左侧缩进归零，完全显示按钮 */
218
}
219

220
.aplayer.aplayer-fixed {
221
  z-index: 999999 !important;
222
}
223

224
/* 评论框  */
225
.vwrap {
226
  box-shadow: 2px 2px 5px #bbb;
227
  background: rgba(255, 255, 255, 0.3);
228
  border-radius: 8px;
229
  padding: 30px;
230
  margin: 30px 0px 30px 0px;
231
}
232

233
/* 设置评论框 */
234

235
.vcard {
236
  box-shadow: 2px 2px 5px #bbb;
237
  background: rgba(255, 255, 255, 0.3);
238
  border-radius: 8px;
239
  padding: 30px;
240
  margin: 30px 0px 0px 0px;
241
}
242

243
/* md网站下划线 */
244
#article-container a:hover {
245
  text-decoration: none !important;
246
}
247

248
#article-container #hpp_talk p img {
249
  display: inline;
250
}
251

252
/* 404页面 */
253
#error-wrap {
254
  position: absolute;
255
  top: 40%;
256
  right: 0;
257
  left: 0;
258
  margin: 0 auto;
259
  padding: 0 1rem;
260
  max-width: 1000px;
261
  transform: translate(0, -50%);
262
}
263

264
#error-wrap .error-content {
265
  display: flex;
266
  flex-direction: row;
267
  justify-content: center;
268
  align-items: center;
269
  margin: 0 1rem;
270
  height: 18rem;
271
  border-radius: 8px;
272
  background: var(--card-bg);
273
  box-shadow: var(--card-box-shadow);
274
  transition: all 0.3s;
275
}
276

277
#error-wrap .error-content .error-img {
278
  box-flex: 1;
279
  flex: 1;
280
  height: 100%;
281
  border-top-left-radius: 8px;
282
  border-bottom-left-radius: 8px;
283
  background-color: #3b70fc;
284
  background-position: center;
285
  background-size: cover;
286
}
287

288
#error-wrap .error-content .error-info {
289
  box-flex: 1;
290
  flex: 1;
291
  padding: 0.5rem;
292
  text-align: center;
293
  font-size: 14px;
294
  font-family: Titillium Web, "PingFang SC", "Hiragino Sans GB", "Microsoft JhengHei", "Microsoft YaHei", sans-serif;
295
}
296
#error-wrap .error-content .error-info .error_title {
297
  margin-top: -4rem;
298
  font-size: 9em;
299
}
300
#error-wrap .error-content .error-info .error_subtitle {
301
  margin-top: -3.5rem;
302
  word-break: break-word;
303
  font-size: 1.6em;
304
}
305
#error-wrap .error-content .error-info a {
306
  display: inline-block;
307
  margin-top: 0.5rem;
308
  padding: 0.3rem 1.5rem;
309
  background: var(--btn-bg);
310
  color: var(--btn-color);
311
}
312

313
#body-wrap.error .aside-list {
314
  display: flex;
315
  flex-direction: row;
316
  flex-wrap: nowrap;
317
  bottom: 0px;
318
  position: absolute;
319
  padding: 1rem;
320
  width: 100%;
321
  overflow: scroll;
322
}
323

324
#body-wrap.error .aside-list .aside-list-group {
325
  display: flex;
326
  flex-direction: row;
327
  flex-wrap: nowrap;
328
  max-width: 1200px;
329
  margin: 0 auto;
330
}
331

332
#body-wrap.error .aside-list .aside-list-item {
333
  padding: 0.5rem;
334
}
335

336
#body-wrap.error .aside-list .aside-list-item img {
337
  width: 100%;
338
  object-fit: cover;
339
  border-radius: 12px;
340
}
341

342
#body-wrap.error .aside-list .aside-list-item .thumbnail {
343
  overflow: hidden;
344
  width: 230px;
345
  height: 143px;
346
  background: var(--anzhiyu-card-bg);
347
  display: flex;
348
}
349

350
#body-wrap.error .aside-list .aside-list-item .content .title {
351
  -webkit-line-clamp: 2;
352
  overflow: hidden;
353
  display: -webkit-box;
354
  -webkit-box-orient: vertical;
355
  line-height: 1.5;
356
  justify-content: center;
357
  align-items: flex-end;
358
  align-content: center;
359
  padding-top: 0.5rem;
360
  color: white;
361
}
362

363
#body-wrap.error .aside-list .aside-list-item .content time {
364
  display: none;
365
}
366

367
/* 代码框主题 */
368
#article-container figure.highlight {
369
  border-radius: 10px;
370
}