效果
修改内容
- 将输入框内的虚线改为为实线
- 改按键颜色(日/夜)
- 调整圆角
- 修改表情包大小
方法
修改/layouts/partials/comments/provider/waline.html
中的<style>
标签内样式
<style>
.waline-container {
background-color: var(--card-background);
border-radius: var(--card-border-radius);
box-shadow: var(--shadow-l1);
padding: 2%;
}
.waline-container .vcount {
color: var(--card-text-color-main);
}
.v[data-class=v] .vcard {
flex: 1;
width: 0;
padding-bottom: 0.5em;
border-bottom: 0; /*删掉回复下面的线*/
}
@media (max-width: 580px){
.v[data-class=v] .vheader .vheader-item:not(:last-child) {
border-bottom: 1px solid rgba(237,237,237,.8); /*输入框分割线*/
}}
/*日间模式*/
:root {
--waline-theme-color: #34495e; /*主题色,提交按钮*/
--waline-active-color: #246BB1; /*鼠标移到提交按钮上的颜色*/
/* 徽章 */
--waline-badge-color: #34495e; /*博主徽章色*/
--waline-avatar-radius: 5px;
--waline-avatar-size: 6rem;
--waline-dark-grey: #34495e; /*ID颜色*/
--waline-text-color: #34495e; /*字体颜色*/
--waline-font-size: 1.7rem; /*字体大小*/
}
/*夜间模式*/
:root[data-scheme="dark"] {
--waline-theme-color: #acc6e0;
--waline-white: #34495e; /*按键字体颜色*/
--waline-active-color: #8ab1d8;
--waline-light-grey: #666;
--waline-dark-grey: #acc6e0; /*ID颜色*/
--waline-badge-color: #acc6e0;
/* 布局颜色 */
--waline-text-color: rgba(255, 255, 255, 0.7);
--waline-bgcolor: #515151;
--waline-bgcolor-light: #66696b; /*行内代码块颜色*/
--waline-border-color: #9b9c9c;
--waline-disable-bgcolor: #444;
--waline-disable-color: #272727;
/* 特殊颜色 */
--waline-bq-color: #9b9c9c; /*quote*/
/* 其他颜色 */
--waline-info-bgcolor: #acc6e0;
--waline-info-color: #9b9c9c;
}
.v[data-class="v"] .vcontent .vemoji {
width: 2.2em; /*表情包大小修改*/
margin: 0.25em;}
.v[data-class=v] .vheader {
border-bottom: 1px solid rgba(237,237,237,.8); /*输入框分割线*/
}
.v[data-class=v] .vpanel {
border-radius: 8px; /*输入框圆角*/
}
</style>
小撇步
用chrome浏览器检查要修改的页面元素,copy相应样式到waline.html
中修改
,如: