waybar: move to bottom and rebuild stylesheet (#82)

* waybar: simplify css and remove pill shapes

* waybar: use sans font

* waybar: use 700 weight font

* waybar: FontAwesome fallback

* waybar: move to bottom and rearrange widgets

* waybar: butons follow global borderRadius

* waybar: improve widget borders

* waybar: new default ppd icon

* waybar: better use colors to show activation

* waybar: use secondary color for muted volume

* nixfmt

* mako: move to bottom right with appropriate margins and grouping

* mako: simplify font name

* README.md: update

README.md

@@ -7,6 +7,7 @@ My comprehensive NixOS flake for managing my laptop, desktop, and home lab envir
 ## Features
 
 - **Hyprland:** Dynamic tiling Wayland compositor and window manager.
+- **Theme Engine:** Recolor your whole desktop with simple theme options.
 - **Home Lab Services:** Media, file sharing, and more.
 - **Reverse Proxy:** Efficient traffic routing for my home lab services.
 - **Modular Configuration:** Reasonably adaptable for different hardware and use cases.

homeManagerModules/services/mako/default.nix

@@ -9,14 +9,15 @@ in {
   config = lib.mkIf cfg.services.mako.enable {
     services.mako = {
       actions = true;
-      anchor = "top-center";
+      anchor = "bottom-right";
       backgroundColor = "${cfg.theme.colors.background}99";
       borderColor = "${cfg.theme.colors.primary}CC";
       borderRadius = cfg.theme.borderRadius;
       borderSize = 4;
       defaultTimeout = 10000;
       enable = true;
-      font = "${cfg.theme.sansFont.name} Regular ${toString cfg.theme.sansFont.size}";
+      font = "${cfg.theme.sansFont.name} ${toString cfg.theme.sansFont.size}";
+      groupBy = "app-name";
       height = 300;
       iconPath = "${pkgs.papirus-icon-theme}/share/icons/Papirus/";
       icons = true;
@@ -24,11 +25,13 @@ in {
       margin = "20,0";
       padding = "15";
       progressColor = "source ${cfg.theme.colors.secondary}";
+      sort = "+time";
       textColor = "${cfg.theme.colors.text}";
       width = 400;
 
       extraConfig = ''
         on-notify=exec ${lib.getExe pkgs.mpv} ${pkgs.sound-theme-freedesktop}/share/sounds/freedesktop/stereo/message.oga
+        outer-margin=20
 
         [mode=do-not-disturb]
         invisible=1

homeManagerModules/services/waybar/default.nix

@@ -15,19 +15,25 @@ in {
           height = 32;
           layer = "top";
           output = ["*"];
-          position = "top";
+          position = "bottom";
           modules-left =
-            lib.optionals (cfg.desktop.hyprland.enable)
+            lib.optionals (cfg.desktop.hyprland.tabletMode.enable)
-            ["hyprland/workspaces" "hyprland/submap"]
+            ["group/tablet"]
+            ++ lib.optionals (cfg.desktop.hyprland.enable)
+            ["hyprland/submap"]
             ++ lib.optionals (cfg.desktop.sway.enable)
-            ["sway/workspaces" "sway/scratchpad" "sway/mode"]
+            ["sway/scratchpad" "sway/mode"];
-            ++ lib.optionals (cfg.desktop.hyprland.tabletMode.enable)
+
-            ["group/tablet"];
+          modules-center =
+            lib.optionals (cfg.desktop.hyprland.enable)
+            ["hyprland/workspaces"]
+            ++ lib.optionals (cfg.desktop.sway.enable)
+            ["sway/workspaces"];
 
-          modules-center = ["clock"];
           modules-right = [
             "tray"
             "group/hardware"
+            "clock"
             "group/session"
           ];
 
@@ -226,7 +232,7 @@ in {
 
             format-icons = {
               balanced = "󰗑";
-              default = "󱐌";
+              default = "󰗑";
               performance = "󱐌";
               power-saver = "󰌪";
             };
@@ -259,17 +265,23 @@ in {
         * {
           border-radius: 0px;
           border: none;
-          font-family: "${cfg.theme.monospaceFont.name}";
+          font-family: "${cfg.theme.sansFont.name}", FontAwesome, sans-serif;
-          font-size: ${toString (cfg.theme.monospaceFont.size + 3)}px;
+          font-size: ${toString (cfg.theme.sansFont.size + 3)}px;
-          font-weight: 600;
+          font-weight: bold;
         }
 
         window#waybar {
-          background: rgba (0, 0, 0, 0.0);
+          background-color: alpha(${cfg.theme.colors.background}, 0.8);
+          color: ${cfg.theme.colors.text};
+        }
+
+        tooltip {
+          background-color: ${cfg.theme.colors.background};
           color: ${cfg.theme.colors.text};
         }
 
         #workspaces button {
+          border-radius: ${toString cfg.theme.borderRadius};
           color: ${cfg.theme.colors.text};
           margin: 0px 0px;
           padding: 0px 5px;
@@ -297,17 +309,19 @@ in {
           padding: 0px 7.5px;
         }
 
-        #battery {
+        #battery.charging,
-            color: ${cfg.theme.colors.text};
+        #power-profiles-daemon.power-saver {
-        }
-
-        #battery.charging {
           color: ${cfg.theme.colors.primary};
         }
 
         #battery.critical:not(.charging),
-        #custom-dnd.on {
+        #custom-dnd.on,
-            color: #e78284;
+        #idle_inhibitor.activated,
+        #network.disabled,
+        #network.disconnected,
+        #power-profiles-daemon.performance,
+        #pulseaudio.muted {
+          color: ${cfg.theme.colors.secondary};
         }
 
         #clock,
@@ -319,21 +333,15 @@ in {
         #submap,
         #tray,
         #workspaces {
-            background-color: alpha(${cfg.theme.colors.background}, 1.0);
+          margin: 5px 6px 5px 6px;
-            border-radius: ${toString cfg.theme.borderRadius}px;
+          padding: 0px 5px 0px 5px;
-            border: 4px solid alpha(${cfg.theme.colors.background}, 0.8);
-            margin: 5px 6px 0px 6px;
-            padding: 0px 10px 0px 10px;
-        }
-
-        #clock {
-            padding: 0px 20px 0px 20px;
         }
 
         #submap,
         #mode {
-            background: rgba(255, 123, 99, 0.8);
+          background-color: ${cfg.theme.colors.secondary};
-            color: ${cfg.theme.colors.text};
+          border-radius: ${toString cfg.theme.borderRadius};
+          color: ${cfg.theme.colors.background};
         }
       '';