Honesty/home
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(css): 优化 Artalk 评论组件样式适配

Browse Source 
- 移除无效的类选择器，统一使用容器选择器覆盖样式
- 为评论编辑器和输入框添加玻璃态背景和文字颜色
- 为对话框和弹层添加夜间模式下的背景和边框样式
- 确保移动端样式的一致性和可读性
- 优化组件在白天和黑夜模式下的视觉效果
- 提高样式代码的可维护性和扩展性
This commit is contained in:
hehh
2025-11-24 02:50:24 +08:00
parent 27420c555f
commit 0cbc2c9454
1 changed files with 16 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
css/about.css
View File

@@ -1329,41 +1329,7 @@ body {
box-shadow: var(--glass-shadow);
}
/* 添加Artalk评论组件的自定义样式 */
.artalk-comment {
--at-color-main: var(--accent) !important;
--at-color-font: var(--text-primary) !important;
--at-color-meta: var(--text-secondary) !important;
--at-color-border: rgba(128, 128, 128, 0.1) !important;
--at-color-bg: var(--glass-bg) !important;
--at-color-bg-grey: rgba(128, 128, 128, 0.05) !important;
--at-color-bg-hover: rgba(128, 128, 128, 0.1) !important;
--at-color-bg-light: var(--glass-bg) !important;
--at-color-shadow: var(--glass-shadow) !important;
}
[data-theme="night"] .artalk-comment {
--at-color-font: var(--text-primary) !important;
--at-color-meta: var(--text-secondary) !important;
--at-color-border: rgba(255, 255, 255, 0.08) !important;
--at-color-bg: var(--glass-bg) !important;
--at-color-bg-grey: rgba(255, 255, 255, 0.05) !important;
--at-color-bg-hover: rgba(255, 255, 255, 0.1) !important;
--at-color-bg-light: var(--glass-bg) !important;
--at-color-shadow: var(--glass-shadow) !important;
}
.artalk-comment .atk-main-editor {
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-radius: var(--radius) !important;
}
.artalk-comment .atk-comment-wrap {
backdrop-filter: blur(var(--glass-blur));
-webkit-backdrop-filter: blur(var(--glass-blur));
border-radius: var(--radius) !important;
}
/* Artalk 组件（按容器选择器统一覆盖，移除无效类选择器） */
/* 确保评论区域适配白天/黑夜模式 */
#artalk-container {
@@ -1375,6 +1341,10 @@ body {
border: var(--glass-border);
box-shadow: var(--glass-shadow);
}
#artalk-container .atk-editor, #artalk-container .atk-editor textarea, #artalk-container .atk-editor input {
background: var(--glass-bg);
color: var(--text-primary);
}
#artalk-container .atk-comment-wrap {
background: var(--glass-bg);
@@ -1383,6 +1353,17 @@ body {
opacity: 0.9;
transition: opacity 0.2s;
}
#artalk-container .atk-dialog, #artalk-container .atk-layer .atk-dialog { background: var(--glass-bg); color: var(--text-primary); border: var(--glass-border); box-shadow: var(--glass-shadow); }
[data-theme="night"] #artalk-container .atk-main-editor,
[data-theme="night"] #artalk-container .atk-editor,
[data-theme="night"] #artalk-container .atk-comment-wrap,
[data-theme="night"] #artalk-container .atk-dialog,
[data-theme="night"] #artalk-container .atk-layer .atk-dialog {
background: rgba(30,30,35,0.55);
color: var(--text-primary);
border: 1px solid rgba(255,255,255,0.08);
box-shadow: var(--glass-shadow);
}
#artalk-container.atk-mobile .atk-main-editor { padding: 12px; font-size: 0.95rem; }
#artalk-container.atk-mobile .atk-comment-wrap { padding: 12px 14px; font-size: 0.95rem; }