Skip to content

优化深色主题视觉 #711

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
NarwhalChen wants to merge 2 commits into
base: beta
Choose a base branch
from
Open

优化深色主题视觉 #711

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dd2a3a9
improve dark theme polish
NarwhalChen Jun 18, 2026
28f69ed
add dark theme pr screenshots
NarwhalChen Jun 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added docs/images/pr-711/dark-overview.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added docs/images/pr-711/light-overview.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
11 changes: 6 additions & 5 deletions openless-all/app/src/components/FloatingShell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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>
)}
Expand All @@ -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)',
Expand Down
6 changes: 3 additions & 3 deletions openless-all/app/src/components/SettingsModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)',
Expand Down Expand Up @@ -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,
Expand Down Expand Up @@ -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} />
Expand Down
2 changes: 1 addition & 1 deletion openless-all/app/src/pages/Overview.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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')} />
Expand Down
4 changes: 2 additions & 2 deletions openless-all/app/src/pages/settings/shared.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)",
Expand All @@ -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)",
Expand Down
5 changes: 0 additions & 5 deletions openless-all/app/src/styles/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
257 changes: 127 additions & 130 deletions openless-all/app/src/styles/tokens.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -215,172 +215,169 @@
}

[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%);

--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-bg-base: #0a0d12;
--ol-bg-elevated: #10151d;
rgba(24, 30, 39, 0.96) 0%,
rgba(16, 19, 25, 0.93) 100%);

--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: #0b0f15;
--ol-bg-elevated: #111720;
/* 玻璃面板背景暗色取值。 */
--ol-panel-glass-bg: rgba(17, 23, 31, 0.76);

--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-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-panel-glass-bg: rgba(21, 28, 38, 0.78);

--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: #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);
--ol-warn: #f59e0b;
--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);

--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-sidebar-bg: transparent;
--ol-sidebar-border: rgba(255,255,255,0.06);
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(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: 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-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-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-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: 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(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-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-overlay-bg: rgba(5, 8, 13, 0.64);

--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-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-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: #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; }
Expand Down