diff --git a/packages/webapp/src/strip-rail.css b/packages/webapp/src/strip-rail.css index ee2aa95b..6cd5f847 100644 --- a/packages/webapp/src/strip-rail.css +++ b/packages/webapp/src/strip-rail.css @@ -78,15 +78,15 @@ display: grid; /* Same footprint as the org mark at the top of the strip (user ruling 2026-08-29). */ - width: 22px; - height: 22px; + width: 35px; + height: 35px; flex: none; place-items: center; border: 0; - border-radius: 6px; + border-radius: 10px; color: var(--muted); background: var(--hover); - font: 700 9px/1 var(--font-ui); + font: 700 13px/1 var(--font-ui); cursor: pointer; } @@ -97,10 +97,19 @@ outline-offset: 1px; } -.shell-wtile--on { - color: var(--ink); - background: color-mix(in oklab, var(--accent) 34%, var(--paper)); - box-shadow: 0 0 0 2px color-mix(in oklab, var(--accent) 45%, var(--paper)); +/* Selection is the bar at the strip's edge, never a ring: a ring behind a + pastel tile reads as a ghost box (user ruling 2026-08-29). */ +.shell-wtile--on { color: var(--ink); } +.shell-wtile--on::before { + content: ''; + position: absolute; + top: 50%; + left: -7px; + width: 3px; + height: 70%; + border-radius: 0 3px 3px 0; + background: var(--ink); + transform: translateY(-50%); } .shell-wtile--off { @@ -116,7 +125,7 @@ .shell-wtile:disabled { cursor: default; } -.shell-wtile__plus { width: 11px; height: 11px; } +.shell-wtile__plus { width: 14px; height: 14px; } .shell-strip__spacer { flex: 1 1 auto; } @@ -140,6 +149,7 @@ .shell-strip__account { position: relative; flex: none; } .shell-av { + position: relative; display: grid; overflow: hidden; width: 24px; @@ -154,7 +164,10 @@ cursor: pointer; } -.shell-av__photo { display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } +/* Absolute fill: percentage sizing of a grid child against an auto track can + collapse to the image's intrinsic box, which turned a square photo into a + tall oval. inset: 0 against the button's padding box cannot. */ +.shell-av__photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; } /* The org popover reuses the shell's menu skin; only the anchor changes, because the strip is 48px wide and it opens beside it. */