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

style(about): 优化兴趣项样式并修复语言切换逻辑

Browse Source 
- 调整兴趣项背景色、内边距和圆角，增强视觉效果
- 增加悬停状态下的阴影和边框变化动画
- 修改字体权重以提升文字可读性
- 修复中英文切换按钮标签显示错误的问题
- 根据当前语言和主题动态设置主题切换按钮提示文本
This commit is contained in:
hehh
2025-11-24 02:14:12 +08:00
parent 759eb498af
commit 2e2c90567c
2 changed files with 19 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
css/about.css
View File

@@ -2209,23 +2209,26 @@ body {
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: 15px; gap: 15px;
/*height: 100%; */
margin-top: 1rem; margin-top: 1rem;
align-content: center; align-content: center;
} }
.interest-item { .interest-item {
background: rgba(128, 128, 128, 0.05); background: rgba(255, 255, 255, 0.65);
padding: 5px; padding: 12px;
border-radius: 2px; border-radius: 12px;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 2px; gap: 10px;
transition: background 0.3s; 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 { .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 { .i-emoji {
@@ -2250,6 +2253,7 @@ body {
background-clip: text; background-clip: text;
color: transparent; color: transparent;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
font-weight: 600;
} }
.i-text span:not(.i-emoji) { .i-text span:not(.i-emoji) {

10
js/about.js
View File

@@ -153,7 +153,7 @@ class I18nManager {
this.lang = this.lang === 'zh' ? 'en' : 'zh'; this.lang = this.lang === 'zh' ? 'en' : 'zh';
setStoredLanguage(this.lang); setStoredLanguage(this.lang);
this.apply(); this.apply();
const label = this.lang === 'zh' ? 'CN' : 'EN'; const label = this.lang === 'zh' ? 'EN' : 'CN';
$('#lang-btn .btn-text').text(label); $('#lang-btn .btn-text').text(label);
$('#lang-btn').attr('title', label); $('#lang-btn').attr('title', label);
}); });
@@ -165,7 +165,7 @@ class I18nManager {
const k = $(this).data('i18n'); const k = $(this).data('i18n');
if (t[k]) $(this).text(t[k]); 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 .btn-text').text(label);
$('#lang-btn').attr('title', label); $('#lang-btn').attr('title', label);
} }
@@ -184,6 +184,9 @@ class ThemeManager {
let theme = getStoredTheme(); let theme = getStoredTheme();
if (theme === 'night') this.root.setAttribute('data-theme', 'night'); if (theme === 'night') this.root.setAttribute('data-theme', 'night');
$('#theme-btn').toggleClass('is-active', 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', () => { $('#theme-btn').on('click', () => {
const curr = this.root.getAttribute('data-theme'); const curr = this.root.getAttribute('data-theme');
@@ -192,6 +195,9 @@ class ThemeManager {
else this.root.removeAttribute('data-theme'); else this.root.removeAttribute('data-theme');
setStoredTheme(next) setStoredTheme(next)
$('#theme-btn').toggleClass('is-active', next === 'night'); $('#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主题 // 更新Artalk主题
if (typeof Artalk !== 'undefined') { if (typeof Artalk !== 'undefined') {