/* ========================================== 共用元件：月曆（js/calendar.js 的樣式） ------------------------------------------ 由「會員專區總覽」與「報名課程的行事曆檢視」共用。 ⚠️ 這一份**不要**併進 style.css：style.css 已經是並行施工的熱點檔， 而月曆是一個自成一格的元件，獨立檔案兩邊都能載、也不會互相卡住。 🔴 全部尺寸用 rem，不可以寫 px。 右上角有文字大小切換（改 的 font-size），寫死 px 的地方按「大」不會放大。 唯一的例外是格線的 1px 邊框——邊框放大並不會讓字更好讀，只會讓格子變糊。 ========================================== */ .cal { /* 容器不自帶外距：間距由外層的 .register-box 之類的容器提供 （本專案規範：間距由容器提供，元件不自帶 margin） */ display: block; } /* ── 月份切換列 ── */ .cal-head { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1rem; } .cal-month { /* flex: 1 讓月份標題吃掉中間所有空間，兩顆箭頭因此貼在左右兩端， 切換月份時標題寬度變化（「2026 年 9 月」vs「2026 年 12 月」）不會讓箭頭左右跳動 */ flex: 1; margin: 0; font-size: 1.125rem; font-weight: 700; color: var(--color-heading); text-align: center; } .cal-nav, .cal-today { display: inline-flex; align-items: center; justify-content: center; /* 2.5rem ＝ 45px（預設 18px 根字級）。長輩使用者的點擊目標不要小於 44px */ min-width: 2.5rem; min-height: 2.5rem; padding: 0 0.625rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-surface); color: var(--color-text); font-size: 0.9375rem; font-weight: 600; transition: background-color 0.2s ease-out, color 0.2s ease-out, border-color 0.2s ease-out; } .cal-nav svg { width: 1.125rem; height: 1.125rem; } /* hover 沿用全站標準：金色漸層 ＋ 深字（見 style.css 七之二節： 紫色加深的變化幅度只有 1.24 倍，長輩看不出來） */ .cal-nav:hover, .cal-nav:focus-visible, .cal-today:hover, .cal-today:focus-visible { background-image: linear-gradient(135deg, var(--gold-from), var(--gold-to)); border-color: var(--gold-from); color: var(--color-on-gold); } /* ── 月份格線 ── */ .cal-grid { width: 100%; border-collapse: collapse; /* fixed 是必要的，不是最佳化：auto 會讓有課程的那幾欄被課程名稱撐寬， 七欄變成寬窄不一，看起來不像月曆 */ table-layout: fixed; } /* 表格標題給讀螢幕軟體用，視覺上隱藏。 ⚠️ 不用 display: none——那樣會被略讀，等於沒寫 */ .cal-caption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .cal-grid th { padding: 0.5rem 0.25rem; border: 1px solid var(--color-border); background-color: var(--color-bg-alt); font-size: 0.875rem; font-weight: 600; color: var(--color-muted); text-align: center; } .cal-grid th.is-weekend { color: var(--color-primary); } .cal-cell { /* vertical-align: top 讓日期數字貼齊格子上緣；預設的 middle 會讓 有課程與沒課程的格子裡數字高度不一致 */ vertical-align: top; position: relative; height: 4.5rem; padding: 0.375rem; border: 1px solid var(--color-border); } .cal-cell.is-blank { /* 空白格用底色淡化，讓「這個月從星期幾開始」一眼看得出來 */ background-color: var(--color-bg-alt); } .cal-cell.is-weekend:not(.is-blank) { background-color: color-mix(in srgb, var(--color-bg-alt) 55%, transparent); } .cal-daynum { display: block; font-size: 0.9375rem; font-weight: 600; color: var(--color-text); line-height: 1.2; } /* 🔴 M13（客戶 2026-08-17）：有課的日期格是一顆真的按鈕。 ⚠️ **只有有課的日子才會輸出這個元素**（見 js/calendar.js）， 所以「沒有課的格子不可點、也沒有 hover」是靠不輸出達成的， 不是靠 `:not()` 選擇器——少一個會寫錯的條件。 ⚠️ 刻意**不設 position**：格子裡的圓點是絕對定位、基準是 `.cal-cell`， 這裡一設 position 就會改成以按鈕為基準，圓點位置會跑掉。 ⚠️ 手機讓它撐滿整格（好按），768 以上改回內容高度 ——那時格子裡有課程名稱的 chip 連結，撐滿會蓋住它們，變成點不到。 */ .cal-daybtn { display: block; width: 100%; height: 100%; padding: 0; border: 0; border-radius: var(--radius-sm); background: none; text-align: left; cursor: pointer; transition: background-color 0.2s ease-out, box-shadow 0.2s ease-out; } /* hover／focus 沿用全站標準（金色漸層 ＋ 深字，見 style.css 七之二節）。 🔴 不可以只改文字顏色：單一訊號對長輩常常等於沒有訊號。 這裡是「底色變金 ＋ 日期數字轉深色 ＋ 外框」三個訊號。 */ .cal-daybtn:hover, .cal-daybtn:focus-visible { background-image: linear-gradient(135deg, var(--gold-from), var(--gold-to)); box-shadow: inset 0 0 0 1px var(--color-on-gold); } .cal-daybtn:hover .cal-daynum, .cal-daybtn:focus-visible .cal-daynum { color: var(--color-on-gold); } /* M13：手機才顯示的操作提示。 ⚠️ 768 以上格子裡就看得到課程名稱，不需要這一句（顯示了反而是雜訊）。 */ .cal-hint { margin: 0.75rem 0 0; font-size: 0.875rem; color: var(--color-muted); } /* 今天：用「粗外框 ＋ 底色 ＋ 日期數字轉主色」三個訊號一起。 🔴 只靠底色不夠——長輩對淺色底色的差異不敏感，這是本專案反覆驗證過的 （見 style.css 七之二節的 hover 標準）。 */ .cal-cell.is-today { background-color: color-mix(in srgb, var(--brand-purple-soft) 18%, transparent); box-shadow: inset 0 0 0 2px var(--color-primary); } .cal-cell.is-today .cal-daynum { color: var(--color-primary); } /* 有課程的日子加一個圓點。 ⚠️ 圓點是 aria-hidden：課程資訊由下方 .cal-list 完整提供， 讀螢幕軟體念一個「•」沒有意義。 */ .cal-dot { position: absolute; top: 0.375rem; right: 0.375rem; display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; height: 1.125rem; padding: 0 0.25rem; border-radius: 999px; background-color: var(--color-primary); color: #FFFFFF; font-size: 0.6875rem; font-weight: 700; line-height: 1; } .cal-chips { /* 窄螢幕不顯示課程名稱，只留日期與圓點——格子放不下，硬塞會裁字。 課程名稱由下方 .cal-list 負責（見 js/calendar.js 那段註解）。 */ display: none; } .cal-chip { margin-top: 0.25rem; padding: 0.1875rem 0.375rem; border-radius: var(--radius-sm); background-color: color-mix(in srgb, var(--brand-purple-soft) 30%, transparent); color: var(--color-primary); font-size: 0.75rem; font-weight: 600; line-height: 1.35; /* 課程名稱很長，格子裡只顯示兩行，其餘裁掉——完整名稱在下方列表。 -webkit-box 同時擔任這個元素的 display（不要再另外寫一條 display: block， 那只會被這一行覆蓋，讀的人還以為是兩件事）。 */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; transition: background-color 0.2s ease-out, color 0.2s ease-out; } .cal-chip:hover, .cal-chip:focus-visible { background-image: linear-gradient(135deg, var(--gold-from), var(--gold-to)); color: var(--color-on-gold); } /* ── 格子下方的月份課程列表 ── */ .cal-listwrap { margin-top: 1.25rem; } .cal-list-title-head { margin: 0 0 0.75rem; font-size: 1rem; font-weight: 700; color: var(--color-heading); } .cal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; } .cal-list-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background-color: var(--color-surface); transition: background-color 0.2s ease-out, border-color 0.2s ease-out; } .cal-list-date { flex-shrink: 0; min-width: 5.5rem; font-size: 0.9375rem; font-weight: 700; color: var(--color-primary); } .cal-list-body { /* min-width: 0 不能省：flex 子項預設 min-width: auto， 長課程名稱會把整列撐寬造成橫向溢出 */ min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 0.125rem; } .cal-list-title { font-size: 0.9375rem; font-weight: 600; color: var(--color-text); overflow-wrap: anywhere; } .cal-list-meta { font-size: 0.8125rem; color: var(--color-muted); } .cal-list-arrow { flex-shrink: 0; width: 1.125rem; height: 1.125rem; color: var(--color-muted); transition: transform 0.2s ease-out, color 0.2s ease-out; } /* 報名已截止（LINE LIFF 全部課程清單，window.renderEventList 的 event.closed）：灰底、字色轉淡，一眼分得出不能報名 */ .cal-list-item.is-closed .cal-list-link { background-color: var(--gray-100); border-color: var(--gray-100); } .cal-list-item.is-closed .cal-list-date, .cal-list-item.is-closed .cal-list-title { color: var(--color-muted); } .cal-list-link:hover, .cal-list-link:focus-visible { background-image: linear-gradient(135deg, var(--gold-from), var(--gold-to)); border-color: var(--gold-from); } .cal-list-link:hover .cal-list-date, .cal-list-link:hover .cal-list-title, .cal-list-link:hover .cal-list-meta, .cal-list-link:hover .cal-list-arrow, .cal-list-link:focus-visible .cal-list-date, .cal-list-link:focus-visible .cal-list-title, .cal-list-link:focus-visible .cal-list-meta, .cal-list-link:focus-visible .cal-list-arrow { color: var(--color-on-gold); } .cal-list-link:hover .cal-list-arrow, .cal-list-link:focus-visible .cal-list-arrow { transform: translateX(3px); } .cal-empty { margin: 0; padding: 1.25rem; border: 1px dashed var(--color-border); border-radius: var(--radius-sm); color: var(--color-muted); text-align: center; } /* M13：被點到的那一天，在下方清單裡短暫高亮。 ⚠️ 用底色 ＋ 左側色條兩個訊號，不只改底色（淺底色的差異長輩不容易察覺）。 ⚠️ 這個 class 由 JS 在 1.6 秒後移除——**不是選取狀態**， 留著不消會讓人以為下次進來還會在。 */ .cal-list-item.is-highlight .cal-list-link { background-color: color-mix(in srgb, var(--brand-purple-soft) 22%, transparent); border-color: var(--color-primary); box-shadow: inset 3px 0 0 0 var(--color-primary); } /* ── 768px 起：格子放得下課程名稱了，改成格線為主、列表為輔 ── */ @media (min-width: 768px) { .cal-cell { height: 6.5rem; } .cal-chips { display: block; } /* M13：按鈕改回內容高度，不要蓋住下方的課程名稱 chip 連結（它們在按鈕外面）。 */ .cal-daybtn { height: auto; } /* M13：這一句提示只給手機看（桌機格子裡就有課程名稱）。 */ .cal-hint { display: none; } /* ⚠️ 原本這裡有一條 `.cal-cell.has-events .cal-dot:empty { display: none }`， M13 之後**圓點一律有數字**（連 1 堂也顯示「1」），`:empty` 永遠不成立， 那條規則已經沒有作用，所以移除，不留死規則。 桌機同時看得到圓點數字與課程名稱是刻意的：數字回答「這天共幾堂」， chip 回答「是哪幾堂」——格子放不下全部 chip 時（3 堂以上）數字才有用。 */ .cal-list-date { min-width: 6.5rem; } } @media (prefers-reduced-motion: reduce) { .cal-list-link:hover .cal-list-arrow, .cal-list-link:focus-visible .cal-list-arrow { transform: none; } }