From e3929572c32848e8f47a93b6b554dde52435cf94 Mon Sep 17 00:00:00 2001 From: claude Date: Fri, 12 Jun 2026 08:10:52 +0000 Subject: [PATCH] =?UTF-8?q?Fix=20Lumi=C3=A8re=20visual=20regressions:=20lo?= =?UTF-8?q?gin,=20footer,=20logo,=20notifications?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Login: centre logo (display:block + margin:auto, max-width 300px) and increase h1 from 1.4rem to 1.75rem - Sidebar logo: switch from width:120%/margin-left:-10% to transform:scale(1.2) so the image scales symmetrically from centre and isn't cut on the left - Footer: use !important on background-color/color to beat the dark-theme selector's higher specificity (:root [data-theme] = 0,4,0 vs our 0,3,0) - Notifications: replace near-transparent rgba backgrounds with solid opaque colours so the teal page gradient can't bleed through; make the CTA button neutral slate-grey (not teal) with border-radius:8px Co-Authored-By: Claude Sonnet 4.6 --- .../stylesheets/pages/login-register.scss | 8 ++- .../pages/project-list-ds-nav.scss | 5 +- .../pages/project-list-lumiere.scss | 59 +++++++++++-------- 3 files changed, 45 insertions(+), 27 deletions(-) diff --git a/services/web/frontend/stylesheets/pages/login-register.scss b/services/web/frontend/stylesheets/pages/login-register.scss index 3619c8eb9c..c499b5df05 100644 --- a/services/web/frontend/stylesheets/pages/login-register.scss +++ b/services/web/frontend/stylesheets/pages/login-register.scss @@ -43,6 +43,12 @@ background-repeat: repeat, no-repeat, no-repeat; background-color: #f0faf8; min-height: 100vh; + + .verso-login-logo { + display: block; + margin: 0 auto; + max-width: 300px; + } } .login-lumiere-card { @@ -75,7 +81,7 @@ margin-top: 0; h1 { - font-size: 1.4rem; + font-size: 1.75rem; font-weight: 700; color: #1a5c52; margin: 0; diff --git a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss index 9e9b15dd21..7fe45245fa 100644 --- a/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss +++ b/services/web/frontend/stylesheets/pages/project-list-ds-nav.scss @@ -259,9 +259,10 @@ body { img { display: block; - width: 120% !important; - margin-left: -10%; + width: 100% !important; height: auto; + transform: scale(1.2); + transform-origin: center center; } } diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss index c556a0628a..a9b1187a2b 100644 --- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss +++ b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss @@ -250,30 +250,36 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi border-radius: 10px; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); - // Warning stays amber so it's visually distinct from all the teal UI + // Warning: solid amber-tinted white so the teal page background can't bleed + // through. !important needed to beat :root [data-theme='default'] specificity. &.notification-type-warning { - --notification-bg-warning: rgba(217, 119, 6, 0.08); - --notification-border-warning: rgba(217, 119, 6, 0.30); - --notification-icon-warning: #b45309; + background-color: #fffbf0 !important; + border-color: rgba(217, 119, 6, 0.35) !important; + + .notification-icon { color: #b45309 !important; } } + // Info: solid blue-tinted white for the same reason &.notification-type-info { - --notification-bg-info: #{rgba($lum-blue, 0.07)}; - --notification-border-info: #{rgba($lum-blue, 0.25)}; - --notification-icon-info: #{$lum-blue}; + background-color: #f0f6fd !important; + border-color: rgba($lum-blue, 0.28) !important; + + .notification-icon { color: $lum-blue !important; } } - // Action buttons (e.g. "Send confirmation code") inside notification CTAs + // Action buttons (e.g. "Send confirmation code") — neutral slate-grey, + // rounded-square to match the Lumière button style. .notification-cta .btn-secondary { - background-color: rgba($lum-teal, 0.08); - border-color: rgba($lum-teal, 0.28); - color: $lum-teal; + background-color: rgba(100, 116, 139, 0.10) !important; + border-color: rgba(100, 116, 139, 0.28) !important; + color: $lum-text !important; + border-radius: 8px !important; &:hover, &:focus { - background-color: rgba($lum-teal, 0.15); - border-color: rgba($lum-teal, 0.45); - color: darken($lum-teal, 6%); + background-color: rgba(100, 116, 139, 0.18) !important; + border-color: rgba(100, 116, 139, 0.38) !important; + color: $lum-text !important; } } } @@ -590,25 +596,30 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi } // ── Footer — Lumière override ───────────────────────────────────────────────── -// The default theme sets footer-dark on .project-ds-nav-page .fat-footer via -// [data-theme='default'] (specificity 0,3,0). This selector matches at the same -// specificity but appears later in the cascade so it wins. +// The dark theme rule is :root [data-theme='default'] .project-ds-nav-page +// .fat-footer with specificity (0,4,0), which beats a plain class selector. +// We use !important on actual properties to guarantee the light-teal look +// regardless of the user's theme preference. -.project-list-lumiere.project-ds-nav-page .fat-footer { - --footer-background: #edf7f5; - --footer-content: #{$lum-text}; - --footer-link: #{$lum-text-sub}; +.project-list-lumiere .fat-footer { + background-color: #e6f4f1 !important; + color: $lum-text !important; border-top: 1px solid $lum-border; .footer-section-heading { - color: $lum-teal; + color: $lum-teal !important; } .fat-footer-base { - color: $lum-text-muted; + color: $lum-text-muted !important; #language-picker-toggle { - color: $lum-text-sub; + color: $lum-text-sub !important; } } + + // Links override + --link-color: #{$lum-text-sub}; + --link-hover-color: #{$lum-teal}; + --link-visited-color: #{$lum-text-sub}; }