Refine settings header layout
This commit is contained in:
dev
parent
1da677ee2d
commit
8149f35fae
2 changed files with 82 additions and 37 deletions
|
|
@ -3913,21 +3913,22 @@
|
||||||
<div class="header-text">
|
<div class="header-text">
|
||||||
<h2 class="header-title"><img src="/static/settings.png" class="page-header-icon" alt=""><span>Settings</span></h2>
|
<h2 class="header-title"><img src="/static/settings.png" class="page-header-icon" alt=""><span>Settings</span></h2>
|
||||||
</div>
|
</div>
|
||||||
<div class="header-spacer"></div>
|
|
||||||
<div class="header-actions">
|
|
||||||
<button class="save-button" id="save-settings">Save Settings</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="settings-content">
|
<div class="settings-content">
|
||||||
<!-- Category Tab Bar -->
|
<!-- Category Tab Bar -->
|
||||||
<div class="stg-tabbar">
|
<div class="settings-nav-row">
|
||||||
<button class="stg-tab active" data-tab="connections" onclick="switchSettingsTab('connections')">Connections</button>
|
<div class="stg-tabbar">
|
||||||
<button class="stg-tab" data-tab="downloads" onclick="switchSettingsTab('downloads')">Downloads</button>
|
<button class="stg-tab active" data-tab="connections" onclick="switchSettingsTab('connections')">Connections</button>
|
||||||
<button class="stg-tab" data-tab="quality" onclick="switchSettingsTab('quality')">Quality</button>
|
<button class="stg-tab" data-tab="downloads" onclick="switchSettingsTab('downloads')">Downloads</button>
|
||||||
<button class="stg-tab" data-tab="library" onclick="switchSettingsTab('library')">Library</button>
|
<button class="stg-tab" data-tab="quality" onclick="switchSettingsTab('quality')">Quality</button>
|
||||||
<button class="stg-tab" data-tab="appearance" onclick="switchSettingsTab('appearance')">Appearance</button>
|
<button class="stg-tab" data-tab="library" onclick="switchSettingsTab('library')">Library</button>
|
||||||
<button class="stg-tab" data-tab="advanced" onclick="switchSettingsTab('advanced')">Advanced</button>
|
<button class="stg-tab" data-tab="appearance" onclick="switchSettingsTab('appearance')">Appearance</button>
|
||||||
<button class="stg-tab" data-tab="logs" onclick="switchSettingsTab('logs')">Logs</button>
|
<button class="stg-tab" data-tab="advanced" onclick="switchSettingsTab('advanced')">Advanced</button>
|
||||||
|
<button class="stg-tab" data-tab="logs" onclick="switchSettingsTab('logs')">Logs</button>
|
||||||
|
</div>
|
||||||
|
<div class="header-actions">
|
||||||
|
<button class="save-button" id="save-settings">Save Settings</button>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- Settings Panels -->
|
<!-- Settings Panels -->
|
||||||
<div class="settings-columns">
|
<div class="settings-columns">
|
||||||
|
|
|
||||||
|
|
@ -55420,9 +55420,44 @@ tr.tag-diff-same {
|
||||||
padding-bottom: 10vh;
|
padding-bottom: 10vh;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Tab bar centered */
|
/* Tab bar + save action sit on one control row. */
|
||||||
#settings-page .stg-tabbar {
|
#settings-page .settings-nav-row {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 14px;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 920px;
|
||||||
margin: 0 auto 28px;
|
margin: 0 auto 28px;
|
||||||
|
padding: 0 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-page .stg-tabbar {
|
||||||
|
display: flex;
|
||||||
|
flex: 0 1 auto;
|
||||||
|
margin: 0;
|
||||||
|
width: fit-content;
|
||||||
|
max-width: 100%;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-page .settings-nav-row .header-actions {
|
||||||
|
display: flex;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
justify-content: flex-end;
|
||||||
|
align-items: center;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
width: auto;
|
||||||
|
margin: 0 0 0 auto;
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#settings-page .settings-nav-row .save-button {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border-radius: 9px;
|
||||||
|
font-size: 0.84em;
|
||||||
|
font-weight: 600;
|
||||||
|
white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Columns become single centered column */
|
/* Columns become single centered column */
|
||||||
|
|
@ -55459,38 +55494,38 @@ tr.tag-diff-same {
|
||||||
min-width: 0;
|
min-width: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── Compact settings header — single row, no wasted vertical space ── */
|
/* ── Settings local title — quiet, far-left, no dashboard banner ── */
|
||||||
#settings-page .dashboard-header.settings-header-compact {
|
#settings-page .dashboard-header.settings-header-compact {
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 12px 24px;
|
width: 100%;
|
||||||
margin-bottom: 16px;
|
min-height: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 0 12px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
overflow: visible;
|
||||||
}
|
}
|
||||||
/* Centre the Save button in the header regardless of the title width. */
|
#settings-page .dashboard-header.settings-header-compact::after,
|
||||||
#settings-page .settings-header-compact .header-actions {
|
#settings-page .settings-header-compact .dashboard-header-sweep {
|
||||||
position: absolute;
|
display: none;
|
||||||
left: 50%;
|
}
|
||||||
top: 50%;
|
#settings-page .settings-header-compact .header-text {
|
||||||
transform: translate(-50%, -50%);
|
min-width: 0;
|
||||||
margin: 0;
|
|
||||||
}
|
}
|
||||||
#settings-page .settings-header-compact .header-title {
|
#settings-page .settings-header-compact .header-title {
|
||||||
font-size: 1.15em;
|
font-size: 1.42em;
|
||||||
margin: 0;
|
margin: 0;
|
||||||
|
line-height: 1.1;
|
||||||
|
color: rgba(255, 255, 255, 0.88);
|
||||||
}
|
}
|
||||||
#settings-page .settings-header-compact .page-header-icon {
|
#settings-page .settings-header-compact .page-header-icon {
|
||||||
width: 26px;
|
width: 32px;
|
||||||
height: 26px;
|
height: 32px;
|
||||||
}
|
opacity: 0.86;
|
||||||
#settings-page .settings-header-compact .header-actions {
|
|
||||||
margin-left: auto;
|
|
||||||
}
|
|
||||||
#settings-page .settings-header-compact .header-actions .save-button {
|
|
||||||
padding: 9px 22px;
|
|
||||||
border-radius: 10px;
|
|
||||||
font-size: 0.9em;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Checkbox/label rows that carry an ⓘ icon span the full width so the help
|
/* Checkbox/label rows that carry an ⓘ icon span the full width so the help
|
||||||
|
|
@ -56560,11 +56595,20 @@ tr.tag-diff-same {
|
||||||
|
|
||||||
/* ── Responsive ── */
|
/* ── Responsive ── */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
|
#settings-page .settings-nav-row {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: flex-start;
|
||||||
|
gap: 10px;
|
||||||
|
padding: 0 8px;
|
||||||
|
}
|
||||||
|
#settings-page .settings-nav-row .header-actions {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
/* Tab bar scrolls horizontally */
|
/* Tab bar scrolls horizontally */
|
||||||
#settings-page .stg-tabbar {
|
#settings-page .stg-tabbar {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
flex: 1 1 100%;
|
||||||
border-radius: 0;
|
border-radius: 0;
|
||||||
margin-bottom: 16px;
|
|
||||||
justify-content: flex-start;
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
.stg-tab { padding: 8px 14px; font-size: 0.8em; }
|
.stg-tab { padding: 8px 14px; font-size: 0.8em; }
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue