poslop/palette
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases 2 Wiki Activity

editor head: wrap toggle state and pill highlight (#166)
CI / test (pull_request) Successful in 32s
Details
CI / docker (pull_request) Skipped
Details

Browse Source 
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.
This commit is contained in:
fen
2026-09-10 10:13:42 -05:00
parent 5dba356264
commit 5fc5ae8aad
1 changed files with 5 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/app.css
+5 -2
View File
@@ -150,8 +150,7 @@ body {
} }
.editor-head-title { flex: 1; min-width: 0; } .editor-head-title { flex: 1; min-width: 0; }
.editor-head-settings { flex: 0 0 fit-content; } .editor-head-settings { flex: 0 0 fit-content; }
.editor-head-title:focus-within, .editor-head-title:focus-within { border-color: var(--accent); }
.editor-head-settings:focus-within { border-color: var(--accent); }
.editor-head input { .editor-head input {
border: none; outline: none; background: transparent; color: var(--fg); font: inherit; font-size: 23.2px; flex: 1; 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; } .theme-name { font-weight: 600; }
.iconbtn:hover { color: var(--fg); border-color: var(--muted); } .iconbtn:hover { color: var(--fg); border-color: var(--muted); }
/* #130: line wrap toggle, accent when active like other toggles */ /* #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"], .iconbtn.wrap-toggle[aria-pressed="true"],
.btn-icon.wrap-toggle[aria-pressed="true"] { background: var(--accent); color: var(--bg); border-color: var(--accent); } .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 */ /* #152: wrap ON must break long unbroken tokens mid-word and allow no horizontal scrolling */