waybar: updated waybar style and configuration

This commit is contained in:
Nico 2025-05-03 16:15:57 +10:00
parent deb4cec853
commit 712ad45df1
2 changed files with 371 additions and 305 deletions

View file

@ -1,194 +1,215 @@
// -*- mode: jsonc -*- // waybar taken from: https://github.com/gmr458/.dotfiles/tree/main/waybar/.config/waybar
{ {
"layer": "top", // Waybar at top layer "layer": "top",
"position": "left", // Waybar position (top|bottom|left|right) "position": "left",
// "height": 30, // Waybar height (to be removed for auto height) "width": 24,
"width": 15, // Waybar width "margin-top": 0,
"spacing": 4, // Gaps between modules (4px) "margin-bottom": 0,
// Choose the order of the modules "margin-left": 0,
"margin-right": 0,
"spacing": 0,
"gtk-layer-shell": true,
"modules-left": [ "modules-left": [
"hyprland/workspaces" "custom/notification",
// "custom/media" // "backlight/slider",
"backlight",
"pulseaudio/slider",
"pulseaudio#audio",
"network"
// "bluetooth"
], ],
// "modules-center": [ "custom/notification": {
// "hyprland/window" "tooltip": false,
// ],
"modules-right": [
// "mpd",
// "idle_inhibitor",
// "pulseaudio",
// "power-profiles-daemon",
// "cpu",
// "memory",
// "temperature",
// "backlight",
// "keyboard-state",
// "sway/language",
"network",
"wireplumber",
"battery",
"tray",
"clock"
],
// Modules configuration
// "sway/workspaces": {
// "disable-scroll": true,
// "all-outputs": true,
// "warp-on-scroll": false,
// "format": "{name}: {icon}",
// "format-icons": {
// "1": "",
// "2": "",
// "3": "",
// "4": "",
// "5": "",
// "urgent": "",
// "focused": "",
// "default": ""
// }
// },
"keyboard-state": {
"numlock": true,
"capslock": true,
"format": "{name} {icon}",
"format-icons": {
"locked": "",
"unlocked": ""
}
},
"sway/mode": {
"format": "<span style=\"italic\">{}</span>"
},
"sway/scratchpad": {
"format": "{icon} {count}",
"show-empty": false,
"format-icons": ["", ""],
"tooltip": true,
"tooltip-format": "{app}: {title}"
},
"mpd": {
"format": "{stateIcon} {consumeIcon}{randomIcon}{repeatIcon}{singleIcon}{artist} - {album} - {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) ⸨{songPosition}|{queueLength}⸩ {volume}% ",
"format-disconnected": "Disconnected ",
"format-stopped": "{consumeIcon}{randomIcon}{repeatIcon}{singleIcon}Stopped ",
"unknown-tag": "N/A",
"interval": 5,
"consume-icons": {
"on": " "
},
"random-icons": {
"off": "<span color=\"#f53c3c\"></span> ",
"on": " "
},
"repeat-icons": {
"on": " "
},
"single-icons": {
"on": "1 "
},
"state-icons": {
"paused": "",
"playing": ""
},
"tooltip-format": "MPD (connected)",
"tooltip-format-disconnected": "MPD (disconnected)"
},
"idle_inhibitor": {
"format": "{icon}", "format": "{icon}",
"format-icons": { "format-icons": {
"activated": "", "notification": "󱅫",
"deactivated": "" "none": "󰂚",
} "dnd-notification": "󰂛",
"dnd-none": "󰂛",
"inhibited-notification": "󱅫",
"inhibited-none": "󰂚",
"dnd-inhibited-notification": "󰂛",
"dnd-inhibited-none": "󰂛"
}, },
"tray": { "return-type": "json",
// "icon-size": 21, "exec-if": "which swaync-client",
"spacing": 10 "exec": "swaync-client -swb",
"on-click": "swaync-client -t -sw",
"on-click-right": "swaync-client -d -sw",
"escape": true
}, },
"clock": { // "backlight/slider": {
// "timezone": "America/New_York", // "min": 1,
"format": "{:%H\n%M}", // "max": 100,
"format-alt": "{:%Y-%m-%d}" // "orientation": "vertical"
// },
"backlight": {
"format": "{icon}",
"format-icons": ["󰃟"],
"on-scroll-up": "brightnessctl set +5%",
"on-scroll-down": "brightnessctl set 5%-",
"on-click": "",
"tooltip": true,
"tooltip-format": "{percent}%"
}, },
"cpu": { "pulseaudio/slider": {
"format": "{usage}% ", "min": 0,
"max": 100,
"orientation": "vertical"
},
"pulseaudio#audio": {
"format": "{icon}",
"format-bluetooth": "󰂯\n{icon}",
"format-bluetooth-muted": "󰂯\n󰖁",
"format-muted": "󰖁",
"format-icons": {
"headphone": "󰋋",
"hands-free": "󰋋",
"headset": "󰋋",
"phone": "",
"portable": "",
"car": "",
"default": ["󰕿", "󰖀", "󰕾"]
},
"on-click": "pactl set-sink-mute @DEFAULT_SINK@ toggle",
"on-scroll-up": "pactl set-sink-volume @DEFAULT_SINK@ +1%",
"on-scroll-down": "pactl set-sink-volume @DEFAULT_SINK@ -1%",
"tooltip": true,
"tooltip-format": "{icon} {desc} {volume}%"
},
"pulseaudio#microphone": {
"format": "{format_source}",
"format-source": "󰍬 {volume}%",
"format-source-muted": "󰍭 {volume}%",
"on-click": "pactl set-source-mute @DEFAULT_SOURCE@ toggle",
"on-scroll-up": "pactl set-source-volume @DEFAULT_SOURCE@ +1%",
"on-scroll-down": "pactl set-source-volume @DEFAULT_SOURCE@ -1%",
"max-volume": 100,
"tooltip": false "tooltip": false
}, },
"network": {
"interval": 1,
"interface": "wlo1",
"format-icons": ["󰤯", "󰤟", "󰤢", "󰤥", "󰤨"],
"format-wifi": "{icon}",
"format-disconnected": "",
"on-click": "nm-connection-editor",
"tooltip": true,
"tooltip-format": "󰢮 {ifname}\n󰩟 {ipaddr}/{cidr}\n{icon} {essid}\n󱑽 {signalStrength}% {signaldBm} dBm {frequency} MHz\n󰞒 {bandwidthDownBytes}\n󰞕 {bandwidthUpBytes}"
},
"bluetooth": {
"format-disabled": "",
"format-off": "",
"format-on": "󰂯",
"format-connected": "󰂯",
"format-connected-battery": "󰂯",
"tooltip-format-connected": "{device_enumerate}",
"tooltip-format-enumerate-connected": "{device_alias} 󰂄{device_battery_percentage}% {device_address}",
"on-click": "blueman-manager",
"tooltip": true
},
"modules-center": [
"hyprland/workspaces",
"hyprland/submap",
"sway/workspaces",
"sway/mode"
],
"hyprland/workspaces": {
"format": "{icon}",
"format-icons": {
"1": "1",
"2": "2",
"3": "3",
"4": "4",
"5": "5",
"6": "6",
"7": "7",
"8": "8",
"9": "9",
"default": "1"
},
"on-click": "activate"
},
"hyprland/submap": {
"format": "{}",
"tooltip": false
},
"hyprland/window": {
"format": " <span font_desc='Iosevka Raven 12'>{:.40}</span> ",
"separate-outputs": false
},
"sway/workspaces": {
"format": "{icon}",
"format-icons": {
"1": "1",
"2": "2",
"3": "3",
"4": "4",
"5": "5",
"6": "6",
"7": "7",
"8": "8",
"9": "9",
"default": "1"
},
"on-click": "activate"
},
"sway/mode": {
"format": "{}",
"tooltip": false
},
"wlr/taskbar": {
"format": "{icon}",
"active-first": true
},
"modules-right": [
// "pulseaudio#microphone",
// "battery"
"tray",
"memory",
"cpu",
"clock"
],
"tray": {
"icon-size": 14,
"spacing": 8
},
"cpu": {
"format": "󰻠",
"on-click": "",
"tooltip": true
},
"memory": { "memory": {
"format": "{}% " "format": "󰍛",
}, "tooltip-format": "󰍛 Total: {total:0.1f}GB, Avail: {avail:0.1f}GB, Used: {used:0.1f}GB ({percentage}%)\n󰓡 Total: {swapTotal:0.1f}GB, Avail: {swapAvail:0.1f}GB, Used: {swapUsed:0.1f}GB ({swapPercentage}%)",
"temperature": { "on-click": "",
// "thermal-zone": 2, "tooltip": true
// "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input",
"critical-threshold": 80,
// "format-critical": "{temperatureC}°C {icon}",
"format": "{temperatureC}°C {icon}",
"format-icons": ["", "", ""]
},
"backlight": {
// "device": "acpi_video1",
"format": "{percent}% {icon}",
"format-icons": ["", "", "", "", "", "", "", "", ""]
}, },
"battery": { "battery": {
"states": { "states": {
// "good": 95,
"warning": 30, "warning": 30,
"critical": 15 "critical": 15
}, },
"format": "{icon}", "format": "{icon} {capacity}%",
"format-full": "{icon}", "format-charging": "󰂄 {capacity}%",
"format-charging": "", "format-plugged": "󱘖 {capacity}%",
"format-plugged": "", "format-icons": ["󰁺", "󰁻", "󰁼", "󰁽", "󰁾", "󰁿", "󰂀", "󰂁", "󰂂", "󰁹"],
"format-alt": "{time} {icon}", "on-click": "",
// "format-good": "", // An empty format will hide the module "tooltip": false
// "format-full": "",
"format-icons": ["", "", "", "", ""]
}, },
"wireplumber": { "clock": {
"format": "{icon}", "interval": 1,
"format-muted": "", "format": "󰥔\n{:%I\n%M\n}",
"tooltip-format": "{volume}% on {node_name}", "format-alt": "󰣆\n{:%d\n%m\n%y\n󰥔\n%I\n%M\n}",
"on-click": "helvum", "tooltip": true,
"max-volume": 100, "tooltip-format": "{calendar}",
"scroll-step": 1, "calendar": {
"format-icons": ["", "", ""] "mode": "year",
}, "mode-mon-col": 3,
"network": { "format": {
// "interface": "wlp2*", // (Optional) To force the use of this interface "today": "<span color='#0dbc79'>{}</span>"
//"format-wifi": "{essid} ({signalStrength}%) ", }
//"format-ethernet": "{ipaddr}/{cidr} ",
//"tooltip-format": "{ifname} via {gwaddr} ",
//"format-linked": "{ifname} (No IP) ",
//"format-disconnected": "Disconnected ⚠",
//"format-alt": "{ifname}: {ipaddr}/{cidr}"
"format-wifi": "",
"format-ethernet": "",
"tooltip-format": "{ifname} via {gwaddr} ",
"format-linked": "",
"format-disconnected": "⚠",
"format-alt": "{ifname}: {ipaddr}/{cidr}"
},
"custom/media": {
"format": "{icon} {text}",
"return-type": "json",
"max-length": 40,
"format-icons": {
"spotify": "",
"default": "🎜"
},
"escape": true,
"exec": "$HOME/.config/waybar/mediaplayer.py 2> /dev/null" // Script in resources folder
// "exec": "$HOME/.config/waybar/mediaplayer.py --player spotify 2> /dev/null" // Filter player based on name
},
"custom/power": {
"format" : "⏻ ",
"tooltip": false,
"menu": "on-click",
"menu-file": "$HOME/.config/waybar/power_menu.xml", // Menu file in resources folder
"menu-actions": {
"shutdown": "shutdown",
"reboot": "reboot",
"suspend": "systemctl suspend",
"hibernate": "systemctl hibernate"
} }
} }
} }

