优化界面布局Again

This commit is contained in:
CN-JS-HuiBai
2026-04-04 13:31:31 +08:00
parent b76044ef0d
commit 5812b23f1c
2 changed files with 8 additions and 7 deletions

View File

@@ -105,6 +105,7 @@ header h1 {
header h1 span { header h1 span {
background: linear-gradient(135deg, #3b82f6, #8b5cf6); background: linear-gradient(135deg, #3b82f6, #8b5cf6);
-webkit-background-clip: text; -webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent; -webkit-text-fill-color: transparent;
} }
@@ -302,10 +303,12 @@ header p {
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
} }
.banner-left { .section-actions {
display: flex; display: flex;
flex-wrap: nowrap;
align-items: center; align-items: center;
gap: 1.5rem; gap: 0.5rem;
justify-content: flex-start;
} }
.banner-actions { .banner-actions {

View File

@@ -37,15 +37,13 @@
<div class="container hidden" id="app-container"> <div class="container hidden" id="app-container">
<div id="top-banner" class="top-banner hidden"> <div id="top-banner" class="top-banner hidden">
<div class="banner-left"> <div id="top-banner-title" class="banner-title"></div>
<div id="top-banner-title" class="banner-title"></div> <div class="user-controls">
<div class="banner-actions"> <div class="banner-actions">
<button id="refresh-btn" class="action-btn" title="刷新列表">刷新列表</button> <button id="refresh-btn" class="action-btn" title="刷新列表">刷新列表</button>
<button id="clear-download-cache-btn" class="action-btn" title="清空下载缓存">清空下载缓存</button> <button id="clear-download-cache-btn" class="action-btn" title="清空下载缓存">清空下载缓存</button>
<button id="clear-transcode-cache-btn" class="action-btn" title="清空转码缓存">清空转码缓存</button> <button id="clear-transcode-cache-btn" class="action-btn" title="清空转码缓存">清空转码缓存</button>
</div> </div>
</div>
<div class="user-controls">
<label>页面主题: <label>页面主题:
<select id="theme-selector"> <select id="theme-selector">
<option value="light">白天模式</option> <option value="light">白天模式</option>
@@ -54,7 +52,7 @@
</label> </label>
<div class="user-info"> <div class="user-info">
<span id="current-username"></span> <span id="current-username"></span>
<button id="logout-btn" class="action-btn">退出登录</button> <button id="logout-btn" class="action-btn danger">退出登录</button>
</div> </div>
</div> </div>
</div> </div>