claude
ac02fd707e
Build and Deploy Verso / deploy (push) Successful in 15m0s
- Replace flat #f0f4f8 main content bg with layered grainy gradient: soft radial teal/blue orbs (background-attachment: fixed) plus SVG feTurbulence noise tile for organic depth - Cards get backdrop-filter glass effect over the textured surface - New ide-lumiere.scss: sets body[data-lumiere] via useThemedPage, then overrides toolbar (white + 3px teal→blue accent stripe), rail (teal active states), and file-tree (teal selected/hover) CSS variables Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
80 lines
3.1 KiB
SCSS
80 lines
3.1 KiB
SCSS
// 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.
|
|
|
|
$lum-teal: #2a9d8f;
|
|
$lum-blue: #3d7ebf;
|
|
$lum-border: #e2eaf2;
|
|
|
|
// ── 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;
|
|
|
|
// Rail
|
|
--ide-rail-background: #ffffff;
|
|
--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-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);
|
|
|
|
// File tree
|
|
--file-tree-bg: #ffffff;
|
|
--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-expand-button-color: #1a2e3b;
|
|
}
|
|
|
|
// ── Toolbar — gradient accent stripe ──────────────────────────────────────
|
|
|
|
[data-lumiere='true'] .ide-redesign-toolbar {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-bottom-color: $lum-border;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
|
|
|
|
// 3px teal→blue stripe at the very top (same motif as the dashboard navbar)
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 3px;
|
|
background: linear-gradient(90deg, $lum-teal 0%, $lum-blue 100%);
|
|
z-index: 1;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
// ── Rail — active tab indicator uses teal ─────────────────────────────────
|
|
|
|
[data-lumiere='true'] .ide-rail-tab-link.open-rail::after {
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
// ── Rail panel headers ─────────────────────────────────────────────────────
|
|
|
|
[data-lumiere='true'] .rail-panel-title {
|
|
color: #1a2e3b;
|
|
}
|
|
|
|
// ── File tree toolbar ──────────────────────────────────────────────────────
|
|
|
|
[data-lumiere='true'] .file-tree-toolbar {
|
|
border-bottom-color: $lum-border;
|
|
}
|