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, 180 insertions, 0 deletions

diff --git a/styles/modules.css b/styles/modules.css
new file mode 100644
index 0000000..647465f
--- /dev/null
+++ b/styles/modules.css
@@ -0,0 +1,180 @@
+/* What is different about each module.
+ *
+ * The icons for the workspaces, the clock pair, the launcher and the language
+ * live here rather than in the config, because waybar's format-icons takes
+ * text and not paths. @ICONS@ is substituted by install.sh with the icon
+ * theme's absolute path, so the theme can move without editing this file.
+ */
+
+/* ------------------------------------------------------------------ *
+ * Launcher: the one always-coloured pill, and the desktop's identity. *
+ * ------------------------------------------------------------------ */
+
+#custom-launcher {
+	background: @accent;
+	background-image: url("@CONFIG@/slackware.svg");
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: 18px 18px;
+	min-width: 22px;
+	padding: 2px 10px;
+}
+
+/* The accent pill inverts on hover rather than lightening: it is already the
+ * brightest thing on the bar. */
+#custom-launcher:hover {
+	background-color: @main-bg;
+}
+
+/* ---------------------------------------------- *
+ * Clock: the only text, each with a leading icon. *
+ * ---------------------------------------------- */
+
+#clock.date,
+#clock.time {
+	background-repeat: no-repeat;
+	background-position: 10px center;
+	background-size: 16px 16px;
+	padding-left: 32px;
+}
+
+#clock.date {
+	background-image: url("@ICONS@/mimetypes/22/x-office-calendar.svg");
+}
+
+#clock.time {
+	background-image: url("@ICONS@/categories/22/clock.svg");
+}
+
+/* ------------------------------------------------------------- *
+ * Workspaces: eight themed icons, one per button, set by CSS.    *
+ *                                                               *
+ * The module's labels are empty (see the module config), so each *
+ * button is an icon-sized box and nothing else.                  *
+ * ------------------------------------------------------------- */
+
+#workspaces button {
+	background-repeat: no-repeat;
+	background-position: center;
+	background-size: 18px 18px;
+	min-width: 26px;
+	min-height: 26px;
+	margin: 0 1px;
+	border-radius: 10px;
+	/* Dim by default; the active workspace is the one at full strength. */
+	opacity: 0.45;
+	transition: opacity 0.3s ease, background-color 0.3s ease;
+}
+
+#workspaces button:hover {
+	background-color: @hover-bg;
+	opacity: 0.8;
+}
+
+#workspaces button.active,
+#workspaces button.focused {
+	background-color: @hover-bg;
+	opacity: 1;
+}
+
+#workspaces button.urgent {
+	background-color: @critical;
+	opacity: 1;
+}
+
+/* The eight. Generic names, so the bar does not lie when the application on a
+ * workspace changes. */
+#workspaces button:nth-child(1) { background-image: url("@ICONS@/categories/22/web-browser.svg"); }
+#workspaces button:nth-child(2) { background-image: url("@ICONS@/categories/22/utilities-terminal.svg"); }
+#workspaces button:nth-child(3) { background-image: url("@ICONS@/categories/22/text-editor.svg"); }
+#workspaces button:nth-child(4) { background-image: url("@ICONS@/devices/22/network-server.svg"); }
+#workspaces button:nth-child(5) { background-image: url("@ICONS@/actions/22/document-edit.svg"); }
+#workspaces button:nth-child(6) { background-image: url("@ICONS@/categories/22/applications-graphics.svg"); }
+#workspaces button:nth-child(7) { background-image: url("@ICONS@/categories/22/internet-chat.svg"); }
+#workspaces button:nth-child(8) { background-image: url("@ICONS@/devices/22/input-gaming.svg"); }
+
+/* ------------------------------------------------ *
+ * Language: a flag, shipped by this repo.           *
+ *                                                   *
+ * An image module, not hyprland/language: that one   *
+ * has no per-language CSS class, so the flag could   *
+ * not be selected. wb-lang picks the file instead.   *
+ * ------------------------------------------------ */
+
+#image.lang {
+	padding: 2px 10px;
+	min-width: 22px;
+}
+
+/* ------------------------------------------- *
+ * Dots: coloured by their scripts, not by CSS. *
+ * ------------------------------------------- */
+
+/* The privacy pill only exists while something is capturing: an empty label
+ * would otherwise leave a bare capsule sitting on the bar. */
+#custom-privacy_dots {
+	padding: 2px 10px;
+}
+
+#custom-privacy_dots.mic-off.cam-off.loc-off.scr-off {
+	padding: 0;
+	margin: 0;
+	opacity: 0;
+}
+
+#custom-vmdot {
+	padding: 2px 10px;
+}
+
+/* ---------------------------------------- *
+ * Volume: a drawer, the microphone hidden.  *
+ * ---------------------------------------- */
+
+#volume {
+	padding: 2px 8px;
+}
+
+#volume image {
+	padding: 0 4px;
+}
+
+/* --------------------------------------------------------- *
+ * Taskbar: application icons, with the idea2 underline.      *
+ * --------------------------------------------------------- */
+
+#taskbar button {
+	background: transparent;
+	padding: 0 8px;
+	margin: 0 1px;
+	border-bottom: 3px solid transparent;
+	transition: border-bottom-color 0.3s ease-out, background-color 0.3s ease;
+}
+
+#taskbar button:hover {
+	background: @hover-bg;
+	border-bottom-color: @accent;
+}
+
+#taskbar button.active {
+	border-bottom-color: @accent;
+}
+
+/* --------------------------- *
+ * Tray and presentation mode.  *
+ * --------------------------- */
+
+#tray {
+	padding: 2px 10px;
+}
+
+#tray menu {
+	background: @main-bg;
+	color: @main-fg;
+	border: 1px solid @outline;
+	border-radius: 8px;
+}
+
+#image.idle {
+	padding: 2px 10px;
+	min-width: 22px;
+}