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;
+}