From d412975a4c2bdb2b33ec4abc96ad9969671bc657 Mon Sep 17 00:00:00 2001 From: Yvv Date: Mon, 23 Feb 2026 04:02:10 +0100 Subject: [PATCH] =?UTF-8?q?Fix=20light=20mode=20nav=20invisible,=20logo=20?= =?UTF-8?q?=C2=A7=20calligraphi=C3=A9,=20typo=20ronde=20fine?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 --- app/assets/css/main.css | 74 +++++++++++++++++++---------- app/components/layout/NavMobile.vue | 4 +- app/components/layout/TheFooter.vue | 6 +-- app/components/layout/TheHeader.vue | 44 +++++++++++++++-- public/images/logo-section.svg | 53 +++++++++++++++++++++ uno.config.ts | 4 +- 6 files changed, 147 insertions(+), 38 deletions(-) create mode 100644 public/images/logo-section.svg diff --git a/app/assets/css/main.css b/app/assets/css/main.css index 359d049..a678c75 100644 --- a/app/assets/css/main.css +++ b/app/assets/css/main.css @@ -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 */ diff --git a/app/components/layout/NavMobile.vue b/app/components/layout/NavMobile.vue index 9b14590..a0ba54d 100644 --- a/app/components/layout/NavMobile.vue +++ b/app/components/layout/NavMobile.vue @@ -11,7 +11,7 @@