感觉Butterfly的外挂标签有点不太符合自己的审美，强迫症犯了，按照自己的感觉改改
Table栏调整（Heo）
- 在自建的CSS文件
[blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
| #article-container .tabs {
border: 3px solid var(--icat-secondbg) !important;
}
#article-container .tabs {
border-radius: 12px;
overflow: hidden;
box-shadow: var(--icat-shadow-border);
padding: 8px;
background: var(--icat-card-bg);
border: var(--style-border);
margin: 1rem 0px !important;
}
#article-container .tabs .nav-tabs {
background: var(--icat-background);
border: 2px solid var(--icat-secondbg) !important;
border-radius: 6px;
padding: 12px 16px;
display: flex;
justify-content: center;
}
#article-container .tabs > .nav-tabs > .tab button {
background: var(--icat-background);
border-radius: 6px;
border: 1px solid var(--icat-secondbg) !important;
}
#article-container .tabs > .nav-tabs > .tab {
padding: 3px 3px;
}
#article-container .tabs > .nav-tabs > .tab.active button {
background: var(--icat-tabs-background);
color: var(--tab-button-active-bg);
font-weight: 700;
}
|
hr分割栏美化
- 修改
[blogRoot]/themes/butterfly/source/css/_global/index.styl 里第九十九 至 一百二十一行的内容
（ + 号直接删除 即是正常缩进）
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
| ···
hr
position: relative
- margin: 40px auto
- border: 2px dashed var(--hr-border)
+ margin: 26px auto
+ border: 1px dashed var(--hr-border)
if hexo-config('hr_icon.enable')
width: calc(100% - 4px)
&:hover
&:before
left: calc(95% - 20px)
- &:before
- position: absolute
- top: $hr-icon-top
- left: 5%
- z-index: 1
- color: var(--hr-before-color)
- content: $hr-icon
- font-size: 20px
- line-height: 1
- transition: all 1s ease-in-out
- @extend .fontawesomeIcon
···
|
折叠栏调整
- 在自建的CSS文件
[blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| .toggle > .toggle-button::after {
position: absolute;
content: "+";
right: 20px;
}
.toggle[open] > .toggle-button::after {
position: absolute;
content: "-";
right: 20px;
}
.toggle {
border-radius: 12px;
margin-top: 20px;
border: var(--style-border) !important;
}
.toggle > .toggle-button {
position: relative;
padding: 10px 18px;
background-color: var(--icat-background) !important;
color:var(--icat-fontcolor);
border-radius: 12px;
font-weight: 900;
}
.toggle[open] > .toggle-button {
border-bottom: var(--style-border);
}
|
引用块美化（Heo）
- 在自建的CSS文件
[blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
6
7
8
9
10
| blockquote {
border-left: 2px solid #49b1f5;
background-color: var(--icat-secondbg);
color: var(--icat-secondtext);
border-radius: 8px;
margin: 1rem 0;
padding: 0.9rem 1.2rem;
}
|
note块调整
- 在自建的CSS文件
[blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
6
7
8
| .note {
border-radius: 8px;
}
.note.flat {
border-left: 3px solid #eee;
}
|
代码块调整
- 在自建的CSS文件
[blogRoot]/source/css/icat.css 里新增以下内容
1
2
3
4
5
| #article-container figure.highlight {
border-radius: 8px;
}
|
