/* ============================================================ ABL — Ascension Basketball League Shared stylesheet for all exported game pages ============================================================ */ :root { --abl-orange: #fd5202; --abl-orange-bright: #ff7a33; --abl-orange-dim: #c84300; --abl-bg: #0b0c10; --abl-surface: #16181d; --abl-surface-raised: #1d2026; --abl-border: #2a2d34; --abl-text: #f2f3f5; --abl-text-dim: #9aa0ab; --abl-silver: #c9ced6; --abl-row-alt: #1b1e24; --abl-row: #16181d; --abl-link: #ff9152; --abl-link-human: #2b7fd4; --font-display: 'Oswald', 'Arial Narrow', Helvetica, sans-serif; --font-body: 'Inter', 'Segoe UI', Arial, Helvetica, sans-serif; /* Table density (overridden by [data-density] on , set via Settings) */ --abl-row-pad-v: 7px; --abl-row-pad-h: 6px; --abl-row-font: 13px; --abl-header-font: 12px; --abl-nav-pad-v: 12px; } /* ============================================================ TABLE DENSITY Set via Controlled from settings.htm, applied by settings.js before paint ============================================================ */ html[data-density="compact"] { --abl-row-pad-v: 4px; --abl-row-pad-h: 5px; --abl-row-font: 12px; --abl-header-font: 11px; --abl-nav-pad-v: 8px; } html[data-density="comfortable"] { --abl-row-pad-v: 11px; --abl-row-pad-h: 8px; --abl-row-font: 14px; --abl-header-font: 13px; --abl-nav-pad-v: 16px; } /* ============================================================ LIGHT MODE OVERRIDES Applied when is set by theme.js ============================================================ */ html.light-mode { --abl-bg: #f0f1f4; --abl-surface: #ffffff; --abl-surface-raised: #e8eaee; --abl-border: #d0d3da; --abl-text: #111318; --abl-text-dim: #555b68; --abl-row: #ffffff; --abl-row-alt: #f4f5f8; --abl-link: #c84300; --abl-link-human: #1a5fb4; } /* ============================================================ EGGSHELL — warm, soft off-white. Easier on the eyes than pure white, slightly creamy. ============================================================ */ html.theme-eggshell { --abl-bg: #f7f3ea; --abl-surface: #fffdf7; --abl-surface-raised: #efe9da; --abl-border: #ddd4bf; --abl-text: #2b271e; --abl-text-dim: #6b6354; --abl-row: #fffdf7; --abl-row-alt: #f1ecdf; --abl-link: #c84300; --abl-link-human: #1a5fb4; } /* ============================================================ LIGHT GREY — neutral, cool grey, brighter than charcoal but softer than pure white. ============================================================ */ html.theme-light-grey { --abl-bg: #e4e6ea; --abl-surface: #f4f5f7; --abl-surface-raised: #d7dadf; --abl-border: #c2c6cd; --abl-text: #181a1e; --abl-text-dim: #54585f; --abl-row: #f4f5f7; --abl-row-alt: #e9ebee; --abl-link: #c84300; --abl-link-human: #1a5fb4; } /* ============================================================ CHARCOAL — dark grey, not as deep/black as the default dark theme, easier contrast for long sessions. ============================================================ */ html.theme-charcoal { --abl-bg: #23252a; --abl-surface: #2b2e34; --abl-surface-raised: #34373e; --abl-border: #44474f; --abl-text: #eceef0; --abl-text-dim: #a9adb6; --abl-row: #2b2e34; --abl-row-alt: #303339; --abl-link: #ff9152; --abl-link-human: #6fb8ff; } /* ============================================================ NIGHT LIGHT — warm, low blue-light dark theme. Reduces blue wavelengths via warm amber-tinted background/text instead of a CSS filter (filter:sepia would also wash out team colors, which we need to preserve on roster pages). ============================================================ */ html.theme-night { --abl-bg: #14100a; --abl-surface: #1d1710; --abl-surface-raised: #261e14; --abl-border: #3a2e1d; --abl-text: #f0e6d2; --abl-text-dim: #ab9a7d; --abl-row: #1d1710; --abl-row-alt: #221b12; --abl-link: #ffa552; --abl-link-human: #e0b070; --abl-orange: #e85d04; --abl-orange-bright: #ff8c3a; } html.light-mode body, html.theme-eggshell body, html.theme-light-grey body, html.theme-charcoal body, html.theme-night body { background: var(--abl-bg) !important; } html.light-mode .abl-topbar, html.theme-eggshell .abl-topbar, html.theme-light-grey .abl-topbar { background: linear-gradient(180deg, var(--abl-surface) 0%, var(--abl-bg) 100%); border-bottom: 2px solid var(--abl-orange); box-shadow: 0 2px 12px rgba(0,0,0,.12); } html.theme-charcoal .abl-topbar, html.theme-night .abl-topbar { background: linear-gradient(180deg, var(--abl-surface) 0%, var(--abl-bg) 100%); border-bottom: 2px solid var(--abl-orange); box-shadow: 0 2px 12px rgba(0,0,0,.4); } html.light-mode .abl-ticker-wrap::after, html.theme-eggshell .abl-ticker-wrap::after, html.theme-light-grey .abl-ticker-wrap::after { background: linear-gradient(90deg, transparent, var(--abl-bg) 85%); } html.light-mode td.main, html.theme-eggshell td.main, html.theme-light-grey td.main, html.theme-charcoal td.main, html.theme-night td.main { color: var(--abl-text) !important; } html.light-mode tr.row1 td.main, html.theme-eggshell tr.row1 td.main, html.theme-light-grey tr.row1 td.main, html.theme-charcoal tr.row1 td.main, html.theme-night tr.row1 td.main { background: var(--abl-row) !important; } html.light-mode tr.row2 td.main, html.theme-eggshell tr.row2 td.main, html.theme-light-grey tr.row2 td.main, html.theme-charcoal tr.row2 td.main, html.theme-night tr.row2 td.main { background: var(--abl-row-alt) !important; } html.light-mode tr.row2:hover td.main { background: var(--abl-surface-raised) !important; } html.light-mode .dc-card { background: var(--abl-surface); border-color: var(--abl-border); } html.light-mode .dc-slot-row1 select, html.light-mode .dc-slot select, html.light-mode .dc-field select, html.light-mode .dc-select { background: var(--abl-surface-raised); color: var(--abl-text); border-color: var(--abl-border); } html.light-mode .dc-min, html.light-mode .dc-export textarea { background: var(--abl-surface-raised); color: var(--abl-text); border-color: var(--abl-border); } html.light-mode .dc-pos-pill, html.theme-eggshell .dc-pos-pill, html.theme-light-grey .dc-pos-pill { background: var(--abl-surface-raised); border-color: var(--abl-border); color: var(--abl-text-dim); } html.light-mode .dc-pos-pill.selected, html.theme-eggshell .dc-pos-pill.selected, html.theme-light-grey .dc-pos-pill.selected { background: var(--abl-orange) !important; border-color: var(--abl-orange) !important; color: #fff !important; } html.light-mode .dc-pos-pill:hover, html.theme-eggshell .dc-pos-pill:hover, html.theme-light-grey .dc-pos-pill:hover { border-color: var(--abl-orange-bright); color: var(--abl-orange-bright); } html.light-mode .dc-ir-list span { background: var(--abl-surface-raised); border-color: var(--abl-border); color: var(--abl-text-dim); } /* ============================================================ THEME TOGGLE BUTTON (in top nav) ============================================================ */ .abl-theme-toggle { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; margin-left: 4px; margin-right: 8px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--abl-border); background: var(--abl-surface-raised); cursor: pointer; font-size: 16px; transition: background .15s ease, border-color .15s ease; user-select: none; flex-shrink: 0; } .abl-theme-toggle:hover { border-color: var(--abl-orange); background: var(--abl-surface); } /* ============================================================ DEPTH CHART CHECKBOXES ============================================================ */ .dc-check { display: flex; align-items: center; gap: 6px; margin-top: 4px; } .dc-check input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--abl-orange); cursor: pointer; flex-shrink: 0; } .dc-check label { font-size: 11px; color: var(--abl-text-dim); cursor: pointer; user-select: none; text-transform: uppercase; letter-spacing: 0.4px; } .dc-check input[type="checkbox"]:checked + label { color: var(--abl-orange-bright); font-weight: 600; } .dc-gp-check { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; } .dc-gp-check input[type="checkbox"] { width: 14px; height: 14px; accent-color: var(--abl-orange); cursor: pointer; flex-shrink: 0; } .dc-gp-check label { font-size: 11px; color: var(--abl-text-dim); cursor: pointer; user-select: none; text-transform: uppercase; letter-spacing: 0.4px; font-weight: 600; } .dc-gp-check input[type="checkbox"]:checked + label { color: var(--abl-orange-bright); } /* ============================================================ RESET / BASE ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--abl-bg) !important; background-image: none !important; color: var(--abl-text); font-family: var(--font-body); font-size: 14px; line-height: 1.45; } body { padding-top: 64px; /* space for fixed top nav */ padding-bottom: 40px; } a { text-decoration: none; } hr { border: none; border-top: 1px solid var(--abl-border); margin: 16px 0; } /* ============================================================ TOP BAR — Logo + Hamburger + Scores Ticker + Theme Toggle ============================================================ */ .abl-topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; display: flex; align-items: center; height: 64px; background: linear-gradient(180deg, #14161b 0%, #0b0c10 100%); border-bottom: 2px solid var(--abl-orange); box-shadow: 0 2px 12px rgba(0,0,0,.5); } html.light-mode .abl-topbar { background: linear-gradient(180deg, #ffffff 0%, #f0f1f4 100%); box-shadow: 0 2px 12px rgba(0,0,0,.12); } .abl-logo-wrap { flex: 0 0 auto; display: flex; align-items: center; padding: 0 14px; height: 100%; border-right: 1px solid var(--abl-border); } .abl-logo-wrap img { height: 44px; width: 44px; border-radius: 50%; display: block; } .abl-logo-wrap .abl-wordmark { font-family: var(--font-display); font-weight: 700; letter-spacing: 1px; font-size: 17px; color: var(--abl-text); margin-left: 10px; white-space: nowrap; text-transform: uppercase; } .abl-logo-wrap .abl-wordmark span { color: var(--abl-orange); } /* Hamburger button */ .abl-hamburger { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 48px; height: 48px; margin: 0 6px; cursor: pointer; border-radius: 8px; transition: background .15s ease; flex-shrink: 0; } .abl-hamburger:hover { background: var(--abl-surface-raised); } .abl-hamburger span { display: block; width: 22px; height: 2px; background: var(--abl-text); border-radius: 2px; transition: all .2s ease; } .abl-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .abl-hamburger.open span:nth-child(2) { opacity: 0; } .abl-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Scores ticker */ .abl-ticker-wrap { flex: 1 1 auto; overflow: hidden; height: 100%; display: flex; align-items: center; position: relative; border-left: 1px solid var(--abl-border); } .abl-ticker-wrap::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; width: 36px; background: linear-gradient(90deg, transparent, var(--abl-bg) 85%); pointer-events: none; z-index: 2; } html.light-mode .abl-ticker-wrap::after { background: linear-gradient(90deg, transparent, #f0f1f4 85%); } .abl-ticker-track { display: flex; align-items: center; gap: 0; white-space: nowrap; animation: ticker-scroll 40s linear infinite; will-change: transform; } .abl-ticker-wrap:hover .abl-ticker-track { animation-play-state: paused; } @keyframes ticker-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .abl-score-card { display: inline-flex; align-items: center; gap: 5px; padding: 0 9px; height: 64px; border-right: 1px solid var(--abl-border); cursor: default; transition: background .15s ease; flex-shrink: 0; } .abl-score-card:hover { background: var(--abl-surface-raised); } .abl-score-team { display: flex; align-items: center; gap: 2px; flex-direction: column; text-align: center; min-width: 34px; } .abl-score-team img { width: 22px; height: 22px; object-fit: contain; display: block; } .abl-score-team .abl-score-abbr { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 0.3px; color: var(--abl-text-dim); text-transform: uppercase; } .abl-score-team .abl-score-pts { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--abl-text); line-height: 1; } .abl-score-team.winner .abl-score-pts { color: var(--abl-orange-bright); } .abl-score-sep { font-family: var(--font-display); font-size: 11px; color: var(--abl-text-dim); font-weight: 600; } .abl-ticker-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 1px; color: var(--abl-text-dim); text-transform: uppercase; padding: 0 12px; flex-shrink: 0; } /* ============================================================ SKELETON LOADING STATE — ticker, and reusable anywhere else ============================================================ */ .abl-ticker-skeleton { display: flex; align-items: center; gap: 14px; padding: 0 16px; height: 100%; width: 100%; } .abl-skel-card { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .abl-skel-dot { width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(90deg, var(--abl-surface-raised) 25%, var(--abl-border) 37%, var(--abl-surface-raised) 63%); background-size: 400% 100%; animation: abl-shimmer 1.4s ease infinite; } .abl-skel-bar { width: 34px; height: 10px; border-radius: 3px; background: linear-gradient(90deg, var(--abl-surface-raised) 25%, var(--abl-border) 37%, var(--abl-surface-raised) 63%); background-size: 400% 100%; animation: abl-shimmer 1.4s ease infinite; } @keyframes abl-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } /* generic skeleton helper class, reusable on any block */ .abl-skel { background: linear-gradient(90deg, var(--abl-surface-raised) 25%, var(--abl-border) 37%, var(--abl-surface-raised) 63%); background-size: 400% 100%; animation: abl-shimmer 1.4s ease infinite; border-radius: 4px; color: transparent !important; } /* ============================================================ SLIDE-OUT NAV MENU ============================================================ */ .abl-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 999; backdrop-filter: blur(2px); } .abl-nav-overlay.open { display: block; } .abl-nav-drawer { position: fixed; top: 64px; left: -300px; width: 260px; bottom: 0; background: var(--abl-surface); border-right: 1px solid var(--abl-border); z-index: 1001; overflow-y: auto; transition: left .25s cubic-bezier(.4,0,.2,1); padding: 8px 0 40px; } .abl-nav-drawer.open { left: 0; } /* nav group labels */ .abl-nav-group-label { display: block; font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--abl-orange); padding: 14px 16px 4px; pointer-events: none; user-select: none; } .abl-nav-divider { height: 1px; background: var(--abl-border); margin: 4px 0; } .abl-nav-drawer a { display: block; font-family: var(--font-display); font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; color: var(--abl-text-dim); padding: var(--abl-nav-pad-v) 20px; border-bottom: 1px solid var(--abl-border); transition: color .15s ease, background .15s ease, padding-left .15s ease; } .abl-nav-drawer a:hover { color: var(--abl-text); background: var(--abl-surface-raised); padding-left: 26px; } .abl-nav-drawer a.active { color: var(--abl-orange-bright); background: var(--abl-surface-raised); border-left: 3px solid var(--abl-orange); padding-left: 17px; } /* hide old nav scroll — replaced by ticker */ .abl-nav-scroll { display: none; } /* ============================================================ PAGE CONTAINER ============================================================ */ .abl-container { max-width: 1100px; margin: 0 auto; padding: 18px 16px 0; } /* legacy width=800 tables used as page wrappers */ table[width="800"] { width: 100% !important; max-width: 1100px; margin: 0 auto 16px auto; border-collapse: collapse; } /* ============================================================ PAGE TITLE (td.newheader / td.plainheader) ============================================================ */ td.newheader, td.plainheader, td.teamheader { background: transparent !important; font-family: var(--font-display) !important; font-size: 30px !important; font-weight: 700 !important; letter-spacing: 1px; color: var(--abl-text) !important; text-transform: uppercase; border-left: 5px solid var(--abl-orange); padding: 4px 0 4px 14px !important; display: block; } /* ============================================================ SECTION HEADERS (td.tableheader / td.headerbg / td.teamheader2) ============================================================ */ td.tableheader { background: transparent !important; font-family: var(--font-display) !important; font-size: 18px !important; font-weight: 600 !important; letter-spacing: 0.5px; color: var(--abl-orange-bright) !important; text-transform: uppercase; padding: 16px 4px 8px !important; border: none !important; } td.headerbg, td.teamheader2 { background: var(--abl-surface-raised) !important; font-family: var(--font-display) !important; font-size: 13px !important; font-weight: 600 !important; color: var(--abl-text) !important; letter-spacing: 0.5px; text-transform: uppercase; padding: 8px 10px !important; border: none !important; } /* ============================================================ TABLES — data grids ============================================================ */ table { border-collapse: collapse; } /* column headers */ td.header { background: var(--abl-orange) !important; color: #fff !important; font-family: var(--font-display) !important; font-size: var(--abl-header-font) !important; font-weight: 600 !important; letter-spacing: 0.4px; text-transform: uppercase; padding: var(--abl-row-pad-v) var(--abl-row-pad-h) !important; border: none !important; white-space: nowrap; } /* sortable header interaction */ td.header[data-sort-key] { cursor: pointer; transition: background .15s ease; user-select: none; } td.header[data-sort-key]:hover { background: var(--abl-orange-bright) !important; } td.header.active-sort { background: var(--abl-orange-dim) !important; box-shadow: inset 0 -3px 0 #fff; } /* data cells */ td.main { background: transparent; color: var(--abl-text) !important; font-size: var(--abl-row-font) !important; font-weight: 400 !important; padding: var(--abl-row-pad-v) var(--abl-row-pad-h) !important; border-bottom: 1px solid var(--abl-border); white-space: nowrap; } /* row striping */ tr.row1 td.main { background: var(--abl-row) !important; } tr.row2 td.main { background: var(--abl-row-alt) !important; } /* favorite team highlight (set via Settings page) */ tr.abl-fav-team-row td.main { background: rgba(253, 82, 2, 0.12) !important; box-shadow: inset 3px 0 0 var(--abl-orange); } tr.abl-fav-team-row:hover td.main { background: rgba(253, 82, 2, 0.2) !important; } /* per-team color accent (standings/leaders rows, injected by update_site.py) */ tr[data-team-accent] td.main:first-child { box-shadow: inset 4px 0 0 var(--abl-team-accent, transparent); padding-left: 9px !important; } /* favorite team takes visual priority over the generic team accent */ tr.abl-fav-team-row[data-team-accent] td.main:first-child { box-shadow: inset 4px 0 0 var(--abl-orange); } tr.row1:hover td.main, tr.row2:hover td.main { background: var(--abl-surface-raised) !important; } /* team color banner rows */ tr.teamcolor td { background: var(--abl-surface-raised) !important; color: var(--abl-text) !important; font-family: var(--font-display) !important; letter-spacing: 0.5px; } /* ============================================================ LINKS ============================================================ */ a.linkmain, a.linkmain font { color: var(--abl-link) !important; font-weight: 600 !important; transition: color .15s ease; } a.linkmain:hover { color: #fff !important; text-decoration: underline; } a.linkhuman, a.linkhuman font { color: var(--abl-link-human) !important; font-weight: 600 !important; transition: color .15s ease; } a.linkhuman:hover { color: #fff !important; text-decoration: underline; } /* ============================================================ CUR / FUT RATING DOTS -> circular badges ============================================================ */ td.main table { width: auto !important; height: auto !important; border-collapse: collapse !important; margin: 0 auto !important; display: inline-block !important; } td.main table td[bgcolor] { width: 14px !important; height: 14px !important; padding: 0 !important; border: 2px solid var(--abl-bg) !important; border-radius: 50% !important; display: block !important; box-shadow: 0 0 4px rgba(0,0,0,.6); } /* ============================================================ FOOTER CREDIT LINE ============================================================ */ font[size="2"] { color: var(--abl-text-dim) !important; font-size: 11px !important; } font[size="2"] a.linkmain { color: var(--abl-text-dim) !important; font-weight: 400 !important; } font[size="2"] a.linkmain:hover { color: var(--abl-orange-bright) !important; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 720px) { .abl-logo-wrap .abl-wordmark { display: none; } td.newheader, td.plainheader, td.teamheader { font-size: 22px !important; } td.tableheader { font-size: 15px !important; } td.main, td.header { font-size: 11px !important; padding: 6px 4px !important; } } /* ============================================================ DEPTH CHART PAGE (used by depthchart.htm) ============================================================ */ .dc-wrap { max-width: 1100px; margin: 0 auto; padding: 18px 16px 60px; } .dc-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--abl-text); border-left: 5px solid var(--abl-orange); padding-left: 14px; margin: 0 0 18px; } .dc-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 20px; } .dc-select { background: var(--abl-surface); color: var(--abl-text); border: 1px solid var(--abl-border); border-radius: 8px; padding: 10px 14px; font-family: var(--font-body); font-size: 14px; font-weight: 600; min-width: 220px; cursor: pointer; } .dc-select:focus { outline: 2px solid var(--abl-orange); outline-offset: 1px; } .dc-btn { background: var(--abl-orange); color: #fff; border: none; border-radius: 8px; padding: 10px 18px; font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: background .15s ease; } .dc-btn:hover { background: var(--abl-orange-bright); } .dc-btn.secondary { background: var(--abl-surface-raised); color: var(--abl-text); border: 1px solid var(--abl-border); } .dc-btn.secondary:hover { border-color: var(--abl-orange); color: var(--abl-orange-bright); } .dc-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; } @media (max-width: 860px) { .dc-grid { grid-template-columns: 1fr; } } .dc-card { background: var(--abl-surface); border: 1px solid var(--abl-border); border-radius: 10px; padding: 16px; } .dc-card h2 { font-family: var(--font-display); font-size: 16px; text-transform: uppercase; letter-spacing: 1px; color: var(--abl-orange-bright); margin: 0 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--abl-border); } .dc-slot { display: grid; grid-template-columns: 56px 1fr; gap: 8px; align-items: start; padding: 8px 0; border-bottom: 1px solid var(--abl-border); } .dc-slot:last-child { border-bottom: none; } .dc-slot-label { font-family: var(--font-display); font-weight: 700; color: var(--abl-orange); font-size: 13px; text-transform: uppercase; padding-top: 7px; } .dc-minutes-total { font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.5px; text-transform: uppercase; color: var(--abl-text-dim); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--abl-border); } .dc-minutes-total.over-limit { color: var(--abl-orange-bright); } .dc-slot-body { display: flex; flex-direction: column; gap: 6px; } .dc-slot-row1 { display: flex; gap: 8px; align-items: center; } .dc-slot-row1 select { flex: 1; background: var(--abl-surface-raised); color: var(--abl-text); border: 1px solid var(--abl-border); border-radius: 6px; padding: 6px 8px; font-size: 13px; } .dc-slot-row1 select option:disabled, .dc-field select option:disabled { color: #5a5e68; font-style: italic; } .dc-slot .dc-min { background: var(--abl-surface-raised); color: var(--abl-text); border: 1px solid var(--abl-border); border-radius: 6px; padding: 6px 8px; font-size: 13px; width: 70px; text-align: center; flex: 0 0 auto; } .dc-slot .dc-min.over-limit { border-color: var(--abl-orange); box-shadow: 0 0 0 2px rgba(253, 82, 2, 0.35); } /* position pills row */ .dc-pos-pills { display: flex; gap: 6px; flex-wrap: wrap; } .dc-pos-pill { display: inline-flex; align-items: center; justify-content: center; background: var(--abl-surface-raised); border: 1px solid var(--abl-border); color: var(--abl-text-dim); font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; border-radius: 4px; padding: 3px 8px; cursor: pointer; user-select: none; transition: all .12s ease; min-width: 30px; } .dc-pos-pill:hover { border-color: var(--abl-orange-bright); color: var(--abl-text); } .dc-pos-pill.selected { background: var(--abl-orange); border-color: var(--abl-orange); color: #fff; } .dc-ir { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--abl-border); } .dc-ir-title { font-weight: 700; color: var(--abl-orange-bright); font-size: 13px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 6px; } .dc-ir-list { display: flex; flex-wrap: wrap; gap: 6px; } .dc-ir-list span { background: var(--abl-surface-raised); border: 1px solid var(--abl-border); border-radius: 4px; padding: 3px 8px; font-size: 12px; color: var(--abl-text-dim); } /* gameplan */ .dc-field { margin-bottom: 12px; } .dc-field label { display: block; font-size: 12px; font-weight: 600; color: var(--abl-text-dim); text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; } .dc-field .dc-range-row { display: flex; align-items: center; gap: 10px; } .dc-field input[type="range"] { flex: 1; accent-color: var(--abl-orange); } .dc-field .dc-range-val { font-family: var(--font-display); font-weight: 700; color: var(--abl-orange-bright); min-width: 24px; text-align: center; } .dc-field select { width: 100%; background: var(--abl-surface-raised); color: var(--abl-text); border: 1px solid var(--abl-border); border-radius: 6px; padding: 8px 10px; font-size: 13px; } .dc-focus-players { display: flex; gap: 8px; flex-wrap: wrap; } .dc-focus-players select { flex: 1; min-width: 140px; } .dc-export { margin-top: 18px; } .dc-export textarea { width: 100%; min-height: 320px; background: var(--abl-surface-raised); color: var(--abl-text); border: 1px solid var(--abl-border); border-radius: 8px; padding: 12px; font-family: 'Courier New', monospace; font-size: 12px; line-height: 1.6; resize: vertical; } .dc-save-status { font-size: 12px; color: var(--abl-text-dim); margin-left: 8px; } /* ============================================================ SETTINGS PAGE ============================================================ */ .st-wrap { max-width: 1000px; margin: 0 auto; padding: 28px 16px 60px; } .st-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: 0.5px; color: var(--abl-text); margin: 0 0 6px; text-transform: uppercase; } .st-sub { color: var(--abl-text-dim); font-size: 14px; margin: 0 0 24px; } .st-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } @media (max-width: 700px) { .st-grid { grid-template-columns: 1fr; } } .st-card { background: var(--abl-surface); border: 1px solid var(--abl-border); border-radius: 10px; padding: 18px 20px; } .st-card-label { font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--abl-orange-bright); margin-bottom: 12px; } .st-hint { font-size: 12px; color: var(--abl-text-dim); margin: 10px 0 0; line-height: 1.5; } .st-select { width: 100%; background: var(--abl-surface-raised); color: var(--abl-text); border: 1px solid var(--abl-border); border-radius: 6px; padding: 10px 12px; font-family: var(--font-body); font-size: 14px; cursor: pointer; } .st-select:focus { outline: 2px solid var(--abl-orange); outline-offset: -1px; } .st-theme-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } @media (max-width: 420px) { .st-theme-grid { grid-template-columns: repeat(2, 1fr); } } .st-theme-swatch { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 72px; border-radius: 8px; border: 2px solid var(--abl-border); cursor: pointer; transition: border-color .15s ease, transform .1s ease; font-family: var(--font-body); } .st-theme-swatch:hover { transform: translateY(-1px); } .st-theme-swatch.active { border-color: var(--abl-orange); box-shadow: 0 0 0 1px var(--abl-orange); } .st-theme-dot { width: 18px; height: 18px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,0.15); } .st-theme-name { font-size: 11px; font-weight: 600; letter-spacing: 0.3px; } .st-reset-row { display: flex; align-items: center; gap: 12px; margin-top: 24px; } .st-btn-reset { background: transparent; color: var(--abl-text-dim); border: 1px solid var(--abl-border); border-radius: 6px; padding: 9px 16px; font-family: var(--font-body); font-size: 13px; cursor: pointer; transition: color .15s ease, border-color .15s ease; } .st-btn-reset:hover { color: var(--abl-orange-bright); border-color: var(--abl-orange); } .st-save-status { font-size: 12px; color: var(--abl-text-dim); } /* ============================================================ TRADE TOOL ============================================================ */ .tt-wrap { max-width: 1200px; margin: 0 auto; padding: 28px 16px 60px; } .tt-title { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: 0.5px; color: var(--abl-text); margin: 0 0 6px; text-transform: uppercase; } .tt-sub { color: var(--abl-text-dim); font-size: 14px; margin: 0 0 20px; } .tt-teams-wrap { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 18px; } .tt-team-col { background: var(--abl-surface); border: 1px solid var(--abl-border); border-radius: 10px; padding: 14px; min-height: 120px; } .tt-team-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; } .tt-team-select { flex: 1 1 auto; background: var(--abl-surface-raised); color: var(--abl-text); border: 1px solid var(--abl-border); border-radius: 6px; padding: 8px 10px; font-family: var(--font-body); font-size: 13px; cursor: pointer; } .tt-remove-team { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--abl-border); background: transparent; color: var(--abl-text-dim); cursor: pointer; font-size: 16px; line-height: 1; } .tt-remove-team:hover { color: var(--abl-orange-bright); border-color: var(--abl-orange); } .tt-add-team { border: 2px dashed var(--abl-border); border-radius: 10px; background: transparent; color: var(--abl-text-dim); cursor: pointer; font-family: var(--font-display); font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; min-height: 120px; transition: color .15s ease, border-color .15s ease; } .tt-add-team:hover { color: var(--abl-orange-bright); border-color: var(--abl-orange); } .tt-team-summary { font-size: 12px; color: var(--abl-text-dim); margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--abl-border); } .tt-roster-list { max-height: 260px; overflow-y: auto; margin-bottom: 12px; } .tt-player-row { display: flex; align-items: center; gap: 6px; padding: 6px 4px; border-bottom: 1px solid var(--abl-border); font-size: 12px; } .tt-player-row.sending { background: rgba(253, 82, 2, 0.08); border-radius: 4px; padding: 6px 6px; } .tt-player-name { flex: 1 1 auto; color: var(--abl-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .tt-player-pos { flex: 0 0 auto; width: 28px; color: var(--abl-text-dim); font-family: var(--font-display); font-size: 11px; } .tt-player-sal { flex: 0 0 auto; color: var(--abl-text-dim); font-size: 11px; white-space: nowrap; } .tt-send-btn { flex: 0 0 auto; background: var(--abl-surface-raised); color: var(--abl-orange-bright); border: 1px solid var(--abl-border); border-radius: 5px; padding: 4px 8px; font-size: 11px; cursor: pointer; transition: border-color .15s ease; } .tt-send-btn:hover { border-color: var(--abl-orange); } .tt-remove-btn { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; border: none; background: transparent; color: var(--abl-text-dim); cursor: pointer; font-size: 15px; line-height: 1; } .tt-remove-btn:hover { color: var(--abl-orange-bright); } .tt-section-label { font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--abl-orange-bright); margin-bottom: 6px; } .tt-empty-hint { font-size: 12px; color: var(--abl-text-dim); font-style: italic; padding: 8px 0; } .tt-card { background: var(--abl-surface); border: 1px solid var(--abl-border); border-radius: 10px; padding: 16px 18px; margin-bottom: 14px; } .tt-card-label { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--abl-orange-bright); margin-bottom: 10px; } .tt-hint { font-size: 13px; color: var(--abl-text-dim); } .tt-status { font-family: var(--font-display); font-size: 14px; font-weight: 700; padding: 8px 0; } .tt-status-ok { color: #4ade80; } .tt-status-error { color: #ff6b5e; } .tt-error-line { font-size: 13px; color: #ff6b5e; padding: 4px 0; border-left: 3px solid #ff6b5e; padding-left: 10px; margin: 4px 0; } .tt-warning-line { font-size: 13px; color: #f5b942; padding: 4px 0; border-left: 3px solid #f5b942; padding-left: 10px; margin: 4px 0; } .tt-summary-row { display: grid; grid-template-columns: 1.3fr 1fr 1.3fr 1.5fr; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--abl-border); font-size: 12px; align-items: center; } .tt-summary-row:last-child { border-bottom: none; } @media (max-width: 700px) { .tt-summary-row { grid-template-columns: 1fr; gap: 2px; } } .tt-summary-team { font-family: var(--font-display); font-weight: 700; color: var(--abl-text); } .tt-summary-detail { color: var(--abl-text-dim); } .tt-discord-text { width: 100%; min-height: 160px; background: var(--abl-surface-raised); color: var(--abl-text); border: 1px solid var(--abl-border); border-radius: 8px; padding: 12px; font-family: 'Courier New', monospace; font-size: 12px; line-height: 1.6; resize: vertical; } .tt-discord-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .tt-btn { background: var(--abl-orange); color: #fff; border: none; border-radius: 6px; padding: 9px 16px; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; cursor: pointer; transition: background .15s ease; } .tt-btn:hover { background: var(--abl-orange-bright); } .tt-btn.secondary { background: transparent; color: var(--abl-text-dim); border: 1px solid var(--abl-border); } .tt-btn.secondary:hover { color: var(--abl-text); border-color: var(--abl-text-dim); } .tt-save-status { font-size: 12px; color: var(--abl-text-dim); } .tt-rules-note { font-size: 11px; color: var(--abl-text-dim); line-height: 1.7; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--abl-border); } /* ============================================================ STREAK BADGES & PLAYOFF LINE (decorated by polish.js) ============================================================ */ .abl-streak-badge { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; } .abl-streak-badge.hot { color: #ff7a33; } .abl-streak-badge.cold { color: #6fb8ff; } .abl-playoff-line-row td { padding: 0 !important; border: none !important; background: transparent !important; } .abl-playoff-line { position: relative; display: flex; align-items: center; justify-content: center; height: 22px; margin: 2px 0; } .abl-playoff-line::before, .abl-playoff-line::after { content: ''; flex: 1 1 auto; height: 2px; background: repeating-linear-gradient(90deg, var(--abl-orange) 0, var(--abl-orange) 6px, transparent 6px, transparent 12px); } .abl-playoff-line span { flex: 0 0 auto; padding: 0 10px; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--abl-orange-bright); white-space: nowrap; } /* ============================================================ STAT BARS (leaders / teamleaders pages, added by polish.js) ============================================================ */ .abl-stat-bar-wrap { position: relative; display: flex; align-items: center; min-width: 60px; height: 100%; } .abl-stat-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(253, 82, 2, 0.18); border-right: 2px solid var(--abl-orange); border-radius: 0 2px 2px 0; transition: width .3s ease; pointer-events: none; } .abl-stat-val { position: relative; z-index: 1; padding: 0 4px; font-size: var(--abl-row-font); color: var(--abl-text); white-space: nowrap; } /* ============================================================ STANDINGS HERO BANNER (injected by update_site.py) ============================================================ */ .abl-standings-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--abl-surface); border: 1px solid var(--abl-border); border-left: 4px solid var(--abl-orange); border-radius: 10px; padding: 18px 22px; margin-bottom: 22px; flex-wrap: wrap; } .abl-hero-left { flex: 1 1 auto; } .abl-hero-sim { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--abl-orange); margin-bottom: 4px; } .abl-hero-title { font-family: var(--font-display); font-size: 28px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--abl-text); line-height: 1.1; } .abl-hero-sub { font-size: 12px; color: var(--abl-text-dim); margin-top: 4px; } .abl-hero-stats { display: flex; gap: 10px; flex-shrink: 0; } .abl-hero-stat { background: var(--abl-surface-raised); border: 1px solid var(--abl-border); border-radius: 8px; padding: 10px 16px; text-align: center; min-width: 64px; } .abl-hero-val { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--abl-orange-bright); line-height: 1; } .abl-hero-lbl { font-size: 9px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--abl-text-dim); margin-top: 4px; } @media (max-width: 600px) { .abl-standings-hero { flex-direction: column; align-items: flex-start; } .abl-hero-title { font-size: 22px; } .abl-hero-stats { gap: 8px; } .abl-hero-stat { padding: 8px 12px; min-width: 54px; } .abl-hero-val { font-size: 16px; } } /* ============================================================ TEAM BANNER QUICK-STAT PILLS (added by polish.js) ============================================================ */ .abl-team-pills { display: flex; flex-wrap: wrap; gap: 8px; padding: 10px 14px 14px; max-width: 1100px; margin: 0 auto; } .abl-team-pill { display: inline-flex; align-items: center; background: var(--abl-surface-raised); border: 1px solid var(--abl-border); border-radius: 20px; padding: 4px 12px; font-family: var(--font-display); font-size: 11px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--abl-text-dim); white-space: nowrap; } /* ============================================================ GM TROPHY ICONS (added by polish.js on coach/GM pages) ============================================================ */ .abl-gm-trophies { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle; margin-left: 10px; flex-wrap: wrap; } .abl-trophy { display: inline-flex; align-items: center; cursor: default; transition: transform .15s ease, filter .15s ease; position: relative; } .abl-trophy:hover { transform: scale(1.4) translateY(-2px); filter: brightness(1.15); z-index: 10; } /* Tooltip via CSS (avoids JS tooltip complexity) */ .abl-trophy::after { content: attr(title); position: absolute; bottom: 120%; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,0.85); color: #fff; font-family: var(--font-body); font-size: 11px; font-weight: 600; white-space: nowrap; padding: 4px 8px; border-radius: 4px; pointer-events: none; opacity: 0; transition: opacity .15s ease; z-index: 100; } .abl-trophy:hover::after { opacity: 1; } .abl-trophy-gold svg path:first-child, .abl-trophy-gold svg rect { filter: drop-shadow(0 0 3px rgba(255, 215, 0, 0.6)); } /* ============================================================ STANDINGS PAGE — hide the original page title when the hero banner is present (hero replaces it visually) ============================================================ */ .abl-standings-hero ~ table td.newheader, .abl-standings-hero ~ table td.newheader + td { display: none; } /* Hide the whole first table (title + hr) on standings when hero is present */ .abl-container:has(.abl-standings-hero) > table:first-of-type { display: none; } /* ============================================================ CHAMPIONSHIP TICKER CARD (shown when season is over) ============================================================ */ .abl-champ-card { display: inline-flex !important; align-items: center; gap: 10px; padding: 0 18px !important; background: linear-gradient(135deg, #1a1200 0%, #2d1f00 100%) !important; border-right: 1px solid #b8860b !important; border-left: 3px solid #FFD700 !important; flex-shrink: 0; cursor: default; } .abl-champ-trophy { font-size: 20px; line-height: 1; filter: drop-shadow(0 0 6px rgba(255,215,0,0.6)); animation: trophy-pulse 2s ease-in-out infinite; } @keyframes trophy-pulse { 0%, 100% { filter: drop-shadow(0 0 4px rgba(255,215,0,0.5)); } 50% { filter: drop-shadow(0 0 10px rgba(255,215,0,0.9)); } } .abl-champ-text { display: flex; flex-direction: column; gap: 1px; } .abl-champ-label { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; color: #b8860b; text-transform: uppercase; line-height: 1; } .abl-champ-winner { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: #FFD700; letter-spacing: 1px; line-height: 1.1; text-shadow: 0 0 8px rgba(255,215,0,0.4); } /* ============================================================ STANDINGS HERO — Champion badge (shown when CHAMPION is set) ============================================================ */ .abl-hero-champion { display: flex; align-items: center; gap: 10px; background: linear-gradient(135deg, rgba(255,215,0,0.08) 0%, rgba(255,165,0,0.05) 100%); border: 1px solid rgba(255,215,0,0.3); border-radius: 8px; padding: 10px 16px; flex-shrink: 0; } .abl-hero-champ-icon { font-size: 24px; line-height: 1; flex-shrink: 0; } .abl-hero-champ-text { display: flex; flex-direction: column; gap: 1px; } .abl-hero-champ-label { font-family: var(--font-display); font-size: 9px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #b8860b; line-height: 1; } .abl-hero-champ-team { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: #FFD700; letter-spacing: 1px; line-height: 1.1; text-shadow: 0 0 12px rgba(255,215,0,0.3); } @media (max-width: 600px) { .abl-hero-champion { padding: 8px 12px; } .abl-hero-champ-team { font-size: 16px; } } /* ============================================================ PLAYER SEARCH — inside nav drawer ============================================================ */ .abl-nav-search-section { padding-bottom: 8px; } .abl-nav-search-wrap { padding: 8px 12px; } .abl-nav-search-input { display: block; width: 100%; background: var(--abl-surface-raised); border: 1px solid var(--abl-border); border-radius: 6px; padding: 8px 11px; font-family: var(--font-body); font-size: 13px; color: var(--abl-text); transition: border-color .15s; } .abl-nav-search-input:focus { outline: none; border-color: var(--abl-orange); } .abl-nav-search-results { max-height: 280px; overflow-y: auto; } .abl-nav-search-hint { padding: 8px 14px; font-size: 11px; color: var(--abl-text-dim); } .abl-nav-search-result { display: flex; flex-direction: column; gap: 2px; padding: 9px 14px; border-bottom: 1px solid var(--abl-border); cursor: pointer; transition: background .12s; } .abl-nav-search-result:hover { background: var(--abl-surface-raised); } .abl-nsr-name { font-family: var(--font-display); font-size: 13px; font-weight: 700; color: var(--abl-text); } .abl-nsr-meta { font-size: 11px; color: var(--abl-text-dim); } /* ── Player card popup (shared by search) ─── */ .abl-player-card-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.6); z-index: 1200; } .abl-player-card-popup { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 520px; max-width: 95vw; max-height: 80vh; background: var(--abl-surface); border: 1px solid var(--abl-border); border-radius: 12px; z-index: 1300; display: flex; flex-direction: column; box-shadow: 0 20px 60px rgba(0,0,0,0.6); overflow: hidden; } .abl-player-card-close { position: absolute; top: 12px; right: 12px; background: var(--abl-surface-raised); border: 1px solid var(--abl-border); border-radius: 50%; width: 28px; height: 28px; font-size: 14px; cursor: pointer; color: var(--abl-text-dim); display: flex; align-items: center; justify-content: center; z-index: 10; } .abl-player-card-close:hover { color: var(--abl-text); } #abl-player-card-body { overflow-y: auto; flex: 1; } .abl-pc-header { padding: 20px 20px 14px; border-bottom: 1px solid var(--abl-border); background: var(--abl-surface-raised); } .abl-pc-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--abl-text); text-transform: uppercase; letter-spacing: 1px; } .abl-pc-meta { font-size: 13px; color: var(--abl-orange-bright); margin-top: 3px; font-family: var(--font-display); } .abl-pc-sub { font-size: 12px; color: var(--abl-text-dim); margin-top: 4px; } .abl-pc-loading { padding: 30px; text-align: center; color: var(--abl-text-dim); font-size: 14px; } .abl-pc-ratings { padding: 12px 20px; } .abl-pc-ratings-header { display: grid; grid-template-columns: 1fr 48px 48px; gap: 8px; padding: 6px 0; font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--abl-text-dim); border-bottom: 1px solid var(--abl-border); margin-bottom: 4px; } .abl-pc-row { display: grid; grid-template-columns: 1fr 48px 48px; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--abl-border); align-items: center; } .abl-pc-label { font-size: 12px; color: var(--abl-text-dim); } .abl-pc-val { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--abl-orange-bright); text-align: center; } .abl-pc-pot { font-size: 12px; color: var(--abl-text-dim); text-align: center; } .abl-pc-link { display: block; padding: 14px 20px; font-family: var(--font-display); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--abl-orange-bright); border-top: 1px solid var(--abl-border); text-decoration: none; text-align: center; transition: background .15s; } .abl-pc-link:hover { background: var(--abl-surface-raised); text-decoration: none; } /* Remove old floating search panel — now lives in nav drawer */ .abl-search-btn { display: none; } .abl-search-panel, .abl-search-overlay { display: none !important; } .abl-pc-section-label { font-family: var(--font-display); font-size: 10px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: var(--abl-orange-bright); padding: 8px 0 4px; }