Improve styling.

This commit is contained in:
Greyson Parrelli
2026-08-12 21:15:07 -04:00
parent 4e0e400372
commit e16b147e16
13 changed files with 1104 additions and 119 deletions
+16 -9
View File
@@ -3,16 +3,23 @@
Playpen app icon: a terminal pane with the vertical tab strip down its left
edge. Shapes are kept large and high-contrast so the sidebar is still
readable when the icon is scaled down to 32px in a launcher.
Colours track the app's dark palette — the navy surfaces of
`palette-dark.css` and Signal's ultramarine as the accent. An icon is the
one part of the app that is looked at next to a row of other icons rather
than on its own, so it stays on the dark scheme in both: a launcher shelf
where one icon repaints itself with the desktop theme is a worse result than
one that is simply recognisable.
-->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128" width="128" height="128">
<defs>
<linearGradient id="pane" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#241f31"/>
<stop offset="1" stop-color="#14111b"/>
<stop offset="0" stop-color="#182740"/>
<stop offset="1" stop-color="#0b1320"/>
</linearGradient>
<linearGradient id="accent" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="#c7b3ff"/>
<stop offset="1" stop-color="#9b7ff0"/>
<stop offset="0" stop-color="#6191f3"/>
<stop offset="1" stop-color="#2c6bed"/>
</linearGradient>
<!-- Everything is clipped to the rounded body so the sidebar picks up
the same corner radius without repeating the path. -->
@@ -24,18 +31,18 @@
<rect x="8" y="12" width="112" height="104" rx="24" fill="url(#pane)"/>
<g clip-path="url(#body)">
<rect x="8" y="12" width="42" height="104" fill="#2f2743"/>
<rect x="49" y="12" width="2" height="104" fill="#3d3357"/>
<rect x="8" y="12" width="42" height="104" fill="#1c2c45"/>
<rect x="49" y="12" width="2" height="104" fill="#2a3c55"/>
<!-- Tab rows: the active one carries the accent, the rest are muted. -->
<rect x="16" y="30" width="26" height="12" rx="6" fill="url(#accent)"/>
<rect x="16" y="50" width="26" height="12" rx="6" fill="#5d5280"/>
<rect x="16" y="70" width="26" height="12" rx="6" fill="#493f66"/>
<rect x="16" y="50" width="26" height="12" rx="6" fill="#3f5573"/>
<rect x="16" y="70" width="26" height="12" rx="6" fill="#2f4460"/>
</g>
<!-- Prompt chevron and cursor, the universal shorthand for a terminal. -->
<path d="M66 51 L79 64 L66 77"
fill="none" stroke="#e8e2f7" stroke-width="9"
fill="none" stroke="#dde6f4" stroke-width="9"
stroke-linecap="round" stroke-linejoin="round"/>
<rect x="86" y="70" width="22" height="8" rx="4" fill="url(#accent)"/>

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.3 KiB