diff --git a/about.html b/about.html index 352a6aa..360f9a4 100644 --- a/about.html +++ b/about.html @@ -1,5 +1,5 @@ - + @@ -10,6 +10,7 @@ + @@ -20,6 +21,7 @@ + @@ -28,6 +30,9 @@ + + + @@ -84,11 +89,11 @@
- - @@ -117,12 +122,12 @@
- - - - - - + + + + + +
@@ -235,12 +240,12 @@
- - - - - - + + + + + +
@@ -289,11 +294,11 @@
- +
- - - + + +
diff --git a/css/about.css b/css/about.css index a96f239..5226292 100644 --- a/css/about.css +++ b/css/about.css @@ -49,18 +49,18 @@ --bg-grad-1: #2d3436; --bg-grad-2: #000000; - --glass-bg: rgba(30, 30, 35, 0.55); - --glass-border: 1px solid rgba(255, 255, 255, 0.08); + --glass-bg: rgba(30, 30, 35, 0.85); /* 提高背景不透明度增强可读性 */ + --glass-border: 1px solid rgba(255, 255, 255, 0.15); --glass-shadow: 0 18px 60px rgba(0, 0, 0, 0.65); - --text-primary: #dfe6e9; - --text-secondary: #b2bec3; - --text-tertiary: #636e72; + --text-primary: #ffffff; /* 使用更明亮的白色提高对比度 */ + --text-secondary: #e0e0e0; /* 提高二级文本亮度 */ + --text-tertiary: #b0b0b0; /* 提高三级文本亮度 */ --accent: #00cec9; --accent-glow: rgba(0, 206, 201, 0.4); - --dock-bg: rgba(30, 30, 35, 0.9); + --dock-bg: rgba(30, 30, 35, 0.95); /* 提高底层面板不透明度 */ } /* Global Reset */ @@ -143,8 +143,9 @@ body { } [data-theme="night"] .neon-font { - color: #fff; - text-shadow: 0 0 10px var(--accent); + color: #ffffff; + text-shadow: 0 0 15px var(--accent), 0 0 25px var(--accent); + font-weight: bold; } [data-theme="day"] .icon-sun { @@ -1821,8 +1822,8 @@ body { /* 黑夜模式样式增强 */ [data-theme="night"] .area-stats { - background: rgba(30, 30, 35, 0.55); - border: 1px solid rgba(255, 255, 255, 0.08); + background: rgba(30, 30, 35, 0.85); /* 提高统计区域背景不透明度 */ + border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4); } @@ -1832,11 +1833,11 @@ body { } [data-theme="night"] .stat-item { - background: rgba(255, 255, 255, 0.05); + background: rgba(255, 255, 255, 0.15); /* 提高统计项目背景不透明度 */ } [data-theme="night"] .stat-item:hover { - background: rgba(108, 92, 231, 0.2); + background: rgba(108, 92, 231, 0.3); /* 提高悬停时的背景不透明度 */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); } diff --git a/css/artalk.css b/css/artalk.css index 095fec2..3eb8e5f 100644 --- a/css/artalk.css +++ b/css/artalk.css @@ -622,9 +622,9 @@ /* PC端黑夜模式下的输入框颜色和列表样式修正 - 全面优化版 */ [data-theme="night"] .atk-editor-textarea { - background: rgba(30, 30, 35, 0.9) !important; - color: #e2e8f0 !important; - border: 1px solid rgba(255, 255, 255, 0.15) !important; + background: rgba(30, 30, 35, 0.95) !important; /* 提高背景不透明度增强可读性 */ + color: #ffffff !important; /* 使用更亮的文字颜色 */ + border: 1px solid rgba(255, 255, 255, 0.2) !important; /* 增强边框可见性 */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important; } @@ -634,14 +634,14 @@ } [data-theme="night"] .atk-comment-wrap { - background: rgba(30, 30, 35, 0.85) !important; - border: 1px solid rgba(255, 255, 255, 0.08) !important; + background: rgba(30, 30, 35, 0.95) !important; /* 提高背景不透明度增强可读性 */ + border: 1px solid rgba(255, 255, 255, 0.15) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3) !important; } [data-theme="night"] .atk-comment-wrap:hover { - background: rgba(40, 40, 45, 0.9) !important; - border: 1px solid rgba(0, 206, 201, 0.3) !important; + background: rgba(40, 40, 45, 0.98) !important; /* 进一步提高背景不透明度 */ + border: 1px solid rgba(0, 206, 201, 0.5) !important; /* 增强边框可见性 */ box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4) !important; } @@ -701,7 +701,7 @@ } [data-theme="night"] .atk-comment .atk-content { - color: #e2e8f0 !important; + color: #ffffff !important; /* 使用更亮的文字颜色提高可读性 */ line-height: 1.6 !important; } diff --git a/js/about.js b/js/about.js index 5185e19..304fecc 100644 --- a/js/about.js +++ b/js/about.js @@ -569,7 +569,8 @@ class UIManager { locale: isZh ? 'zh-CN' : 'en', // 自定义占位符（支持多语言） placeholder: isZh ? '说点什么吧...支持 Markdown 语法，可 @用户、发送表情' : 'Leave a comment... Supports Markdown, @mentions, and Send 😊', - + // 无评论时显示 + noComment: isZh ? '快来成为第一个评论的人吧~' : 'Be the first to leave a comment~😍', // 发送按钮文字（多语言） sendBtn: isZh ? '发送' : 'Send', loginBtn: isZh ? '发送' : 'Send', @@ -582,11 +583,7 @@ class UIManager { // 启用 Markdown markdown: true, - // 表情面板 - emoji: { - // 使用默认表情包 - preset: 'twemoji' - }, + emoticons: "https://emoticons.hzchu.top/json/artalk/zaoandandandeyouyongquan.json", // 启用 @ 用户提醒功能 mention: true, @@ -649,8 +646,8 @@ class UIManager { } }; - Artalk.init(artalkConfig); - this.enhanceArtalkUI(); + let artalkRef = Artalk.init(artalkConfig); + this.enhanceArtalkUI(artalkRef); } catch (e) { console.error("Artalk Error", e); const msg = isZh ? '当前评论区已关闭' : 'Comments are closed'; @@ -684,7 +681,7 @@ class UIManager { this.initArtalk(); } - enhanceArtalkUI() { + enhanceArtalkUI(artalkRef) { const container = document.getElementById('artalk-container'); if (!container) return; @@ -709,11 +706,24 @@ class UIManager { const newTheme = document.documentElement.getAttribute('data-theme'); const newLang = document.documentElement.getAttribute('data-lang'); console.log('Theme/Language changed:', newTheme, newLang); - // 延迟执行 - setTimeout(() => { - // 重新加载整个评论组件 - this.reloadArtalk(); - }, 300); + if (newLang && newLang !== lang) { + // 延迟执行 + setTimeout(() => { + // 重新加载整个评论组件 + this.reloadArtalk(); + }, 300); + } else if (newTheme && newTheme !== currentTheme) { + try { + artalkRef.ui.setDarkMode(newTheme === 'night') + } catch (e) { + setTimeout(() => { + // 重新加载整个评论组件 + this.reloadArtalk(); + }, 300); + } + + } + }); themeObserver.observe(document.documentElement, {