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

feat(lumiere): Lumière-styled notification banners
Build and Deploy Verso / deploy (push) Successful in 20m14s
Details

Browse Source 
Override Bootstrap orange/yellow warning and generic blue info colors
with the Lumière teal palette. Warning banners now use a soft teal
tint instead of orange; info banners use the Lumière blue. Both types
get 10px border-radius and a subtle shadow to match the card style.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
claude
2026-06-11 15:35:35 +00:00
parent 466f908f7c
commit c70ec1c501
1 changed files with 23 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
services/web/frontend/stylesheets/pages/project-list-lumiere.scss
+23
View File
@@ -242,6 +242,29 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi
.material-symbols { color: #ffffff; }
}
// ══════════════════════════════════════════════════════════════════════════
// 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);
&.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-type-info {
--notification-bg-info: #{rgba($lum-blue, 0.07)};
--notification-border-info: #{rgba($lum-blue, 0.25)};
--notification-icon-info: #{$lum-blue};
}
}
// ══════════════════════════════════════════════════════════════════════════
// MAIN CONTENT AREA — grainy gradient background
//