change waybar design
This commit is contained in:
		
							parent
							
								
									f4cacf8d44
								
							
						
					
					
						commit
						f477bf3511
					
				
					 3 changed files with 18 additions and 124 deletions
				
			
		| 
						 | 
				
			
			@ -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";
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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";
 | 
			
		||||
    layer= "top";
 | 
			
		||||
    # height= 15;
 | 
			
		||||
    position= "bottom";
 | 
			
		||||
    layer= "bottom";
 | 
			
		||||
    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"; # 
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -1,37 +1,25 @@
 | 
			
		|||
{ 
 | 
			
		||||
    custom ? {
 | 
			
		||||
        font = "JetBrainsMono Nerd Font";
 | 
			
		||||
        fontsize = "12";
 | 
			
		||||
        primary_accent = "cba6f7";
 | 
			
		||||
        secondary_accent = "89b4fa";
 | 
			
		||||
        tertiary_accent = "cdd6f4";
 | 
			
		||||
        background = "11111B";
 | 
			
		||||
        opacity = ".98";
 | 
			
		||||
        cursor = "Numix-Cursor";
 | 
			
		||||
    },
 | 
			
		||||
    ... 
 | 
			
		||||
}:
 | 
			
		||||
{ custom, ... }:
 | 
			
		||||
{
 | 
			
		||||
  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,
 | 
			
		||||
    #custom-playerctl.backward, #custom-playerctl.play, #custom-playerctl.forward{
 | 
			
		||||
        background: #${custom.palette.tertiary_background_hex};
 | 
			
		||||
    #tray, #pulseaudio, #network, #cpu, #memory, #disk, #clock, custom-launcher {
 | 
			
		||||
        color: #${custom.tertiary_accent};
 | 
			
		||||
        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};
 | 
			
		||||
        background: #${custom.palette.tertiary_background_hex};
 | 
			
		||||
        border-radius: 0px 0px 0px 40px;
 | 
			
		||||
        padding: 10px 10px 15px 25px;
 | 
			
		||||
        margin-left: 7px;
 | 
			
		||||
        font-weight: bold;
 | 
			
		||||
        font-size: 16px;
 | 
			
		||||
        padding-left: 9px;
 | 
			
		||||
        padding-right: 15px;
 | 
			
		||||
    }
 | 
			
		||||
    #custom-launcher {
 | 
			
		||||
        color: #${custom.secondary_accent};
 | 
			
		||||
        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};
 | 
			
		||||
        margin-left: 10px;
 | 
			
		||||
        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;
 | 
			
		||||
    }
 | 
			
		||||
  '';
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
	Add table
		Add a link
		
	
		Reference in a new issue