refactor(waybar): initial style updates and refactoring

This commit is contained in:
Price Hiller 2023-05-28 09:48:17 -05:00
parent 155f3eb72a
commit ca22b8d52a
Signed by: Price
SSH Key Fingerprint: SHA256:Y4S9ZzYphRn1W1kbJerJFO6GGsfu9O70VaBSxJO7dF8
2 changed files with 293 additions and 346 deletions

View File

@ -1,188 +1,179 @@
[
{
"layer": "top",
"position": "top",
"modules-left": [
"cpu",
"temperature",
"custom/asusmode",
"memory",
"battery",
"disk",
"custom/audio-device",
"custom/pipewire"
],
"modules-center": [
"custom/media"
],
"modules-right": [
"custom/weather",
"network",
"clock",
"custom/lock"
],
"custom/weather": {
"tooltip": false,
"min-length": 5,
"exec": "curl 'https://wttr.in/?format='%t''",
"interval": 3600
},
"battery": {
"min-length": 5,
"design-capacity": true,
"states": {
"full": 90,
"warning": 20,
"critical": 10
},
"tooltip": false,
"full-at": 95,
"format-plugged": "{icon} {capacity}%",
"format-charging": "{icon} {capacity}%",
"format": "{icon} {capacity}%",
"format-icons": [
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
]
},
"clock": {
"format": " {:%a %b %d %I:%M %p}",
"tooltip": true,
"tooltip-format": "<big>{:%Y %B \t week: %V }</big>\n<tt>{calendar}</tt>",
"min-length": 18
},
"custom/lock": {
"tooltip": false,
"format": "",
"interval": "once",
"on-click": "swaylock"
},
"network": {
"interval": 10,
"format-wifi": " {essid}",
"format-ethernet": " {ipaddr}",
"format-linked": " {ifname}",
"format-disconnected": " Disconnected",
"tooltip": true,
"tooltip-format": "IP: {ipaddr}/{cidr}\nGW: {gwaddr}/{cidr}\nNM: {netmask}",
"max-length": 20,
"min-length": 14
},
"custom/audio-device": {
"tooltip": false,
"min-length": 20,
"interval": 1,
"format": " {}",
"exec": "wpctl status | grep -m 1 '*' | cut -d '.' -f2 | cut -d '[' -f1 | xargs"
},
"custom/pipewire": {
"format": "{icon} {percentage}%",
"return-type": "json",
"signal": 8,
"interval": "once",
"format-icons": {
"mute": "婢",
"default": [
"奄",
"奔",
"墳"
]
},
"on-click": "pw-volume mute toggle; pkill -RTMIN+8 waybar",
"exec": "pw-volume status"
},
"idle_inhibitor": {
"tooltip": false,
"format": "{icon}",
"format-icons": {
"activated": "",
"deactivated": ""
}
},
"cpu": {
"interval": 4,
"min-length": 6,
"format": " {usage}%",
"tooltip": false,
"states": {
"critical": 90
}
},
"temperature": {
"tooltip": false,
"min-length": 6,
"thermal-zone": 0,
"critical-threshold": 90,
"format": "{icon} {temperatureC}°C",
"format-critical": "{icon} {temperatureC}°C",
"format-icons": {
"default": [
"",
"",
"",
"",
""
]
}
},
"custom/asusmode": {
"interval": 1,
"format": " {}",
"exec": "asusctl profile -p | awk '{print $NF}'"
},
"memory": {
"format": " {percentage}%",
"tooltip-format": "{used:0.1f}GB/{total:0.1f}GB ",
"states": {
"critical": 90
},
"min-length": 5
},
"disk": {
"path": "/home",
"interval": 60,
"tooltip-format": "{used} used out of {total} ({percentage_used}%)",
"min-length": 5,
"format": " {percentage_used}%",
"states": {
"critical": 90
}
},
"custom/media": {
"interval": 1,
"return-type": "json",
"exec": "~/.config/waybar/scripts/get-media.bash",
"escape": true
},
"wlr/workspaces": {
"on-click": "activate"
{
"layer": "top",
"position": "top",
"modules-left": [
"custom/launcher",
"wlr/workspaces",
"cpu",
"memory",
"temperature",
"disk",
"battery",
"custom/audio-device",
"custom/pipewire"
],
"modules-center": [
"custom/media"
],
"modules-right": [
"custom/asusmode",
"network",
"clock",
"custom/lock"
],
"custom/launcher": {
"format": "{}",
"tooltip": false,
"min-length": 5,
"interval": 1,
"on-click": "wofi",
"exec": "printf '󰫢'"
},
"battery": {
"min-length": 5,
"design-capacity": true,
"states": {
"full": 90,
"warning": 20,
"critical": 10
},
"tooltip": false,
"full-at": 95,
"format-plugged": "{icon} {capacity}%",
"format-charging": "{icon} {capacity}%",
"format": "{icon} {capacity}%",
"format-icons": [
"",
"",
"",
"",
"",
"",
"",
"",
"",
""
]
},
"wlr/workspaces": {
"format": "{icon}",
"format-icons": {
"active": "",
"default": ""
},
"on-scroll-up": "hyprctl dispatch workspace e-1",
"on-scroll-down": "hyprctl dispatch workspace e+1",
"on-click": "activate"
},
"clock": {
"format": " {:%a %b %d %I:%M %p}",
"tooltip": true,
"tooltip-format": "<big>{:%Y %B \t week: %V }</big>\n<tt>{calendar}</tt>",
"min-length": 18
},
"custom/lock": {
"tooltip": false,
"format": "",
"interval": "once",
"on-click": "swaylock"
},
"network": {
"interval": 10,
"format-wifi": " {essid}",
"format-ethernet": " {ipaddr}",
"format-linked": " {ifname}",
"format-disconnected": " Disconnected",
"tooltip": true,
"tooltip-format": "IP: {ipaddr}/{cidr}\nGW: {gwaddr}/{cidr}\nNM: {netmask}",
"max-length": 20,
"min-length": 14
},
"custom/audio-device": {
"tooltip": false,
"min-length": 20,
"interval": 1,
"format": " {}",
"exec": "wpctl status | grep -m 1 '*' | cut -d '.' -f2 | cut -d '[' -f1 | xargs"
},
"custom/pipewire": {
"format": "{icon} {percentage}%",
"return-type": "json",
"signal": 8,
"interval": "once",
"format-icons": {
"mute": "婢",
"default": [
"奄",
"奔",
"墳"
]
},
"on-click": "pw-volume mute toggle; pkill -RTMIN+8 waybar",
"exec": "pw-volume status"
},
"idle_inhibitor": {
"tooltip": false,
"format": "{icon}",
"format-icons": {
"activated": "",
"deactivated": ""
}
},
"cpu": {
"interval": 4,
"min-length": 6,
"format": " {usage}%",
"tooltip": false,
"states": {
"critical": 90
}
},
"temperature": {
"tooltip": false,
"min-length": 6,
"thermal-zone": 0,
"critical-threshold": 90,
"format": "{icon} {temperatureC}°C",
"format-critical": "{icon} {temperatureC}°C",
"format-icons": {
"default": [
"",
"",
"",
"",
""
]
}
},
"custom/asusmode": {
"interval": 1,
"format": " {}",
"exec": "asusctl profile -p | awk '{print $NF}'"
},
"memory": {
"format": " {percentage}%",
"tooltip-format": "{used:0.1f}GB/{total:0.1f}GB ",
"states": {
"critical": 90
},
"min-length": 5
},
"disk": {
"path": "/home",
"interval": 60,
"tooltip-format": "{used} used out of {total} ({percentage_used}%)",
"min-length": 5,
"format": "🖴 {percentage_used}%",
"states": {
"critical": 90
}
},
"custom/media": {
"interval": 1,
"return-type": "json",
"exec": "~/.config/waybar/scripts/get-media.bash",
"escape": true
}
}
},
{
"layer": "bottom",
"position": "bottom",
"modules-center": [
"wlr/workspaces"
],
"wlr/workspaces": {
"format": "{name}",
"on-click": "activate"
},
"custom/sway-mode": {
"exec": "swaymsg -t get_binding_state | jq '.name' -r",
"format": " {}",
"interval": 1
},
"sway/language": {
"format": " {long}"
}
}
]

View File

@ -35,201 +35,157 @@
/* peachRed #FF5D62; */
/* surimiOrange #FFA066; */
/* Global Styling */
* {
min-height: 0;
padding: 3px;
border-radius: 20px;
margin-left: 5px;
margin-right: 5px;
padding-right: 4px;
padding-left: 4px;
padding-top: 1px;
padding-bottom: 1px;
border: none;
font-family: "Fira Code", monospace;
font-size: 13px;
border-radius: 0px;
margin-top: 0.1rem;
margin-left: 0.25rem;
margin-right: 0.25rem;
}
/* Bar Styling */
#waybar {
background: transparent;
font-family: JetBrainsMono;
font-size: medium;
color: #dcd7ba;
}
#custom-media {
background: #16161d;
border-top: 2px solid #957fb8;
border-left: 2px solid #957fb8;
border-right: 2px solid #957fb8;
#cpu,
#temperature,
#custom-asusmode,
#memory,
#battery,
#disk,
#custom-audio-device,
#custom-pipewire,
#workspaces,
#custom-media,
#custom-weather,
#custom-launcher,
#network,
#clock,
#custom-lock {
background-color: #16161d;
color: #dcd7ba;
padding: 0.4rem 0.8rem;
border-radius: 20px;
}
#custom-asusmode {
background: #16161d;
border-top: 2px solid #957fb8;
border-left: 2px solid #957fb8;
color: #dcd7ba;
/* Launcher */
#custom-launcher {
padding-right: 0.3rem;
padding-left: 0.1rem;
color: #957fb8;
margin-right: 0.25rem;
}
#custom-audio-device {
background: #16161d;
border-top: 2px solid #957fb8;
border-left: 2px solid #957fb8;
color: #dcd7ba;
/* System Status */
#cpu,
#temperature,
#memory,
#disk {
color: #7e9cd8;
}
#custom-sway-mode {
background: #16161d;
border-bottom: 2px solid #957fb8;
border-left: 2px solid #957fb8;
color: #dcd7ba;
#cpu {
border-top-right-radius: 0;
border-bottom-right-radius: 0;
padding-left: 1rem;
padding-right: 0.2rem;
margin-right: 0rem;
}
#memory {
border-radius: 0px;
padding-left: 0.1rem;
padding-right: 0.35rem;
margin-left: 0rem;
margin-right: 0rem;
}
#temperature {
border-radius: 0px;
padding-left: 0.35rem;
padding-right: 0.35rem;
margin-left: 0rem;
margin-right: 0rem;
}
#disk {
color: #ff5d62;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
padding-left: 0.35rem;
padding-right: 1rem;
margin-left: 0rem;
}
/* Worksapces */
#workspaces {
background: #16161d;
transition: none;
border-top: 2px solid #957fb8;
border-left: 2px solid #957fb8;
border-right: 2px solid #957fb8;
padding-right: 20px;
padding-left: 20px;
border-radius: 14px;
margin-left: 0.25rem;
margin-right: 0.25rem;
}
#workspaces * {
font-size: 0px;
}
#workspaces button {
transition: none;
margin: 0px;
color: #957fb8;
background: transparent;
border-bottom: 2px solid #957fb8;
border-radius: 0px;
padding-right: 25px;
padding-left: 25px;
padding-top: 5px;
padding-bottom: 5px;
padding: 0px;
margin: 5px 5px;
min-height: 0.75rem;
min-width: 0.75rem;
border-radius: 100%;
background-color: #54546d;
}
#workspaces button.active {
color: #98bb6c;
border-bottom: 2px solid #98bb6c;
border-radius: 0px;
background: radial-gradient(
circle,
#d27e99 0%,
#e46876 10%,
#7fb4ca 20%,
#a3d4d5 30%,
#ff9e3b 40%,
#e6c384 50%,
#98bb6c 60%,
#938aa9 70%,
#9cabca 80%,
#ffa066 90%,
#957fb8 100%
);
background-size: 400% 400%;
animation: gradient_roll 30s ease-in-out infinite;
}
#workspaces button:hover {
transition: none;
box-shadow: inherit;
text-shadow: inherit;
border-top: 0px;
border-bottom: 2px solid #a3d4d5;
color: #a3d4d5;
border-right: 0px;
border-left: 0px;
border-radius: 0px;
background-color: #ff5d62;
}
#idle_inhibitor {
margin-left: 0px;
background: #16161d;
border-top: 2px solid #957fb8;
border-left: 2px solid #957fb8;
color: #dcd7ba;
/* Asus Fan Mode */
#custom-asusmode {
margin-right: 0.25rem;
margin-left: 0.25rem;
}
#network,
#custom-weather,
#clock,
#custom-lock {
background: #16161d;
border-top: 2px solid #957fb8;
border-right: 2px solid #957fb8;
color: #dcd7ba;
}
/*=============*/
/* Animations */
/*===========*/
@keyframes gradient_roll {
0% {
background-position: 0% 200%;
}
#cpu,
#memory,
#custom-pipewire,
#disk,
#temperature,
#battery {
background: #16161d;
border-top: 2px solid #957fb8;
border-left: 2px solid #957fb8;
color: #dcd7ba;
}
50% {
background-position: 200% 0%;
}
#disk.critical {
color: #e82424;
}
#temperature.critical {
color: #e82424;
}
#cpu.critical {
color: #e82424;
}
#memory.critical {
color: #e82424;
}
@keyframes blink1 {
to {
color: #98bb6c;
100% {
background-position: 400% 200%;
}
}
#battery.plugged {
background-color: #16161d;
animation-name: blink1;
animation-duration: 2s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes blink2 {
to {
background-color: #e6c384;
}
}
#battery.charging {
animation-name: blink2;
animation-duration: 8s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes blink3 {
to {
background-color: #ff9e3b;
}
}
#battery.warning:not(.charging) {
animation-name: blink3;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
@keyframes blink4 {
to {
background-color: #e82424;
}
}
#battery.critical:not(.charging) {
animation-name: blink4;
animation-duration: 4s;
animation-timing-function: ease-in-out;
animation-iteration-count: infinite;
animation-direction: alternate;
}
#language {
border-bottom: 2px solid #957fb8;
border-right: 2px solid #957fb8;
background: #16161d;
color: #dcd7ba;
}