diff --git a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss index b3dd8f6f19..49edb00fd5 100644 --- a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss +++ b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss @@ -49,8 +49,16 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi [data-lumiere='true'] .ide-redesign-toolbar { position: relative; - // Subtle teal wash that fades to near-white — visible but not loud - background: linear-gradient(180deg, #d8f0eb 0%, #f4fbf9 100%) !important; + // Exponential-ish teal wash: strong at top, nearly gone by mid-height + background: + linear-gradient( + 180deg, + rgba(42, 157, 143, 0.20) 0%, + rgba(42, 157, 143, 0.09) 30%, + rgba(42, 157, 143, 0.03) 60%, + transparent 100% + ), + #f7fdfc !important; border-bottom: 1px solid $lum-border; box-shadow: 0 2px 10px rgba(42, 157, 143, 0.10); diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss index 4fee529097..9a234f9e9b 100644 --- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss +++ b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss @@ -318,12 +318,14 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi .lumiere-header { display: flex; - flex-direction: column; - gap: 0.75rem; + align-items: center; + justify-content: space-between; + gap: 1rem; margin-bottom: 1.75rem; + flex-wrap: wrap; } - // Title + zoom control on the same row + // Title + zoom control grouped on the left .lumiere-title-row { display: flex; align-items: center; @@ -335,6 +337,7 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi display: flex; align-items: center; gap: 0.75rem; + flex-shrink: 0; flex-wrap: wrap; } @@ -483,13 +486,13 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi opacity: 1; } - // Selected card: teal border + tint + // Selected card: blue ring on solid white — clearly distinct from the teal page bg .lumiere-card-wrapper:has(input[type='checkbox']:checked) .lumiere-card { - border-color: rgba($lum-teal, 0.5); - background: rgba($lum-teal, 0.06); + border-color: rgba($lum-blue, 0.65); + background: rgba(255, 255, 255, 0.96); box-shadow: - 0 0 0 2px rgba($lum-teal, 0.18), - 0 2px 8px rgba(0, 0, 0, 0.07); + 0 0 0 3px rgba($lum-blue, 0.22), + 0 4px 12px rgba(0, 0, 0, 0.10); } // ── Individual card ───────────────────────────────────────────────────────