/* base.css - shared foundation for all pages (scout / overlay / live). Page-specific styling lives in scout.css / overlay.css / live.css. */ /* ---- design tokens ---- */ :root { --c-bg: #0f1b28; --c-surface: #16283c; --c-surface-alt: #1e3450; --c-border: #2c4763; --c-text: #eef3f8; --c-text-dim: #9db2c7; --c-primary: #f6b93b; /* accent: volleyball yellow */ --c-primary-ink: #14324f; --c-home: #3d9be9; --c-away: #e9573d; --c-ok: #38c172; --c-warn: #f6b93b; --c-err: #e9573d; --radius: 8px; --tap-min: 48px; /* minimum touch target (contract section 8.5) */ /* v1.4 player-position palette (five roles, readable on the dark UI); shared by scout.css badges/options and touch.css grid/bench marking */ --pos-s: #4da3ff; /* S 舉球 blue */ --pos-mb: #3ec46d; /* MB 欄中 green */ --pos-oh: #ff7043; /* OH 大砲 red-orange */ --pos-op: #b388ff; /* OP 副位 purple */ --pos-l: #f6c445; /* L 自由 yellow */ --font-ui: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, -apple-system, sans-serif; --font-mono: "Cascadia Mono", "Consolas", ui-monospace, monospace; } /* ---- v3.18 (契約 §26) 主題令牌 ---------------------------------------- 深色是預設，值與 v3.17.1 逐像素相同——這一層只是把原本寫死在 scout.css / touch.css / sheet.css / entry.css 的 344 處顏色搬到令牌上。淺色主題只重寫 令牌值，不改任何一條版面規則。命名：--c-* 是語意令牌（可跨主題解讀）， --p-- 是調色盤令牌（role＝面 surf／線 line／字 ink／色相 yel org red grn blu pur tea／遮罩 scrim），role 內依深色亮度排序。 套用方式見 js/core/theme.js 與三個 的 inline script。 */ :root { /* NOTE: no `color-scheme: dark` here on purpose. Declaring it would repaint every NATIVE control (radio, checkbox, select, scrollbar) in the UA's dark scheme — a visible change to v3.17.1, and §26-3 promises the dark theme is pixel-identical. The light theme declares `color-scheme: light` below, which is where it actually matters (native controls must not stay dark on a near-white page). */ /* 語意令牌 */ --c-action-ink: #f2d488; --c-badge-yellow: #ffd75a; --c-focus-ring: #f6b93b; --c-ink-on-solid: #e8edf2; --c-ink-on-yellow: #10151b; --c-menu-bg: #1b212b; --c-note-info: #ffd75a; --c-note-warn: #ffd75a; --c-opacity-consec: 0.45; --c-opacity-dim: 0.35; --c-opacity-disabled: 0.45; --c-opacity-locked: 0.4; --c-page-bg: #10151b; --c-pending: #ffd75a; --c-pending-sync: #f6b93b; --c-primary-text: #f6b93b; --c-select-bg: #2f6fd6; --c-serve-bg: transparent; --c-serve-dot: #ffd75a; --c-serve-dot-shadow: none; --c-serve-ink: #ffd75a; --c-serve-pad: 0; --c-toast-bg: #263243; --c-warn-text: #f6b93b; --pos-l-text: #f6c445; --pos-mb-text: #3ec46d; --pos-oh-text: #ff7043; --pos-op-text: #b388ff; --pos-s-text: #4da3ff; /* 面（背景／卡片／格子） */ --c-border-soft: #2c3441; --c-cell-bg: #23405a; --c-divider: #222c37; --c-ink-on-accent: #1b2431; --c-panel-bg: #1b212b; --c-surface-raised: #171e27; --c-surface-sunken: #16202b; --p-surf-01: #7a6236; --p-surf-02: #3d5470; --p-surf-03: #2c5578; --p-surf-04: #254f5b; --p-surf-05: #23514a; --p-surf-06: #2b4a6b; --p-surf-07: #3a4756; --p-surf-08: #33465c; --p-surf-09: #35455c; --p-surf-10: #3c4359; --p-surf-11: #3a4354; --p-surf-12: #4a4020; --p-surf-13: #2d4160; --p-surf-14: #33414f; --p-surf-15: #33404e; --p-surf-16: #4a3b23; --p-surf-17: #303c4b; --p-surf-18: #2c3a4e; --p-surf-19: #45324e; --p-surf-20: #2a3644; --p-surf-21: #3a3320; --p-surf-22: #4a2b2b; --p-surf-23: #24344a; --p-surf-24: #263243; --p-surf-25: #3a2f18; --p-surf-26: #33301f; --p-surf-27: #22332a; --p-surf-28: #26303c; --p-surf-29: #3a2b18; --p-surf-30: #1e2c3a; --p-surf-31: #222a36; --p-surf-32: #202a38; --p-surf-33: #1f2a37; --p-surf-34: #16283a; --p-surf-35: #182633; --p-surf-36: #1d2430; --p-surf-37: #3a1a16; --p-surf-38: #1a2430; --p-surf-39: #1b2330; --p-surf-40: #1a1a1a; --p-surf-41: #14181f; --p-surf-42: #101620; --p-surf-44: #0d1218; --p-surf-45: #1a0d0a; /* 線（框線／分隔） */ --p-line-01: #77839a; --p-line-02: #4d7a5a; --p-line-03: #55708f; --p-line-04: #5a6b82; --p-line-05: #77578a; --p-line-06: #566175; --p-line-07: #55606d; --p-line-08: #7a3b3b; /* 字（文字／圖示） */ --p-ink-01: #fff; --p-ink-02: #ffffff; --p-ink-03: #e8edf2; --p-ink-04: #e8ecf2; --p-ink-05: #cfd9e4; --p-ink-06: #c8d2e0; --p-ink-07: #c3cfdd; --p-ink-08: #b9c4d0; --p-ink-09: #b9c4cf; --p-ink-10: #aebdd0; --p-ink-11: #9fb4d0; --p-ink-12: #9fb2c7; --p-ink-13: #8fa1b8; --p-ink-14: #8d9aab; --p-ink-15: #8a97a5; --p-ink-16: #7d8ea3; /* 遮罩／陰影 */ --c-overlay-backdrop: rgba(0, 0, 0, 0.55); --c-overlay-backdrop-strong: rgba(8, 12, 17, 0.72); --c-press-veil: rgba(0, 0, 0, 0.14); --c-shadow: rgba(0, 0, 0, 0.5); --c-shadow-soft: rgba(0, 0, 0, 0.45); --c-shadow-strong: rgba(0, 0, 0, 0.6); /* 藍 */ --p-blu-01: #f5f8fc; --p-blu-02: #eef3f8; --p-blu-03: #cbd8e6; --p-blu-04: #9fc2e8; --p-blu-05: #7fc4ff; --p-blu-06: #9db8d4; --p-blu-07: #7fb3e0; --p-blu-08: #5aa9ff; --p-blu-09: #6ea3f0; --p-blu-10: rgba(110, 163, 240, 0); --p-blu-11: rgba(110, 163, 240, 0.55); --p-blu-12: #2f7fd6; --p-blu-13: #4d7fb0; --p-blu-14: #3d7ec2; --p-blu-15: #2d74c4; --p-blu-17: #45749e; --p-blu-18: #276fc0; --p-blu-19: #3d648a; --p-blu-20: #1f5fa8; --p-blu-21: #2f5a86; /* 綠 */ --p-grn-01: #7ee08c; --p-grn-02: #6fdc9b; --p-grn-03: #2fd274; --p-grn-04: rgba(47, 210, 116, 0.16); --p-grn-05: #3fa46a; --p-grn-06: #2f9e63; --p-grn-07: rgba(47, 158, 99, 0.22); /* 琥珀／橘 */ --p-org-01: #ffe9ad; --p-org-02: #f2d488; --p-org-03: rgba(246, 185, 59, 0.2); --p-org-04: rgba(246, 185, 59, 0.12); --p-org-05: rgba(246, 185, 59, 0.25); --p-org-06: rgba(246, 185, 59, 0.22); --p-org-07: rgba(246, 185, 59, 0.4); --p-org-08: rgba(246, 185, 59, 0.14); --p-org-09: #ff9d5c; --p-org-10: #d9a441; --p-org-11: #d6a52f; --p-org-12: rgba(214, 165, 47, 0.5); --p-org-13: rgba(214, 165, 47, 0); --p-org-14: rgba(214, 165, 47, 0.55); --p-org-15: #d98f6a; --p-org-16: #b58a2c; --p-org-17: #8a6a2f; --p-org-18: #33290f; --p-org-19: #1a1408; /* 紅 */ --p-red-01: #ffb3aa; --p-red-02: #e9a08f; --p-red-03: #e6a184; --p-red-04: #ff8f8f; --p-red-05: #ff8a80; --p-red-06: #ff8a70; --p-red-07: #ff7043; --p-red-08: #ff6a4d; --p-red-09: #ff5f5f; --p-red-10: rgba(255, 95, 95, 0.16); --p-red-11: #cb6f6f; --p-red-12: #e9573d; --p-red-13: rgba(233, 87, 61, 0.15); --p-red-14: rgba(233, 87, 61, 0.8); --p-red-15: #c05252; --p-red-16: rgba(192, 82, 82, 0.22); --p-red-17: #d63b2f; --p-red-18: #b5493c; --p-red-19: #b23; --p-red-20: #a83a3a; --p-red-21: #a63c2a; --p-red-22: #8f2f2f; --p-red-23: #7a2b22; --p-red-24: #7a2626; /* 青 */ --p-tea-01: #3a7a6e; /* 黃 */ --p-yel-01: #ffe89a; --p-yel-02: #ffe490; --p-yel-03: #ffd75a; --p-yel-04: rgba(255, 215, 90, 0.08); --p-yel-05: #f2c200; --p-yel-06: #c9b26a; } /* 淺色：背景近白、表面淺灰、文字深色；主色改深琥珀（§26-4），所有文字色 與其底色對比 >= 4.5（ui_smoke 逐一量測）。 */ html[data-theme="light"] { color-scheme: light; --c-bg: #f4f6f9; --c-surface: #ffffff; --c-surface-alt: #e9eef4; --c-border: #c3ceda; --c-text: #16202c; --c-text-dim: #4a5a6b; /* v3.18.1 (契約 §27-1/§27-2): 主色在淺色只當底／框／高亮，字色走 --c-primary-text。底色回到鮮明的排球黃，墨色改深藍近黑（9.6:1）。 */ --c-primary: #f8cc55; --c-primary-ink: #14202c; --c-home: #1358a8; --c-away: #b0341c; --c-ok: #145f36; /* deep enough for the ✓ on the amber serve cell */ --c-warn: #8a5a00; --c-err: #b3261e; /* v3.18.1 (契約 §27-1): 徽章＝亮色底＋深墨（--p-surf-40 在淺色改回 #1a1a1a）， 色相與深色主題一致，不再壓暗成橄欖／芥末。當「字」用的是 --pos-*-text。 */ --pos-s: #4da3ff; --pos-mb: #3ec46d; --pos-oh: #ff7043; --pos-op: #b388ff; --pos-l: #f8cc55; /* 語意令牌 */ --c-action-ink: #14324f; --c-badge-yellow: #f5c94a; --c-focus-ring: #8a6100; --c-ink-on-solid: #ffffff; --c-ink-on-yellow: #10151b; --c-menu-bg: #eef1f6; --c-note-info: #14324f; --c-note-warn: #b3400d; --c-opacity-consec: 0.74; --c-opacity-dim: 0.6; --c-opacity-disabled: 0.62; --c-opacity-locked: 0.72; --c-page-bg: #f4f6f9; --c-pending: #15702f; --c-pending-sync: #15702f; --c-primary-text: #14324f; --c-select-bg: #a9cdf7; --c-serve-bg: #22a45d; --c-serve-dot: #12722f; --c-serve-dot-shadow: 0 0 1px rgba(15, 32, 20, 0.5); --c-serve-ink: #14202c; --c-serve-pad: 0 4px; --c-toast-bg: #fbf1d8; --c-warn-text: #a53a0b; --pos-l-text: #7a5a00; --pos-mb-text: #1d6b3a; --pos-oh-text: #a33d10; --pos-op-text: #5b3fbf; --pos-s-text: #1258a8; /* 面（背景／卡片／格子） */ --c-border-soft: #dee2e8; --c-cell-bg: #eaeff5; --c-divider: #e0e5ec; --c-ink-on-accent: #16202c; --c-panel-bg: #e3e7ed; --c-surface-raised: #e3e8ef; --c-surface-sunken: #e2e8ef; --p-surf-01: #e5ddd0; --p-surf-02: #d1dae5; --p-surf-03: #d2dde6; --p-surf-04: #d8e5e9; --p-surf-05: #daeae8; --p-surf-06: #d4dde7; --p-surf-07: #d8dee5; --p-surf-08: #d6dee8; --p-surf-09: #d6dde7; --p-surf-10: #d7dae4; --p-surf-11: #d9dde5; --p-surf-12: #ebe7dc; --p-surf-13: #d6dde8; --p-surf-14: #dae0e7; --p-surf-15: #dae0e7; --p-surf-16: #ebe5db; --p-surf-17: #dbe0e8; --p-surf-18: #d9e0ea; --p-surf-19: #e3dae7; --p-surf-20: #dce2e9; --p-surf-21: #ede9de; --p-surf-22: #eadada; --p-surf-23: #dbe2eb; --p-surf-24: #dce2eb; --p-surf-25: #ede9e0; --p-surf-26: #ecebe0; --p-surf-27: #e1ebe6; --p-surf-28: #dee4ea; --p-surf-29: #ede7e0; --p-surf-30: #dfe6ed; --p-surf-31: #e0e5eb; --p-surf-32: #dfe5ed; --p-surf-33: #dfe5ed; --p-surf-34: #e0e7ed; --p-surf-35: #e1e8ee; --p-surf-36: #e1e6ed; --p-surf-37: #ede1e0; --p-surf-38: #e1e7ee; --p-surf-39: #1b2330; --p-surf-40: #1a1a1a; --p-surf-41: #e6e9ef; --p-surf-42: #101620; --p-surf-44: #e7ecf1; --p-surf-45: #f2e9e7; /* 線（框線／分隔） */ --p-line-01: #bbc1cc; --p-line-02: #5a6272; --p-line-03: #c3cedb; --p-line-04: #c9d0d9; --p-line-05: #d2c5da; --p-line-06: #cfd3dc; --p-line-07: #5c6675; --p-line-08: #e6d0d0; /* 字（文字／圖示） */ --p-ink-01: #ffffff; --p-ink-02: #ffffff; --p-ink-03: #172028; --p-ink-04: #171e28; --p-ink-05: #1f2b38; --p-ink-06: #222d3c; --p-ink-07: #24303f; --p-ink-08: #2e3844; --p-ink-09: #2e3944; --p-ink-10: #2c3a4c; --p-ink-11: #2c3e55; --p-ink-12: #324355; --p-ink-13: #3c4b5e; --p-ink-14: #45505e; --p-ink-15: #4a5460; --p-ink-16: #4a5868; /* 遮罩／陰影 */ --c-overlay-backdrop: rgba(15, 23, 33, 0.45); --c-overlay-backdrop-strong: rgba(15, 23, 33, 0.55); --c-press-veil: rgba(24, 38, 56, 0.10); --c-shadow: rgba(24, 38, 56, 0.18); --c-shadow-soft: rgba(24, 38, 56, 0.16); --c-shadow-strong: rgba(24, 38, 56, 0.22); /* 藍 */ --p-blu-01: #274e81; --p-blu-02: #315477; --p-blu-03: #375372; --p-blu-04: #215288; --p-blu-05: #005ba8; --p-blu-06: #335475; --p-blu-07: #215887; --p-blu-08: #0051a8; --p-blu-09: #104899; --p-blu-10: rgba(16, 72, 153, 0); --p-blu-11: rgba(16, 72, 153, 0.55); --p-blu-12: #1c528d; --p-blu-13: #335475; --p-blu-14: #285380; --p-blu-15: #1f5189; --p-blu-17: #335675; --p-blu-18: #1c518c; --p-blu-19: #345575; --p-blu-20: #1a508e; --p-blu-21: #2c547d; /* 綠 */ --p-grn-01: #196724; --p-grn-02: #196738; --p-grn-03: #176939; --p-grn-04: rgba(23, 105, 57, 0.16); --p-grn-05: #235c3c; --p-grn-06: #1d623e; --p-grn-07: rgba(29, 98, 62, 0.22); /* 琥珀／橘 */ --p-org-01: #8a6500; --p-org-02: #7c5d0e; --p-org-03: rgba(132, 91, 6, 0.2); --p-org-04: rgba(132, 91, 6, 0.12); --p-org-05: rgba(132, 91, 6, 0.25); --p-org-06: rgba(132, 91, 6, 0.22); --p-org-07: rgba(132, 91, 6, 0.4); --p-org-08: rgba(132, 91, 6, 0.14); --p-org-09: #8a3700; --p-org-10: #735317; --p-org-11: #735817; --p-org-12: rgba(115, 88, 23, 0.5); --p-org-13: rgba(115, 88, 23, 0); --p-org-14: rgba(115, 88, 23, 0.55); --p-org-15: #6e371c; --p-org-16: #6f541b; --p-org-17: #674f23; --p-org-18: #33290f; --p-org-19: #1a1408; /* 紅 */ --p-red-01: #b81300; --p-red-02: #99351e; --p-red-03: #99431f; --p-red-04: #b80000; --p-red-05: #b80e00; --p-red-06: #b82100; --p-red-07: #b82c00; --p-red-08: #b81e00; --p-red-09: #b80000; --p-red-10: rgba(184, 0, 0, 0.16); --p-red-11: #873131; --p-red-12: #a52913; --p-red-13: rgba(165, 41, 19, 0.15); --p-red-14: rgba(165, 41, 19, 0.8); --p-red-15: #873131; --p-red-16: rgba(135, 49, 49, 0.22); --p-red-17: #99271e; --p-red-18: #8a382e; --p-red-19: #9b1c2a; --p-red-20: #882f2f; --p-red-21: #933525; --p-red-22: #8a2d2d; --p-red-23: #7a2b22; --p-red-24: #7a2626; /* 青 */ --p-tea-01: #29564e; /* 黃 */ --p-yel-01: #785d00; --p-yel-02: #785b00; --p-yel-03: #785b00; --p-yel-04: rgba(120, 91, 0, 0.08); --p-yel-05: #786000; --p-yel-06: #584a20; } /* ---- reset ---- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-ui); font-size: 16px; line-height: 1.5; color: var(--c-text); background: var(--c-bg); min-height: 100vh; -webkit-font-smoothing: antialiased; } img, svg { display: block; max-width: 100%; } /* ---- form controls / buttons ---- */ button, input, select, textarea { font: inherit; color: inherit; } button { min-height: var(--tap-min); min-width: var(--tap-min); padding: 0.5rem 1rem; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface-alt); cursor: pointer; user-select: none; touch-action: manipulation; } button:active { filter: brightness(1.2); } button:disabled { opacity: var(--c-opacity-disabled); cursor: not-allowed; } button.primary { background: var(--c-primary); border-color: var(--c-primary); color: var(--c-primary-ink); font-weight: 700; } input, select, textarea { min-height: var(--tap-min); padding: 0.4rem 0.7rem; border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); } input:focus, select:focus, textarea:focus, button:focus-visible { outline: 2px solid var(--c-focus-ring); outline-offset: 1px; } /* ---- generic layout helpers ---- */ .row { display: flex; align-items: center; gap: 0.5rem; } .col { display: flex; flex-direction: column; gap: 0.5rem; } .grow { flex: 1 1 auto; } .hidden { display: none !important; } /* The hidden ATTRIBUTE must beat any class display rule (author rules override the UA [hidden]{display:none} — e.g. .btn's inline-block kept hidden buttons visible, v1.4 儲存位置變更). */ [hidden] { display: none !important; } .card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 0.75rem 1rem; } .muted { color: var(--c-text-dim); } .mono { font-family: var(--font-mono); } .team-home { color: var(--c-home); } .team-away { color: var(--c-away); } /* ---- connection status (SyncClient onStatus) ---- */ .conn-status { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--c-text-dim); } .conn-status .dot { width: 0.65rem; height: 0.65rem; border-radius: 50%; background: var(--c-err); } .conn-status.connected .dot { background: var(--c-ok); } .conn-status .pending-count { font-family: var(--font-mono); color: var(--c-pending-sync); } /* ---- tables (stats / pbp) ---- */ table { border-collapse: collapse; width: 100%; } th, td { padding: 0.35rem 0.6rem; text-align: left; border-bottom: 1px solid var(--c-border); } th { color: var(--c-text-dim); font-weight: 600; white-space: nowrap; } /* ---- dialogs ---- */ dialog { border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); padding: 1rem 1.25rem; max-width: min(92vw, 34rem); } dialog::backdrop { background: rgba(0, 0, 0, 0.55); } /* ---- v3.5 語言切換（入口頁頁尾 + 記錄台設定對話框；i18n.initLangSwitch）---- */ .lang-switch { display: inline-flex; gap: 0; border: 1px solid var(--c-border); border-radius: var(--radius); overflow: hidden; } .lang-btn { appearance: none; border: 0; background: transparent; color: var(--c-text-dim); font: inherit; font-size: 0.85rem; padding: 0.35rem 0.8rem; cursor: pointer; min-height: 2rem; } .lang-btn + .lang-btn { border-left: 1px solid var(--c-border); } .lang-btn:hover { color: var(--c-text); } .lang-btn.is-active { background: var(--c-surface-alt); color: var(--c-text); font-weight: 700; } /* ---- v3.6 帳號／變更密碼（記錄台設定對話框 + #dlg-password；§8.13）---- */ .settings-auth-row { align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; } .pw-field { display: flex; flex-direction: column; gap: 0.25rem; margin: 0.5rem 0; color: var(--c-text-dim); font-size: 0.9rem; } .pw-field input { min-height: var(--tap-min); } .pw-msg { font-size: 0.9rem; color: var(--c-err); font-weight: 700; } .pw-msg.is-ok { color: var(--c-ok); }