From c412ce86f5624477eef54f9a9abf7958d8a15220 Mon Sep 17 00:00:00 2001 From: Claude Lin & Lay Date: Mon, 24 Aug 2026 11:00:01 +0900 Subject: [PATCH] fix(ui): draw controls on the window ground, not on the panel tint MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 操作の背景を面の色味（`--surface`）から窓の地（`--bg`）へ揃えた。対象は タイトルバーの入力欄・寸法ピッカー・`端末` ボタン、入力欄の `宛先` と `送信` とテキストエリア、参加者の行の三つの記号ボタン、端末ヘッダの寸法 ピッカーと `✕`、アカウントのモーダルの入力欄と選択肢とボタン、`終了` の 確認ダイアログのボタン、そして選択中の端末タブである。 `--surface` は面そのものの地に残した——参加者パネルの地と、地がすでに `--bg` である場所で浮かせる要素（端末タブの `✕` のホバー）である。パネル 自身の地は変えていない。行の三つのボタンは `background: none` でパネルの 地が透けていたため、明示的に `var(--bg)` を持たせた。 選択中の端末タブは、これで地色によって選択を言えなくなる。代わりに言うのは 枠（未選択の `transparent` から `--line` へ）と文字色（`--muted` から参加者 自身の色へ）であり、参加者パネルの選択中の行と同じ形になる。それまでは パネルの行が `--bg` で浮き、端末のタブが `--surface` で沈むという、同じ 選択を二つの面が逆向きに描く状態だった。 色は直値で書かず、すべて `var(--bg)` / `var(--line)` である。ダークテーマ では `--bg` は `#17171a` であり、`#ffffff` と書けばそこで壊れる。 docs/0-requirements.md には「二つの地色」の節を足し、面と操作でどちらの地色 を使うかを記述した。実機での見た目は未確認であるため、その旨を「未実装」へ 一行足してある。 #75 --- docs/0-requirements.md | 13 +++++++++ src/styles.css | 60 +++++++++++++++++++++++++++++------------- 2 files changed, 55 insertions(+), 18 deletions(-) diff --git a/docs/0-requirements.md b/docs/0-requirements.md index 100748a..6c74ff3 100644 --- a/docs/0-requirements.md +++ b/docs/0-requirements.md @@ -279,9 +279,22 @@ liplus-desktop の `stream_parser.rs` および `spawn_stream_pty` / `spawn_stre - 会話面の文字サイズのうち、ヘッダのピッカー、再起動後の保持、上下限の実機確認。いずれも実装済みで CI の型検査は通っているが、実機での操作は未確認である。キー操作（`Ctrl` + `=` / `-` / `0`）と、効く範囲が会話面に留まること（参加者パネル・診断面・端末・入力欄が動かないこと）は 2026-08-24 の実機観察で確認済みである。後者が webview 自身のズームも閉じている——キーを受ければ寸法は無条件に動くため、動いたこと自体は既定動作を止められた証拠にならないが、会話面以外が一緒に動かなかった以上、webview のズームは走っていない。 - 診断面のヘッダの実機確認。タブと行の連動、`✕` で面が畳まれセッションが残ること、終了したタブの `✕` での破棄、端末の文字サイズの梯子と再起動後の保持、桁数と行数がセッションへ伝わることはいずれも実装済みで CI の型検査は通っているが、実機での操作は未確認である。ヘッダの存在・角丸・枠の見た目は 2026-08-24 に実機で観察され、そこから色を敷かないこと・窓の名前「端末」・枠の余白を詰めることの三点が指示として戻っている。三点を反映した後の見た目は再度未確認である。 - 行の記号表示と終了の確認ダイアログの実機確認。三つの記号が Windows のフォントで揃って出ること、幅を固定した列で本人の行の名前が出ること、ダイアログの取消・終了・Escape はいずれも実装済みで CI の型検査は通っているが、実機での操作は未確認である。 +- 操作の地色を揃えた後の見た目の実機確認。タイトルバー・入力欄・参加者の行・端末ヘッダ・アカウントのモーダルの操作を窓の地色へ揃え、選択中の端末タブも同じ地色にした（#75、下記「二つの地色」）。指示は 2026-08-24 の実機観察から戻っているが、反映後の見た目は未確認である。 - 会話ログの永続化と観測 UI - plugin としての allowlist 掲載（配布の第二段階） +### 二つの地色 + +面には地色が二つある。`--bg`（ライトで `#ffffff`）が窓の地であり、`--surface`（同 `#f4f4f7`）が面そのものの色味である。どちらがどこに出るかは、それが面か操作かで決まる。 + +**操作は窓の地に描く。** 入力欄・選択肢・テキストエリア・ボタン、そして選択中の端末タブは `--bg` を背景に持ち、`--line` の枠で輪郭を持つ（実機指示、2026-08-24）。操作を地から分けるのは枠であって塗りではない。塗りで分けると、同じボタンがタイトルバーでは白の上の灰色、参加者パネルでは灰色の上の灰色になり、操作の見え方が「どの面に載っているか」で変わる。枠で分ければ、操作はどこにあっても一つの形である。 + +**`--surface` は面の地に残る。** 参加者パネルの地であり、地がすでに `--bg` である場所で何かを浮かせるときの色味である（端末タブの `✕` のホバーがこれに当たる）。参加者パネル自身の地は変えない——揃えるのは面の中の操作であって、面ではない。 + +**色は直値で書かない。** 「白」はライトテーマでの見え方であって指定ではない。ダークテーマでは `--bg` は `#17171a` であり、`#ffffff` と書けばそこで壊れる。指定は常にトークンで書く。 + +この規則の下では、選択中の端末タブは地色で選択を言えなくなる。代わりに言うのは枠（未選択の `transparent` から `--line` へ）と文字色（`--muted` から参加者自身の色へ）である。参加者パネルの選択中の行と同じ形——枠のある窓の地の箱——になり、同じ選択を二つの面が同じ手で描く（#75）。それまでは逆を向いていた。パネルの地が `--surface` なので選択された行は `--bg` で浮き、端末ヘッダの地が `--bg` なので選択されたタブは `--surface` で沈んでいた。 + ### 参加者パネル 会話面の右に常時出る列を持つ。参加者のリストと、その下にセッションの裏の値（部屋ソケット / セッションの生死と終了コード / 接続方法 / 起動コマンド / 作業ディレクトリ / 開始時刻 / ウィンドウ）を並べる。 diff --git a/src/styles.css b/src/styles.css index 722304e..7074182 100644 --- a/src/styles.css +++ b/src/styles.css @@ -1,5 +1,16 @@ :root { color-scheme: light dark; + /* Two grounds, and which one a thing carries is decided by whether it is a + surface or a control. `--bg` is the window's own ground, and it is also + what every control is drawn on: input, select, textarea, button, the + selected terminal tab. `--surface` is a panel's tint — the participant + list's ground, and the lift for something sitting on a ground that is + already `--bg`. + + A control is told from what it sits on by its `--line` border, not by a + fill of its own (Master, 実機, 2026-08-24). A fill would make the same + button look different on each panel it appears on; a border makes it one + shape wherever it is. */ --bg: #ffffff; --fg: #1b1b1f; --line: #d8d8de; @@ -89,7 +100,7 @@ body { #titlebar button { font: inherit; color: var(--fg); - background: var(--surface); + background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0.2rem 0.4rem; @@ -238,7 +249,7 @@ body { #composer select { font: inherit; color: var(--fg); - background: var(--surface); + background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 0.5rem 0.4rem; @@ -249,7 +260,7 @@ body { flex: 1; font: inherit; color: var(--fg); - background: var(--surface); + background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 0.5rem; @@ -259,7 +270,7 @@ body { #composer button { font: inherit; color: var(--fg); - background: var(--surface); + background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 0.5rem 1rem; @@ -392,13 +403,19 @@ body { cursor: pointer; } -/* Lifted off the window's ground, the way the selected row in the panel is - lifted off the panel's (`#participants .member.shown .pick`). The two - selections are one selection, so they are marked the same way; the grounds are - the other way round here, so the tint that lifts is the other one. */ +/* The mark the selected row in the panel carries, drawn the same way here + (`#participants .member.shown .pick`): the window's ground with a `--line` + border around it. The two selections are one selection, and they are now one + shape — the tab was tinted while the row was lifted, which is the same + selection drawn with opposite hands (Master, 実機, 2026-08-24). + + The tab and the header under it are the same colour now, so the ground says + nothing about which tab is open. What says it is the border arriving where + an unselected tab holds `transparent`, and the name turning from `--muted` + to the participant's own colour. */ #terminal-tabs .tab.shown { color: var(--speaker, var(--fg)); - background: var(--surface); + background: var(--bg); border-color: var(--line); } @@ -429,15 +446,16 @@ body { background: var(--surface); } -/* Lifted off the window's ground, the way the title bar's controls are lifted - off the page's. The pane is `--bg` throughout now, so a control drawn in `--bg` - would be an outline with nothing inside it. */ +/* The window's ground, the way the title bar's controls carry the page's. It is + the same ground the header itself has, which leaves the border to say where + the control is — and that is what a control is everywhere in this app (see + `--bg` at the top of this file). */ #terminal-head select, #terminal-head button { font: inherit; flex: none; color: var(--fg); - background: var(--surface); + background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0.1rem 0.25rem; @@ -631,7 +649,13 @@ body { advance width is the font's, and the font is whichever one the host resolves the mark in; a box that took its width from the glyph would be a different box on a different machine. The box is fixed and the mark is centred in it, - so the three read as one column of the same three shapes anywhere. */ + so the three read as one column of the same three shapes anywhere. + + The ground is the window's, written out rather than left at `none`. `none` + let the panel's tint through, which put the only three controls in the panel + on a ground no other control in the app sits on (Master, 実機, 2026-08-24). + The panel keeps its own tint; what is aligned is the controls in it, not the + panel. */ #participants .member .edit, #participants .member .start, #participants .member .end { @@ -643,7 +667,7 @@ body { font: inherit; font-size: 0.8rem; line-height: 1; - background: none; + background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0; @@ -828,7 +852,7 @@ body { font: inherit; width: 100%; color: var(--fg); - background: var(--surface); + background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0.3rem 0.45rem; @@ -892,7 +916,7 @@ body { #account-dialog .actions button { font: inherit; color: var(--fg); - background: var(--surface); + background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 0.35rem 0.9rem; @@ -975,7 +999,7 @@ body { #end-dialog .actions button { font: inherit; color: var(--fg); - background: var(--surface); + background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 0.35rem 0.9rem;