okooooooo/openless
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(ui): improve dark theme polish

Browse Source 
Rework dark theme tokens, replace hardcoded dark-mode colors with theme variables, and remove the redundant overview metrics wrapper border.
This commit is contained in:
NarwhalChen authored and GitHub committed 2026-06-25 13:41:06 +08:00
1 parent c10ef381cb
commit 346942e1bb
8 files changed
+129 -136
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

docs/images/pr-711/dark-overview.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 616 KiB

docs/images/pr-711/light-overview.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 663 KiB

openless-all/app/src/components/FloatingShell.tsx
+6 -5
View File
@@ -250,9 +250,9 @@ function FloatingShellBody({ os, initialTab, initialSettings }: { os: OS; initia
right: 0,
top: pillRect.top,
height: pillRect.height,
background: 'var(--ol-surface)',
background: 'var(--ol-sidebar-pill-bg)',
borderRadius: 8,
boxShadow: '0 1px 2px rgba(0,0,0,.05), 0 0 0 0.5px rgba(0,0,0,.06)',
boxShadow: 'var(--ol-segmented-active-shadow)',
transition: 'top 0.36s var(--ol-motion-spring), height 0.36s var(--ol-motion-spring)',
pointerEvents: 'none',
zIndex: 0,
@@ -314,7 +314,8 @@ function FloatingShellBody({ os, initialTab, initialSettings }: { os: OS; initia
letterSpacing: '0.04em',
textTransform: 'uppercase',
color: 'var(--ol-blue)',
background: 'rgba(37,99,235,0.10)',
background: 'var(--ol-blue-soft)',
border: '0.5px solid var(--ol-pill-blue-border)',
borderRadius: 999,
}}>{t('shell.betaTag')}</span>
)}
@@ -329,8 +330,8 @@ function FloatingShellBody({ os, initialTab, initialSettings }: { os: OS; initia
display: 'flex', alignItems: 'center', gap: 10,
padding: '7px 10px',
borderRadius: 8, border: 0,
background: settingsOpen ? 'var(--ol-surface)' : 'transparent',
boxShadow: settingsOpen ? '0 1px 2px rgba(0,0,0,.05), 0 0 0 0.5px rgba(0,0,0,.06)' : 'none',
background: settingsOpen ? 'var(--ol-sidebar-settings-active-bg)' : 'transparent',
boxShadow: settingsOpen ? 'var(--ol-segmented-active-shadow)' : 'none',
fontFamily: 'inherit', fontSize: 13,
cursor: 'default',
transition: 'color 0.16s var(--ol-motion-quick), background 0.16s var(--ol-motion-quick)',
openless-all/app/src/components/SettingsModal.tsx
+3 -3
View File
@@ -101,7 +101,7 @@ export function SettingsModal({ os: _os, onClose, initialSettingsSection }: Sett
maxWidth: mobile ? undefined : 880,
height: '100%',
maxHeight: mobile ? undefined : 600,
background: 'var(--ol-surface)',
background: 'var(--ol-settings-content-bg)',
borderRadius: mobile ? 0 : 14,
border: mobile ? 'none' : '0.5px solid var(--ol-line)',
boxShadow: mobile ? 'none' : 'var(--ol-shadow-xl)',
@@ -172,7 +172,7 @@ export function SettingsModal({ os: _os, onClose, initialSettingsSection }: Sett
height: pillRect.height,
background: 'var(--ol-segmented-active-bg)',
borderRadius: 8,
boxShadow: '0 1px 2px rgba(0,0,0,.05), 0 0 0 0.5px rgba(0,0,0,.06)',
boxShadow: 'var(--ol-segmented-active-shadow)',
transition: 'top 0.36s var(--ol-motion-spring), height 0.36s var(--ol-motion-spring)',
pointerEvents: 'none',
zIndex: 0,
@@ -231,7 +231,7 @@ export function SettingsModal({ os: _os, onClose, initialSettingsSection }: Sett
cursor: 'default',
transition: 'background 0.16s var(--ol-motion-quick)',
}}
onMouseEnter={e => (e.currentTarget.style.background = 'rgba(0,0,0,0.05)')}
onMouseEnter={e => (e.currentTarget.style.background = 'var(--ol-settings-close-hover-bg)')}
onMouseLeave={e => (e.currentTarget.style.background = 'transparent')}
title={t('common.close')}>
<Icon name="close" size={14} />
openless-all/app/src/pages/Overview.tsx
+1 -1
View File
@@ -189,7 +189,7 @@ export function Overview({ onOpenHistory }: OverviewProps) {
/>
</div>
<div className="ol-overview-hero" style={{ display: 'grid', gridTemplateColumns: mobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: 12, marginBottom: 18 }}>
<div style={{ display: 'grid', gridTemplateColumns: mobile ? 'repeat(2, 1fr)' : 'repeat(4, 1fr)', gap: 12, marginBottom: 18 }}>
<Metric icon="hash" label={t('overview.metricChars')} value={historyError ? '—' : metrics.charsToday.toLocaleString()} trend={historyError ? t('overview.historyLoadError') : t('overview.metricSegments', { count: metrics.segmentsToday })} />
<Metric icon="mic" label={t('overview.metricDuration')} value={historyError ? '—' : formatDuration(metrics.totalDurationMs, t)} trend={historyError ? t('overview.historyLoadError') : ''} />
<Metric icon="clock" label={t('overview.metricAvg')} value={historyError ? '—' : formatDuration(metrics.avgLatencyMs, t)} trend={historyError ? t('overview.historyLoadError') : metrics.segmentsToday > 0 ? t('overview.metricAvgTrend') : t('overview.metricNoData')} />
openless-all/app/src/pages/settings/shared.tsx
+2 -2
View File
@@ -104,7 +104,7 @@ export function Toggle({
height: 20,
borderRadius: 999,
border: 0,
background: on ? "var(--ol-blue)" : "rgba(0,0,0,0.15)",
background: on ? "var(--ol-blue)" : "var(--ol-toggle-off-bg)",
boxShadow: "inset 0 1px 2px rgba(0,0,0,0.06)",
cursor: "default",
transition: "background 0.16s var(--ol-motion-quick)",
@@ -118,7 +118,7 @@ export function Toggle({
width: 16,
height: 16,
borderRadius: 999,
background: "#fff",
background: "var(--ol-toggle-knob)",
boxShadow:
"0 1px 2px rgba(0,0,0,.25), 0 0 0 0.5px rgba(0,0,0,.04)",
transition: "left .16s var(--ol-motion-spring)",
openless-all/app/src/styles/global.css
-5
View File
@@ -213,11 +213,6 @@ html[data-ol-platform="android"] .ol-frost::before {
border-radius: var(--ol-panel-radius) var(--ol-panel-radius) 0 0;
}
.ol-overview-hero {
background: var(--ol-card-bg);
border: 0.5px solid var(--ol-card-border);
}
.ol-capsule-pill {
background: var(--ol-capsule-pill-bg) !important;
border-color: var(--ol-capsule-pill-border) !important;
openless-all/app/src/styles/tokens.css
+117 -120
View File
@@ -215,56 +215,53 @@
}
[data-ol-theme='dark'] {
--ol-accent-solid-bg: #2563eb;
--ol-accent-solid-bg-hover: #3b82f6;
--ol-accent-solid-bg: #3b82f6;
--ol-accent-solid-bg-hover: #60a5fa;
--ol-accent-solid-ink: #f8fbff;
--ol-primary-solid-bg: #2563eb;
--ol-primary-solid-bg: #3b82f6;
--ol-primary-solid-ink: #f8fbff;
--ol-danger-solid-bg: #dc2626;
--ol-danger-solid-bg: #ef4444;
--ol-danger-solid-ink: #ffffff;
--ol-input-ink: #f4f7fb;
--ol-frost-bg:
radial-gradient(135% 86% at 15% -10%,
rgba(255, 255, 255, 0.06) 0%,
rgba(255, 255, 255, 0) 56%),
linear-gradient(161deg,
rgba(26, 26, 30, 0.96) 0%,
rgba(20, 20, 24, 0.92) 100%);
rgba(24, 30, 39, 0.96) 0%,
rgba(16, 19, 25, 0.93) 100%);
--ol-white: #11141a;
--ol-canvas: #0b0e13;
--ol-surface: #141922;
--ol-surface-2: #1a202b;
--ol-surface-solid: #171d27;
--ol-line: rgba(255, 255, 255, 0.09);
--ol-line-strong: rgba(255, 255, 255, 0.16);
--ol-line-soft: rgba(255, 255, 255, 0.07);
--ol-white: #151a21;
--ol-canvas: #0d1117;
--ol-surface: #171d25;
--ol-surface-2: #1d2530;
--ol-surface-solid: #1b222c;
--ol-line: rgba(226, 232, 240, 0.10);
--ol-line-strong: rgba(226, 232, 240, 0.18);
--ol-line-soft: rgba(226, 232, 240, 0.07);
--ol-bg-base: #0a0d12;
--ol-bg-elevated: #10151d;
--ol-bg-base: #0b0f15;
--ol-bg-elevated: #111720;
/* 玻璃面板背景暗色取值。 */
--ol-panel-glass-bg: rgba(17, 23, 31, 0.76);
--ol-panel-glass-bg: rgba(21, 28, 38, 0.78);
--ol-ink: #f4f7fb;
--ol-ink-2: #d8dfeb;
--ol-ink-3: rgba(244, 247, 251, 0.74);
--ol-ink-4: rgba(244, 247, 251, 0.50);
--ol-ink-5: rgba(244, 247, 251, 0.26);
--ol-ink: #f6f8fb;
--ol-ink-2: #dce3ee;
--ol-ink-3: rgba(246, 248, 251, 0.76);
--ol-ink-4: rgba(246, 248, 251, 0.56);
--ol-ink-5: rgba(246, 248, 251, 0.28);
--ol-blue: #60a5fa;
--ol-blue-hover: #3b82f6;
--ol-blue-soft: rgba(96, 165, 250, 0.14);
--ol-blue-ring: rgba(96, 165, 250, 0.30);
--ol-blue: #74b7ff;
--ol-blue-hover: #93c5fd;
--ol-blue-soft: rgba(116, 183, 255, 0.16);
--ol-blue-ring: rgba(116, 183, 255, 0.34);
--ol-on-accent: #f8fbff;
--ol-glass-bg: rgba(15, 19, 27, 0.68);
--ol-glass-bg-strong: rgba(17, 22, 30, 0.84);
--ol-glass-border: rgba(255, 255, 255, 0.10);
--ol-glass-bg: rgba(18, 24, 33, 0.70);
--ol-glass-bg-strong: rgba(22, 29, 39, 0.86);
--ol-glass-border: rgba(226, 232, 240, 0.12);
--ol-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34), 0 0 0 0.5px rgba(255, 255, 255, 0.04);
--ol-shadow-md: 0 10px 30px -20px rgba(0, 0, 0, 0.42), 0 0 0 0.5px rgba(255, 255, 255, 0.05);
--ol-shadow-lg: 0 24px 72px -32px rgba(0, 0, 0, 0.58), 0 0 0 0.5px rgba(255, 255, 255, 0.05);
--ol-shadow-xl: 0 48px 120px -52px rgba(0, 0, 0, 0.72), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
--ol-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.34), 0 0 0 0.5px rgba(226, 232, 240, 0.05);
--ol-shadow-md: 0 12px 34px -22px rgba(0, 0, 0, 0.50), 0 0 0 0.5px rgba(226, 232, 240, 0.06);
--ol-shadow-lg: 0 26px 80px -34px rgba(0, 0, 0, 0.66), 0 0 0 0.5px rgba(226, 232, 240, 0.06);
--ol-shadow-xl: 0 54px 130px -58px rgba(0, 0, 0, 0.78), 0 0 0 0.5px rgba(226, 232, 240, 0.08);
--ol-ok: #4ade80;
--ol-ok-soft: rgba(74, 222, 128, 0.14);
@@ -272,115 +269,115 @@
--ol-warn-soft: rgba(245, 158, 11, 0.14);
--ol-err: #f87171;
--ol-app-shell-bg: linear-gradient(180deg, #050607 0%, #090a0c 100%);
--ol-app-shell-bg:
linear-gradient(145deg, rgba(19, 26, 36, 0.96) 0%, rgba(11, 15, 21, 0.98) 46%, rgba(9, 12, 17, 1) 100%);
--ol-window-bg:
radial-gradient(120% 80% at 0% 0%, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0) 42%),
linear-gradient(180deg, rgba(31,31,34,0.98) 0%, rgba(23,23,25,0.98) 100%);
--ol-window-border: rgba(255,255,255,0.08);
--ol-linux-titlebar-bg: rgba(15, 20, 28, 0.90);
--ol-linux-titlebar-border: rgba(255,255,255,0.08);
linear-gradient(180deg, rgba(25, 32, 42, 0.99) 0%, rgba(15, 20, 28, 0.99) 100%);
--ol-window-border: rgba(226,232,240,0.11);
--ol-linux-titlebar-bg: rgba(16, 22, 31, 0.92);
--ol-linux-titlebar-border: rgba(226,232,240,0.09);
--ol-panel-bg: linear-gradient(180deg, rgba(33,33,36,0.96), rgba(28,28,31,0.94));
--ol-panel-border: rgba(255,255,255,0.07);
--ol-panel-shadow: 0 18px 44px -34px rgba(0,0,0,0.62);
--ol-card-bg: linear-gradient(180deg, rgba(34,34,37,0.96), rgba(29,29,32,0.94));
--ol-card-border: rgba(255,255,255,0.06);
--ol-card-shadow: none;
--ol-panel-bg: linear-gradient(180deg, rgba(25, 32, 42, 0.96), rgba(17, 23, 31, 0.95));
--ol-panel-border: rgba(226,232,240,0.10);
--ol-panel-shadow: 0 28px 78px -42px rgba(0,0,0,0.70), inset 0 1px 0 rgba(255,255,255,0.04);
--ol-card-bg: linear-gradient(180deg, rgba(29, 37, 48, 0.96), rgba(21, 28, 37, 0.94));
--ol-card-border: rgba(226,232,240,0.09);
--ol-card-shadow: 0 18px 42px -30px rgba(0,0,0,0.62), inset 0 1px 0 rgba(255,255,255,0.04);
--ol-sidebar-bg: transparent;
--ol-sidebar-border: rgba(255,255,255,0.06);
--ol-sidebar-bg: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
--ol-sidebar-border: rgba(226,232,240,0.08);
--ol-sidebar-brand-bg: transparent;
--ol-sidebar-brand-border: transparent;
--ol-sidebar-pill-bg: rgba(255,255,255,0.06);
--ol-sidebar-pill-border: rgba(255,255,255,0.07);
--ol-sidebar-footer-border: rgba(255,255,255,0.07);
--ol-sidebar-version-bg: transparent;
--ol-sidebar-version-border: transparent;
--ol-sidebar-pill-bg: linear-gradient(180deg, rgba(42, 54, 70, 0.86), rgba(27, 36, 48, 0.86));
--ol-sidebar-pill-border: rgba(226,232,240,0.10);
--ol-sidebar-footer-border: rgba(226,232,240,0.08);
--ol-sidebar-version-bg: rgba(255,255,255,0.04);
--ol-sidebar-version-border: rgba(226,232,240,0.08);
--ol-sidebar-settings-bg: transparent;
--ol-sidebar-settings-border: transparent;
--ol-sidebar-settings-active-bg: rgba(255,255,255,0.08);
--ol-nav-hover-bg: rgba(255,255,255,0.05);
--ol-sidebar-settings-active-bg: linear-gradient(180deg, rgba(42, 54, 70, 0.86), rgba(27, 36, 48, 0.86));
--ol-nav-hover-bg: rgba(116,183,255,0.10);
--ol-settings-rail-bg: rgba(255,255,255,0.02);
--ol-settings-rail-border: rgba(255,255,255,0.06);
--ol-settings-links-border: rgba(255,255,255,0.06);
--ol-settings-content-bg: linear-gradient(180deg, rgba(29,29,32,0.96), rgba(24,24,27,0.94));
--ol-settings-close-bg: rgba(255,255,255,0.06);
--ol-settings-close-hover-bg: rgba(255,255,255,0.14);
--ol-settings-rail-bg: linear-gradient(180deg, rgba(21, 28, 38, 0.98), rgba(15, 20, 28, 0.98));
--ol-settings-rail-border: rgba(226,232,240,0.09);
--ol-settings-links-border: rgba(226,232,240,0.08);
--ol-settings-content-bg: linear-gradient(180deg, rgba(23, 30, 40, 0.98), rgba(17, 23, 31, 0.98));
--ol-settings-close-bg: rgba(255,255,255,0.05);
--ol-settings-close-hover-bg: rgba(116,183,255,0.14);
--ol-control-muted: rgba(255,255,255,0.05);
--ol-control-muted-strong: rgba(255,255,255,0.08);
--ol-control-border: rgba(255,255,255,0.08);
--ol-control-solid: rgba(28, 34, 44, 0.98);
--ol-control-elevated: rgba(21,27,36,0.98);
--ol-control-shadow: none;
--ol-pill-bg: rgba(255,255,255,0.05);
--ol-pill-border: rgba(255,255,255,0.08);
--ol-pill-shadow: none;
--ol-pill-blue-bg: rgba(59,130,246,0.14);
--ol-pill-blue-border: rgba(96,165,250,0.28);
--ol-control-muted: rgba(226,232,240,0.06);
--ol-control-muted-strong: rgba(226,232,240,0.10);
--ol-control-border: rgba(226,232,240,0.11);
--ol-control-solid: rgba(24, 31, 41, 0.98);
--ol-control-elevated: rgba(30, 38, 49, 0.98);
--ol-control-shadow: 0 12px 26px -22px rgba(0,0,0,0.64);
--ol-pill-bg: rgba(226,232,240,0.07);
--ol-pill-border: rgba(226,232,240,0.10);
--ol-pill-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
--ol-pill-blue-bg: rgba(116,183,255,0.16);
--ol-pill-blue-border: rgba(116,183,255,0.30);
--ol-pill-ok-bg: rgba(74,222,128,0.16);
--ol-pill-ok-border: rgba(74,222,128,0.24);
--ol-pill-dark-bg: rgba(255,255,255,0.08);
--ol-pill-dark-border: rgba(255,255,255,0.12);
--ol-pill-dark-shadow: none;
--ol-pill-selected-bg: rgba(36, 42, 54, 0.98);
--ol-pill-dark-bg: linear-gradient(180deg, rgba(42, 54, 70, 0.92), rgba(25, 33, 44, 0.92));
--ol-pill-dark-border: rgba(226,232,240,0.12);
--ol-pill-dark-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
--ol-pill-selected-bg: linear-gradient(180deg, rgba(59, 130, 246, 0.95), rgba(37, 99, 235, 0.92));
--ol-pill-selected-ink: #f4f7fb;
--ol-pill-selected-border: rgba(255, 255, 255, 0.10);
--ol-segmented-bg: rgba(255,255,255,0.06);
--ol-segmented-active-bg: rgba(36, 42, 54, 0.98);
--ol-segmented-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
--ol-pill-selected-border: rgba(147, 197, 253, 0.44);
--ol-segmented-bg: rgba(226,232,240,0.07);
--ol-segmented-active-bg: linear-gradient(180deg, rgba(44, 56, 72, 0.98), rgba(28, 37, 49, 0.98));
--ol-segmented-active-shadow: 0 1px 2px rgba(0, 0, 0, 0.36), 0 0 0 0.5px rgba(226, 232, 240, 0.10), inset 0 1px 0 rgba(255,255,255,0.04);
--ol-select-trigger-bg: var(--ol-control-solid);
--ol-select-popover-bg: rgba(28, 32, 40, 0.98);
--ol-select-popover-border: rgba(255, 255, 255, 0.10);
--ol-select-popover-shadow: 0 12px 30px -10px rgba(0, 0, 0, 0.48), 0 0 0 0.5px rgba(255, 255, 255, 0.06);
--ol-select-option-hover-bg: rgba(96, 165, 250, 0.14);
--ol-toggle-off-bg: rgba(255,255,255,0.16);
--ol-select-popover-bg: rgba(25, 32, 42, 0.98);
--ol-select-popover-border: rgba(226, 232, 240, 0.12);
--ol-select-popover-shadow: 0 18px 42px -16px rgba(0, 0, 0, 0.62), 0 0 0 0.5px rgba(226, 232, 240, 0.08);
--ol-select-option-hover-bg: rgba(116, 183, 255, 0.15);
--ol-toggle-off-bg: rgba(226,232,240,0.18);
--ol-toggle-knob: #f8fbff;
--ol-overlay-bg: rgba(4, 8, 14, 0.58);
--ol-overlay-bg: rgba(5, 8, 13, 0.64);
--ol-style-shell-bg: linear-gradient(180deg, rgba(29,29,32,0.94), rgba(24,24,27,0.92));
--ol-style-shell-border: rgba(255,255,255,0.07);
--ol-style-shell-shadow: none;
--ol-style-card-bg: rgba(34,34,37,0.94);
--ol-style-card-bg-active: rgba(39,39,43,0.96);
--ol-style-card-border: rgba(255,255,255,0.07);
--ol-style-card-border-active: rgba(96,165,250,0.72);
--ol-style-card-shadow: none;
--ol-style-card-shadow-active: 0 0 0 1px rgba(96,165,250,0.72);
--ol-style-shell-bg: linear-gradient(180deg, rgba(23, 30, 40, 0.96), rgba(17, 23, 31, 0.94));
--ol-style-shell-border: rgba(226,232,240,0.09);
--ol-style-shell-shadow: 0 26px 70px -42px rgba(0,0,0,0.66);
--ol-style-card-bg: linear-gradient(180deg, rgba(29, 37, 48, 0.96), rgba(21, 28, 37, 0.94));
--ol-style-card-bg-active: linear-gradient(180deg, rgba(34, 45, 59, 0.98), rgba(24, 34, 48, 0.96));
--ol-style-card-border: rgba(226,232,240,0.09);
--ol-style-card-border-active: rgba(116,183,255,0.72);
--ol-style-card-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
--ol-style-card-shadow-active: 0 0 0 1px rgba(116,183,255,0.70), 0 18px 42px -28px rgba(37,99,235,0.48);
--ol-style-card-ink: #f4f7fb;
--ol-style-card-ink-2: rgba(244,247,251,0.86);
--ol-style-card-ink-3: rgba(244,247,251,0.64);
--ol-style-card-icon-bg: rgba(255,255,255,0.06);
--ol-style-card-icon-bg-active: rgba(96,165,250,0.16);
--ol-style-delete-bg: rgba(255,255,255,0.05);
--ol-style-card-icon-bg: rgba(226,232,240,0.07);
--ol-style-card-icon-bg-active: rgba(116,183,255,0.17);
--ol-style-delete-bg: rgba(226,232,240,0.06);
--ol-style-delete-border: rgba(248,113,113,0.34);
--ol-style-add-tile-bg: rgba(255,255,255,0.02);
--ol-style-add-tile-icon-bg: rgba(255,255,255,0.10);
--ol-style-add-tile-border: rgba(255,255,255,0.10);
--ol-style-input-bg: rgba(255,255,255,0.04);
--ol-style-input-border: rgba(255,255,255,0.08);
--ol-style-input-shadow: none;
--ol-style-subtle-bg: rgba(255,255,255,0.03);
--ol-style-subtle-border: rgba(255,255,255,0.06);
--ol-style-subtle-shadow: none;
--ol-style-editor-bg: linear-gradient(180deg, rgba(27,27,30,0.96), rgba(23,23,26,0.94));
--ol-style-editor-border: rgba(255,255,255,0.07);
--ol-style-editor-shadow: none;
--ol-style-add-tile-bg: rgba(226,232,240,0.035);
--ol-style-add-tile-icon-bg: rgba(226,232,240,0.10);
--ol-style-add-tile-border: rgba(226,232,240,0.12);
--ol-style-input-bg: rgba(11, 15, 21, 0.38);
--ol-style-input-border: rgba(226,232,240,0.10);
--ol-style-input-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
--ol-style-subtle-bg: rgba(226,232,240,0.05);
--ol-style-subtle-border: rgba(226,232,240,0.08);
--ol-style-subtle-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
--ol-style-editor-bg: linear-gradient(180deg, rgba(24, 31, 41, 0.98), rgba(16, 22, 31, 0.96));
--ol-style-editor-border: rgba(226,232,240,0.10);
--ol-style-editor-shadow: 0 30px 90px -42px rgba(0,0,0,0.70);
--ol-capsule-pill-bg: #1a1a1e;
--ol-capsule-pill-border: rgba(255, 255, 255, 0.10);
--ol-capsule-pill-shadow: 0 18px 50px -10px rgba(0, 0, 0, 0.42), 0 0 0 0.5px rgba(0, 0, 0, 0.24);
--ol-capsule-pill-bg: #1b222c;
--ol-capsule-pill-border: rgba(226, 232, 240, 0.12);
--ol-capsule-pill-shadow: 0 18px 50px -10px rgba(0, 0, 0, 0.48), 0 0 0 0.5px rgba(226, 232, 240, 0.06);
--ol-capsule-pill-inset: inset 0 1px 0 0 rgba(255, 255, 255, 0.08);
--ol-capsule-btn-bg: #2a2a2f;
--ol-capsule-btn-bg-confirm: #2e2e33;
--ol-capsule-btn-bg: #26313f;
--ol-capsule-btn-bg-confirm: #2b3848;
--ol-capsule-btn-ink: #f4f7fb;
--ol-capsule-btn-border: rgba(255, 255, 255, 0.12);
--ol-capsule-btn-border: rgba(226, 232, 240, 0.14);
--ol-capsule-center-ink: rgba(244, 247, 251, 0.72);
--ol-capsule-confirm-bg: var(--ol-capsule-btn-bg-confirm);
--ol-capsule-confirm-ink: var(--ol-capsule-btn-ink);
--ol-capsule-badge-bg: rgba(26, 26, 30, 0.94);
--ol-capsule-badge-border: rgba(96, 165, 250, 0.28);
--ol-capsule-badge-bg: rgba(27, 34, 44, 0.94);
--ol-capsule-badge-border: rgba(116, 183, 255, 0.30);
}
* { box-sizing: border-box; }