/* ========================================================================== Light theme. Default is unchanged (dark, exactly as before). These rules only apply once is set by theme.js, so nothing changes until the user actively switches — safe on both mobile and desktop. ========================================================================== */ :root[data-theme="light"] { --bg: #dbe0ea; --card: #f1f4f9; --text: #20263a; --muted: #565f74; } [data-theme="light"] body { background: radial-gradient(1200px 800px at 20% -10%, #ccd9f2 0%, var(--bg) 55%); color: var(--text); } /* ===== Surfaces ===== Cards are an explicit off-white, lighter than the page background, so they read as "raised" instead of the flatter/glarier all-near-white look the first pass had. */ [data-theme="light"] .card-soft, [data-theme="light"] .character-meta-pill, [data-theme="light"] .main-identity-card, [data-theme="light"] .xp-grid > div, [data-theme="light"] .wallet-card, [data-theme="light"] .combat-chip:not(.hp):not(.mana):not(.energy), [data-theme="light"] .combat-mode-body.is-compact .combat-chip:not(.hp):not(.mana):not(.energy) { background: var(--card); border-color: rgba(15, 23, 42, .10); } [data-theme="light"] .wallet-head, [data-theme="light"] .wallet-num { color: rgba(15, 23, 42, .78); } [data-theme="light"] #tab-main .card.card-soft:not(.combat-mode-card):not(.character-hero-card) { background: #eaeef5; } [data-theme="light"] .character-hero-card { background: radial-gradient(120% 140% at 0% 0%, rgba(90, 140, 255, .16), rgba(90, 140, 255, 0) 42%), linear-gradient(180deg, #f4f7fc, #e9edf6); border-color: rgba(15, 23, 42, .10); } /* ===== Text ===== */ [data-theme="light"] .character-hero-name, [data-theme="light"] .character-hero-badge-value, [data-theme="light"] .modal-title, [data-theme="light"] .combat-log-summary, [data-theme="light"] .combat-log-summary * { color: #12172a !important; } [data-theme="light"] .character-hero-kicker, [data-theme="light"] .character-hero-badge-label, [data-theme="light"] .character-meta-label, [data-theme="light"] .main-identity-card .form-label, [data-theme="light"] .main-edit-kicker, [data-theme="light"] .main-subsection-title, [data-theme="light"] .xp-grid .form-label, [data-theme="light"] #tab-main .hint, [data-theme="light"] #tab-main .card.card-soft:not(.combat-mode-card):not(.character-hero-card) .section-title { color: rgba(15, 23, 42, .58); } [data-theme="light"] .character-meta-value, [data-theme="light"] .money-preview, [data-theme="light"] .combat-quick-btn, [data-theme="light"] #hud_attack, [data-theme="light"] #hud_armor, [data-theme="light"] .combat-chip:not(.hp):not(.mana):not(.energy) .combat-chip-val { color: rgba(15, 23, 42, .88) !important; } /* ===== Forms ===== */ [data-theme="light"] .form-control, [data-theme="light"] .form-select, [data-theme="light"] .input-group-text, [data-theme="light"] textarea.form-control, [data-theme="light"] input.form-control { background-color: rgba(15, 23, 42, .04) !important; border-color: rgba(15, 23, 42, .14) !important; color: var(--text) !important; } [data-theme="light"] .form-control:focus, [data-theme="light"] .form-select:focus { background-color: rgba(15, 23, 42, .05) !important; border-color: rgba(90, 140, 255, .55) !important; color: var(--text) !important; box-shadow: 0 0 0 0.2rem rgba(90, 140, 255, .14) !important; } [data-theme="light"] .form-control::placeholder { color: rgba(15, 23, 42, .40) !important; } [data-theme="light"] .mini { background: rgba(15, 23, 42, .04); border-color: rgba(15, 23, 42, .14); color: var(--text); } [data-theme="light"] .main-identity-card .form-control, [data-theme="light"] .main-identity-card .form-select { background: rgba(15, 23, 42, .035) !important; } [data-theme="light"] .coin-input { color: rgba(15, 23, 42, .88) !important; border-bottom-color: rgba(15, 23, 42, .25) !important; } [data-theme="light"] .coin-input:focus { border-bottom-color: rgba(15, 23, 42, .55) !important; } /* ===== Buttons ===== */ [data-theme="light"] .btn-outline-light { border-color: rgba(15, 23, 42, .22); color: #1b2233; } [data-theme="light"] .btn-outline-primary { border-color: rgba(74, 122, 230, .55); color: #2f5fd6; } /* ===== Header / tabs ===== */ [data-theme="light"] .topbar { background: rgba(241, 244, 249, .92); border-bottom-color: rgba(15, 23, 42, .08); } [data-theme="light"] .topbar-menu { background: rgba(241, 244, 249, .98); border-color: rgba(15, 23, 42, .10); } [data-theme="light"] .topbar-menu-item { background: rgba(15, 23, 42, .03); border-color: rgba(15, 23, 42, .10); color: rgba(15, 23, 42, .88); } [data-theme="light"] #tabs .nav-link { color: #3f5fb0; background: rgba(15, 23, 42, .03); border-color: rgba(15, 23, 42, .08); } [data-theme="light"] #tabs .nav-link.active { background: #3f6dff; color: #ffffff; } /* ===== Lists / items ===== */ [data-theme="light"] .item { background: rgba(15, 23, 42, .03); border-color: rgba(15, 23, 42, .10); } [data-theme="light"] .item-title { color: rgba(15, 23, 42, .92); } [data-theme="light"] .item-sub, [data-theme="light"] .item-details, [data-theme="light"] #spellsList .item-sub, [data-theme="light"] #abilitiesList .item-sub, [data-theme="light"] #passiveAbilitiesList .item-sub { color: rgba(15, 23, 42, .66); } [data-theme="light"] #spellsList .item-sub .spell-meta, [data-theme="light"] #abilitiesList .item-sub .spell-meta, [data-theme="light"] #passiveAbilitiesList .item-sub .spell-meta { background: rgba(15, 23, 42, .04); border-color: rgba(15, 23, 42, .10); } /* ===== Equipment ===== */ [data-theme="light"] .equip-card { background: linear-gradient(180deg, #f4f7fc, #e9edf5); border-color: rgba(15, 23, 42, .12); color: #1b2233; } [data-theme="light"] .equip-slot, [data-theme="light"] .equip-slot span, [data-theme="light"] .equip-ac-badge { color: rgba(15, 23, 42, .88); text-shadow: none; } [data-theme="light"] .equip-slot span.equip-empty { color: rgba(15, 23, 42, .48); } [data-theme="light"] .equip-sub, [data-theme="light"] .equip-info { color: rgba(15, 23, 42, .62); } /* ===== Modals ===== */ [data-theme="light"] .modal-content { background: #f1f4f9 !important; color: rgba(15, 23, 42, .92) !important; border-color: rgba(15, 23, 42, .10); } [data-theme="light"] .modal-header, [data-theme="light"] .modal-footer { border-color: rgba(15, 23, 42, .10); } [data-theme="light"] .modal .form-label { color: rgba(15, 23, 42, .72) !important; } [data-theme="light"] .modal .form-control, [data-theme="light"] .modal textarea, [data-theme="light"] .modal select { background: rgba(15, 23, 42, .04) !important; color: #1b2233 !important; border: 1px solid rgba(15, 23, 42, .16) !important; } [data-theme="light"] .modal .form-control::placeholder, [data-theme="light"] .modal textarea::placeholder { color: rgba(15, 23, 42, .40) !important; } [data-theme="light"] .modal .hint, [data-theme="light"] .modal .form-text { color: rgba(15, 23, 42, .55) !important; } [data-theme="light"] .modal-header .btn-close { filter: none; } [data-theme="light"] .modalx-card { background: #f1f4f9; border-color: rgba(15, 23, 42, .10); } [data-theme="light"] .modalx-head, [data-theme="light"] .modalx-foot { border-color: rgba(15, 23, 42, .08); } [data-theme="light"] .builder-list { border-color: rgba(15, 23, 42, .12); } [data-theme="light"] .builder-item:hover { background: rgba(15, 23, 42, .04); } [data-theme="light"] .builder-item.active { border-color: rgba(74, 122, 230, .55); background: rgba(74, 122, 230, .08); } [data-theme="light"] .codebox { background: rgba(15, 23, 42, .04); border-color: rgba(15, 23, 42, .10); color: #1b2233; } /* ===== Combat panel ===== */ [data-theme="light"] .combat-inner-tab { border-color: rgba(15, 23, 42, .14); background: rgba(15, 23, 42, .03); color: rgba(15, 23, 42, .70); } [data-theme="light"] .combat-inner-tab.active { background: rgba(74, 122, 230, .16); border-color: rgba(74, 122, 230, .40); color: #1b2233; } [data-theme="light"] .combat-round-badge, [data-theme="light"] .combat-state-chip, [data-theme="light"] .combat-state-btn, [data-theme="light"] .combat-action-btn, [data-theme="light"] .combat-mini-btn:not(.combat-mini-btn--hit), [data-theme="light"] .combat-panel-actions .combat-mini-btn:not(.combat-mini-btn--hit) { background: rgba(15, 23, 42, .04); border-color: rgba(15, 23, 42, .14); color: #1b2233; } [data-theme="light"] .combat-chip-title { color: rgba(15, 23, 42, .60); } [data-theme="light"] .combat-chip-toggle { background: rgba(15, 23, 42, .05); border-color: rgba(15, 23, 42, .14); color: rgba(15, 23, 42, .68); } [data-theme="light"] .combat-mode-card.is-compact .combat-compact-toggle { color: #1b2233; } [data-theme="light"] .combat-log-item { background: rgba(15, 23, 42, .03); border-color: rgba(15, 23, 42, .10); color: rgba(15, 23, 42, .80); } [data-theme="light"] .combat-log-empty, [data-theme="light"] .combat-state-empty, [data-theme="light"] .combat-state-meta { color: rgba(15, 23, 42, .50); } [data-theme="light"] .combat-hit-menu { background: #f1f4f9; border-color: rgba(15, 23, 42, .12); box-shadow: 0 18px 40px rgba(15, 23, 42, .16); } [data-theme="light"] .combat-panel-log .combat-meta-block, [data-theme="light"] .combat-panel-magic, [data-theme="light"] .combat-panel-states { border-top-color: rgba(15, 23, 42, .08); } [data-theme="light"] .hr-soft { border-color: rgba(15, 23, 42, .12); } /* ===== Donate button ===== */ [data-theme="light"] .donate-btn { color: #21407a; } /* ===== Login page ===== */ [data-theme="light"] .login-hero-title { background: linear-gradient(135deg, #12172a 20%, #3f6dff 100%); -webkit-background-clip: text; background-clip: text; } [data-theme="light"] .login-hero-tag { color: rgba(15, 23, 42, .62); } [data-theme="light"] .login-hero-features li { background: rgba(15, 23, 42, .03); border-color: rgba(15, 23, 42, .10); color: rgba(15, 23, 42, .82); } [data-theme="light"] .login-card::before { background: linear-gradient(135deg, rgba(74, 122, 230, .45), rgba(74, 122, 230, 0) 40%, rgba(74, 122, 230, .18)); } [data-theme="light"] .login-divider { color: rgba(15, 23, 42, .40); } [data-theme="light"] .login-divider::before, [data-theme="light"] .login-divider::after { background: rgba(15, 23, 42, .14); }