From 0cbc2c94542157630ef168b04ff825820023685a Mon Sep 17 00:00:00 2001
From: hehh <lingtinzhe@icloud.com>
Date: Mon, 24 Nov 2025 02:50:24 +0800
Subject: [PATCH] =?UTF-8?q?style(css):=20=E4=BC=98=E5=8C=96=20Artalk=20?=
 =?UTF-8?q?=E8=AF=84=E8=AE=BA=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F=E9=80=82?=
 =?UTF-8?q?=E9=85=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 移除无效的类选择器，统一使用容器选择器覆盖样式
- 为评论编辑器和输入框添加玻璃态背景和文字颜色
- 为对话框和弹层添加夜间模式下的背景和边框样式
- 确保移动端样式的一致性和可读性
- 优化组件在白天和黑夜模式下的视觉效果
- 提高样式代码的可维护性和扩展性
---
 css/about.css | 51 ++++++++++++++++-----------------------------------
 1 file changed, 16 insertions(+), 35 deletions(-)

diff --git a/css/about.css b/css/about.css
index f80a109..19567cb 100644
--- a/css/about.css
+++ b/css/about.css
@@ -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; }