claude
074ff2791d
Build and Deploy Verso / deploy (push) Successful in 14m43s
Dashboard: - Grain opacity 0.12→0.28, teal orb 0.22→0.45, blue orb 0.16→0.32 - Added soft centre glow for depth; tinted base colour #f0f7f5 Editor: - Toolbar: visible teal-wash gradient (dark→light) + 4px accent stripe + teal box-shadow - Rail icon strip: teal-tinted gradient (#cceee8→#daf2ee) - File tree / outline panel: full grainy gradient (matching dashboard) with teal/blue orbs + panel header with teal left-glow - Compile button: teal gradient replacing the default blue Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
125 lines
4.9 KiB
SCSS
125 lines
4.9 KiB
SCSS
// Verso Lumière — editor chrome overrides.
|
|
// Scoped to body[data-lumiere='true'] — zero impact on Classic themes.
|
|
|
|
$lum-teal: #2a9d8f;
|
|
$lum-blue: #3d7ebf;
|
|
$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: #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 icon strip
|
|
--ide-rail-background: #e8f5f2;
|
|
--ide-rail-border-colour: #{$lum-border};
|
|
--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: #2d5a52;
|
|
--ide-rail-header-subdued-button-hover-background: rgba(42, 157, 143, 0.15);
|
|
|
|
// File tree
|
|
--file-tree-bg: #f4fbf9;
|
|
--file-tree-item-color: #1a2e3b;
|
|
--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 background + accent stripe ──────────────────────────
|
|
|
|
[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;
|
|
border-bottom: 1px solid $lum-border;
|
|
box-shadow: 0 2px 10px rgba(42, 157, 143, 0.10);
|
|
|
|
// 4px teal→blue gradient stripe at the very top
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
height: 4px;
|
|
background: linear-gradient(90deg, $lum-teal 0%, $lum-blue 100%);
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
// ── Rail icon strip — grainy teal-tinted background ────────────────────────
|
|
|
|
[data-lumiere='true'] .ide-rail {
|
|
background: linear-gradient(180deg, #cceee8 0%, #daf2ee 100%);
|
|
border-right-color: $lum-border;
|
|
}
|
|
|
|
// 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: #1a5c52;
|
|
}
|
|
|
|
// File tree toolbar row
|
|
[data-lumiere='true'] .file-tree-toolbar {
|
|
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;
|
|
}
|
|
}
|
|
}
|