Projets/ObsiGate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify header dropdown menu with streamlined list-based layout, remove card-based design, and reduce visual complexity with cleaner styling

Browse Source
This commit is contained in:
Bruno Charest 2026-03-22 00:41:45 -04:00
parent 1e7c8dd6a8
commit fd11827977
2 changed files with 96 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
frontend/index.html
View File

@ -88,50 +88,36 @@
<i data-lucide="settings" style="width:18px;height:18px"></i> <i data-lucide="settings" style="width:18px;height:18px"></i>
</button> </button>
<div class="header-menu-dropdown" id="header-menu-dropdown"> <div class="header-menu-dropdown" id="header-menu-dropdown">
<div class="menu-overview"> <div class="menu-list" role="menu" aria-label="Options">
<div class="menu-overview-badge">⚙️ Réglages rapides</div> <label class="menu-list-row menu-list-select-row" for="vault-filter">
<div class="menu-overview-title">Personnalisez votre espace</div> <span class="menu-list-icon" aria-hidden="true">
<div class="menu-overview-subtitle">Vault actif, thème et guide d'utilisation en un seul endroit.</div> <i data-lucide="folders" style="width:17px;height:17px"></i>
</div> </span>
<div class="menu-section"> <span class="menu-list-content">
<div class="menu-label">Vault</div> <span class="menu-list-title">Vault</span>
<div class="menu-field-card"> <select id="vault-filter" class="menu-select menu-list-select">
<div class="menu-field-icon">🗂️</div>
<div class="menu-field-body">
<div class="menu-field-title">Contexte de navigation</div>
<select id="vault-filter" class="menu-select">
<option value="all">Tous les vaults</option> <option value="all">Tous les vaults</option>
</select> </select>
</div> </span>
</div> </label>
</div> <button class="menu-list-row menu-list-button" id="theme-toggle" type="button" role="menuitem">
<div class="menu-divider"></div> <span class="menu-list-icon" aria-hidden="true">
<div class="menu-section"> <i data-lucide="sun" style="width:17px;height:17px"></i>
<div class="menu-label">Thème</div> </span>
<div class="menu-field-card"> <span class="menu-list-content">
<div class="menu-field-icon">🌗</div> <span class="menu-list-title">Thème</span>
<div class="menu-field-body"> <span class="menu-list-subtitle" id="theme-label">Clair</span>
<div class="menu-field-title">Apparence</div> </span>
<button class="menu-theme-btn" id="theme-toggle"> </button>
<i data-lucide="sun" style="width:16px;height:16px"></i> <button class="menu-list-row menu-list-button" id="help-open-btn" type="button" role="menuitem">
<span id="theme-label">Clair</span> <span class="menu-list-icon" aria-hidden="true">
</button> <i data-lucide="circle-help" style="width:17px;height:17px"></i>
</div> </span>
</div> <span class="menu-list-content">
</div> <span class="menu-list-title">Guide d'utilisation</span>
<div class="menu-divider"></div> <span class="menu-list-subtitle">Ouvrir l'aide</span>
<div class="menu-section"> </span>
<div class="menu-label">Aide</div> </button>
<div class="menu-field-card">
<div class="menu-field-icon">💡</div>
<div class="menu-field-body">
<div class="menu-field-title">Documentation intégrée</div>
<button class="menu-theme-btn" id="help-open-btn">
<i data-lucide="circle-help" style="width:16px;height:16px"></i>
<span>Ouvrir l'aide</span>
</button>
</div>
</div>
</div> </div>
</div> </div>
</div> </div>

186
frontend/style.css
View File

@ -182,7 +182,7 @@ a:hover {
} }
.header-menu-btn { .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: 1px solid color-mix(in srgb, var(--accent) 22%, var(--border));
border-radius: 12px; border-radius: 12px;
padding: 10px 12px; padding: 10px 12px;
@ -191,19 +191,17 @@ a:hover {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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;
transition: color 200ms ease, border-color 200ms ease, background 200ms ease, transform 180ms ease, box-shadow 200ms ease;
} }
.header-menu-btn:hover { .header-menu-btn:hover {
color: var(--accent); color: var(--accent);
border-color: var(--accent); border-color: var(--accent);
transform: translateY(-1px); transform: translateY(-1px);
box-shadow: 0 12px 28px rgba(0,0,0,0.28);
} }
.header-menu-btn.active { .header-menu-btn.active {
color: var(--accent); color: var(--accent);
border-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 { .header-menu-dropdown {
@ -211,148 +209,100 @@ a:hover {
position: absolute; position: absolute;
top: calc(100% + 8px); top: calc(100% + 8px);
right: 0; right: 0;
background: linear-gradient(180deg, color-mix(in srgb, var(--bg-secondary) 96%, white 4%), var(--bg-secondary)); background: color-mix(in srgb, var(--bg-secondary) 98%, white 2%);
border: 1px solid var(--border); border: 1px solid color-mix(in srgb, var(--border) 86%, white 14%);
border-radius: 14px; border-radius: 16px;
box-shadow: 0 18px 44px rgba(0,0,0,0.42); box-shadow: 0 16px 36px rgba(0,0,0,0.28);
min-width: 330px; min-width: 260px;
z-index: 100; z-index: 100;
padding: 14px; padding: 8px;
backdrop-filter: blur(12px);
} }
.header-menu-dropdown.active { .header-menu-dropdown.active {
display: block; display: block;
} }
.menu-overview { .menu-list {
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 {
display: flex; display: flex;
gap: 10px; flex-direction: column;
align-items: flex-start;
padding: 12px;
border: 1px solid var(--border);
border-radius: 12px;
background: color-mix(in srgb, var(--bg-primary) 58%, transparent);
} }
.menu-field-icon { .menu-list-row {
width: 34px; width: 100%;
height: 34px; display: grid;
border-radius: 10px; 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; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent);
flex: 0 0 auto;
font-size: 1rem;
} }
.menu-field-body { .menu-list-content {
flex: 1; display: flex;
flex-direction: column;
gap: 3px;
min-width: 0; min-width: 0;
} }
.menu-field-title { .menu-list-title {
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 0.8rem; font-size: 0.85rem;
font-weight: 600;
color: var(--text-primary); color: var(--text-primary);
margin-bottom: 8px; }
.menu-list-subtitle {
font-size: 0.76rem;
color: var(--text-muted);
} }
.menu-select { .menu-select {
width: 100%; width: 100%;
padding: 11px 14px; padding: 4px 22px 4px 0;
border: 1px solid color-mix(in srgb, var(--accent) 16%, var(--border)); border: none;
border-radius: 10px; border-radius: 0;
background: color-mix(in srgb, var(--search-bg) 88%, white 12%); background: transparent;
color: var(--text-primary); color: var(--text-primary);
font-family: 'JetBrains Mono', monospace; font-family: 'JetBrains Mono', monospace;
font-size: 0.86rem; font-size: 0.78rem;
font-weight: 700; font-weight: 500;
outline: none; outline: none;
cursor: pointer; cursor: pointer;
transition: border-color 200ms ease, box-shadow 200ms ease, background 200ms ease; transition: color 160ms ease;
} }
.menu-select:hover, .menu-select:focus { .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); 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 --- */ /* --- Main body --- */
@ -1612,7 +1562,7 @@ body.resizing-v {
.header-menu-dropdown { .header-menu-dropdown {
right: -8px; right: -8px;
min-width: 280px; min-width: 240px;
} }
.sidebar-quick-select { .sidebar-quick-select {