diff --git a/docs/images/pr-711/dark-overview.png b/docs/images/pr-711/dark-overview.png new file mode 100644 index 00000000..a1a12525 Binary files /dev/null and b/docs/images/pr-711/dark-overview.png differ diff --git a/docs/images/pr-711/light-overview.png b/docs/images/pr-711/light-overview.png new file mode 100644 index 00000000..ee9cae61 Binary files /dev/null and b/docs/images/pr-711/light-overview.png differ diff --git a/openless-all/app/src/components/FloatingShell.tsx b/openless-all/app/src/components/FloatingShell.tsx index bb9f0bcd..62c2a9be 100644 --- a/openless-all/app/src/components/FloatingShell.tsx +++ b/openless-all/app/src/components/FloatingShell.tsx @@ -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')} )} @@ -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)', diff --git a/openless-all/app/src/components/SettingsModal.tsx b/openless-all/app/src/components/SettingsModal.tsx index 64a4f0e4..28e6403b 100644 --- a/openless-all/app/src/components/SettingsModal.tsx +++ b/openless-all/app/src/components/SettingsModal.tsx @@ -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')}> diff --git a/openless-all/app/src/pages/Overview.tsx b/openless-all/app/src/pages/Overview.tsx index 6e9d77ff..b90f4875 100644 --- a/openless-all/app/src/pages/Overview.tsx +++ b/openless-all/app/src/pages/Overview.tsx @@ -189,7 +189,7 @@ export function Overview({ onOpenHistory }: OverviewProps) { /> -
+
0 ? t('overview.metricAvgTrend') : t('overview.metricNoData')} /> diff --git a/openless-all/app/src/pages/settings/shared.tsx b/openless-all/app/src/pages/settings/shared.tsx index f4e594c4..f58b4c63 100644 --- a/openless-all/app/src/pages/settings/shared.tsx +++ b/openless-all/app/src/pages/settings/shared.tsx @@ -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)", diff --git a/openless-all/app/src/styles/global.css b/openless-all/app/src/styles/global.css index dc08e742..099edcfe 100644 --- a/openless-all/app/src/styles/global.css +++ b/openless-all/app/src/styles/global.css @@ -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; diff --git a/openless-all/app/src/styles/tokens.css b/openless-all/app/src/styles/tokens.css index 28162cc6..f571a5c0 100755 --- a/openless-all/app/src/styles/tokens.css +++ b/openless-all/app/src/styles/tokens.css @@ -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%); - - --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); @@ -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); - - --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; }