fix: 修复欢迎页面主题切换按钮位置

- 添加独立版主题按钮样式(.container > .theme-toggle)
- 按钮固定在右上角(position: fixed)
- 区分导航栏集成的主题按钮样式
This commit is contained in:
小白
2026-03-12 10:26:03 +08:00
parent df2b937ead
commit d0e8b285e5

View File

@@ -255,8 +255,42 @@ h1 {
}
}
/* 主题切换按钮 - 独立版本(欢迎页面) */
.container > .theme-toggle {
position: fixed;
top: 20px;
right: 20px;
width: 50px;
height: 50px;
border-radius: 50%;
border: none;
background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%);
color: white;
font-size: 24px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
z-index: 100;
display: flex;
align-items: center;
justify-content: center;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
-webkit-touch-callout: none;
user-select: none;
}
.container > .theme-toggle:hover {
transform: rotate(20deg) scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.container > .theme-toggle:active {
transform: scale(0.95);
}
/* 主题切换按钮 - 集成到导航栏 */
.theme-toggle {
.quick-nav .theme-toggle {
width: 40px;
height: 40px;
border-radius: 50%;
@@ -276,12 +310,12 @@ h1 {
user-select: none;
}
.theme-toggle:hover {
.quick-nav .theme-toggle:hover {
transform: rotate(20deg) scale(1.1);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25);
}
.theme-toggle:active {
.quick-nav .theme-toggle:active {
transform: scale(0.95);
}