80 lines
2.5 KiB
CSS
80 lines
2.5 KiB
CSS
|
:root[data-ui-theme="modern"] {
|
||
|
|
--font-main: 'Segoe UI', 'Inter', Arial, sans-serif;
|
||
|
|
--desktop-bg: #e8edf4;
|
||
|
|
--desktop-pattern: linear-gradient(135deg, #eef3f8 0%, #dde7f2 100%);
|
||
|
|
--surface-window: #ffffff;
|
||
|
|
--surface-control: #f1f4f8;
|
||
|
|
--surface-input: #ffffff;
|
||
|
|
--surface-status: #f8fafc;
|
||
|
|
--text-primary: #101828;
|
||
|
|
--title-bg: #175cd3;
|
||
|
|
--title-text: #ffffff;
|
||
|
|
--border-outer: #c4ced9;
|
||
|
|
--border-input: #b8c3d2;
|
||
|
|
--border-muted: #d5dde8;
|
||
|
|
--window-border-width: 1px;
|
||
|
|
--control-border-width: 1px;
|
||
|
|
--input-border-width: 1px;
|
||
|
|
--window-shadow: 0 12px 30px rgba(16, 24, 40, 0.14);
|
||
|
|
--button-shadow: none;
|
||
|
|
--button-shadow-active: none;
|
||
|
|
--focus-ring: 0 0 0 2px rgba(23, 92, 211, 0.22);
|
||
|
|
--card-bg: #ffffff;
|
||
|
|
--card-text: #101828;
|
||
|
|
--card-border: #b8c3d2;
|
||
|
|
--card-border-width: 1px;
|
||
|
|
--selected-outline: 2px solid #175cd3;
|
||
|
|
--modal-overlay: rgba(15, 23, 42, 0.35);
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-ui-theme="modern"][data-theme="dark"] {
|
||
|
|
--desktop-bg: #0b1220;
|
||
|
|
--desktop-pattern: linear-gradient(140deg, #111b2c 0%, #09101d 100%);
|
||
|
|
--surface-window: #111827;
|
||
|
|
--surface-control: #1f2937;
|
||
|
|
--surface-input: #0f172a;
|
||
|
|
--surface-status: #172033;
|
||
|
|
--text-primary: #e5edf7;
|
||
|
|
--title-bg: #1d4ed8;
|
||
|
|
--title-text: #ffffff;
|
||
|
|
--border-outer: #334155;
|
||
|
|
--border-input: #3f5169;
|
||
|
|
--border-muted: #334155;
|
||
|
|
--window-shadow: 0 14px 34px rgba(0, 0, 0, 0.45);
|
||
|
|
--focus-ring: 0 0 0 2px rgba(96, 165, 250, 0.34);
|
||
|
|
--card-bg: #1e293b;
|
||
|
|
--card-text: #e5edf7;
|
||
|
|
--card-border: #334155;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-ui-theme="modern"] body {
|
||
|
|
background-color: var(--desktop-bg);
|
||
|
|
background-image: var(--desktop-pattern);
|
||
|
|
background-size: cover;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-ui-theme="modern"] .window,
|
||
|
|
:root[data-ui-theme="modern"] .vote-card,
|
||
|
|
:root[data-ui-theme="modern"] .preview-card,
|
||
|
|
:root[data-ui-theme="modern"] .btn,
|
||
|
|
:root[data-ui-theme="modern"] input,
|
||
|
|
:root[data-ui-theme="modern"] select,
|
||
|
|
:root[data-ui-theme="modern"] textarea {
|
||
|
|
border-radius: 0.45rem;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-ui-theme="modern"] .preview-board,
|
||
|
|
:root[data-ui-theme="modern"] .voting-board {
|
||
|
|
background: linear-gradient(180deg, #0f6f54 0%, #0a5c45 100%);
|
||
|
|
border: 1px solid var(--border-input);
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-ui-theme="modern"][data-theme="dark"] .preview-board,
|
||
|
|
:root[data-ui-theme="modern"][data-theme="dark"] .voting-board {
|
||
|
|
background: linear-gradient(180deg, #0b3e33 0%, #082d25 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-ui-theme="modern"] .preset-modal-overlay {
|
||
|
|
background: var(--modal-overlay);
|
||
|
|
}
|