From fd118279772e926202c639d4053dd970b0b3ef6a Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Sun, 22 Mar 2026 00:41:45 -0400 Subject: [PATCH] Simplify header dropdown menu with streamlined list-based layout, remove card-based design, and reduce visual complexity with cleaner styling --- frontend/index.html | 70 +++++++---------- frontend/style.css | 186 ++++++++++++++++---------------------------- 2 files changed, 96 insertions(+), 160 deletions(-) diff --git a/frontend/index.html b/frontend/index.html index 8c109de..4585003 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -88,50 +88,36 @@
-
-
⚙️ Réglages rapides
-
Personnalisez votre espace
-
Vault actif, thème et guide d'utilisation en un seul endroit.
-
-
-
Vault
-
-
🗂️
-
-
Contexte de navigation
- -
-
-
-
-
-
Thème
-
-
🌗
-
-
Apparence
- -
-
-
-
-
-
Aide
-
-
💡
-
-
Documentation intégrée
- -
-
+ + + +
diff --git a/frontend/style.css b/frontend/style.css index 28bf310..4304735 100644 --- a/frontend/style.css +++ b/frontend/style.css @@ -182,7 +182,7 @@ a:hover { } .header-menu-btn { - background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 92%, white 8%), var(--bg-secondary)); + background: transparent; border: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border)); border-radius: 12px; padding: 10px 12px; @@ -191,19 +191,17 @@ a:hover { display: flex; align-items: center; justify-content: center; - box-shadow: 0 8px 24px rgba(0,0,0,0.22); - transition: color 200ms ease, border-color 200ms ease, background 200ms ease, transform 180ms ease, box-shadow 200ms ease; + transition: color 200ms ease, border-color 200ms ease, background 200ms ease, transform 180ms ease; } .header-menu-btn:hover { color: var(--accent); border-color: var(--accent); transform: translateY(-1px); - box-shadow: 0 12px 28px rgba(0,0,0,0.28); } .header-menu-btn.active { color: var(--accent); border-color: var(--accent); - background: color-mix(in srgb, var(--accent) 16%, var(--bg-secondary)); + background: color-mix(in srgb, var(--accent) 10%, transparent); } .header-menu-dropdown { @@ -211,148 +209,100 @@ a:hover { position: absolute; top: calc(100% + 8px); right: 0; - background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 96%, white 4%), var(--bg-secondary)); - border: 1px solid var(--border); - border-radius: 14px; - box-shadow: 0 18px 44px rgba(0,0,0,0.42); - min-width: 330px; + background: color-mix(in srgb, var(--bg-secondary) 98%, white 2%); + border: 1px solid color-mix(in srgb, var(--border) 86%, white 14%); + border-radius: 16px; + box-shadow: 0 16px 36px rgba(0,0,0,0.28); + min-width: 260px; z-index: 100; - padding: 14px; - backdrop-filter: blur(12px); + padding: 8px; } .header-menu-dropdown.active { display: block; } -.menu-overview { - padding: 10px 12px 14px; - border: 1px solid color-mix(in srgb, var(--accent) 18%, var(--border)); - border-radius: 12px; - background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 10%, transparent), transparent 60%); - margin-bottom: 10px; -} - -.menu-overview-badge { - display: inline-flex; - align-items: center; - padding: 4px 8px; - border-radius: 999px; - background: color-mix(in srgb, var(--accent) 16%, transparent); - color: var(--accent); - font-family: 'JetBrains Mono', monospace; - font-size: 0.68rem; - margin-bottom: 10px; -} - -.menu-overview-title { - font-family: 'JetBrains Mono', monospace; - font-size: 1rem; - font-weight: 700; - color: var(--text-primary); - margin-bottom: 4px; -} - -.menu-overview-subtitle { - font-size: 0.82rem; - line-height: 1.5; - color: var(--text-secondary); -} - -.menu-section { - padding: 10px 0; -} - -.menu-label { - font-family: 'JetBrains Mono', monospace; - font-size: 0.7rem; - color: var(--text-muted); - text-transform: uppercase; - letter-spacing: 0.5px; - margin-bottom: 6px; - font-weight: 600; -} - -.menu-field-card { +.menu-list { display: flex; - gap: 10px; - align-items: flex-start; - padding: 12px; - border: 1px solid var(--border); - border-radius: 12px; - background: color-mix(in srgb, var(--bg-primary) 58%, transparent); + flex-direction: column; } -.menu-field-icon { - width: 34px; - height: 34px; - border-radius: 10px; +.menu-list-row { + width: 100%; + display: grid; + grid-template-columns: 36px minmax(0, 1fr); + gap: 10px; + align-items: center; + padding: 10px 12px; + border-radius: 12px; + color: var(--text-primary); + text-align: left; +} + +.menu-list-button { + border: none; + background: transparent; + cursor: pointer; + transition: background 160ms ease, color 160ms ease; +} + +.menu-list-button:hover, +.menu-list-select-row:hover { + background: var(--bg-hover); +} + +.menu-list-button + .menu-list-button, +.menu-list-select-row + .menu-list-button { + margin-top: 2px; +} + +.menu-list-icon { + width: 24px; + height: 24px; display: inline-flex; align-items: center; justify-content: center; - background: color-mix(in srgb, var(--accent) 16%, transparent); - flex: 0 0 auto; - font-size: 1rem; + color: var(--accent); } -.menu-field-body { - flex: 1; +.menu-list-content { + display: flex; + flex-direction: column; + gap: 3px; min-width: 0; } -.menu-field-title { +.menu-list-title { font-family: 'JetBrains Mono', monospace; - font-size: 0.8rem; + font-size: 0.85rem; + font-weight: 600; color: var(--text-primary); - margin-bottom: 8px; +} + +.menu-list-subtitle { + font-size: 0.76rem; + color: var(--text-muted); } .menu-select { width: 100%; - padding: 11px 14px; - border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border)); - border-radius: 10px; - background: color-mix(in srgb, var(--search-bg) 88%, white 12%); + padding: 4px 22px 4px 0; + border: none; + border-radius: 0; + background: transparent; color: var(--text-primary); font-family: 'JetBrains Mono', monospace; - font-size: 0.86rem; - font-weight: 700; + font-size: 0.78rem; + font-weight: 500; outline: none; cursor: pointer; - transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease; + transition: color 160ms ease; } .menu-select:hover, .menu-select:focus { - border-color: var(--accent); - box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); -} - -.menu-divider { - height: 1px; - background: var(--border); - margin: 2px 0; -} - -.menu-theme-btn { - width: 100%; - background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 92%, white 8%), var(--bg-primary)); - border: 1px solid var(--border); - border-radius: 10px; - padding: 11px 12px; - cursor: pointer; - color: var(--text-primary); - display: inline-flex; - align-items: center; - justify-content: center; - gap: 8px; - font-family: 'JetBrains Mono', monospace; - font-size: 0.84rem; - font-weight: 700; - transition: border-color 200ms ease, color 200ms ease, background 200ms ease, transform 180ms ease; -} -.menu-theme-btn:hover { - border-color: var(--accent); color: var(--accent); - background: color-mix(in srgb, var(--accent) 10%, var(--bg-primary)); - transform: translateY(-1px); +} + +.menu-list-select { + margin-top: 1px; } /* --- Main body --- */ @@ -1612,7 +1562,7 @@ body.resizing-v { .header-menu-dropdown { right: -8px; - min-width: 280px; + min-width: 240px; } .sidebar-quick-select {