From 5fc5ae8aadabb61c025b71d899c9d3c433071c0e Mon Sep 17 00:00:00 2001 From: fen Date: Thu, 10 Sep 2026 10:13:42 -0500 Subject: [PATCH] editor head: wrap toggle state and pill highlight (#166) wrap button on the new paste page looked identical whether wrap was on or off because the btn base is already accent filled. give the toggle a neutral off state so the accent on state is visible, matching the icon button toggles on the paste view. also remove the accent border on the whole language settings pill when any child has focus. individual controls already show their own focus rings, so the pill highlight made no sense. --- internal/web/static/app.css | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/internal/web/static/app.css b/internal/web/static/app.css index 98b9b7e..2c5b7fe 100644 --- a/internal/web/static/app.css +++ b/internal/web/static/app.css @@ -150,8 +150,7 @@ body { } .editor-head-title { flex: 1; min-width: 0; } .editor-head-settings { flex: 0 0 fit-content; } -.editor-head-title:focus-within, -.editor-head-settings:focus-within { border-color: var(--accent); } +.editor-head-title:focus-within { border-color: var(--accent); } .editor-head input { border: none; outline: none; background: transparent; color: var(--fg); font: inherit; font-size: 23.2px; flex: 1; } @@ -266,6 +265,10 @@ body { .theme-name { font-weight: 600; } .iconbtn:hover { color: var(--fg); border-color: var(--muted); } /* #130: line wrap toggle, accent when active like other toggles */ +/* #166: wrap toggle must show its state: neutral when off, accent when on. + The .btn base is accent filled, which made on and off look identical. */ +.btn-icon.wrap-toggle { background: var(--surface-2); color: var(--muted-fg); font-size: 21.6px; font-weight: inherit; border: 1px solid var(--border); } +.btn-icon.wrap-toggle:hover { color: var(--fg); border-color: var(--muted-fg); filter: none; } .iconbtn.wrap-toggle[aria-pressed="true"], .btn-icon.wrap-toggle[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); } /* #152: wrap ON must break long unbroken tokens mid-word and allow no horizontal scrolling */