alois/Verso
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix Lumière notification colors, style CTA button, and theme footer

Browse Source 
- Warning notification: switch from teal to amber (#b45309) so it reads as
  a genuine warning and doesn't blend into the teal UI chrome
- Notification CTA button (.btn-secondary): style with teal tint so the
  'Send confirmation code' button matches the Lumière theme
- Footer: override dark footer on .project-list-lumiere with a light teal
  background (#edf7f5), dark text, teal section headings — selector has same
  specificity as the default-theme dark rule but appears later in the cascade

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
claude
2026-06-11 16:16:28 +00:00
parent e19cd6e8ba
commit 8d3f550cef
1 changed files with 42 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/stylesheets/pages/project-list-lumiere.scss
+42 -5
View File
@@ -244,18 +244,17 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
// ══════════════════════════════════════════════════════════════════════════
// NOTIFICATIONS — Lumière palette
// Override the Bootstrap-orange warning and generic-blue info with teal tones
// so notification banners feel native to the Lumière theme.
// ══════════════════════════════════════════════════════════════════════════
.notification {
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
&.notification-type-warning {
--notification-bg-warning: #{rgba($lum-teal, 0.08)};
--notification-border-warning: #{rgba($lum-teal, 0.28)};
--notification-icon-warning: #{$lum-teal};
--notification-bg-warning: rgba(217, 119, 6, 0.08);
--notification-border-warning: rgba(217, 119, 6, 0.30);
--notification-icon-warning: #b45309;
}
&.notification-type-info {
@@ -263,6 +262,20 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
--notification-border-info: #{rgba($lum-blue, 0.25)};
--notification-icon-info: #{$lum-blue};
}
// Action buttons (e.g. "Send confirmation code") inside notification CTAs
.notification-cta .btn-secondary {
background-color: rgba($lum-teal, 0.08);
border-color: rgba($lum-teal, 0.28);
color: $lum-teal;
&:hover,
&:focus {
background-color: rgba($lum-teal, 0.15);
border-color: rgba($lum-teal, 0.45);
color: darken($lum-teal, 6%);
}
}
}
// ══════════════════════════════════════════════════════════════════════════
@@ -575,3 +588,27 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
color: #7c4dff;
}
}
// ── 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.
.project-list-lumiere.project-ds-nav-page .fat-footer {
--footer-background: #edf7f5;
--footer-content: #{$lum-text};
--footer-link: #{$lum-text-sub};
border-top: 1px solid $lum-border;
.footer-section-heading {
color: $lum-teal;
}
.fat-footer-base {
color: $lum-text-muted;
#language-picker-toggle {
color: $lum-text-sub;
}
}
}