Zaki/Password-Manager
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(settings): move tabs to a vertical column on the left

Browse Source 
Wrapped the tab bar + body in a .settings-main flex row; tabs now stack
vertically on the left with a right border, body scrolls on the right. JS
unchanged (toggles .is-tab-hidden on sections regardless of layout).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
r-zakarya
2026-07-10 04:56:16 +01:00
parent d333ce00ec
commit 18533486b7
2 changed files with 13 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
css/style.css
+11 -7
View File
@@ -2183,14 +2183,18 @@ body[data-editor-position="center"]:has(#settingsPanel.is-open)::before {
.settings-search-clear svg { width: 12px; height: 12px; }
.settings-search-clear:hover { color: var(--text); background: var(--bg-elev-2); }
.settings-search-wrap.has-query .settings-search-clear { display: inline-flex; }
/* Settings tabs — group sections; JS toggles .is-tab-hidden. */
.settings-tabs { display: flex; gap: 4px; padding: 0 16px 8px; flex-wrap: wrap; }
.settings-tab {
flex: 1; min-width: 70px; padding: 6px 10px; font-size: 12px; cursor: pointer;
color: var(--text-dim); background: var(--bg-elev-2); border: 1px solid var(--border);
border-radius: 6px;
/* Settings tabs — vertical column on the left; JS toggles .is-tab-hidden. */
.settings-main { display: flex; flex: 1; min-height: 0; }
.settings-tabs {
display: flex; flex-direction: column; gap: 4px; padding: 12px 8px;
flex: 0 0 auto; border-right: 1px solid var(--border); overflow-y: auto;
}
.settings-tab:hover { background: var(--bg-elev-3); }
.settings-tab {
text-align: left; width: 100%; padding: 7px 12px; font-size: 12px; cursor: pointer;
color: var(--text-dim); background: transparent; border: 1px solid transparent;
border-radius: 6px; white-space: nowrap;
}
.settings-tab:hover { background: var(--bg-elev-2); }
.settings-tab.is-active { color: var(--accent-fg); background: var(--accent); border-color: var(--accent); }
.slideover-field.is-tab-hidden { display: none; }
/* Hidden section + per-row + no-results banner driven by JS. */
index.html
+2
View File
@@ -413,6 +413,7 @@
<svg><use href="#i-x"/></svg>
</button>
</div>
<div class="settings-main">
<div class="settings-tabs" id="settingsTabs">
<button class="settings-tab is-active" data-tab="general">Général</button>
<button class="settings-tab" data-tab="security">Sécurité</button>
@@ -865,6 +866,7 @@
</div>
</div>
</div>
</div>
</aside>
<!-- ============================================================ -->