diff --git a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss index 9ca54af8af..7448fa2b61 100644 --- a/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss +++ b/services/web/frontend/stylesheets/pages/editor/ide-lumiere.scss @@ -1,78 +1,124 @@ // Verso Lumière — editor chrome overrides. -// Scoped to body[data-lumiere='true'] so zero impact on Classic themes. -// Sets CSS variable overrides and adds the signature teal/blue accent stripe. +// Scoped to body[data-lumiere='true'] — zero impact on Classic themes. $lum-teal: #2a9d8f; $lum-blue: #3d7ebf; -$lum-border: #e2eaf2; +$lum-border: #daeae7; + +// Same noise as the dashboard +$lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.22'/%3E%3C/svg%3E"); // ── CSS variable overrides ───────────────────────────────────────────────── [data-lumiere='true'] { // Toolbar - --redesign-toolbar-background: #ffffff; - --redesign-toolbar-border-divider: #{$lum-border}; - --redesign-toolbar-home-button-hover-background: rgba(#{$lum-teal}, 0.08); - --redesign-subdued-button-hover-background: rgba(42, 157, 143, 0.08); - --redesign-subdued-button-color: #1a2e3b; + --redesign-toolbar-background: #f4fbf9; + --redesign-toolbar-border-divider: #{$lum-border}; + --redesign-toolbar-home-button-hover-background: rgba(42, 157, 143, 0.12); + --redesign-subdued-button-hover-background: rgba(42, 157, 143, 0.12); + --redesign-subdued-button-color: #1a2e3b; - // Rail - --ide-rail-background: #ffffff; + // Rail icon strip + --ide-rail-background: #e8f5f2; --ide-rail-border-colour: #{$lum-border}; - --ide-rail-color: #1a2e3b; - --ide-rail-link-background: #ffffff; - --ide-rail-link-hover-background: rgba(42, 157, 143, 0.08); + --ide-rail-color: #2d5a52; + --ide-rail-link-background: transparent; + --ide-rail-link-hover-background: rgba(42, 157, 143, 0.15); --ide-rail-link-hover-color: #{$lum-teal}; --ide-rail-link-active-color: #ffffff; --ide-rail-link-active-background: #{$lum-teal}; - --ide-rail-header-subdued-button-color: #1a2e3b; - --ide-rail-header-subdued-button-hover-background: rgba(42, 157, 143, 0.08); + --ide-rail-header-subdued-button-color: #2d5a52; + --ide-rail-header-subdued-button-hover-background: rgba(42, 157, 143, 0.15); // File tree - --file-tree-bg: #ffffff; + --file-tree-bg: #f4fbf9; --file-tree-item-color: #1a2e3b; - --file-tree-icon-colour: #64748b; - --file-tree-item-hover-bg: rgba(42, 157, 143, 0.07); - --file-tree-item-selected-bg: rgba(42, 157, 143, 0.14); - --file-tree-item-selected-color: #{$lum-teal}; + --file-tree-icon-colour: #2a9d8f; --file-tree-expand-button-color: #1a2e3b; + --file-tree-item-hover-bg: rgba(42, 157, 143, 0.10); + --file-tree-item-selected-bg: rgba(42, 157, 143, 0.20); + --file-tree-item-selected-color: #1a5c52; + + // Compile/recompile button: teal instead of blue + --bg-accent-01: #{$lum-teal}; + --bg-accent-02: #{$lum-teal}; + --bg-accent-03: rgba(42, 157, 143, 0.15); } -// ── Toolbar — gradient accent stripe ────────────────────────────────────── +// ── Toolbar — gradient background + accent stripe ────────────────────────── [data-lumiere='true'] .ide-redesign-toolbar { position: relative; - border-bottom-color: $lum-border; - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); + // Subtle teal wash that fades to near-white — visible but not loud + background: linear-gradient(180deg, #d8f0eb 0%, #f4fbf9 100%) !important; + border-bottom: 1px solid $lum-border; + box-shadow: 0 2px 10px rgba(42, 157, 143, 0.10); - // 3px teal→blue stripe at the very top (same motif as the dashboard navbar) + // 4px teal→blue gradient stripe at the very top &::before { content: ''; position: absolute; top: 0; left: 0; right: 0; - height: 3px; + height: 4px; background: linear-gradient(90deg, $lum-teal 0%, $lum-blue 100%); - z-index: 1; pointer-events: none; } } -// ── Rail — active tab indicator uses teal ───────────────────────────────── +// ── Rail icon strip — grainy teal-tinted background ──────────────────────── -[data-lumiere='true'] .ide-rail-tab-link.open-rail::after { - background-color: #ffffff; +[data-lumiere='true'] .ide-rail { + background: linear-gradient(180deg, #cceee8 0%, #daf2ee 100%); + border-right-color: $lum-border; } -// ── Rail panel headers ───────────────────────────────────────────────────── +// Active tab bottom indicator: white dot on teal background +[data-lumiere='true'] .ide-rail-tab-link.open-rail::after { + background-color: rgba(255, 255, 255, 0.8); +} + +// ── Rail panel (file tree / outline / search) — grainy gradient ─────────── + +[data-lumiere='true'] .file-tree-outline-panel-group { + background-image: + #{$lum-noise}, + radial-gradient(ellipse 100% 60% at 100% 0%, rgba($lum-teal, 0.30) 0%, transparent 60%), + radial-gradient(ellipse 80% 50% at 0% 95%, rgba($lum-blue, 0.18) 0%, transparent 55%); + background-size: 200px 200px, cover, cover; + background-repeat: repeat, no-repeat, no-repeat; + background-color: #f4fbf9; +} + +// Panel header bar inside rail panels +[data-lumiere='true'] .rail-panel-header { + background: linear-gradient(90deg, rgba($lum-teal, 0.12) 0%, transparent 80%); + border-bottom: 1px solid $lum-border; +} [data-lumiere='true'] .rail-panel-title { - color: #1a2e3b; + color: #1a5c52; } -// ── File tree toolbar ────────────────────────────────────────────────────── - +// File tree toolbar row [data-lumiere='true'] .file-tree-toolbar { - border-bottom-color: $lum-border; + border-bottom: 1px solid rgba($lum-teal, 0.15); +} + +// ── Compile button — teal gradient ──────────────────────────────────────── +// .compile-button-group wraps the Recompile button in the toolbar actions + +[data-lumiere='true'] .compile-button-group { + .btn-primary { + background: linear-gradient(135deg, $lum-teal 0%, darken($lum-teal, 8%) 100%) !important; + border-color: darken($lum-teal, 10%) !important; + box-shadow: 0 2px 8px rgba($lum-teal, 0.35) !important; + + &:hover, + &:focus { + background: linear-gradient(135deg, lighten($lum-teal, 4%) 0%, $lum-teal 100%) !important; + box-shadow: 0 4px 14px rgba($lum-teal, 0.45) !important; + } + } } diff --git a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss index 981dffe201..77f0b0e458 100644 --- a/services/web/frontend/stylesheets/pages/project-list-lumiere.scss +++ b/services/web/frontend/stylesheets/pages/project-list-lumiere.scss @@ -14,8 +14,7 @@ $lum-text-muted: #94a3b8; $lum-border: #e2eaf2; // Grainy SVG noise tile (fractalNoise, greyscale, stitched for seamless tiling). -// The rect opacity (0.12) controls grain intensity — lower for subtlety. -$lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E"); +$lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.28'/%3E%3C/svg%3E"); .project-list-lumiere { @@ -225,21 +224,25 @@ $lum-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' wi .project-ds-nav-content { background-image: #{$lum-noise}, - radial-gradient(ellipse 80% 60% at 88% 0%, rgba($lum-teal, 0.22) 0%, transparent 60%), - radial-gradient(ellipse 70% 55% at 4% 98%, rgba($lum-blue, 0.16) 0%, transparent 55%); + radial-gradient(ellipse 90% 70% at 95% -5%, rgba($lum-teal, 0.45) 0%, transparent 55%), + radial-gradient(ellipse 80% 60% at -5% 105%, rgba($lum-blue, 0.32) 0%, transparent 55%), + radial-gradient(ellipse 60% 50% at 50% 50%, rgba($lum-teal, 0.06) 0%, transparent 70%); background-size: 200px 200px, cover, + cover, cover; background-repeat: repeat, no-repeat, + no-repeat, no-repeat; background-attachment: - scroll, // grain tiles with scroll — seamless - fixed, // teal orb stays pinned to viewport corner - fixed; // blue orb stays pinned to viewport corner - background-color: #fafbff; + scroll, + fixed, + fixed, + fixed; + background-color: #f0f7f5; } // ── Page header ────────────────────────────────────────────────────────────