diff --git a/backend/bot/app/web/themes/ascii/style.css b/backend/bot/app/web/themes/ascii/style.css index 77d1878..beae129 100644 --- a/backend/bot/app/web/themes/ascii/style.css +++ b/backend/bot/app/web/themes/ascii/style.css @@ -18,6 +18,21 @@ --muted: #b0b0b0; --dim: #6a6a6a; --danger: #ff5555; + --danger-text: #ff5555; + --danger-soft: #000000; + --danger-border: #ff5555; + --success: #ffffff; + --success-text: #ffffff; + --success-soft: #000000; + --success-border: #ffffff; + --warning: #ffffff; + --warning-text: #ffffff; + --warning-soft: #000000; + --warning-border: #ffffff; + --info: #ffffff; + --info-text: #ffffff; + --info-soft: #000000; + --info-border: #ffffff; --blue: #ffffff; --radius: 0px; --font-sans: "JetBrains Mono", "Cascadia Code", "Fira Code", "Consolas", @@ -112,11 +127,28 @@ .theme-key-ascii .tariff-action-card, .theme-key-ascii .tariff-warning-card, .theme-key-ascii .topup-carryover-note, -.theme-key-ascii .input, +.theme-key-ascii .subscription-purchase-description, .theme-key-ascii .dialog-card, .theme-key-ascii .language-select-content, .theme-key-ascii .bottom-nav, .theme-key-ascii .toast, +.theme-key-ascii .auth-card, +.theme-key-ascii .support-overview-card, +.theme-key-ascii .support-list-card, +.theme-key-ascii .support-ticket-card, +.theme-key-ascii .support-conversation-card, +.theme-key-ascii .support-new-ticket-button, +.theme-key-ascii .support-create-panel, +.theme-key-ascii .support-select-trigger, +.theme-key-ascii .support-select-content, +.theme-key-ascii .support-status-tabs-list, +.theme-key-ascii .support-user-ticket-skeleton, +.theme-key-ascii .ticket-card, +.theme-key-ascii .support-empty-state, +.theme-key-ascii .support-message-scroll, +.theme-key-ascii .ticket-message-avatar, +.theme-key-ascii .ticket-message-bubble, +.theme-key-ascii .ticket-composer, .theme-key-ascii .admin-sidebar, .theme-key-ascii .admin-header, .theme-key-ascii .admin-card, @@ -147,6 +179,10 @@ .theme-key-ascii .btn, .theme-key-ascii .language-select-trigger, .theme-key-ascii .bottom-nav button, +.theme-key-ascii .link-button, +.theme-key-ascii .support-new-ticket-button, +.theme-key-ascii .support-select-trigger, +.theme-key-ascii .support-status-tabs-trigger, .theme-key-ascii .admin-btn, .theme-key-ascii .admin-chip, .theme-key-ascii .admin-tabs-trigger, @@ -176,6 +212,8 @@ .theme-key-ascii .btn:active:not(:disabled), .theme-key-ascii .bottom-nav button:active, +.theme-key-ascii .support-new-ticket-button:active, +.theme-key-ascii .support-status-tabs-trigger:active, .theme-key-ascii .admin-btn:active:not(:disabled) { background: #ffffff; color: #000000; @@ -188,6 +226,10 @@ .theme-key-ascii .period-card.active, .theme-key-ascii .method-card.active, .theme-key-ascii .option-row.active, +.theme-key-ascii .support-new-ticket-button.active, +.theme-key-ascii .support-status-tabs-trigger[data-state="active"], +.theme-key-ascii .support-select-item[data-highlighted], +.theme-key-ascii .support-select-item[data-selected], .theme-key-ascii .admin-nav-item.active, .theme-key-ascii .admin-tabs-trigger[data-state="active"], .theme-key-ascii .admin-revenue-period-btn.is-active { @@ -226,6 +268,7 @@ /* ---------- Inputs ---------- */ .theme-key-ascii .input, +.theme-key-ascii .textarea, .theme-key-ascii .admin-input, .theme-key-ascii .admin-textarea, .theme-key-ascii .admin-screen-wrap textarea, @@ -240,6 +283,7 @@ } .theme-key-ascii .input::placeholder, +.theme-key-ascii .textarea::placeholder, .theme-key-ascii .admin-input::placeholder, .theme-key-ascii .admin-textarea::placeholder, .theme-key-ascii .admin-screen-wrap textarea::placeholder, @@ -249,6 +293,7 @@ } .theme-key-ascii .input:focus, +.theme-key-ascii .textarea:focus, .theme-key-ascii .admin-input:focus, .theme-key-ascii .admin-textarea:focus, .theme-key-ascii .admin-screen-wrap textarea:focus, @@ -258,6 +303,140 @@ box-shadow: inset 0 0 0 1px #ffffff; } +/* ---------- New webapp surfaces: support, purchase info, password login ---------- */ + +.theme-key-ascii .subscription-purchase-description, +.theme-key-ascii .support-create-panel, +.theme-key-ascii .ticket-composer { + background: #000000; +} + +.theme-key-ascii .support-heading-icon, +.theme-key-ascii .support-new-ticket-icon, +.theme-key-ascii .support-empty-state svg, +.theme-key-ascii .ticket-card-title svg, +.theme-key-ascii .field-error-icon { + color: #ffffff; +} + +.theme-key-ascii .password-switch-divider, +.theme-key-ascii .or-line span { + height: 1px; + background: #ffffff; +} + +.theme-key-ascii .link-button { + min-height: 28px; + padding: 0 8px; + color: #ffffff; + cursor: pointer; +} + +.theme-key-ascii .link-button:hover:not(:disabled), +.theme-key-ascii .support-status-tabs-trigger:hover { + background: #ffffff; + color: #000000; +} + +.theme-key-ascii .ticket-card::before { + inset: 0 auto 0 0; + width: 1px; + border-radius: 0; + background: #ffffff; +} + +.theme-key-ascii .ticket-status-badge, +.theme-key-ascii .ticket-priority-badge, +.theme-key-ascii .ticket-message-role-badge { + border-color: #ffffff; + background: #000000; + color: #ffffff; +} + +.theme-key-ascii .ticket-status-badge::before, +.theme-key-ascii .ticket-priority-badge::before, +.theme-key-ascii .support-status-tabs-trigger b::before { + content: "["; +} + +.theme-key-ascii .ticket-status-badge::after, +.theme-key-ascii .ticket-priority-badge::after, +.theme-key-ascii .support-status-tabs-trigger b::after { + content: "]"; +} + +.theme-key-ascii .ticket-message-row, +.theme-key-ascii .ticket-message-row--admin, +.theme-key-ascii .ticket-message-row--user, +.theme-key-ascii .ticket-message-row--system, +.theme-key-ascii .ticket-message-row--internal { + --ticket-bubble-bg: #000000; + --ticket-bubble-border: #ffffff; + --ticket-bubble-text: #ffffff; +} + +.theme-key-ascii .ticket-message-bubble, +.theme-key-ascii .ticket-message-row--outgoing .ticket-message-bubble { + border-radius: 0; +} + +.theme-key-ascii .ticket-message-row--outgoing .ticket-message-bubble::after, +.theme-key-ascii .ticket-message-row--incoming .ticket-message-bubble::before { + color: #ffffff; + font-family: var(--font-mono); +} + +.theme-key-ascii .ticket-message-row--outgoing .ticket-message-bubble::after { + content: " >"; +} + +.theme-key-ascii .ticket-message-row--incoming .ticket-message-bubble::before { + content: "< "; +} + +.theme-key-ascii .ticket-composer:focus-within, +.theme-key-ascii .support-select-trigger:focus-visible, +.theme-key-ascii .ticket-card:focus-visible, +.theme-key-ascii .support-status-tabs-trigger:focus-visible { + border-color: #ffffff; + box-shadow: inset 0 0 0 1px #ffffff; +} + +.theme-key-ascii .support-message-scroll, +.theme-key-ascii .scroll-area--mono::-webkit-scrollbar-thumb { + border-radius: 0; +} + +.theme-key-ascii .auth-card { + transition: none; +} + +body:has(.theme-key-ascii) .support-select-content, +body:has(.theme-key-ascii) .field-error-tooltip { + border: 1px solid #ffffff; + border-radius: 0; + background: #000000; + color: #ffffff; + box-shadow: 0 0 0 1px #ffffff; +} + +body:has(.theme-key-ascii) .support-select-item { + border-radius: 0; + color: #ffffff; +} + +body:has(.theme-key-ascii) .support-select-item[data-highlighted], +body:has(.theme-key-ascii) .support-select-item[data-selected] { + background: #ffffff; + color: #000000 !important; +} + +body:has(.theme-key-ascii) .support-select-item[data-highlighted] svg, +body:has(.theme-key-ascii) .support-select-item[data-selected] svg { + color: #000000 !important; + stroke: #000000 !important; +} + /* ---------- Bottom nav (desktop rail) ---------- */ @media (min-width: 1024px) { @@ -867,8 +1046,17 @@ .btn, .input, .period-card, .method-card, .settings-row, .option-row, .tariff-selected-card, .tariff-action-card, .tariff-warning-card, - .topup-carryover-note, .language-select-content, .language-select-item, + .topup-carryover-note, .subscription-purchase-description, + .language-select-content, .language-select-item, .language-select-trigger, .bottom-nav, .bottom-nav button, + .link-button, + .support-overview-card, .support-list-card, .support-ticket-card, + .support-conversation-card, .support-new-ticket-button, + .support-create-panel, .support-select-trigger, .support-select-content, + .support-select-item, .support-status-tabs-list, .support-status-tabs-trigger, + .support-user-ticket-skeleton, .ticket-card, .support-empty-state, + .support-message-scroll, .ticket-message-avatar, .ticket-message-bubble, + .ticket-composer, .textarea, .field-error-tooltip, .admin-card, .admin-card-head, .admin-card-body, .admin-stat-card, .admin-stat-skeleton-card, .admin-stat-skeleton-wide, diff --git a/backend/bot/app/web/themes/ascii/theme.json b/backend/bot/app/web/themes/ascii/theme.json index cd89c99..268715e 100644 --- a/backend/bot/app/web/themes/ascii/theme.json +++ b/backend/bot/app/web/themes/ascii/theme.json @@ -9,7 +9,7 @@ "use_primary_accent": false, "use_in_admin": true, "css_file": "style.css", - "assets_version": 1, + "assets_version": 3, "tokens": { "color_scheme": "dark", "style_preset": "ascii" diff --git a/backend/bot/app/web/themes/windows95/style.css b/backend/bot/app/web/themes/windows95/style.css index d5aaede..26e0d10 100644 --- a/backend/bot/app/web/themes/windows95/style.css +++ b/backend/bot/app/web/themes/windows95/style.css @@ -14,6 +14,21 @@ --muted: #202020; --dim: #404040; --danger: #800000; + --danger-text: #800000; + --danger-soft: #f7d6d6; + --danger-border: #800000; + --success: #008000; + --success-text: #006000; + --success-soft: #d9f0d9; + --success-border: #008000; + --warning: #808000; + --warning-text: #606000; + --warning-soft: #ffffcc; + --warning-border: #808000; + --info: #000080; + --info-text: #000080; + --info-soft: #d8e6ff; + --info-border: #000080; --blue: #000080; --radius: 0px; --font-sans: "MS Sans Serif", Tahoma, "Segoe UI", sans-serif; @@ -41,45 +56,45 @@ --admin-text: #000000; --admin-muted: #202020; --admin-dim: #404040; - --win95-icon-arrow-left: url("/webapp-theme-assets/windows95/icons/arrow-left.png?v=6"); - --win95-icon-arrow-right: url("/webapp-theme-assets/windows95/icons/arrow-right.png?v=6"); - --win95-icon-bitcoin: url("/webapp-theme-assets/windows95/icons/bitcoin.png?v=6"); - --win95-icon-check: url("/webapp-theme-assets/windows95/icons/check.png?v=6"); - --win95-icon-chevrons: url("/webapp-theme-assets/windows95/icons/chevrons.png?v=6"); - --win95-icon-coins: url("/webapp-theme-assets/windows95/icons/coins.png?v=6"); - --win95-icon-dashboard: url("/webapp-theme-assets/windows95/icons/dashboard.png?v=6"); - --win95-icon-database: url("/webapp-theme-assets/windows95/icons/database.png?v=6"); - --win95-icon-download: url("/webapp-theme-assets/windows95/icons/download.png?v=6"); - --win95-icon-error: url("/webapp-theme-assets/windows95/icons/error.png?v=6"); - --win95-icon-file-text: url("/webapp-theme-assets/windows95/icons/file-text.png?v=6"); - --win95-icon-folder: url("/webapp-theme-assets/windows95/icons/folder.png?v=6"); - --win95-icon-gift: url("/webapp-theme-assets/windows95/icons/gift.png?v=6"); - --win95-icon-globe: url("/webapp-theme-assets/windows95/icons/globe.png?v=6"); - --win95-icon-help: url("/webapp-theme-assets/windows95/icons/help.png?v=6"); - --win95-icon-home: url("/webapp-theme-assets/windows95/icons/home.png?v=6"); - --win95-icon-info: url("/webapp-theme-assets/windows95/icons/info.png?v=6"); - --win95-icon-key: url("/webapp-theme-assets/windows95/icons/key.png?v=6"); - --win95-icon-lock: url("/webapp-theme-assets/windows95/icons/lock.png?v=6"); - --win95-icon-megaphone: url("/webapp-theme-assets/windows95/icons/megaphone.png?v=6"); - --win95-icon-paintbrush: url("/webapp-theme-assets/windows95/icons/paintbrush.png?v=6"); - --win95-icon-payment-card: url("/webapp-theme-assets/windows95/icons/payment-card.png?v=6"); - --win95-icon-print: url("/webapp-theme-assets/windows95/icons/print.png?v=6"); - --win95-icon-refresh: url("/webapp-theme-assets/windows95/icons/refresh.png?v=6"); - --win95-icon-save: url("/webapp-theme-assets/windows95/icons/save.png?v=6"); - --win95-icon-search: url("/webapp-theme-assets/windows95/icons/search.png?v=6"); - --win95-icon-send: url("/webapp-theme-assets/windows95/icons/send.png?v=6"); - --win95-icon-settings: url("/webapp-theme-assets/windows95/icons/settings.png?v=6"); - --win95-icon-shield: url("/webapp-theme-assets/windows95/icons/shield.png?v=6"); - --win95-icon-smartphone: url("/webapp-theme-assets/windows95/icons/smartphone.png?v=6"); - --win95-icon-sliders: url("/webapp-theme-assets/windows95/icons/sliders.png?v=6"); - --win95-icon-sparkles: url("/webapp-theme-assets/windows95/icons/sparkles.png?v=6"); - --win95-icon-tag: url("/webapp-theme-assets/windows95/icons/tag.png?v=6"); - --win95-icon-ticket: url("/webapp-theme-assets/windows95/icons/ticket.png?v=6"); - --win95-icon-trash: url("/webapp-theme-assets/windows95/icons/trash.png?v=6"); - --win95-icon-user: url("/webapp-theme-assets/windows95/icons/user.png?v=6"); - --win95-icon-users: url("/webapp-theme-assets/windows95/icons/users.png?v=6"); - --win95-icon-warning: url("/webapp-theme-assets/windows95/icons/warning.png?v=6"); - --win95-icon-x: url("/webapp-theme-assets/windows95/icons/x.png?v=6"); + --win95-icon-arrow-left: url("/webapp-theme-assets/windows95/icons/arrow-left.png?v=8"); + --win95-icon-arrow-right: url("/webapp-theme-assets/windows95/icons/arrow-right.png?v=8"); + --win95-icon-bitcoin: url("/webapp-theme-assets/windows95/icons/bitcoin.png?v=8"); + --win95-icon-check: url("/webapp-theme-assets/windows95/icons/check.png?v=8"); + --win95-icon-chevrons: url("/webapp-theme-assets/windows95/icons/chevrons.png?v=8"); + --win95-icon-coins: url("/webapp-theme-assets/windows95/icons/coins.png?v=8"); + --win95-icon-dashboard: url("/webapp-theme-assets/windows95/icons/dashboard.png?v=8"); + --win95-icon-database: url("/webapp-theme-assets/windows95/icons/database.png?v=8"); + --win95-icon-download: url("/webapp-theme-assets/windows95/icons/download.png?v=8"); + --win95-icon-error: url("/webapp-theme-assets/windows95/icons/error.png?v=8"); + --win95-icon-file-text: url("/webapp-theme-assets/windows95/icons/file-text.png?v=8"); + --win95-icon-folder: url("/webapp-theme-assets/windows95/icons/folder.png?v=8"); + --win95-icon-gift: url("/webapp-theme-assets/windows95/icons/gift.png?v=8"); + --win95-icon-globe: url("/webapp-theme-assets/windows95/icons/globe.png?v=8"); + --win95-icon-help: url("/webapp-theme-assets/windows95/icons/help.png?v=8"); + --win95-icon-home: url("/webapp-theme-assets/windows95/icons/home.png?v=8"); + --win95-icon-info: url("/webapp-theme-assets/windows95/icons/info.png?v=8"); + --win95-icon-key: url("/webapp-theme-assets/windows95/icons/key.png?v=8"); + --win95-icon-lock: url("/webapp-theme-assets/windows95/icons/lock.png?v=8"); + --win95-icon-megaphone: url("/webapp-theme-assets/windows95/icons/megaphone.png?v=8"); + --win95-icon-paintbrush: url("/webapp-theme-assets/windows95/icons/paintbrush.png?v=8"); + --win95-icon-payment-card: url("/webapp-theme-assets/windows95/icons/payment-card.png?v=8"); + --win95-icon-print: url("/webapp-theme-assets/windows95/icons/print.png?v=8"); + --win95-icon-refresh: url("/webapp-theme-assets/windows95/icons/refresh.png?v=8"); + --win95-icon-save: url("/webapp-theme-assets/windows95/icons/save.png?v=8"); + --win95-icon-search: url("/webapp-theme-assets/windows95/icons/search.png?v=8"); + --win95-icon-send: url("/webapp-theme-assets/windows95/icons/send.png?v=8"); + --win95-icon-settings: url("/webapp-theme-assets/windows95/icons/settings.png?v=8"); + --win95-icon-shield: url("/webapp-theme-assets/windows95/icons/shield.png?v=8"); + --win95-icon-smartphone: url("/webapp-theme-assets/windows95/icons/smartphone.png?v=8"); + --win95-icon-sliders: url("/webapp-theme-assets/windows95/icons/sliders.png?v=8"); + --win95-icon-sparkles: url("/webapp-theme-assets/windows95/icons/sparkles.png?v=8"); + --win95-icon-tag: url("/webapp-theme-assets/windows95/icons/tag.png?v=8"); + --win95-icon-ticket: url("/webapp-theme-assets/windows95/icons/ticket.png?v=8"); + --win95-icon-trash: url("/webapp-theme-assets/windows95/icons/trash.png?v=8"); + --win95-icon-user: url("/webapp-theme-assets/windows95/icons/user.png?v=8"); + --win95-icon-users: url("/webapp-theme-assets/windows95/icons/users.png?v=8"); + --win95-icon-warning: url("/webapp-theme-assets/windows95/icons/warning.png?v=8"); + --win95-icon-x: url("/webapp-theme-assets/windows95/icons/x.png?v=8"); } .theme-key-windows95.app-shell { @@ -115,11 +130,14 @@ .theme-key-windows95 svg.lucide-house, .theme-key-windows95 svg.lucide-info, .theme-key-windows95 svg.lucide-key, +.theme-key-windows95 svg.lucide-life-buoy, .theme-key-windows95 svg.lucide-layout-dashboard, +.theme-key-windows95 svg.lucide-lock, .theme-key-windows95 svg.lucide-lock-keyhole, .theme-key-windows95 svg.lucide-mail, .theme-key-windows95 svg.lucide-megaphone, .theme-key-windows95 svg.lucide-message-square, +.theme-key-windows95 svg.lucide-message-square-plus, .theme-key-windows95 svg.lucide-paintbrush, .theme-key-windows95 svg.lucide-plus, .theme-key-windows95 svg.lucide-refresh-cw, @@ -231,10 +249,15 @@ --win95-button-icon: var(--win95-icon-key); } +.theme-key-windows95 svg.lucide-life-buoy { + --win95-button-icon: var(--win95-icon-help); +} + .theme-key-windows95 svg.lucide-layout-dashboard { --win95-button-icon: var(--win95-icon-dashboard); } +.theme-key-windows95 svg.lucide-lock, .theme-key-windows95 svg.lucide-lock-keyhole { --win95-button-icon: var(--win95-icon-lock); } @@ -245,6 +268,7 @@ .theme-key-windows95 svg.lucide-mail, .theme-key-windows95 svg.lucide-message-square, +.theme-key-windows95 svg.lucide-message-square-plus, .theme-key-windows95 svg.lucide-send { --win95-button-icon: var(--win95-icon-send); } @@ -339,11 +363,14 @@ svg.lucide-house, svg.lucide-info, svg.lucide-key, + svg.lucide-life-buoy, svg.lucide-layout-dashboard, + svg.lucide-lock, svg.lucide-lock-keyhole, svg.lucide-mail, svg.lucide-megaphone, svg.lucide-message-square, + svg.lucide-message-square-plus, svg.lucide-paintbrush, svg.lucide-plus, svg.lucide-refresh-cw, @@ -390,11 +417,14 @@ svg.lucide-house, svg.lucide-info, svg.lucide-key, + svg.lucide-life-buoy, svg.lucide-layout-dashboard, + svg.lucide-lock, svg.lucide-lock-keyhole, svg.lucide-mail, svg.lucide-megaphone, svg.lucide-message-square, + svg.lucide-message-square-plus, svg.lucide-paintbrush, svg.lucide-plus, svg.lucide-refresh-cw, @@ -438,11 +468,27 @@ .theme-key-windows95 .tariff-action-card, .theme-key-windows95 .tariff-warning-card, .theme-key-windows95 .topup-carryover-note, -.theme-key-windows95 .input, +.theme-key-windows95 .subscription-purchase-description, .theme-key-windows95 .dialog-card, .theme-key-windows95 .language-select-content, .theme-key-windows95 .bottom-nav, -.theme-key-windows95 .toast { +.theme-key-windows95 .toast, +.theme-key-windows95 .support-overview-card, +.theme-key-windows95 .support-list-card, +.theme-key-windows95 .support-ticket-card, +.theme-key-windows95 .support-conversation-card, +.theme-key-windows95 .support-new-ticket-button, +.theme-key-windows95 .support-create-panel, +.theme-key-windows95 .support-select-trigger, +.theme-key-windows95 .support-select-content, +.theme-key-windows95 .support-status-tabs-list, +.theme-key-windows95 .support-user-ticket-skeleton, +.theme-key-windows95 .ticket-card, +.theme-key-windows95 .support-empty-state, +.theme-key-windows95 .support-message-scroll, +.theme-key-windows95 .ticket-message-avatar, +.theme-key-windows95 .ticket-message-bubble, +.theme-key-windows95 .ticket-composer { border-width: 2px; border-style: solid; border-color: #ffffff #404040 #404040 #ffffff; @@ -463,6 +509,8 @@ } body:has(.theme-key-windows95) .language-select-content, +body:has(.theme-key-windows95) .support-select-content, +body:has(.theme-key-windows95) .field-error-tooltip, body:has(.theme-key-windows95) .admin-select-content { border-width: 2px; border-style: solid; @@ -476,10 +524,22 @@ body:has(.theme-key-windows95) .admin-select-content { } body:has(.theme-key-windows95) .language-select-item, +body:has(.theme-key-windows95) .support-select-item, body:has(.theme-key-windows95) .admin-select-item { border-radius: 0 !important; } +body:has(.theme-key-windows95) .support-select-item[data-highlighted], +body:has(.theme-key-windows95) .support-select-item[data-selected] { + background: #000080; + color: #ffffff !important; +} + +body:has(.theme-key-windows95) .support-select-item[data-highlighted] svg, +body:has(.theme-key-windows95) .support-select-item[data-selected] svg { + filter: brightness(0) invert(1); +} + .theme-key-windows95 .card::before, .theme-key-windows95 .dialog-card::before { content: ""; @@ -496,7 +556,11 @@ body:has(.theme-key-windows95) .admin-select-item { .theme-key-windows95 .btn, .theme-key-windows95 .language-select-trigger, -.theme-key-windows95 .bottom-nav button { +.theme-key-windows95 .bottom-nav button, +.theme-key-windows95 .link-button, +.theme-key-windows95 .support-new-ticket-button, +.theme-key-windows95 .support-select-trigger, +.theme-key-windows95 .support-status-tabs-trigger { min-height: 34px; border: 2px solid; border-color: #ffffff #404040 #404040 #ffffff; @@ -557,11 +621,102 @@ body:has(.theme-key-windows95) .admin-select-item { .theme-key-windows95 .bottom-nav button.active, .theme-key-windows95 .period-card.active, .theme-key-windows95 .method-card.active, -.theme-key-windows95 .option-row.active { +.theme-key-windows95 .option-row.active, +.theme-key-windows95 .support-new-ticket-button.active, +.theme-key-windows95 .support-status-tabs-trigger[data-state="active"], +.theme-key-windows95 .support-select-item[data-highlighted], +.theme-key-windows95 .support-select-item[data-selected] { background: var(--accent); color: #ffffff; } +/* ---------- New webapp surfaces: support, purchase info, password login ---------- */ + +.theme-key-windows95 .subscription-purchase-description, +.theme-key-windows95 .support-create-panel, +.theme-key-windows95 .ticket-composer, +.theme-key-windows95 .support-message-scroll { + background: #c0c0c0; +} + +.theme-key-windows95 .support-heading-icon, +.theme-key-windows95 .support-new-ticket-icon, +.theme-key-windows95 .support-empty-state svg, +.theme-key-windows95 .ticket-card-title svg { + color: var(--accent); +} + +.theme-key-windows95 .password-switch-divider, +.theme-key-windows95 .or-line span { + height: 2px; + background: #808080; + border-bottom: 1px solid #ffffff; +} + +.theme-key-windows95 .link-button { + min-height: 28px; + padding: 2px 8px; + color: var(--text); + cursor: pointer; +} + +.theme-key-windows95 .link-button:hover:not(:disabled), +.theme-key-windows95 .support-status-tabs-trigger:hover { + background: color-mix(in srgb, var(--accent) 16%, #c0c0c0); +} + +.theme-key-windows95 .support-status-tabs-trigger b, +.theme-key-windows95 .ticket-status-badge, +.theme-key-windows95 .ticket-priority-badge, +.theme-key-windows95 .ticket-message-role-badge { + border: 1px solid #000000; + background: #c0c0c0; + color: #000000; + box-shadow: none; +} + +.theme-key-windows95 .ticket-card::before { + inset: 0 auto 0 0; + width: 4px; + border-radius: 0; + background: var(--ticket-accent, var(--accent)); +} + +.theme-key-windows95 .ticket-message-row, +.theme-key-windows95 .ticket-message-row--admin, +.theme-key-windows95 .ticket-message-row--user, +.theme-key-windows95 .ticket-message-row--system, +.theme-key-windows95 .ticket-message-row--internal { + --ticket-bubble-bg: #ffffff; + --ticket-bubble-border: #808080; + --ticket-bubble-text: #000000; +} + +.theme-key-windows95 .ticket-message-row--outgoing { + --ticket-bubble-bg: #ffffe1; +} + +.theme-key-windows95 .ticket-message-bubble, +.theme-key-windows95 .ticket-message-row--outgoing .ticket-message-bubble { + border-radius: 0; + color: #000000; +} + +.theme-key-windows95 .ticket-composer:focus-within, +.theme-key-windows95 .support-select-trigger:focus-visible, +.theme-key-windows95 .ticket-card:focus-visible, +.theme-key-windows95 .support-status-tabs-trigger:focus-visible { + outline: 1px dotted #000000; + outline-offset: -4px; + box-shadow: + inset 1px 1px 0 #dfdfdf, + inset -1px -1px 0 #808080; +} + +.theme-key-windows95 .auth-card { + transition: none; +} + .theme-key-windows95 .card-heading-accent, .theme-key-windows95 .brand-row strong, .theme-key-windows95 .login-brand h1, @@ -746,6 +901,7 @@ body:has(.theme-key-windows95) .admin-select-item { .theme-key-windows95 .admin-screen-wrap textarea, .theme-key-windows95 .admin-dialog textarea, .theme-key-windows95 .input, +.theme-key-windows95 .textarea, .theme-key-windows95 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), .theme-key-windows95 textarea, .theme-key-windows95 select { @@ -867,7 +1023,8 @@ body:has(.theme-key-windows95) .admin-select-item { .theme-key-windows95 input::placeholder, .theme-key-windows95 textarea::placeholder, -.theme-key-windows95 .input::placeholder { +.theme-key-windows95 .input::placeholder, +.theme-key-windows95 .textarea::placeholder { color: #808080; } @@ -898,6 +1055,7 @@ body:has(.theme-key-windows95) .admin-select-item { .theme-key-windows95 .admin-screen-wrap textarea:focus, .theme-key-windows95 .admin-dialog textarea:focus, .theme-key-windows95 .input:focus, +.theme-key-windows95 .textarea:focus, .theme-key-windows95 input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):focus, .theme-key-windows95 textarea:focus, .theme-key-windows95 select:focus { diff --git a/backend/bot/app/web/themes/windows95/theme.json b/backend/bot/app/web/themes/windows95/theme.json index 73583f0..ebbaf3c 100644 --- a/backend/bot/app/web/themes/windows95/theme.json +++ b/backend/bot/app/web/themes/windows95/theme.json @@ -9,7 +9,7 @@ "use_primary_accent": false, "use_in_admin": true, "css_file": "style.css", - "assets_version": 6, + "assets_version": 8, "tokens": { "color_scheme": "light", "style_preset": "win95" diff --git a/backend/bot/app/web/webapp/assets.py b/backend/bot/app/web/webapp/assets.py index 8cd84f0..db47a3d 100644 --- a/backend/bot/app/web/webapp/assets.py +++ b/backend/bot/app/web/webapp/assets.py @@ -1132,6 +1132,21 @@ _INITIAL_THEME_TOKEN_CSS_MAP = { "muted": "--muted", "dim": "--dim", "danger": "--danger", + "danger_text": "--danger-text", + "danger_soft": "--danger-soft", + "danger_border": "--danger-border", + "success": "--success", + "success_text": "--success-text", + "success_soft": "--success-soft", + "success_border": "--success-border", + "warning": "--warning", + "warning_text": "--warning-text", + "warning_soft": "--warning-soft", + "warning_border": "--warning-border", + "info": "--info", + "info_text": "--info-text", + "info_soft": "--info-soft", + "info_border": "--info-border", "blue": "--blue", "radius": "--radius", "font_sans": "--font-sans", diff --git a/backend/config/webapp_themes_config.py b/backend/config/webapp_themes_config.py index e6cc7f7..4f1c5ec 100644 --- a/backend/config/webapp_themes_config.py +++ b/backend/config/webapp_themes_config.py @@ -373,6 +373,7 @@ def _builtin_theme_assets_need_refresh(key: str, target_dir: Path) -> bool: or "ascii-skeleton-scan" not in style or "ascii-boot-type" not in style or "Console-style tables" not in style + or "New webapp surfaces: support, purchase info, password login" not in style ) if key != "windows95": return False @@ -391,7 +392,9 @@ def _builtin_theme_assets_need_refresh(key: str, target_dir: Path) -> bool: or "lucide-circle-check" not in style or "border-radius: 0 !important" not in style or "::-webkit-slider-thumb" not in style - or "?v=6" not in style + or "?v=8" not in style + or "lucide-life-buoy" not in style + or "New webapp surfaces: support, purchase info, password login" not in style or any(not (target_dir / "icons" / icon).exists() for icon in required_icons) ) diff --git a/frontend/src/styles/admin.css b/frontend/src/styles/admin.css index d5e2952..4ba895e 100644 --- a/frontend/src/styles/admin.css +++ b/frontend/src/styles/admin.css @@ -1594,6 +1594,7 @@ } .admin-textarea:focus, +.admin-screen-wrap textarea:focus, .admin-dialog textarea:focus { border-color: var(--admin-ring); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent); diff --git a/frontend/src/styles/components.css b/frontend/src/styles/components.css index 12f8345..3e2ccc0 100644 --- a/frontend/src/styles/components.css +++ b/frontend/src/styles/components.css @@ -297,12 +297,32 @@ width: 100%; min-height: 92px; resize: vertical; - border: 1px solid var(--border, rgba(255, 255, 255, 0.12)); - border-radius: 8px; - background: var(--input-bg, rgba(255, 255, 255, 0.06)); - color: inherit; + border: 1px solid var(--border); + border-radius: var(--radius); + background: var(--panel-2); + color: var(--text); padding: 10px 12px; font: inherit; + font-size: 14px; + line-height: 1.5; + transition: + border-color 0.16s ease, + box-shadow 0.16s ease; +} + +.textarea:focus { + outline: none; + border-color: var(--accent); + box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 38%, transparent); +} + +.textarea::placeholder { + color: var(--dim); +} + +.textarea:disabled { + opacity: 0.52; + cursor: not-allowed; } .scroll-area { diff --git a/tests/test_webapp_themes_config.py b/tests/test_webapp_themes_config.py index 9e430c7..a686a56 100644 --- a/tests/test_webapp_themes_config.py +++ b/tests/test_webapp_themes_config.py @@ -33,13 +33,13 @@ class WebappThemesConfigTests(unittest.TestCase): self.assertEqual(win95.tokens.style_preset, "win95") self.assertFalse(win95.use_primary_accent) self.assertTrue(win95.use_in_admin) - self.assertEqual(win95.assets_version, 6) + self.assertEqual(win95.assets_version, 8) ascii_theme = cfg.theme_by_key("ascii") self.assertIsNotNone(ascii_theme) self.assertEqual(ascii_theme.css_file, "style.css") self.assertFalse(ascii_theme.use_primary_accent) self.assertTrue(ascii_theme.use_in_admin) - self.assertEqual(ascii_theme.assets_version, 1) + self.assertEqual(ascii_theme.assets_version, 3) def test_env_override_default_theme(self): cfg = builtin_webapp_themes_config("#00fe7a") @@ -380,7 +380,7 @@ class WebappThemesConfigTests(unittest.TestCase): descriptor["assets_version"], cfg.theme_by_key("windows95").assets_version, ) - self.assertEqual(descriptor["assets_version"], 6) + self.assertEqual(descriptor["assets_version"], 8) self.assertIn("lucide-house", css) self.assertIn("lucide-earth", css) self.assertIn("lucide-circle-check", css) @@ -388,7 +388,9 @@ class WebappThemesConfigTests(unittest.TestCase): self.assertIn("filter: none !important", css) self.assertIn("Press Start 2P", css) self.assertIn("::-webkit-slider-thumb", css) - self.assertIn("?v=6", css) + self.assertIn("?v=8", css) + self.assertIn("lucide-life-buoy", css) + self.assertIn("New webapp surfaces: support, purchase info, password login", css) self.assertIn(".theme-key-windows95 .traffic-top strong", css) self.assertTrue((stale_theme_dir / "icons" / "dashboard.png").exists())