feat: a waybar bar for DP-3, themed by udt and drawn with icons

Builds the bar from scratch as a consumer of unified-desktop-theme: the
palette comes from there, the layout and the modules live here.

No font glyphs anywhere. Every symbol is a real icon from the icon theme
GTK already uses, which needs all three of waybar's mechanisms because no
single one covers everything: the icon-theme config key for the taskbar
and tray, `image` modules driving wb-icon/wb-lang for volume, microphone,
presentation mode and the keyboard flag, and CSS background-image for the
workspaces, the clock pair and the launcher.

The workspace icons have to be CSS because format-icons takes text rather
than paths, and faking the strip with eight custom modules would have cost
click-to-switch and the active and urgent states. The language flag goes
the other way: hyprland/language styles as #language with no per-language
class, so the flag could not be selected, and it is an image module.

Icons keep their own colours: 2466 of the theme's 5169 panel icons carry a
hardcoded gradient and are not recolourable, which is the intended look
here. The two icons the theme lacks are shipped instead, and the monochrome
Slackware mark takes the udt accent at install time.

vms_dots.sh and privacy_dots.sh lived only in ~/bin, in no repository at
all. They are versioned here now, symlinked back, and their hardcoded
state colours read from the palette.

Installs alongside the existing bar rather than over it, so DP-1 keeps
working while this one is tried on DP-3.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

1 files changed, 102 insertions, 0 deletions

diff --git a/styles/pills.css b/styles/pills.css
new file mode 100644
index 0000000..83e5d36
--- /dev/null
+++ b/styles/pills.css
@@ -0,0 +1,102 @@
+/* The pills, and the way they move.
+ *
+ * Geometry from idea1: modules are rounded capsules grouped into clusters,
+ * with gaps between clusters and none inside one, so the bar reads as a few
+ * objects rather than a continuous strip.
+ *
+ * Motion from idea2: background and colour cross-fade on hover over 0.3s.
+ * That is the whole effect. No keyframes anywhere, because GTK's CSS engine
+ * supports transitions on these properties directly and an animation would
+ * run forever whether or not anyone is looking at it.
+ */
+
+/* Every pill. Shared geometry lives here exactly once; modules.css only says
+ * what is different about each one. */
+#custom-launcher,
+#clock.date,
+#clock.time,
+#workspaces,
+#custom-vmdot,
+#taskbar,
+#custom-privacy_dots,
+#volume,
+#tray,
+#image.idle,
+#image.lang {
+	background: @main-bg;
+	color: @main-fg;
+	border-radius: 14px;
+	padding: 2px 12px;
+	margin: 4px 0;
+	transition: background-color 0.3s ease, color 0.3s ease;
+}
+
+/* Hover. The one rule that makes the bar feel alive, and the reason every
+ * pill declares a transition above. */
+#custom-launcher:hover,
+#clock.date:hover,
+#clock.time:hover,
+#custom-vmdot:hover,
+#custom-privacy_dots:hover,
+#volume:hover,
+#tray:hover,
+#image.idle:hover,
+#image.lang:hover {
+	background: @hover-bg;
+	color: @hover-fg;
+}
+
+/* Clusters.
+ *
+ * Neighbours inside a cluster sit flush and share one outline; only the ends
+ * of a cluster round off. The gap between clusters is a margin on the last
+ * pill of each, so adding a module to a cluster means editing one rule.
+ */
+
+/* Left: launcher | date time | workspaces | vm dots */
+#custom-launcher {
+	margin-left: 6px;
+	margin-right: 6px;
+}
+
+#clock.date {
+	border-radius: 14px 0 0 14px;
+	padding-right: 8px;
+}
+
+#clock.time {
+	border-radius: 0 14px 14px 0;
+	padding-left: 8px;
+	margin-right: 6px;
+}
+
+#workspaces {
+	padding: 2px 6px;
+	margin-right: 6px;
+}
+
+/* Right: privacy | volume | tray | presentation | language */
+#custom-privacy_dots {
+	margin-right: 6px;
+}
+
+#volume {
+	margin-right: 6px;
+}
+
+#tray {
+	margin-right: 6px;
+}
+
+#image.idle {
+	margin-right: 6px;
+}
+
+#image.lang {
+	margin-right: 6px;
+}
+
+/* Center: the taskbar is one pill holding a row of buttons. */
+#taskbar {
+	padding: 2px 6px;
+}