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') {