kato/scrum-solitare
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update

Browse Source
This commit is contained in:
Daniel Legt
2026-03-05 22:30:37 +02:00
parent 817bbfb44c
commit 637b5f0167
12 changed files with 1022 additions and 790 deletions
Download Patch File Download Diff File Expand all files Collapse all files

79
static/css/themes/modern.css Normal file
View File

@@ -0,0 +1,79 @@
: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);
}

66
static/css/themes/no-theme.css Normal file
View File

@@ -0,0 +1,66 @@
:root[data-ui-theme="none"] {
--font-main: ui-monospace, monospace;
--desktop-bg: #ffffff;
--desktop-pattern: none;
--surface-window: transparent;
--surface-control: #f5f5f5;
--surface-input: #ffffff;
--surface-status: #ffffff;
--text-primary: #000000;
--title-bg: transparent;
--title-text: #000000;
--border-outer: #bdbdbd;
--border-input: #bdbdbd;
--border-muted: #d3d3d3;
--window-border-width: 1px;
--control-border-width: 1px;
--input-border-width: 1px;
--window-shadow: none;
--button-shadow: none;
--button-shadow-active: none;
--focus-ring: 0 0 0 1px #777777;
--card-bg: #ffffff;
--card-text: #000000;
--card-border: #bdbdbd;
--card-border-width: 1px;
--selected-outline: 1px dashed #000000;
--modal-overlay: rgba(0, 0, 0, 0.2);
}
:root[data-ui-theme="none"][data-theme="dark"] {
--desktop-bg: #111111;
--surface-window: transparent;
--surface-control: #232323;
--surface-input: #161616;
--surface-status: #161616;
--text-primary: #e8e8e8;
--title-bg: transparent;
--title-text: #e8e8e8;
--border-outer: #4a4a4a;
--border-input: #4a4a4a;
--border-muted: #3a3a3a;
--focus-ring: 0 0 0 1px #9a9a9a;
--card-bg: #161616;
--card-text: #e8e8e8;
--card-border: #4a4a4a;
}
:root[data-ui-theme="none"] body {
background-color: var(--desktop-bg);
background-image: none;
}
:root[data-ui-theme="none"] .title-bar-controls,
:root[data-ui-theme="none"] .icon-btn img {
display: none;
}
:root[data-ui-theme="none"] .window,
:root[data-ui-theme="none"] .preview-board,
:root[data-ui-theme="none"] .voting-board {
border-style: dashed;
}
:root[data-ui-theme="none"] .preset-modal-overlay {
background: var(--modal-overlay);
}

88
static/css/themes/win98.css Normal file
View File

@@ -0,0 +1,88 @@
: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; }
}