简化主题按钮结构:去除 wrapper,直接放在 header-bar 中
This commit is contained in:
+10
-34
@@ -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">🔍</span>
|
||||
<input type="text" id="searchInput" placeholder="搜索文档..." autocomplete="off">
|
||||
</div>
|
||||
<div class="theme-toggle">
|
||||
<button class="theme-btn" id="themeBtn" title="切换深色/浅色主题"></button>
|
||||
</div>
|
||||
<button class="theme-btn" id="themeBtn" title="切换深色/浅色主题"></button>
|
||||
</header>
|
||||
|
||||
<!-- Mobile chip filter bar -->
|
||||
|
||||
Reference in New Issue
Block a user