From 2e2c90567cd476852609f569a0d907cb6f403468 Mon Sep 17 00:00:00 2001
From: hehh <lingtinzhe@icloud.com>
Date: Mon, 24 Nov 2025 02:14:12 +0800
Subject: [PATCH] =?UTF-8?q?style(about):=20=E4=BC=98=E5=8C=96=E5=85=B4?=
 =?UTF-8?q?=E8=B6=A3=E9=A1=B9=E6=A0=B7=E5=BC=8F=E5=B9=B6=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E8=AF=AD=E8=A8=80=E5=88=87=E6=8D=A2=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 调整兴趣项背景色、内边距和圆角，增强视觉效果
- 增加悬停状态下的阴影和边框变化动画
- 修改字体权重以提升文字可读性
- 修复中英文切换按钮标签显示错误的问题
- 根据当前语言和主题动态设置主题切换按钮提示文本
---
 css/about.css | 18 +++++++++++-------
 js/about.js   | 10 ++++++++--
 2 files changed, 19 insertions(+), 9 deletions(-)

diff --git a/css/about.css b/css/about.css
index a26f807..15fe7ee 100644
--- a/css/about.css
+++ b/css/about.css
@@ -2209,23 +2209,26 @@ body {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 15px;
-    /*height: 100%; */
     margin-top: 1rem;
     align-content: center;
 }
 
 .interest-item {
-    background: rgba(128, 128, 128, 0.05);
-    padding: 5px;
-    border-radius: 2px;
+    background: rgba(255, 255, 255, 0.65);
+    padding: 12px;
+    border-radius: 12px;
     display: flex;
     align-items: center;
-    gap: 2px;
-    transition: background 0.3s;
+    gap: 10px;
+    transition: background 0.25s, box-shadow 0.25s, border-color 0.25s;
+    border: 1px solid rgba(128, 128, 128, 0.12);
+    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
 }
 
 .interest-item:hover {
-    background: rgba(128, 128, 128, 0.1);
+    background: rgba(255, 255, 255, 0.9);
+    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.10);
+    border-color: rgba(108, 92, 231, 0.25);
 }
 
 .i-emoji {
@@ -2250,6 +2253,7 @@ body {
     background-clip: text;
     color: transparent;
     -webkit-text-fill-color: transparent;
+    font-weight: 600;
 }
 
 .i-text span:not(.i-emoji) {
diff --git a/js/about.js b/js/about.js
index 83675fe..8f098d6 100644
--- a/js/about.js
+++ b/js/about.js
@@ -153,7 +153,7 @@ class I18nManager {
             this.lang = this.lang === 'zh' ? 'en' : 'zh';
             setStoredLanguage(this.lang);
             this.apply();
-            const label = this.lang === 'zh' ? 'CN' : 'EN';
+            const label = this.lang === 'zh' ? 'EN' : 'CN';
             $('#lang-btn .btn-text').text(label);
             $('#lang-btn').attr('title', label);
         });
@@ -165,7 +165,7 @@ class I18nManager {
             const k = $(this).data('i18n');
             if (t[k]) $(this).text(t[k]);
         });
-        const label = this.lang === 'zh' ? 'CN' : 'EN';
+        const label = this.lang === 'zh' ? 'EN' : 'CN';
         $('#lang-btn .btn-text').text(label);
         $('#lang-btn').attr('title', label);
     }
@@ -184,6 +184,9 @@ class ThemeManager {
         let theme = getStoredTheme();
         if (theme === 'night') this.root.setAttribute('data-theme', 'night');
         $('#theme-btn').toggleClass('is-active', theme === 'night');
+        const langForTitle = getStoredLanguage();
+        const titleText = theme === 'night' ? (langForTitle === 'zh' ? '白天模式' : 'Day') : (langForTitle === 'zh' ? '黑夜模式' : 'Night');
+        $('#theme-btn').attr('title', titleText);
 
         $('#theme-btn').on('click', () => {
             const curr = this.root.getAttribute('data-theme');
@@ -192,6 +195,9 @@ class ThemeManager {
             else this.root.removeAttribute('data-theme');
             setStoredTheme(next)
             $('#theme-btn').toggleClass('is-active', next === 'night');
+            const lang = getStoredLanguage();
+            const t = next === 'night' ? (lang === 'zh' ? '白天模式' : 'Day') : (lang === 'zh' ? '黑夜模式' : 'Night');
+            $('#theme-btn').attr('title', t);
 
             // 更新Artalk主题
             if (typeof Artalk !== 'undefined') {