style(waybar): restructure waybar configs

Restructure Waybar config and style.css so the modules are ordered in the configs the same way they are ordered on the actual bar. The purpose of this is to make it easier for users to find things for making changes, and to help keep the configs organized.
This commit is contained in:
BluishHumility
2024-07-30 10:45:33 -04:00
parent 08d2ceb35f
commit 0ca1b78e5c
2 changed files with 172 additions and 172 deletions

View File

@@ -34,58 +34,34 @@
// Modules
"idle_inhibitor": {
"format": "{icon} ",
"format-icons":{
"activated": "",
"deactivated": ""
"custom/launcher": {
"format":"<span size='x-large'></span>",
"on-click": "exec wofi -c ~/.config/wofi/config -I",
"tooltip": false,
},
"sway/workspaces": {
"disable-scroll": true,
"disable-markup" : false,
"all-outputs": true,
"format": " {icon} ",
//"format":"{icon}",
"format-icons": {
"1": "",
"2": "",
"3": "",
"4": "",
}
},
"battery": {
"states": {
"warning": 30,
"critical": 15
},
"format": "{icon} {capacity}%",
"format-icons": ["", "", "", "", ""]
"sway/mode": {
"format": "{}",
"tooltip": false
},
"clock": {
"interval": 10,
"format-alt": " {:%e %b %Y}", // Icon: calendar-alt
"format": "{:%H:%M}",
"tooltip-format": "{:%e %B %Y}"
},
"cpu": {
"interval": 5,
"format": " {usage}% ({load})", // Icon: microchip
"states": {
"warning": 70,
"critical": 90,
},
"on-click": "footclient -T waybar_htop -e htop",
},
"custom/keyboard-layout": {
"exec": "i=$(swaymsg -t get_inputs); echo \"\"; echo \"$i\" | grep -m1 'xkb_active_layout_name' | cut -d '\"' -f4",
"format": "",
// Interval set only as a fallback; use signal to update the module more immediately
"interval": 30,
// See example config for sending signal to Waybar in ~/.config/sway/config.d/input
"signal": 1,
"on-click": "~/.config/waybar/scripts/keyhint.sh",
},
"memory": {
"interval": 5,
"format": " {}%", // Icon: memory
"on-click": "footclient -T waybar_htop -e htop",
"states": {
"warning": 70,
"critical": 90
}
"sway/window": {
"format": "{}",
"max-length": 120
},
"network": {
@@ -103,30 +79,34 @@
"tooltip-format": "{ifname}: {ipaddr}/{cidr}",
},
"sway/mode": {
"format": "{}",
"tooltip": false
},
"sway/window": {
"format": "{}",
"max-length": 120
},
"sway/workspaces": {
"disable-scroll": true,
"disable-markup" : false,
"all-outputs": true,
"format": " {icon} ",
//"format":"{icon}",
"format-icons": {
"1": "",
"2": "",
"3": "",
"4": "",
"idle_inhibitor": {
"format": "{icon} ",
"format-icons":{
"activated": "",
"deactivated": ""
}
},
"memory": {
"interval": 5,
"format": " {}%", // Icon: memory
"on-click": "footclient -T waybar_htop -e htop",
"states": {
"warning": 70,
"critical": 90
}
},
"cpu": {
"interval": 5,
"format": " {usage}% ({load})", // Icon: microchip
"states": {
"warning": 70,
"critical": 90,
},
"on-click": "footclient -T waybar_htop -e htop",
},
"pulseaudio": {
"scroll-step": 2,
"format": "{icon} {volume}%",
@@ -143,18 +123,24 @@
"on-click": "pavucontrol"
},
// to use the weather module replace <your_location> with your city or town
// note: do not use spaces: new york would be newyork
"custom/weather": {
"exec": "~/.config/waybar/scripts/weather.sh <your_location>",
"return-type": "json",
"interval": 600,
"custom/keyboard-layout": {
"exec": "i=$(swaymsg -t get_inputs); echo \"\"; echo \"$i\" | grep -m1 'xkb_active_layout_name' | cut -d '\"' -f4",
"format": "",
// Interval set only as a fallback; use signal to update the module more immediately
"interval": 30,
// See example config for sending signal to Waybar in ~/.config/sway/config.d/input
"signal": 1,
"on-click": "~/.config/waybar/scripts/keyhint.sh",
},
"tray": {
"icon-size": 18,
"spacing":10,
},
"battery": {
"states": {
"warning": 30,
"critical": 15
},
"format": "{icon} {capacity}%",
"format-icons": ["", "", "", "", ""]
},
"backlight#icon": {
"format": "{icon}",
@@ -169,10 +155,24 @@
"on-scroll-up": "brightnessctl -c backlight set +1%"
},
"custom/launcher": {
"format":"<span size='x-large'></span>",
"on-click": "exec wofi -c ~/.config/wofi/config -I",
"tooltip": false,
"clock": {
"interval": 10,
"format-alt": " {:%e %b %Y}", // Icon: calendar-alt
"format": "{:%H:%M}",
"tooltip-format": "{:%e %B %Y}"
},
"tray": {
"icon-size": 18,
"spacing":10,
},
// to use the weather module replace <your_location> with your city or town
// note: do not use spaces: new york would be newyork
"custom/weather": {
"exec": "~/.config/waybar/scripts/weather.sh <your_location>",
"return-type": "json",
"interval": 600,
},
"custom/power": {

View File

@@ -58,19 +58,19 @@
}
/* Every modules */
#battery,
#clock,
#backlight,
#cpu,
#custom-keyboard-layout,
#memory,
#mode,
#custom-weather,
#network,
#idle_inhibitor,
#memory,
#cpu,
#pulseaudio,
#custom-keyboard-layout,
#battery,
#backlight,
#clock,
#temperature,
#tray,
#idle_inhibitor {
#custom-weather,
#tray {
padding:0.5rem 0.6rem;
margin: 1px 0px;
}
@@ -79,6 +79,83 @@
* Modules styles
* -------------------------------------------------------------------------- */
#custom-launcher {
font-size:15px;
margin-left:15px;
margin-right:10px;
}
#workspaces {
font-size:13px;
}
#workspaces button {
border-bottom: 3px solid transparent;
margin-bottom: 0px;
padding:0px;
}
#workspaces button.focused {
border-bottom: 3px solid @highlight;
margin-bottom: 1px;
padding-left:0;
}
#workspaces button.urgent {
border-color: #c9545d;
color: #c9545d;
}
#mode {
background: @highlight;
border-bottom: 3px transparent;
color:white;
margin-left: 5px;
padding: 7px;
}
#window {
font-weight: bold;
}
#network.disconnected {
color: orange;
}
#memory {
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#memory.warning {
color: orange;
}
#memory.critical {
color: red;
animation-name: blink-critical;
animation-duration: 2s;
padding-left:5px;
padding-right:5px;
}
#cpu.warning {
color: orange;
}
#cpu.critical {
color: red;
}
#pulseaudio {
padding-top:6px;
}
#pulseaudio.muted {
color: @highlight;
}
#battery {
animation-timing-function: linear;
animation-iteration-count: infinite;
@@ -103,94 +180,17 @@
animation-duration: 2s;
}
#cpu.warning {
color: orange;
}
#cpu.critical {
color: red;
}
#memory {
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#memory.warning {
color: orange;
}
#memory.critical {
color: red;
animation-name: blink-critical;
animation-duration: 2s;
padding-left:5px;
padding-right:5px;
}
#mode {
background: @highlight;
border-bottom: 3px transparent;
color:white;
margin-left: 5px;
padding: 7px;
}
#network.disconnected {
color: orange;
}
#pulseaudio {
padding-top:6px;
}
#pulseaudio.muted {
color: @highlight;
#backlight.icon {
padding-right:1px;
font-size: 13px;
}
#temperature.critical {
color: red;
}
#window {
font-weight: bold;
}
#workspaces {
font-size:13px;
}
#workspaces button {
border-bottom: 3px solid transparent;
margin-bottom: 0px;
padding:0px;
}
#workspaces button.focused {
border-bottom: 3px solid @highlight;
margin-bottom: 1px;
padding-left:0;
}
#workspaces button.urgent {
border-color: #c9545d;
color: #c9545d;
}
#custom-power {
margin-left:15px;
margin-right:15px;
font-size:15px;
}
#custom-launcher {
font-size:15px;
margin-left:15px;
margin-right:10px;
}
#backlight.icon {
padding-right:1px;
font-size: 13px;
}