/* 記一筆:支出/收入切換、大金額輸入、小算盤、分攤列、比例欄位、白話結果句、
分類 icon 列 */
/* 四張卡 — #263。`label.f` 自己帶 14px 的上邊距,那是「上一格與這一格之間」的
距離;卡片自己已經有 18px 的內距,兩段疊在一起會讓每一張卡的第一個列標離卡頂
32px,而其餘每一格是 14px —— 同一張卡上兩種節奏。第一個列標因此不借那段邊距。
**限定在 `#adForm` 裡**:這一檔的規則掛在 上是全站生效的,而 `label.f`
是每一個 view 都在用的形狀(#243 的圓餅踩過這個坑)。 */
#adForm .card > label.f:first-child { margin-top: 0; }
.kind { margin-bottom: 14px; }
/* 編輯模式 — #136:種類鎖住。那三顆在這個模式下不是「暫時不能按」,是沒有東西
可以換(後端改的永遠是原本那個種類),所以它們看起來要像陳述而不是等待。 */
.kind button:disabled { opacity: .45; cursor: not-allowed; }
/* 四顆種類鈕底下那一行小字 — #179。`.kind` 自己的 margin-bottom 是那一排與底下
欄位的距離;小字要貼著鈕,所以用負的上邊距把它拉回去,再由自己接手那段距離。
一行共用、隨選中切換(理由見 add.js 的 paintKindHint),所以這裡不必處理換行:
最長的那一句「之前的支出退回來,會從支出裡扣掉」是 16 個中文字,13px 下約
208px,390 寬的卡放得下一行。放不下時它自己折行,不會擠到上面那四顆鈕。 */
.kind-hint { margin: -8px 0 14px; font-size: 0.8125rem; line-height: 1.5; }
.kind-hint:empty, .kind-hint.hide { display: none; }
/* 「單次 / 週期」那一組 — #236,**從種類鈕底下搬到第四張卡的最上面**(#263):
它站在「日期」那一格前面,而那是使用者裁示要它站的地方。排在卡的第一個位置,
所以上邊距歸卡自己的內距管,這一排只負責自己與底下那一格之間的那一段。
兩顆鈕走 `.seg` 的既有長相(選中 = 底色回 --card、邊線與字換成 --accent),因為
它問的和種類那一排是同一種問題:一次選一個。 */
.rep { margin-bottom: 14px; }
/* 選了週期之後展出來的設定區。裡面每一格都是這張卡既有的形狀(`label.f` + 一顆
`pickHTML` 的下拉、一格 `input`),所以這裡只留最外層的一點呼吸空間;
`label.f` 自己帶著 14px 的上邊距。 */
.rec { margin-bottom: 4px; }
/* 29–31 那一句只在真的挑到那三天時才有字(add.js 的 RECUR.short)。`:empty` 那一
條讓沒話說的時候連那段上邊距一起收掉 —— 同 `.tally:empty` / `.say:empty`。 */
.rec-note { margin-top: 6px; line-height: 1.5; }
.rec-note:empty { display: none; }
/* 週期模式收起「日期」那一格 — #236。`#date` 是 `input`(元素選擇器,0-0-1),
`.hide` 壓得過它;它的列標是 `label.f`(0-1-1)壓得過 `.hide`(0-1-0),所以
要在這裡把特異度拉高 —— 與上面那一排 `#toLabel.hide` 同一個坑(#158)。
`for="date"` 是那個標籤與欄位的關聯本身,不是它排第幾個。 */
#date.hide, label[for="date"].hide { display: none; }
/* 編輯模式那一句,排在種類切換器上面。它要被讀完,不是一行標籤。 */
.ad-amend { margin-bottom: 12px; line-height: 1.5; }
/* 退款那一句指路 — #247 §4。它站在那一行小字底下(#263 把「單次 / 週期」搬走
之後,它與金額欄之間就沒有別的東西了),而 `.kind-hint` 的 -8px 上邊距是為了
貼住上面那四顆鈕 —— 這一句貼的是它上面那一行字,所以不借那個負邊距,只留一段
自己的呼吸空間。沒話說的時候連上邊距一起收掉(同
`.tally:empty` / `.say:empty`),所以它不需要第二個 hide class。 */
.kind-where { margin: -6px 0 14px; font-size: 0.8125rem; line-height: 1.5; }
.kind-where:empty { display: none; }
input.amount { font-size: 1.875rem; font-weight: 620; text-align: center; padding: 14px; letter-spacing: -.02em; }
/* 提示字要看起來是提示,不是一個已經填好的值 —— 那一格是 30px 粗體,照原樣
* 印「請輸入金額」會讓人以為裡面有東西、還得先刪掉。欄位本身的字級不動,
* 只有 placeholder 收小、收細、變淡。 */
input.amount::placeholder { font-size: 1.0625rem; font-weight: 400; color: var(--dim); letter-spacing: 0; }
/* 小算盤 — #263(使用者裁示 2026-08-26:「點一下,下面出現小算盤(自製計算鍵盤),
不要系統預設數字鍵盤」)。它取代 #213 那一列 `.ops`(+ − × ÷)與 #224 貼在旁邊
的「清除」——那兩樣做的事都併進這一副鍵盤。
**它長在版面裡,不是浮在畫面底部。** 一副 `position: fixed` 的鍵盤會蓋住底下的
送出鈕,而那正是 #225 的病灶(390 實測:鈕落在 nav 與 FAB 底下,15 個取樣點
一個都點不到)。長在金額欄底下的話它只是把後面的東西往下推,一顆鈕都蓋不到;
代價是它自己會被推出視窗,由 add.js 的 openPad() 捲一次,落點的補償就是下面
那一行 `scroll-margin-bottom`。
四欄等分:390 上卡內寬 320px,`(320 − 3×8) / 4 = 74px`,高 48px —— 兩個方向都
在觸控目標的 44px 下限之上(#224 那一列量出來的 58×44 是這一頁既有的底線)。
字級 19px 同 `.ops`:印的是數字與符號,不是詞。
`#amtPad.hide` 那一行**不是多餘的**:`.pad` 寫在這一檔、排在 style.css 後面,
兩者同為單一 class(0-1-0),後來者贏 —— `.hide` 的 `display: none` 因此壓不過
`display: grid`。同一個坑 `#toLabel`(#158)與 `#shareQuick`(#247)各踩過一次。 */
.pad {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-top: 12px;
scroll-margin-bottom: calc(var(--navh, 68px) + 84px);
}
#amtPad.hide { display: none; }
.pad button {
font: inherit; font-size: 1.1875rem; line-height: 1; color: var(--ink);
background: var(--chip); border: 1px solid transparent; border-radius: var(--radius-s);
min-height: 48px; cursor: pointer;
}
.pad button:active { background: var(--card); border-color: var(--accent); color: var(--accent); }
/* 三顆不插字元的鍵長得跟數字不一樣,而那是刻意的 —— 同 #224 那顆「清除」的理由:
數字與運算子把一個字元接進算式,這三顆做的是別的事(退一格 / 全部丟掉 / 收起
鍵盤)。淡一階是它們共同的招牌;字級**分兩種**:「清除 / 完成」印的是詞,收小
才放得進 74px 的格子,而「⌫」印的是符號,跟著數字那一級走 —— 390 實測 14px 的
⌫ 在一排 19px 的數字裡小得像沒有畫完。 */
.pad button[data-act] { font-size: 0.875rem; color: var(--dim); }
.pad button[data-act="back"] { font-size: 1.25rem; }
/* 「完成」佔滿一整列:它是這副鍵盤唯一的出口,而出口不該長得像第十八顆數字。 */
.pad button[data-act="done"] {
grid-column: 1 / -1; font-size: 0.9375rem; font-weight: 600;
color: var(--accent); background: var(--card); border-color: var(--line);
}
/* 算出來多少,或者為什麼算不出來 — #213。**它貼著金額欄**:講的是那一格裡的字,
而底下 .tally 那一行講的是分攤明細 —— 兩句話各自站在自己說的東西旁邊,#170
那次把小數說成「分攤沒對齊」的病就是站錯地方。
**顏色從 --dim 換成 --ink — #247**(UI 評審 #244 第 6 章:「計算結果以灰色小字
顯示於運算按鈕下方,視覺對比偏低…容易讓使用者忽略已完成計算」)。這一行印的
是「120+80 = NT$200」——**一個他要核對的數字**,而 --dim 是這張卡上「說明文字」
的顏色(那幾句他讀過一次就不必再讀)。字級不動:它仍然是欄位底下的註腳,不是
第二個金額欄。壞掉那一半照舊走 --warn。 */
.amt-note { margin-top: 8px; font-size: 0.8125rem; line-height: 1.5; color: var(--ink); }
.amt-note.bad { color: var(--danger); }
.amt-note:empty { display: none; }
/* 分攤那一區的摘要/收合行與兩顆快捷(`.sq` / `.sumline` / `#shares[hidden]`)在
#263 一起退場 —— 使用者裁示 2026-08-26:「這 ui 我覺得不需要,有點干擾」。明細
從此永遠攤開,`hidden` 那個狀態因此也沒有人設得起來了。 */
.share { display: flex; align-items: center; gap: 10px; padding: 7px 0; }
/* 勾選框自己畫 — #221(UI review 9)。原生那一顆是這張卡上唯一沒有被設計過的
控制項:`accent-color` 換得掉填色,換不掉方角、粗勾與系統自己挑的尺寸,而它
旁邊每一格都是 10–14px 圓角、1px 邊線——390 實測那一排未勾的白方塊比名字還
搶眼,讀起來像另一個網站掉進來的。
**元素本身仍然是 ``**:`appearance: none` 只是把系統的
畫法關掉,`:checked`、`label[for]` 的關聯、鍵盤(空白鍵)與螢幕閱讀器報的
「核取方塊 已勾選」一格都沒有動——換掉的是像素,不是語意。走這條而不是繼續
調 `accent-color`,因為那個屬性只給得起填色一格;走這條而不是自己畫一顆
`` 加 `role=checkbox`,因為那要自己重寫焦點、鍵盤與狀態回報,而那三樣
原生的已經是對的。
**勾起來的樣子跟這一頁其他「被選中」的東西同一句話**(`.seg` 與 `.cats` 的
`aria-pressed="true"`:底色回 --card、邊線換成 --accent、記號用 --accent),
不是填滿一塊綠——同一個畫面上「選中」只有一種長相。
**`padding: 0` 不是多餘的**:`style.css` 的 `input` 給每一個輸入框 10/12px 的
內距,而原生的核取方塊本來不理它;`appearance: none` 之後它理了,而
`box-sizing: border-box` 撐不住(左右 24px 已經超過 20px 的寬),那顆框會長成
26×22 —— 390 實測過。 */
.share input[type=checkbox] {
appearance: none; -webkit-appearance: none;
width: 20px; height: 20px; flex: none; margin: 0; padding: 0; cursor: pointer;
background: var(--chip); border: 1px solid var(--line); border-radius: 6px;
}
.share input[type=checkbox]:checked { background: var(--card); border-color: var(--accent); }
/* 勾本身是兩條轉了 45° 的邊,不是一個 ✓ 字元:字面的寬窄與基線由後備字體決定,
20px 的框裡差幾 px 就歪掉,而這裡要它每一台都落在同一個位置。 */
.share input[type=checkbox]:checked::after {
content: ""; display: block; width: 4px; height: 9px; margin: 1px auto 0;
border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* 原生的焦點框跟著 appearance 一起沒了,補回來 —— 鍵盤走到這一列的人要看得見
自己站在哪裡。`:focus-visible` 而不是 `:focus`:用手指點的時候不該亮。 */
.share input[type=checkbox]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.share label { flex: 1; min-width: 0; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.share input[type=number] { width: 116px; text-align: right; }
.share.off label { color: var(--dim); }
/* 沒有勾的那一列不畫那兩個框 — #221(UI review 9)。原本是 `opacity: .4`:框還在、
裡面還印著 0,於是「這個人不分攤」與「這個人分攤 0 元」在畫面上只差一層灰,
那正是使用者看不懂的地方。
**`visibility` 而不是 `display`**:兩個框仍然佔著自己的位置,所以勾與不勾的
列一樣高(390 實測 58.5px);換成 `display: none` 的話每勾一次底下整串就跳一
次,而使用者的手指還停在剛才那一列上。欄位本身照舊是 `disabled`(renderShares
的 `${on ? "" : "disabled"}`)——看不見與按不到是同一件事的兩半,而
`visibility: hidden` 連螢幕閱讀器也一起收掉,不會念出一個沒有人填得動的 0。
特異度:`.share.off .pct` 是三個 class,壓得過上面那條 `.share .pct`(兩個)
的 `display: flex`;`[data-a]` 那一條沒有人跟它搶 `visibility`,寫成同樣的形狀
只是為了讓兩個框在這裡讀起來是一對。 */
.share.off .pct, .share.off input[type=number][data-a] { visibility: hidden; }
/* 比例欄位和金額欄位並排,兩邊互為換算。和金額框一樣,一動就是自訂模式——
藏在自訂模式後面的話它永遠沒有入口,因為快捷鈕裡沒有「自訂」。 */
.share .pct { display: flex; align-items: center; gap: 3px; flex: none; color: var(--dim); font-size: 0.75rem; }
.share .pct input[type=number] { width: 54px; padding: 10px 6px; }
.share > input[type=number][data-a] { width: 92px; }
/* 多筆頁那一份的後兩格 — D-H17 第 4 點 / T2(#407)。整批共用同一份分攤,所以那
一頁上「勾誰」改得動、「每個人分多少」不改(那一格在每一張卡上,頂卡沒有總額
——`splitCardHTML()` 因此在金額那一格印「—」而不是一個 0)。
**判準寫在 `[readonly]` 上而不是一個新的 class**:兩頁逐格相同的做法是畫同一支
(D-F108 第 1 點),而多一個 `.ro` 會讓兩頁的 class 集合差一格 —— 那正是這一票
在收掉的東西。`readonly` 也不是 `disabled`:後者在這一列上已經有另一個意思
(「這個人沒被勾」,而 `.share.off` 把那兩格一起藏起來),兩件事共用一個屬性的
話,多筆頁上每一列看起來都像沒有勾。
顏色照 `.pct` 那一格既有的 `--dim`:它印的是一個**讀的**數字,不是一個等著被
填的欄位。底色不換 —— 換掉的話這一列在兩頁上就不是同一個樣子了。 */
.share input[type=number][readonly] { color: var(--dim); cursor: default; }
/* 種類切換時整塊進出場(F18)。style.css 的 .hide 是單一 class,壓不過
`label.f`(元素+class,特異度更高),也壓不過寫在這一檔、排在 style.css
後面的 .cats。所以這幾個節點各自用 id 把特異度拉高,而不是把
style.css 的 .hide 改成 !important:那會波及每一個 view。
**#payerLabel 漏在這份名單外 — #158。** 它和 #toLabel 是同一個 `label.f`,
drawKind() 對兩者呼叫的也是同一支 classList.toggle("hide", …),但只有
#toLabel 在這一行上。後果:集資戶頭的費用表單收起了「誰出錢」那排選項,標籤
卻留在畫面上,而且說反了(付的是戶頭,不是你)。這一行漏一個 id 的症狀就是
一個殘標籤,沒有任何測試看得到——`test_web.py` 掃的是 JS,不是 CSS 特異度。 */
#catPick.hide, #catLabel.hide,
#toLabel.hide, #payerLabel.hide { display: none; }
/* 種類切換器裡被收起來的那幾顆 — #157。`.seg button` 也是元素+class,同樣壓得
過 .hide,理由與上面那一行逐字相同。 */
#kind button.hide { display: none; }
/* 帳戶不能照常記帳時,種類切換器上面那一句 — #157。 */
.ad-frozen { margin-bottom: 12px; line-height: 1.5; }
/* 「快捷」那兩個字是列標,不是可壓縮的內容:三顆長標籤的 seg 換行時它會被
擠成一行一個字。 */
#tQuickRow > .muted { flex: none; }
.tally { margin-top: 12px; font-size: 0.8125rem; }
.tally.bad { color: var(--danger); }
/* 還沒動過的表單上它是空的 — #213。少了這一行,空字串照樣佔著 12px 的上邊距,
而畫面上看起來是分攤明細與說明欄之間多一段對不上任何東西的空白。 */
.tally:empty { display: none; }
/* 送出那一列 —— 左邊一顆小的「清除」、右邊那顆主鈕 — D-F108 第 6 點(使用者原話
2026-09-08:「記一筆鈕切左右兩邊,左邊較小寫清除」)。
`#save` 自己帶著 `.primary` 的 18px 上邊距,而那一段現在屬於整列(兩顆要對齊
同一條上緣),所以搬到容器上。左邊那顆的寬度寫成 `flex: 0 0 96px`:主鈕仍然
吃掉剩下的整條,而「清除」在 390 的視口上大約是三分之一 —— D-F100 的 44 由
`.ghost` 那條下限給,這裡一格都不必補。
多筆頁那一列(`.ba-acts`)是同一個形狀,樣式住在 batch.css。 */
.ad-acts { display: flex; gap: 10px; margin-top: 18px; }
.ad-acts #save { margin-top: 0; }
#adClear { flex: 0 0 96px; }
/* 「還沒想好誰分攤」那一顆與它的說明 — #295(D-C43)。它站在分攤明細前面,而
上一格是「誰分攤」那個列標(index.html 的 `.row`,自己帶著 2px 的下邊距),
所以這一排只負責自己與底下那幾行之間的那一段。形狀照 `.rep`:同一種問題
(一顆按著或沒按的切換)在這一頁上只有一種長相,兩顆鈕的 `.seg` 與一顆鈕的
這一排共用同一組 `aria-pressed` 樣式。
**這裡不必補 `#pending.hide`。** `.pend` 只設外距、不設 `display`,所以
style.css 那條 `.hide { display: none }` 沒有人跟它搶 —— `.pad`(display: grid)
與 `#toLabel`(label.f)那兩個坑都是「有東西搶 display」才需要拉特異度,而
`#repeat`(class 逐字是 `seg rep hide`)在這一檔上就是同一個先例。 */
.pend { margin-bottom: 10px; }
/* 開著的時候那一句。它要被讀完,不是一行標籤,所以行高比 .muted 的預設寬一點
(同 `.ad-cap` / `.kind-hint`)。沒話說的時候連上邊距一起收掉,不必第二個
hide —— 同 `.tally:empty` / `.say:empty` / `.rec-note:empty`。 */
.pend-note { margin-bottom: 10px; font-size: 0.8125rem; line-height: 1.5; }
.pend-note:empty { display: none; }
/* 轉帳的手續費那一格 — #295(D-C42) / #303(D-F68)。整塊(列標、問號鈕、說明彈層、欄位)包在 `#tFeeRow` 裡,
收起來收的是那個 div —— 只收欄位的話留下的是 #158 那種指著空氣的殘標籤,而
`label.f` 的特異度(0-1-1)本來就壓得過 `.hide`。
手續費標籤與問號同一組 — #303(D-F68),同 home.css / report.css 的 .bal-name。
label.f 自己帶著 14px 的上邊距,收進 .bal-name 裡由外層帶,避免問號鈕與標籤垂直錯位。 */
#tFeeRow .bal-name { display: flex; align-items: center; gap: 4px; margin: 14px 0 6px; }
#tFeeRow .bal-name label.f { margin: 0; }
/* 白話結果句:選完就看得懂這筆會變成什麼 */
.say { margin-top: 6px; font-size: 0.8125rem; line-height: 1.45; color: var(--accent); }
.say:empty { display: none; }
/* 分類:水平捲動的 icon 列,不換行 */
.cats {
display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px;
scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.cats::-webkit-scrollbar { display: none; }
.cats button {
font: inherit; font-size: 0.75rem; line-height: 1.2; color: var(--dim); cursor: pointer;
background: var(--chip); border: 1px solid transparent; border-radius: 14px;
padding: 7px 12px; flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.cats button em { font-style: normal; font-size: 1.1875rem; }
.cats button[aria-pressed="true"] { background: var(--card); border-color: var(--accent); color: var(--accent); font-weight: 600; }
/* 沒有帳戶時的空狀態 — F21 */
.ad-empty { margin-top: 4px; }
/* 集資戶頭:「移動之前的總值」那一格的說明,與非管理者看到的那句話 — CP6。
它是一句要被讀完的警告,不是一行標籤,所以行高比 .muted 的預設寬一點。 */
.ad-cap { margin-top: 6px; line-height: 1.5; font-size: 0.8125rem; }
.ad-cap:empty { display: none; }
/* ---------------------------------------------------------------------------
拍照、預覽層、附件 — #363,docs/DESIGN-ATTACHMENTS.md §3/§6。
**這一段住在 add.css 而不是一支自己的樣式表**:`index.html` 不在這一票的授權
範圍內,而每一支 view 的 CSS 都是從那裡用 `` 掛上去的 —— 多一個檔案就要
多一行掛法。掛上去之後這些規則全站生效(同這一檔開頭那句「這一檔的規則掛在
上是全站生效的」),而預覽層與看圖層本來就是全站的東西:紀錄頁那一側
的縮圖與看圖層走的是同一組 class。
--------------------------------------------------------------------------- */
/* QR 那一顆站在相機那一顆左邊 64px — §6。**四條規則對著 style.css 與 prefs.css
的四條**:`.fab` 的座標是共用的(那正是「與外面那顆 + 同一個位置」的保證),
這裡加的只有那 64px 的位移,而位移要跟著「鈕在哪一邊」翻面 —— 使用者把 FAB 設
在左邊時(prefs.css 的 `html[data-fab="left"]`),往左推 64px 會把它推出螢幕。
56 + 8 = 64:兩顆鈕之間留一個 8px 的縫,和卡片之間的節奏同一種。
特異度:`.fab.qr` (0,2,0) 壓得過 `.fab` (0,1,0);左邊那一組 (0,3,1) 壓得過
prefs.css 的 (0,2,1)。 */
/* ⚠️ **第三顆(`.fab.swap`,單筆 ⇄ 多筆)在 D-F105(#393)整段收掉了。** 模式改由
頁首那一組 seg 表達(「← 記單筆 | 記多筆」,style.css 的 `.hd-seg`),而
「與相機鈕不同色」那句語意跟著搬進選中格的 `--ledger-pool` —— 同一格 token,
換了一個版位。右下角因此只剩兩顆,而那正是 design-themes/FAB-UX.md §2 的判準:
「多筆 / 單筆」不是一個動作,是一個模式。 */
.fab.qr { right: calc(16px + 64px); }
@media (min-width: 552px) { .fab.qr { right: calc(50% - 244px + 64px); } }
html[data-fab="left"] .fab.qr { right: auto; left: calc(16px + 64px); }
@media (min-width: 552px) {
html[data-fab="left"] .fab.qr { left: calc(50% - 244px + 64px); }
}
/* 圖示置中。`.fab` 原本裝的是一個 26px 的字符(＋),而這兩顆裝的是 SVG。 */
.fab.cam, .fab.qr { display: flex; align-items: center; justify-content: center; }
/* 那格看不見的檔案選擇器(capture.js 的 pickPhoto)。`display: none` 的 input 照樣
`.click()` 得動 —— 它不必在版面上,只要在文件裡。 */
.caphidden { display: none; }
/* -------- 「選擇消費照片」那一層(capture.js)。z-index 排在 toast(40)之下、
登入閘(30)之上?不:**在 30 之下**。登入閘蓋著時整個 app 不該有東西冒出來
(style.css 那一段的原話),而它是 app 的一部分。29 因此排在 nav(22)之上、
閘門之下。 */
/* 附件那一區 — D-H9(#372):它現在站在第四張卡的最後一段(送出鈕之上),不是
一張自己的卡。上面那一段距離跟卡裡其他列標一樣(`label.f` 的 14px),底下留給
`.tally` 自己的 12px。 */
.adatt { margin-top: 14px; }
.caplayer {
position: fixed; inset: 0; z-index: 29;
background: var(--cam-bg);
display: flex; align-items: center; justify-content: center;
padding: 16px; box-sizing: border-box;
}
.capbox {
width: 100%; max-width: 420px; max-height: 100%;
display: flex; flex-direction: column; gap: 10px;
overflow: auto;
}
.capnote { color: var(--cam-ink); font-size: 0.875rem; line-height: 1.5; min-height: 1.5em; }
.capnote:empty { display: none; }
/* 「選擇消費照片」那一整頁 — #372(D-H10)。上半即時取景、下半本機相片,而
`.capbox` 平常是「內容多高就多高、置中」—— 這一頁撐滿整層,兩半才分得開。
`padding: 0` 是因為 `.caplayer` 那 16px 的內距對這一頁是錯的:取景要吃滿寬,
而標題列與下半各自有自己的內距。**那一格由 `paint()` 掛上**(`.capfull`)而不
是 `:has(.cappick)`:`:has()` 在 Firefox 120 以下沒有(test_compat 的 css-has
那一條),而這裡失敗的方向是「整頁四周多一圈 16px 的黑」——不是裝飾。從 #409
起這一層只剩這一頁,所以那一格是恆掛的。 */
/* **不透明**:那 82% 的黑是給一張蓋在記一筆上的置中卡用的(#409 拆掉的那一層,
底下那一頁還看得見一點);這一頁是一整頁,底下透出來的標題列與導覽列會直接壓
在標題與「從相簿選」上面(實測過,截圖在票上)。 */
.caplayer.capfull { padding: 0; background: var(--cam-black); }
.cappick {
max-width: none; height: 100%; gap: 0;
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
box-sizing: border-box;
}
/* 標題列照子頁那一套:左邊「←」、中間標題、右邊「取消」。三格用 grid 而不是
space-between —— 標題要真的在正中間,而左右兩顆的字寬不一樣。 */
.caphead {
display: grid; grid-template-columns: 44px 1fr auto;
align-items: center; gap: 8px; padding: 6px 12px;
}
.captitle { color: var(--cam-ink); font-size: 1.0625rem; font-weight: 620; text-align: center; }
/* 「←」那一顆:44px 見方的觸控區,而畫面上只有那一筆。 */
.capback {
width: 44px; min-height: 44px; padding: 0;
font-size: 1.25rem; line-height: 1; margin: 0;
}
/* 上半:一顆走系統相機的鈕(D-H20)。`flex: 1` 讓它與下半分掉整頁,而
`min-height: 0` 是 flex 子項在 Safari 上不肯縮的那一格。 */
.capview {
position: relative; flex: 1 1 50%; min-height: 0; overflow: hidden;
background: var(--cam-black);
display: flex; align-items: center; justify-content: center;
}
/* 那一顆「用相機拍」。`.primary` 的預設是吃滿一整行,而這裡它是半頁正中央的
一顆鈕。 */
.capshoot { width: auto; min-width: 168px; margin-top: 0; padding: 14px 22px; font-size: 1rem; }
/* 下半:本機相片。**一半一半** —— 使用者原話就是「上面一半是相機的下面一半是本機
的圖片」(D-H10)。那一顆「從相簿選」吃掉這一半剩下的高度(所以它是一顆**大
格**,不是一列小鈕),縮圖那一排照自己的高度站在它底下。 */
.caplocal {
flex: 1 1 50%; min-height: 0;
padding: 12px 16px 16px; display: flex; flex-direction: column; gap: 10px;
}
.caplabel { color: var(--cam-ink); font-size: 0.8125rem; font-weight: 600; opacity: .8; }
/* 「從相簿選」那一顆大格:網頁拿不到相簿清單,所以它不是一張縮圖,是一扇門。 */
.caplib {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; flex: 1 1 auto; min-height: 72px; margin: 0;
/* `.ghost` 是一顆藥丸(`border-radius` 吃滿高度),而這裡它是一格**大方框**
—— 不改的話它會被畫成一個巨大的橢圓(實測過)。 */
border-style: dashed; border-radius: var(--radius-s);
}
/* 本次選過的那幾張(最多 12)。橫著捲而不是折行:下半的高度是留給那一顆大格的,
而一排縮圖折成三行會把取景擠掉。 */
.capthumbs {
display: flex; flex: 0 0 auto; gap: 8px; overflow-x: auto;
padding-bottom: 2px; -webkit-overflow-scrolling: touch;
}
.capthumb {
flex: 0 0 auto; width: 56px; height: 56px; padding: 0; margin: 0;
overflow: hidden; border: 1px solid var(--cam-line);
border-radius: var(--radius-s); background: var(--cam-black); cursor: pointer;
}
.capthumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 勾選框 — #380(使用者原話 2026-09-08:選圖頁縮圖右上角一個勾選框,點一下勾選、
再點一下取消)。**在縮圖自己的右上角而不是旁邊一顆鈕**:那一排上要按的東西只
有一種,而這一格畫的是它現在是哪一邊。多選那條路才畫得出來(thumbsHTML)。 */
.capthumb { position: relative; }
.capcheck {
position: absolute; top: 3px; right: 3px; width: 18px; height: 18px;
border-radius: 4px; border: 1px solid var(--cam-line-strong);
background: var(--cam-chip); color: var(--cam-ink);
font-size: 0.8125rem; line-height: 1.0625rem; text-align: center;
}
.capon { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.capon .capcheck { background: var(--accent); border-color: var(--accent); }
/* 蓋在黑幕上的那幾顆:白字白邊。`.ghost` 的預設色是 `var(--dim)`(給卡片用的),
在這層黑上只剩 2.7:1 —— 讀得到字才叫得出門。
⚠️ **44px 的下限在 D-F100(#373)搬去 `.ghost` 了。** 這裡原本寫著「下限寫在
這裡而不是 `.ghost`:那一條全站共用」——意思是「不要為了三顆鈕動全站」。使用者
2026-09-07 裁的正是動全站(「全站觸控目標一律 ≥44×44」),所以下限跟著搬到
style.css 的 `.ghost`。**這一行留著是刻意的**:它現在是一句重複而不是一條孤
規 —— 這幾顆站在一層蓋住整個畫面的東西上,而那一層上「按不到」的代價與卡片上
不一樣(退不出去),所以它自己說一次不靠繼承。 */
.capout, .caplib, .capback {
color: var(--cam-ink); border-color: var(--cam-line); min-height: 44px;
}
/* -------- QR 活掃(qr.js) */
.qrlive {
position: fixed; inset: 0; z-index: 29; background: var(--cam-black);
display: flex; align-items: center; justify-content: center;
}
.qrlive video { width: 100%; height: 100%; object-fit: cover; }
/* 取景框:畫面正中一個正方,邊長取短邊的 62%。`aspect-ratio` 在支援底線之內
(.browserslistrc 的註解逐條列著它)。 */
.qrframe {
position: absolute; width: min(62vw, 62vh); aspect-ratio: 1;
border: 2px solid var(--cam-ink); border-radius: var(--radius-s);
box-shadow: 0 0 0 100vmax var(--cam-chip);
}
.qrnote {
position: absolute; left: 16px; right: 16px; bottom: calc(84px + env(safe-area-inset-bottom));
color: var(--cam-ink); text-align: center; font-size: 0.875rem; line-height: 1.5;
}
.qrstop {
position: absolute; left: 50%; transform: translateX(-50%);
bottom: calc(24px + env(safe-area-inset-bottom));
}
/* -------- 附件列(attachview.js;記一筆與紀錄頁共用) */
.atts { display: flex; flex-wrap: wrap; gap: 10px; }
.att { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* 縮圖那一格是一顆**按鈕**不是一張圖:點它會攤開全螢幕,而一個點得動的東西要
讓鍵盤也走得到。72px 見方在 390 上一排放得下四張。 */
.attshot {
width: 72px; height: 72px; padding: 0; overflow: hidden;
border: 1px solid var(--line); border-radius: var(--radius-s);
background: var(--chip); color: var(--dim); cursor: pointer;
display: flex; align-items: center; justify-content: center;
}
.attshot img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 「辨識用,不會存」 — 它與那顆「改成保存」是同一件事的兩半,所以擠在縮圖底下
一起讀。 */
.attmark { font-size: 0.71875rem; line-height: 1.5; color: var(--dim); max-width: 96px; }
.att.hold .attshot { border-style: dashed; }
.attkeep, .attdrop { font-size: 0.75rem; padding: 3px 8px; }
/* -------- 全螢幕看圖(attachview.js) */
.attview {
position: fixed; inset: 0; z-index: 29; background: var(--cam-bg-solid);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 10px; padding: 16px; box-sizing: border-box;
}
.attview img { max-width: 100%; max-height: 78%; object-fit: contain; }