cedricAbonnel/folio
1
0
Fork 0
Code Issues 15 Pull Requests Actions Packages Projects Releases Wiki Activity

fix : densité L/M/S — widget fixe haut-droite, CSS !important

Browse Source 
- Widget retiré du hero-search, replacé en position:fixed top-right (sous navbar)
- max-width !important pour garantir l'override de Bootstrap sur main.container-fluid
- transition douce sur main, caché en < 576px

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Cédric Abonnel
2026-05-15 20:35:59 +02:00
parent a55e22f1f4
commit 5e88d44129
2 changed files with 37 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/css/style.css
+23 -15
View File
@@ -1259,28 +1259,35 @@ footer.mt-5 { margin-top: 0 !important; }
transition: background .2s;
}
.hero-search-btn:hover { background: var(--vl-accent-dark); }
.hero-search-footer {
display: flex;
align-items: center;
justify-content: center;
gap: .75rem;
margin-top: .8rem;
}
.hero-search-stats {
margin-top: .8rem;
font-size: .83rem;
color: var(--vl-muted);
letter-spacing: .01em;
margin: 0;
}
/* ─── Densité d'affichage L / M / S ──────── */
body[data-density="m"] main { max-width: 980px; margin-left: auto; margin-right: auto; }
body[data-density="s"] main { max-width: 660px; margin-left: auto; margin-right: auto; }
main { transition: max-width .22s ease, padding-left .22s ease, padding-right .22s ease; }
body[data-density="m"] main { max-width: 980px !important; margin-left: auto !important; margin-right: auto !important; }
body[data-density="s"] main { max-width: 660px !important; margin-left: auto !important; margin-right: auto !important; }
.density-toggle { display: flex; gap: 2px; }
/* Widget fixe haut-droite */
.density-widget {
position: fixed;
top: 3.6rem;
right: 1rem;
z-index: 1010;
display: flex;
gap: 2px;
background: var(--vl-surface);
border: 1px solid var(--vl-border);
border-radius: 6px;
padding: 3px;
box-shadow: var(--vl-shadow-sm);
}
.density-btn {
background: none;
border: 1px solid var(--vl-border);
border: 1px solid transparent;
border-radius: 4px;
color: var(--vl-muted);
cursor: pointer;
@@ -1288,11 +1295,12 @@ body[data-density="s"] main { max-width: 660px; margin-left: auto; margin-right:
font-weight: 700;
letter-spacing: .06em;
line-height: 1;
padding: 3px 7px;
padding: 4px 8px;
transition: background .15s, color .15s, border-color .15s;
}
.density-btn:hover { background: rgba(0,0,0,.05); color: var(--vl-text); border-color: var(--vl-muted); }
.density-btn.active { background: var(--vl-text); border-color: var(--vl-text); color: var(--vl-bg); }
.density-btn:hover { background: rgba(0,0,0,.06); color: var(--vl-text); }
.density-btn.active { background: var(--vl-text); color: var(--vl-bg); }
@media (max-width: 576px) { .density-widget { display: none; } }
/* ─── Page de recherche ───────────────────── */
.search-page { max-width: 780px; margin: 0 auto; }