简化主题按钮结构:去除 wrapper,直接放在 header-bar 中
This commit is contained in:
+9
-33
@@ -71,14 +71,13 @@ body {
|
|||||||
display: flex; align-items: center; padding: 0 16px; z-index: 100; gap: 12px;
|
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); }
|
[data-theme="dark"] .header-bar { background: rgba(20,20,20,0.95); }
|
||||||
.header-bar .menu-btn, .header-bar .theme-btn {
|
.header-bar .theme-btn {
|
||||||
display: none; width: 36px; height: 36px; border: none; background: none;
|
width: 36px; height: 36px; border: none; background: none;
|
||||||
cursor: pointer; border-radius: var(--radius-sm); align-items: center; justify-content: center;
|
cursor: pointer; border-radius: var(--radius-sm);
|
||||||
flex-shrink: 0;
|
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 .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 .brand { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
|
.header-bar .brand { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; }
|
||||||
.header-bar h1 {
|
.header-bar h1 {
|
||||||
font-size: 15px; font-weight: 700;
|
font-size: 15px; font-weight: 700;
|
||||||
@@ -250,26 +249,10 @@ body {
|
|||||||
background: var(--bg-elevated); color: var(--text-tertiary); flex-shrink: 0;
|
background: var(--bg-elevated); color: var(--text-tertiary); flex-shrink: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== Dark mode toggle button (desktop) ===== */
|
/* ===== Desktop only ===== */
|
||||||
.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 ===== */
|
|
||||||
@media (min-width: 769px) {
|
@media (min-width: 769px) {
|
||||||
.chip-bar { display: none !important; }
|
.chip-bar { display: none !important; }
|
||||||
.theme-toggle { display: flex; }
|
.header-bar .menu-btn { display: none; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ===== Mobile ===== */
|
/* ===== Mobile ===== */
|
||||||
@@ -290,12 +273,7 @@ body {
|
|||||||
.wiki-section-title { font-size: 16px; }
|
.wiki-section-title { font-size: 16px; }
|
||||||
.wiki-toc-item { padding: 10px 14px 10px 36px; }
|
.wiki-toc-item { padding: 10px 14px 10px 36px; }
|
||||||
.wiki-toc-header { padding: 12px 14px; }
|
.wiki-toc-header { padding: 12px 14px; }
|
||||||
|
.header-bar .theme-btn { width: 32px; height: 32px; font-size: 15px; }
|
||||||
/* Theme toggle in mobile header */
|
|
||||||
.theme-toggle { display: flex !important; margin-left: 0; }
|
|
||||||
.theme-toggle button {
|
|
||||||
width: 32px; height: 32px; font-size: 15px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
@@ -313,9 +291,7 @@ body {
|
|||||||
<span class="search-icon">🔍</span>
|
<span class="search-icon">🔍</span>
|
||||||
<input type="text" id="searchInput" placeholder="搜索文档..." autocomplete="off">
|
<input type="text" id="searchInput" placeholder="搜索文档..." autocomplete="off">
|
||||||
</div>
|
</div>
|
||||||
<div class="theme-toggle">
|
|
||||||
<button class="theme-btn" id="themeBtn" title="切换深色/浅色主题"></button>
|
<button class="theme-btn" id="themeBtn" title="切换深色/浅色主题"></button>
|
||||||
</div>
|
|
||||||
</header>
|
</header>
|
||||||
|
|
||||||
<!-- Mobile chip filter bar -->
|
<!-- Mobile chip filter bar -->
|
||||||
|
|||||||
Reference in New Issue
Block a user