/* ============================================================ WorkoutBox — Design Tokens & Theme Defines CSS custom properties for light (default) and dark modes. Loaded BEFORE main.css so variables are always in scope. Dark mode is activated by setting data-theme="dark" (and data-bs-theme="dark") on the element. ============================================================ */ /* ────────────────────────────────────────────────────────── LIGHT MODE (default / :root) ────────────────────────────────────────────────────────── */ :root, [data-theme="light"] { /* Page backgrounds */ --wb-bg: #ffffff; --wb-bg-subtle: #f8f7f7; /* body::before/after, iOS overscroll */ /* Surface levels (cards, inputs, panels) */ --wb-surface: #ffffff; --wb-surface-2: #f8f9fa; /* secondary surfaces, inputs */ --wb-surface-3: #fafafa; /* out-of-month calendar cells */ /* Text */ --wb-text: #212529; --wb-text-2: #495057; --wb-text-3: #6c757d; /* secondary / muted */ --wb-text-4: #adb5bd; /* very muted / placeholders */ /* Borders */ --wb-border: #dee2e6; --wb-border-2: #e9ecef; --wb-border-3: #e0e0e0; /* tables, calendar cells */ /* Brand red */ --wb-red: #b60606; --wb-red-muted: rgba(182, 6, 6, 0.10); --wb-red-ripple: rgba(182, 6, 6, 0.30); /* Dark headers used inside cards */ --wb-dark-header: #333333; --wb-dark-header-2: #2c2c2c; /* State */ --wb-hover: #f7f7f7; /* Calendar */ --wb-cal-header: #dcdcdc; --wb-cal-text: #ffffff; --wb-table-header: #d8d8d8; /* Shadows */ --wb-shadow: rgba(0, 0, 0, 0.08); --wb-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08); --wb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.15); /* Navigation */ --wb-navbar-bg: #ffffff; --wb-bottom-nav-bg: #ffffff; /* Legacy aliases (used by some templates directly) */ --light-grey: #f8f9fa; --primary-red: #b60606; } /* ────────────────────────────────────────────────────────── DARK MODE ────────────────────────────────────────────────────────── */ [data-theme="dark"] { /* Page backgrounds */ --wb-bg: #111112; --wb-bg-subtle: #0c0c0d; /* Surface levels */ --wb-surface: #1c1c1e; --wb-surface-2: #242426; --wb-surface-3: #2c2c2e; /* Text */ --wb-text: #f2f2f7; --wb-text-2: #c7c7cc; --wb-text-3: #aeaeb2; --wb-text-4: #636366; /* Borders */ --wb-border: #2c2c2e; --wb-border-2: #38383a; --wb-border-3: #3a3a3c; /* Brand red — same as light mode for consistent identity */ --wb-red: #b60606; --wb-red-muted: rgba(182, 6, 6, 0.15); --wb-red-ripple: rgba(182, 6, 6, 0.30); /* Dark headers */ --wb-dark-header: #242426; --wb-dark-header-2: #2c2c2e; /* State */ --wb-hover: #2c2c2e; /* Calendar */ --wb-cal-header: #2c2c2e; --wb-cal-text: #f2f2f7; --wb-table-header: #2c2c2e; /* Shadows */ --wb-shadow: rgba(0, 0, 0, 0.40); --wb-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.45); --wb-shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.60); /* Navigation */ --wb-navbar-bg: #1c1c1e; --wb-bottom-nav-bg: #1c1c1e; /* Legacy aliases */ --light-grey: #242426; --primary-red: #b60606; } /* ────────────────────────────────────────────────────────── SMOOTH TRANSITION Only transition colours, not layout, to avoid janky reflows ────────────────────────────────────────────────────────── */ body, .navbar, .mobile-topbar, .mobile-bottom-nav, .card-design-1, .card-design-1-border, .card-design-1-borderless, .white-card, .white-card-small, .white-card-workout, .login-card, .calendar-table, .calendar-day, .table, .form-control, .form-select, .modal-content, .dropdown-menu { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } /* ────────────────────────────────────────────────────────── DARK MODE — Bootstrap component overrides Bootstrap 5.3 applies data-bs-theme="dark" automatically, but we add belt-and-suspenders overrides for any gaps. ────────────────────────────────────────────────────────── */ /* Text utilities */ [data-theme="dark"] .text-muted { color: var(--wb-text-3) !important; } [data-theme="dark"] .text-dark { color: var(--wb-text) !important; } [data-theme="dark"] .text-secondary { color: var(--wb-text-3) !important; } /* Backgrounds */ [data-theme="dark"] .bg-light { background-color: var(--wb-surface-2) !important; } [data-theme="dark"] .bg-white { background-color: var(--wb-surface) !important; } [data-theme="dark"] .bg-light-grey { background-color: var(--wb-surface-2) !important; border-bottom-color: var(--wb-border) !important; } /* Bootstrap card */ [data-theme="dark"] .card { background-color: var(--wb-surface); border-color: var(--wb-border); color: var(--wb-text); } [data-theme="dark"] .card-title { color: var(--wb-text-2); } /* Forms */ [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--wb-surface-2); border-color: var(--wb-border-2); color: var(--wb-text); } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: var(--wb-surface-2); color: var(--wb-text); border-color: var(--wb-red); box-shadow: 0 0 0 0.2rem var(--wb-red-muted); } [data-theme="dark"] .form-control[readonly] { background-color: var(--wb-surface-3); color: var(--wb-text-3); } [data-theme="dark"] .form-control.bg-light { background-color: var(--wb-surface-2) !important; color: var(--wb-text-3); } [data-theme="dark"] .input-group-text { background-color: var(--wb-surface-2); border-color: var(--wb-border-2); color: var(--wb-text-3); } /* Buttons */ [data-theme="dark"] .btn-outline-secondary { color: var(--wb-text-3); border-color: var(--wb-border-2); } [data-theme="dark"] .btn-outline-secondary:hover { background-color: var(--wb-hover); color: var(--wb-text); border-color: var(--wb-border-2); } [data-theme="dark"] .btn-secondary { background-color: #4a4a4e; border-color: #4a4a4e; color: var(--wb-text); } [data-theme="dark"] .btn-outline-primary { color: var(--wb-red) !important; border-color: var(--wb-red) !important; } [data-theme="dark"] .btn-outline-primary:hover { background-color: var(--wb-red-muted) !important; color: var(--wb-red) !important; } [data-theme="dark"] .btn-check:checked + .btn-outline-primary { background-color: var(--wb-red) !important; border-color: var(--wb-red) !important; color: #fff !important; } [data-theme="dark"] .btn-outline-danger { color: var(--wb-red) !important; border-color: var(--wb-red) !important; } [data-theme="dark"] .btn-outline-danger:hover, [data-theme="dark"] .btn-outline-danger:focus { background-color: var(--wb-red) !important; color: #fff !important; } /* Modal */ [data-theme="dark"] .modal-content { background-color: var(--wb-surface); color: var(--wb-text); border: none; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: var(--wb-border) !important; } [data-theme="dark"] .btn-close { filter: invert(1); } /* Dropdown */ [data-theme="dark"] .dropdown-menu { background-color: var(--wb-surface-2); border-color: var(--wb-border); } [data-theme="dark"] .dropdown-item { color: var(--wb-text); } [data-theme="dark"] .dropdown-item:hover, [data-theme="dark"] .dropdown-item:focus { background-color: var(--wb-hover) !important; color: var(--wb-text) !important; } [data-theme="dark"] .dropdown-item:active { background-color: var(--wb-hover) !important; color: var(--wb-text) !important; } /* Tables — base colors handled in main.css via --bs-table-bg overrides. Dark mode only needs border colours and text. */ [data-theme="dark"] .table { color: var(--wb-text); } [data-theme="dark"] .table th, [data-theme="dark"] .table td { border-color: var(--wb-border-3); } [data-theme="dark"] .table-responsive { background: var(--wb-surface); border-color: var(--wb-border-3); } /* Alerts */ [data-theme="dark"] .alert-warning { background-color: #2a1f00; border-color: #5a4200; color: #ffd60a; } [data-theme="dark"] .alert-info { background-color: #002233; border-color: #004a6e; color: #62d4f5; } [data-theme="dark"] .alert-success { background-color: #002611; border-color: #004d22; color: #34d399; } [data-theme="dark"] .alert-danger { background-color: #2a0000; border-color: #5a0000; color: #f87171; } /* Nav tabs */ [data-theme="dark"] .nav-tabs .nav-link { background-color: var(--wb-surface-2); color: var(--wb-text-3); } [data-theme="dark"] .nav-tabs .nav-link.active { background-color: var(--wb-red); color: #ffffff; } [data-theme="dark"] .nav-tabs .nav-link:hover { background-color: var(--wb-hover); color: var(--wb-text); } /* Badges */ [data-theme="dark"] .badge-outline { border-color: var(--wb-red); color: var(--wb-red); } [data-theme="dark"] .badge-outline-grey { border-color: var(--wb-text-4); color: var(--wb-text-4); } /* Pricing card */ [data-theme="dark"] .pricing-card { background: var(--wb-surface); border-color: var(--wb-border-2); } /* ────────────────────────────────────────────────────────── DARK MODE TOGGLE BUTTON ────────────────────────────────────────────────────────── */ .btn-dark-mode-toggle { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--wb-border-2); background: var(--wb-surface-2); color: var(--wb-text-2); font-size: 0.82rem; font-weight: 500; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; white-space: nowrap; min-width: 130px; } .btn-dark-mode-toggle:hover { background: var(--wb-hover); border-color: var(--wb-border); color: var(--wb-text); } .btn-dark-mode-toggle .dark-mode-icon { width: 16px; height: 16px; flex-shrink: 0; } .btn-dark-mode-toggle .dark-mode-track { width: 34px; height: 19px; border-radius: 10px; background: var(--wb-border-2); position: relative; transition: background 0.2s; flex-shrink: 0; } .btn-dark-mode-toggle .dark-mode-thumb { position: absolute; top: 3px; left: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--wb-text-4); transition: transform 0.2s, background 0.2s; } [data-theme="dark"] .btn-dark-mode-toggle .dark-mode-track { background: var(--wb-red); } [data-theme="dark"] .btn-dark-mode-toggle .dark-mode-thumb { transform: translateX(15px); background: #ffffff; } /* ────────────────────────────────────────────────────────── COMPACT STAT CARD (.stat-mini) Matches the compact "Total hours / Streak" tile design: muted label on top, bold value below, no border/header. ────────────────────────────────────────────────────────── */ .stat-mini { background: var(--wb-surface-2); border-radius: 10px; padding: 12px 16px 14px; } .stat-mini-label { font-size: 0.72rem; color: var(--wb-text-3); font-weight: 400; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat-mini-label i { margin-right: 4px; font-size: 0.68rem; } .stat-mini-value { font-size: 1.55rem; font-weight: 700; color: var(--wb-text); line-height: 1.1; } .stat-mini-sub { font-size: 0.68rem; color: var(--wb-text-4); margin-top: 3px; } /* ────────────────────────────────────────────────────────── SEGMENTED CONTROL (gender, weight unit, etc.) ────────────────────────────────────────────────────────── */ .wb-seg { display: inline-flex; border: 1px solid var(--wb-border-2); border-radius: 8px; overflow: hidden; background: var(--wb-surface-2); flex-shrink: 0; } .wb-seg input[type="radio"] { display: none; } .wb-seg-label { padding: 6px 14px; font-size: 0.82rem; font-weight: 500; color: var(--wb-text-3); cursor: pointer; text-align: center; border-right: 1px solid var(--wb-border-2); transition: background 0.15s, color 0.15s; white-space: nowrap; user-select: none; line-height: 1.4; } .wb-seg-label:last-of-type { border-right: none; } .wb-seg input:checked + .wb-seg-label { background: var(--wb-red); color: #ffffff; font-weight: 600; } .wb-seg-label:hover { background: var(--wb-hover); color: var(--wb-text); } .wb-seg input:checked + .wb-seg-label:hover { background: var(--wb-red); color: #ffffff; } /* ────────────────────────────────────────────────────────── ACCOUNT PAGE LAYOUT ────────────────────────────────────────────────────────── */ .acct-card { border-radius: 14px; border: 1px solid var(--wb-border); background: var(--wb-surface); overflow: hidden; } /* Card header: avatar + name/role */ .acct-header { padding: 18px 20px 16px; border-bottom: 1px solid var(--wb-border); display: flex; align-items: center; gap: 14px; } .acct-avatar { width: 42px; height: 42px; border-radius: 50%; background: var(--wb-red); display: flex; align-items: center; justify-content: center; color: #ffffff; font-size: 1rem; flex-shrink: 0; } .acct-header-name { font-size: 0.95rem; font-weight: 600; color: var(--wb-text); } .acct-header-role { font-size: 0.72rem; color: var(--wb-text-4); margin-top: 2px; } /* Section label (PROFILE, PERSONAL, …) */ .acct-section-label { padding: 12px 20px 4px; font-size: 0.68rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--wb-text-4); } /* Section wrapper */ .acct-section { padding: 0 20px; } /* Individual setting row */ .acct-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--wb-border); min-height: 46px; } .acct-row:last-child { border-bottom: none; } /* Left-side label */ .acct-label { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .acct-label-main { display: flex; align-items: center; gap: 9px; font-size: 0.85rem; color: var(--wb-text); white-space: nowrap; } .acct-label-main i { color: var(--wb-text-4); width: 13px; text-align: center; font-size: 0.8rem; } .acct-label-sub { font-size: 0.7rem; color: var(--wb-text-4); padding-left: 22px; } /* Right-side controls */ .acct-input { max-width: 200px; font-size: 0.82rem !important; text-align: right; background: var(--wb-surface-2) !important; border-color: var(--wb-border-2) !important; color: var(--wb-text) !important; } .acct-input[readonly] { color: var(--wb-text-3) !important; } .acct-password-dots { font-size: 0.9rem; color: var(--wb-text-3); letter-spacing: 0.1em; padding: 4px 0; } .acct-icon-btn { width: 30px; height: 30px; border-radius: 7px; border: 1px solid var(--wb-border-2); background: var(--wb-surface-2); color: var(--wb-text-3); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.15s, color 0.15s, border-color 0.15s; font-size: 0.75rem; flex-shrink: 0; } .acct-icon-btn:hover { background: var(--wb-red); border-color: var(--wb-red); color: #ffffff; } /* Actions bar */ .acct-actions { padding: 14px 20px; border-top: 1px solid var(--wb-border); display: flex; gap: 10px; align-items: center; background: var(--wb-surface-2); } /* Responsive: on small screens stack controls */ @media (max-width: 400px) { .acct-input { max-width: 150px; } .wb-seg-label { padding: 6px 10px; } .btn-dark-mode-toggle { min-width: 110px; font-size: 0.78rem; } }