Theme

2026-03-06 10:57:57 +02:00
parent 61417dbf92
commit f72875bef1
6 changed files with 288 additions and 50 deletions
--- a/static/css/themes/modern.css
+++ b/static/css/themes/modern.css
@@ -1,56 +1,64 @@
 :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;
+    --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 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;
+    --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 #175cd3;
-    --modal-overlay: rgba(15, 23, 42, 0.35);
+    --selected-outline: 2px solid #61afef;
+    --modal-overlay: rgba(10, 12, 16, 0.62);
 }

 :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;
+    --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,
@@ -60,20 +68,161 @@
 :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(180deg, #0f6f54 0%, #0a5c45 100%);
-    border: 1px solid var(--border-input);
+    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(180deg, #0b3e33 0%, #082d25 100%);
+    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;
+}