Change Waybar styling

This commit is contained in:
pancakes 2025-07-29 00:46:56 +10:00
parent 51c960f95a
commit c042e9ea1f
Signed by: pancakes
SSH key fingerprint: SHA256:yrp4c4hhaPoPG07fb4QyQIgAdlbUdsJvUAydJEWnfTw
3 changed files with 38 additions and 9 deletions

View file

@ -86,7 +86,7 @@ kitty-terminal:
[group("graphical")] [group("graphical")]
niri-window-manager: niri-window-manager:
@just _echowarning "1) Installing niri and related tools" @just _echowarning "1) Installing niri and related tools"
paru -S cliphist fuzzel gdm gnome-keyring niri-git noto-fonts noto-fonts-cjk noto-fonts-emoji noto-fonts-extra polkit-kde-agent swayidle swaylock swaync ttf-firacode-nerd ttf-font-awesome waybar wl-clipboard wlsunset wpaperd xdg-desktop-portal-gnome xwayland-satellite-git paru -S cliphist fuzzel gdm gnome-keyring inter-font niri-git noto-fonts noto-fonts-cjk noto-fonts-emoji noto-fonts-extra polkit-kde-agent swayidle swaylock swaync ttf-firacode-nerd ttf-font-awesome waybar wl-clipboard wlsunset wpaperd xdg-desktop-portal-gnome xwayland-satellite-git
@just _echowarning "\n2) Stowing niri config" @just _echowarning "\n2) Stowing niri config"
stow --dotfiles -S niri stow --dotfiles -S niri

View file

@ -2,6 +2,9 @@
{ {
"layer": "top", "layer": "top",
"spacing": 8, "spacing": 8,
"margin-top": 4,
"margin-left": 4,
"margin-right": 4,
"modules-left": [ "modules-left": [
"niri/workspaces", "niri/workspaces",
"privacy", "privacy",
@ -30,7 +33,8 @@
} }
}, },
"privacy": { "privacy": {
"icon-size": 12 "icon-size": 12,
"icon-spacing": 0
}, },
"clock": { "clock": {
"format": "{:%a %H:%M}", "format": "{:%a %H:%M}",

View file

@ -1,20 +1,38 @@
* { * {
/* `otf-font-awesome` is required to be installed for icons */ /* `otf-font-awesome` is required to be installed for icons */
font-family: FontAwesome, Inter, sans-serif; font-family: FontAwesome, Inter, sans-serif;
font-size: 12px; font-size: 14px;
} }
window#waybar { window#waybar {
background-color: rgba(26, 27, 38, 0.95); background-color: rgba(26, 27, 38, 0.9);
color: #c0caf5; color: #c0caf5;
transition-property: background-color; transition-property: background-color;
transition-duration: .5s; transition-duration: .5s;
border-radius: 5px;
}
tooltip {
padding: 5px;
background-color: rgba(26, 27, 38, 0.9);
border: 1px solid #bb9af7;
border-radius: 5px;
}
tooltip label {
color: #c0caf5;
font-size: 14px;
}
.modules-left,
.modules-center,
.modules-right {
margin: 4px 4px;
} }
button { button {
/* Avoid rounded borders under each button name */
border: none; border: none;
border-radius: 0; border-radius: 5px;
padding: 0 4px; padding: 0 4px;
} }
@ -54,6 +72,7 @@ button:hover {
padding: 0 4px; padding: 0 4px;
min-width: 1.5em; min-width: 1.5em;
color: #c0caf5; color: #c0caf5;
border-radius: 5px;
} }
#window, #window,
@ -61,12 +80,17 @@ button:hover {
margin: 0 4px; margin: 0 4px;
} }
#window {
color: #bb9af7;
}
/* If workspaces is the leftmost module, omit left margin */ /* If workspaces is the leftmost module, omit left margin */
.modules-left>widget:first-child>#workspaces { .modules-left>widget:first-child>#workspaces {
margin-left: 0; margin-left: 0;
} }
#clock { #clock {
font-size: 16px;
font-weight: bold; font-weight: bold;
} }
@ -121,11 +145,12 @@ label:focus {
} }
#privacy { #privacy {
padding: 0; padding: 0 4px;
background-color: #e0af68;
border-radius: 5px;
} }
#privacy-item { #privacy-item {
padding: 0 4px; padding: 0 2px;
background-color: #e0af68;
color: #15161e; color: #15161e;
} }