/* 記帳中-多筆 — #379 / #380 / #381,docs/DESIGN-BATCH.md §4。 * * 這一頁是「記一筆」底下的子頁,所以外框、卡片、`.seg`、`.f`、`.kind-hint`、 * `.fab` 那幾樣全部沿用 style.css 與 add.css 的既有語彙 —— **D-H16 的原話是 * 「風格、配色與『記帳中』一模一樣」,所以這一檔不准長出第二套字級與底色。** * 這裡只寫這一頁自己多出來的五塊:那顆大的 ＋、蓋在頁面上的那一層(檢閱)、 * 縮圖格、一張卡上多出來的記號,以及自訂分攤那幾列。 * * **每一個按得到的東西都 ≥ 44×44** — D-F100。那條規則在 test_browsers 的版面矩陣 * 上是硬斷言,而這一頁上按得到的東西比別頁多(每張卡七顆)。 * * **沒有 `@media (prefers-color-scheme)`** — #259:深色由 themes.css 的 token 回答, * 一支 view 自己讀系統偏好的話,鎖定的主題管不到它。 */ /* **左右一格內距都沒有** — D-F109 / T1。這一頁與單筆頁的卡要逐格同寬(D-F108 第 1 點),而外框的 16px 已經由 `.wrap` 給了:這裡再加一次的下場是多筆頁的卡比單 筆頁窄 32px(390 的視口上量到 326 對 358),兩頁並排看起來像兩個 app。 */ #v-batch { padding-bottom: 24px; } /* 桌面:頁底再讓一顆浮鈕的高加 16px — #101,理由與欄寬、鈕的位置在 add.css 的 「桌面:記一筆 / 多筆」那一段。只動下緣,左右照上一條的規矩。 */ @media (min-width: 1024px) { #v-batch { padding-bottom: calc(24px + 56px + 16px); } } /* --------------------------------------------------------- 那顆大的 ＋ * * D-H16 第 2 點的 (b):一顆大的 ＋,按下去多一張空白的帳。**它是一整行的虛線 * 大格**(同 add.css 的 `.caplib`:一扇門,不是一顆小鈕),而不是一顆藥丸 —— * 它站在頂卡與那一疊卡中間,而那個位置上「按這裡多一張」要一眼看得出來。 */ .ba-add { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin: 12px 0; font-size: 1.375rem; line-height: 1; font-weight: 600; color: var(--accent); background: var(--card); border: 1px dashed var(--line); border-radius: var(--radius-s); cursor: pointer; } .ba-add span { font-size: 0.9375rem; font-weight: 500; color: var(--dim); } .ba-empty { color: var(--dim); margin: 20px 4px; line-height: 1.6; } /* --------------------------------------------------------- 頂端那張警告卡 * * #450 ①。**這裡以前是 `

