395 lines
14 KiB
CSS
395 lines
14 KiB
CSS
:root {
|
|
color-scheme: light;
|
|
|
|
--white: #ffffff;
|
|
--black: #000000;
|
|
--transparent: transparent;
|
|
|
|
--rail-bg: #25282a;
|
|
--rail-bg-active: #1c1e20;
|
|
--rail-text: #c7c6c0;
|
|
--rail-text-muted: #a7a49f;
|
|
--accent: #ef6b3a;
|
|
--accent-rgb: 239, 107, 58;
|
|
--accent-soft: rgba(239, 107, 58, .35);
|
|
|
|
--bg: #e9e7e4;
|
|
--bar: #d4d0ca;
|
|
--panel: #f7f6f4;
|
|
--panel-soft: #ffffff;
|
|
--panel-header: #ffffff;
|
|
--surface: #ffffff;
|
|
--surface-subtle: var(--panel-soft);
|
|
--surface-muted: #f6f7f9;
|
|
--surface-strong: #f5f3ef;
|
|
--surface-raised: #fbfaf8;
|
|
--titlebar-bg: #fbfbfa;
|
|
--sidebar-bg: #c8c4bf;
|
|
--sidebar-border: #afada9;
|
|
--sidebar-hover-bg: rgba(255,255,255,.35);
|
|
--sidebar-hover-bg-strong: rgba(255,255,255,.42);
|
|
--panel-glass: rgba(255,255,255,.56);
|
|
--panel-glass-muted: rgba(255, 255, 255, 0.45);
|
|
--panel-glass-bright: rgba(255, 255, 255, 0.9);
|
|
--panel-glass-strong: rgba(255,255,255,.86);
|
|
|
|
--line: #d6d2cc;
|
|
--line-dark: #bdb8b0;
|
|
--line-subtle: var(--line);
|
|
--line-strong: var(--line-dark);
|
|
--border: var(--line);
|
|
--border-line: 1px solid var(--line);
|
|
--border-line-dark: 1px solid var(--line-dark);
|
|
--border-soft-line: 1px solid var(--border-soft);
|
|
--border-muted-line: 1px solid var(--border-muted);
|
|
--border-soft: rgba(15, 23, 42, 0.12);
|
|
--border-muted: rgba(189, 184, 176, 0.32);
|
|
--border-danger-soft: rgba(180, 35, 24, .24);
|
|
|
|
--text: #48494c;
|
|
--text-strong: #303135;
|
|
--muted: #8a8781;
|
|
--muted-text: var(--muted);
|
|
--text-label: #6b6863;
|
|
--text-subtle: #686560;
|
|
--text-soft: #666666;
|
|
--text-table-heading: #625f5a;
|
|
--text-breadcrumb: #615f5c;
|
|
--text-hover-strong: #3e3e3f;
|
|
--neutral-950: #242424;
|
|
--neutral-900: #333333;
|
|
--neutral-800: #292929;
|
|
--control-disabled-bg: #ebe8e2;
|
|
--control-disabled-border: #c2bcb3;
|
|
--control-disabled-text: #706b63;
|
|
--control-disabled-placeholder: #969087;
|
|
--control-disabled-label: #7d776f;
|
|
--control-bg: #f8f8f7;
|
|
--control-border: #c9c5bd;
|
|
--control-border-hover: #aaa49a;
|
|
--control-border-pressed: #aaa299;
|
|
--control-gradient-start: #ffffff;
|
|
--control-gradient-end: #f2f1ef;
|
|
--control-gradient-end-muted: #f1efeb;
|
|
--control-gradient-end-hover: #e9e7e3;
|
|
--control-gradient-end-pressed: #e8e5df;
|
|
--control-text: #4f4b46;
|
|
--control-text-muted: #57534d;
|
|
--input-border-focus: #9bb7d3;
|
|
--toggle-track-bg: #cfd4da;
|
|
--toggle-track-border: #aeb4bb;
|
|
|
|
--green: #7bbcaf;
|
|
--amber: #f5c56c;
|
|
--red: #e06a5f;
|
|
--blue: #7ea6c5;
|
|
--primary: #0d6efd;
|
|
--primary-soft: rgba(13, 110, 253, .08);
|
|
--primary-soft-strong: rgba(13, 110, 253, .16);
|
|
--primary-border: rgba(13, 110, 253, .45);
|
|
--primary-focus-ring: 0 0 0 3px rgba(13, 110, 253, .18);
|
|
--primary-focus-ring-soft: 0 0 0 3px rgba(13,110,253,.2);
|
|
--primary-inset-ring: inset 0 0 0 1px rgba(13, 110, 253, .12);
|
|
|
|
--success-bg: #d8eee8;
|
|
--success-soft: #d6eee9;
|
|
--success-border: #5aa99b;
|
|
--success-border-soft: #78b7a9;
|
|
--success-line: var(--success-border);
|
|
--success: #157347;
|
|
--success-text: #315f55;
|
|
--success-text-strong: #34796d;
|
|
--info-bg: #dce9f3;
|
|
--info-soft: #d8e8f4;
|
|
--info-muted-bg: #e8eef5;
|
|
--info-muted-border: #c8d6e3;
|
|
--info-text: #365c76;
|
|
--info-text-strong: #386a90;
|
|
--info-text-muted: #36566f;
|
|
--info-text-deep: #294a61;
|
|
--warning-bg: #ffe1a3;
|
|
--warning-bg-hover: #ffd170;
|
|
--warning-soft: #ffedc6;
|
|
--warning-muted-bg: #fff1d0;
|
|
--warning-border: #d5a64a;
|
|
--warning-border-soft: rgba(154, 92, 0, .26);
|
|
--warning-text: #593700;
|
|
--warning-text-hover: #3e2800;
|
|
--warning-text-strong: #a06b00;
|
|
--warning: #8a5b00;
|
|
--warning-deep: #7c5412;
|
|
--danger-bg: #f8d1cc;
|
|
--danger-soft: #f6e3df;
|
|
--danger-muted-bg: #fff7f5;
|
|
--danger-border: #c96b63;
|
|
--danger-border-strong: #c94d43;
|
|
--danger-border-deep: #b42318;
|
|
--danger-focus-ring: 0 0 0 3px rgba(180, 35, 24, .14);
|
|
--danger-focus-ring-soft: 0 0 0 3px rgba(201, 107, 99, .13);
|
|
--danger-text: #a64840;
|
|
--danger-text-strong: #b13e35;
|
|
--danger-text-deep: #873c35;
|
|
--danger-text-tooltip: #7a241c;
|
|
--on-accent: #ffffff;
|
|
--on-dark: #ffffff;
|
|
--code-bg: #292929;
|
|
--code-text: #f1f1f1;
|
|
--status-neutral-bg: #e7e4df;
|
|
--step-number-bg: #d8d6d2;
|
|
--loading-line: #8c8881;
|
|
--brand-mark-gradient: conic-gradient(#ef6b3a 0 20%, #f2c66d 0 40%, #80b9b0 0 60%, #7e9fc0 0 80%, #56545f 0);
|
|
--focus-rgb: 82, 130, 177;
|
|
--focus-ring: 0 0 0 3px rgba(82, 130, 177, .14);
|
|
--focus-ring-color: rgba(82, 130, 177, .22);
|
|
--focus-ring-strong: 0 0 0 3px rgba(82, 130, 177, .22);
|
|
--focus-outline: 2px solid color-mix(in srgb, var(--blue) 55%, var(--white));
|
|
--text-table-heading-muted-border: rgba(98, 95, 90, .24);
|
|
--text-table-heading-muted: rgba(98, 95, 90, .68);
|
|
|
|
--overlay-backdrop: rgba(37, 40, 42, 0.38);
|
|
--dialog-backdrop: rgba(15, 23, 42, 0.36);
|
|
--hover-tint: rgba(0,0,0,.08);
|
|
--hover-tint-soft: rgba(0, 0, 0, .06);
|
|
--hover-tint-strong: rgba(0,0,0,.15);
|
|
--titlebar-hover-bg: rgba(0,0,0,.055);
|
|
--accent-hover-bg: rgba(239, 107, 58, .10);
|
|
--accent-auth-glow: rgba(239, 107, 58, .13);
|
|
--accent-ring-soft: 0 0 0 2px rgba(239, 107, 58, .16);
|
|
--blue-auth-glow: rgba(126, 166, 197, .15);
|
|
--transparent-surface: rgba(255, 255, 255, 0.00);
|
|
--loading-envelope-bg: rgba(255,255,255,.7);
|
|
--black-border-soft: rgba(0,0,0,.2);
|
|
--black-border-muted: rgba(0,0,0,.18);
|
|
|
|
--shadow-color-rgb: 0, 0, 0;
|
|
--shadow-warm-rgb: 45, 43, 40;
|
|
--shadow-slate-rgb: 15, 23, 42;
|
|
--shadow-highlight-rgb: 255, 255, 255;
|
|
--shadow: 0 1px 2px rgba(0,0,0,.15), 0 10px 30px rgba(0,0,0,.04);
|
|
--shadow-menu: 0 16px 40px rgba(0,0,0,.18);
|
|
--shadow-popover: 0 3px 8px -3px rgba(0,0,0,.16);
|
|
--shadow-card: 0 2px 10px rgba(0,0,0,.06);
|
|
--shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.12);
|
|
--shadow-strong: 0 24px 64px rgba(15, 23, 42, 0.25);
|
|
--shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.26);
|
|
--shadow-floating: 0 16px 38px rgba(15, 23, 42, 0.2);
|
|
--shadow-dismissible: 0 12px 24px rgba(15, 23, 42, 0.08);
|
|
--shadow-header: 0 8px 18px rgba(65, 60, 52, .08);
|
|
--shadow-chrome: 0 0 10px 0 darkgrey;
|
|
--shadow-control: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 1px rgba(0,0,0,.05);
|
|
--shadow-control-strong: inset 0 1px 0 rgba(255,255,255,.85), 0 1px 1px rgba(0,0,0,.05);
|
|
--shadow-control-hover: inset 0 1px 0 rgba(255,255,255,.82), 0 2px 5px rgba(0,0,0,.08);
|
|
--shadow-control-inset: inset 0 1px 2px rgba(0,0,0,.04);
|
|
--shadow-control-inset-strong: inset 0 1px 2px rgba(0,0,0,.12);
|
|
--shadow-control-surface: inset 0 1px 0 rgba(255,255,255,.75), 0 1px 2px rgba(0,0,0,.035);
|
|
--shadow-inset-highlight: inset 0 1px 0 rgba(255,255,255,.45);
|
|
--shadow-inset-highlight-strong: inset 0 1px 0 rgba(255,255,255,.75);
|
|
--shadow-inset-highlight-muted: inset 0 1px 0 rgba(255,255,255,.32);
|
|
--shadow-sticky-start: 8px 0 14px -14px rgba(45, 43, 40, .6);
|
|
--shadow-sticky-end: -8px 0 14px -14px rgba(45, 43, 40, .6);
|
|
--shadow-data-header: 0 12px 16px -18px rgba(45, 43, 40, .8);
|
|
--shadow-rail: inset -1px 0 rgba(0,0,0,.35);
|
|
--shadow-xs: 0 1px 2px rgba(0,0,0,.05);
|
|
--shadow-thumb: 0 1px 2px rgba(0,0,0,.22);
|
|
--shadow-campaign-card: 0 14px 18px -22px rgba(45, 43, 40, .75);
|
|
--shadow-campaign-soft: 0 1px 2px rgba(38, 35, 30, .04);
|
|
--shadow-campaign-small: 0 4px 12px rgba(0,0,0,.09);
|
|
--shadow-footer: 0 -8px 24px rgba(15, 23, 42, .06);
|
|
--radius: 8px;
|
|
--radius-xs: 5px;
|
|
--radius-sm: 4px;
|
|
--radius-md: var(--radius);
|
|
--radius-lg: 12px;
|
|
--radius-pill: 999px;
|
|
|
|
--theme-preview-light-bg: #e9e7e4;
|
|
--theme-preview-light-bar: #d4d0ca;
|
|
--theme-preview-light-surface: #ffffff;
|
|
--theme-preview-light-line: #d6d2cc;
|
|
--theme-preview-light-text: #303135;
|
|
--theme-preview-light-muted: #8a8781;
|
|
--theme-preview-dark-bg: #202120;
|
|
--theme-preview-dark-bar: #34342f;
|
|
--theme-preview-dark-surface: #262724;
|
|
--theme-preview-dark-line: #454740;
|
|
--theme-preview-dark-text: #f6f4ed;
|
|
--theme-preview-dark-muted: #aaa79d;
|
|
|
|
--calendar-event-bg-default: #edf8f5;
|
|
--calendar-event-border-default: #b9d7d0;
|
|
--calendar-event-text: #21453e;
|
|
--calendar-event-muted-text: #4d6764;
|
|
--calendar-grid-bg: #f8f6f2;
|
|
--calendar-muted-bg: #f1efeb;
|
|
--calendar-today-bg: #e3f3ef;
|
|
--calendar-selected-bg: #e0f0ea;
|
|
--calendar-off-hours-rgb: 241, 239, 235;
|
|
--calendar-day-shade: rgba(241, 239, 235, .74);
|
|
--calendar-success-border: #4f9489;
|
|
--calendar-danger-bg: #fff2f0;
|
|
--calendar-danger-border: #f0b8b2;
|
|
--calendar-overlay: rgba(33, 69, 62, .46);
|
|
--calendar-switch-bg: #d8d3cb;
|
|
--calendar-focus-inset: inset 0 0 0 2px rgba(90, 169, 155, .55);
|
|
--calendar-focus-outline: 2px solid rgba(90, 169, 155, .35);
|
|
|
|
--review-flow-purple: #9b86c7;
|
|
--campaign-accent: #5d776c;
|
|
--campaign-card-bg: rgba(247, 246, 244, .96);
|
|
--campaign-card-bg-soft: rgba(247, 246, 244, .46);
|
|
--campaign-panel-border: rgba(189, 184, 176, .8);
|
|
--campaign-panel-bg: rgba(255, 255, 255, .91);
|
|
--campaign-stage-shadow: 0 4px 12px rgba(48, 49, 53, .10);
|
|
--campaign-stage-shadow-color: rgba(48, 49, 53, .10);
|
|
--campaign-panel-shadow: 0 8px 24px rgba(48, 49, 53, .10);
|
|
--campaign-panel-shadow-color: rgba(48, 49, 53, .14);
|
|
--campaign-panel-shadow-strong: 0 12px 32px rgba(48, 49, 53, .14);
|
|
--campaign-card-shadow: 0 14px 18px -22px rgba(45, 43, 40, .75);
|
|
|
|
--font: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
}
|
|
|
|
:root[data-theme="dark"] {
|
|
color-scheme: dark;
|
|
|
|
--rail-bg: #171819;
|
|
--rail-bg-active: #0f1011;
|
|
--rail-text: #dfddd7;
|
|
--rail-text-muted: #aaa79d;
|
|
--bg: #202120;
|
|
--bar: #34342f;
|
|
--panel: #2b2c2a;
|
|
--panel-soft: #242523;
|
|
--panel-header: #30312e;
|
|
--surface: #262724;
|
|
--surface-subtle: #2e302c;
|
|
--surface-muted: #2e302c;
|
|
--surface-strong: #34342f;
|
|
--surface-raised: #242523;
|
|
--titlebar-bg: #242523;
|
|
--sidebar-bg: #2b2c2a;
|
|
--sidebar-border: #454740;
|
|
--sidebar-hover-bg: rgba(255,255,255,.08);
|
|
--sidebar-hover-bg-strong: rgba(255,255,255,.12);
|
|
--panel-glass: rgba(36,37,35,.72);
|
|
--panel-glass-muted: rgba(255,255,255,.08);
|
|
--panel-glass-bright: rgba(38,39,36,.94);
|
|
--panel-glass-strong: rgba(38,39,36,.92);
|
|
--line: #454740;
|
|
--line-dark: #5b5d54;
|
|
--border: var(--line);
|
|
--border-soft: rgba(255,255,255,.10);
|
|
--border-muted: rgba(91, 93, 84, .55);
|
|
--text: #dfddd7;
|
|
--text-strong: #f6f4ed;
|
|
--muted: #aaa79d;
|
|
--muted-text: var(--muted);
|
|
--text-label: #c9c5bd;
|
|
--text-subtle: #c9c5bd;
|
|
--text-soft: #aaa79d;
|
|
--text-table-heading: #dfddd7;
|
|
--text-breadcrumb: #dfddd7;
|
|
--text-hover-strong: #f6f4ed;
|
|
--control-disabled-bg: #33352f;
|
|
--control-disabled-border: #5f6058;
|
|
--control-disabled-text: #b8b4aa;
|
|
--control-disabled-placeholder: #918d83;
|
|
--control-disabled-label: #aaa69b;
|
|
--control-bg: #30312e;
|
|
--control-border: #5b5d54;
|
|
--control-border-hover: #74776e;
|
|
--control-border-pressed: #74776e;
|
|
--control-gradient-start: #34342f;
|
|
--control-gradient-end: #2b2c2a;
|
|
--control-gradient-end-muted: #2b2c2a;
|
|
--control-gradient-end-hover: #3b3c36;
|
|
--control-gradient-end-pressed: #242523;
|
|
--control-text: #f6f4ed;
|
|
--control-text-muted: #dfddd7;
|
|
--input-border-focus: #7ea6c5;
|
|
--toggle-track-bg: #454740;
|
|
--toggle-track-border: #5b5d54;
|
|
--status-neutral-bg: #34342f;
|
|
--step-number-bg: #454740;
|
|
--loading-line: #aaa79d;
|
|
--code-bg: #171819;
|
|
--code-text: #f6f4ed;
|
|
--overlay-backdrop: rgba(15, 16, 17, 0.58);
|
|
--dialog-backdrop: rgba(15, 16, 17, 0.62);
|
|
--hover-tint: rgba(255,255,255,.08);
|
|
--hover-tint-soft: rgba(255,255,255,.06);
|
|
--hover-tint-strong: rgba(255,255,255,.14);
|
|
--titlebar-hover-bg: rgba(255,255,255,.08);
|
|
--accent-hover-bg: rgba(239, 107, 58, .16);
|
|
--accent-auth-glow: rgba(239, 107, 58, .18);
|
|
--blue-auth-glow: rgba(126, 166, 197, .18);
|
|
--transparent-surface: rgba(38, 39, 36, 0);
|
|
--warning-bg: #7c5412;
|
|
--warning-bg-hover: #8a5b00;
|
|
--warning-soft: #5a431f;
|
|
--warning-muted-bg: #4b3b22;
|
|
--warning-text: #ffe1a3;
|
|
--warning-text-hover: #ffedc6;
|
|
--warning-text-strong: #ffe1a3;
|
|
--danger-bg: #5f2e2a;
|
|
--danger-soft: #4f2d2a;
|
|
--danger-muted-bg: #3c2523;
|
|
--danger-text: #f0b8b2;
|
|
--danger-text-strong: #f8d1cc;
|
|
--danger-text-deep: #f8d1cc;
|
|
--danger-text-tooltip: #f8d1cc;
|
|
--success-bg: #24473f;
|
|
--success-soft: #24473f;
|
|
--success-text: #d8eee8;
|
|
--success-text-strong: #d6eee9;
|
|
--info-bg: #243d4e;
|
|
--info-soft: #243d4e;
|
|
--info-text: #dce9f3;
|
|
--info-text-strong: #d8e8f4;
|
|
--shadow: 0 1px 2px rgba(0,0,0,.35), 0 10px 30px rgba(0,0,0,.18);
|
|
--shadow-menu: 0 18px 44px rgba(0,0,0,.42);
|
|
--shadow-popover: 0 8px 22px rgba(0,0,0,.36);
|
|
--shadow-card: 0 2px 10px rgba(0,0,0,.22);
|
|
--shadow-soft: 0 10px 28px rgba(0,0,0,.28);
|
|
--shadow-strong: 0 24px 64px rgba(0,0,0,.46);
|
|
--shadow-modal: 0 24px 80px rgba(0,0,0,.52);
|
|
--shadow-floating: 0 18px 44px rgba(0,0,0,.42);
|
|
--shadow-dismissible: 0 12px 24px rgba(0,0,0,.28);
|
|
--shadow-header: 0 8px 18px rgba(0,0,0,.24);
|
|
--shadow-chrome: 0 0 10px 0 rgba(0,0,0,.42);
|
|
--shadow-data-header: 0 12px 16px -18px rgba(0,0,0,.9);
|
|
--shadow-rail: inset -1px 0 rgba(0,0,0,.52);
|
|
--shadow-xs: 0 1px 2px rgba(0,0,0,.28);
|
|
--shadow-thumb: 0 1px 2px rgba(0,0,0,.42);
|
|
--shadow-campaign-card: 0 14px 18px -22px rgba(0,0,0,.85);
|
|
--shadow-campaign-soft: 0 1px 2px rgba(0,0,0,.24);
|
|
--shadow-campaign-small: 0 4px 12px rgba(0,0,0,.32);
|
|
--shadow-footer: 0 -8px 24px rgba(0,0,0,.28);
|
|
--calendar-grid-bg: #242523;
|
|
--calendar-muted-bg: #34342f;
|
|
--calendar-today-bg: #24473f;
|
|
--calendar-selected-bg: #24473f;
|
|
--calendar-day-shade: rgba(52, 52, 47, .72);
|
|
--calendar-danger-bg: #4f2d2a;
|
|
--calendar-overlay: rgba(15, 16, 17, .56);
|
|
--calendar-switch-bg: #454740;
|
|
--campaign-card-bg: rgba(43, 44, 42, .96);
|
|
--campaign-card-bg-soft: rgba(43, 44, 42, .58);
|
|
--campaign-panel-border: rgba(91, 93, 84, .8);
|
|
--campaign-panel-bg: rgba(38, 39, 36, .94);
|
|
}
|
|
|
|
.ui-reduce-motion *,
|
|
.ui-reduce-motion *::before,
|
|
.ui-reduce-motion *::after {
|
|
animation-duration: .001ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
scroll-behavior: auto !important;
|
|
transition-duration: .001ms !important;
|
|
}
|
|
|
|
* { box-sizing: border-box; }
|
|
html, body, #root { height: 100%; }
|
|
body { margin: 0; overflow: hidden; font-family: var(--font); color: var(--text); background: var(--bg); }
|
|
a { color: inherit; }
|