EHV/librodrome
18
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix light mode nav invisible, logo § calligraphié, typo ronde fine

Browse Source 
- Navigation : btn-ghost, active-class, footer, nav mobile → CSS vars adaptatifs
- Overrides light mode renforcés avec !important (scoped styles compatibles)
- btn-primary garde text-white en light mode (fond coloré)
- Logo : symbole § calligraphié SVG inline remplace lucide-book-open
- Logo text : font-display weight 300 (ronde fine) + text-gradient
- Logo SVG aussi exporté en /public/images/logo-section.svg
- Header/footer : backgrounds et bordures via CSS vars

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Yvv
2026-02-23 04:02:10 +01:00
parent 326ae0ca77
commit d412975a4c
6 changed files with 147 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

74
app/assets/css/main.css
View File

@@ -90,71 +90,93 @@ a {
color-scheme: light;
}
/* Force all white text → adaptive text color in light mode.
Using !important to override scoped component styles and UnoCSS utilities. */
.palette-light,
.palette-light .text-white {
color: hsl(var(--color-text));
color: hsl(var(--color-text)) !important;
}
/* white with opacity → dark text with same opacity */
.palette-light .text-white\/20 { color: hsl(var(--color-text) / 0.2); }
.palette-light .text-white\/30 { color: hsl(var(--color-text) / 0.3); }
.palette-light .text-white\/40 { color: hsl(var(--color-text) / 0.4); }
.palette-light .text-white\/45 { color: hsl(var(--color-text) / 0.45); }
.palette-light .text-white\/50 { color: hsl(var(--color-text) / 0.5); }
.palette-light .text-white\/60 { color: hsl(var(--color-text) / 0.6); }
.palette-light .text-white\/70 { color: hsl(var(--color-text) / 0.7); }
.palette-light .text-white\/80 { color: hsl(var(--color-text) / 0.8); }
.palette-light .text-white\/85 { color: hsl(var(--color-text) / 0.85); }
.palette-light .text-white\/20 { color: hsl(var(--color-text) / 0.2) !important; }
.palette-light .text-white\/30 { color: hsl(var(--color-text) / 0.3) !important; }
.palette-light .text-white\/40 { color: hsl(var(--color-text) / 0.4) !important; }
.palette-light .text-white\/45 { color: hsl(var(--color-text) / 0.45) !important; }
.palette-light .text-white\/50 { color: hsl(var(--color-text) / 0.5) !important; }
.palette-light .text-white\/60 { color: hsl(var(--color-text) / 0.6) !important; }
.palette-light .text-white\/70 { color: hsl(var(--color-text) / 0.7) !important; }
.palette-light .text-white\/80 { color: hsl(var(--color-text) / 0.8) !important; }
.palette-light .text-white\/85 { color: hsl(var(--color-text) / 0.85) !important; }
/* white backgrounds → surface tones */
.palette-light .bg-white\/5 { background-color: hsl(var(--color-text) / 0.04); }
.palette-light .bg-white\/8 { background-color: hsl(var(--color-text) / 0.06); }
.palette-light .bg-white\/10 { background-color: hsl(var(--color-text) / 0.07); }
.palette-light .bg-white\/5 { background-color: hsl(var(--color-text) / 0.04) !important; }
.palette-light .bg-white\/8 { background-color: hsl(var(--color-text) / 0.06) !important; }
.palette-light .bg-white\/10 { background-color: hsl(var(--color-text) / 0.07) !important; }
/* borders */
.palette-light .border-white\/8 { border-color: hsl(var(--color-text) / 0.1); }
.palette-light .border-white\/8 { border-color: hsl(var(--color-text) / 0.1) !important; }
/* hover overrides */
.palette-light .hover\:text-white:hover,
.palette-light .hover\:text-white\/70:hover,
.palette-light .hover\:text-white\/80:hover {
color: hsl(var(--color-text));
color: hsl(var(--color-text)) !important;
}
.palette-light .hover\:text-white\/60:hover {
color: hsl(var(--color-text) / 0.6);
color: hsl(var(--color-text) / 0.6) !important;
}
.palette-light .hover\:bg-white\/5:hover {
background-color: hsl(var(--color-text) / 0.04);
background-color: hsl(var(--color-text) / 0.04) !important;
}
.palette-light .hover\:bg-white\/10:hover {
background-color: hsl(var(--color-text) / 0.07);
background-color: hsl(var(--color-text) / 0.07) !important;
}
/* group-hover overrides */
.palette-light .group:hover .group-hover\:text-primary\/60 {
color: hsl(var(--color-primary) / 0.6) !important;
}
/* placeholder overrides */
.palette-light .placeholder\:text-white\/30::placeholder {
color: hsl(var(--color-text) / 0.3);
color: hsl(var(--color-text) / 0.3) !important;
}
/* Prose/content in light mode */
.palette-light .prose { color: hsl(var(--color-text)); }
.palette-light .prose :where(h1,h2,h3,h4,h5,h6) { color: hsl(var(--color-text)); }
/* Active states */
.palette-light .text-white\! { color: hsl(var(--color-text)) !important; }
.palette-light .active-class .text-white\! { color: hsl(var(--color-text)) !important; }
/* text-gradient in light mode */
/* text-gradient in light mode — needs transparent fill override */
.palette-light .text-gradient {
background-image: linear-gradient(to right, hsl(var(--color-primary)), hsl(var(--color-accent)));
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent !important;
}
/* card surfaces */
.palette-light .card-surface {
background: hsl(var(--color-surface));
border-color: hsl(var(--color-text) / 0.1);
background: hsl(var(--color-surface)) !important;
border-color: hsl(var(--color-text) / 0.1) !important;
}
/* btn-primary text stays white on colored bg */
.palette-light .btn-primary {
color: white !important;
}
/* input fields */
.palette-light input,
.palette-light textarea {
color: hsl(var(--color-text));
background-color: hsl(var(--color-surface));
border-color: hsl(var(--color-text) / 0.12);
}
/* Ecouter view toggle buttons */
.palette-light .bg-white\/10 {
background-color: hsl(var(--color-text) / 0.1) !important;
}
/* Page transitions */