Add my own fully custom waybar

This commit is contained in:
2025-08-23 19:35:59 +10:00
parent cf72da26d1
commit dce3f2176c
4 changed files with 247 additions and 288 deletions

View File

@@ -1,94 +1,72 @@
{ {
"layer": "top", "layer": "top",
"position": "top", "position": "top",
"reload_style_on_change": true, "height": 40,
"modules-left": ["custom/notification","clock","custom/pacman","tray"], "modules-left": ["hyprland/workspaces", "hyprland/window"],
"modules-center": ["hyprland/workspaces"], "modules-center": [],
"modules-right": ["group/expand","bluetooth","network","battery","power-profiles-daemon"], "modules-right": ["network", "bluetooth", "pulseaudio", "battery", "power-profiles-daemon", "clock"],
"hyprland/workspaces": { "hyprland/workspaces": {
"format": "{icon}", "disable-scroll": true,
"format-icons": { "all-outputs": true,
"active": "", "format": "{name}"
"default": "",
"empty": ""
}, },
"persistent-workspaces": { "hyprland/window": {
"*": [ 1,2,3,4,5 ] "format": "{}"
}
},
"custom/notification": {
"tooltip": false,
"format": "Menu",
"on-click": "swaync-client -t -sw",
"escape": true
},
"clock": {
"format": "{:%H:%M:%S %A %b %d} ",
"interval": 1,
"tooltip-format": "<tt>{calendar}</tt>",
"calendar": {
"format": {
"today": "<span color='#fAfBfC'><b>{}</b></span>"
}
},
"actions": {
"on-click-right": "shift_down",
"on-click": "shift_up"
}
}, },
"network": { "network": {
"format-wifi": "", "format-wifi": "{essid} ({signalStrength}%) ",
"format-ethernet":"", "format-ethernet": "{ifname}: {ipaddr}/{cidr} ",
"format-disconnected": "", "format-disconnected": "Disconnected ⚠",
"tooltip-format-disconnected": "Error", "tooltip-format": "{ifname} via {gwaddr} ",
"tooltip-format-wifi": "{essid} ({signalStrength}%) ", "on-click": "nm-connection-editor"
"tooltip-format-ethernet": "{ifname} 🖧 ",
"on-click": "kitty nmtui"
}, },
"power-profiles-daemon": { "bluetooth": {
"format": "{icon}", "format": " {status}",
"tooltip-format": "Power profile: {profile}\nDriver: {driver}", "format-disabled": "",
"tooltip": true, "format-connected": " {device_alias}",
"tooltip-format": "{device_enumerate}",
"tooltip-format-enumerate-connected": "{device_alias} {device_address}"
},
"pulseaudio": {
"format": "{volume}% {icon} {format_source}",
"format-bluetooth": "{volume}% {icon} {format_source}",
"format-bluetooth-muted": " {icon} {format_source}",
"format-icons": { "format-icons": {
"default": "", "headphone": "",
"performance": "", "hands-free": "",
"balanced": "", "headset": "",
"power-saver": "" "phone": "",
} "portable": "",
"car": "",
"default": ["", "", ""]
},
"on-click": "pavucontrol"
}, },
"battery": { "battery": {
"interval":1,
"states": { "states": {
"good": 95, "good": 95,
"warning": 30, "warning": 30,
"critical": 20 "critical": 15
}, },
"format": "{capacity}%", "format": "{capacity}% {icon}",
"format-charging": "{capacity}%", "format-charging": "{capacity}%",
"format-plugged": "{capacity}%", "format-plugged": "{capacity}%",
"format-alt": "{time}", "format-alt": "{time} {icon}",
"format-icons": ["", "", "", "", ""]
}, },
"custom/expand": { "power-profiles-daemon": {
"format": "", "format": "{icon}",
"tooltip": false "tooltip-format": "Power profile: {profile}",
"format-icons": {
"power-saver": "🙑",
"balanced": "",
"performance": ""
}, },
"custom/endpoint":{ "on-click": "case \"$(powerprofilesctl get)\" in \"performance\") powerprofilesctl set balanced ;; \"balanced\") powerprofilesctl set power-saver ;; *) powerprofilesctl set performance ;; esac"
"format": "|",
"tooltip": false
},
"group/expand": {
"orientation": "horizontal",
"drawer": {
"transition-duration": 600,
"transition-to-left": true,
"click-to-reveal": true
},
"modules": ["custom/expand", "custom/colorpicker","cpu","memory","temperature","custom/endpoint"],
},
"tray": {
"icon-size": 14,
"spacing": 10
}, },
"clock": {
"interval": 1,
"format": "{:%H:%M:%S}",
"tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>"
}
} }

