117 lines
7.6 KiB
CSS
117 lines
7.6 KiB
CSS
:root,
|
|
[data-nodedc-theme="dark"] {
|
|
color-scheme: dark;
|
|
--nodedc-accent-rgb: 255 47 146;
|
|
--nodedc-on-accent-rgb: 11 17 23;
|
|
--nodedc-danger-rgb: 255 116 116;
|
|
--nodedc-warning-rgb: 255 209 102;
|
|
--nodedc-success-rgb: 181 255 90;
|
|
|
|
--nodedc-canvas: #050506;
|
|
--nodedc-canvas-soft: #0b0b0d;
|
|
--nodedc-text-primary: rgba(247, 248, 244, 0.96);
|
|
--nodedc-text-secondary: rgba(247, 248, 244, 0.72);
|
|
--nodedc-text-muted: rgba(247, 248, 244, 0.48);
|
|
--nodedc-text-disabled: rgba(247, 248, 244, 0.34);
|
|
|
|
/* Runtime material controls override only these five values. */
|
|
--nodedc-panel-material-rgb: 22 22 26;
|
|
--nodedc-panel-material-opacity: 0.68;
|
|
--nodedc-panel-material-strong-opacity: 0.8;
|
|
--nodedc-panel-material-soft-opacity: 0.48;
|
|
--nodedc-field-material-rgb: 16 16 22;
|
|
--nodedc-field-material-opacity: 0.78;
|
|
--nodedc-glass-panel-bg: rgb(var(--nodedc-panel-material-rgb) / var(--nodedc-panel-material-opacity));
|
|
--nodedc-glass-panel-bg-strong: rgb(var(--nodedc-panel-material-rgb) / var(--nodedc-panel-material-strong-opacity));
|
|
--nodedc-glass-panel-bg-soft: rgb(var(--nodedc-panel-material-rgb) / var(--nodedc-panel-material-soft-opacity));
|
|
--nodedc-header-pill-bg: rgba(64, 64, 64, 0.48);
|
|
--nodedc-glass-panel-surface: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.075), transparent 38%), linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012)), var(--nodedc-glass-panel-bg);
|
|
--nodedc-glass-panel-surface-strong: radial-gradient(circle at 16% 0%, rgba(255, 255, 255, 0.09), transparent 36%), linear-gradient(180deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.016)), var(--nodedc-glass-panel-bg-strong);
|
|
--nodedc-glass-control-bg: rgba(110, 110, 110, 0.07);
|
|
--nodedc-glass-control-hover: rgba(129, 129, 129, 0.13);
|
|
--nodedc-glass-control-active: rgba(255, 255, 255, 0.92);
|
|
--nodedc-glass-control-active-text: rgba(8, 8, 10, 0.96);
|
|
--nodedc-field-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent), rgb(var(--nodedc-field-material-rgb) / var(--nodedc-field-material-opacity));
|
|
--nodedc-overlay-bg: rgba(0, 0, 0, 0.46);
|
|
--nodedc-glass-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0.035));
|
|
--nodedc-glass-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.025);
|
|
--nodedc-glass-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.11), 0 28px 90px rgba(0, 0, 0, 0.38);
|
|
--nodedc-glass-dropdown-shadow: 0 22px 60px rgba(0, 0, 0, 0.42), 0 6px 18px rgba(0, 0, 0, 0.2);
|
|
--nodedc-focus-surface: rgb(var(--nodedc-accent-rgb) / 0.14);
|
|
--nodedc-glass-outline: rgba(255, 255, 255, 0.11);
|
|
--nodedc-app-panel-surface: var(--nodedc-glass-panel-surface-strong);
|
|
--nodedc-app-panel-shadow: 0 34px 110px rgba(0, 0, 0, 0.42);
|
|
--nodedc-app-panel-shadow-strong: 0 34px 110px rgba(0, 0, 0, 0.52);
|
|
--nodedc-panel-action-border: rgba(255, 255, 255, 0.22);
|
|
--nodedc-panel-action-border-hover: rgba(255, 255, 255, 0.3);
|
|
--nodedc-panel-item-bg: rgba(255, 255, 255, 0.04);
|
|
--nodedc-panel-item-hover-bg: rgba(255, 255, 255, 0.085);
|
|
--nodedc-panel-item-active-bg: rgba(255, 255, 255, 0.115);
|
|
--nodedc-panel-icon-bg: rgba(255, 255, 255, 0.045);
|
|
--nodedc-panel-active-icon-bg: rgba(247, 248, 244, 0.96);
|
|
--nodedc-panel-active-icon-color: rgb(var(--nodedc-on-accent-rgb));
|
|
--nodedc-scrollbar-thumb: rgba(255, 255, 255, 0.15);
|
|
--nodedc-primary-action-bg: rgb(var(--nodedc-accent-rgb));
|
|
--nodedc-primary-action-hover: color-mix(in srgb, rgb(var(--nodedc-accent-rgb)) 84%, white);
|
|
--nodedc-primary-action-color: rgb(var(--nodedc-on-accent-rgb));
|
|
--nodedc-primary-action-shadow: 0 12px 28px rgb(var(--nodedc-accent-rgb) / 0.2);
|
|
}
|
|
|
|
[data-nodedc-theme="light"] {
|
|
color-scheme: light;
|
|
--nodedc-accent-rgb: 255 47 146;
|
|
--nodedc-on-accent-rgb: 11 17 23;
|
|
--nodedc-danger-rgb: 205 47 67;
|
|
--nodedc-warning-rgb: 173 111 0;
|
|
--nodedc-success-rgb: 46 125 76;
|
|
|
|
--nodedc-canvas: #ececec;
|
|
--nodedc-canvas-soft: #f4f4f4;
|
|
--nodedc-text-primary: rgba(18, 20, 22, 0.96);
|
|
--nodedc-text-secondary: rgba(18, 20, 22, 0.7);
|
|
--nodedc-text-muted: rgba(18, 20, 22, 0.48);
|
|
--nodedc-text-disabled: rgba(18, 20, 22, 0.32);
|
|
|
|
/* The light values follow the SEO launcher material: white glass, soft depth. */
|
|
--nodedc-panel-material-rgb: 255 255 255;
|
|
--nodedc-panel-material-opacity: 0.62;
|
|
--nodedc-panel-material-strong-opacity: 0.8;
|
|
--nodedc-panel-material-soft-opacity: 0.46;
|
|
--nodedc-field-material-rgb: 255 255 255;
|
|
--nodedc-field-material-opacity: 0.72;
|
|
--nodedc-glass-panel-bg: rgb(var(--nodedc-panel-material-rgb) / var(--nodedc-panel-material-opacity));
|
|
--nodedc-glass-panel-bg-strong: rgb(var(--nodedc-panel-material-rgb) / var(--nodedc-panel-material-strong-opacity));
|
|
--nodedc-glass-panel-bg-soft: rgb(var(--nodedc-panel-material-rgb) / var(--nodedc-panel-material-soft-opacity));
|
|
--nodedc-header-pill-bg: rgba(255, 255, 255, 0.56);
|
|
--nodedc-glass-panel-surface: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.92), transparent 45%), linear-gradient(180deg, rgba(255, 255, 255, 0.76), rgba(255, 255, 255, 0.26)), var(--nodedc-glass-panel-bg);
|
|
--nodedc-glass-panel-surface-strong: radial-gradient(circle at 18% 0%, rgba(255, 255, 255, 0.98), transparent 45%), linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.36)), var(--nodedc-glass-panel-bg-strong);
|
|
--nodedc-glass-control-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.46)), rgba(255, 255, 255, 0.7);
|
|
--nodedc-glass-control-hover: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(255, 255, 255, 0.58)), rgba(255, 255, 255, 0.84);
|
|
--nodedc-glass-control-active: rgba(32, 32, 34, 0.96);
|
|
--nodedc-glass-control-active-text: rgba(247, 248, 244, 0.96);
|
|
--nodedc-field-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.3)), rgb(var(--nodedc-field-material-rgb) / var(--nodedc-field-material-opacity));
|
|
--nodedc-overlay-bg: rgba(24, 32, 29, 0.22);
|
|
--nodedc-glass-rim: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(24, 32, 29, 0.1));
|
|
--nodedc-glass-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 10px 22px rgba(24, 32, 29, 0.08);
|
|
--nodedc-glass-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 22px 76px rgba(24, 32, 29, 0.16);
|
|
--nodedc-glass-dropdown-shadow: 0 22px 60px rgba(24, 32, 29, 0.2), 0 6px 18px rgba(24, 32, 29, 0.1);
|
|
--nodedc-focus-surface: rgb(var(--nodedc-accent-rgb) / 0.1);
|
|
--nodedc-glass-outline: rgba(24, 32, 29, 0.12);
|
|
--nodedc-app-panel-surface: var(--nodedc-glass-panel-surface-strong);
|
|
--nodedc-app-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 22px 76px rgba(24, 32, 29, 0.16);
|
|
--nodedc-app-panel-shadow-strong: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 24px 82px rgba(24, 32, 29, 0.2);
|
|
--nodedc-panel-action-border: rgba(24, 32, 29, 0.12);
|
|
--nodedc-panel-action-border-hover: rgba(24, 32, 29, 0.22);
|
|
--nodedc-panel-item-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.44), rgba(255, 255, 255, 0.16)), rgba(255, 255, 255, 0.28);
|
|
--nodedc-panel-item-hover-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.24)), rgba(255, 255, 255, 0.38);
|
|
--nodedc-panel-item-active-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.68), rgba(255, 255, 255, 0.28)), rgba(255, 255, 255, 0.46);
|
|
--nodedc-panel-icon-bg: rgba(255, 255, 255, 0.38);
|
|
--nodedc-panel-active-icon-bg: rgba(32, 32, 34, 0.96);
|
|
--nodedc-panel-active-icon-color: rgba(247, 248, 244, 0.96);
|
|
--nodedc-scrollbar-thumb: rgba(24, 32, 29, 0.22);
|
|
--nodedc-primary-action-bg: rgba(24, 24, 24, 0.94);
|
|
--nodedc-primary-action-hover: rgba(8, 8, 10, 0.98);
|
|
--nodedc-primary-action-color: rgba(247, 248, 244, 0.96);
|
|
--nodedc-primary-action-shadow: none;
|
|
}
|