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

Add notifications.

Browse Source
This commit is contained in:
Greyson Parrelli
2026-08-26 23:24:14 -04:00
parent afad6a2636
commit 7414c89fe6
33 changed files with 1026 additions and 381 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/style.css
+50 -33
View File
@@ -1,15 +1,15 @@
/* Zen-style vertical tabs: a sidebar column with the terminal inset to its
right.
Every colour here is a name from `palette.zig`, which writes the matching
Every color here is a name from `palette.zig`, which writes the matching
`@define-color` block for the scheme in force; `appearance.zig` prepends that
and loads the pair as a single provider. Nothing below may hardcode a colour —
and loads the pair as a single provider. Nothing below may hardcode a color —
a literal hex would be a rule that looks right in one scheme and wrong in the
other, it would look right in whichever one you happened to be testing in,
and the colour editor in the settings page could not reach it at all.
and the color editor in the settings page could not reach it at all.
`alpha()` is used for every wash rather than a second named colour, so a
state's tint is always derived from the state's own colour and the two
`alpha()` is used for every wash rather than a second named color, so a
state's tint is always derived from the state's own color and the two
can't drift apart. */
.playpen-window {
@@ -33,7 +33,7 @@
The rule underneath is stated explicitly rather than left to the one Adwaita
draws for every header bar: that one is a shadow in the desktop theme's
colour, which on this palette read as a stray line rather than as the pair
color, which on this palette read as a stray line rather than as the pair
it now makes with the footer's. */
.playpen-sidebar headerbar {
background: none;
@@ -44,7 +44,7 @@
}
/* The two header actions. Styled explicitly rather than left to Adwaita, whose
default button is a grey that belongs to a different window than this one.
default button is a gray that belongs to a different window than this one.
Scoped by class instead of by `headerbar button` so the window controls
beside them keep their own appearance — those belong to the desktop, not to
the app, and making them match would be the wrong kind of consistent.
@@ -113,9 +113,9 @@ button.playpen-header-button:hover,
}
/* The kind icon picks up the accent on the current row. The status dot is
excluded: it carries a colour that *is* the information, and this rule is
excluded: it carries a color that *is* the information, and this rule is
specific enough to beat the state classes, which used to leave the selected
row's dot accent-coloured whatever it was trying to say. */
row's dot accent-colored whatever it was trying to say. */
.playpen-list > row:selected image:not(.playpen-status-dot) {
color: @pp_accent_strong;
}
@@ -124,7 +124,7 @@ button.playpen-header-button:hover,
rather than left to the glyph, so a sidebar mixing emoji rows with icon rows
still starts every label in the same column — emoji vary in advance width and
without this the labels beside them would step in and out by a pixel or two
per row. The font size is a little under the icon's 16px because a colour
per row. The font size is a little under the icon's 16px because a color
glyph fills its box where a symbolic icon leaves air around itself. */
.playpen-tab-emoji {
min-width: 16px;
@@ -133,7 +133,7 @@ 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 colour for
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.
@@ -178,7 +178,7 @@ 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
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. */
.playpen-list > row:selected.playpen-attn-input,
@@ -201,7 +201,7 @@ button.playpen-header-button:hover,
box-shadow: inset 3px 0 0 @pp_accent_strong;
}
/* The copy of that row travelling with the pointer, which GTK draws into a
/* The copy of that row traveling with the pointer, which GTK draws into a
surface of its own. What it paints is the row's *box* — the icon, the label
and the close button — and a row's background belongs to the row above that
box, so without this the label would float on nothing. Given the selected
@@ -308,12 +308,12 @@ dnd.playpen-tab-drag {
}
/* Status dots. One shared appearance for the sidebar row and the pane header,
coloured entirely by which state class is on the icon. Symbolic icons take
their colour from `color`, so nothing here needs a second asset.
colored entirely by which state class is on the icon. Symbolic icons take
their color from `color`, so nothing here needs a second asset.
These are read at a glance from across a screen full of tabs, so the colours
These are read at a glance from across a screen full of tabs, so the colors
are picked to survive that: amber and red carry the two states that actually
want you, and they are the only warm colours anywhere in the window. */
want you, and they are the only warm colors anywhere in the window. */
.playpen-status-dot {
-gtk-icon-size: 11px;
opacity: 0;
@@ -375,6 +375,23 @@ dnd.playpen-tab-drag {
border-radius: 6px;
}
/* The rule between what a row *is* and whether it is allowed to interrupt you.
Inset from the popover's edges so it reads as a divider inside a list rather
than as the list being cut in two. */
.playpen-row-menu > separator {
margin: 3px 6px;
background-color: @pp_border;
}
/* What a tab's mute is currently doing, above the ways out of it. Sized and
dimmed like the sublabels in the settings dialog, because it is the same kind
of thing: a caption on the controls under it, not a control. */
.playpen-row-menu-state {
padding: 2px 8px;
color: @pp_text_faint;
font-size: 0.85em;
}
/* A web pane's navigation bar, below the pane header. Kept visually quieter
than the header so the two rows don't compete. */
.playpen-nav {
@@ -445,7 +462,7 @@ dnd.playpen-tab-drag {
asking without being read pane by pane.
Only the three states that are news get a border. Working deliberately does
not: it is the resting state of every pane you have set going, and colouring
not: it is the resting state of every pane you have set going, and coloring
the frame for it would leave the whole view repainting itself all afternoon
while saying nothing you did not already know. Its pulsing dot is enough.
@@ -465,7 +482,7 @@ dnd.playpen-tab-drag {
border-color: @pp_err;
}
/* The header carries a wash of the same colour. The border alone is a hairline
/* The header carries a wash of the same color. The border alone is a hairline
around a large shape; the header is a solid band right next to the dot and
the title, which is what makes a pane readable at a glance in a four-way
split. */
@@ -601,9 +618,9 @@ dnd.playpen-tab-drag {
choice is visible without opening anything, and so the one you are on is
readable at a glance rather than by reading a word. */
/* `background-image: none` on every rule below is load-bearing. Adwaita paints
button states with a gradient *over* the background colour, so setting the
colour alone leaves a washed-out version of it — most visibly on the checked
button, where the accent came out as a pale grey-blue. `:backdrop` is
button states with a gradient *over* the background color, so setting the
color alone leaves a washed-out version of it — most visibly on the checked
button, where the accent came out as a pale gray-blue. `:backdrop` is
spelled out for the same reason: Adwaita dims unfocused windows, and the
selected scheme is exactly the thing that has to stay readable while you are
looking at the window behind this one to see what it did. */
@@ -639,11 +656,11 @@ dnd.playpen-tab-drag {
}
/* -------------------------------------------------------------------------
The colour editor
The color editor
One row per colour in the palette, in sections. The rows are deliberately
One row per color in the palette, in sections. The rows are deliberately
plain: on a page where thirty-nine swatches are the point, the swatch should
be the only thing on a line carrying any colour, and a bordered card per
be the only thing on a line carrying any color, and a bordered card per
section would read as noise. The space between sections does that work
instead. */
@@ -665,10 +682,10 @@ dnd.playpen-tab-drag {
color: @pp_text_faint;
}
/* Adwaita gives a colour button the full button treatment: a gradient over the
colour, and a border in a grey belonging to neither palette. What is wanted
is a rectangle of the colour with this app's border around it, so the swatch
reads as the colour rather than as a button holding one. */
/* Adwaita gives a color button the full button treatment: a gradient over the
color, and a border in a gray belonging to neither palette. What is wanted
is a rectangle of the color with this app's border around it, so the swatch
reads as the color rather than as a button holding one. */
.playpen-color-group colorbutton > button {
padding: 0;
min-width: 0;
@@ -684,9 +701,9 @@ dnd.playpen-tab-drag {
}
/* The contrast slider, for the same reason as the swatch above it: Adwaita
paints a scale in the *desktop's* accent colour, which on a page whose whole
subject is the colour this window is painted from would be the one thing on
screen ignoring it. Left stock, dragging it towards a warm theme leaves a
paints a scale in the *desktop's* accent color, which on a page whose whole
subject is the color this window is painted from would be the one thing on
screen ignoring it. Left stock, dragging it toward a warm theme leaves a
blue bar sitting in the middle of the result. */
.playpen-contrast trough {
background-color: @pp_surface_raised_active;
@@ -789,7 +806,7 @@ dnd.playpen-tab-drag {
}
/* The glyph in force. `background-image: none` for the same reason as the theme
buttons above: Adwaita paints selection with a gradient over the colour, and
buttons above: Adwaita paints selection with a gradient over the color, and
without this the accent comes out washed. */
.playpen-emoji-grid > flowboxchild:selected,
.playpen-emoji-grid > flowboxchild:selected:backdrop {