diff --git a/internal/web/static/app.css b/internal/web/static/app.css index ab559da..ca1c7cd 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; } @@ -272,6 +271,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 */ @@ -389,15 +392,15 @@ td a.slug.paste-name { background: none; padding: 0; border-radius: 0; font-fami } .seg input, .toggle input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; } -/* toast (#19) */ +/* toast (#19, #168): small pill anchored to the corner, out of content flow */ .toast { - position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(8px); + position: fixed; right: 16px; bottom: 16px; background: var(--surface-2); color: var(--fg); border: 1px solid var(--border); - border-radius: var(--radius-sm); padding: 6px 18px; font-size: 20.7px; + border-radius: var(--radius-sm); padding: 6px 12px; font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .25s ease, transform .25s ease; z-index: 200; box-shadow: 0 4px 16px rgba(0,0,0,.25); } -.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } +.toast.show { opacity: 1; transform: translateY(0); } /* status variants (#16) */ .toast.success { border-color: var(--ok); color: var(--ok); } .toast.error { border-color: var(--err); color: var(--err); }