From da4c4b70d2745a217b27e5b9789ffe8d8bd1c649 Mon Sep 17 00:00:00 2001 From: mattshax Date: Fri, 25 Sep 2026 18:34:48 +0000 Subject: [PATCH] fix(chat): the open conversation stands out in the rail The open row used the shared pale pill (#e1f2fb on a white rail), which was hard to find at a glance in a long list. It now takes a stronger tint of the accent and a 3px accent bar on its leading edge, which carries the mark even where the tint is subtle, in either theme and under any deployment accent. Other active states (sidenav, Library tree, Help) keep the shared pill. In dark mode the rows also rendered in the link blue, from the global rule that colors every link; rail rows are navigation, so they now use the text color like the Library tree. --- web/src/styles.css | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/web/src/styles.css b/web/src/styles.css index 4b22a2c..98aa1be 100644 --- a/web/src/styles.css +++ b/web/src/styles.css @@ -966,10 +966,26 @@ code, pre, kbd, .text-body, .viewer-path, .sql-box, [data-streamdown='code-block class only behind `hover:`, so " bg-[" with a leading space matches the open row alone. Both are kept so the highlight survives either version. */ .chat-canvas li.theme-muted-panel, -.chat-canvas li.group[class*=" bg-[color-mix"] { background: var(--pw-active-pill); } +.chat-canvas li.group[class*=" bg-[color-mix"] { + /* The shared pale pill disappears against a white rail at a glance, and + finding the open conversation in a long list is what this row is for. + A stronger tint of the accent plus a bar on the leading edge; the bar + carries it even where the tint is subtle, in either theme and under + any deployment accent. */ + background: color-mix(in oklab, var(--pw-navy) 14%, var(--pw-rail-bg)); + box-shadow: inset 3px 0 0 var(--pw-navy); +} +[data-theme='dark'] .chat-canvas li.theme-muted-panel, +[data-theme='dark'] .chat-canvas li.group[class*=" bg-[color-mix"] { + background: color-mix(in oklab, var(--pw-link) 22%, var(--pw-rail-bg)); + box-shadow: inset 3px 0 0 var(--pw-link); +} .chat-canvas li.theme-muted-panel a span, .chat-canvas li.group[class*=" bg-[color-mix"] span { color: var(--pw-navy); font-weight: 600; } [data-theme='dark'] .chat-canvas li.group[class*=" bg-[color-mix"] span { color: var(--pw-text); } +/* Rows and rail actions are links; the dark theme's link blue is for links + in prose, not for navigation, which reads as plain text like the Library tree. */ +[data-theme='dark'] .chat-canvas aside a { color: var(--pw-text); } /* Embedded viewer windows inside chat replies, and the chrome-less embed page */ .chat-canvas iframe.chat-embed-frame {