简化主题按钮结构:去除 wrapper,直接放在 header-bar 中

This commit is contained in:
zdh
2026-05-14 18:48:21 +08:00
parent 69c6cf2843
commit fa11c9c340
+9 -33
View File
@@ -71,14 +71,13 @@ body {
display: flex; align-items: center; padding: 0 16px; z-index: 100; gap: 12px;
}
[data-theme="dark"] .header-bar { background: rgba(20,20,20,0.95); }
.header-bar .menu-btn, .header-bar .theme-btn {
display: none; width: 36px; height: 36px; border: none; background: none;
cursor: pointer; border-radius: var(--radius-sm); align-items: center; justify-content: center;
flex-shrink: 0;
.header-bar .theme-btn {
width: 36px; height: 36px; border: none; background: none;
cursor: pointer; border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 16px; color: var(--text-secondary); flex-shrink: 0;
}
.header-bar .menu-btn:hover, .header-bar .theme-btn:hover { background: var(--bg-elevated); }
.header-bar .menu-btn svg { width: 20px; height: 20px; color: var(--text-secondary); }
.header-bar .theme-btn { font-size: 16px; }
.header-bar .theme-btn:hover { background: var(--bg-elevated); }
.header-bar .brand { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
.header-bar h1 {
font-size: 15px; font-weight: 700;
@@ -250,26 +249,10 @@ body {
background: var(--bg-elevated); color: var(--text-tertiary); flex-shrink: 0;
}
/* ===== Dark mode toggle button (desktop) ===== */
.theme-toggle {
display: none;
margin-left: auto;
align-items: center;
gap: 8px;
cursor: pointer;
}
.theme-toggle button {
width: 36px; height: 36px; border: none; background: none;
cursor: pointer; border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center;
font-size: 16px; color: var(--text-secondary);
}
.theme-toggle button:hover { background: var(--bg-elevated); }
/* ===== Desktop ===== */
/* ===== Desktop only ===== */
@media (min-width: 769px) {
.chip-bar { display: none !important; }
.theme-toggle { display: flex; }
.header-bar .menu-btn { display: none; }
}
/* ===== Mobile ===== */
@@ -290,12 +273,7 @@ body {
.wiki-section-title { font-size: 16px; }
.wiki-toc-item { padding: 10px 14px 10px 36px; }
.wiki-toc-header { padding: 12px 14px; }
/* Theme toggle in mobile header */
.theme-toggle { display: flex !important; margin-left: 0; }
.theme-toggle button {
width: 32px; height: 32px; font-size: 15px;
}
.header-bar .theme-btn { width: 32px; height: 32px; font-size: 15px; }
}
</style>
</head>
@@ -313,9 +291,7 @@ body {
<span class="search-icon">&#x1F50D;</span>
<input type="text" id="searchInput" placeholder="搜索文档..." autocomplete="off">
</div>
<div class="theme-toggle">
<button class="theme-btn" id="themeBtn" title="切换深色/浅色主题"></button>
</div>
</header>
<!-- Mobile chip filter bar -->