/* ========================================================================== Design Tokens — 英文學習 App（快修包 A：雙主題系統） 沿用規則：命名保持穩定，勿隨意改名——元件層（components.css）與所有 JS 組件只消費這些變數名稱，換主題只需要在這裡改值。 兩套主題各自固定明暗、不跟系統深色模式（原本的 prefers-color-scheme dark token 覆寫已移除）： - [data-theme="book"]（預設）：「書卷」，墨綠＋暖金＋米白紙感底， 依據 scratchpad/design-options/theme-b.html，但單字標題不用該稿的 斜體襯線字，改清晰粗體無襯線（見 components.css .headword-text）。 - [data-theme="doodle"]：「塗鴉」，米白紙底＋番茄紅/湖水綠/向日葵黃/ 粉紅＋黑手繪粗框，依據 scratchpad/design-options/theme-d.html，但拿掉 原稿對文字元素的 rotate（見 theme-doodle.css 開頭說明）。 data-theme 屬性掛在 上，由 index.html 行內 script 在任何 CSS 套用 前就設好（避免換頁閃爍），web/js/theme.js 提供執行期切換。 ========================================================================== */ :root, :root[data-theme="book"] { /* -- 品牌色（書卷：墨綠）-- */ --color-brand-50: #eef4ea; --color-brand-100: #e4efe3; --color-brand-300: #8fbf9f; --color-brand-500: #3a7350; --color-brand-600: #1b4332; --color-brand-700: #122e22; /* -- 語意色：記得(綠) / 不記得(紅) / 待確認(暖金) -- */ --color-success-500: #3a7350; --color-success-600: #245c40; --color-success-bg: #e4efe3; --color-danger-500: #9a4a34; --color-danger-600: #7c3a28; --color-danger-bg: #f3e2d8; --color-warn-500: #a9762f; --color-warn-bg: #f0e3c8; /* -- 中性色階（米白紙感） -- */ --color-bg: #f4ecdc; --color-surface: #fbf6ea; --color-surface-raised: #fffdf6; --color-border: #e3d7bd; --color-border-strong: #cdbd97; --color-muted-bg: #e9dfc7; --color-text: #2a2418; --color-text-muted: #6b5f47; --color-text-faint: #9c8f70; --color-overlay: rgba(18, 46, 34, 0.55); /* -- 字型：清晰粗體無襯線（不用書卷稿原本的斜體襯線）-- */ --font-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", sans-serif; --font-weight-heading: 800; /* -- 圓角 / 陰影 -- */ --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-full: 999px; --border-width: 1px; --shadow-sm: 0 1px 2px rgba(42, 36, 24, 0.1); --shadow-md: 0 8px 22px rgba(42, 36, 24, 0.14); --shadow-lg: 0 12px 32px rgba(42, 36, 24, 0.18); /* -- 紙感底紋（極淡圓點） -- */ --bg-texture: radial-gradient(rgba(42, 36, 24, 0.035) 1px, transparent 1px); --bg-texture-size: 14px 14px; } :root[data-theme="doodle"] { /* -- 品牌色（塗鴉：湖水綠）-- */ --color-brand-50: #e3f4ef; --color-brand-100: #cdeae2; --color-brand-300: #7fcab8; --color-brand-500: #2fa893; --color-brand-600: #1f7d6c; --color-brand-700: #17594d; /* -- 語意色：記得(湖水綠) / 不記得(番茄紅) / 待確認(向日葵黃) -- */ --color-success-500: #2fa893; --color-success-600: #1f7d6c; --color-success-bg: #e3f4ef; --color-danger-500: #e8543a; --color-danger-600: #c93f28; --color-danger-bg: #fbe2de; --color-warn-500: #d6941a; --color-warn-bg: #fdf0d9; /* -- 中性色階（米白紙＋墨黑）-- */ --color-bg: #fbf1de; --color-surface: #fffdf7; --color-surface-raised: #fff9ec; --color-border: #2b2620; --color-border-strong: #2b2620; --color-muted-bg: #f0e6d2; --color-text: #2b2620; --color-text-muted: #5b5346; --color-text-faint: #7a7163; --color-overlay: rgba(43, 38, 32, 0.55); /* -- 字型：一樣清晰無襯線，靠字重／顏色／粗框做風格區隔（不用手寫花體， 避免 iPhone 缺字型時退化難看）；所有文字元素一律擺正，rotate 只留給 theme-doodle.css 裡標記為裝飾用的非文字小圖 -- */ --font-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", "Helvetica Neue", sans-serif; --font-weight-heading: 800; /* -- 圓角 / 陰影：粗框＋硬邊位移陰影（手繪感），細節在 theme-doodle.css -- */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; --radius-full: 999px; --border-width: 3px; --shadow-sm: 3px 3px 0 var(--color-border); --shadow-md: 5px 5px 0 var(--color-border); --shadow-lg: 7px 7px 0 var(--color-warn-500); /* -- 紙感底紋（點陣稍大） -- */ --bg-texture: radial-gradient(circle, rgba(43, 38, 32, 0.06) 1.4px, transparent 1.4px); --bg-texture-size: 16px 16px; } :root { --font-size-xs: 0.75rem; --font-size-sm: 0.875rem; --font-size-base: 1rem; --font-size-lg: 1.125rem; --font-size-xl: 1.25rem; --font-size-2xl: 1.5rem; --font-size-3xl: 2rem; --line-height-base: 1.6; /* -- 間距 -- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --transition-fast: 150ms ease; --transition-base: 250ms ease; /* -- 版面 -- */ --app-max-width: 640px; --tabbar-height: calc(58px + env(safe-area-inset-bottom)); --touch-target: 44px; } /* -- 第十二輪待辦④：字級 -------------------------------------------------- 全站文字幾乎都靠 var(--font-size-*)（本身就是 rem 值，見上面 :root），縮放 的根字級（百分比）就能讓所有 rem 文字一起等比例縮放，不用逐一改 排版程式碼；--tabbar-height／--space-* 等版面用的間距變數是 px，不受影響， 卡片高度公式（.card-screen 的 calc）不會被字級設定打亂。data-font-scale 由 index.html 開頁時搶先設好（避免閃爍）、web/js/theme.js 開機/切換時同步。 */ :root, :root[data-font-scale="md"] { font-size: 100%; } :root[data-font-scale="sm"] { font-size: 90%; } :root[data-font-scale="lg"] { font-size: 110%; } :root[data-font-scale="xl"] { font-size: 125%; } /* ========================================================================== Reset & Base ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--font-size-base); line-height: var(--line-height-base); color: var(--color-text); background: var(--color-bg); background-image: var(--bg-texture); background-size: var(--bg-texture-size); background-attachment: fixed; -webkit-tap-highlight-color: transparent; } h1, h2, h3, p, figure { margin: 0; } button, input, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } ul { list-style: none; margin: 0; padding: 0; } a { color: inherit; } img { max-width: 100%; display: block; } :focus-visible { outline: 2px solid var(--color-brand-500); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } /* ========================================================================== App Shell ========================================================================== */ #app-root { max-width: var(--app-max-width); margin: 0 auto; min-height: 100dvh; background: var(--color-bg); position: relative; padding-bottom: var(--tabbar-height); } .view { padding: var(--space-4) var(--space-4) var(--space-8); padding-top: calc(var(--space-4) + env(safe-area-inset-top)); } .view-title { font-size: var(--font-size-2xl); font-weight: var(--font-weight-heading); margin-bottom: var(--space-4); } /* ========================================================================== Tab Bar ========================================================================== */ .tabbar { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: var(--app-max-width); height: var(--tabbar-height); padding-bottom: env(safe-area-inset-bottom); display: flex; background: var(--color-surface); border-top: var(--border-width) solid var(--color-border-strong); z-index: 40; touch-action: manipulation; } .tabbar[hidden] { display: none; } .tabbar-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; background: none; border: none; min-height: var(--touch-target); color: var(--color-text-faint); font-size: var(--font-size-xs); transition: color var(--transition-fast); touch-action: manipulation; } .tabbar-item svg { width: 22px; height: 22px; stroke: currentColor; fill: none; } .tabbar-item.is-active { color: var(--color-brand-600); } /* ========================================================================== Buttons ========================================================================== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch-target); padding: 0 var(--space-5); border-radius: var(--radius-md); border: var(--border-width) solid transparent; font-weight: 700; font-size: var(--font-size-base); transition: filter var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast); width: 100%; } .btn:active { transform: scale(0.98); } .btn:disabled { opacity: 0.5; pointer-events: none; } .btn-primary { background: var(--color-brand-600); color: #fff; } .btn-primary:hover { filter: brightness(1.06); } .btn-secondary { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); } .btn-success { background: var(--color-success-500); color: #fff; } .btn-danger { background: var(--color-danger-500); color: #fff; } .btn-ghost { background: transparent; color: var(--color-brand-600); width: auto; padding: 0 var(--space-2); border-color: transparent; } .btn-sm { min-height: 36px; font-size: var(--font-size-sm); padding: 0 var(--space-3); width: auto; } .btn-icon { width: var(--touch-target); height: var(--touch-target); padding: 0; border-radius: var(--radius-full); background: var(--color-surface); border: var(--border-width) solid var(--color-border-strong); flex: none; } .btn-row { display: flex; gap: var(--space-3); } /* ========================================================================== Forms ========================================================================== */ .field { margin-bottom: var(--space-4); } .field label { display: block; font-size: var(--font-size-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); } .input, textarea.input { width: 100%; min-height: var(--touch-target); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); border: var(--border-width) solid var(--color-border-strong); background: var(--color-surface); color: var(--color-text); } .input:focus { border-color: var(--color-brand-500); } textarea.input { min-height: 88px; resize: vertical; } .error-text { color: var(--color-danger-600); font-size: var(--font-size-sm); margin-top: var(--space-2); } /* ========================================================================== Cards / Surfaces ========================================================================== */ .card { background: var(--color-surface); border-radius: var(--radius-lg); border: var(--border-width) solid var(--color-border); padding: var(--space-5); box-shadow: var(--shadow-sm); } .card + .card { margin-top: var(--space-3); } /* ========================================================================== Badges / Chips / Tags ========================================================================== */ .badge { display: inline-flex; align-items: center; padding: 2px var(--space-2); border-radius: var(--radius-full); font-size: var(--font-size-xs); font-weight: 600; background: var(--color-brand-100); color: var(--color-brand-700); } .badge-danger { background: var(--color-danger-bg); color: var(--color-danger-600); } .badge-muted { background: var(--color-muted-bg); color: var(--color-text-muted); } .chip { display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-4); border-radius: var(--radius-full); border: var(--border-width) solid var(--color-border-strong); background: var(--color-surface); font-size: var(--font-size-sm); color: var(--color-text-muted); transition: background var(--transition-fast), color var(--transition-fast); } .chip.is-active { background: var(--color-brand-600); border-color: var(--color-brand-600); color: #fff; } .chip-row { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-bottom: var(--space-4); } /* ========================================================================== Toast ========================================================================== */ #toast-container { position: fixed; left: 50%; bottom: calc(var(--tabbar-height) + var(--space-4)); transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: var(--space-2); width: calc(100% - var(--space-8)); max-width: calc(var(--app-max-width) - var(--space-8)); pointer-events: none; } .toast { background: var(--color-text); color: var(--color-surface); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); font-size: var(--font-size-sm); box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(8px); transition: opacity var(--transition-base), transform var(--transition-base); } .toast.is-visible { opacity: 1; transform: translateY(0); } .toast.is-error { background: var(--color-danger-600); } /* ========================================================================== Skeleton loading ========================================================================== */ .skeleton { background: linear-gradient(90deg, var(--color-muted-bg) 25%, var(--color-border-strong) 37%, var(--color-muted-bg) 63%); background-size: 400% 100%; animation: skeleton-shine 1.4s ease infinite; border-radius: var(--radius-sm); } @keyframes skeleton-shine { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ========================================================================== Login ========================================================================== */ .login-screen { min-height: 100dvh; display: flex; flex-direction: column; justify-content: center; padding: var(--space-8) var(--space-6); max-width: var(--app-max-width); margin: 0 auto; } .login-logo { width: 64px; height: 64px; border-radius: var(--radius-lg); background: var(--color-brand-600); color: #fff; display: flex; align-items: center; justify-content: center; font-size: var(--font-size-2xl); font-weight: 700; margin-bottom: var(--space-5); } .login-title { font-size: var(--font-size-2xl); font-weight: 700; margin-bottom: var(--space-2); } .login-sub { color: var(--color-text-muted); margin-bottom: var(--space-6); } /* ========================================================================== 深色模式 tokens（家族 × 深色模式，dark-book／dark-doodle） [data-appearance="dark"] 由 web/js/theme.js 依「深色模式」設定（auto 依 自訂時段／always-dark／always-light）與家族運算後掛在 上，跟 data-theme（家族）獨立、可自由組合。這裡只覆寫「顏色類」token（背景／ 邊框／文字／語意色／brand 色階／陰影／紙感底紋）；圓角、邊框粗細、字型 等結構 token 沿用同家族淺色版本不重複定義——選取器比淺色版本多兩個屬性 限定式，靠 CSS 特異度自然勝出，不需調整規則順序。 來源：scratchpad/dark-options/dark-book.html（書卷夜燈）、dark-doodle.html （塗鴉黑板）模擬稿。brand-50/100/300/700（tinted 徽章底色／字色）模擬稿 沒給，依模擬稿的 accent／brand-500/600 主色系推導出同色系深淺階，取代 模擬稿裡沒被實際用到的另一組灰綠色階，避免同家族出現兩種不相干色相。 ========================================================================== */ :root[data-theme="book"][data-appearance="dark"] { /* -- 品牌／強調色（夜燈琥珀，柔和不刺眼）-- */ --color-brand-50: #2c2416; --color-brand-100: #37301b; --color-brand-300: #9c8256; --color-brand-500: #b98f57; --color-brand-600: #caa06a; --color-brand-700: #e8d3ab; /* -- 語意色：記得(柔綠) / 不記得(柔陶土紅) / 待確認(柔琥珀) -- */ --color-success-500: #7cb389; --color-success-600: #92c19c; --color-success-bg: #1c2e22; --color-danger-500: #cf8a72; --color-danger-600: #d99d88; --color-danger-bg: #33241d; --color-warn-500: #caa06a; --color-warn-bg: #332a1c; /* -- 中性色階（深夜墨綠底，暖米白字） -- */ --color-bg: #0f1f18; --color-surface: #17281f; --color-surface-raised: #1c3126; --color-border: #24362c; --color-border-strong: #445a4c; --color-muted-bg: #1c2e24; --color-text: #ece4d3; --color-text-muted: #b8ab93; --color-text-faint: #96896d; --color-overlay: rgba(6, 14, 10, 0.65); /* -- 陰影：深色底用純黑陰影，不再沿用淺色版的暖褐色 rgba -- */ --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5); /* -- 紙感底紋：淡淡琥珀燈光暈 + 極淡圓點 -- */ --bg-texture: radial-gradient(ellipse 70% 45% at 50% 30%, rgba(202, 160, 106, 0.08), transparent 70%), radial-gradient(rgba(236, 228, 211, 0.02) 1px, transparent 1px); --bg-texture-size: auto, 14px 14px; } :root[data-theme="doodle"][data-appearance="dark"] { /* -- 品牌／強調色（降飽和粉筆湖水綠）-- */ --color-brand-50: #1c2b28; --color-brand-100: #223530; --color-brand-300: #5c8c81; --color-brand-500: #6fa89c; --color-brand-600: #8fc0b5; --color-brand-700: #d3ece5; /* -- 語意色：記得(粉筆湖水綠) / 不記得(粉筆番茄紅) / 待確認(粉筆向日葵黃) -- */ --color-success-500: #6fa89c; --color-success-600: #8fc0b5; --color-success-bg: #23302e; --color-danger-500: #c97b6c; --color-danger-600: #dd9686; --color-danger-bg: #332521; --color-warn-500: #c9ad72; --color-warn-bg: #332c1f; /* -- 中性色階（黑板深灰底，粉筆白字／白粉筆細框） -- */ --color-bg: #22252a; --color-surface: #2a2d33; --color-surface-raised: #313439; /* 淺色塗鴉主題也是 --color-border 跟 --color-border-strong 同值（統一黑手繪 粗框），深色版比照統一成白粉筆細框，維持「單一框色」的既有架構慣例。 */ --color-border: #d8d3c8; --color-border-strong: #d8d3c8; --color-muted-bg: #2f323a; --color-text: #ece7dd; --color-text-muted: #b0aa9e; --color-text-faint: #948d80; --color-overlay: rgba(10, 11, 13, 0.65); /* -- 紙感底紋：黑板灰底上的淡粉筆灰點 -- */ --bg-texture: radial-gradient(circle, rgba(236, 231, 221, 0.045) 1.4px, transparent 1.4px); --bg-texture-size: 16px 16px; /* --shadow-sm/md/lg 沿用淺色塗鴉主題「offset 位移陰影 = var(--color-border)」 的既有公式，不需要另外覆寫：--color-border 換成白粉筆色後，位移陰影會 自動變成白色粉筆線位移效果，跟淺色版的黑色手繪線是同一套邏輯。 */ } /* -- 深色模式下，強調色實心填底按鈕改用家族底色當文字，避免白字疊在中亮度 琥珀／薄荷色塊上對比不足、也比純白字更不刺眼（使用者鐵律：強調色不可 高飽和刺眼）。只在深色模式生效，淺色模式的深色底＋白字（例如書卷墨綠 按鈕）本來就對比足夠，不受影響。 -- */ :root[data-appearance="dark"] .btn-primary, :root[data-appearance="dark"] .chip.is-active, :root[data-appearance="dark"] .listen-play-btn, :root[data-appearance="dark"] .login-logo { color: var(--color-bg); } :root[data-appearance="dark"] .listen-play-btn svg { fill: var(--color-bg); } /* -- 深色模式「記得／不記得」按鈕改軟色調（依模擬稿：淡底色＋色字＋細框）， 不再用淺色模式那種高飽和實色填滿——同樣是「強調色不可刺眼」鐵律的實踐。 -- */ :root[data-theme="book"][data-appearance="dark"] .btn-danger { background: var(--color-danger-bg); color: var(--color-danger-600); border-color: rgba(207, 138, 114, 0.35); } :root[data-theme="book"][data-appearance="dark"] .btn-success { background: var(--color-success-bg); color: var(--color-success-600); border-color: rgba(124, 179, 137, 0.35); } :root[data-theme="doodle"][data-appearance="dark"] .btn-danger { background: var(--color-danger-bg); color: var(--color-danger-600); border-color: var(--color-danger-500); box-shadow: 3px 3px 0 var(--color-danger-500); } :root[data-theme="doodle"][data-appearance="dark"] .btn-success { background: var(--color-success-bg); color: var(--color-success-600); border-color: var(--color-success-500); box-shadow: 3px 3px 0 var(--color-success-500); }