From 3fe67e744f07dad2e7e917776f188e8db2301a86 Mon Sep 17 00:00:00 2001
From: colin <colin@uninsane.org>
Date: Mon, 25 Jul 2022 00:00:11 -0700
Subject: [PATCH] sway: fix waybar styling

apparently setting any `style` attribute clears all the defaults,
so if i want to set the font via the style then i need to include
all the defaults as well.
---
 modules/gui/sway.nix | 255 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 253 insertions(+), 2 deletions(-)

diff --git a/modules/gui/sway.nix b/modules/gui/sway.nix
index 3e00d53a..5b45c6b1 100644
--- a/modules/gui/sway.nix
+++ b/modules/gui/sway.nix
@@ -170,7 +170,7 @@ in
             # size = 8.0;
             # names = [ "Font Awesome 6 Free" "DejaVu Sans" "Hack" ];
             # names = with config.fonts.fontconfig.defaultFonts; (emoji ++ monospace ++ serif ++ sansSerif);
-            names = with config.fonts.fontconfig.defaultFonts; (emoji ++ monospace);
+            names = with config.fonts.fontconfig.defaultFonts; (monospace ++ emoji);
             size = 24.0;
           };
           trayOutput = "primary";
@@ -239,7 +239,7 @@ in
             on-scroll-down = "${pkgs.playerctl}/bin/playerctl previous";
           };
           network = {
-            interval = 5;
+            interval = 2;
             # custom :> format specifier explained here: https://github.com/Alexays/Waybar/pull/472
             format-ethernet = "  {bandwidthUpBits:>}▲ {bandwidthDownBits:>}▼";
             max-length = 40;
@@ -268,10 +268,261 @@ in
           };
         };
       };
+      # style docs: https://github.com/Alexays/Waybar/wiki/Styling
       style = ''
         * {
           font-family: monospace;
         }
+
+        /* defaults below: https://github.com/Alexays/Waybar/blob/master/resources/style.css */
+        window#waybar {
+          background-color: rgba(43, 48, 59, 0.5);
+          border-bottom: 3px solid rgba(100, 114, 125, 0.5);
+          color: #ffffff;
+          transition-property: background-color;
+          transition-duration: .5s;
+        }
+
+        window#waybar.hidden {
+          opacity: 0.2;
+        }
+
+        /*
+        window#waybar.empty {
+          background-color: transparent;
+        }
+        window#waybar.solo {
+          background-color: #FFFFFF;
+        }
+        */
+
+        window#waybar.termite {
+          background-color: #3F3F3F;
+        }
+
+        window#waybar.chromium {
+          background-color: #000000;
+          border: none;
+        }
+
+        #workspaces button {
+          padding: 0 5px;
+          background-color: transparent;
+          color: #ffffff;
+          /* Use box-shadow instead of border so the text isn't offset */
+          box-shadow: inset 0 -3px transparent;
+          /* Avoid rounded borders under each workspace name */
+          border: none;
+          border-radius: 0;
+        }
+
+        /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
+        #workspaces button:hover {
+          background: rgba(0, 0, 0, 0.2);
+          box-shadow: inset 0 -3px #ffffff;
+        }
+
+        #workspaces button.focused {
+          background-color: #64727D;
+          box-shadow: inset 0 -3px #ffffff;
+        }
+
+        #workspaces button.urgent {
+          background-color: #eb4d4b;
+        }
+
+        #mode {
+          background-color: #64727D;
+          border-bottom: 3px solid #ffffff;
+        }
+
+        #clock,
+        #battery,
+        #cpu,
+        #memory,
+        #disk,
+        #temperature,
+        #backlight,
+        #network,
+        #pulseaudio,
+        #custom-media,
+        #tray,
+        #mode,
+        #idle_inhibitor,
+        #mpd {
+          padding: 0 10px;
+          color: #ffffff;
+        }
+
+        #window,
+        #workspaces {
+          margin: 0 4px;
+        }
+
+        /* If workspaces is the leftmost module, omit left margin */
+        .modules-left > widget:first-child > #workspaces {
+          margin-left: 0;
+        }
+
+        /* If workspaces is the rightmost module, omit right margin */
+        .modules-right > widget:last-child > #workspaces {
+          margin-right: 0;
+        }
+
+        #clock {
+          background-color: #64727D;
+        }
+
+        #battery {
+          background-color: #ffffff;
+          color: #000000;
+        }
+
+        #battery.charging, #battery.plugged {
+          color: #ffffff;
+          background-color: #26A65B;
+        }
+
+        @keyframes blink {
+          to {
+            background-color: #ffffff;
+            color: #000000;
+          }
+        }
+
+        #battery.critical:not(.charging) {
+          background-color: #f53c3c;
+          color: #ffffff;
+          animation-name: blink;
+          animation-duration: 0.5s;
+          animation-timing-function: linear;
+          animation-iteration-count: infinite;
+          animation-direction: alternate;
+        }
+
+        label:focus {
+          background-color: #000000;
+        }
+
+        #cpu {
+          background-color: #2ecc71;
+          color: #000000;
+        }
+
+        #memory {
+          background-color: #9b59b6;
+        }
+
+        #disk {
+          background-color: #964B00;
+        }
+
+        #backlight {
+          background-color: #90b1b1;
+        }
+
+        #network {
+          background-color: #2980b9;
+        }
+
+        #network.disconnected {
+          background-color: #f53c3c;
+        }
+
+        #pulseaudio {
+          background-color: #f1c40f;
+          color: #000000;
+        }
+
+        #pulseaudio.muted {
+          background-color: #90b1b1;
+          color: #2a5c45;
+        }
+
+        #custom-media {
+          background-color: #66cc99;
+          color: #2a5c45;
+          min-width: 100px;
+        }
+
+        #custom-media.custom-spotify {
+          background-color: #66cc99;
+        }
+
+        #custom-media.custom-vlc {
+          background-color: #ffa000;
+        }
+
+        #temperature {
+          background-color: #f0932b;
+        }
+
+        #temperature.critical {
+          background-color: #eb4d4b;
+        }
+
+        #tray {
+          background-color: #2980b9;
+        }
+
+        #tray > .passive {
+          -gtk-icon-effect: dim;
+        }
+
+        #tray > .needs-attention {
+          -gtk-icon-effect: highlight;
+          background-color: #eb4d4b;
+        }
+
+        #idle_inhibitor {
+          background-color: #2d3436;
+        }
+
+        #idle_inhibitor.activated {
+          background-color: #ecf0f1;
+          color: #2d3436;
+        }
+
+        #mpd {
+          background-color: #66cc99;
+          color: #2a5c45;
+        }
+
+        #mpd.disconnected {
+          background-color: #f53c3c;
+        }
+
+        #mpd.stopped {
+          background-color: #90b1b1;
+        }
+
+        #mpd.paused {
+          background-color: #51a37a;
+        }
+
+        #language {
+          background: #00b093;
+          color: #740864;
+          padding: 0 5px;
+          margin: 0 5px;
+          min-width: 16px;
+        }
+
+        #keyboard-state {
+          background: #97e1ad;
+          color: #000000;
+          padding: 0 0px;
+          margin: 0 5px;
+          min-width: 16px;
+        }
+
+        #keyboard-state > label {
+          padding: 0 5px;
+        }
+
+        #keyboard-state > label.locked {
+          background: rgba(0, 0, 0, 0.2);
+        }
       '';
       # style = ''
       #   * {