/* ========================================================= Wolf Disc Golf Scoring App — Core Styles Mobile-first, dark UI, minimal dependencies ========================================================= */ /* ========================================================= Design tokens + theme system - Defaults live on :root (graphite) - Theme overrides are set on ========================================================= */ :root{ /* Graphite (Default Theme) */ --bg: #111314; /* deep graphite */ --card: #181b1d; /* charcoal card */ --card2: #1f2326; /* lifted card */ --surface: #16191b; /* controls/buttons surface */ --text: #f1f3f5; /* soft white */ --muted: #a8b0b7; /* cool gray */ --border: #2b3136; /* graphite edge */ --primary: #4dabf7; /* clean electric blue */ --primary-rgb: 77 171 247; --danger: #ff6b6b; /* modern soft red */ --danger-rgb: 255 107 107; /* Sizing */ --topbarCtlH: 36px; /* top bar control height (theme + menu buttons) */ --navBtnW: 88px; /* footer/nav button width (single source of truth) */ --setupPickBtnH: 110px; /* segmented picker button height (setup screen) */ } /* ------------------------- Theme overrides ------------------------- */ /* Default graphite theme */ html[data-theme="graphite"]{ --bg:#111314; --card:#181b1d; --card2:#1f2326; --surface:#16191b; --text:#f1f3f5; --muted:#a8b0b7; --border:#2b3136; --primary:#4dabf7; --primary-rgb:77 171 247; --danger:#ff6b6b; --danger-rgb:255 107 107; } /* Coffee (warm browns + cream) */ html[data-theme="coffee"]{ --bg:#1c1512; --card:#2a1f1a; --card2:#33261f; --surface:#241b16; --text:#f5e9dd; --muted:#cbb8a6; --border:#46352c; --primary:#c48a4a; --primary-rgb:196 138 74; --danger:#b4544a; --danger-rgb:180 84 74; } /* Forest (deep green + bark) */ html[data-theme="forest"]{ --bg:#0f1711; --card:#162218; --card2:#1c2b1f; --surface:#132016; --text:#e9f2e6; --muted:#b9c8b7; --border:#2b3a2f; --primary:#6fb07a; /* fern */ --primary-rgb:111 176 122; --danger:#c56b5b; /* clay */ --danger-rgb:197 107 91; } /* Midnight (your original vibe) */ html[data-theme="midnight"]{ --bg:#0b1020; --card:#121a33; --card2:#0f1730; --surface:#0d1430; --text:#e5e7eb; --muted:#a7b0c0; --border:#263255; --primary:#38bdf8; --primary-rgb:56 189 248; --danger:#fb7185; --danger-rgb:251 113 133; } /* Summer time (light sand + ocean pop) */ html[data-theme="summer"]{ --bg:#fffaf2; --card:#ffffff; --card2:#fff1dc; --surface:#ffffff; --text:#2a2a2a; --muted:#7d6e5c; --border:#f0d9b5; --primary:#ff9f1c; /* sunset orange */ --primary-rgb:255 159 28; --danger:#e63946; /* coral red */ --danger-rgb:230 57 70; } /* Rainbow (Bright. Clean. Modern.) */ html[data-theme="rainbow"]{ --bg:#f7f7ff; --card:#ffffff; --card2:#f0f1ff; --surface:#ffffff; --text:#1f1f2e; --muted:#6c6c8a; --border:#d8d9ff; --primary:#7c3aed; /* bold violet */ --primary-rgb:124 58 237; --danger:#ef4444; /* bright red */ --danger-rgb:239 68 68; } /* Retro arcade */ html[data-theme="retro"]{ --bg:#070805; /* near-black with a warm green-brown tint */ --card:#0f1109; /* dark cabinet panel */ --card2:#14170b; /* slightly lifted panel */ --surface:#0b0d07; /* controls/buttons surface */ --text:#ffe7b5; /* cream “phosphor glow” */ --muted:#ffb762; /* soft orange for secondary text */ --border:#2a2a16; /* dark olive trim */ --primary:#8c7318; /* centipede gold */ --primary-rgb:140 115 24; --danger:#f73910; /* hot arcade red */ --danger-rgb:247 57 16; } /* Cotton candy (Bright pastel) */ html[data-theme="cottoncandy"]{ --bg:#fff5fb; --card:#ffffff; --card2:#ffe9f7; --surface:#ffffff; --text:#3a1f2d; --muted:#a67aa2; --border:#f5c2e7; --primary:#ff6ec7; /* pink */ --primary-rgb:255 110 199; --danger:#6ecbff; /* baby blue */ --danger-rgb:110 203 255; } /* Crimson (wine + gold) */ html[data-theme="crimson"]{ --bg:#660000; --card:#8c001a; --card2:#990033; --surface:#5f021f; --text:#ffeef0; --muted:#dbbcc0; --border:#59353c; --primary:#ff9000; /* deep saffron */ --primary-rgb:255 144 0; --danger:#ffe800; /* bright yellow */ --danger-rgb:255 232 0; } /* Teal (inky teal + mint) */ html[data-theme="teal"]{ --bg:#071316; --card:#0c1f23; --card2:#0f262b; --surface:#0a1a1d; --text:#e6fbfb; --muted:#a8d2d2; --border:#184047; --primary:#2dd4bf; /* teal */ --primary-rgb:45 212 191; --danger:#fb7185; /* readable warm danger */ --danger-rgb:251 113 133; } /* ========================================================= Base / Reset ========================================================= */ *{ box-sizing:border-box; } html,body{ margin:0; padding:0; background:var(--bg); color:var(--text); font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial; } a{ color:var(--primary); } /* Welcome copy on load screen */ .welcome{ margin:18px; padding:0; font-size:16px; color:var(--text); } .welcome p{ opacity:0.9; margin:12px 0 0; } /* ========================================================= Layout helpers ========================================================= */ .container{ max-width:860px; margin:0 auto; padding:0 8px; } .screen{ padding:10px 0; } .hidden{ display:none!important; } .stack{ display:flex; flex-direction:column; gap:8px; } .row{ display:flex; gap:8px; } .row--between{ justify-content:space-between; } .row--center{ align-items:center; } .center{ text-align:center; } /* ========================================================= Surface primitives ========================================================= */ .card{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:8px; box-shadow: 0 8px 16px rgba(0,0,0,.25); } .card--inset{ background:var(--card2); margin-top:8px; } /* ========================================================= Setup screen — stacking order (avoid shadows covering controls) ========================================================= */ /* Create a stacking context for the setup card */ #screenSetup > .card{ position: relative; z-index: 0; } /* Lowest: form grid (players/holes pickers) */ #screenSetup .formGrid{ position: relative; z-index: 1; } /* Middle: players/options inset cards */ #screenSetup .card--inset{ position: relative; z-index: 2; } /* Top: footer controls (Back / Start Game) */ #screenSetup .setupFooter{ position: relative; z-index: 3; } /* ========================================================= Type helpers ========================================================= */ h1{ margin:0 0 6px; font-size:20px; text-align:center; } h2{ margin:0 0 6px 8px; font-size:18px; } .h1like{ font-size:20px; font-weight:800; } .small{ font-size:12px; } .muted{ color:var(--muted); } .danger{ color:var(--danger); } .hint{ color:var(--muted); font-size:12px; margin:6px; } /* ========================================================= Top bar (app header) ========================================================= */ .topbar{ display:flex; justify-content:space-between; align-items:center; padding:8px 14px; border-bottom:1px solid var(--border); position:sticky; top:0; background:var(--bg); backdrop-filter: blur(10px); z-index: 100; /* must be above overlay */ } .brand__title{ font-size:22px; font-weight:800; line-height:1.05; /* tighter to save vertical space */ } .brand__subtitle{ font-size:12px; color:var(--muted); margin-top:2px; } .topbar__actions{ display:flex; align-items:center; gap:8px; } /* Theme picker */ .themePicker{ display:flex; align-items:center; gap:8px; padding:0; margin:0; } /* Select styled like a button (but remains a native select for platform UX) */ .btn.themeSelect{ appearance:none; -webkit-appearance:none; text-align:center; text-align-last:center; height: var(--topbarCtlH); min-height: var(--topbarCtlH); padding:0 14px; /* keep modest so longer names fit */ line-height:1.2; /* allow platform baseline */ box-sizing:border-box; } @supports (-webkit-touch-callout: none) { /* iOS Safari: breathing room for descenders */ .btn.themeSelect{ height: calc(var(--topbarCtlH) + 2px); min-height: calc(var(--topbarCtlH) + 2px); padding-bottom: 2px; } } .btn.themeSelect:focus{ outline:none; border-color: rgb(var(--primary-rgb) / 0.8); box-shadow: 0 0 0 2px rgb(var(--primary-rgb) / 0.18) inset; } /* Hamburger menu */ .topbarMenu{ position:relative; z-index:60; /* above overlay and menuPanel */ } .topbarMenu__btn{ display:inline-flex; align-items:center; justify-content:center; height: var(--topbarCtlH); min-height: var(--topbarCtlH); padding:0 12px; /* remove vertical padding to prevent clipping */ line-height:1; box-sizing:border-box; } .topbarMenu__icon{ display:block; } .menuPanel{ position:absolute; right:0; top:calc(100% + 8px); min-width:220px; max-width:80vw; padding:10px; border:1px solid var(--border); border-radius:14px; background:var(--card); z-index:110; -webkit-tap-highlight-color:transparent; } .menuPanel__section{ display:flex; flex-direction:column; gap:8px; } .menuPanel__section + .menuPanel__section{ margin-top:10px; padding-top:10px; border-top:1px solid var(--border); } .menuPanel__item{ width:100%; height: var(--topbarCtlH); min-height: var(--topbarCtlH); display:flex; align-items:center; justify-content:center; padding:0 12px; line-height:1; box-sizing:border-box; } .menuOverlay{ position:fixed; inset:0; background:rgba(0,0,0,0.35); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index:90; /* below menuPanel */ opacity:0; transition: opacity .15s ease; } .menuOverlay.open{ opacity:1; } /* ========================================================= Buttons ========================================================= */ .btn{ appearance:none; border:1px solid var(--border); background:var(--surface); color:var(--text); padding:10px 12px; border-radius:12px; font-size:15px; font-weight:500; cursor:pointer; } .btn:disabled{ opacity:.45; cursor:not-allowed; } .btn--ghost{ background:transparent; } .btn--primary{ border-color:rgb(var(--primary-rgb) / 0.6); background:rgb(var(--primary-rgb) / 0.12); } /* Setup override: make Start Game solid */ #screenSetup .setupFooter #btnStartGame.btn--primary{ background: var(--surface); } .btn--danger{ border-color:rgb(var(--danger-rgb) / 0.6); background:rgb(var(--danger-rgb) / 0.12); } /* Start screen only: bigger buttons without affecting the rest of the app */ .startActions .btn{ padding:16px 14px; font-size:16px; border-radius:14px; } /* ========================================================= Banners / one-offs ========================================================= */ /* PWA update banner (shows when a new SW is waiting) */ .updateBanner{ position: sticky; top: 64px; /* under topbar */ z-index: 30; display:flex; justify-content:space-between; align-items:center; gap:8px; margin: 0 auto; max-width: 860px; padding: 10px 12px; background: var(--card); border: 1px solid var(--border); border-radius: 12px; } /* Donation block (load screen) */ .donate-block{ margin:32px 0 2px 0; text-align:center; padding:16px 16px 24px; border:1px solid var(--border); border-radius:16px; background: rgb(var(--primary-rgb) / 0.1); } /* HTML uses */ .donate-text{ opacity:0.8; margin:0 0 10px 0; } .donate-button{ display:inline-block; padding:10px 18px; background-color: rgb(var(--primary-rgb) / 0.8); color: var(--text); border-radius: 8px; text-decoration:none; font-weight:600; transition: transform 0.1s ease, opacity 0.2s ease; } .donate-button:hover{ opacity:0.9; transform: translateY(-1px); } .donate-button:active{ transform: translateY(0); } /* ========================================================= Setup screen ========================================================= */ /* Setup: Players + Holes side-by-side (overrides base formGrid) */ #screenSetup .formGrid{ display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap:8px; align-items:start; } .segmented{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; } .segBtn{ border:1px solid var(--border); background:var(--surface); color:var(--text); padding:12px 10px; border-radius:12px; font-weight:900; cursor:pointer; text-align:center; } .segBtn--active{ border-color: rgb(var(--primary-rgb) / 0.95); box-shadow: 0 0 0 2px rgb(var(--primary-rgb) / 0.18) inset; background: rgb(var(--primary-rgb) / 0.12); } .segBtn--disabled{ opacity:.5; cursor:not-allowed; } /* Setup segmented pickers: taller + balanced */ #playerCountBtns .segBtn{ min-height: var(--setupPickBtnH); } #holeCountBtns .segBtn{ min-height: calc((var(--setupPickBtnH) - 8px) / 2); } #playerCountBtns .segBtn, #holeCountBtns .segBtn{ display:flex; align-items:center; justify-content:center; } /* ========================================================= Forms ========================================================= */ .formGrid{ display:grid; grid-template-columns:1fr; gap:8px; } @media (min-width:700px){ .formGrid{ grid-template-columns:1fr 1fr; } } .field{ margin-bottom:10px; } .field label{ display:block; font-size:12px; color:var(--muted); margin:0 0 6px 6px; } .field input, .field select{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--surface); color:var(--text); } /* Setup: player input boxes taller / easier to tap */ .playerNameInput{ width:100%; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background: var(--card); color:var(--text); font-size:14px; } .setupPlayersHeader{ margin-bottom:10px; } /* Footer spacing so buttons don't crowd the Options card */ .setupFooter{ margin:8px 0 4px; } .gameFooter{ margin:8px 0 4px; } /* ========================================================= Checkbox rows (custom styled) ========================================================= */ .check{ padding:6px 10px 6px 4px; display:flex; gap:10px; align-items:center; cursor:pointer; user-select:none; position:relative; } .check input{ position:absolute; opacity:0; pointer-events:none; } .check span{ position:relative; padding-left:28px; } /* box */ .check span::before{ content:""; position:absolute; left:0; top:50%; transform: translateY(-50%); width:18px; height:18px; border:2px solid var(--border); border-radius:6px; background: var(--card); transition: all 0.15s ease; } /* check mark */ .check span::after{ content:""; position:absolute; left:5px; top:45%; transform: translateY(-50%) rotate(-45deg) scale(0); width:11px; height:5px; border:2px solid var(--text); border-top:none; border-right:none; transition: transform 0.25s ease; } .check input[type="checkbox"]:checked + span::after{ transform: translateY(-50%) rotate(-45deg) scale(1); } .check:hover span::before{ border-color: var(--primary); } /* ========================================================= Game screen: nav / footer + layering ========================================================= */ .gameFooterBar{ display:flex; align-items:center; gap:8px; } /* Default mid block behavior (single-row layout) */ .gameFooterBar .footerMid{ flex:1; text-align:center; line-height:1.1; min-width:0; } /* 2-row footer layout */ .gameFooterBar.gameFooter--2row{ flex-direction:column; align-items:stretch; gap:8px; } .gameFooterBar.gameFooter--2row .gameFooter__nav{ display:grid; grid-template-columns: var(--navBtnW) 1fr var(--navBtnW); gap:8px; align-items:center; } .gameFooterBar.gameFooter--2row .gameFooter__actions{ display:grid; grid-template-columns: 1fr 1fr; /* Scoreboard / Save */ gap:8px; } .gameFooterBar.gameFooter--2row .gameFooter__nav .btn, .gameFooterBar.gameFooter--2row .gameFooter__actions .btn{ width:100%; } /* Keep hole title from wrapping badly */ .gameFooterBar .holeFooterTitle{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Sticky hole bar */ .stickyHoleBar{ position:sticky; top:60px; /* sits below the topbar */ z-index:20; /* above inset cards/shadows */ background:var(--card); padding-bottom:0; } .stickyHoleBar #btnPrevHole, .stickyHoleBar #btnNextHole{ width: var(--navBtnW); flex: 0 0 var(--navBtnW); } /* Predictable stacking inside Game card */ #screenGame .card{ position: relative; isolation: isolate; } /* Inset cards sit below nav layers */ #screenGame .card--inset{ position: relative; z-index: 1; } /* Bottom nav above inset shadows */ #screenGame .gameFooterBar{ position: relative; z-index: 20; background: transparent; } /* Keep the buttons above */ #screenGame .gameFooterBar .btn, #screenGame .stickyHoleBar .btn{ position: relative; z-index: 1; } /* Shadow “mask” sits ONLY inside the button shape (preserves border) */ #screenGame .gameFooterBar .btn::before, #screenGame .stickyHoleBar .btn::before{ content:""; position:absolute; inset:0; border-radius: inherit; background: var(--card); z-index:-1; pointer-events:none; } /* ========================================================= Lists + tags ========================================================= */ .orderList{ margin:0; padding-left:28px; } /* Reduced vertical padding to minimize scrolling */ .orderList li{ min-width:180px; padding:3px 0; } .tag{ display:inline-block; margin-left:12px; font-size:14px; color:var(--card2); /* appears as cutout */ background:var(--primary); padding:0 8px; border-radius:2px; font-weight:900; } .tag--piggie{ background:#ffb3c7; color:#2b3136; } .tag--wolfpack{ background:var(--primary); } /* ========================================================= Pills (partner selection + result selection) ========================================================= */ .pillGrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; } @media (min-width:520px){ .pillGrid{ grid-template-columns:repeat(3, minmax(0,1fr)); } } .pill{ border:1px solid var(--border); background:var(--surface); color:var(--text); padding:10px; border-radius:12px; font-weight:800; cursor:pointer; text-align:center; } .pill--active{ border-color:rgb(var(--primary-rgb) / 0.9); background:rgb(var(--primary-rgb) / 0.14); } /* ========================================================= Tables (scoreboard) ========================================================= */ .table{ width:100%; border-collapse:collapse; font-size:14px; } .table th, .table td{ border-bottom:1px solid var(--border); padding:10px 8px; text-align:left; } .table th{ color:var(--muted); font-size:12px; font-weight:800; } /* Hole mini grid (scoreboard per-hole deltas) */ .holeMini{ margin-top:8px; display:grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); gap:6px 10px; } .holeMini__name{ font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .holeMini__delta{ font-size:13px; font-weight:800; } .holeMini__delta.isPlus{ color: var(--primary); } .holeMini__delta.isMinus{ color: var(--danger); } /* ========================================================= Holes list (edit hole from scoreboard) ========================================================= */ .holesList{ display:flex; flex-direction:column; gap:8px; } .holeRow{ display:flex; justify-content:space-between; align-items:center; padding:10px; border:1px solid var(--border); border-radius:12px; background:var(--surface); cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; transition:transform .08s ease; } .holeRow:active{ transform: translateY(1px); } /* ========================================================= Modal (Rules) ========================================================= */ .modal{ border:none; border-radius:16px; padding:0; max-width:780px; width:92%; background:transparent; } .modal::backdrop{ background:rgba(0,0,0,.6); } .modal__inner{ background:var(--card); border:1px solid var(--border); border-radius:16px; padding:12px; max-height:85vh; overflow-y:auto; } .rules ul{ margin:10px 0 0 0; line-height:1.2; } .rules li{ margin:0 12px 6px -12px; font-weight:300; } .rules b{ font-weight:700; } /* Force theme text color inside dialog across browsers */ .rules, .rules *{ color: var(--text); }