style(tazjin/dotfiles): more authentic win95 waybar styling

Brings this a LOT closer to the Windows95 style theming that I'm trying to
achieve with the whole thing.

Change-Id: Ifb457a682cb83a78e4a8e2ba2bb4a5b96f3eaf1f
Reviewed-on: https://cl.tvl.fyi/c/depot/+/12525
Tested-by: BuildkiteCI
Autosubmit: tazjin <tazjin@tvl.su>
Reviewed-by: tazjin <tazjin@tvl.su>

users/tazjin/dotfiles/default.nix

@@ -1,8 +1,22 @@
-args: {
+{ depot, pkgs, ... }@args:
+
+rec {
   dunstrc = ./dunstrc;
   niri = ./niri.config.kdl;
   waybar = {
     config = import ./waybar/config.nix args;
-    style = ./waybar/style.css;
+    style = pkgs.runCommandNoCC "waybar-style.css"
+      {
+        CHICAGO95 = depot.third_party.chicago95;
+      } ''
+      cat ${./waybar/style.css} | ${pkgs.envsubst}/bin/envsubst > $out
+    '';
   };
+
+  # Helper derivation for iterating on waybar config.
+  waybarTest = pkgs.runCommandNoCC "waybar-conf" { } ''
+    mkdir -p $out
+    cat ${pkgs.writeText "waybar-conf.json" (builtins.toJSON(builtins.attrValues waybar.config))} > $out/config
+    cp ${waybar.style} $out/style.css
+  '';
 }

users/tazjin/dotfiles/waybar/config.nix

@@ -7,36 +7,40 @@ in
   mainBar = {
     layer = "top";
     position = "bottom";
-    modules-left = [ "image#start" "custom/start" ];
+    modules-left = [ "custom/start" ];
-
-    "image#start" = {
-      path = "${depot.third_party.chicago95}/share/icons/Chicago95/panel/24/start-here.png";
-      size = 24;
-      on-click = "xfce4-appfinder --disable-server";
-    };
 
     "custom/start" = {
       format = " Start";
       on-click = "xfce4-appfinder --disable-server";
     };
 
-    modules-right = [ "pulseaudio" "backlight" "battery" "tray" "clock" ];
+    modules-right = [ "tray" "backlight" "battery" "pulseaudio" "clock" ];
 
     pulseaudio = {
       on-click = "pavucontrol";
-      # Font "Awesome" speaker icons can't be made to render, I don't care why, emoji time.
+      format = " "; #styling only
-      format = "{volume}% 🎧";
+      states = {
-      format-muted = "{volume}% ";
+        low = 1;
+        medium = 40;
+        high = 75;
+      };
     };
 
     battery = {
-      format = "{capacity}% {icon}";
+      format = " "; # styling only
-      format-icons = [ "" "" "" "" "" ];
+      interval = 10;
+      states = {
+        full = 100;
+        good = 85;
+        medium = 60;
+        low = 40;
+        warning = 20;
+        critical = 10;
+      };
     };
 
     backlight = {
-      format = "{percent}% {icon}";
+      format = "{percent}%"; # styling only
-      format-icons = [ "" ];
       on-scroll-up = "light -A 1";
       on-scroll-down = "light -U 1";
     };

users/tazjin/dotfiles/waybar/style.css

@@ -1,12 +1,12 @@
 * {
     /* `otf-font-awesome` is required to be installed for icons */
-    font-family: FontAwesome, Unifont;
+    font-family: FontAwesome, MS Sans Serif;
-    font-size: 16px;
+    font-size: 14px;
 }
 
 window#waybar {
     background-color: #c0c0c0;
-    border-top: 3px solid #dfdfdf;
+    border-top: 0.1875em solid #dfdfdf;
     color: #000000;
     transition-property: background-color;
     transition-duration: .5s;
@@ -27,7 +27,7 @@ window#waybar.chromium {
 
 button {
     /* Use box-shadow instead of border so the text isn't offset */
-    box-shadow: inset 0 -3px transparent;
+    box-shadow: inset 0 -0.1875em transparent;
     /* Avoid rounded borders under each button name */
     border: none;
     border-radius: 0;
@@ -36,17 +36,12 @@ button {
 /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
 button:hover {
     background: inherit;
-    box-shadow: inset 0 -3px #ffffff;
+    box-shadow: inset 0 -0.1875em #ffffff;
-}
-
-/* you can set a style on hover for any module like this */
-#pulseaudio:hover {
-    background-color: #a37800;
 }
 
 #mode {
     background-color: #64727D;
-    box-shadow: inset 0 -3px #ffffff;
+    box-shadow: inset 0 -0.1875em #ffffff;
 }
 
 #clock,
@@ -66,54 +61,137 @@ button:hover {
 #scratchpad,
 #power-profiles-daemon,
 #mpd {
-    padding: 0 5px;
+    padding: 0 0.3125em;
-    padding-top: 0px;
+    padding-top: 0em;
-    padding-bottom: 0px;
+    padding-bottom: 0em;
     /* color: #ffffff; */
 }
 
 #window,
 #workspaces {
-    margin: 0 4px;
+    margin: 0 0.25em;
 }
 
+/* faithful-ish recreation of the old Windows start button ... */
 #custom-start {
-    padding-bottom: 1px;
+    /* general positioning to keep the spacing approximately correct */
-    margin-right: 1px;
+    color: @button_text_color;
-}
-
-/* pop out left "modules" (start button) */
-.modules-left {
-    margin: 3px;
-    border-right: 1px solid gray;
-    border-bottom: 1px solid gray;
-    border-left: 1px solid white;
-    border-top: 1px solid white;
     font-weight: bold;
+    margin: 0.2em;
+    margin-top: 0.35em;
+    padding: 0.2em;
+    padding-left: 1.25em;
+
+    /* raised button look, as per the Chicago95 GTK button style */
+    border: 0.1em solid;
+    border-radius: 0em;
+    color: @button_text_color;
+    outline-color: @outline_color;
+    border-top-color: @border_bright;
+    border-right-color: @border_dark;
+    border-left-color: @border_bright;
+    border-bottom-color: @border_dark;
+    background-color: @button_bg_color;
+    box-shadow: inset -0.1em -0.1em @border_shade, inset 0.1em 0.1em @border_light;
+
+    /* the actual image! */
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/categories/scalable/xfdesktop-menu.svg");
+    background-position: 0.15em center;
+    background-repeat: no-repeat;
+    background-size: 1.4em;
 }
 
