From a88e431a7d7238940ca8470c8535277905821861 Mon Sep 17 00:00:00 2001 From: Ivan Malison Date: Wed, 4 Feb 2026 16:23:55 -0800 Subject: [PATCH] waybar: center widgets above bottom line --- dotfiles/config/waybar/scripts/render-config | 76 ++++++++++++++++++++ dotfiles/config/waybar/style.css | 35 +++++++-- dotfiles/config/waybar/vars.env | 5 ++ 3 files changed, 110 insertions(+), 6 deletions(-) create mode 100755 dotfiles/config/waybar/scripts/render-config create mode 100644 dotfiles/config/waybar/vars.env diff --git a/dotfiles/config/waybar/scripts/render-config b/dotfiles/config/waybar/scripts/render-config new file mode 100755 index 00000000..895cf6a1 --- /dev/null +++ b/dotfiles/config/waybar/scripts/render-config @@ -0,0 +1,76 @@ +#!/usr/bin/env bash +set -euo pipefail + +config_dir="${XDG_CONFIG_HOME:-$HOME/.config}/waybar" +template="${config_dir}/config.jsonc" +style_template="${config_dir}/style.css" +vars_file="${config_dir}/vars.env" + +icon_size_default=24 +height_default=42 +line_size_default=5 + +if [[ -f "$vars_file" ]]; then + # shellcheck disable=SC1090 + source "$vars_file" +fi + +icon_size="${WAYBAR_ICON_SIZE:-$icon_size_default}" +bar_height="${WAYBAR_HEIGHT:-$height_default}" +line_size="${WAYBAR_LINE_SIZE:-$line_size_default}" +inner_gap_default=1 +inner_gap="${WAYBAR_INNER_GAP:-$inner_gap_default}" + +if [[ ! "$icon_size" =~ ^[0-9]+$ ]]; then + printf 'Invalid WAYBAR_ICON_SIZE: %s\n' "$icon_size" >&2 + exit 1 +fi +if [[ ! "$bar_height" =~ ^[0-9]+$ ]]; then + printf 'Invalid WAYBAR_HEIGHT: %s\n' "$bar_height" >&2 + exit 1 +fi +if [[ ! "$line_size" =~ ^[0-9]+$ ]]; then + printf 'Invalid WAYBAR_LINE_SIZE: %s\n' "$line_size" >&2 + exit 1 +fi +if [[ ! "$inner_gap" =~ ^[0-9]+$ ]]; then + printf 'Invalid WAYBAR_INNER_GAP: %s\n' "$inner_gap" >&2 + exit 1 +fi +top_margin=$inner_gap +bottom_margin=$((inner_gap + line_size)) +content_height=$((bar_height - top_margin - bottom_margin)) +if (( content_height <= 0 )); then + printf 'WAYBAR_HEIGHT (%s) must be greater than WAYBAR_LINE_SIZE (%s) + 2 * WAYBAR_INNER_GAP (%s)\n' \ + "$bar_height" "$line_size" "$inner_gap" >&2 + exit 1 +fi + +runtime_dir="${XDG_RUNTIME_DIR:-/run/user/$(id -u)}" +out_dir="${runtime_dir}/waybar" +out_file="${out_dir}/config.jsonc" +style_out_file="${out_dir}/style.css" + +if [[ ! -f "$template" ]]; then + printf 'Waybar config template not found: %s\n' "$template" >&2 + exit 1 +fi +if [[ ! -f "$style_template" ]]; then + printf 'Waybar style template not found: %s\n' "$style_template" >&2 + exit 1 +fi + +mkdir -p "$out_dir" + +sed -E \ + -e "s/(\"icon-size\"[[:space:]]*:[[:space:]]*)[0-9]+/\\1${icon_size}/g" \ + -e "s/(\"height\"[[:space:]]*:[[:space:]]*)[0-9]+/\\1${bar_height}/g" \ + "$template" > "$out_file" + +sed -E \ + -e "s/(border-bottom:[[:space:]]*)[0-9]+px/\\1${line_size}px/g" \ + -e "s/(box-shadow:[[:space:]]*inset[[:space:]]+0[[:space:]]+)-[0-9]+px/\\1-${line_size}px/g" \ + -e "s/(margin-top:[[:space:]]*)[0-9]+px/\\1${top_margin}px/g" \ + -e "s/(margin-bottom:[[:space:]]*)[0-9]+px/\\1${bottom_margin}px/g" \ + -e "s/(min-height:[[:space:]]*)[0-9]+px/\\1${content_height}px/g" \ + "$style_template" > "$style_out_file" diff --git a/dotfiles/config/waybar/style.css b/dotfiles/config/waybar/style.css index 2c57873c..7f7edb9d 100644 --- a/dotfiles/config/waybar/style.css +++ b/dotfiles/config/waybar/style.css @@ -6,7 +6,7 @@ window#waybar { background-color: rgba(43, 48, 59, 0.5); - border-bottom: 3px solid rgba(100, 114, 125, 0.5); + border-bottom: 5px solid rgba(100, 114, 125, 0.7); color: #ffffff; transition-property: background-color; transition-duration: .5s; @@ -36,7 +36,7 @@ window#waybar.chromium { button { /* Use box-shadow instead of border so the text isn't offset */ - box-shadow: inset 0 -3px transparent; + box-shadow: inset 0 -5px transparent; /* Avoid rounded borders under each button name */ border: none; border-radius: 0; @@ -45,7 +45,7 @@ button { /* 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; + box-shadow: inset 0 -5px #ffffff; } /* you can set a style on hover for any module like this */ @@ -56,6 +56,7 @@ button:hover { #workspaces button, #taskbar button { padding: 0 3px; + min-height: 42px; background-color: transparent; color: #ffffff; } @@ -69,7 +70,7 @@ button:hover { #taskbar button.active, #taskbar button.focused { background-color: #64727D; - box-shadow: inset 0 -3px #ffffff; + box-shadow: inset 0 -5px #ffffff; } #workspaces button.urgent, @@ -87,7 +88,7 @@ button:hover { #workspaces .taskbar-window.active { background-color: #64727D; - box-shadow: inset 0 -3px #ffffff; + box-shadow: inset 0 -5px #ffffff; } #workspaces .taskbar-window label { @@ -100,7 +101,7 @@ button:hover { #mode { background-color: #64727D; - box-shadow: inset 0 -3px #ffffff; + box-shadow: inset 0 -5px #ffffff; } #clock, @@ -109,6 +110,7 @@ button:hover { #memory, #disk, #custom-diskfree, +#custom-nowplaying, #temperature, #backlight, #network, @@ -122,6 +124,9 @@ button:hover { #power-profiles-daemon, #mpd { padding: 0 8px; + min-height: 42px; + margin-top: 5px; + margin-bottom: 5px; color: #ffffff; } @@ -129,6 +134,8 @@ button:hover { #workspaces, #taskbar { margin: 0 4px; + margin-top: 5px; + margin-bottom: 5px; } /* If workspaces is the leftmost module, omit left margin */ @@ -252,6 +259,22 @@ label:focus { min-width: 100px; } +#custom-nowplaying { + background-color: #3d4a5c; + color: #ffffff; + min-width: 100px; +} + +#custom-nowplaying.playing { + background-color: #1db954; + color: #000000; +} + +#custom-nowplaying.paused { + background-color: #90b1b1; + color: #000000; +} + #custom-media.custom-spotify { background-color: #66cc99; } diff --git a/dotfiles/config/waybar/vars.env b/dotfiles/config/waybar/vars.env new file mode 100644 index 00000000..ec8130be --- /dev/null +++ b/dotfiles/config/waybar/vars.env @@ -0,0 +1,5 @@ +# Single source of truth for Waybar sizing. +WAYBAR_ICON_SIZE=24 +WAYBAR_HEIGHT=42 +WAYBAR_LINE_SIZE=5 +WAYBAR_INNER_GAP=1