feat(comments): 添加 Waline 自定义样式文件以适配网站主题
fix(blog): 删除不再使用的博客工具函数文件
This commit is contained in:
joyzhao
342
src/styles/waline-custom.css
Normal file
342
src/styles/waline-custom.css
Normal file
@@ -0,0 +1,342 @@
|
||||
/**
|
||||
* Waline Custom Styles
|
||||
* 适配网站主题风格 - 紫色渐变主题
|
||||
*/
|
||||
|
||||
/* ========== 基础变量覆盖 ========== */
|
||||
:root {
|
||||
/* 主题色 - 使用网站的紫色渐变accent */
|
||||
--waline-theme-color: #8B5CF6;
|
||||
--waline-active-color: #EC4899;
|
||||
|
||||
/* 背景色 */
|
||||
--waline-bg-color: oklch(1 0 0);
|
||||
--waline-bg-color-light: oklch(0.97 0 0);
|
||||
--waline-bg-color-hover: oklch(0.93 0 0);
|
||||
|
||||
/* 文字颜色 */
|
||||
--waline-color: oklch(0.4 0 0);
|
||||
--waline-light-grey: oklch(0.65 0 0);
|
||||
--waline-dark-grey: oklch(0.3 0 0);
|
||||
|
||||
/* 边框颜色 */
|
||||
--waline-border-color: oklch(0.87 0 0);
|
||||
|
||||
/* 其他颜色 */
|
||||
--waline-badge-color: #8B5CF6;
|
||||
--waline-info-bg-color: oklch(0.97 0 0);
|
||||
--waline-info-color: oklch(0.55 0 0);
|
||||
--waline-bq-color: oklch(0.93 0 0);
|
||||
|
||||
/* 代码块背景 */
|
||||
--waline-code-bg-color: oklch(0.25 0 0);
|
||||
|
||||
/* 圆角 - 与网站一致 */
|
||||
--waline-border-radius: var(--radius, 0.75rem);
|
||||
|
||||
/* 阴影 */
|
||||
--waline-box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
|
||||
|
||||
/* 头像圆角 - 使用网站风格 */
|
||||
--waline-avatar-radius: var(--radius-md, 0.5rem);
|
||||
|
||||
/* 按钮样式 */
|
||||
--waline-btn-radius: var(--radius, 0.75rem);
|
||||
}
|
||||
|
||||
/* ========== 暗黑模式 ========== */
|
||||
.dark {
|
||||
--waline-bg-color: oklch(0.205 0 0);
|
||||
--waline-bg-color-light: oklch(0.269 0 0);
|
||||
--waline-bg-color-hover: oklch(0.32 0 0);
|
||||
|
||||
--waline-color: oklch(0.9 0 0);
|
||||
--waline-light-grey: oklch(0.6 0 0);
|
||||
--waline-dark-grey: oklch(0.75 0 0);
|
||||
|
||||
--waline-border-color: oklch(1 0 0 / 15%);
|
||||
|
||||
--waline-info-bg-color: oklch(0.269 0 0);
|
||||
--waline-info-color: oklch(0.6 0 0);
|
||||
--waline-bq-color: oklch(0.269 0 0);
|
||||
|
||||
--waline-code-bg-color: oklch(0.12 0 0);
|
||||
|
||||
--waline-box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
|
||||
/* ========== 评论面板样式 ========== */
|
||||
.wl-panel {
|
||||
border-radius: var(--waline-border-radius) !important;
|
||||
border: 1px solid var(--waline-border-color) !important;
|
||||
box-shadow: var(--waline-box-shadow) !important;
|
||||
background: var(--waline-bg-color) !important;
|
||||
}
|
||||
|
||||
/* ========== 输入框样式 ========== */
|
||||
.wl-header {
|
||||
border-bottom-color: var(--waline-border-color) !important;
|
||||
}
|
||||
|
||||
.wl-header label {
|
||||
color: var(--waline-color) !important;
|
||||
}
|
||||
|
||||
.wl-header input {
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
.wl-editor {
|
||||
background: var(--waline-bg-color-light) !important;
|
||||
border-radius: var(--waline-btn-radius) !important;
|
||||
}
|
||||
|
||||
.wl-editor:focus {
|
||||
background: var(--waline-bg-color-hover) !important;
|
||||
}
|
||||
|
||||
/* ========== 按钮样式 ========== */
|
||||
.wl-btn {
|
||||
border-radius: var(--waline-btn-radius) !important;
|
||||
font-size: 0.875em !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.wl-btn:hover {
|
||||
border-color: var(--waline-theme-color) !important;
|
||||
color: var(--waline-theme-color) !important;
|
||||
background: var(--waline-bg-color-light) !important;
|
||||
}
|
||||
|
||||
.wl-btn.primary {
|
||||
background: linear-gradient(135deg, #8B5CF6, #EC4899) !important;
|
||||
border: none !important;
|
||||
color: white !important;
|
||||
font-weight: 500 !important;
|
||||
}
|
||||
|
||||
.wl-btn.primary:hover {
|
||||
background: linear-gradient(135deg, #7C3AED, #DB2777) !important;
|
||||
border: none !important;
|
||||
color: white !important;
|
||||
transform: translateY(-1px);
|
||||
box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
|
||||
}
|
||||
|
||||
/* ========== 头部标签页 ========== */
|
||||
.wl-header label {
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.wl-header label:hover {
|
||||
background: var(--waline-bg-color-light) !important;
|
||||
}
|
||||
|
||||
/* ========== 评论卡片样式 ========== */
|
||||
.wl-card {
|
||||
border-bottom-color: var(--waline-border-color) !important;
|
||||
}
|
||||
|
||||
.wl-card:first-child {
|
||||
margin-inline-start: 0 !important;
|
||||
}
|
||||
|
||||
.wl-nick {
|
||||
color: var(--waline-color) !important;
|
||||
}
|
||||
|
||||
.wl-time {
|
||||
color: var(--waline-info-color) !important;
|
||||
}
|
||||
|
||||
.wl-content {
|
||||
color: var(--waline-color) !important;
|
||||
line-height: 1.8 !important;
|
||||
}
|
||||
|
||||
/* ========== 徽章样式 ========== */
|
||||
.wl-badge {
|
||||
background: linear-gradient(135deg, #8B5CF6, #EC4899) !important;
|
||||
border: none !important;
|
||||
color: white !important;
|
||||
font-size: 0.7em !important;
|
||||
padding: 2px 8px !important;
|
||||
border-radius: 9999px !important;
|
||||
}
|
||||
|
||||
/* ========== 操作按钮 ========== */
|
||||
.wl-action {
|
||||
color: var(--waline-light-grey) !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.wl-action:hover {
|
||||
color: var(--waline-theme-color) !important;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.wl-action.active {
|
||||
color: var(--waline-active-color) !important;
|
||||
}
|
||||
|
||||
/* ========== 评论操作 ========== */
|
||||
.wl-delete:hover,
|
||||
.wl-like:hover,
|
||||
.wl-reply:hover,
|
||||
.wl-edit:hover {
|
||||
color: var(--waline-theme-color) !important;
|
||||
}
|
||||
|
||||
.wl-delete.active,
|
||||
.wl-like.active,
|
||||
.wl-reply.active,
|
||||
.wl-edit.active {
|
||||
color: var(--waline-active-color) !important;
|
||||
}
|
||||
|
||||
/* ========== 排序按钮 ========== */
|
||||
.wl-sort li {
|
||||
color: var(--waline-info-color) !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
.wl-sort li:hover {
|
||||
color: var(--waline-theme-color) !important;
|
||||
}
|
||||
|
||||
.wl-sort li.active {
|
||||
color: var(--waline-theme-color) !important;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* ========== 表情弹窗 ========== */
|
||||
.wl-emoji-popup {
|
||||
border-radius: var(--waline-border-radius) !important;
|
||||
box-shadow: var(--waline-box-shadow) !important;
|
||||
background: var(--waline-bg-color) !important;
|
||||
border: 1px solid var(--waline-border-color) !important;
|
||||
}
|
||||
|
||||
.wl-emoji-popup .wl-tab.active {
|
||||
background: var(--waline-bg-color-light) !important;
|
||||
}
|
||||
|
||||
.wl-emoji-popup button:hover {
|
||||
background: var(--waline-bg-color-hover) !important;
|
||||
}
|
||||
|
||||
/* ========== GIF 弹窗 ========== */
|
||||
.wl-gif-popup {
|
||||
border-radius: var(--waline-border-radius) !important;
|
||||
box-shadow: var(--waline-box-shadow) !important;
|
||||
background: var(--waline-bg-color) !important;
|
||||
border: 1px solid var(--waline-border-color) !important;
|
||||
}
|
||||
|
||||
/* ========== 评论统计 ========== */
|
||||
.wl-count {
|
||||
color: var(--waline-theme-color) !important;
|
||||
font-size: 1.5em !important;
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
/* ========== 空状态 ========== */
|
||||
.wl-empty {
|
||||
color: var(--waline-info-color) !important;
|
||||
}
|
||||
|
||||
/* ========== 头像样式 ========== */
|
||||
.wl-avatar {
|
||||
border-radius: var(--waline-avatar-radius) !important;
|
||||
border: 2px solid var(--waline-border-color) !important;
|
||||
box-shadow: var(--waline-box-shadow) !important;
|
||||
}
|
||||
|
||||
/* ========== 回复引用框 ========== */
|
||||
.wl-quote {
|
||||
border-left-color: var(--waline-border-color) !important;
|
||||
}
|
||||
|
||||
/* ========== 预览区域 ========== */
|
||||
.wl-preview .wl-content {
|
||||
background: var(--waline-bg-color-light) !important;
|
||||
border-radius: var(--waline-btn-radius) !important;
|
||||
}
|
||||
|
||||
/* ========== 反应区域 ========== */
|
||||
.wl-reaction-title {
|
||||
color: var(--waline-color) !important;
|
||||
}
|
||||
|
||||
.wl-reaction-item.active .wl-reaction-text {
|
||||
color: var(--waline-theme-color) !important;
|
||||
}
|
||||
|
||||
.wl-reaction-votes {
|
||||
border-color: var(--waline-theme-color) !important;
|
||||
color: var(--waline-theme-color) !important;
|
||||
}
|
||||
|
||||
.wl-reaction-item.active .wl-reaction-votes {
|
||||
background: var(--waline-theme-color) !important;
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
/* ========== 加载动画 ========== */
|
||||
.wl-loading svg {
|
||||
color: var(--waline-theme-color) !important;
|
||||
}
|
||||
|
||||
/* ========== 滚动条样式 ========== */
|
||||
[data-waline] ::-webkit-scrollbar {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
}
|
||||
|
||||
[data-waline] ::-webkit-scrollbar-track-piece {
|
||||
background: var(--waline-bg-color-light);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
[data-waline] ::-webkit-scrollbar-thumb {
|
||||
background: var(--waline-theme-color);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
[data-waline] ::-webkit-scrollbar-thumb:hover {
|
||||
background: var(--waline-active-color);
|
||||
}
|
||||
|
||||
/* ========== 链接样式 ========== */
|
||||
[data-waline] a {
|
||||
color: var(--waline-theme-color) !important;
|
||||
text-decoration: none !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
[data-waline] a:hover {
|
||||
color: var(--waline-active-color) !important;
|
||||
}
|
||||
|
||||
/* ========== 代码块样式 ========== */
|
||||
.wl-content pre,
|
||||
.wl-content pre[class*="language-"] {
|
||||
background: var(--waline-code-bg-color) !important;
|
||||
border-radius: var(--waline-btn-radius) !important;
|
||||
}
|
||||
|
||||
/* ========== 移动端适配 ========== */
|
||||
@media (max-width: 640px) {
|
||||
.wl-panel {
|
||||
border-radius: var(--radius-md, 0.5rem) !important;
|
||||
}
|
||||
|
||||
.wl-btn {
|
||||
font-size: 0.8em !important;
|
||||
padding: 0.4em 0.8em !important;
|
||||
}
|
||||
|
||||
.wl-editor {
|
||||
min-height: 6em !important;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user