/** * BrighterTrading design system -- preset themes * * Each preset is activated by setting ``data-theme=""`` on * . Composes with ``data-density`` and ``data-radius`` so a * user can pick "Brighter Classic" + "compact" + custom accent * color and get all three layered. * * Why a separate file from components.css: the base components are * strictly token-only (no raw colors, no hard-coded radii). Preset * themes legitimately need raw values to capture a specific aesthetic * (e.g. the legacy translucent yellow + neumorphic shadow look). * Separating concerns keeps each file's rule clear. * * Loaded AFTER tokens.css and components.css so theme presets win * over base styling when active. * * Currently shipped: * - "classic" -- BrighterTrading's original dialog look * (translucent yellow surface + blur, neumorphic green-pill * buttons, big rounded corners, blue gradient header). * * Phase 4 (future) will add: * - "modern" (token defaults; what ships in tokens.css today) * - "high-contrast" * - "color-blind-safe" * - "midnight" (dark theme variant with neumorphic dark shadows) * - "exchange-X" stylistic presets * - User-saved themes via the theme editor */ /* ============================================================ */ /* Brighter Classic */ /* ============================================================ */ /* Recreates the legacy ``.form-popup`` aesthetic from * brighterStyles.css. Translucent yellow-grey surface with a * 6px backdrop blur, 3px black border, 30px border-radius. * Buttons are sage-green pills with neumorphic 3D shadows. * Cancel buttons are rusty red. Header keeps the indigo gradient. * * Inputs override to solid white so form data is readable against * the translucent panel. */ [data-theme="classic"] { /* Token overrides: applied wherever components reference these. */ --bt-radius-lg: 30px; --bt-radius-md: 12px; --bt-radius-sm: 8px; --bt-radius-pill: 40px; /* Sage-green primary accent for buttons (matches legacy .btn). */ --bt-accent: #8dad76; --bt-accent-hover: #9fbf86; --bt-accent-fg: #ffffff; /* Rusty red for cancel buttons (matches legacy .form-container .cancel). */ --bt-danger: #d56868; --bt-danger-fg: #ffffff; /* Strong shadows for the modal/popup chrome. */ --bt-shadow-modal: 8px 7px 15px rgba(32, 32, 32, 0.5), -3px -2px 15px rgba(44, 44, 44, 0.53); } /* Panel surface: translucent yellow + blur + lightgrey gradient, 3px solid black border (matches the legacy .form-popup). */ [data-theme="classic"] .bt-panel, [data-theme="classic"] .bt-dialog { background-color: rgba(245, 245, 167, 0.27); background-image: linear-gradient(45deg, lightgrey, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 3px solid #000; } /* Header: indigo gradient (matches legacy .dialog-header). */ [data-theme="classic"] .bt-dialog-header { background: linear-gradient(135deg, #3E3AF2 0%, #6366f1 100%); color: #fff; } /* Inputs over the translucent panel: solid white so form values are clearly readable. Per Rob's feedback after seeing the migrated withdraw_modal: "solid white background for the inputs so they can be viewed clearly." */ [data-theme="classic"] .bt-input, [data-theme="classic"] .bt-select, [data-theme="classic"] .bt-textarea { background-color: #ffffff; border: 1px solid #ccc; } [data-theme="classic"] .bt-input:focus, [data-theme="classic"] .bt-select:focus, [data-theme="classic"] .bt-textarea:focus { background-color: #ddd; border-color: #3E3AF2; } /* Buttons: sage-green pill with neumorphic 3D shadow (matches legacy .btn). 18px font, bold, no border. */ [data-theme="classic"] .bt-btn { background-color: var(--bt-accent); color: var(--bt-accent-fg); border: none; border-radius: var(--bt-radius-pill); font-size: 18px; font-weight: bold; box-shadow: 8px 7px 15px rgba(32, 32, 32, 0.5), -3px -2px 15px rgba(44, 44, 44, 0.53), inset -1px -3px 6px 1px rgba(0, 0, 0, 0.48); opacity: 0.8; transition: box-shadow 0.35s ease, opacity 0.2s ease; /* Slightly larger min-width so the pill shape reads as deliberate. */ min-width: 110px; } [data-theme="classic"] .bt-btn:hover { opacity: 1; box-shadow: 8px 7px 15px #5d7f8b, -3px -2px 15px #5d7f8b, inset -1px -3px 6px 1px rgba(10, 10, 10, 0.65); } [data-theme="classic"] .bt-btn-primary { /* In classic, default + primary share the green-pill look. */ background-color: var(--bt-accent); } /* Legacy ``.btn`` selector (auth / marketplace / admin / creator pages still ship Bootstrap-style ``class="btn"`` markup): mirror the neumorphic green-pill aesthetic so picking "classic" theme keeps the legacy feel on those pages too. */ [data-theme="classic"] .btn { background-color: var(--bt-accent); color: var(--bt-accent-fg); border: none; border-radius: var(--bt-radius-pill); box-shadow: 8px 7px 15px rgba(32, 32, 32, 0.5), -3px -2px 15px rgba(44, 44, 44, 0.53), inset -1px -3px 6px 1px rgba(0, 0, 0, 0.48); opacity: 0.85; transition: box-shadow 0.35s ease, opacity 0.2s ease; } [data-theme="classic"] .btn:hover { opacity: 1; box-shadow: 8px 7px 15px #5d7f8b, -3px -2px 15px #5d7f8b, inset -1px -3px 6px 1px rgba(10, 10, 10, 0.65); } /* Cancel-style buttons: scope the rusty-red override to dialog/panel action buttons whose ``action`` config is "close" (i.e., the semantic Cancel button). A bare .bt-btn-ghost outside a dialog footer (e.g., a "Reset all" button) stays neutral. Per Codex review of round-trip #6 [FIX]. */ [data-theme="classic"] .bt-btn[data-bt-dialog-action="close"].bt-btn-ghost { background-color: var(--bt-danger); color: var(--bt-danger-fg); } [data-theme="classic"] .bt-btn-danger { /* Already red; just match the pill aesthetic. */ background-color: #c62828; } /* Footer area: matches the panel's translucent surface so the button row floats over the same backdrop. */ [data-theme="classic"] .bt-dialog-footer { background: transparent; border-top: 1px solid rgba(0, 0, 0, 0.12); } /* Body text colour readable on the yellow-translucent surface. */ [data-theme="classic"] .bt-dialog-body { color: #1a1a2e; } /* Close button in header: white-on-blue (legacy .dialog-close-btn). */ [data-theme="classic"] .bt-dialog-close { color: #fff; background: rgba(255, 255, 255, 0.20); } [data-theme="classic"] .bt-dialog-close:hover { background: rgba(255, 255, 255, 0.30); } /* App-shell header in classic theme: keep the indigo blue background (it doesn't follow --bt-accent because the legacy header was always indigo regardless of accent) and the buttery-yellow title for the distinctive original look. */ [data-theme="classic"] #app_header { background-color: #3E3AF2; } [data-theme="classic"] #app_title, [data-theme="classic"] #app_title:hover { color: #F5F3AD; } /* Body background in classic: legacy teal-to-deep-blue gradient. */ [data-theme="classic"] body { background: linear-gradient(#64D2F7, #195172); } /* Resize grip: dark dots over the translucent panel. */ [data-theme="classic"] .bt-panel-resize { background: linear-gradient( 135deg, transparent 0, transparent 50%, rgba(0, 0, 0, 0.45) 50%, rgba(0, 0, 0, 0.45) 60%, transparent 60%, transparent 70%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0.45) 80%, transparent 80% ); }