change waybar design

This commit is contained in:
Frost-Phoenix 2024-03-01 23:38:10 +01:00
parent f4cacf8d44
commit f477bf3511
3 changed files with 18 additions and 124 deletions

View file

@ -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";

View file

@ -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"; # 

View file

@ -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;
}
'';
}