229 lines
7.1 KiB
CSS
229 lines
7.1 KiB
CSS
:root[data-ui-theme="modern"] {
|
|
--font-main: "Segoe UI Variable Text", "Segoe UI", "Inter", "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
|
|
--desktop-bg: #282c34;
|
|
--desktop-pattern:
|
|
radial-gradient(circle at 14% 18%, rgba(97, 175, 239, 0.18) 0, rgba(97, 175, 239, 0) 46%),
|
|
radial-gradient(circle at 88% 10%, rgba(198, 120, 221, 0.18) 0, rgba(198, 120, 221, 0) 40%),
|
|
radial-gradient(circle at 54% 100%, rgba(86, 182, 194, 0.13) 0, rgba(86, 182, 194, 0) 52%),
|
|
linear-gradient(165deg, #2c313c 0%, #232731 100%);
|
|
--surface-window: rgba(40, 44, 52, 0.92);
|
|
--surface-control: #3a404b;
|
|
--surface-input: #21252b;
|
|
--surface-status: #2f343f;
|
|
--text-primary: #abb2bf;
|
|
--title-bg: linear-gradient(90deg, #353b46 0%, #2c313c 100%);
|
|
--title-text: #e6edf7;
|
|
--border-outer: #4b5263;
|
|
--border-input: #5c6370;
|
|
--border-muted: #3a404b;
|
|
--window-border-width: 1px;
|
|
--control-border-width: 1px;
|
|
--input-border-width: 1px;
|
|
--window-shadow: 0 18px 45px rgba(14, 16, 20, 0.42);
|
|
--button-shadow: 0 4px 16px rgba(0, 0, 0, 0.22);
|
|
--button-shadow-active: inset 0 1px 0 rgba(0, 0, 0, 0.25);
|
|
--focus-ring: 0 0 0 2px rgba(97, 175, 239, 0.35);
|
|
--card-bg: #21252b;
|
|
--card-text: #e6edf7;
|
|
--card-border: #5c6370;
|
|
--card-border-width: 1px;
|
|
--selected-outline: 2px solid #61afef;
|
|
--modal-overlay: rgba(10, 12, 16, 0.62);
|
|
}
|
|
|
|
:root[data-ui-theme="modern"][data-theme="dark"] {
|
|
--desktop-bg: #21252b;
|
|
--desktop-pattern:
|
|
radial-gradient(circle at 12% 16%, rgba(97, 175, 239, 0.16) 0, rgba(97, 175, 239, 0) 46%),
|
|
radial-gradient(circle at 86% 8%, rgba(198, 120, 221, 0.16) 0, rgba(198, 120, 221, 0) 42%),
|
|
linear-gradient(165deg, #252932 0%, #1d2027 100%);
|
|
--surface-window: rgba(33, 37, 43, 0.95);
|
|
--surface-control: #343a45;
|
|
--surface-input: #1d2127;
|
|
--surface-status: #2a2f38;
|
|
--text-primary: #b9c2d0;
|
|
--title-bg: linear-gradient(90deg, #2f343f 0%, #272c35 100%);
|
|
--title-text: #eef3fb;
|
|
--border-outer: #5c6370;
|
|
--border-input: #6c7484;
|
|
--border-muted: #404652;
|
|
--window-shadow: 0 20px 52px rgba(8, 10, 13, 0.58);
|
|
--focus-ring: 0 0 0 2px rgba(97, 175, 239, 0.42);
|
|
--card-bg: #1d2127;
|
|
--card-text: #eef3fb;
|
|
--card-border: #6c7484;
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] body {
|
|
background-color: var(--desktop-bg);
|
|
background-image: var(--desktop-pattern);
|
|
background-size: cover;
|
|
background-attachment: fixed;
|
|
}
|
|
|
|
: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.62rem;
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .window {
|
|
backdrop-filter: blur(5px);
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .mobile-control-strip,
|
|
:root[data-ui-theme="modern"] .taskbar {
|
|
background: rgba(40, 44, 52, 0.82);
|
|
border-top-color: var(--border-input);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .title-bar {
|
|
font-size: 0.96rem;
|
|
letter-spacing: 0.01em;
|
|
border-bottom: 1px solid rgba(97, 175, 239, 0.3);
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .title-bar-controls button {
|
|
border-radius: 0.45rem;
|
|
border-color: var(--border-input);
|
|
background: #323843;
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .title-bar-controls button:hover,
|
|
:root[data-ui-theme="modern"] .btn:hover {
|
|
background: #434a57;
|
|
border-color: #7d8699;
|
|
color: #e6edf7;
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .btn {
|
|
transition: background 120ms ease, border-color 120ms ease, transform 120ms ease;
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .btn:active {
|
|
transform: translateY(1px);
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .btn-primary {
|
|
background: #61afef;
|
|
border-color: #61afef;
|
|
color: #10131a;
|
|
font-weight: 700;
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .btn-primary:hover {
|
|
background: #79bcf3;
|
|
border-color: #79bcf3;
|
|
color: #0d1117;
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] input::placeholder,
|
|
:root[data-ui-theme="modern"] textarea::placeholder {
|
|
color: #7d8699;
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .status-line,
|
|
:root[data-ui-theme="modern"] .summary-table,
|
|
:root[data-ui-theme="modern"] .participant-list {
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .summary-table th {
|
|
color: #61afef;
|
|
background: #272c35;
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .participant-item:hover {
|
|
background: rgba(97, 175, 239, 0.08);
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .participant-name.is-admin {
|
|
color: #d19a66;
|
|
text-shadow: 0 0 0.25rem rgba(209, 154, 102, 0.28);
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .preview-board,
|
|
:root[data-ui-theme="modern"] .voting-board {
|
|
background:
|
|
linear-gradient(145deg, rgba(97, 175, 239, 0.07) 0%, rgba(33, 37, 43, 0) 34%),
|
|
linear-gradient(0deg, rgba(92, 99, 112, 0.08), rgba(92, 99, 112, 0.08)),
|
|
#20242b;
|
|
border: 1px solid #5c6370;
|
|
box-shadow: inset 0 0 0 1px rgba(97, 175, 239, 0.15), inset 0 -20px 40px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
:root[data-ui-theme="modern"][data-theme="dark"] .preview-board,
|
|
:root[data-ui-theme="modern"][data-theme="dark"] .voting-board {
|
|
background:
|
|
linear-gradient(145deg, rgba(97, 175, 239, 0.07) 0%, rgba(33, 37, 43, 0) 35%),
|
|
linear-gradient(0deg, rgba(108, 116, 132, 0.08), rgba(108, 116, 132, 0.08)),
|
|
#1b1f25;
|
|
border-color: #6c7484;
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .vote-card,
|
|
:root[data-ui-theme="modern"] .preview-card {
|
|
box-shadow: 0 5px 16px rgba(0, 0, 0, 0.28);
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .vote-card:hover {
|
|
border-color: #61afef;
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .vote-card.is-selected {
|
|
box-shadow: 0 0 0 1px #61afef, 0 10px 22px rgba(97, 175, 239, 0.22);
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .hint-text {
|
|
color: #7d8699;
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .icon-btn img {
|
|
image-rendering: auto;
|
|
filter: saturate(0.9) brightness(0.9);
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .preset-modal-overlay {
|
|
background: var(--modal-overlay);
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .skeleton-line,
|
|
:root[data-ui-theme="modern"] .skeleton-board,
|
|
:root[data-ui-theme="modern"] .skeleton-table,
|
|
:root[data-ui-theme="modern"] .skeleton-list,
|
|
:root[data-ui-theme="modern"] .skeleton-controls {
|
|
background: linear-gradient(90deg, rgba(92, 99, 112, 0.22), rgba(122, 132, 148, 0.32), rgba(92, 99, 112, 0.22));
|
|
background-size: 220% 100%;
|
|
border: 1px solid #4b5263;
|
|
border-radius: 0.4rem;
|
|
animation: modern-skeleton-shimmer 1.2s ease infinite;
|
|
}
|
|
|
|
@keyframes modern-skeleton-shimmer {
|
|
from { background-position: 0 0; }
|
|
to { background-position: -200% 0; }
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .terminal-window .title-bar {
|
|
background: #21252b;
|
|
color: #98c379;
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .terminal-window .title-bar-controls button {
|
|
background: #2f343f;
|
|
color: #98c379;
|
|
border-color: #5c6370;
|
|
}
|
|
|
|
:root[data-ui-theme="modern"] .terminal-log-output {
|
|
background: #1b1f25;
|
|
color: #abb2bf;
|
|
border: 1px solid #4b5263;
|
|
font-family: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
|
}
|