greyson/playpen
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Simplify sidebar styling.

Browse Source
This commit is contained in:
Greyson Parrelli
2026-08-26 22:38:03 -04:00
parent 4327c17fd7
commit afad6a2636
2 changed files with 26 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/style.css
+23 -10
View File
@@ -133,10 +133,10 @@ button.playpen-header-button:hover,
/* State on the row itself, not just on its dot.
A bar down the leading edge and a wash behind the whole row, both in the
state's colour. 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.
A bar down the leading edge, and behind the row a wash of the same colour 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.
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
@@ -144,15 +144,27 @@ button.playpen-header-button:hover,
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;
}
/* 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. */
/* 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.
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. */
.playpen-list > row.playpen-attn-done {
box-shadow: inset 3px 0 0 @pp_ok;
background-color: alpha(@pp_ok, 0.14);
background-image: linear-gradient(@pp_ok, @pp_ok);
background-size: 3px 12px;
background-position: left center;
background-repeat: no-repeat;
}
.playpen-list > row.playpen-attn-input {
@@ -167,8 +179,8 @@ button.playpen-header-button:hover,
/* The current row keeps its own background: the wash and the selection would
otherwise blend into a colour that reads as neither. The bar survives, which
is the part that carries the state. */
.playpen-list > row:selected.playpen-attn-done,
is the part that carries the state. Done is absent because it no longer has a
wash to suppress. */
.playpen-list > row:selected.playpen-attn-input,
.playpen-list > row:selected.playpen-attn-failed {
background-color: @pp_row_selected;
@@ -185,6 +197,7 @@ button.playpen-header-button:hover,
.playpen-list > row.dragging {
opacity: 0.65;
background-color: alpha(@pp_accent_strong, 0.18);
background-image: none;
box-shadow: inset 3px 0 0 @pp_accent_strong;
}