展開。
*
* 斷點用 container query（依「容器」寬度而非「視窗」）：
* 側欄裡的窄表格在桌機也會卡片化 = 真正可重用。需要在外層包 `.tl-table-wrap`。
*
* 用法總覽見 /admin/table-patterns.html（living demo）。
* ============================================================================= */
/* -----------------------------------------------------------------------------
* 元件層 token（區域變數；可在採用頁 override，預設吃語意層）
* 同時定義在 wrap 與 table，讓「有包 wrap」與「裸用 .tl-table」兩種都成立。
* --------------------------------------------------------------------------- */
.tl-table-wrap,
.tl-table {
--tl-table-bg: var(--tl-bg-elevated); /* 表格底 / 捲動陰影遮罩色 */
--tl-table-head-bg: var(--tl-bg-elevated-2); /* 表頭底 */
--tl-table-head-fg: var(--tl-text); /* 表頭字 */
--tl-table-fg: var(--tl-text); /* 內容字 */
--tl-table-muted: var(--tl-text-muted); /* 次要 / 標籤字（AA on elevated） */
--tl-table-line: var(--tl-border-subtle); /* 列分隔線 */
--tl-table-line-strong: var(--tl-border); /* 表頭下緣 */
--tl-table-row-hover: color-mix(in srgb, var(--tl-text) 7%, transparent);
--tl-table-zebra: color-mix(in srgb, var(--tl-text) 4%, transparent);
--tl-table-radius: var(--tl-radius-card);
--tl-table-cell-py: var(--tl-space-3);
--tl-table-cell-px: var(--tl-space-4);
--tl-table-edge-shadow: rgba(2, 6, 23, 0.45); /* 邊緣捲動陰影（深色面） */
}
/* =============================================================================
* 容器（responsive 邊界）
* container-type: inline-size → 下方 @container 依此容器寬度判斷，而非視窗。
* ========================================================================== */
.tl-table-wrap {
container: tl-table / inline-size;
border-radius: var(--tl-table-radius);
}
/* =============================================================================
* 基礎表格樣式（任何頁可單用 .tl-table，不一定要包 wrap）
* border-collapse: separate → 讓 sticky 首欄 / 表頭的背景與圓角正常。
* ========================================================================== */
.tl-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
background: var(--tl-table-bg);
color: var(--tl-table-fg);
font-family: var(--tl-font-sans);
font-size: var(--tl-text-sm);
line-height: var(--tl-leading-snug);
text-align: left;
}
.tl-table caption {
caption-side: top;
text-align: left;
color: var(--tl-table-muted);
font-size: var(--tl-text-xs);
padding: var(--tl-space-2) var(--tl-table-cell-px);
}
.tl-table th,
.tl-table td {
padding: var(--tl-table-cell-py) var(--tl-table-cell-px);
border-bottom: 1px solid var(--tl-table-line);
vertical-align: middle;
}
.tl-table thead th {
background: var(--tl-table-head-bg);
color: var(--tl-table-head-fg);
font-weight: var(--tl-weight-bold);
font-size: var(--tl-text-xs);
letter-spacing: 0.02em;
white-space: nowrap;
border-bottom: 1px solid var(--tl-table-line-strong);
}
/* 圓角：頭尾兩端 */
.tl-table thead th:first-child { border-top-left-radius: var(--tl-table-radius); }
.tl-table thead th:last-child { border-top-right-radius: var(--tl-table-radius); }
.tl-table tbody tr:last-child td { border-bottom: 0; }
.tl-table tbody tr:last-child td:first-child { border-bottom-left-radius: var(--tl-table-radius); }
.tl-table tbody tr:last-child td:last-child { border-bottom-right-radius: var(--tl-table-radius); }
/* hover / zebra（滑鼠裝置才 hover；觸控不誤觸） */
@media (hover: hover) {
.tl-table tbody tr:hover td { background: var(--tl-table-row-hover); }
}
.tl-table--zebra tbody tr:nth-child(even) td { background: var(--tl-table-zebra); }
/* 緊湊版 */
.tl-table--compact { --tl-table-cell-py: var(--tl-space-2); --tl-table-cell-px: var(--tl-space-3); }
/* 數字欄：右對齊 + 等寬數字（金額 / 點數 / 分數對齊好讀） */
.tl-table .tl-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* 鍵盤可聚焦的列 / 連結，給可見 focus ring */
.tl-table a:focus-visible,
.tl-table button:focus-visible,
.tl-table [tabindex]:focus-visible {
outline: var(--tl-ring-width) solid var(--tl-ring);
outline-offset: var(--tl-ring-offset);
border-radius: var(--tl-radius-xs);
}
/* =============================================================================
* 行內狀態標籤（表格的「狀態」欄到處都要；附帶提供，純 token、AA）
* 用 currentColor 邊框 + 淡底，文字用實色確保對比。
* ========================================================================== */
.tl-tag {
display: inline-flex; align-items: center; gap: var(--tl-space-1);
padding: 2px var(--tl-space-2);
border-radius: var(--tl-radius-full);
font-size: var(--tl-text-xs); font-weight: var(--tl-weight-bold);
white-space: nowrap; line-height: 1.4;
border: 1px solid currentColor;
background: color-mix(in srgb, currentColor 12%, transparent);
}
.tl-tag--ok { color: var(--tl-success); }
.tl-tag--warn { color: var(--tl-warning); }
.tl-tag--err { color: var(--tl-danger); }
.tl-tag--info { color: var(--tl-info); }
.tl-tag--gold { color: var(--tl-gold-strong); }
.tl-tag--mute { color: var(--tl-table-muted); }
/* =============================================================================
* 模式 A — 橫向捲動 + 首欄釘住 + 邊緣漸層提示
* 邊緣漸層用經典「background-attachment: local」四層手法：
* 遮罩（local，貼著內容）在捲到頭/尾時蓋住陰影；
* 陰影（scroll，貼著容器）在還能往該方向捲時露出 → 純 CSS 的「還有更多」提示。
* ========================================================================== */
.tl-table-wrap--scroll {
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling: touch;
background-color: var(--tl-table-bg);
background-image:
/* 遮罩：左、右（不透明 table 底色，跟著內容捲動） */
linear-gradient(90deg, var(--tl-table-bg), rgba(0, 0, 0, 0)),
linear-gradient(90deg, rgba(0, 0, 0, 0), var(--tl-table-bg)),
/* 陰影：左、右（固定在容器邊緣） */
radial-gradient(farthest-side at 0 50%, var(--tl-table-edge-shadow), rgba(0, 0, 0, 0)),
radial-gradient(farthest-side at 100% 50%, var(--tl-table-edge-shadow), rgba(0, 0, 0, 0));
background-position: 0 0, 100% 0, 0 0, 100% 0;
background-repeat: no-repeat;
background-size: 40px 100%, 40px 100%, 16px 100%, 16px 100%;
background-attachment: local, local, scroll, scroll;
}
.tl-table-wrap--scroll .tl-table {
/* 讓容器的邊緣陰影能透出來：cell 預設不再鋪滿不透明底，改由容器底色襯。 */
background: transparent;
}
.tl-table-wrap--scroll .tl-table thead th { background: var(--tl-table-head-bg); }
/* 首欄釘住（橫捲時第一欄不動，對照好讀） */
.tl-table--sticky-first thead th:first-child,
.tl-table--sticky-first tbody td:first-child {
position: sticky;
left: 0;
z-index: 1;
background: var(--tl-table-bg);
}
.tl-table--sticky-first thead th:first-child {
background: var(--tl-table-head-bg);
z-index: 2;
}
/* 釘住欄右側給一道細分隔，視覺上「浮」在捲動內容上 */
.tl-table--sticky-first thead th:first-child::after,
.tl-table--sticky-first tbody td:first-child::after {
content: ""; position: absolute; top: 0; right: -1px; width: 1px; height: 100%;
background: var(--tl-table-line-strong);
}
.tl-table--zebra.tl-table--sticky-first tbody tr:nth-child(even) td:first-child {
/* 斑馬列時釘住欄也要不透明、含斑馬色，避免捲動透出後排內容 */
background: var(--tl-table-bg);
box-shadow: inset 0 0 0 999px var(--tl-table-zebra);
}
/* 表頭釘住（高表格捲動時表頭不動）— 可與首欄釘住併用 */
.tl-table--sticky-head thead th { position: sticky; top: 0; z-index: 3; }
.tl-table--sticky-head.tl-table--sticky-first thead th:first-child { z-index: 4; }
/* =============================================================================
* 模式 B — 卡片堆疊（容器 ≤ 40rem 時每列變一張卡）
* 需求：每個 加 data-label="欄名"，窄寬時用 ::before 帶出欄名。
* ========================================================================== */
@container tl-table (max-width: 40rem) {
.tl-table-wrap--cards .tl-table { background: transparent; font-size: var(--tl-text-sm); }
/* 視覺隱藏表頭（卡片用 data-label 取代欄名；保留在 DOM 供桌機/語意） */
.tl-table-wrap--cards .tl-table thead {
position: absolute; width: 1px; height: 1px;
padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.tl-table-wrap--cards .tl-table,
.tl-table-wrap--cards .tl-table tbody,
.tl-table-wrap--cards .tl-table tr,
.tl-table-wrap--cards .tl-table td { display: block; width: 100%; }
.tl-table-wrap--cards .tl-table tbody tr {
background: var(--tl-table-bg);
border: 1px solid var(--tl-table-line-strong);
border-radius: var(--tl-table-radius);
padding: var(--tl-space-1) var(--tl-space-3);
margin-bottom: var(--tl-space-3);
box-shadow: var(--tl-shadow-sm);
}
.tl-table-wrap--cards .tl-table tbody tr:last-child { margin-bottom: 0; }
.tl-table-wrap--cards .tl-table td {
display: flex; align-items: baseline; justify-content: space-between; gap: var(--tl-space-4);
padding: var(--tl-space-2) 0;
border: 0;
border-bottom: 1px solid var(--tl-table-line);
text-align: right;
border-radius: 0 !important;
}
.tl-table-wrap--cards .tl-table td:last-child { border-bottom: 0; }
/* 欄名（左）：取自 data-label */
.tl-table-wrap--cards .tl-table td::before {
content: attr(data-label);
flex: 0 0 auto;
margin-right: var(--tl-space-3);
color: var(--tl-table-muted);
font-size: var(--tl-text-xs);
font-weight: var(--tl-weight-bold);
text-align: left;
white-space: nowrap;
}
/* 沒有 data-label 的 cell（如純動作列）整列鋪滿、不顯標籤 */
.tl-table-wrap--cards .tl-table td:not([data-label])::before { content: none; }
.tl-table-wrap--cards .tl-table td:not([data-label]) { justify-content: stretch; text-align: left; }
/* 卡片內數字欄不需要再強制右對齊（已 space-between） */
.tl-table-wrap--cards .tl-table .tl-num { white-space: normal; }
/* 「以第一欄當卡片標題」的選配：加 .tl-card-title 到該 td */
.tl-table-wrap--cards .tl-table td.tl-card-title {
display: block; text-align: left;
font-size: var(--tl-text-base); font-weight: var(--tl-weight-bold);
padding-top: var(--tl-space-2);
}
.tl-table-wrap--cards .tl-table td.tl-card-title::before { content: none; }
}
/* =============================================================================
* 模式 C — 優先欄收合（次要欄在窄容器隱藏）+ 展開細節
* .tl-col-secondary → 容器 ≤ 40rem 隱藏（先消失）
* .tl-col-tertiary → 容器 ≤ 26rem 隱藏（更窄才消失）
* th 與對應 td 都要加同一個 class。重要欄不加 class = 永遠顯示。
* ========================================================================== */
@container tl-table (max-width: 40rem) {
.tl-table-wrap--priority .tl-col-secondary { display: none; }
}
@container tl-table (max-width: 26rem) {
.tl-table-wrap--priority .tl-col-tertiary { display: none; }
}
/* 列內「更多」展開（純 HTML ，零 JS）。放在 colspan 滿版的 td 裡。 */
.tl-row-more { font-size: var(--tl-text-xs); }
.tl-row-more > summary {
cursor: pointer; list-style: none;
display: inline-flex; align-items: center; gap: var(--tl-space-1);
min-height: 32px; padding: 2px var(--tl-space-2);
color: var(--tl-primary); font-weight: var(--tl-weight-bold);
border-radius: var(--tl-radius-control);
}
.tl-row-more > summary::-webkit-details-marker { display: none; }
.tl-row-more > summary::after {
content: "▾";
transition: transform var(--tl-duration-normal) var(--tl-ease-standard);
}
.tl-row-more[open] > summary::after { transform: rotate(180deg); }
.tl-row-more > summary:focus-visible {
outline: var(--tl-ring-width) solid var(--tl-ring); outline-offset: var(--tl-ring-offset);
}
.tl-row-more .tl-row-more__body {
margin-top: var(--tl-space-2);
display: grid; gap: var(--tl-space-1);
color: var(--tl-table-muted);
}
.tl-row-more .tl-row-more__body > div { display: flex; justify-content: space-between; gap: var(--tl-space-3); }
.tl-row-more .tl-row-more__body b { color: var(--tl-table-fg); font-weight: var(--tl-weight-medium); }
/* =============================================================================
* 共用小工具
* ========================================================================== */
/* 表格內操作鈕（tap target ≥ 44px on touch） */
.tl-table .tl-table-btn {
min-height: 32px; padding: 0 var(--tl-space-3);
display: inline-flex; align-items: center; gap: var(--tl-space-1);
background: transparent; color: var(--tl-primary);
border: 1px solid var(--tl-border); border-radius: var(--tl-radius-control);
font: inherit; font-size: var(--tl-text-xs); font-weight: var(--tl-weight-bold);
cursor: pointer; white-space: nowrap;
transition: border-color var(--tl-duration-normal) var(--tl-ease-standard),
color var(--tl-duration-normal) var(--tl-ease-standard);
}
.tl-table .tl-table-btn:hover { border-color: var(--tl-primary); }
@media (pointer: coarse) {
.tl-table .tl-table-btn { min-height: 44px; }
}
/* 空狀態列 */
.tl-table .tl-table-empty td {
text-align: center; color: var(--tl-table-muted);
padding: var(--tl-space-8) var(--tl-table-cell-px);
}
/* 尊重「減少動態」：把本檔的 transition 收掉（token 也已收斂 duration，這是雙保險） */
@media (prefers-reduced-motion: reduce) {
.tl-row-more > summary::after,
.tl-table .tl-table-btn { transition: none; }
}
|