much improve waybar styling

This commit is contained in:
2025-06-29 20:48:54 +02:00
parent 2d0a133dd9
commit 8cb30719fa
2 changed files with 76 additions and 79 deletions

View File

@ -53,8 +53,8 @@ in {
"$menu" = "rofi -show-icons -show drun"; "$menu" = "rofi -show-icons -show drun";
general = { general = {
gaps_in = 5; gaps_in = 6;
gaps_out = 15; gaps_out = "10,15,15,15";
border_size = 1; border_size = 1;
"col.active_border" = "rgba(${colors.gruvbox-rgb.bright_orange},1.0) rgba(${colors.gruvbox-rgb.red},1.0) 45deg"; "col.active_border" = "rgba(${colors.gruvbox-rgb.bright_orange},1.0) rgba(${colors.gruvbox-rgb.red},1.0) 45deg";
"col.inactive_border" = "rgba(${colors.gruvbox-rgb.bg4},0.66)"; "col.inactive_border" = "rgba(${colors.gruvbox-rgb.bg4},0.66)";
@ -76,8 +76,8 @@ in {
}; };
shadow = { shadow = {
enabled = true; enabled = true;
range = 15; range = 8;
render_power = 5; render_power = 4;
color = "rgba(0,0,0,.5)"; color = "rgba(0,0,0,.5)";
}; };
}; };
@ -104,6 +104,13 @@ in {
smart_split = true; smart_split = true;
}; };
# Layer rules
layerrule = [
"blur, waybar" # Blur waybar
"ignorezero, waybar"
"ignorealpha 0.5, waybar"
];
# Window rules # Window rules
windowrulev2 = [ windowrulev2 = [
# Nice transparency for some apps (unless in fullscreen) # Nice transparency for some apps (unless in fullscreen)

View File

@ -19,7 +19,10 @@
"all-outputs" = true; "all-outputs" = true;
"separate-outputs" = true; "separate-outputs" = true;
}; };
load = {format = " {load1}";}; load = {
format = " {load1}";
"on-click" = "btop";
};
backlight = { backlight = {
format = "{icon} {percent}%"; format = "{icon} {percent}%";
"format-icons" = ["" "" "" "" "" "" "" "" ""]; "format-icons" = ["" "" "" "" "" "" "" "" ""];
@ -70,16 +73,18 @@
}; };
}; };
battery = { battery = {
interval = 60;
states = { states = {
good = 95;
warning = 30; warning = 30;
critical = 15; critical = 15;
}; };
format = "{icon} {capacity}%"; format = "{icon} {capacity}%";
"format-full" = "{icon} {capacity}%"; "format-full" = "{icon} {capacity}%";
"format-charging" = "󰃨 {capacity}%"; "format-charging" = "󰂄 {capacity}%";
"format-plugged" = " {capacity}%"; "format-plugged" = " {capacity}%";
"format-alt" = "{icon} {time}"; "format-alt" = "{icon} {time}";
"format-icons" = ["" "" "" "" ""]; "format-icons" = ["󰁻" "󰁼" "󰁾" "󰂀" "󰂂" "󰁹"];
}; };
mpris = { mpris = {
format = "{status_icon} {dynamic}"; format = "{status_icon} {dynamic}";
@ -96,8 +101,8 @@
"scroll-step" = 1; "scroll-step" = 1;
format = "{icon} {volume}%"; format = "{icon} {volume}%";
"format-bluetooth" = "{icon} {volume}% "; "format-bluetooth" = "{icon} {volume}% ";
"format-bluetooth-muted" = "󰆪 {icon}"; "format-bluetooth-muted" = " {icon}";
"format-muted" = "󰆪"; "format-muted" = "";
"format-icons" = { "format-icons" = {
headphone = ""; headphone = "";
"hands-free" = "󰂑"; "hands-free" = "󰂑";
@ -135,18 +140,19 @@
cava = { cava = {
framerate = 60; framerate = 60;
autosens = 1; autosens = 1;
bars = 10; sensitivity = 2;
bars = 12;
"lower_cutoff_freq" = 50; "lower_cutoff_freq" = 50;
"higher_cutoff_freq" = 10000; "higher_cutoff_freq" = 10000;
method = "pulse"; method = "pipewire";
source = "auto"; source = "auto";
stereo = false; stereo = false;
"bar_delimiter" = 0; "bar_delimiter" = 0;
"noise_reduction" = 0.77; "noise_reduction" = 0.7;
"input_delay" = 2; "input_delay" = 2;
"hide_on_silence" = true; "hide_on_silence" = true;
"sleep_timer" = 3; "sleep_timer" = 3;
"format-icons" = ["" "" "" "" "" "" "" ""]; "format-icons" = [" " "" "" "" "" "" "" "" ""];
actions = {"on-click-right" = "mode";}; actions = {"on-click-right" = "mode";};
}; };
mpris = { mpris = {
@ -189,17 +195,17 @@
@define-color braqua #8ec07c; @define-color braqua #8ec07c;
@define-color orange #d65d0e; @define-color orange #d65d0e;
@define-color brorange #fe8019; @define-color brorange #fe8019;
@define-color tooltipbg rgba(40, 40, 40, 0.8); @define-color tooltipbg rgba(40, 40, 40, 0.9);
* { * {
font-size: 14px; font-size: 14px;
border-radius: 5px; border-radius: 6px;
} }
tooltip { tooltip {
font-family: Intel One Mono, monospace; font-family: Intel One Mono, Symbols Nerd Font Mono,monospace;
background-color: @tooltipbg; background-color: @tooltipbg;
border-radius: 5px; border-radius: 6px;
border: 1px solid @bg3; border: 1px solid @bg3;
} }
@ -214,7 +220,7 @@
border-bottom: 0px; border-bottom: 0px;
color: @fg; color: @fg;
transition-property: background-color; transition-property: background-color;
transition-duration: .4s; transition-duration: .2s;
} }
window#waybar.hidden { window#waybar.hidden {
@ -226,69 +232,57 @@
padding: 0; padding: 0;
} }
/*
window#waybar.empty {
background-color: transparent;
}
window#waybar.solo {
background-color: #FFFFFF;
}
*/
.modules-left, .modules-left,
.modules-center, .modules-center,
.modules-right { .modules-right {
margin: 15px 15px 0; margin: 10px 16px 0;
} }
button { button {
/* Use box-shadow instead of border so the text isn't offset */
/* box-shadow: inset 0 -3px transparent; */
border: none; border: none;
} }
/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
/*
button:hover {
background: inherit;
box-shadow: inset 0 -3px @fg;
} */
#workspaces { #workspaces {
background-color: @bg; background-color: transparent;
border: 1px solid alpha(@bg4,.6);
} }
#workspaces button { #workspaces button {
padding: 0 5px; padding: 0 6px;
background-color: transparent; background: alpha(@bg,.6);
color: @fg; color: @fg;
border-radius: 0; border-radius: 0;
transition-property: background-color;
transition-duration: .2s;
} }
#workspaces button:first-child { #workspaces button:first-child {
border-radius: 5px 0 0 5px; border-radius: 6px 0 0 6px;
} }
#workspaces button:last-child { #workspaces button:last-child {
border-radius: 0 5px 5px 0; border-radius: 0 6px 6px 0;
} }
#workspaces button:first-child:last-child { #workspaces button:first-child:last-child {
border-radius: 5px; border-radius: 6px;
} }
#workspaces button:hover { #workspaces button:hover, #workspaces button.active:hover {
color: @orange; color: @yellow;
background: alpha(@bg4,.6);
box-shadow: inherit;
text-shadow: inherit;
} }
#workspaces button.active { #workspaces button.active {
color: @yellow; color: @orange;
background-color: @bg3; background: alpha(@fg,.6);
/* box-shadow: inset 0 -3px #ffffff; */
} }
#workspaces button.urgent { #workspaces button.urgent {
background-color: @purple; background: alpha(@purple,.6);
} }
#idle_inhibitor, #idle_inhibitor,
@ -305,21 +299,17 @@
#mpris, #mpris,
#power-profiles-daemon, #power-profiles-daemon,
#load { #load {
padding: 0 10px;
background-color: @bg;
color: @fg; color: @fg;
padding: 0 15px;
background: alpha(@bg,.6);
border: 1px solid alpha(@bg4,.6);
} }
#window { #window {
padding: 0 10px; padding: 0 15px;
background-color: @fg;
color: @bg1; color: @bg1;
} background: alpha(@fg,.6);
border: 1px solid alpha(@bg4,.6);
#mode {
background-color: @aqua;
color: @fglight;
/* box-shadow: inset 0 -3px #ffffff; */
} }
/* If workspaces is the leftmost module, omit left margin */ /* If workspaces is the leftmost module, omit left margin */
@ -333,7 +323,7 @@
} }
#cava { #cava {
padding: 0 5px; padding: 0 6px;
} }
#cava.silent { #cava.silent {
@ -342,36 +332,41 @@
padding: 0; padding: 0;
} }
#battery.charging, #battery.plugged {
background-color: @green;
color: @fglight;
}
#power-profiles-daemon.performance { #power-profiles-daemon.performance {
background-color: @red; background: alpha(@red,.6);
color: @fglight; color: @fg;
} }
#power-profiles-daemon.balanced { #power-profiles-daemon.balanced {
background-color: @blue; background: alpha(@blue,.6);
color: @fglight; color: @fg;
} }
#power-profiles-daemon.power-saver { #power-profiles-daemon.power-saver {
background-color: @green; background: alpha(@green,.6);
color: @fg;
}
#battery.charging, #battery.plugged, #battery.good {
background: alpha(@green,.6);
color: @fg;
}
#battery.warning {
background: alpha(@yellow,.6);
color: @fglight; color: @fglight;
} }
@keyframes blink { @keyframes blink {
to { to {
background-color: @bg; background: alpha(@bg,.6);
color: @fg; color: @fg;
} }
} }
/* Using steps() instead of linear as a timing function to limit cpu usage */ /* Using steps() instead of linear as a timing function to limit cpu usage */
#battery.critical:not(.charging) { #battery.critical:not(.charging) {
background-color: @red; background: alpha(@red,.6);
color: @fg; color: @fg;
animation-name: blink; animation-name: blink;
animation-duration: 0.5s; animation-duration: 0.5s;
@ -381,7 +376,7 @@
} }
#wireplumber.muted { #wireplumber.muted {
background-color: @blue; background: alpha(@blue,.6);
} }
#tray > .passive { #tray > .passive {
@ -393,18 +388,13 @@
} }
#mpris.playing { #mpris.playing {
background-color: @yellow; background: alpha(@yellow,.6);
color: @fglight; color: @fglight;
} }
#tray menu { #tray menu {
font-family: sans-serif; font-family: sans-serif;
} }
#scratchpad.empty {
background: transparent;
padding: 0;
}
''; '';
}; };
} }