/*-------------------------------------------------------------- # BetTrackr web app theme (brandNavy dark) # # Source: bettrackr-chrome-extension src/static/css/bettrackr.css. # Popup-shell rules were removed for the web app: the fixed 400px popup # body width + overflow lock, the popup header/nav sizing (header height, # #header-logo-img, #header-nav .nav-item .btn / header .btn), the popup # main scroll container, and the popup footer color. Everything else is # kept verbatim: the Bootstrap --bs-* variable remap block, buttons, # tone washes, cards, accordion, list groups, forms, dropdowns, toasts, # Select2, scrollbars, and the shared .bt-* component classes. # # Requires tokens_v1.css to be loaded first and data-bs-theme="dark" on # . --------------------------------------------------------------*/ /* ------------- BOOTSTRAP VARIABLE MAPPING ----------------- */ /* Everything maps through tokens, so the same block serves dark and light; theme.js keeps data-bs-theme in sync with data-bettrackr-theme. */ [data-bs-theme="dark"], [data-bs-theme="light"] { --bs-body-bg: var(--bettrackr-bg); --bs-body-color: var(--bettrackr-text); --bs-body-font-family: var(--bettrackr-font-sans); --bs-emphasis-color: var(--bettrackr-text); --bs-secondary-color: var(--bettrackr-text-muted); --bs-secondary-bg: var(--bettrackr-surface-alt); --bs-tertiary-color: var(--bettrackr-text-muted); --bs-tertiary-bg: var(--bettrackr-surface-alt); --bs-border-color: var(--bettrackr-border); --bs-border-color-translucent: var(--bettrackr-border); --bs-link-color: var(--bettrackr-primary); --bs-link-hover-color: var(--bettrackr-primary-hover); --bs-link-color-rgb: var(--bettrackr-primary-rgb); --bs-link-hover-color-rgb: var(--bettrackr-primary-rgb); --bs-heading-color: var(--bettrackr-text); --bs-success: var(--bettrackr-positive); --bs-danger: var(--bettrackr-negative); --bs-warning: var(--bettrackr-secondary); --bs-success-rgb: var(--bettrackr-positive-rgb); --bs-danger-rgb: var(--bettrackr-negative-rgb); --bs-warning-rgb: var(--bettrackr-warning-rgb); } /* ------------- GLOBAL ----------------- */ :root { scroll-behavior: smooth; } a { text-decoration: none; } a:hover { text-decoration: underline; } /* Thin dark scrollbars */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bettrackr-surface-alt); border-radius: var(--bettrackr-r-pill); } ::-webkit-scrollbar-thumb:hover { background: var(--bettrackr-surface-hover); } /* ------------- LIST GROUP / UTILITY COLORS ----------------- */ a.list-group-item-action { --bs-list-group-action-color: var(--bettrackr-text); } a.list-group-item { --bs-list-group-color: var(--bettrackr-text); } .bg-bettrackr-blue { background-color: var(--bettrackr-surface) !important; } .text-bettrackr-green { color: var(--bettrackr-primary) !important; } /* ------------- BUTTONS ----------------- */ .btn { font-weight: 700; border-radius: var(--bettrackr-r-button); } /* Green CTA (mobile Button variant "primary") */ .btn-primary, .btn-success { --bs-btn-color: var(--bettrackr-on-primary); --bs-btn-bg: var(--bettrackr-primary); --bs-btn-border-color: var(--bettrackr-primary); --bs-btn-hover-color: var(--bettrackr-on-primary); --bs-btn-hover-bg: var(--bettrackr-primary-hover); --bs-btn-hover-border-color: var(--bettrackr-primary-hover); --bs-btn-focus-shadow-rgb: 74, 222, 71; --bs-btn-active-color: var(--bettrackr-on-primary); --bs-btn-active-bg: var(--bettrackr-primary-hover); --bs-btn-active-border-color: var(--bettrackr-primary-hover); --bs-btn-disabled-color: var(--bettrackr-on-primary); --bs-btn-disabled-bg: var(--bettrackr-primary); --bs-btn-disabled-border-color: var(--bettrackr-primary); --bs-btn-disabled-opacity: 0.5; } /* Ghost buttons (mobile Button variant "ghost") */ .btn-secondary, .btn-outline-primary, .btn-outline-secondary { --bs-btn-color: var(--bettrackr-text); --bs-btn-bg: transparent; --bs-btn-border-color: var(--bettrackr-border); --bs-btn-hover-color: var(--bettrackr-text); --bs-btn-hover-bg: var(--bettrackr-surface-alt); --bs-btn-hover-border-color: var(--bettrackr-border); --bs-btn-focus-shadow-rgb: 74, 222, 71; --bs-btn-active-color: var(--bettrackr-text); --bs-btn-active-bg: var(--bettrackr-surface-alt); --bs-btn-active-border-color: var(--bettrackr-border); --bs-btn-disabled-color: var(--bettrackr-text-muted); --bs-btn-disabled-bg: transparent; --bs-btn-disabled-border-color: var(--bettrackr-border); --bs-gradient: none; } /* Ghost with green label, for lighter-weight positive actions */ .btn-outline-secondary { --bs-btn-color: var(--bettrackr-primary); --bs-btn-hover-color: var(--bettrackr-primary); --bs-btn-active-color: var(--bettrackr-primary); } .btn-danger { --bs-btn-color: #ffffff; --bs-btn-bg: var(--bettrackr-negative); --bs-btn-border-color: var(--bettrackr-negative); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: var(--bettrackr-negative-hover); --bs-btn-hover-border-color: var(--bettrackr-negative-hover); --bs-btn-active-color: #ffffff; --bs-btn-active-bg: var(--bettrackr-negative-hover); --bs-btn-active-border-color: var(--bettrackr-negative-hover); --bs-btn-disabled-color: #ffffff; --bs-btn-disabled-bg: var(--bettrackr-negative); --bs-btn-disabled-border-color: var(--bettrackr-negative); --bs-btn-disabled-opacity: 0.5; } /* Close Button */ .btn-close { background-size: 25%; } .btn-close:focus { outline: 0; box-shadow: none; } /* ------------- TONE WASH UTILITIES ----------------- */ /* Legacy .bg-*-light names, remapped to translucent dark washes */ .bg-primary-light { background-color: var(--bettrackr-surface-alt); border-color: var(--bettrackr-border); } .bg-secondary-light { background-color: var(--bettrackr-surface-alt); border-color: var(--bettrackr-border); } .bg-success-light { background-color: var(--bettrackr-positive-wash); border-color: var(--bettrackr-positive-wash); } .bg-danger-light { background-color: var(--bettrackr-negative-wash); border-color: var(--bettrackr-negative-wash); } .bg-warning-light { background-color: var(--bettrackr-warning-wash); border-color: var(--bettrackr-warning-wash); } .bg-info-light { background-color: rgba(59, 130, 246, 0.12); border-color: rgba(59, 130, 246, 0.12); } .bg-dark-light { background-color: var(--bettrackr-surface-alt); border-color: var(--bettrackr-border); } /* ------------- CARDS ----------------- */ .card { background-color: var(--bettrackr-surface); border: none; border-radius: var(--bettrackr-r-card); color: var(--bettrackr-text); } .card-header { background-color: transparent; border-bottom: 1px solid var(--bettrackr-border); color: var(--bettrackr-text-muted); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } /* ------------- ACCORDION ----------------- */ .accordion-item { background-color: var(--bettrackr-surface); border: 1px solid var(--bettrackr-border) !important; border-radius: var(--bettrackr-r-input); } .accordion-button { background-color: var(--bettrackr-surface) !important; color: var(--bettrackr-text) !important; font-weight: bold; padding: 0.5rem 0.75rem; box-shadow: none !important; border: none !important; } .accordion-button:not(.collapsed) { background-color: var(--bettrackr-surface-alt) !important; color: var(--bettrackr-primary) !important; box-shadow: none !important; } .accordion-button:focus { box-shadow: none !important; border-color: transparent !important; } /* Accordion inner list group */ .accordion-body { padding: 0 !important; /* Matches list-group flush */ } .accordion .list-group-item { background-color: transparent; color: var(--bettrackr-text); border: none; border-top: 1px solid var(--bettrackr-border); font-size: 0.875rem; } .accordion .list-group-item:hover { background-color: var(--bettrackr-surface-alt); } /* ------------- LIST GROUPS ----------------- */ .list-group-item { background-color: transparent; color: var(--bettrackr-text); border-color: var(--bettrackr-border); } .list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--bettrackr-surface-alt); color: var(--bettrackr-text); } /* ------------- FORMS ----------------- */ .form-control, .form-select { background-color: var(--bettrackr-input-bg); border: 1px solid transparent; border-radius: var(--bettrackr-r-input); color: var(--bettrackr-text); } .form-control:focus, .form-select:focus { background-color: var(--bettrackr-input-bg); border-color: var(--bettrackr-primary); box-shadow: 0 0 0 0.25rem var(--bettrackr-focus-ring); color: var(--bettrackr-text); } .form-control::placeholder { color: var(--bettrackr-text-muted); } .form-label { color: var(--bettrackr-text-muted); font-size: 0.8125rem; font-weight: 600; } .input-group-text { color: var(--bettrackr-text-muted); background-color: var(--bettrackr-input-bg); border: 1px solid transparent; border-radius: var(--bettrackr-r-input); } .form-check-input { background-color: var(--bettrackr-surface-alt); border-color: var(--bettrackr-border); } .form-check-input:checked { background-color: var(--bettrackr-primary); border-color: var(--bettrackr-primary); } .form-check-input:focus { border-color: var(--bettrackr-primary); box-shadow: 0 0 0 0.25rem var(--bettrackr-focus-ring); } /* ------------- DROPDOWN MENUS ----------------- */ .dropdown-menu { background-color: var(--bettrackr-surface); border: 1px solid var(--bettrackr-border); border-radius: var(--bettrackr-r-input); box-shadow: var(--bettrackr-shadow); color: var(--bettrackr-text); } .dropdown-item { color: var(--bettrackr-text); } .dropdown-item:hover, .dropdown-item:focus { background-color: var(--bettrackr-surface-alt); color: var(--bettrackr-text); } .dropdown-divider { border-color: var(--bettrackr-border); } /* ------------- TOASTS ----------------- */ .toast { background-color: var(--bettrackr-surface-alt); border: 1px solid var(--bettrackr-border); border-left: 3px solid var(--bettrackr-primary); border-radius: var(--bettrackr-r-button); box-shadow: var(--bettrackr-shadow); color: var(--bettrackr-text); font-weight: 600; } .toast.text-bg-success, .toast.bg-success { background-color: var(--bettrackr-surface-alt) !important; color: var(--bettrackr-text) !important; border-left-color: var(--bettrackr-primary); } .toast.text-bg-danger, .toast.bg-danger { background-color: var(--bettrackr-surface-alt) !important; color: var(--bettrackr-text) !important; border-left-color: var(--bettrackr-danger); } .toast.text-bg-warning, .toast.bg-warning { background-color: var(--bettrackr-surface-alt) !important; color: var(--bettrackr-text) !important; border-left-color: var(--bettrackr-secondary); } /* ------------- SELECT2 (bootstrap-5 theme) ----------------- */ .select2-container--bootstrap-5 .select2-selection { background-color: var(--bettrackr-input-bg); border: 1px solid transparent; border-radius: var(--bettrackr-r-input); color: var(--bettrackr-text); } .select2-container--bootstrap-5.select2-container--focus .select2-selection, .select2-container--bootstrap-5.select2-container--open .select2-selection { border-color: var(--bettrackr-primary); box-shadow: 0 0 0 0.25rem var(--bettrackr-focus-ring); } .select2-container--bootstrap-5 .select2-selection--single .select2-selection__rendered { padding: 1px; font-size: 0.875rem !important; color: var(--bettrackr-text); } .select2-container--bootstrap-5 .select2-dropdown { background-color: var(--bettrackr-surface); border: 1px solid var(--bettrackr-border); border-radius: var(--bettrackr-r-input); color: var(--bettrackr-text); } .select2-container--bootstrap-5 .select2-dropdown .select2-results__option { color: var(--bettrackr-text); } .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--highlighted { background-color: var(--bettrackr-surface-alt); color: var(--bettrackr-text); } .select2-container--bootstrap-5 .select2-dropdown .select2-results__option--selected, .select2-container--bootstrap-5 .select2-dropdown .select2-results__option[aria-selected="true"] { background-color: var(--bettrackr-surface-alt); color: var(--bettrackr-primary); font-weight: 700; } .select2-search__field { font-size: 0.875rem !important; background-color: var(--bettrackr-input-bg) !important; border: 1px solid var(--bettrackr-border) !important; border-radius: 8px !important; color: var(--bettrackr-text) !important; } .select2-results__option { font-size: 0.875rem !important; } .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__choice { background-color: var(--bettrackr-surface-alt); border: 1px solid var(--bettrackr-border); border-radius: var(--bettrackr-r-pill); color: var(--bettrackr-text); } /* ------------- SHARED COMPONENTS (.bt-*) ----------------- */ /* Uppercase section label (mobile SectionTitle) */ .bt-section-title { color: var(--bettrackr-text-muted); font-size: 0.8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; } /* Money / numeric display */ .bt-money { font-weight: 700; font-variant-numeric: tabular-nums; } .bt-money--lg { font-size: 1.75rem; font-weight: 700; letter-spacing: -0.5px; font-variant-numeric: tabular-nums; } /* Tone text helpers (profit/loss/pending) */ .profit-text, .bt-tone-positive { color: var(--bettrackr-positive); font-weight: 700; font-variant-numeric: tabular-nums; } .loss-text, .bt-tone-negative { color: var(--bettrackr-negative); font-weight: 700; font-variant-numeric: tabular-nums; } .bt-tone-warning { color: var(--bettrackr-secondary); font-weight: 600; } .bt-tone-neutral { color: var(--bettrackr-text-muted); } /* Status chips (mobile StatusChip: outline pill in tone color) */ .bt-chip { display: inline-block; border-radius: var(--bettrackr-r-pill); font-size: 0.75rem; font-weight: 700; line-height: 1.4; padding: 2px 8px; background-color: transparent; border: 1px solid var(--bettrackr-text-muted); color: var(--bettrackr-text-muted); } .bt-chip--positive { border-color: var(--bettrackr-positive); color: var(--bettrackr-positive); } .bt-chip--negative { border-color: var(--bettrackr-negative); color: var(--bettrackr-negative); } .bt-chip--warning { border-color: var(--bettrackr-secondary); color: var(--bettrackr-secondary); } .bt-chip--neutral { border-color: var(--bettrackr-text-muted); color: var(--bettrackr-text-muted); } /* Filled meta chip (mobile MetaChip) */ .bt-chip--filled { background-color: var(--bettrackr-surface-alt); border-color: transparent; color: var(--bettrackr-text); font-weight: 600; } /* Status aliases used by existing bet-row markup */ .bet-won { border-radius: var(--bettrackr-r-pill); font-size: 0.7rem; font-weight: 700; padding: 2px 8px; background-color: transparent; border: 1px solid var(--bettrackr-positive); color: var(--bettrackr-positive); } .bet-lost { border-radius: var(--bettrackr-r-pill); font-size: 0.7rem; font-weight: 700; padding: 2px 8px; background-color: transparent; border: 1px solid var(--bettrackr-negative); color: var(--bettrackr-negative); } .bet-pending { border-radius: var(--bettrackr-r-pill); font-size: 0.7rem; font-weight: 700; padding: 2px 8px; background-color: transparent; border: 1px solid var(--bettrackr-secondary); color: var(--bettrackr-secondary); } .bet-neutral { border-radius: var(--bettrackr-r-pill); font-size: 0.7rem; font-weight: 700; padding: 2px 8px; background-color: transparent; border: 1px solid var(--bettrackr-text-muted); color: var(--bettrackr-text-muted); } /* Stat tile (mobile StatTile) */ .bt-stat-value { font-size: 1.375rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--bettrackr-text); } .bt-stat-label { font-size: 0.6875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--bettrackr-text-muted); } /* List rows (mobile BetListRow) */ .bt-row { display: flex; align-items: center; gap: var(--bettrackr-sp-sm); padding: var(--bettrackr-sp-md); border-bottom: 1px solid var(--bettrackr-border); } .bt-row:last-child { border-bottom: none; } .bt-row:hover { background-color: var(--bettrackr-surface-alt); } .bt-row-primary { font-size: 0.9375rem; font-weight: 600; color: var(--bettrackr-text); } .bt-row-meta { font-size: 0.75rem; color: var(--bettrackr-text-muted); } /* Skeleton loading block */ .bt-skeleton { background-color: var(--bettrackr-surface-alt); border-radius: var(--bettrackr-r-input); opacity: 0.6; animation: bt-skeleton-pulse 1.4s ease-in-out infinite; } @keyframes bt-skeleton-pulse { 0%, 100% { opacity: 0.6; } 50% { opacity: 0.35; } } /* Empty state copy */ .bt-empty { color: var(--bettrackr-text-muted); font-size: 0.9375rem; padding: var(--bettrackr-sp-md) 0; text-align: center; } /* ------------------------------------------------------------------ */ /* Server-rendered HTMLComponent support classes (HTMLComponent.java */ /* family in app/SHARED_CODE). Not part of the extension bettrackr.css */ /* ------------------------------------------------------------------ */ .bt-chip-dot { display: inline-block; width: 8px; height: 8px; border-radius: var(--bettrackr-r-pill); margin-right: 4px; vertical-align: middle; } .bt-stat-tile { padding: var(--bettrackr-sp-md); } .bt-stat-sub { font-size: 12px; color: var(--bettrackr-text-muted); margin-top: 2px; } .bt-card-actions { margin-left: auto; display: flex; gap: var(--bettrackr-sp-sm); align-items: center; } .bt-row-body { flex: 1 1 auto; min-width: 0; } .bt-row-right { flex: 0 0 auto; margin-left: var(--bettrackr-sp-md); text-align: right; } .bt-alert { display: block; background: var(--bettrackr-surface-alt); border: 1px solid var(--bettrackr-border); border-left: 3px solid var(--bettrackr-primary); border-radius: var(--bettrackr-r-button); color: var(--bettrackr-text); padding: var(--bettrackr-sp-sm) var(--bettrackr-sp-md); margin: var(--bettrackr-sp-sm) 0; } .bt-alert--success { border-left-color: var(--bettrackr-primary); } .bt-alert--error { border-left-color: var(--bettrackr-danger); } .bt-alert--warning { border-left-color: var(--bettrackr-secondary); } /* Progress bars: the green fill needs the dark on-primary label, not Bootstrap's default white (white on bright green is unreadable). */ .progress-bar.bg-success, .progress-bar { color: var(--bettrackr-on-primary); font-weight: 600; } .progress-bar.bg-danger { color: #ffffff; } /* ------------------------------------------------------------------ */ /* Offcanvas elevation: panels share the card surface color, so */ /* nested cards/widgets/pill strips need one elevation step or they */ /* disappear into the panel (e.g. edit-bookmaker tabs and widgets). */ /* ------------------------------------------------------------------ */ .offcanvas .card { background-color: var(--bettrackr-surface-alt); } .offcanvas .nav-pills { background-color: var(--bettrackr-surface-alt); } .offcanvas .list-group-item { background-color: var(--bettrackr-surface-alt); } /* Yellow badges: dark text always - yellow is light in every theme, and Bootstrap's default white badge text disappears on it. */ .badge.bg-warning, .badge.text-bg-warning { color: var(--bettrackr-on-secondary) !important; } /* Brand emphasis: green highlight for key product names/phrases. Use on wherever emphasis should pop. */ .bt-emphasis { color: var(--bettrackr-primary); } /* Bonus tone: blue for bonus-bet money (distinct from positive green). */ .bt-tone-bonus { color: var(--bettrackr-bonus-ink); } /* ------------- LEGACY LIGHT-UTILITY SAFETY NET ----------------- */ /* Bootstrap keeps .table-light and .bg-light literally light even under data-bs-theme="dark", so any leftover use glares on the dark surfaces. Re-map them onto the neutral surface tokens (same pattern as the .bg-bettrackr-blue neutralizer in htmltable_v2.css). In an all-token app a literal light fill is never the intent. */ .table-light { --bs-table-bg: var(--bettrackr-surface-alt); --bs-table-color: var(--bettrackr-text); --bs-table-border-color: var(--bettrackr-border); --bs-table-striped-bg: var(--bettrackr-surface-alt); --bs-table-striped-color: var(--bettrackr-text); --bs-table-hover-bg: var(--bettrackr-surface-hover); --bs-table-hover-color: var(--bettrackr-text); color: var(--bs-table-color); border-color: var(--bs-table-border-color); } .bg-light { background-color: var(--bettrackr-surface-alt) !important; }