/* ============================================================ 我們的課表 — styles 共用一套版面與間距，兩個人只換配色 / 圓角 / 卡片質感 ============================================================ */ /* ---------- 基礎 tokens ---------- */ :root { --bg: #f6f5f2; --surface: #ffffff; --surface-2: #fbfaf8; --ink: #1c1b19; --ink-2: #56534d; --ink-3: #8d8981; --line: #e6e3dd; --line-2: #f0eee9; --radius: 12px; --radius-card: 10px; --radius-pill: 999px; --card-tint: 13%; --shadow-sm: 0 1px 2px rgba(28, 27, 25, .05); --shadow-md: 0 6px 20px -6px rgba(28, 27, 25, .14); --shadow-lg: 0 24px 60px -20px rgba(28, 27, 25, .3); --rowh: 46px; --periodcol: 62px; --daycol: minmax(112px, 1fr); --pad: 20px; /* 頁面左右邊距，手機會縮小，安全區也是拿它當基準 */ --font-zh: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif; --font-en: "Outfit", var(--font-zh); --ease: cubic-bezier(.32, .72, 0, 1); color-scheme: light; } /* ---------- 淳：藍色系 ---------- */ :root[data-person="chuen"] { --accent: #005ab5; --accent-ink: #00478f; --accent-soft:#e8f2fc; --glow-a: #acd1f6; --glow-b: #bee6f4; --c1: #005ab5; /* 主色 */ --c2: #087aa0; /* 藍青 */ --c3: #344db2; /* 靛 */ --c4: #7c46b9; /* 紫 */ --c5: #218362; /* 綠 */ --c6: #a36229; /* 褐（暖色錨點） */ } /* ---------- 魚魚：青綠色系 ---------- */ :root[data-person="yuyu"] { --accent: #009393; --accent-ink: #007575; --accent-soft:#e7f9f9; --glow-a: #b3efef; --glow-b: #c4eee0; --c1: #009393; /* 主色 */ --c2: #138660; /* 青綠 */ --c3: #0d719c; /* 藍 */ --c4: #2a7e3f; /* 綠 */ --c5: #6249ab; /* 紫 */ --c6: #a87124; /* 琥珀（暖色錨點） */ } /* ---------- 深色模式 ---------- theme.js 一定會在 上寫明 data-theme（沒手動選過就跟著裝置設定）， 所以深色色票只要維護這一份，不用再為手動切換複製一次。 */ :root[data-theme="dark"] { --bg: #17161a; --surface: #201f24; --surface-2: #262429; --ink: #f0eeea; --ink-2: #b6b2ab; --ink-3: #837f79; --line: #323037; --line-2: #2a282f; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow-md: 0 6px 20px -6px rgba(0, 0, 0, .55); --shadow-lg: 0 24px 60px -20px rgba(0, 0, 0, .8); --card-tint: 21%; color-scheme: dark; } /* 深色底下要提高亮度、降低彩度才看得清楚，色相跟淺色版一致 */ :root[data-theme="dark"][data-person="chuen"] { --accent: #55a6f6; --accent-ink: #92c7fc; --accent-soft: #1c334a; --glow-a: #1f4d7a; --glow-b: #215863; --c1: #55a6f6; --c2: #52bde0; --c3: #899ce6; --c4: #b590df; --c5: #64c4a4; --c6: #d89a64; } :root[data-theme="dark"][data-person="yuyu"] { --accent: #4dcbcb; --accent-ink: #9de7e7; --accent-soft: #1e3e3e; --glow-a: #246060; --glow-b: #25563d; --c1: #4dcbcb; --c2: #53c69f; --c3: #5fb7dd; --c4: #67c17d; --c5: #ac9cde; --c6: #d8a864; } /* ---------- reset ---------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-zh); background: var(--bg); color: var(--ink); line-height: 1.55; -webkit-font-smoothing: antialiased; transition: background-color .45s var(--ease), color .45s var(--ease); } h1, h2, p, dl, dd, dt, ul, li, figure { margin: 0; padding: 0; } ul { list-style: none; } button { font: inherit; color: inherit; /* 去掉行動裝置雙擊縮放的 300ms 延遲與點擊灰底 */ touch-action: manipulation; -webkit-tap-highlight-color: transparent; } /* hover 效果只給真的有滑鼠的裝置，否則在觸控上點完會「卡住」不還原 */ @media (hover: hover) and (pointer: fine) { .b-course:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); } .clist__item:hover { border-color: color-mix(in srgb, var(--cc) 55%, var(--line)); transform: translateX(2px); } .today__item:hover { box-shadow: var(--shadow-sm); } .sheet__close:hover { color: var(--ink); } } /* 背景暈光 —— 隨主題換色 */ .glow { position: fixed; inset: -20vh -10vw auto; height: 70vh; pointer-events: none; z-index: 0; background: radial-gradient(42vw 42vh at 22% 0%, var(--glow-a) 0%, transparent 68%), radial-gradient(38vw 40vh at 82% 8%, var(--glow-b) 0%, transparent 70%); opacity: .5; filter: blur(6px); transition: background 1s var(--ease), opacity 1s var(--ease); } :root[data-theme="dark"] .glow { opacity: .38; } /* ---------- 頂部 ---------- */ .topbar { position: sticky; top: 0; z-index: 30; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--line-2); } .topbar__inner { max-width: 1120px; margin: 0 auto; padding: 12px var(--pad); display: flex; align-items: center; gap: 16px; } .brand { display: flex; align-items: center; gap: 9px; flex: 1 1 0; min-width: 0; text-decoration: none; } .brand__mark { width: 14px; height: 14px; border-radius: 4px; background: var(--accent); transition: background-color .45s var(--ease); } .brand__text { font-family: var(--font-en); font-weight: 600; letter-spacing: .02em; font-size: 15px; color: var(--ink-2); white-space: nowrap; } /* ---------- 頂部右側：深淺色鈕 / 說明 ---------- */ .actions { flex: 1 1 0; display: flex; align-items: center; justify-content: flex-end; gap: 6px; } .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex: 0 0 auto; border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--surface); color: var(--ink-2); cursor: pointer; text-decoration: none; box-shadow: var(--shadow-sm); transition: color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease); } .iconbtn:active { transform: scale(.92); } .iconbtn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .iconbtn__glyph { font-size: 15px; font-weight: 700; line-height: 1; } .icon { width: 17px; height: 17px; } /* 淺色時顯示月亮（點了會變深色），深色時顯示太陽 */ .icon-sun { display: none; } :root[data-theme="dark"] .icon-sun { display: block; } :root[data-theme="dark"] .icon-moon { display: none; } .backlink { font-size: 13px; color: var(--ink-2); text-decoration: none; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid var(--line); background: var(--surface); white-space: nowrap; } .backlink--big { font-size: 14px; padding: 9px 18px; display: inline-block; } /* ---------- 切換鍵 ---------- */ .switch { position: relative; display: flex; gap: 2px; padding: 4px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); flex: 0 0 auto; } .switch__pill { position: absolute; top: 4px; left: 4px; height: calc(100% - 8px); width: 0; border-radius: var(--radius-pill); background: var(--accent); transition: transform .5s var(--ease), width .5s var(--ease), background-color .45s var(--ease); z-index: 0; } .switch__btn { position: relative; z-index: 1; border: 0; background: none; cursor: pointer; padding: 6px 20px; border-radius: var(--radius-pill); font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color .35s var(--ease); white-space: nowrap; } .switch__btn[aria-selected="true"] { color: #fff; font-weight: 700; } :root[data-theme="dark"] .switch__btn[aria-selected="true"] { color: #17161a; } .switch__btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------- 版面 ---------- */ .wrap { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 30px var(--pad) 60px; display: grid; gap: 30px; } .h2 { font-size: 15px; font-weight: 700; letter-spacing: .04em; color: var(--ink-2); } .hint { font-size: 12.5px; color: var(--ink-3); } /* 切換時的入場動畫 */ .swapping .hero, .swapping .today, .swapping .board, .swapping .clist { animation: swap .5s var(--ease); } @keyframes swap { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } /* ---------- Hero ---------- */ .hero { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 22px; } .hero__name { font-size: clamp(38px, 8vw, 58px); line-height: 1.05; font-weight: 700; letter-spacing: -.01em; } .hero__sub { font-size: 14.5px; color: var(--ink-2); margin-top: 6px; } .hero__term { font-size: 12.5px; color: var(--ink-3); margin-top: 3px; } .stats { display: flex; gap: 10px; flex-wrap: wrap; } .stat { min-width: 88px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); } .stat dt { font-size: 11.5px; color: var(--ink-3); letter-spacing: .04em; } .stat dd { font-family: var(--font-en); font-size: 24px; font-weight: 600; line-height: 1.2; margin-top: 2px; } .stat dd small { font-size: 12px; font-weight: 400; color: var(--ink-3); margin-left: 2px; } /* ---------- 今日 ---------- */ .today { padding: 16px 18px; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); } .today__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 10px; } .today__title { font-size: 14px; font-weight: 700; } .today__date { font-size: 12.5px; color: var(--ink-3); } .today__list { display: flex; flex-wrap: wrap; gap: 8px; } .today__item { display: flex; align-items: center; gap: 8px; padding: 7px 13px 7px 10px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--cc) var(--card-tint), var(--surface)); border: 1px solid color-mix(in srgb, var(--cc) 30%, transparent); font-size: 13.5px; cursor: pointer; } .today__item b { font-weight: 500; } .today__time { font-family: var(--font-en); font-size: 12px; color: var(--ink-2); background: var(--surface); padding: 1px 7px; border-radius: var(--radius-pill); } .today__item.is-now { box-shadow: 0 0 0 2px color-mix(in srgb, var(--cc) 55%, transparent); } .today__empty { font-size: 13.5px; color: var(--ink-3); } /* ---------- 課表 ---------- */ .boardwrap__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .board-scroll { overflow-x: auto; overscroll-behavior-x: contain; border-radius: var(--radius); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-sm); } .board { display: grid; grid-template-columns: var(--periodcol) repeat(var(--days, 5), var(--daycol)); min-width: 660px; position: relative; } /* 表頭 */ .b-corner, .b-day { position: sticky; top: 0; z-index: 5; background: var(--surface-2); border-bottom: 1px solid var(--line); padding: 9px 0; text-align: center; font-size: 13px; font-weight: 500; color: var(--ink-2); } .b-corner { z-index: 6; left: 0; border-right: 1px solid var(--line); } .b-day.is-today { color: var(--accent-ink); background: var(--accent-soft); font-weight: 700; } .b-day span { font-size: 11px; color: var(--ink-3); display: block; font-weight: 400; } .b-day.is-today span { color: var(--accent-ink); opacity: .75; } /* 節次欄 */ .b-period { position: sticky; left: 0; z-index: 4; background: var(--surface-2); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line-2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 2px; } .b-period b { font-family: var(--font-en); font-size: 13px; font-weight: 600; } .b-period i { font-style: normal; font-family: var(--font-en); font-size: 9.5px; color: var(--ink-3); letter-spacing: -.01em; } .b-period.is-break { color: var(--ink-3); } .b-period.is-now { color: var(--accent-ink); background: var(--accent-soft); } /* 空格 */ .b-cell { border-bottom: 1px solid var(--line-2); border-right: 1px solid var(--line-2); min-height: var(--rowh); } .b-cell.is-break { background: color-mix(in srgb, var(--ink) 3%, transparent); } .b-cell.is-today { background: color-mix(in srgb, var(--accent) 5%, transparent); } .b-cell.is-today.is-break { background: color-mix(in srgb, var(--accent) 8%, transparent); } /* 課程卡 */ .b-course { position: relative; z-index: 2; margin: 3px; padding: 8px 9px; border: 0; border-left: 3px solid var(--cc); text-align: left; cursor: pointer; overflow: hidden; border-radius: var(--radius-card); background: color-mix(in srgb, var(--cc) var(--card-tint), var(--surface)); color: var(--ink); transition: transform .18s var(--ease), box-shadow .18s var(--ease); display: flex; flex-direction: column; gap: 2px; } .b-course:focus-visible { outline: 2px solid var(--cc); outline-offset: 1px; } .b-course:active { transform: scale(.97); } .b-course__name { font-size: 13.5px; font-weight: 500; line-height: 1.32; color: color-mix(in srgb, var(--cc) 78%, var(--ink)); } .b-course__room, .b-course__teacher { font-size: 11.5px; color: var(--ink-2); line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .b-course__teacher { color: var(--ink-3); } /* 只佔一節的課，塞不下老師 */ .b-course--sm { padding: 5px 7px; gap: 0; } .b-course--sm .b-course__name { font-size: 12.5px; line-height: 1.25; } .b-course--sm .b-course__room { font-size: 10.5px; line-height: 1.25; } .b-course--sm .b-course__teacher { display: none; } /* 現在時間橫線 */ .b-now { position: absolute; left: 0; right: 0; height: 0; border-top: 2px dashed color-mix(in srgb, var(--accent) 70%, transparent); z-index: 3; pointer-events: none; } .b-now::before { content: ""; position: absolute; left: calc(var(--periodcol) - 4px); top: -4px; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); } /* ---------- 課程清單 ---------- */ .clist { display: grid; gap: 8px; } .clist__item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--line); background: var(--surface); border-radius: var(--radius); padding: 11px 14px; cursor: pointer; transition: border-color .18s var(--ease), transform .18s var(--ease); } .clist__item:active { border-color: color-mix(in srgb, var(--cc) 55%, var(--line)); } .clist__bar { width: 4px; align-self: stretch; border-radius: 999px; background: var(--cc); flex: 0 0 auto; } .clist__main { flex: 1 1 auto; min-width: 0; } .clist__name { font-size: 14.5px; font-weight: 500; display: block; } .clist__sub { font-size: 12px; color: var(--ink-3); display: block; line-height: 1.45; } .clist__cr { font-family: var(--font-en); font-size: 12px; color: var(--ink-3); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 1px 9px; flex: 0 0 auto; } /* ---------- 詳細彈窗 ---------- */ .sheet { border: 0; padding: 0; width: min(420px, calc(100vw - 32px)); border-radius: 18px; background: var(--surface); color: var(--ink); box-shadow: var(--shadow-lg); overflow: visible; } .sheet::backdrop { background: rgba(20, 19, 18, .42); backdrop-filter: blur(2px); } .sheet[open] { animation: pop .32s var(--ease); } @keyframes pop { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } } .sheet__close-form { position: absolute; top: 10px; right: 10px; } .sheet__close { border: 0; background: var(--surface-2); width: 30px; height: 30px; border-radius: 999px; cursor: pointer; color: var(--ink-3); line-height: 1; } .sheet__body { padding: 24px; } .sheet__tag { display: inline-block; font-size: 11.5px; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--cc) var(--card-tint), var(--surface)); color: color-mix(in srgb, var(--cc) 75%, var(--ink)); border: 1px solid color-mix(in srgb, var(--cc) 30%, transparent); } .sheet__name { font-size: 22px; font-weight: 700; margin: 10px 0 16px; line-height: 1.3; } .sheet__rows { display: grid; gap: 1px; background: var(--line-2); border-radius: 10px; overflow: hidden; } .sheet__row { display: flex; justify-content: space-between; gap: 14px; background: var(--surface-2); padding: 9px 12px; font-size: 13.5px; } .sheet__row dt { color: var(--ink-3); flex: 0 0 auto; } .sheet__row dd { text-align: right; } .sheet__note { margin-top: 14px; font-size: 13px; color: var(--ink-2); padding: 10px 12px; border-radius: 10px; background: var(--accent-soft); } /* ---------- 頁尾 ---------- */ .foot { position: relative; z-index: 1; text-align: center; font-size: 12px; color: var(--ink-3); padding: 0 var(--pad) 40px; } /* ---------- 使用說明頁 ---------- */ .wrap--help { max-width: 780px; } .help { display: grid; gap: 12px; } .help__card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; box-shadow: var(--shadow-sm); } .help__card--note { background: var(--surface-2); } .help__title { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; margin-bottom: 12px; } .help__num { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--radius-pill); background: var(--accent); color: #fff; font-family: var(--font-en); font-size: 13px; font-weight: 600; } :root[data-theme="dark"] .help__num { color: #17161a; } .help__list { display: grid; gap: 7px; padding-left: 2px; } .help__list li { position: relative; padding-left: 16px; font-size: 14px; color: var(--ink-2); line-height: 1.65; } .help__list li::before { content: ""; position: absolute; left: 2px; top: 10px; width: 5px; height: 5px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 60%, transparent); } .help__list b { color: var(--ink); font-weight: 500; } .help__back { text-align: center; } kbd { font-family: var(--font-en); font-size: 12px; padding: 1px 7px; margin: 0 1px; border-radius: 5px; border: 1px solid var(--line); border-bottom-width: 2px; background: var(--surface-2); color: var(--ink); white-space: nowrap; } code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; padding: 1px 6px; border-radius: 5px; background: var(--accent-soft); color: var(--accent-ink); } /* ---------- 手機 ---------- */ @media (max-width: 640px) { :root { --rowh: 46px; --periodcol: 34px; --pad: 14px; /* 讓五天剛好塞滿螢幕寬，不用左右滑 */ --daycol: minmax(0, 1fr); } /* 頂部壓成一排，別吃掉太多畫面高度 */ .topbar__inner { padding: 9px var(--pad); gap: 10px; } .brand { flex: 0 0 auto; } .brand__text { display: none; } .switch { flex: 1 1 auto; justify-content: center; } .switch__btn { padding: 6px 18px; } .actions { flex: 0 0 auto; gap: 5px; } .iconbtn { width: 32px; height: 32px; } .backlink { font-size: 12.5px; padding: 5px 10px; } .wrap { padding: 20px var(--pad) 40px; gap: 22px; } .hero { gap: 16px; } .hero__name { font-size: 34px; } .hero__sub { font-size: 13.5px; margin-top: 4px; } .help__card { padding: 16px 16px; } .help__title { font-size: 15px; } .help__list li { font-size: 13.5px; } /* 四格統計改 2×2，數字才不會擠在一起 */ .stats { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .stat { min-width: 0; padding: 9px 12px; } .stat dd { font-size: 21px; } .today { padding: 14px; } .today__item { padding: 6px 12px 6px 9px; font-size: 13px; } /* 課表：整張塞進畫面，字級跟著縮 */ .board { min-width: 0; } .b-corner, .b-day { font-size: 12px; padding: 7px 0; } .b-day span { font-size: 10px; } .b-period b { font-size: 11.5px; } .b-period i { font-size: 8.5px; } .b-course { margin: 2px; padding: 5px; border-left-width: 3px; border-radius: 8px; } .b-course__name { font-size: 11px; line-height: 1.22; } .b-course__room { font-size: 9.5px; line-height: 1.2; } /* 窄欄位放不下老師，點卡片看詳細就好 */ .b-course__teacher { display: none; } .b-course--sm { padding: 4px 5px; } .b-course--sm .b-course__name { font-size: 10.5px; } .b-course--sm .b-course__room { display: none; } .clist__item { padding: 10px 12px; gap: 10px; } .clist__name { font-size: 14px; } .clist__sub { font-size: 11.5px; } /* 詳細改成底部彈出，比較接近手機原生操作 */ .sheet { width: 100%; max-width: none; margin: 0; top: auto; bottom: 0; border-radius: 20px 20px 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); max-height: 85vh; overflow-y: auto; } .sheet[open] { animation: sheetup .3s var(--ease); } .sheet__body { padding: 22px 20px 26px; } } @keyframes sheetup { from { opacity: 0; transform: translateY(100%); } to { opacity: 1; transform: none; } } /* 瀏海 / 底部 home indicator 的安全區（橫向拿頁面邊距當下限） */ @supports (padding: max(0px, env(safe-area-inset-left))) { .topbar__inner, .wrap, .foot { padding-left: max(var(--pad), env(safe-area-inset-left)); padding-right: max(var(--pad), env(safe-area-inset-right)); } .foot { padding-bottom: calc(40px + env(safe-area-inset-bottom)); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } } /* ---------- 列印 ---------- */ @media print { .topbar, .glow, .today, .listwrap, .foot, .hint { display: none !important; } body { background: #fff; } .board-scroll { overflow: visible; box-shadow: none; } .board { min-width: 0; } .wrap { padding: 0; } }