Update tab styling.

src/style.css

@@ -191,54 +191,54 @@ button.playpen-header-button:hover,
 
 /* State on the row itself, not just on its dot.
 
-   A bar down the leading edge, and behind the row a wash of the same color for
-   the two states that actually want you. The dot says what a row is doing once
-   you are reading it; these are what let you sweep a sidebar of a dozen tabs
-   and land on the one that wants you without reading any of them.
+   One bar and two washes, and that is the whole vocabulary. Finished gets the
+   bar down its leading edge; the two states that actually want you get a wash
+   of their own color behind the row. The dot says what a row is doing once you
+   are reading it; these are what let you sweep a sidebar of a dozen tabs and
+   land on the one you care about without reading any of them.
 
-   The bar is an inset shadow rather than a real border because a border takes
-   part in layout: 3px of it would shove every label sideways as a tab changed
-   state, and a sidebar that twitches is worse than one that is hard to read.
+   Only finished carries a bar. Every state used to have one, drawn as an inset
+   shadow, and a shadow is clipped to the row's 8px corners: what landed was a
+   short bar with a curl at each end, four rows deep in slightly different
+   colors. Read as ornament rather than as signal, so it is gone from everything
+   but the one state whose bar is a plain rectangle.
 
    These come after the :selected rules deliberately. Equal specificity means
    source order decides, and a state outranks "this is the tab you are on". */
 
-/* No wash for working. It is the most common state by far, and a sidebar where
-   half the rows are tinted all afternoon teaches you to stop looking. */
-.playpen-list > row.playpen-attn-busy {
-  box-shadow: inset 3px 0 0 @pp_accent_strong;
-}
+/* Working is the dot alone. It is the most common state by far, and a sidebar
+   where half the rows are marked all afternoon teaches you to stop looking. */
 
-/* No wash for finished either, for a different reason: a tinted row is what
-   selection looks like in this list, so washing the finished ones left "the tab
-   you are on" and "the tab that just finished" saying the same thing. The dot
-   and a bar are enough — nothing here is waiting on you.
+/* No wash for finished, for a different reason: a tinted row is what selection
+   looks like in this list, so washing the finished ones left "the tab you are
+   on" and "the tab that just finished" saying the same thing. The dot and the
+   bar are enough — nothing here is waiting on you.
 
-   The bar is a background image rather than the inset shadow the other states
-   use, because a shadow is clipped to the row's 8px corners and comes out
-   tapered at both ends. Kept short enough to clear those corners entirely, so
-   what lands is a plain rectangle. */
+   The bar is a background image rather than an inset shadow precisely because
+   it is not clipped to the corners, so it stays a rectangle at any height. Tall
+   enough now to read as a deliberate mark rather than a stray pixel, and still
+   short of the row's full height so it reads as pinned to the middle of the
+   row. */
 .playpen-list > row.playpen-attn-done {
   background-image: linear-gradient(@pp_ok, @pp_ok);
-  background-size: 3px 12px;
+  background-size: 3px 18px;
   background-position: left center;
   background-repeat: no-repeat;
 }
 
 .playpen-list > row.playpen-attn-input {
-  box-shadow: inset 3px 0 0 @pp_warn;
   background-color: alpha(@pp_warn, 0.14);
 }
 
 .playpen-list > row.playpen-attn-failed {
-  box-shadow: inset 3px 0 0 @pp_err;
   background-color: alpha(@pp_err, 0.14);
 }
 
 /* The current row keeps its own background: the wash and the selection would
-   otherwise blend into a color that reads as neither. The bar survives, which
-   is the part that carries the state. Done is absent because it no longer has a
-   wash to suppress. */
+   otherwise blend into a color that reads as neither, and the dot is left to
+   carry the state on its own — which on the row you are already looking at is
+   enough. Done is absent because it has no wash to suppress, only a bar, and a
+   bar and a selection sit together fine. */
 .playpen-list > row:selected.playpen-attn-input,
 .playpen-list > row:selected.playpen-attn-failed {
   background-color: @pp_row_selected;
@@ -256,7 +256,6 @@ button.playpen-header-button:hover,
   opacity: 0.65;
   background-color: alpha(@pp_accent_strong, 0.18);
   background-image: none;
-  box-shadow: inset 3px 0 0 @pp_accent_strong;
 }
 
 /* The copy of that row traveling with the pointer, which GTK draws into a
@@ -384,16 +383,18 @@ dnd.playpen-tab-drag {
   opacity: 1;
 }
 
-/* Working: the same accent as an active pane's border, so "busy" reads as
-   ordinary activity rather than something gone wrong. */
+/* Working: blue, and pulsing. Its own palette color rather than the accent —
+   the accent is whatever the theme is built around, and a green one put "still
+   working" in the same color as "finished", which is the one distinction this
+   whole indicator exists to make. The pulse carries the rest of it: a mark that
+   moves reads as something in progress before you have registered its color. */
 .playpen-status-busy {
-  color: @pp_accent_strong;
+  color: @pp_busy;
   animation: playpen-pulse 1.6s ease-in-out infinite;
 }
 
-/* Finished while you were elsewhere. Green rather than the accent so it is
-   distinct from still-working at a glance, which is the one distinction this
-   whole indicator exists to make. */
+/* Finished while you were elsewhere. Green, and still — the dot that has
+   stopped moving is the one that has stopped working. */
 .playpen-status-done {
   color: @pp_ok;
 }