/* zhouer.org 應用版式 —— 工具、求解器、練習器這類「拿來用」的頁面。 * * 站上三種版式家族（用法與慣例見 repo 根目錄 STYLE.md）： * style.css 文件：#content 置中欄 +

+ #author * theme.css 作品：全頁 canvas + 四角浮動玻璃面板 * app.css 應用：置中欄 + 頁首 + 卡片 + 工具列（本檔） * * 接法（一定要搭 theme.css，排在前面）： * （不寫 data-theme = paper） * * * * 跟 style.css 同一套紀律：不宣告 :root{}，一律 var(--token, fallback)。 * 兩個檔案都定義 tokens 的話，後載入的會蓋掉 colorway。 * * theme.css 已經提供的東西不要在這裡重做：button / select / input[type=range] * / input[type=checkbox] 的基本外觀、.row / .lbl / .val / .chk / .sl、 * .panel / .hint / .credit。本檔只補「流式版面」需要而浮動面板沒有的部分。 / / ===== 版面 ============================================================== / html, body { height: auto; / theme.css 的 height:100% 是給全頁 canvas 用的 / min-height: 100%; } body { padding: 28px 16px 40px; line-height: 1.6; } .wrap { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; } .wrap.narrow { max-width: 560px; } .wrap.wide { max-width: 1120px; } / 滿版模式：整頁剛好一屏、不捲動（閃卡、調音器這類「一次看一張」的應用）。 * 用，.wrap 改為撐滿高度的 flex column。 / body.fill { height: 100dvh; overflow: hidden; padding: 16px; display: flex; justify-content: center; / 行動裝置：避免誤觸雙擊放大與整頁橡皮筋捲動（仍保留雙指縮放給無障礙） / touch-action: manipulation; overscroll-behavior: none; } body.fill .wrap { width: 100%; max-width: 28rem; min-height: 0; gap: 0; } / ===== 頁首 ============================================================== / .page-head { text-align: center; margin-bottom: 4px; } .page-head h1 { margin: 0; font-size: clamp(1.35rem, 1.1rem + 1vw, 1.65rem); font-weight: 650; letter-spacing: .3px; color: var(--ink, #1f2430); } .page-head .sub { margin: 4px 0 0; font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); font-size: 12px; letter-spacing: .2px; color: var(--dim, #6b7688); } / ===== 卡片 ============================================================== * 跟 theme.css 的 .panel 用同一組 tokens，差別是隨頁面流動而不是固定在角落。 / .card { background: var(--panel, rgba(252, 253, 255, .8)); border: 1px solid var(--line, rgba(30, 45, 70, .13)); border-radius: var(--r-panel, 16px); box-shadow: var(--shadow, 0 8px 28px rgba(40, 55, 80, .16)); padding: 12px 14px; } .card.pad { padding: 18px 20px; } .card.flush { padding: 0; overflow: hidden; } / ===== 工具列 ============================================================ * 一排水平排列的控制項。放進 .card 就是一條工具列，單獨用就是裸的一排。 / .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .toolbar.center { justify-content: center; } .toolbar.spread { justify-content: space-between; } .lbl-inline { font-size: 12px; color: var(--dim, #6b7688); white-space: nowrap; } .sep { width: 1px; height: 20px; background: var(--line, rgba(30, 45, 70, .13)); } / ===== 按鈕階層 ========================================================== * 基本外觀來自 theme.css；這裡只加尺寸與語意變體。 / button.act { padding: 7px 12px; font-size: 13px; } button.mini { padding: 4px 9px; font-size: 12px; border-radius: 7px; } button.primary { background: var(--accent, #3a7bd5); border-color: var(--accent, #3a7bd5); color: var(--accent-ink, #fdfefe); font-weight: 600; } button.primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent, #3a7bd5) 85%, #000); } button.danger { color: var(--danger, #b3323c); } button.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger, #b3323c) 12%, transparent); border-color: color-mix(in srgb, var(--danger, #b3323c) 45%, transparent); } / 只有圖示的方形鈕 / button.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; } button.icon-btn svg { width: 18px; height: 18px; } / ===== 狀態列 ============================================================ / / 只管語意顏色，位置與對齊交給頁面——它可能是工具列裡的一小段， * 也可能是獨立一行。 / .status { font-size: .85rem; color: var(--faint, #9aa5b5); } .status.warning { color: var(--warning, #8a6a00); } .status.error { color: var(--danger, #b3323c); } .status.success { color: var(--success, #2f7d4f); } .status.muted { color: var(--dim, #6b7688); } / ===== 數值讀出 ========================================================== * theme.css 的 .val 是給浮動面板的；流式版面裡的大數字用這個。 / .readout { font-family: var(--font-mono, ui-monospace, Menlo, Consolas, monospace); font-variant-numeric: tabular-nums; color: var(--accent-soft, #2c5ea8); font-weight: 600; } / ===== 收尾註記 ========================================================== * theme.css 的 .credit 是 position:fixed 的；流式版面要讓它跟著內容走。 */ .wrap .credit, body > .credit.flow { position: static; margin-top: 18px; text-align: center; } @media (max-width: 600px) { body { padding: 18px 12px 32px; } .card { padding: 10px 12px; } }