ivandimitrov8080/configuration.nix
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

waybar style cleanup

Browse Source
This commit is contained in:
Ivan Dimitrov 2024-05-15 19:21:13 +03:00
parent 0b3f90cb05
commit 5427f04fae
2 changed files with 88 additions and 119 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
modules/home/programs/waybar/default.nix
View File

@ -3,7 +3,23 @@
enable = true; enable = true;
catppuccin.enable = true; catppuccin.enable = true;
settings = { settings = {
mainBar = { mainBar =
let
calendar = {
mode = "year";
mode-mon-col = 3;
weeks-pos = "right";
format = {
months = "<span color='#ffead3'><b>{}</b></span>";
days = "<span color='#ecc6d9'><b>{}</b></span>";
weeks = "<span color='#99ffdd'><b>W{}</b></span>";
weekdays = "<span color='#ffcc66'><b>{}</b></span>";
today = "<span color='#ff6699'><b><u>{}</u></b></span>";
};
};
tooltip-format = "<tt><small>{calendar}</small></tt>";
in
{
layer = "top"; layer = "top";
position = "top"; position = "top";
height = 30; height = 30;
@ -18,27 +34,20 @@
"clock#time" = { "clock#time" = {
format = "{:%H:%M:%S}"; format = "{:%H:%M:%S}";
interval = 1; interval = 1;
tooltip-format = tooltip-format;
calendar = calendar;
}; };
"clock#week" = { "clock#week" = {
format = "{:%a}"; format = "{:%a}";
tooltip-format = tooltip-format;
calendar = calendar;
}; };
"clock#year" = { "clock#year" = {
format = "{:%Y-%m-%d}"; format = "{:%Y-%m-%d}";
tooltip-format = "<tt><small>{calendar}</small></tt>"; tooltip-format = tooltip-format;
calendar = { calendar = calendar;
mode = "year";
mode-mon-col = 3;
weeks-pos = "right";
format = {
months = "<span color='#ffead3'><b>{}</b></span>";
days = "<span color='#ecc6d9'><b>{}</b></span>";
weeks = "<span color='#99ffdd'><b>W{}</b></span>";
weekdays = "<span color='#ffcc66'><b>{}</b></span>";
today = "<span color='#ff6699'><b><u>{}</u></b></span>";
};
};
}; };
battery = { battery = {

66
modules/home/programs/waybar/style.css
View File

@ -5,53 +5,28 @@
window#waybar { window#waybar {
background-color: rgba(43, 48, 59, 0.1); background-color: rgba(43, 48, 59, 0.1);
border-bottom: 3px solid rgba(100, 114, 125, 0.5); border-bottom: 2px solid rgba(100, 114, 125, 0.5);
color: #ffffff; color: @rosewater;
transition-property: background-color;
transition-duration: .5s;
}
window#waybar.hidden {
opacity: 0.2;
}
button {
/* Use box-shadow instead of border so the text isn't offset */
box-shadow: inset 0 -3px transparent;
/* Avoid rounded borders under each button name */
border: none;
border-radius: 0;
}
/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
button:hover {
background: inherit;
box-shadow: inset 0 -3px #ffffff;
} }
#workspaces button { #workspaces button {
padding: 0 5px; padding: 0 5px;
background-color: rgba(2, 6, 23, 0.5); background-color: @base;
color: rgb(248, 250, 252); color: @text;
border-radius: 6px; border-radius: 6px;
} }
#workspaces button:hover { #workspaces button:hover {
background: rgba(2, 6, 23, 0.9); background: @mantle;
} }
#workspaces button.focused { #workspaces button.focused {
background-color: rgba(2, 6, 23, 0.9); background-color: @crust;
box-shadow: inset 0 -3px #ffffff; box-shadow: inset 0 -2px @sky;
} }
#workspaces button.urgent { #workspaces button.urgent {
background-color: rgba(69, 10, 10, .9);; background-color: @maroon;
}
#mode {
background-color: #64727D;
box-shadow: inset 0 -3px #ffffff;
} }
#clock, #clock,
@ -73,9 +48,9 @@ button:hover {
#mpd { #mpd {
padding: 0 10px; padding: 0 10px;
color: @text; color: @text;
background-color: @base;
margin: 0 .5em; margin: 0 .5em;
border-radius: 9999px; border-radius: 9999px;
background-color: @base;
} }
#clock.week { #clock.week {
@ -97,18 +72,9 @@ button:hover {
border-radius: 0px 9999px 9999px 0px; border-radius: 0px 9999px 9999px 0px;
} }
#window,
#workspaces {
margin: 0 4px;
}
#workspaces {
margin-left: 0;
}
#battery.charging, #battery.plugged { #battery.charging, #battery.plugged {
color: rgb(240, 253, 244); color: @text;
background-color: rgba(5, 46, 22, .8); background-color: @green;
} }
@keyframes blink { @keyframes blink {
@ -119,21 +85,15 @@ button:hover {
} }
#battery.warning:not(.charging) { #battery.warning:not(.charging) {
background-color: rgba(69, 26, 3, .8); background-color: @red;
color: rgb(255, 251, 235);
} }
/* 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: rgba(69, 10, 10, .8); background-color: @maroon;
color: rgb(254, 242, 242);
animation-name: blink; animation-name: blink;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-timing-function: steps(12); animation-timing-function: steps(12);
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-direction: alternate; animation-direction: alternate;
} }
label:focus {
background-color: #000000;
}