diff --git a/arch-config/.config/waybar/config.json b/arch-config/.config/waybar/config.json new file mode 100644 index 00000000..d598115a --- /dev/null +++ b/arch-config/.config/waybar/config.json @@ -0,0 +1,70 @@ +{ + "layer": "top", + "position": "bottom", + "height": 25, + "spacing": 10, + + "modules-left": ["wlr/workspaces", "hyprland/window", "hyprland/submap"], + "modules-center": ["clock"], + "modules-right": ["mpris", "idle_inhibitor", "battery", "tray"], + + "wlr/workspaces": { + "format": "{name}: {icon}", + "format-icons": { + "urgent": "", + "active": "", + "default": "" + }, + "sort-by-number": true + }, + "hyprland/window": { + "format": "{}", + "separate-outputs": true + }, + "hyprland/submap": { + "format": "{}", + "tooltip": false + }, + "mpris": { + "format": "{status_icon} {dynamic}", + "format-paused": "{status_icon} {dynamic}", + "status-icons": { + "playing": "▶", + "paused": "⏸" + } + }, + "battery": { + "bat": "BAT0", + "states": { + "warning": 30, + "critical": 15 + }, + "format": "{capacity}% {icon}", + "format-charging": "{capacity}% ", + "format-plugged": "{capacity}% ", + "format-alt": "{time} {icon}", + "format-icons": ["", "", "", "", ""] + }, + "clock": { + "timezone": "Europe/Zurich", + "tooltip-format": "{:%Y %B}\n{calendar}", + "format-alt": "{:%Y-%m-%d}" + }, + "idle_inhibitor": { + "format": "{icon}", + "format-icons": { + "activated": "", + "deactivated": "" + } + }, + "tray": { + "icon-size": 21, + "spacing": 10 + }, + "custom/mpris": { + "exec": "~/.scripts/polybar/player-mpris-tail.py -f '{icon} {:artist:t10:{artist}:}{:artist: - :}{:t25:{title}:}'", + "on-click": "~/.scripts/polybar/player-mpris-tail.py play-pause &", + "on-click-middle": "~/.scripts/polybar/player-mpris-tail.py next &", + "on-click-right": "~/.scripts/polybar/player-mpris-tail.py previous &" + } +} diff --git a/arch-config/.config/waybar/style.css b/arch-config/.config/waybar/style.css new file mode 100644 index 00000000..c4d1784d --- /dev/null +++ b/arch-config/.config/waybar/style.css @@ -0,0 +1,145 @@ +* { + /* `otf-font-awesome` is required to be installed for icons */ + font-family: FontAwesome, Fira Sans, sans-serif; + font-size: 12px; + padding-left: 5px; + padding-right: 5px; +} + +window#waybar { + /*background-color: rgba(43, 48, 59, 0.5);*/ + background-color: rgba(51, 2, 47, 0.6); + border: 0px; + border-top: 2px solid rgba(93, 4, 86, 0.8); + /*border-bottom: 3px solid rgba(100, 114, 125, 0.5);*/ + color: #f2daf0; + /*color: #ffffff;*/ + transition-property: background-color; + transition-duration: 0.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; +} + +/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ +button:hover { + background: inherit; + box-shadow: inset 0 -3px #ffffff; +} + +#workspaces button { + padding: 0 5px; + background-color: transparent; + color: #ffffff; +} + +#workspaces button:hover { + background: rgba(0, 0, 0, 0.2); +} + +#workspaces button.focused { + background-color: #64727d; + box-shadow: inset 0 -3px #ffffff; +} + +#workspaces button.urgent { + background-color: #eb4d4b; +} + +#mode { + background-color: #64727d; + border-bottom: 3px solid #ffffff; +} + +#clock, +#battery, +#tray, +#mode, +#idle_inhibitor, +#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; +} + +#clock { + background-color: #5d0456; +} + +#battery { + background-color: #5d0456; + color: #f2daf0; + /*color: #000000;*/ +} + +@keyframes blink { + to { + background-color: #f2daf0; + color: #000000; + } +} + +#battery.critical:not(.charging) { + background-color: #ca3232; + color: #f2daf0; + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +label:focus { + background-color: #000000; +} + +/* +#tray { + background-color: #2980b9; +} + +#tray > .passive { + -gtk-icon-effect: dim; +} + +#tray > .needs-attention { + -gtk-icon-effect: highlight; + background-color: #eb4d4b; +} +*/ + +#idle_inhibitor { + background-color: #5d0456; +} + +#idle_inhibitor.activated { + background-color: #f2daf0; + color: #5d0456; +}