Add my own fully custom waybar
This commit is contained in:
156
waybar/config
156
waybar/config
@@ -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": {
|
||||||
|
"disable-scroll": true,
|
||||||
"hyprland/workspaces": {
|
"all-outputs": true,
|
||||||
"format": "{icon}",
|
"format": "{name}"
|
||||||
"format-icons": {
|
},
|
||||||
"active": "",
|
"hyprland/window": {
|
||||||
"default": "",
|
"format": "{}"
|
||||||
"empty": ""
|
},
|
||||||
},
|
"network": {
|
||||||
"persistent-workspaces": {
|
"format-wifi": "{essid} ({signalStrength}%) ",
|
||||||
"*": [ 1,2,3,4,5 ]
|
"format-ethernet": "{ifname}: {ipaddr}/{cidr} ",
|
||||||
}
|
"format-disconnected": "Disconnected ⚠",
|
||||||
|
"tooltip-format": "{ifname} via {gwaddr} ",
|
||||||
|
"on-click": "nm-connection-editor"
|
||||||
|
},
|
||||||
|
"bluetooth": {
|
||||||
|
"format": " {status}",
|
||||||
|
"format-disabled": "",
|
||||||
|
"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": {
|
||||||
|
"headphone": "",
|
||||||
|
"hands-free": "",
|
||||||
|
"headset": "",
|
||||||
|
"phone": "",
|
||||||
|
"portable": "",
|
||||||
|
"car": "",
|
||||||
|
"default": ["", "", ""]
|
||||||
},
|
},
|
||||||
"custom/notification": {
|
"on-click": "pavucontrol"
|
||||||
"tooltip": false,
|
},
|
||||||
"format": "Menu",
|
"battery": {
|
||||||
"on-click": "swaync-client -t -sw",
|
"states": {
|
||||||
"escape": true
|
"good": 95,
|
||||||
|
"warning": 30,
|
||||||
|
"critical": 15
|
||||||
},
|
},
|
||||||
"clock": {
|
"format": "{capacity}% {icon}",
|
||||||
"format": "{:%H:%M:%S %A %b %d} ",
|
"format-charging": "{capacity}% ",
|
||||||
"interval": 1,
|
"format-plugged": "{capacity}% ",
|
||||||
"tooltip-format": "<tt>{calendar}</tt>",
|
"format-alt": "{time} {icon}",
|
||||||
"calendar": {
|
"format-icons": ["", "", "", "", ""]
|
||||||
"format": {
|
},
|
||||||
"today": "<span color='#fAfBfC'><b>{}</b></span>"
|
"power-profiles-daemon": {
|
||||||
}
|
"format": "{icon}",
|
||||||
},
|
"tooltip-format": "Power profile: {profile}",
|
||||||
"actions": {
|
"format-icons": {
|
||||||
"on-click-right": "shift_down",
|
"power-saver": "🙑",
|
||||||
"on-click": "shift_up"
|
"balanced": "",
|
||||||
}
|
"performance": ""
|
||||||
},
|
},
|
||||||
"network": {
|
"on-click": "case \"$(powerprofilesctl get)\" in \"performance\") powerprofilesctl set balanced ;; \"balanced\") powerprofilesctl set power-saver ;; *) powerprofilesctl set performance ;; esac"
|
||||||
"format-wifi": "",
|
},
|
||||||
"format-ethernet":"",
|
"clock": {
|
||||||
"format-disconnected": "",
|
"interval": 1,
|
||||||
"tooltip-format-disconnected": "Error",
|
"format": "{:%H:%M:%S}",
|
||||||
"tooltip-format-wifi": "{essid} ({signalStrength}%) ",
|
"tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>"
|
||||||
"tooltip-format-ethernet": "{ifname} 🖧 ",
|
}
|
||||||
"on-click": "kitty nmtui"
|
}
|
||||||
},
|
|
||||||
"power-profiles-daemon": {
|
|
||||||
"format": "{icon}",
|
|
||||||
"tooltip-format": "Power profile: {profile}\nDriver: {driver}",
|
|
||||||
"tooltip": true,
|
|
||||||
"format-icons": {
|
|
||||||
"default": "",
|
|
||||||
"performance": "",
|
|
||||||
"balanced": "",
|
|
||||||
"power-saver": ""
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"battery": {
|
|
||||||
"interval":1,
|
|
||||||
"states": {
|
|
||||||
"good": 95,
|
|
||||||
"warning": 30,
|
|
||||||
"critical": 20
|
|
||||||
},
|
|
||||||
"format": "{capacity}%",
|
|
||||||
"format-charging": "{capacity}%",
|
|
||||||
"format-plugged": "{capacity}%",
|
|
||||||
"format-alt": "{time}",
|
|
||||||
},
|
|
||||||
"custom/expand": {
|
|
||||||
"format": "",
|
|
||||||
"tooltip": false
|
|
||||||
},
|
|
||||||
"custom/endpoint":{
|
|
||||||
"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
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -1,2 +0,0 @@
|
|||||||
pkill waybar
|
|
||||||
waybar
|
|
||||||
@@ -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
|
|
||||||
317
waybar/style.css
317
waybar/style.css
@@ -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{
|
|
||||||
all:unset;
|
|
||||||
}
|
|
||||||
.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;
|
|
||||||
|
|
||||||
|
window#waybar {
|
||||||
|
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;
|
||||||
}
|
}
|
||||||
#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;
|
||||||
}
|
}
|
||||||
#battery{
|
|
||||||
padding: 0px 5px;
|
|
||||||
transition: all .3s ease;
|
|
||||||
color:@color7;
|
|
||||||
|
|
||||||
|
|
||||||
|
#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 {
|
||||||
|
background-color: transparent;
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
#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 {
|
||||||
#custom-endpoint{
|
background-color: #000000;
|
||||||
color:transparent;
|
|
||||||
text-shadow: 0px 0px 1.5px rgba(0, 0, 0, 1);
|
|
||||||
|
|
||||||
}
|
|
||||||
#tray{
|
|
||||||
padding: 0px 5px;
|
|
||||||
transition: all .3s ease;
|
|
||||||
|
|
||||||
}
|
|
||||||
#tray menu * {
|
|
||||||
padding: 0px 5px;
|
|
||||||
transition: all .3s ease;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
#tray menu separator {
|
#network {
|
||||||
padding: 0px 5px;
|
background-color: transparent;
|
||||||
transition: all .3s ease;
|
|
||||||
}
|
}
|
||||||
#power-profiles-daemon {
|
|
||||||
color: white;
|
#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 {
|
||||||
|
background-color: #2980b9;
|
||||||
|
}
|
||||||
|
|
||||||
|
#idle_inhibitor {
|
||||||
|
background-color: #2d3436;
|
||||||
|
}
|
||||||
|
|
||||||
|
#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;
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user