89 lines
2.7 KiB
CSS
89 lines
2.7 KiB
CSS
|
:root:not([data-ui-theme]),
|
||
|
|
:root[data-ui-theme="win98"] {
|
||
|
|
--font-main: 'VT323', monospace;
|
||
|
|
--desktop-bg: #008080;
|
||
|
|
--desktop-pattern: radial-gradient(circle, rgba(0, 0, 0, 0.12) 1px, transparent 1px);
|
||
|
|
--surface-window: #c0c0c0;
|
||
|
|
--surface-control: #c0c0c0;
|
||
|
|
--surface-input: #ffffff;
|
||
|
|
--surface-status: #b3b3b3;
|
||
|
|
--text-primary: #000000;
|
||
|
|
--title-bg: #000080;
|
||
|
|
--title-text: #ffffff;
|
||
|
|
--border-outer: #000000;
|
||
|
|
--border-input: #000000;
|
||
|
|
--border-muted: #808080;
|
||
|
|
--window-border-width: 2px;
|
||
|
|
--control-border-width: 1px;
|
||
|
|
--input-border-width: 2px;
|
||
|
|
--window-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080;
|
||
|
|
--button-shadow: inset 1px 1px #dfdfdf, inset -1px -1px #808080;
|
||
|
|
--button-shadow-active: inset 1px 1px #808080, inset -1px -1px #dfdfdf;
|
||
|
|
--focus-ring: inset 0 0 0 1px #000080;
|
||
|
|
--card-bg: #ffffff;
|
||
|
|
--card-text: #000000;
|
||
|
|
--card-border: #000000;
|
||
|
|
--card-border-width: 2px;
|
||
|
|
--selected-outline: 2px dotted currentColor;
|
||
|
|
--modal-overlay: rgba(0, 0, 0, 0.45);
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-ui-theme="win98"][data-theme="dark"] {
|
||
|
|
--desktop-bg: #0a0a0a;
|
||
|
|
--desktop-pattern: radial-gradient(circle, rgba(0, 255, 80, 0.08) 1px, transparent 1px);
|
||
|
|
--surface-window: #2b2b2b;
|
||
|
|
--surface-control: #2b2b2b;
|
||
|
|
--surface-input: #111111;
|
||
|
|
--surface-status: #1b1b1b;
|
||
|
|
--text-primary: #e0e0e0;
|
||
|
|
--title-bg: #000000;
|
||
|
|
--title-text: #00ff66;
|
||
|
|
--border-outer: #000000;
|
||
|
|
--border-input: #555555;
|
||
|
|
--border-muted: #3b3b3b;
|
||
|
|
--window-shadow: inset 1px 1px #3a3a3a, inset -1px -1px #1a1a1a;
|
||
|
|
--button-shadow: inset 1px 1px #3a3a3a, inset -1px -1px #1a1a1a;
|
||
|
|
--button-shadow-active: inset 1px 1px #1a1a1a, inset -1px -1px #3a3a3a;
|
||
|
|
--focus-ring: inset 0 0 0 1px #00ff66;
|
||
|
|
--card-bg: #171717;
|
||
|
|
--card-text: #00ff66;
|
||
|
|
--card-border: #555555;
|
||
|
|
}
|
||
|
|
|
||
|
|
body {
|
||
|
|
background-color: var(--desktop-bg);
|
||
|
|
background-image: var(--desktop-pattern);
|
||
|
|
background-size: 4px 4px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preview-board,
|
||
|
|
.voting-board {
|
||
|
|
background: #0f6d3d;
|
||
|
|
border: 2px solid #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
:root[data-ui-theme="win98"][data-theme="dark"] .preview-board,
|
||
|
|
:root[data-ui-theme="win98"][data-theme="dark"] .voting-board {
|
||
|
|
background: #0a2c14;
|
||
|
|
}
|
||
|
|
|
||
|
|
.preset-modal-overlay {
|
||
|
|
background: var(--modal-overlay);
|
||
|
|
}
|
||
|
|
|
||
|
|
.skeleton-line,
|
||
|
|
.skeleton-board,
|
||
|
|
.skeleton-table,
|
||
|
|
.skeleton-list,
|
||
|
|
.skeleton-controls {
|
||
|
|
background: linear-gradient(90deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.08));
|
||
|
|
background-size: 220% 100%;
|
||
|
|
border: 1px solid var(--border-muted);
|
||
|
|
animation: skeleton-shimmer 1.2s ease infinite;
|
||
|
|
}
|
||
|
|
|
||
|
|
@keyframes skeleton-shimmer {
|
||
|
|
from { background-position: 0 0; }
|
||
|
|
to { background-position: -200% 0; }
|
||
|
|
}
|