twikoo评论块气泡风格美化

AI-摘要
Tianli GPT
AI初始化中...
介绍自己 🙈
生成本文简介 👋
推荐相关文章 📖
前往主页 🏠
前往爱发电购买
twikoo评论块气泡风格美化
RandomEnch本文修改主题为Butterfly
主题,若使用其他主题,请自行确认修改位置。
该方法通过外部引入,无需修改主题源文件。
原文出处
效果预览
修改步骤
新建
[Blogroot]\themes\butterfly\source\css\custom\twikoo_beautify.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
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213/* 自定义twikoo评论输入框高度 */
.tk-input .el-textarea__inner {
height: 130px ;
}
/* 输入评论时自动隐藏输入框背景图片 */
.tk-input .el-textarea__inner:focus {
background-image: none ;
}
/* 调整楼中楼样式 ,整体左移,贴合气泡化效果 */
.tk-replies {
left: -70px;
width: calc(100% + 70px);
}
/* 头像宽度调整 rem单位与全局字体大小挂钩,需配合自己情况调整大小以保证头像显示完整*/
.tk-replies .tk-avatar {
width: 2.5rem ;
height: 2.5rem ;
}
.tk-replies .tk-avatar img {
width: 2.5rem ;
height: 2.5rem ;
}
/* 回复框左移,避免窄屏时出框 */
.tk-comments-container .tk-submit {
position: relative;
left: -70px;
}
/* 评论块气泡化修改 */
.tk-content {
background: #00a6ff; /*默认模式访客气泡配色*/
padding: 10px;
color: #fff; /*默认模式访客气泡字体配色*/
border-radius: 10px;
font-size: 16px ;
width: fit-content;
max-width: 100%;
position: relative ;
overflow: visible ;
max-height: none ;
}
/* 修复图片出框 */
.tk-content img {
max-width: 100% ;
}
/* 修复过长文本出框 */
.tk-content pre {
white-space: pre-wrap;
word-wrap: break-word;
}
.tk-content a {
color: #eeecaa; /*默认模式超链接配色*/
}
.tk-content::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 20px;
left: -13px;
border-top: 2px solid transparent;
border-bottom: 20px solid transparent;
border-right: 15px solid #00a6ff; /*默认模式访客气泡小三角配色*/
border-left: 0px solid transparent;
}
.tk-master .tk-content {
background: #ff8080; /*默认模式博主气泡配色*/
color: #fff; /*默认模式博主气泡字体配色*/
width: fit-content;
max-width: 100%;
}
.tk-master .tk-content a {
color: #eeecaa;
}
.tk-master .tk-content::before {
content: '';
width: 0;
height: 0;
position: absolute;
top: 20px;
left: -13px;
border-top: 2px solid transparent;
border-bottom: 20px solid transparent;
border-right: 15px solid #ff8080; /*默认模式博主气泡小三角配色*/
border-left: 0px solid transparent;
}
.tk-row[data-v-d82ce9a0] {
max-width: 100%;
width: fit-content;
}
.tk-avatar {
border-radius: 50%;
margin-top: 10px;
}
/* 夜间模式配色,具体比照上方默认模式class */
[data-theme="dark"] .tk-content {
background: #000;
color: #fff;
}
[data-theme="dark"] .tk-content a {
color: #dfa036;
}
[data-theme="dark"] .tk-content::before {
border-right: 15px solid #000;
}
[data-theme="dark"] .tk-master .tk-content {
background: #000;
color: #fff;
}
[data-theme="dark"] .tk-master .tk-content a {
color: #dfa036;
}
[data-theme="dark"] .tk-master .tk-content::before {
border-top: 2px solid transparent;
border-bottom: 20px solid transparent;
border-right: 15px solid #000;
border-left: 0px solid transparent;
}
/* 自适应内容 */
@media screen and (min-width: 1024px) {
/* 设置宽度上限,避免挤压博主头像 */
.tk-content {
max-width: 75%;
width: fit-content;
}
.tk-master .tk-content {
width: 75%;
}
.tk-master .tk-content::before {
left: 100%;
border-left: 15px solid #ff8080;
border-right: 0px solid transparent;
}
.tk-master .tk-avatar {
position: relative;
left: calc(75% + 70px);
}
.tk-master .tk-row[data-v-d82ce9a0] {
position: relative;
top: 0px;
left: calc(75% - 230px);
}
[data-theme="dark"] .tk-master .tk-content::before {
border-left: 15px solid #000;
border-right: 0px solid transparent;
}
}
/* 设备名称常态隐藏,悬停评论时显示 */
.tk-extras {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.tk-content:hover + .tk-extras {
-webkit-animation: tk-extras-fadeIn 0.5s linear;
-moz-animation: tk-extras-fadeIn 0.5s linear;
-o-animation: tk-extras-fadeIn 0.5s linear;
-ms-animation: tk-extras-fadeIn 0.5s linear;
animation: tk-extras-fadeIn 0.5s linear;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
-o-animation-fill-mode: forwards;
-ms-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
@-moz-keyframes tk-extras-fadeIn {
from {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
to {
opacity: 1;
-ms-filter: none;
filter: none;
}
}
@-webkit-keyframes tk-extras-fadeIn {
from {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
to {
opacity: 1;
-ms-filter: none;
filter: none;
}
}
@-o-keyframes tk-extras-fadeIn {
from {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
to {
opacity: 1;
-ms-filter: none;
filter: none;
}
}
@keyframes tk-extras-fadeIn {
from {
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
to {
opacity: 1;
-ms-filter: none;
filter: none;
}
}修改
[Blogroot]\_config.butterfly.yml
的inject
配置项1
2
3inject:
head:
+ - <link rel="stylesheet" href="/css/custom/twikoo_beautify.css" media="defer" onload="this.media='all'">
评论
匿名评论隐私政策
✅ 你无需删除空行,直接评论以获取最佳展示效果