View File

@@ -1,2 +0,0 @@
pkill waybar
waybar

View File

@@ -1,60 +0,0 @@
#!/usr/bin/env bash
check() {
command -v "$1" 1>/dev/null
}
notify() {
check notify-send && {
notify-send -a "Color Picker" "$@"
return
}
echo "$@"
}
loc="$HOME/.cache/colorpicker"
[ -d "$loc" ] || mkdir -p "$loc"
[ -f "$loc/colors" ] || touch "$loc/colors"
limit=10
[[ $# -eq 1 && $1 = "-l" ]] && {
cat "$loc/colors"
exit
}
[[ $# -eq 1 && $1 = "-j" ]] && {
text="$(head -n 1 "$loc/colors")"
mapfile -t allcolors < <(tail -n +2 "$loc/colors")
# allcolors=($(tail -n +2 "$loc/colors"))
tooltip="<b> COLORS</b>\n\n"
tooltip+="-> <b>$text</b> <span color='$text'></span> \n"
for i in "${allcolors[@]}"; do
tooltip+=" <b>$i</b> <span color='$i'></span> \n"
done
cat <<EOF
{ "text":"<span color='$text'></span>", "tooltip":"$tooltip"}
EOF
exit
}
check hyprpicker || {
notify "hyprpicker is not installed"
exit
}
killall -q hyprpicker
color=$(hyprpicker)
check wl-copy && {
echo "$color" | sed -z 's/\n//g' | wl-copy
}
prevColors=$(head -n $((limit - 1)) "$loc/colors")
echo "$color" >"$loc/colors"
echo "$prevColors" >>"$loc/colors"
sed -i '/^$/d' "$loc/colors"
pkill -RTMIN+1 waybar

View File

@@ -1,168 +1,211 @@
* { * {
font-size:15px; border: none;
font-family: "Inter"; border-radius: 0;
font-family: JetBrains Mono;
font-size: 13px;
min-height: 0;
} }
window#waybar { window#waybar {
all:unset; background-color: rgba(43, 48, 59, 0.5);
border-bottom: 3px solid rgba(100, 114, 125, 0.5);
color: #ffffff;
transition-property: background-color;
transition-duration: .5s;
margin: 30px;
border-radius: 0 0 7px 7px;
} }
.modules-left {
padding:7px;
margin:5px;
border-radius:10px;
background: alpha(@background,.5);
box-shadow: 0px 0px 2px rgba(0, 0, 0, .5);
}
.modules-center {
padding:7px;
margin:5px;
border-radius:10px;
background: alpha(@background,.5);
box-shadow: 0px 0px 2px rgba(0, 0, 0, .5);
}
.modules-right {
padding:7px;
margin:5px;
border-radius:10px;
background: alpha(@background,.5);
box-shadow: 0px 0px 2px rgba(0, 0, 0, .5);
}
tooltip {
background:@background;
color: @color7;
}
#clock:hover, #custom-pacman:hover, #custom-notification:hover,#bluetooth:hover,#network:hover,#battery:hover, #cpu:hover,#memory:hover,#temperature:hover{
transition: all .3s ease;
color:@color9;
}
#custom-notification {
padding: 0px 5px;
transition: all .3s ease;
color:@color7;
}
#clock{
padding: 0px 5px;
color:@color7;
transition: all .3s ease;
}
#custom-pacman{
padding: 0px 5px;
transition: all .3s ease;
color:@color7;
}
#workspaces {
padding: 0px 5px;
}
#workspaces button { #workspaces button {
all:unset; padding: 0 5px;
padding: 0px 5px; background-color: transparent;
color: rgba(0,0,0,0); color: #ffffff;
text-shadow: 0px 0px 1px rgba(0, 0, 0, .4); border-bottom: 3px solid transparent;
opacity: 0.5;
} }
#workspaces button:hover { #workspaces button:hover {
color:rgba(0,0,0,0); background: rgba(0, 0, 0, 0.2);
text-shadow: 0px 0px 1px rgba(0, 0, 0, .7); box-shadow: inherit;
transition: all 1s ease; border-bottom: 3px solid #ffffff;
opacity: 1.0;
} }
#workspaces button.active {
color: @color9;
border: none;
transition: all 1s ease;
}
#workspaces button.empty {
color: rgba(0,0,0,0);
border: none;
text-shadow: 0px 0px 1.5px rgba(0, 0, 0, .2);
}
#workspaces button.empty:hover {
color: rgba(0,0,0,0);
border: none;
text-shadow: 0px 0px 1.5px rgba(0, 0, 0, .5);
transition: all 1s ease;
}
#workspaces button.empty.active {
color: @color9;
border: none;
transition: all 1s ease;
}
#bluetooth{
padding: 0px 5px;
transition: all .3s ease;
color:@color7;
#workspaces button.focused {
background-color: transparent;
border-bottom: 3px solid #ffffff;
font-family: "JetBrains Mono Bold";
font-weight: normal;
font-size: 14px;
opacity: 1.0;
} }
#network{
padding: 0px 5px;
transition: all .3s ease;
color:@color7;
#workspaces button.urgent {
background-color: #eb4d4b;
} }
#mode {
background-color: #64727D;
border-bottom: 3px solid #ffffff;
}
#clock,
#battery,
#cpu,
#memory,
#temperature,
#backlight,
#network,
#pulseaudio,
#power-profiles-daemon,
#custom-media,
#tray,
#mode,
#idle_inhibitor,
#mpd {
padding: 0 10px;
margin: 0 5px;
color: #ffffff;
}
#window,
#workspaces {
margin: 0 4px;
}
/* If workspaces is the leftmost module, omit left margin */
.modules-left > widget:first-child > #workspaces {
margin-left: 0;
}
/* If workspaces is the rightmost module, omit right margin */
.modules-right > widget:last-child > #workspaces {
margin-right: 0;
}
#battery { #battery {
padding: 0px 5px; background-color: transparent;
transition: all .3s ease; color: #ffffff;
color:@color7;
} }
#battery.charging { #battery.charging {
color: #26A65B; color: #ffffff;
background-color: #26A65B;
} }
#battery.warning:not(.charging) { @keyframes blink {
color: #ffbe61; to {
background-color: #ffffff;
color: #000000;
}
} }
#battery.critical:not(.charging) { #battery.critical:not(.charging) {
color: #f53c3c; background-color: #f53c3c;
color: #ffffff;
animation-name: blink; animation-name: blink;
animation-duration: 0.5s; animation-duration: 0.5s;
animation-timing-function: linear; animation-timing-function: linear;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-direction: alternate; animation-direction: alternate;
} }
#group-expand{
padding: 0px 5px;
transition: all .3s ease;
}
#custom-expand{
padding: 0px 5px;
color:alpha(@foreground,.2);
text-shadow: 0px 0px 2px rgba(0, 0, 0, .7);
transition: all .3s ease;
}
#custom-expand:hover{
color:rgba(255,255,255,.2);
text-shadow: 0px 0px 2px rgba(255, 255, 255, .5);
}
#custom-colorpicker{
padding: 0px 5px;
}
#cpu,#memory,#temperature{
padding: 0px 5px;
transition: all .3s ease;
color:@color7;
label:focus {
background-color: #000000;
} }
#custom-endpoint{
color:transparent;
text-shadow: 0px 0px 1.5px rgba(0, 0, 0, 1);
#network {
background-color: transparent;
} }
#network.disconnected {
background-color: #f53c3c;
}
#pulseaudio {
background-color: transparent;
color: #ffffff;
}
#pulseaudio.muted {
background-color: #90b1b1;
color: #2a5c45;
}
#custom-media {
background-color: #66cc99;
color: #2a5c45;
min-width: 100px;
}
#custom-media.custom-spotify {
background-color: #66cc99;
}
#custom-media.custom-vlc {
background-color: #ffa000;
}
#temperature {
background-color: #f0932b;
}
#temperature.critical {
background-color: #eb4d4b;
}
#tray { #tray {
padding: 0px 5px; background-color: #2980b9;
transition: all .3s ease;
}
#tray menu * {
padding: 0px 5px;
transition: all .3s ease;
} }
#tray menu separator { #idle_inhibitor {
padding: 0px 5px; background-color: #2d3436;
transition: all .3s ease;
} }
#power-profiles-daemon {
color: white; #idle_inhibitor.activated {
background-color: #ecf0f1;
color: #2d3436;
}
#mpd {
background-color: #66cc99;
color: #2a5c45;
}
#mpd.disconnected {
background-color: #f53c3c;
}
#mpd.stopped {
background-color: #90b1b1;
}
#mpd.paused {
background-color: #51a37a;
}
#language {
background: #00b093;
color: #740864;
padding: 0 5px;
margin: 0 5px;
min-width: 16px;
}
#keyboard-state {
background: #97e1ad;
color: #000000;
padding: 0 0px;
margin: 0 5px;
min-width: 16px;
}
#keyboard-state > label {
padding: 0 5px;
}
#keyboard-state > label.locked {
background: red;
} }