/* * 色票、圓角、間距一律用 design-tokens.css 的變數，這裡不寫死任何 hex * （唯一例外是 QR code 的白底，掃描率優先，不跟著主題走）。 * * 深淺色：表示淺色，深色是預設值——對應 design-tokens.css * 「深色是語意層預設、淺色是 -light 平行變數」的寫法。class 掛在是因為 * 決定主題的那段 script 在裡就要跑完，那時還不存在。 */ html.light { --color-bg: var(--color-bg-light); --color-bg-card: var(--color-bg-card-light); --color-text: var(--color-text-light); --color-text-muted: var(--color-text-muted-light); --color-accent-text: var(--color-accent-text-light); --color-brand-surface: var(--color-brand-surface-light); --color-brand-text: var(--color-brand-text-light); --color-brand-logo: var(--color-brand-logo-light); --color-glow-1: var(--color-glow-1-light); --color-glow-2: var(--color-glow-2-light); --shadow-card: var(--shadow-card-light); /* ⚠️ 淺色模式「整組改走 Secondary」是 Homepage 現行的做法，但線上的 design-tokens.css 還停在舊版（outline/border 仍是 Primary，而且根本沒有 --color-surface-glass-light）。在那份檔案補齊之前，這裡直接從 Secondary primitive 算出來——用 color-mix 而不是寫死 rgba，色階之後改了這裡會跟著動。等 design-tokens.css 同步之後，這一段就可以換回 var(--xxx-light)。 */ --color-accent: var(--secondary-700); --color-outline: var(--secondary-800); --color-outline-hover: color-mix(in srgb, var(--secondary-600) 22%, transparent); --color-border: color-mix(in srgb, var(--secondary-700) 45%, transparent); --color-surface-glass: color-mix(in srgb, var(--secondary-600) 20%, transparent); /* 實心按鈕淺色走 Secondary、深色走 Primary。淺色的每一階都比深色再深一階： Secondary 整條色階比 Primary 亮，直接對調的話白字疊上去過不了 WCAG AA。 */ --btn-face: var(--secondary-500); --btn-face-hover: var(--secondary-600); --btn-edge: var(--secondary-600); --btn-edge-hover: var(--secondary-700); --btn-text: var(--secondary-900); --btn-disabled-face: var(--secondary-200); --btn-disabled-text: var(--secondary-800); /* switch 關閉時的軌道。--color-outline 在深色模式是 primary-400（很淺），跟開啟時的 accent 太接近、白滑塊也壓不住，所以兩個主題各指定一個中深色 */ --switch-off: var(--secondary-800); /* 打勾框的底色。比 --color-accent 深一階，白色的勾才壓得過去（見下方 .check-row） */ --check-face: var(--secondary-800); /* 同意固定走 Primary（藍）、不同意固定走 Secondary（粉），兩個主題都一樣，不能直接用 --btn-face：它在淺色模式是 Secondary，同意會跟著變粉色 */ /* 淺色模式：500 當底、600 當厚度、900 當文字，跟 --btn-face 那組同一套配法 */ --ox-o-face: var(--primary-500); --ox-o-soft: var(--primary-300); --ox-o-edge: var(--primary-600); --ox-o-text: var(--primary-900); --ox-o-mark: var(--primary-700); --ox-x-face: var(--secondary-500); --ox-x-soft: var(--secondary-300); --ox-x-edge: var(--secondary-600); --ox-x-text: var(--secondary-900); --ox-x-mark: var(--secondary-700); color-scheme: light; } :root { --btn-face: var(--primary-700); --btn-face-hover: var(--primary-800); --btn-edge: var(--primary-800); --btn-edge-hover: var(--primary-900); --btn-text: #ffffff; --btn-disabled-face: var(--primary-800); --btn-disabled-text: var(--primary-400); --switch-off: var(--primary-800); --check-face: var(--primary-700); --ox-o-face: var(--primary-700); /* 未選中的底色：夠濃才看得出兩顆的差別，但不能濃到跟「已選中」搞混 */ --ox-o-soft: color-mix(in srgb, var(--primary-600) 26%, transparent); --ox-o-edge: var(--primary-800); --ox-o-text: #ffffff; --ox-o-mark: var(--primary-400); /* 深色模式下 Secondary/500 太亮，白字壓不住，往下兩階換成 800 */ --ox-x-face: var(--secondary-800); --ox-x-soft: color-mix(in srgb, var(--secondary-700) 26%, transparent); --ox-x-edge: var(--secondary-900); --ox-x-text: #ffffff; --ox-x-mark: var(--secondary-500); color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; min-height: 100svh; display: flex; flex-direction: column; background: var(--color-bg); color: var(--color-text); font-family: var(--font-family); font-size: var(--font-size-body); line-height: 1.6; -webkit-font-smoothing: antialiased; } /* 背景兩顆光暈 + 只長在光暈上的顆粒，跟系列其他專案同一套（比例、noise 參數都一致）。任何全頁容器都不要再上底色，會把光暈整片蓋掉。 */ body::before, body::after { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; } body::before { background-image: radial-gradient(ellipse 53% 95% at 30% 5%, var(--color-glow-1) 0%, transparent 100%), radial-gradient(ellipse 53% 95% at 76% 95%, var(--color-glow-2) 0%, transparent 100%); } body::after { opacity: 0.15; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeComponentTransfer%3E%3CfeFuncR type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncG type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncB type='linear' slope='2' intercept='-0.5'/%3E%3CfeFuncA type='discrete' tableValues='1'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-mask-image: radial-gradient(ellipse 53% 95% at 30% 5%, rgba(0, 0, 0, 0.8) 0%, transparent 100%), radial-gradient(ellipse 53% 95% at 76% 95%, rgba(0, 0, 0, 0.8) 0%, transparent 100%); mask-image: radial-gradient(ellipse 53% 95% at 30% 5%, rgba(0, 0, 0, 0.8) 0%, transparent 100%), radial-gradient(ellipse 53% 95% at 76% 95%, rgba(0, 0, 0, 0.8) 0%, transparent 100%); } h1, h2 { margin: 0; line-height: 1.3; } h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } /* ---------- 導覽列 ---------- */ .nav-pill { position: sticky; top: var(--space-2); z-index: 10; margin: var(--space-2) auto 0; width: min(600px, calc(100% - 2rem)); display: flex; align-items: center; justify-content: space-between; gap: var(--space-1); padding: 0.5rem 0.75rem 0.5rem 0.5rem; border-radius: var(--radius-pill); background: var(--color-surface-glass); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .nav-left, .nav-right { display: flex; align-items: center; gap: var(--space-1); min-width: 0; } .nav-right { flex-shrink: 0; } /* 左上是回系列首頁的品牌鈕。40px 見方跟右側控制項等高，兩邊的導覽列才會對齊。 */ .brand { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; flex-shrink: 0; border-radius: var(--radius-pill); background: var(--color-brand-surface); transition: background 0.15s ease; } .brand:hover { background: var(--color-outline-hover); } .brand svg { width: 25px; height: 20px; fill: var(--color-brand-logo); } .nav-title { font-weight: 700; color: inherit; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 420px 是量出來的臨界點：導覽列扣掉標誌、規則、語言下拉（此時已縮到 124）、深淺色鈕與間距之後，剛好還能給標題 4 個中文字的寬度。再窄下去只會剩「現…」這種看不出是什麼的殘字，那還不如不顯示——標誌一樣連回首頁，頁面的 h1 也說明了這是什麼工具。 ⚠️ 別把這個值往上調：460px 那種明明還有一百多 px 空間的寬度也會被藏掉。 */ @media (max-width: 420px) { .nav-title { display: none; } } /* 語言下拉：外觀是外框式（透明底 + 描邊 + 跟頁面同色的文字），但**不套 .btn-outline**。 .btn-outline 帶 display: inline-flex，套在，鍵盤操作與螢幕閱讀器都照舊，只是換一張臉。 */ .switch { appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 44px; height: 24px; margin: 0; border-radius: var(--radius-pill); /* 關閉時的軌道要**不透明**，而且要跟開啟時的 accent 明顯不同色階 */ background: var(--switch-off); cursor: pointer; transition: background 0.15s ease; } .switch::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; /* 不能用 --color-bg-card：深色模式下它是 rgba(255,255,255,0.04)， 4% 白等於透明，滑塊會整顆消失，開關看起來只是一顆純色藥丸。 --color-bg-light 兩個主題都是不透明白，疊在深淺兩種軌道上都看得見 */ background: var(--color-bg-light); transition: transform 0.15s ease; } .switch:checked { background: var(--color-accent); } .switch:checked::after { transform: translateX(20px); } .switch:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; } @media (max-width: 720px) { /* 窄螢幕排成上下：兩欄會讓題目文字被壓成一行兩三個字 */ .setup-cols { grid-template-columns: 1fr; } .setup-chosen { position: static; } .chosen-list { max-height: 16rem; } } /* 自己出題獨立框起來：它跟上面那疊分類是不同性質的東西，沒有框線會像是掛在最後一個分類底下 */ .custom-box { border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0.75rem; margin-top: var(--space-2); } .custom-box .field-label { margin-top: 0; } .custom-box .hint { margin-bottom: 0; } /* 「開始遊戲」與「改題目」之間留一段距離，不要黏在一起變成一大塊 */ #start-game-block .btn-block + .btn-block { margin-top: 12px; } /* ---------- 一排單選（每題幾秒） ---------- */ /* * 五個選項排成一排，比下拉少一次點擊、也一眼看得到全部選項。 * 底層還是，鍵盤方向鍵與螢幕閱讀器都照舊，只是把圓點藏起來。 */ .seg { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.4rem; } .seg-item { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; border: 1.5px solid var(--color-outline); border-radius: var(--radius); cursor: pointer; font-variant-numeric: tabular-nums; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } /* 圓點藏起來但保留在無障礙樹裡（不能用 display:none，那樣鍵盤就選不到） */ .seg-item input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .seg-item:hover { border-color: var(--color-outline-hover); } .seg-item:has(input:checked) { background: var(--btn-face); border-color: var(--btn-edge); color: var(--btn-text); font-weight: 700; } .seg-item:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; } /* * 迷你按鈕。標題旁邊的次要動作用（出題頁的「隨機」「清空」）， * 不要用在主要動作上——28px 已經接近手指點得到的下限。 * * **min-height 一定要一起壓。** .btn-solid / .btn-outline 的基底是 min-height: 40px， * 只寫 height 的話 min-height 會贏、按鈕根本不會變矮——.btn-small 就是這樣， * 它宣告 height: 32px 但實際渲染一直是 40px。 */ .btn-mini { min-height: 28px; height: 28px; padding: 0 0.7rem; border-radius: var(--radius-pill); font-size: 0.78rem; gap: 0.3rem; } /* 離線標籤：跟其他標籤同一顆膠囊，只是淡化。與 04_HappyBingo 一致 */ .role-badge.is-muted { color: var(--color-text-muted); } /* 名單一列可能同時掛好幾個標籤（主持人＋玩家），要留得下間距 */ .player-list li .role-badge + .role-badge { margin-left: 0.35rem; }