From d9792efe34e0c6267d4787b009b9c42db25afb45 Mon Sep 17 00:00:00 2001 From: fretuks Date: Wed, 15 Apr 2026 22:06:32 +0200 Subject: [PATCH] fix dark mode styling --- public/style.css | 190 ++++++++++++++++++++++++----------------------- 1 file changed, 96 insertions(+), 94 deletions(-) diff --git a/public/style.css b/public/style.css index b1b4e7c..ec8a6f7 100644 --- a/public/style.css +++ b/public/style.css @@ -2379,105 +2379,107 @@ select:focus { border: 1px dashed var(--line-strong); } -body[data-theme="fakegpt"] { - --bg: #0b0f0d; - --bg-soft: #111715; - --surface: rgba(18, 24, 21, 0.88); - --surface-strong: rgba(18, 24, 21, 0.96); - --text: #e8fff7; - --text-soft: #b7d8ce; - --text-muted: #87aea3; - --line: rgba(36, 255, 180, 0.12); - --line-strong: rgba(36, 255, 180, 0.2); - --shadow: 0 0 0 1px rgba(36, 255, 180, 0.05), 0 0 26px rgba(16, 163, 127, 0.12); - --bg-gradient: linear-gradient(180deg, #0b0f0d 0%, #111715 100%); - --hero-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92)); - --overview-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92)); - --panel-subtle: rgba(10, 15, 13, 0.92); - --panel-soft: rgba(18, 24, 21, 0.9); - --panel-soft-strong: rgba(18, 24, 21, 0.92); - --chip-surface: rgba(10, 15, 13, 0.92); - --chip-muted: rgba(36, 255, 180, 0.08); - --field-surface: rgba(10, 15, 13, 0.96); - --field-surface-strong: rgba(10, 15, 13, 0.96); - --field-focus-surface: rgba(12, 19, 16, 0.98); - --field-focus-border: rgba(36, 255, 180, 0.26); - --field-focus-ring: 0 0 0 4px rgba(16, 163, 127, 0.14); - --status-surface: rgba(18, 24, 21, 0.9); - --status-border: rgba(36, 255, 180, 0.12); - --status-error-surface: rgba(181, 71, 61, 0.16); - --status-error-border: rgba(181, 71, 61, 0.28); - --status-success-surface: rgba(16, 163, 127, 0.14); - --status-success-border: rgba(36, 255, 180, 0.24); - --secondary-surface: rgba(18, 24, 21, 0.96); - --secondary-surface-strong: rgba(16, 163, 127, 0.16); - --secondary-border: rgba(36, 255, 180, 0.16); - --secondary-border-strong: rgba(36, 255, 180, 0.26); - --item-hover-border: rgba(36, 255, 180, 0.22); - --item-active-border: rgba(36, 255, 180, 0.34); - --overlay-surface: linear-gradient(180deg, rgba(9, 14, 12, 0.82), rgba(15, 22, 19, 0.9)); - --overlay-card-surface: linear-gradient(155deg, rgba(14, 20, 18, 0.96), rgba(18, 24, 21, 0.94)); - --overlay-card-border: rgba(36, 255, 180, 0.16); - --overlay-card-shadow: 0 24px 70px rgba(3, 10, 8, 0.5); - --prompt-chip-surface: rgba(18, 24, 21, 0.9); - --messages-surface: rgba(18, 24, 21, 0.88); - --pill-surface: rgba(18, 24, 21, 0.9); - --pill-border: rgba(36, 255, 180, 0.14); - --tag-surface: rgba(36, 255, 180, 0.08); - --tag-ai-surface: rgba(16, 163, 127, 0.16); - --tag-user-surface: rgba(36, 255, 180, 0.12); - background: radial-gradient(circle at top left, rgba(16, 163, 127, 0.15), transparent 26%), linear-gradient(180deg, #0b0f0d 0%, #111715 100%); - color: #e8fff7; - color-scheme: dark; -} +@media (prefers-color-scheme: dark) { + body[data-theme="fakegpt"] { + --bg: #0b0f0d; + --bg-soft: #111715; + --surface: rgba(18, 24, 21, 0.88); + --surface-strong: rgba(18, 24, 21, 0.96); + --text: #e8fff7; + --text-soft: #b7d8ce; + --text-muted: #87aea3; + --line: rgba(36, 255, 180, 0.12); + --line-strong: rgba(36, 255, 180, 0.2); + --shadow: 0 0 0 1px rgba(36, 255, 180, 0.05), 0 0 26px rgba(16, 163, 127, 0.12); + --bg-gradient: linear-gradient(180deg, #0b0f0d 0%, #111715 100%); + --hero-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92)); + --overview-gradient: linear-gradient(180deg, rgba(10, 15, 13, 0.96), rgba(18, 24, 21, 0.92)); + --panel-subtle: rgba(10, 15, 13, 0.92); + --panel-soft: rgba(18, 24, 21, 0.9); + --panel-soft-strong: rgba(18, 24, 21, 0.92); + --chip-surface: rgba(10, 15, 13, 0.92); + --chip-muted: rgba(36, 255, 180, 0.08); + --field-surface: rgba(10, 15, 13, 0.96); + --field-surface-strong: rgba(10, 15, 13, 0.96); + --field-focus-surface: rgba(12, 19, 16, 0.98); + --field-focus-border: rgba(36, 255, 180, 0.26); + --field-focus-ring: 0 0 0 4px rgba(16, 163, 127, 0.14); + --status-surface: rgba(18, 24, 21, 0.9); + --status-border: rgba(36, 255, 180, 0.12); + --status-error-surface: rgba(181, 71, 61, 0.16); + --status-error-border: rgba(181, 71, 61, 0.28); + --status-success-surface: rgba(16, 163, 127, 0.14); + --status-success-border: rgba(36, 255, 180, 0.24); + --secondary-surface: rgba(18, 24, 21, 0.96); + --secondary-surface-strong: rgba(16, 163, 127, 0.16); + --secondary-border: rgba(36, 255, 180, 0.16); + --secondary-border-strong: rgba(36, 255, 180, 0.26); + --item-hover-border: rgba(36, 255, 180, 0.22); + --item-active-border: rgba(36, 255, 180, 0.34); + --overlay-surface: linear-gradient(180deg, rgba(9, 14, 12, 0.82), rgba(15, 22, 19, 0.9)); + --overlay-card-surface: linear-gradient(155deg, rgba(14, 20, 18, 0.96), rgba(18, 24, 21, 0.94)); + --overlay-card-border: rgba(36, 255, 180, 0.16); + --overlay-card-shadow: 0 24px 70px rgba(3, 10, 8, 0.5); + --prompt-chip-surface: rgba(18, 24, 21, 0.9); + --messages-surface: rgba(18, 24, 21, 0.88); + --pill-surface: rgba(18, 24, 21, 0.9); + --pill-border: rgba(36, 255, 180, 0.14); + --tag-surface: rgba(36, 255, 180, 0.08); + --tag-ai-surface: rgba(16, 163, 127, 0.16); + --tag-user-surface: rgba(36, 255, 180, 0.12); + background: radial-gradient(circle at top left, rgba(16, 163, 127, 0.15), transparent 26%), linear-gradient(180deg, #0b0f0d 0%, #111715 100%); + color: #e8fff7; + color-scheme: dark; + } -body[data-theme="fakegpt"] .card, -body[data-theme="fakegpt"] .chat-sidebar, -body[data-theme="fakegpt"] .messages-panel, -body[data-theme="fakegpt"] .input-shell, -body[data-theme="fakegpt"] .market-shell, -body[data-theme="fakegpt"] .settings-panel, -body[data-theme="fakegpt"] .modal-card, -body[data-theme="fakegpt"] .persona-popover { - background: rgba(18, 24, 21, 0.88); - border-color: rgba(36, 255, 180, 0.14); - box-shadow: 0 0 0 1px rgba(36, 255, 180, 0.05), 0 0 26px rgba(16, 163, 127, 0.12); -} + body[data-theme="fakegpt"] .card, + body[data-theme="fakegpt"] .chat-sidebar, + body[data-theme="fakegpt"] .messages-panel, + body[data-theme="fakegpt"] .input-shell, + body[data-theme="fakegpt"] .market-shell, + body[data-theme="fakegpt"] .settings-panel, + body[data-theme="fakegpt"] .modal-card, + body[data-theme="fakegpt"] .persona-popover { + background: rgba(18, 24, 21, 0.88); + border-color: rgba(36, 255, 180, 0.14); + box-shadow: 0 0 0 1px rgba(36, 255, 180, 0.05), 0 0 26px rgba(16, 163, 127, 0.12); + } -body[data-theme="fakegpt"] .auth-panel, -body[data-theme="fakegpt"] .auth-hero, -body[data-theme="fakegpt"] .workspace-overview, -body[data-theme="fakegpt"] .hero-stat, -body[data-theme="fakegpt"] .summary-card, -body[data-theme="fakegpt"] .context-pill, -body[data-theme="fakegpt"] .prompt-chip, -body[data-theme="fakegpt"] .status, -body[data-theme="fakegpt"] .model-popover, -body[data-theme="fakegpt"] .model-select, -body[data-theme="fakegpt"] .model-help { - background: rgba(18, 24, 21, 0.9); - color: #e8fff7; - border-color: rgba(36, 255, 180, 0.12); -} + body[data-theme="fakegpt"] .auth-panel, + body[data-theme="fakegpt"] .auth-hero, + body[data-theme="fakegpt"] .workspace-overview, + body[data-theme="fakegpt"] .hero-stat, + body[data-theme="fakegpt"] .summary-card, + body[data-theme="fakegpt"] .context-pill, + body[data-theme="fakegpt"] .prompt-chip, + body[data-theme="fakegpt"] .status, + body[data-theme="fakegpt"] .model-popover, + body[data-theme="fakegpt"] .model-select, + body[data-theme="fakegpt"] .model-help { + background: rgba(18, 24, 21, 0.9); + color: #e8fff7; + border-color: rgba(36, 255, 180, 0.12); + } -body[data-theme="fakegpt"] .chat-item, -body[data-theme="fakegpt"] .persona-item, -body[data-theme="fakegpt"] .hero-panel { - background: rgba(10, 15, 13, 0.92); - border-color: rgba(36, 255, 180, 0.12); -} + body[data-theme="fakegpt"] .chat-item, + body[data-theme="fakegpt"] .persona-item, + body[data-theme="fakegpt"] .hero-panel { + background: rgba(10, 15, 13, 0.92); + border-color: rgba(36, 255, 180, 0.12); + } -body[data-theme="fakegpt"] .msg.user { - border-radius: 24px 24px 8px 24px; - box-shadow: 0 0 24px rgba(16, 163, 127, 0.22); -} + body[data-theme="fakegpt"] .msg.user { + border-radius: 24px 24px 8px 24px; + box-shadow: 0 0 24px rgba(16, 163, 127, 0.22); + } -body[data-theme="fakegpt"] .msg.bot, -body[data-theme="fakegpt"] .msg.loading { - background: #141917; - border: 1px solid rgba(36, 255, 180, 0.08); - border-radius: 24px 24px 24px 8px; - box-shadow: 0 0 18px rgba(16, 163, 127, 0.08); + body[data-theme="fakegpt"] .msg.bot, + body[data-theme="fakegpt"] .msg.loading { + background: #141917; + border: 1px solid rgba(36, 255, 180, 0.08); + border-radius: 24px 24px 24px 8px; + box-shadow: 0 0 18px rgba(16, 163, 127, 0.08); + } } body[data-theme="fakegpt"] .typing-dot {