try to fix styling

Signed-off-by: unexplrd <unexplrd@linerds.us>

modules/home/desktop/niri/programs/waybar/default.nix

@@ -20,14 +20,13 @@ in {
   settings.bar-0 = {
     # layer = "top";
     position = "bottom";
-    height = 40;
+    height = 33;
     spacing = 0;
     # margin-left = 3;
     # margin-right = 3;
-    margin-left = 43 + 3;
-    margin-right = 43 + 3;
+    margin-left = 36 + 3;
+    margin-right = 36 + 3;
     margin-bottom = 3;
-    reload_style_on_change = true;
     modules-left = [
       "custom/launcher"
       "clock"
@@ -82,7 +81,7 @@ in {
       };
     };
     "tray" = {
-      icon-size = 20;
+      icon-size = 16;
       spacing = 6;
     };
     "clock" = {
@@ -164,7 +163,7 @@ in {
     };
     "privacy" = {
       icon-spacing = 0;
-      icon-size = 18;
+      icon-size = 16;
       transition-duration = 250;
       screenshare = {
         type = "screenshare";
@@ -179,54 +178,43 @@ in {
     };
     "wlr/taskbar" = {
       format = "{icon}";
-      icon-size = 20;
+      icon-size = 18;
       icon-theme = "${config.dconf.settings."org/gnome/desktop/interface".icon-theme}";
       tooltip-format = "{title}";
       on-click = "activate";
     };
   };
 
+  # TODO: broken padding on taskbar button
   style = ''
-    @define-color base00 #${colors.base00};
-    @define-color base01 #${colors.base01};
-    @define-color base02 #${colors.base02};
-    @define-color base03 #${colors.base03};
-    @define-color base04 #${colors.base04};
-    @define-color base05 #${colors.base05};
-    @define-color base06 #${colors.base06};
-    @define-color base07 #${colors.base07};
-    @define-color base08 #${colors.base08};
-    @define-color base09 #${colors.base09};
-    @define-color base0A #${colors.base0A};
-    @define-color base0B #${colors.base0B};
-    @define-color base0C #${colors.base0C};
-    @define-color base0D #${colors.base0D};
-    @define-color base0E #${colors.base0E};
-    @define-color base0F #${colors.base0F};
+    @define-color base00 #${colors.base00}; @define-color base08 #${colors.base08};
+    @define-color base01 #${colors.base01}; @define-color base09 #${colors.base09};
+    @define-color base02 #${colors.base02}; @define-color base0A #${colors.base0A};
+    @define-color base03 #${colors.base03}; @define-color base0B #${colors.base0B};
+    @define-color base04 #${colors.base04}; @define-color base0C #${colors.base0C};
+    @define-color base05 #${colors.base05}; @define-color base0D #${colors.base0D};
+    @define-color base06 #${colors.base06}; @define-color base0E #${colors.base0E};
+    @define-color base07 #${colors.base07}; @define-color base0F #${colors.base0F};
 
     * {
-      font-family: ${config.stylix.fonts.sansSerif.name}, FontAwesome;
+      all: unset;
+      font-family: ${config.stylix.fonts.sansSerif.name}, Symbols Nerd Font, FontAwesome;
       font-weight: 500;
-      font-size: 18px;
+      font-size: 16px;
+      min-width: 1em;
     }
 
-    window#waybar {
-      background: @base00;
-      border-radius: 9px;
-    }
-
-    .modules-left,
-    .modules-center,
-    .modules-right {
+    .modules-left, .modules-center, .modules-right, window#waybar {
       background-color: @base00;
-      border-radius: 9px;
       color: @base05;
+      border-radius: 12px;
     }
 
     tooltip {
       background: @base01;
       border: 1px solid @base0D;
-      border-radius: 12px;
+      border-radius: 16px;
+      padding: 2em;
     }
 
     tooltip label {
@@ -235,7 +223,7 @@ in {
 
     button {
       box-shadow: inset 0 -3px transparent;
-      border-radius: 3px;
+      border-radius: 6px;
     }
 
     button:hover {
@@ -258,10 +246,10 @@ in {
     #wireplumber,
     #workspaces button,
     #workspaces {
-      border-radius: 6px;
+      border-radius: 9px;
       background-color: @base01;
       margin: 3px 3px 3px 0;
-      padding: 0 6px;
+      padding: 0 0.42em;
     }
 
     /* #clock, */
@@ -273,15 +261,12 @@ in {
 
     #backlight,
     #battery,
+    #custom-launcher,
     #custom-notification,
     #idle_inhibitor,
+    #power-profiles-daemon,
     #wireplumber {
-      padding: 0 15px 0 10px;
-    }
-
-    #custom-launcher,
-    #power-profiles-daemon {
-      padding: 0 17px 0 8px;
+      padding: 0 0.5em;
     }
 
     #privacy,
@@ -290,39 +275,22 @@ in {
       padding: 0;
     }
 
-    #privacy-item {
-      padding: 0 5px;
+    #workspaces {
+      padding-left: 3px;
     }
 
-    #taskbar button,
-    #tray button {
-      padding: 0 3px;
-      margin: 3px;
+    #privacy-item {
+      padding: 0 0.3em;
     }
 
     #workspaces button {
-      border-radius: 3px;
-      padding: 0 5px;
-      margin: 3px;
+      border-radius: 6px;
+      min-width: 0.4em;
     }
 
     #battery.critical:not(.charging) {
       background-color: @base09;
       color: @base00;
-      animation-name: blink;
-      animation-duration: 0.5s;
-      animation-timing-function: steps(12);
-      animation-iteration-count: infinite;
-      animation-direction: alternate;
-    }
-
-    #mode {
-      background-color: rgba(0, 0, 0, 0.2);
-      box-shadow: inset 0 -3px @base05;
-    }
-
-    #power-profiles-daemon.balanced {
-      color: @base05;
     }
 
     #power-profiles-daemon.performance {
@@ -347,8 +315,27 @@ in {
       margin: 3px 0 3px 3px;
     }
 
+    #workspaces button.active,
+    #taskbar button.active {
+      background-color: @base02;
+    }
+
+    #workspaces button:hover,
+    #workspaces button.active:hover,
+    #taskbar button.active:hover,
     #taskbar button:hover {
       background-color: @base0D;
+      color: @base00;
+    }
+
+    #taskbar.empty {
+      background-color: transparent;
+    }
+
+    #taskbar button,
+    #tray button {
+      min-width: 0.4em;
+      margin: 3px;
     }
 
     #tray > .needs-attention {
@@ -360,10 +347,10 @@ in {
       -gtk-icon-effect: dim;
     }
 
-    #workspaces button.active {
+    /* #workspaces button.active {
       color: @base00;
       background-color: @base0D;
-    }
+    } */
 
     label:focus {
       background-color: #000000;