/* ---------- Base Fantasy App Theme (generic) ---------- Applies when has class="theme" plus team class like theme-chi, theme-gb, etc. Team classes only need to set the variables below. -------------------------------------------------------- */ .theme { /* team-scoped variables to be set by team classes */ --team-primary: #0B162A; /* dark / background */ --team-primary-700: #08101e; /* darker */ --team-primary-100: #1b2740; /* lighter */ --team-accent: #C83803; /* bright accent */ --team-accent-700: #a73105; /* darker accent */ --team-accent-100: #ffe9df; /* pale accent */ --team-contrast: #ffffff; /* text on primary */ /* semantic surface tokens */ --bg: #0f1424; --card-bg: #101a31; --card-border: #1e2944; --hr: #243152; --text: #e9edf6; } /* ---------- Base ---------- */ .theme body { background: var(--bg); color: var(--text); } .theme a { color: var(--team-accent); } .theme a:hover { color: #ff6b36; } .theme hr, .theme .row-sep tr + tr { border-color: var(--hr); } /* ---------- Navbar ---------- */ .theme .navbar { background: linear-gradient(135deg,var(--team-primary) 0%, var(--team-primary-700) 100%); border-bottom: 1px solid var(--card-border); } .theme .navbar .navbar-brand, .theme .navbar .nav-link { color: #fff; } .theme .navbar .nav-link:hover, .theme .navbar .nav-link.active { color: #ffd7c8; } .theme .dropdown-menu { background: var(--card-bg); border-color: var(--card-border); } .theme .dropdown-item { color: var(--text); } .theme .dropdown-item:hover { background: var(--team-primary-100); color: #fff; } /* ---------- Cards / tables ---------- */ .theme .card { background: var(--card-bg); border: 1px solid var(--card-border); color: var(--text); } .theme .card-header { background: var(--team-primary-100); color: #fff; border-bottom: 1px solid var(--card-border); } .theme .table { --bs-table-bg: transparent; color: var(--text); } .theme .table thead th { background: var(--team-primary); color: #fff; border-color: var(--team-primary); } .theme .table tbody tr:hover { background: var(--team-primary-100); } /* ---------- Buttons ---------- */ .theme .btn-primary { background: var(--team-accent); border-color: var(--team-accent); color: #fff; } .theme .btn-primary:hover { background: var(--team-accent-700); border-color: var(--team-accent-700); } .theme .btn-outline-secondary { border-color: var(--team-accent); color: var(--team-accent); background: transparent; } .theme .btn-outline-secondary:hover { background: var(--team-accent); color: #fff; border-color: var(--team-accent); } .theme .btn-secondary { background: var(--team-primary-100); border-color: var(--card-border); color: #fff; } /* ---------- Forms ---------- */ .theme .form-control, .theme .form-select { background: #0f1b33; border: 1px solid var(--card-border); color: var(--text); } .theme .form-control:focus, .theme .form-select:focus { border-color: var(--team-accent); box-shadow: 0 0 0 .2rem rgba(200,56,3,.25); } /* ---------- Alerts ---------- */ .theme .alert-success { background: rgba(200,56,3,.08); border: 1px solid var(--team-accent); color: #ffd7c8; } /* ---------- Pagination ---------- */ .theme .page-item .page-link { background: #0f1b33; color: #fff; border-color: var(--card-border); } .theme .page-item.active .page-link { background: var(--team-accent); border-color: var(--team-accent); } /* ---------- Your fantasy components ---------- */ .theme .ff-team-header { background: linear-gradient(135deg,var(--team-primary) 0%, var(--team-primary-700) 100%); color: #fff; border-radius: .75rem; } .theme .ff-team-title { color: #fff; } .theme .ff-team-sub span { color: rgba(255,255,255,.85); } .theme .ff-dot { color: var(--team-accent); } .theme .ff-matchup-tile { border: 1px solid var(--team-accent); box-shadow: 0 0 0 2px color-mix(in srgb, var(--team-accent) 20%, transparent) inset; background: var(--card-bg); } .theme .ff-tile-title { color: #fff; } .theme .ff-tile-cta { color: var(--team-accent); } .theme a.ff-player-name { color: #ff6b36; } .theme a.ff-player-name:hover { color: #ff875e; text-decoration: underline; } .theme #rosterTable .row-selected { background: #162338 !important; } .theme #rosterTable .row-candidate { background: var(--team-accent-100) !important; } .theme .winbar { background: linear-gradient(90deg,var(--team-accent), transparent); height: 4px; border-radius: 4px; } .theme body.page-roster { background: #fff; /* white page */ color: #212529; /* bootstrap default text */ } /* Cards / tables back to light */ .theme body.page-roster .card { background: #fff; color: #212529; border-color: #dee2e6; } .theme body.page-roster .card-header { background: #f8f9fa; color: #212529; border-bottom-color: #dee2e6; } .theme body.page-roster .table { color: #212529; } .theme body.page-roster .table thead th { background: #f8f9fa; color: #212529; border-color: #dee2e6; } .theme body.page-roster .table tbody tr:hover { background: #f8f9fa; } /* Tile + forms to light */ .theme body.page-roster .ff-matchup-tile { background: #fff; border-color: #dee2e6; box-shadow: none; } .theme body.page-roster .form-control, .theme body.page-roster .form-select { background: #fff; color: #212529; border-color: #ced4da; } /* Success alert back to Bootstrap light */ .theme body.page-roster .alert-success { background: #d1e7dd; border-color: #badbcc; color: #0f5132; } /* Force white text/links in the top header/navbar */ .theme .navbar, .theme .navbar .navbar-brand, .theme .navbar .nav-link, .theme .navbar .nav-link:visited, .theme .navbar .dropdown-toggle { color: #fff !important; } .theme .navbar .nav-link:hover, .theme .navbar .dropdown-item:hover { color: #fff !important; opacity: .85; text-decoration: underline; } /* Make the burger icon and border visible on dark bg */ .theme .navbar .navbar-toggler { border-color: rgba(255,255,255,.35); } .theme .navbar .navbar-toggler-icon { filter: invert(1) grayscale(100%); } /* If you have any links inside dark card headers, make them white too */ .theme .card-header a, .theme .table thead a { color: #fff !important; } /* ===== Light content everywhere, dark headers only ===== */ /* Make page/cards/tables white by default */ .theme { --bg: #ffffff; --card-bg: #ffffff; --card-border: #e6eaf2; --hr: #e6eaf2; --text: #1a2536; } /* Keep header bars navy (already uses team-primary) */ .theme .navbar, .theme .ff-team-header { /* leave as-is (your existing gradient) */ } /* Tables/cards on white */ .theme body { background: var(--bg); color: var(--text); } .theme .card { background: var(--card-bg); border: 1px solid var(--card-border); } .theme .table { --bs-table-bg: transparent; color: var(--text); } .theme hr, .theme .row-sep tr + tr { border-color: var(--hr); } /* Softer hover on white */ .theme .table tbody tr:hover { background: var(--team-accent-100); } /* ===== Matchup: make points always orange & readable ===== */ /* Big score numbers in the header */ .theme .matchup-header .total-num { color: var(--team-accent); font-weight: 800; opacity: 1; /* ensure not dim */ } /* Per-row points columns (left & right) */ .theme .matchup-table .pts-left, .theme .matchup-table .pts-right { color: var(--team-accent); font-weight: 700; opacity: 1; } /* Position column—use accent for headings */ .theme .matchup-table thead th { background: var(--team-primary); color: #fff; border-color: var(--team-primary); } .theme .matchup-table .pos-col { color: var(--team-accent); font-weight: 700; } /* The mini scoreboard card stays light */ .theme .matchup-header .score-block { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: .5rem; } /* Player names: accent color on white */ .theme a.ff-player-name { color: var(--team-accent); } .theme a.ff-player-name:hover { color: color-mix(in srgb, var(--team-accent) 85%, white); text-decoration: underline; } /* Matchup tile: make inner panel the same navy gradient as header */ .theme .ff-matchup-tile .ff-tile-body, .theme .ff-matchup-tile .ff-tilerow { background: linear-gradient(135deg, var(--team-primary) 0%, var(--team-primary-700) 100%); border-radius: .65rem; } /* keep text readable on the dark panel */ .theme .ff-matchup-tile .ff-tilerow-center { color: #fff; opacity: .9; } .theme .ff-matchup-tile .helmet, .theme .ff-matchup-tile img.ff-tile-avatar { background: #fff; } /* logos still pop */ /* keep scores in team accent (orange for CHI) */ .theme .ff-matchup-tile .ff-score { color: var(--team-accent); font-weight: 800; } /* --- Player modal: white dropdown with team-accent text --- */ /* The list panel */ .theme .modal .dropdown-menu { background: #fff; /* white list */ border-color: var(--team-accent); /* subtle accent border */ box-shadow: 0 6px 18px rgba(0,0,0,.25); } /* Each row in the list */ .theme .modal .dropdown-item { color: var(--team-accent); /* team accent text (e.g., Bears orange) */ } /* Hover / active row */ .theme .modal .dropdown-item:hover, .theme .modal .dropdown-item:focus, .theme .modal .dropdown-item.active { background: var(--team-accent-100); /* pale accent background */ color: var(--team-primary); /* dark navy text for contrast */ } /* The button / toggle itself inside the modal */ .theme .modal .btn.dropdown-toggle, .theme .modal .form-select { background: #fff; color: var(--team-accent); border-color: var(--team-accent); } /* Optional: if this modal uses a native