`,而這一檔裡沒有任何一條規則叫那個 * 名字** —— 一句與說明文字同色同字級的話夾在頂卡上面,使用者看不見它;而它要說的 * 是「AI 辨識出 N 筆,跟你選的『單筆』不一樣」,那是使用者按下去之前不知道的事。 * * 形狀照 account.css 的 `.ac-confirm`(全站「這件事要看一眼」的框就是這一個: * `--warn` 的細框 + 卡的內距),而它長在 `.card` 上 —— 這一頁上所有東西都是卡。 */ .ba-warn { border-color: var(--warn); } .ba-warn-say { margin: 0; line-height: 1.6; } /* 「知道了」撐到 D-F100 的下限。它靠右:主要動作在那一疊卡上,這一顆是收掉一句 已經讀完的話。 */ .ba-warn-x { min-height: 44px; margin-top: 10px; margin-left: auto; display: block; } /* 送出鈕底下那一行小計 — #450 ④。**在鈕的下面而不是上面**:使用者按之前最後看 一眼的東西就該貼著那顆鈕;`--dim` 是因為它是覆述,不是一個要改的數字。 零張卡時整段(清除 / 送出 / 小計)都不進 DOM —— 一行「總共 NT$0」不是資訊。 */ .ba-total { margin: 10px 4px 0; text-align: right; color: var(--dim); font-size: 0.875rem; line-height: 1.5; } /* 送出那一列 —— **形狀逐字照單筆頁的 `.ad-acts`**(add.css)— D-F108 第 6 點: 左邊一顆小的「清除」、右邊那顆主鈕。兩頁的那一列因此是同一個版面,而不是各自 量出來的一份。 */ .ba-acts { display: flex; gap: 10px; margin-top: 18px; } .ba-acts #baSend { margin-top: 0; } #baClear { flex: 0 0 96px; } /* 選好照片之後那一層(`.sh-*`,兩頁共用)的規則從 #112 起住在 add.css:記一筆是第一 * 段,首頁畫出第一個數字之前就按得到相機,而這支檔案是第二段。 */ /* ---------------------------------------------------------------- 卡 */ .ba-card { margin: 12px 0; } .ba-card input { min-height: 44px; box-sizing: border-box; width: 100%; } /* 1200 以上一張卡裡「日期 | 金額」並排 — #101(D-H43 2)。卡本身仍然一列一張 (`#baCards` 不分欄):卡是一疊照片的對帳單,上下讀才對得上順序。 格子是寫死的列號,不是 auto-flow:日期那一欄多一顆收合鈕(第 2 列),兩邊的列 標與輸入格因此落在同一列(第 3、4 列)。其餘每一格橫跨兩欄、照文件順序流在後 面。收起來的格子是 `display: none`,不佔格。 自動排版的游標從第 1 列找起,會把橫跨兩欄的格子塞進第一個整列都空著的列:沒有 「讀錯」那一行(第 5 列空)而有重複警告(第 6 列)時,「說明」會掉進第 5 列、 跑到警告上面,和它的輸入格分家。`::before` 是一格零高的佔位,把 1–6 列整片 佔住,其餘的格子因此只能從第 7 列往下排,照文件順序。 */ @media (min-width: 1200px) { .ba-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; } .ba-card::before { content: ""; grid-column: 1 / -1; grid-row: 1 / 7; pointer-events: none; } .ba-card > * { grid-column: 1 / -1; } .ba-card > .ba-head { grid-row: 1; } .ba-card > .fold { grid-column: 1; grid-row: 2; } .ba-card > label[for^="ba-date-"] { grid-column: 1; grid-row: 3; } .ba-card > input[data-f="date"] { grid-column: 1; grid-row: 4; } .ba-card > .ba-guess[data-folded] { grid-column: 1; grid-row: 5; } .ba-card > label[for^="ba-amt-"] { grid-column: 2; grid-row: 3; } .ba-card > input[data-f="amount"] { grid-column: 2; grid-row: 4; } .ba-card > .ba-amt + .ba-guess { grid-column: 2; grid-row: 5; } .ba-card > .ba-dup { grid-column: 2; grid-row: 6; } } .ba-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } .ba-once { font-weight: 600; } /* `--ok` 在 #392 進了主題契約,所以那個退路值拿掉了 —— 在那之前這一行畫出來的 永遠是 `--accent`(那才是「兩清」與「主要動作」同色的原因)。 */ .ba-done { color: var(--ok); } .ba-qr, .ba-guess { color: var(--dim); font-size: 0.8125rem; } .ba-fail { color: var(--danger); } /* 「金額相同,是不是重複記錄?」 — #450 ⑤(同一筆交易的發票 + 刷卡簽單一起拍 進來)。**它是一顆鈕**:點一下就收掉(兩張同價的咖啡是真的兩筆),而一個點得動 的東西鍵盤要走得到。整行、靠左、`--warn-soft` 的底 —— 它說的是這一張卡的事, 所以長在卡裡面而不是頁頂那張警告卡上。 */ .ba-dup { display: block; width: 100%; box-sizing: border-box; min-height: 44px; margin: 8px 0 0; padding: 10px 12px; text-align: left; font: inherit; font-size: 0.8125rem; line-height: 1.5; cursor: pointer; color: var(--warn); background: var(--warn-soft); border: 1px solid var(--warn); border-radius: var(--radius-s); } /* `hidden` 那一格由 `syncSums()` 就地開關(打字時不重畫整頁),而上面那條 `display: block` 壓得過瀏覽器預設的 `[hidden]`。 */ .ba-dup[hidden] { display: none; } /* 信心不足的那一格 — §4:金額標黃,而不是幫使用者決定它是錯的。 */ /* 同上:`--warn-soft` 進了契約,而它以前的退路是全站唯一一個寫死的語意色 (`#fff3b0`,一塊亮黃底 —— 深色主題下它與 `--ink` 的對比是 1.2)。 */ .ba-low { background: var(--warn-soft); } /* 分類那一排逐格是單筆頁的 `.cats`(add.css)—— 這裡只把每一顆撐到 D-F100 的 下限:那一排在單筆頁上是 icon + 字兩行,在這裡也是。 */ .ba-cats button { min-height: 44px; } .ba-cardacts { display: flex; gap: 10px; margin-top: 12px; } .ba-cardacts button { flex: 1; min-height: 44px; } /* 已經記下的那幾張淡出去,但仍然讀得到(部分失敗時人要看得出哪幾筆已經進去)。 */ .ba-ok { opacity: .62; } .ba-failed { border-color: var(--danger); } /* 來源縮圖**在這一頁上按得動** — #574 推翻了 D-H11 的「唯讀」半句(使用者 2026-09-14 原話):每一張右上角一顆移除鈕,列尾一格虛線的「＋」取代了以前那顆 文字鈕「再加照片」。兩顆的形狀寫在 add.css 的 `.att*` 那一段(畫它們的是兩頁共 用的 `attachHTML()`),這裡只調大小。**仍然沒有勾選** —— 照片存不存在選圖頁那 一次就問完了(D-H11 的另外半句沒有變)。 */ .ba-card .atts { margin: 10px 0; } .ba-card .attshot { min-width: 64px; min-height: 64px; } /* 三列收合 — #555。**這一檔一條 `.fold` 規則都沒有**:那顆鈕的長相住在 `views/add.css`(view css 掛在 上都是全站生效),兩頁因此吃同一段 —— D-F108 第 1 點的「逐格相同」不是兩邊各修到看起來一樣。要改就改那一檔。 這裡只補收起來那幾格的那一條:`hidden` 壓不過寫著 `display` 的規則(`#baPayer` 是 `.seg`、`.ba-guess` 是 block)。限定在 `#v-batch` 裡,理由同 add.css 那一條。 */ #v-batch [hidden] { display: none !important; }