-/* indent right modules like in the original */
 .modules-right {
-    margin: 3px;
+    margin: 0.2em;
-    border-top: 1px solid gray;
+    margin-top: 0.35em;
-    border-left: 1px solid gray;
-    border-right: 1px solid white;
-    border-bottom: 1px solid white;
 }
 
-/* If workspaces is the leftmost module, omit left margin */
+#clock {
-.modules-left > widget:first-child > #workspaces {
+    border-top: 0.1em solid gray;
-    margin-left: 0;
+    border-left: 0.1em solid gray;
+    border-right: 0.1em solid white;
+    border-bottom: 0.1em solid white;
 }
 
-/* If workspaces is the rightmost module, omit right margin */
+/* base setup for classes that have a Chicago95 icon as the display */
-.modules-right > widget:last-child > #workspaces {
+#battery, #pulseaudio, #backlight {
-    margin-right: 0;
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 24px;
+    min-width: 24px;
+    color: transparent; /* because the tooltips are still desirable */
 }
 
-#battery.charging, #battery.plugged {
+#backlight {
-    color: #ffffff;
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/32/xfpm-brightness-lcd.png");
-    background-color: #208C71;
+}
+
+/* battery levels matching Chicago95 icons */
+
+#battery.charging.critical {
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-000-charging.png");
+}
+
+#battery.charging.warning {
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-020-charging.png");
+}
+
+#battery.charging.low {
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-040-charging.png");
+}
+
+#battery.charging.medium {
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-060-charging.png");
+}
+
+#battery.charging.good {
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-080-charging.png");
+}
+
+#battery.charging.full {
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-100-charging.png");
+}
+
+#battery.critical {
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-000.png");
+}
+
+#battery.warning {
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-020.png");
+}
+
+#battery.low {
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-040.png");
+}
+
+#battery.medium {
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-060.png");
+}
+
+#battery.good {
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-080.png");
+}
+
+#battery.full {
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/48/battery-100.png");
+}
+
+/* volume levels matching Chicago95 icons */
+
+#pulseaudio.muted {
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/32/audio-volume-muted.png");
+}
+
+#pulseaudio.low {
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/32/audio-volume-low.png");
+}
+
+#pulseaudio.medium {
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/32/audio-volume-medium.png");
+}
+
+#pulseaudio.high {
+    background-image: url("${CHICAGO95}/share/icons/Chicago95/status/32/audio-volume-high.png");
 }
 
 @keyframes blink {
@@ -123,26 +201,10 @@ button:hover {
     }
 }
 
-/* Using steps() instead of linear as a timing function to limit cpu usage */
-#battery.critical:not(.charging) {
-    background-color: #e35f5f;
-    color: #ffffff;
-    animation-name: blink;
-    animation-duration: 0.5s;
-    animation-timing-function: steps(12);
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-}
-
 label:focus {
     background-color: #000000;
 }
 
-#pulseaudio.muted {
-    background-color: #808080;
-    color: #000000;
-}
-
 #tray > .passive {
     -gtk-icon-effect: dim;
 }