View file

@ -1,159 +1,204 @@
@define-color text #c0caf5; @define-color white #F2F2F2;
@define-color background #24283b; @define-color black #000203;
@define-color backgroundalt #181b29; @define-color text #BECBCB;
@define-color lightgray #686868;
@define-color darkgray #353535;
@define-color red #F38BA8;
@define-color black #1d202f; @define-color black-transparent-1 rgba(0, 0, 0, 0.1);
@define-color red #f7768e; @define-color black-transparent-2 rgba(0, 0, 0, 0.2);
@define-color green #9ece6a; @define-color black-transparent-3 rgba(0, 0, 0, 0.3);
@define-color yellow #e0af68; @define-color black-transparent-4 rgba(0, 0, 0, 0.4);
@define-color blue #7aa2f7; @define-color black-transparent-5 rgba(0, 0, 0, 0.5);
@define-color purple #bb9af7; @define-color black-transparent-6 rgba(0, 0, 0, 0.6);
@define-color cyan #7dcfff; @define-color black-transparent-7 rgba(0, 0, 0, 0.7);
@define-color gray #a9b1d6; @define-color black-transparent-8 rgba(0, 0, 0, 0.8);
@define-color black-transparent-9 rgba(0, 0, 0, 0.9);
@define-color black-solid rgba(0, 0, 0, 1.0);
* { * {
/* `otf-font-awesome` is required to be installed for icons */ font-family:
font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; Iosevka,
font-size: 16px; Material Design Icons Desktop;
font-size: 13px;
padding: 0;
margin: 0;
} }
window#waybar { window#waybar {
background-color: @background; background-color: @black-transparent-9;
color: @text; color: @text;
transition-property: background-color;
transition-duration: .5s;
}
window#waybar.hidden {
opacity: 0.2;
}
/*
window#waybar.empty {
background-color: transparent;
}
window#waybar.solo {
background-color: #FFFFFF;
}
*/
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; border-radius: 0;
} }
/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ tooltip {
button:hover { background: @black-solid;
background: inherit; border: 1px solid @darkgray;
box-shadow: @backgroundalt; border-radius: 0;
} }
tooltip label {
/* you can set a style on hover for any module like this */ color: @text;
#pulseaudio:hover {
background-color: #a37800;
}
#workspaces button {
padding: 0 5px;
background-color: transparent;
color: #ffffff;
}
#workspaces button:hover {
background: rgba(0, 0, 0, 0.2);
color: @red;
}
#workspaces button.focused {
background-color: #64727D;
box-shadow: inset 0 -3px #ffffff;
}
#workspaces button.urgent {
background-color: @yellow;
}
#clock,
#battery,
#cpu,
#memory,
#disk,
#temperature,
#backlight,
#network,
#pulseaudio,
#wireplumber,
#custom-media,
#tray,
#mode,
#idle_inhibitor,
#scratchpad,
#power-profiles-daemon,
#mpd {
padding: 0 10px;
color: #ffffff;
} }
#workspaces { #workspaces {
}
#workspaces button {
background-color: transparent;
color: @lightgray;
transition: all 0.3s ease;
}
#workspaces button:hover {
box-shadow: inherit;
text-shadow: inherit;
background: transparent;
border: 1px solid rgba(0, 0, 0, 0);
color: @white;
transition: all 0.3s ease;
}
#workspaces button.focused,
#workspaces button.active {
color: @white;
transition: all 0.3s ease;
animation: colored-gradient 10s ease infinite;
}
#workspaces button.urgent {
background-color: @red;
color: @black;
transition: all 0.3s ease;
}
/* -------------------------------------------------------------------------------- */
#submap,
#mode,
#tray,
#cpu,
#memory,
#backlight,
#pulseaudio.audio,
#pulseaudio.microphone,
#network.wlo1,
#network.eno1,
#bluetooth,
#battery,
#clock,
#mpd,
#custom-media,
#custom-notification {
background-color: transparent;
color: @text;
margin-top: 4px;
margin-bottom: 4px;
margin-left: 0;
margin-right: 0;
border-radius: 20px;
transition: all 0.3s ease;
}
#submap {
border: 0;
}
/* -------------------------------------------------------------------------------- */
/* If workspaces is the leftmost module, omit left margin */
.modules-left > widget:first-child > #workspaces button,
.modules-left > widget:first-child > #tray,
.modules-left > widget:first-child > #cpu,
.modules-left > widget:first-child > #memory,
.modules-left > widget:first-child > #backlight,
.modules-left > widget:first-child > #pulseaudio.audio,
.modules-left > widget:first-child > #pulseaudio.microphone,
.modules-left > widget:first-child > #network.wlo1,
.modules-left > widget:first-child > #network.eno1,
.modules-left > widget:first-child > #bluetooth,
.modules-left > widget:first-child > #battery,
.modules-left > widget:first-child > #clock,
.modules-left > widget:first-child > #custom-notification {
margin-top: 4px;
}
.modules-right > widget:last-child > #workspaces button,
.modules-right > widget:last-child > #tray,
.modules-right > widget:last-child > #cpu,
.modules-right > widget:last-child > #memory,
.modules-right > widget:last-child > #backlight,
.modules-right > widget:last-child > #pulseaudio.audio,
.modules-right > widget:last-child > #pulseaudio.microphone,
.modules-right > widget:last-child > #network.wlo1,
.modules-right > widget:last-child > #network.eno1,
.modules-right > widget:last-child > #bluetooth,
.modules-right > widget:last-child > #battery,
.modules-right > widget:last-child > #clock,
.modules-right > widget:last-child > #custom-notification {
margin-bottom: 4px; margin-bottom: 4px;
} }
/* If workspaces is the leftmost module, omit left margin */ /* -------------------------------------------------------------------------------- */
.modules-left > widget:first-child > #workspaces {
margin-left: 0; #tray {
background-color: transparent;
padding: 1px 5px;
}
#tray menu {
padding: 2px;
border-radius: 0;
} }
/* If workspaces is the rightmost module, omit right margin */ /* -------------------------------------------------------------------------------- */
.modules-right > widget:last-child > #workspaces {
margin-right: 0; #backlight-slider {
margin-top: 10px;
} }
#clock { #backlight-slider slider {
color: @blue; min-height: 0px;
padding-bottom: 4px; min-width: 0px;
opacity: 0;
background-image: none;
border: none;
box-shadow: none;
}
#backlight-slider trough {
min-height: 80px;
min-width: 10px;
border-radius: 5px;
background-color: black;
}
#backlight-slider highlight {
min-width: 6px;
border: 1px solid @text;
border-radius: 5px;
background-color: @text;
} }
#wireplumber { /* -------------------------------------------------------------------------------- */
color: @yellow;
font-size: 26px; #pulseaudio-slider {
margin-top: 6px;
} }
#network { #pulseaudio-slider slider {
color: @cyan; min-height: 0px;
font-size: 23px; min-width: 0px;
opacity: 0;
background-image: none;
border: none;
box-shadow: none;
} }
#pulseaudio-slider trough {
#battery { min-height: 80px;
color: @text; min-width: 5px;
font-size: 23px; border-radius: 5px;
background-color: black;
} }
#battery.charging, #battery.plugged { #pulseaudio-slider highlight {
color: #26A65B; min-width: 5px;
} border: 1px solid @text;
border-radius: 5px;
@keyframes blink { background-color: @text;
to {
background-color: #ffffff;
color: #000000;
}
}
/* Using steps() instead of linear as a timing function to limit cpu usage */
#battery.critical:not(.charging) {
color: @red;
background-color: @backgroundalt;
font-size: 23px;
animation-name: blink;
animation-duration: 0.5s;
animation-timing-function: steps(12);
animation-iteration-count: infinite;
animation-direction: alternate;
}
#custom-power {
color: @red;
} }