change waybar design

modules/home/waybar/default.nix

@@ -2,13 +2,12 @@
 let 
   custom = {
     font = "JetBrainsMono Nerd Font";
-    fontsize = "12";
+    fontsize = "15";
     primary_accent = "cba6f7";
     secondary_accent= "89b4fa";
     tertiary_accent = "f5f5f5";
     background = "11111B";
     opacity = "0.98";
-    cursor = "Numix-Cursor";
     palette = rec {
       primary_accent_hex = "cba6f7";
       secondary_accent_hex = "89b4fa";

modules/home/waybar/settings.nix

@@ -1,30 +1,15 @@
-{ 
+{ ... }:
-    custom ? {
-        font = "JetBrainsMono Nerd Font";
-        fontsize = "12";
-        primary_accent = "cba6f7";
-        secondary_accent = "89b4fa";
-        tertiary_accent = "f5f5f5";
-        background = "11111B";
-        opacity = ".85";
-        cursor = "Numix-Cursor";
-    },
-    ... 
-}:
 {
   programs.waybar.settings.mainBar = {
-    position= "top";
+    position= "bottom";
-    layer= "top";
+    layer= "bottom";
-    # height= 15;
+    height= 5;
     margin-top= 0;
     margin-bottom= 0;
     margin-left= 0;
     margin-right= 0;
     modules-left= [
         "custom/launcher" 
-        "custom/playerctl#backward" 
-        "custom/playerctl#play" 
-        "custom/playerctl#forward" 
     ];
     modules-center= [
         "hyprland/workspaces"
@@ -59,31 +44,6 @@
             sort-by-number= true;
         };
     };
-    "custom/playerctl#backward"= {
-        format= "󰙣 "; 
-        on-click= "playerctl previous";
-        on-scroll-up = "playerctl volume .05+";
-        on-scroll-down = "playerctl volume .05-";
-    };
-    "custom/playerctl#play"= {
-        format= "{icon}";
-        return-type= "json";
-        exec= "playerctl -a metadata --format '{\"text\": \"{{artist}} - {{markup_escape(title)}}\", \"tooltip\": \"{{playerName}} : {{markup_escape(title)}}\", \"alt\": \"{{status}}\", \"class\": \"{{status}}\"}' -F";
-        on-click= "playerctl play-pause";
-        on-scroll-up = "playerctl volume .05+";
-        on-scroll-down = "playerctl volume .05-";
-        format-icons= {
-            Playing = "<span>󰏥 </span>";
-            Paused = "<span> </span>";
-            Stopped = "<span> </span>";
-        };
-    };
-    "custom/playerctl#forward"= {
-        format= "󰙡 ";
-        on-click= "playerctl next";
-        on-scroll-up = "playerctl volume .05+";
-        on-scroll-down = "playerctl volume .05-";
-    };
     memory= {
         format= "󰟜 {}%";
         format-alt= "󰟜 {used} GiB"; # 

modules/home/waybar/style.nix

@@ -1,37 +1,25 @@
-{ 
+{ custom, ... }:
-    custom ? {
-        font = "JetBrainsMono Nerd Font";
-        fontsize = "12";
-        primary_accent = "cba6f7";
-        secondary_accent = "89b4fa";
-        tertiary_accent = "cdd6f4";
-        background = "11111B";
-        opacity = ".98";
-        cursor = "Numix-Cursor";
-    },
-    ... 
-}:
 {
   programs.waybar.style = ''
+    * { all: initial; }
+
     * {
         border: none;
         border-radius: 0px;
+        padding: 0;
+        margin: 0;
+        min-height: 0px;
         font-family: ${custom.font};
         font-weight: bold;
         font-size: 15px;
-        min-height: 0;
         opacity: ${custom.opacity};
     }
 
     window#waybar {
-        background: none;
+        background: rgba(24, 24, 37, 0.5);
     }
 
     #workspaces {
-        background: #${custom.palette.tertiary_background_hex};
-        margin: 5px 5px;
-        padding: 8px 12px;
-        border-radius: 12px 12px 24px 24px;
         color: #${custom.primary_accent}
     }
     #workspaces button {
@@ -60,104 +48,51 @@
         background-size: 200% 200%;
     }
 
-    #tray, #pulseaudio, #network, #cpu, #memory, #disk,
+    #tray, #pulseaudio, #network, #cpu, #memory, #disk, #clock, custom-launcher {
-    #custom-playerctl.backward, #custom-playerctl.play, #custom-playerctl.forward{
+        color: #${custom.tertiary_accent};
-        background: #${custom.palette.tertiary_background_hex};
         font-weight: bold;
-        margin: 5px 0px;
     }
 
     #cpu {
-        color: #${custom.tertiary_accent};
-        border-radius: 10px 0px 0px 24px;
         padding-left: 15px;
         padding-right: 9px;
         margin-left: 7px;
     }
     #memory {
-        color: #${custom.tertiary_accent};
-        border-radius: 0px 0 0px 0px;      
         padding-left: 9px;
         padding-right: 9px;
     }
     #disk {
-        color: #${custom.tertiary_accent};
-        border-radius: 0px 24px 10px 0px;      
         padding-left: 9px;
         padding-right: 15px;
     }
 
     #tray {
-        color: #${custom.tertiary_accent};
-        border-radius: 10px 24px 10px 24px;
         padding: 0 20px;
         margin-left: 7px;
     }
 
     #pulseaudio {
-        color: #${custom.tertiary_accent};
-        border-radius: 10px 0px 0px 24px;
         padding-left: 15px;
         padding-right: 9px;
         margin-left: 7px;
     }
     #network {
-        color: #${custom.tertiary_accent};
-        border-radius: 0px 24px 10px 0px;      
         padding-left: 9px;
         padding-right: 15px;
     }
     
     #clock {
-        color: #${custom.tertiary_accent};
+        padding-left: 9px;
-        background: #${custom.palette.tertiary_background_hex};
+        padding-right: 15px;
-        border-radius: 0px 0px 0px 40px;
-        padding: 10px 10px 15px 25px;
-        margin-left: 7px;
-        font-weight: bold;
-        font-size: 16px;
     }
     #custom-launcher {
-        color: #${custom.secondary_accent};
+        margin-left: 10px;
-        background: #${custom.palette.tertiary_background_hex};
-        border-radius: 0px 0px 40px 0px;
-        margin: 0px;
-        padding: 0px 30px 0px 10px;
-        font-size: 28px;
-    }
-
-    #custom-playerctl.backward, #custom-playerctl.play, #custom-playerctl.forward {
-        background: #${custom.palette.tertiary_background_hex};
         font-size: 22px;
     }
-    #custom-playerctl.backward:hover, #custom-playerctl.play:hover, #custom-playerctl.forward:hover{
+
-        color: #${custom.tertiary_accent};
-    }
-    #custom-playerctl.backward {
-        color: #${custom.primary_accent};
-        border-radius: 24px 0px 0px 10px;
-        padding-left: 16px;
-        margin-left: 7px;
-    }
-    #custom-playerctl.play {
-        color: #${custom.secondary_accent};
-        padding: 0 5px;
-    }
-    #custom-playerctl.forward {
-        color: #${custom.primary_accent};
-        border-radius: 0px 10px 24px 0px;
-        padding-right: 12px;
-        margin-right: 7px
-    }
     #window{
         background: #${custom.palette.tertiary_background_hex};
-        padding-left: 15px;
-        padding-right: 15px;
-        border-radius: 16px;
-        margin-top: 5px;
-        margin-bottom: 5px;
-        font-weight: normal;
-        font-style: normal;
     }
   '';
 }