much improve waybar styling
This commit is contained in:
@ -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)
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
'';
|
'';
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user