From 5f10ed90d28be4e7ca6de123051bea9995f5b854 Mon Sep 17 00:00:00 2001 From: ziro Date: Thu, 6 Apr 2023 14:11:57 +0700 Subject: [PATCH] style: Waybar config and styling --- .config/waybar/config | 93 ++++++++++++++++++++++++++++++++++++++++ .config/waybar/style.css | 62 +++++++++++++++++++++++++++ 2 files changed, 155 insertions(+) create mode 100644 .config/waybar/config create mode 100644 .config/waybar/style.css diff --git a/.config/waybar/config b/.config/waybar/config new file mode 100644 index 0000000..f3c56eb --- /dev/null +++ b/.config/waybar/config @@ -0,0 +1,93 @@ +// For Arch users: Compile waybar with `-Dexperimental=true` flag! +{ + "layer": "top", + "height": 28, // Waybar height (to be removed for auto height) + "spacing": 0, // Gaps between modules (4px) + "modules-left": ["wlr/workspaces", "custom/media"], + "modules-center": ["hyprland/window"], + "modules-right": ["idle_inhibitor", "pulseaudio", "network", "disk", "memory", "temperature", "clock", "tray"], + "wlr/workspaces": { + "format": "{icon}", + "on-click": "activate", + "sort-by-number": true + }, + "keyboard-state": { + "numlock": true, + "capslock": true, + "format": "{name} {icon}", + "format-icons": { + "locked": "", + "unlocked": "" + } + }, + "idle_inhibitor": { + "format": "{icon}", + "format-icons": { + "activated": "", + "deactivated": "" + } + }, + "disk": { + "interval": 30, + "format": "{free} free 󰋊" + }, + "tray": { + // "icon-size": 21, + "spacing": 10 + }, + "clock": { + // "timezone": "America/New_York", + "tooltip-format": "{:%Y %B}\n{calendar}", + "format": "{:%a, %d %b %Y • %H:%M %Z} 󰥔", + "format-alt": "{:%Y-%m-%d} 󰥔" + }, + "memory": { + "format": "{}% 󰍛" + }, + "temperature": { + // "thermal-zone": 2, + // "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input", + "critical-threshold": 80, + // "format-critical": "{temperatureC}°C {icon}", + "format": "{temperatureC}°C {icon}", + "format-icons": ["󱃃", "󰔏", "󱃂"] + }, + "network": { + // "interface": "wlp2*", // (Optional) To force the use of this interface + "format-wifi": "{essid} ({signalStrength}%) 󰤨", + "format-ethernet": "󰌘", + "tooltip-format": "{ifname} via {gwaddr}", + "format-linked": "󰌚", + "format-disconnected": "󰌙", + "format-alt": "{ipaddr}/{cidr} 󰌘" + }, + "pulseaudio": { + // "scroll-step": 1, // %, can be a float + "format": "{volume}% {icon} {format_source}", + "format-muted": "󰝟 {format_source}", + "format-source": "{volume}% 󰍬", + "format-source-muted": "󰍭", + "format-icons": { + "headphone": "", + "hands-free": "", + "headset": "", + "phone": "", + "portable": "", + "car": "", + "default": ["󰕿", "󰖀", "󰕾"] + }, + "on-click": "pavucontrol" + }, + "custom/media": { + "format": "{icon} {}", + "return-type": "json", + "max-length": 40, + "format-icons": { + "spotify": "", + "default": "🎜" + }, + "escape": true, + "exec": "$HOME/.config/waybar/mediaplayer.py 2> /dev/null" // Script in resources folder + // "exec": "$HOME/.config/waybar/mediaplayer.py --player spotify 2> /dev/null" // Filter player based on name + } +} diff --git a/.config/waybar/style.css b/.config/waybar/style.css new file mode 100644 index 0000000..eba8cc2 --- /dev/null +++ b/.config/waybar/style.css @@ -0,0 +1,62 @@ +* { + font-family: Sarasa Term J, Iosevka Nerd Font, monoscope; + font-weight: bold; +} + +window#waybar { + background-color: rgba(43, 48, 59, 0.5); + color: #ffffff; + transition-property: background-color; + transition-duration: .5s; +} + +#workspaces { + background-color: #0E1418; + border-radius: 6px; +} + +#workspaces button { + padding: 0 5px; + background-color: transparent; + color: #ffffff; + border-radius: 6px; + border-bottom: 3px solid transparent; +} + +#workspaces button:hover { + background: #2c363d; + border-bottom: 3px solid #FFF; +} + +#workspaces button.active { + border-bottom: 3px solid #08A5DE; +} + +#workspaces button.urgent { + background-color: #eb4d4b; +} + +#clock, +#battery, +#cpu, +#memory, +#disk, +#temperature, +#backlight, +#network, +#pulseaudio, +#wireplumber, +#custom-media, +#tray, +#mode, +#idle_inhibitor, +#scratchpad, +#mpd { + padding: 0 10px; + color: #ffffff; +} + +box.modules-right { + background-color: #0E1418; + border-radius: 6px; +}