头部内容居中:限制最大宽度960px,搜索框不撑满全屏

This commit is contained in:
zdh
2026-05-14 18:54:39 +08:00
parent dee8a21fbf
commit df55e7a0c0
+5 -2
View File
@@ -58,7 +58,8 @@ body {
border-bottom: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
display: flex; align-items: center; justify-content: center; padding: 0 16px; z-index: 100; gap: 16px; display: flex; align-items: center; justify-content: center; padding: 0 16px; z-index: 100; gap: 16px;
} }
[data-theme="dark"] .header-bar { background: rgba(20,20,20,0.95); } .header-bar-inner { display: flex; align-items: center; gap: 16px; max-width: 960px; width: 100%; }
[data-theme="dark"] .header-bar { background: rgba(28,28,30,0.95); }
.header-bar .menu-btn { .header-bar .menu-btn {
width: 36px; height: 36px; border: none; background: none; width: 36px; height: 36px; border: none; background: none;
cursor: pointer; border-radius: var(--radius-sm); cursor: pointer; border-radius: var(--radius-sm);
@@ -74,7 +75,7 @@ body {
-webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
} }
.header-bar .tagline { font-size: 11px; color: var(--text-tertiary); display: inline; } .header-bar .tagline { font-size: 11px; color: var(--text-tertiary); display: inline; }
.search-box { flex: 1; min-width: 80px; position: relative; } .search-box { flex: 0 1 240px; min-width: 100px; position: relative; }
.search-box input { .search-box input {
width: 100%; padding: 8px 12px 8px 34px; width: 100%; padding: 8px 12px 8px 34px;
border: 1px solid var(--border); border-radius: var(--radius-sm); border: 1px solid var(--border); border-radius: var(--radius-sm);
@@ -256,6 +257,7 @@ body {
<body> <body>
<header class="header-bar"> <header class="header-bar">
<div class="header-bar-inner">
<button class="menu-btn" id="menuBtn" aria-label="菜单"> <button class="menu-btn" id="menuBtn" aria-label="菜单">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
</button> </button>
@@ -267,6 +269,7 @@ body {
<span class="search-icon">&#x1F50D;</span> <span class="search-icon">&#x1F50D;</span>
<input type="text" id="searchInput" placeholder="搜索文档..." autocomplete="off"> <input type="text" id="searchInput" placeholder="搜索文档..." autocomplete="off">
</div> </div>
</div>
</header> </header>
<div class="chip-bar"><div class="chip-bar-inner" id="chipBar"></div></div> <div class="chip-bar"><div class="chip-bar-inner" id="chipBar"></div></div>