feat(css): 优化主题切换图标显示逻辑
- 调整图标显示规则,确保日夜模式下图标正确隐藏 - 移除重复的图标隐藏样式定义 - 删除已弃用的MBTI标签渐变色样式 - 保持样式代码结构清晰一致
This commit is contained in:
@@ -147,6 +147,14 @@ body {
|
|||||||
text-shadow: 0 0 10px var(--accent);
|
text-shadow: 0 0 10px var(--accent);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
[data-theme="day"] .icon-sun {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-theme="night"] .icon-moon {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
/* =========================================
|
/* =========================================
|
||||||
3. Navigation
|
3. Navigation
|
||||||
@@ -250,14 +258,6 @@ body {
|
|||||||
.action-btn:active {
|
.action-btn:active {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="day"] .icon-sun {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="night"] .icon-moon {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* =========================================
|
/* =========================================
|
||||||
@@ -646,33 +646,6 @@ body {
|
|||||||
max-width: 100%;
|
max-width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mbti-tags .tag.tag-color-1 {
|
|
||||||
background: var(--gradient-1);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mbti-tags .tag.tag-color-2 {
|
|
||||||
background: var(--gradient-2);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mbti-tags .tag.tag-color-3 {
|
|
||||||
background: var(--gradient-3);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.mbti-tags .tag.tag-color-4 {
|
|
||||||
background: var(--gradient-4);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
background-clip: text;
|
|
||||||
color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- Tech Stack (PC) --- */
|
/* --- Tech Stack (PC) --- */
|
||||||
.area-tech {
|
.area-tech {
|
||||||
@@ -1479,14 +1452,6 @@ body {
|
|||||||
.action-btn:active {
|
.action-btn:active {
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
}
|
}
|
||||||
|
|
||||||
[data-theme="day"] .icon-sun {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
[data-theme="night"] .icon-moon {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* =========================================
|
/* =========================================
|
||||||
|
|||||||
@@ -182,7 +182,7 @@ class ThemeManager {
|
|||||||
|
|
||||||
init() {
|
init() {
|
||||||
let theme = getStoredTheme();
|
let theme = getStoredTheme();
|
||||||
if (theme === 'night') this.root.setAttribute('data-theme', 'night');
|
if (theme) this.root.setAttribute('data-theme', theme);
|
||||||
$('#theme-btn').toggleClass('is-active', theme === 'night');
|
$('#theme-btn').toggleClass('is-active', theme === 'night');
|
||||||
const langForTitle = getStoredLanguage();
|
const langForTitle = getStoredLanguage();
|
||||||
const titleText = theme === 'night' ? (langForTitle === 'zh' ? '白天模式' : 'Day') : (langForTitle === 'zh' ? '黑夜模式' : 'Night');
|
const titleText = theme === 'night' ? (langForTitle === 'zh' ? '白天模式' : 'Day') : (langForTitle === 'zh' ? '黑夜模式' : 'Night');
|
||||||
@@ -191,7 +191,7 @@ class ThemeManager {
|
|||||||
$('#theme-btn').on('click', () => {
|
$('#theme-btn').on('click', () => {
|
||||||
const curr = this.root.getAttribute('data-theme');
|
const curr = this.root.getAttribute('data-theme');
|
||||||
const next = curr === 'night' ? 'day' : 'night';
|
const next = curr === 'night' ? 'day' : 'night';
|
||||||
if (next === 'night') this.root.setAttribute('data-theme', 'night');
|
if (next) this.root.setAttribute('data-theme', next);
|
||||||
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');
|
||||||
|
|||||||
Reference in New Issue
Block a user