From d2e73e411506f076385f869354433c6c4cbda111 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rodolphe=20Br=C3=A9ard?= Date: Sat, 12 Oct 2024 13:24:57 +0200 Subject: [PATCH] Waybar theme --- .config/waybar/config | 268 ++++++++++++++++------------------- .config/waybar/macchiato.css | 32 +++++ .config/waybar/style.css | 261 +++++++++------------------------- 3 files changed, 220 insertions(+), 341 deletions(-) create mode 100644 .config/waybar/macchiato.css diff --git a/.config/waybar/config b/.config/waybar/config index 94ad16d..5f5c07e 100644 --- a/.config/waybar/config +++ b/.config/waybar/config @@ -1,157 +1,133 @@ { - "layer": "top", // Waybar at top layer - "position": "top", // Waybar position (top|bottom|left|right) - "height": 30, // Waybar height (to be removed for auto height) - // "width": 1280, // Waybar width - "spacing": 4, // Gaps between modules (4px) - // Choose the order of the modules - "modules-left": ["hyprland/workspaces"], - "modules-center": ["hyprland/window"], - "modules-right": ["idle_inhibitor", "pulseaudio", "network", "cpu", "memory", "temperature", "backlight", "battery", "battery#bat2", "clock", "tray"], - // Modules configuration - // "hyprland/workspaces": { - // "disable-scroll": true, - // "all-outputs": true, - // "warp-on-scroll": false, - // "format": "{name}: {icon}", - // "format-icons": { - // "1": "", - // "2": "", - // "3": "", - // "4": "", - // "5": "", - // "urgent": "", - // "focused": "", - // "default": "" - // } - // }, - "keyboard-state": { - "numlock": true, - "capslock": true, - "format": "{name} {icon}", - "format-icons": { - "locked": "", - "unlocked": "" - } - }, - "mpd": { - "format": "{stateIcon} {consumeIcon}{randomIcon}{repeatIcon}{singleIcon}{artist} - {album} - {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) ⸨{songPosition}|{queueLength}⸩ {volume}% ", - "format-disconnected": "Disconnected ", - "format-stopped": "{consumeIcon}{randomIcon}{repeatIcon}{singleIcon}Stopped ", - "unknown-tag": "N/A", - "interval": 2, - "consume-icons": { - "on": " " + "margin-top" : 0, + "margin-left": 0, + "margin-right": 0, + "height" : 35, + "modules-left": [ + "custom/launcher", + "hyprland/workspaces" + ], + "modules-center": [ + "hyprland/window" + ], + "modules-right": [ + "pulseaudio", + "network", + "temperature", + "battery", + "clock", + "custom/updates", + "custom/notification", + "tray", + "custom/power" + ], + "hyprland/window": { + "format": "{title}", + "icon": false, }, - "random-icons": { - "off": " ", - "on": " " + "hyprland/workspaces": { + "format": "{icon}", + "on-click": "activate", + "sort-by-number": true }, - "repeat-icons": { - "on": " " + "clock": { + "tooltip-format": "{:%Y %B}\n{calendar}", + "format-alt": "{:L%A %e %b}", + "locale": "fr_FR.utf8", + "calendar": { + "weeks-pos": "left", + "format": { + "weeks": "{:%U}", + "today": "{}" + } + } }, - "single-icons": { - "on": "1 " + "cpu": { + "format": " {usage}%", + "tooltip": false }, - "state-icons": { - "paused": "", - "playing": "" + "memory": { + "format": "{}%  " }, - "tooltip-format": "MPD (connected)", - "tooltip-format-disconnected": "MPD (disconnected)" - }, - "idle_inhibitor": { - "format": "{icon}", - "format-icons": { - "activated": "", - "deactivated": "" - } - }, - "tray": { - // "icon-size": 21, - "spacing": 10 - }, - "clock": { - // "timezone": "America/New_York", - "tooltip-format": "{:%Y %B}\n{calendar}", - "format-alt": "{:%Y-%m-%d}" - }, - "cpu": { - "format": "{usage}% ", - "tooltip": false - }, - "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": ["", "", ""] - }, - "backlight": { - // "device": "acpi_video1", - "format": "{percent}% {icon}", - "format-icons": ["🌑", "🌒", "🌓", "🌔", "🌕"] - }, - "battery": { - "states": { - // "good": 95, - "warning": 30, - "critical": 15 + "temperature": { + "critical-threshold": 80, + "format": "{icon} {temperatureC}°C", + "format-icons": ["", "", ""] }, - "format": "{capacity}% {icon}", - "format-charging": "{capacity}% ", - "format-plugged": "{capacity}% ", - "format-alt": "{time} {icon}", - // "format-good": "", // An empty format will hide the module - // "format-full": "", - "format-icons": ["", "", "", "", ""] - }, - "battery#bat2": { - "bat": "BAT2" - }, - "network": { - // "interface": "wlp2*", // (Optional) To force the use of this interface - "format-wifi": "{essid} ({signalStrength}%) ", - "format-ethernet": "{ipaddr}/{cidr} ", - "tooltip-format": "{ifname} via {gwaddr} ", - "format-linked": "{ifname} (No IP) ", - "format-disconnected": "Disconnected ⚠", - "format-alt": "{ifname}: {ipaddr}/{cidr}" - }, - "pulseaudio": { - // "scroll-step": 1, // %, can be a float - "format": "{volume}% {icon} {format_source}", - "format-bluetooth": "{volume}% {icon} {format_source}", - "format-bluetooth-muted": " {icon} {format_source}", - "format-muted": " {format_source}", - "format-source": "{volume}% ", - "format-source-muted": "", - "format-icons": { - "headphone": "", - "hands-free": "", - "headset": "", - "phone": "", - "portable": "", - "car": "", - "default": ["", "", ""] + "battery": { + "states": { + "warning": 30, + "critical": 15 + }, + "format": "{icon} {capacity}%", + "format-full": "{icon} {capacity}%", + "format-charging": "⚡ {capacity}%", + "format-plugged": " {capacity}%", + "format-alt": "{time} {icon}", + "format-icons": ["", "", "", "", ""] }, - "on-click": "pavucontrol" - }, - "custom/media": { - "format": "{icon} {}", - "return-type": "json", - "max-length": 40, - "format-icons": { - "spotify": "", - "default": "🎜" + "network": { + "format-wifi": " {signalStrength}%", + "format-ethernet": "🖧", + "tooltip-format": "{ipaddr}/{cidr} {ifname} via {gwaddr} {essid}", + "format-linked": "{ifname} (No IP) ⚠", + "format-disconnected": " ⚠ ", + "format-alt": "{ifname}: {ipaddr}/{cidr}" + }, + "pulseaudio": { + "format": "{icon} {volume}%", + "format-bluetooth": "{volume}% {icon} {format_source}", + "format-bluetooth-muted": " {icon} {format_source}", + "format-muted": "🔇 {format_source}", + "format-icons": { + "headphone": "", + "hands-free": "", + "headset": "", + "phone": "", + "portable": "", + "car": "", + "default": ["", "", ""] + }, + "on-click": "pavucontrol" + }, + "custom/launcher": { + "format": " ", + "on-click": "wofi --show drun", + }, + "custom/power": { + "format": "⏻", + "tooltip": false, + "on-click": "poweroff" + }, + "custom/updates": { + "format": "{} {icon}", + "return-type": "json", + "format-icons": { + "has-updates": "󱍷", + "updated": "󰂪" + }, + "exec-if": "which waybar-module-pacman-updates", + "exec": "waybar-module-pacman-updates --interval-seconds 5 --network-interval-seconds 300" + }, + "custom/notification": { + "tooltip": false, + "format": "{icon}", + "format-icons": { + "notification": "", + "none": "", + "dnd-notification": "", + "dnd-none": "", + "inhibited-notification": "", + "inhibited-none": "", + "dnd-inhibited-notification": "", + "dnd-inhibited-none": "" + }, + "return-type": "json", + "exec-if": "which swaync-client", + "exec": "swaync-client -swb", + "on-click": "swaync-client -t -sw", + "on-click-right": "swaync-client -d -sw", + "escape": true }, - "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/macchiato.css b/.config/waybar/macchiato.css new file mode 100644 index 0000000..4a8ef11 --- /dev/null +++ b/.config/waybar/macchiato.css @@ -0,0 +1,32 @@ +/* + * Colors from Catppuccin's Macchiato palette + * https://catppuccin.com/ + * https://github.com/catppuccin + */ + +@define-color rosewater #f4dbd6; +@define-color flamingo #f0c6c6; +@define-color pink #f5bde6; +@define-color mauve #c6a0f6; +@define-color red #ed8796; +@define-color maroon #ee99a0; +@define-color peach #f5a97f; +@define-color yellow #eed49f; +@define-color green #a6da95; +@define-color teal #8bd5ca; +@define-color sky #91d7e3; +@define-color sapphire #7dc4e4; +@define-color blue #8aadf4; +@define-color lavender #b7bdf8; +@define-color text #cad3f5; +@define-color subtext1 #b8c0e0; +@define-color subtext0 #a5adcb; +@define-color overlay2 #939ab7; +@define-color overlay1 #8087a2; +@define-color overlay0 #6e738d; +@define-color surface2 #5b6078; +@define-color surface1 #494d64; +@define-color surface0 #363a4f; +@define-color base #24273a; +@define-color mantle #1e2030; +@define-color crust #181926; diff --git a/.config/waybar/style.css b/.config/waybar/style.css index 8474bb9..08011ce 100644 --- a/.config/waybar/style.css +++ b/.config/waybar/style.css @@ -1,39 +1,18 @@ +/* Pour les couleurs */ +@import "macchiato.css"; + * { - /* `otf-font-awesome` is required to be installed for icons */ - font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif; - font-size: 13px; + font-family: "FiraCode Nerd Font Mono SemBd", Roboto, Helvetica, Arial, sans-serif; + font-size: 16px; } window#waybar { - background-color: rgba(43, 48, 59, 0.5); - border-bottom: 3px solid rgba(100, 114, 125, 0.5); - color: #ffffff; + background-color: rgba(0,0,0,0.3); + border-radius: 0px; transition-property: background-color; transition-duration: .5s; } -window#waybar.hidden { - opacity: 0.2; -} - -/* -window#waybar.empty { - background-color: transparent; -} -window#waybar.solo { - background-color: #FFFFFF; -} -*/ - -window#waybar.termite { - background-color: #3F3F3F; -} - -window#waybar.chromium { - background-color: #000000; - border: none; -} - button { /* Use box-shadow instead of border so the text isn't offset */ box-shadow: inset 0 -3px transparent; @@ -48,6 +27,11 @@ button:hover { box-shadow: inset 0 -3px #ffffff; } +/* you can set a style on hover for any module like this */ +#pulseaudio:hover { + background-color: @surface2; +} + #workspaces button { padding: 0 5px; background-color: transparent; @@ -55,11 +39,15 @@ button:hover { } #workspaces button:hover { - background: rgba(0, 0, 0, 0.2); + background: rgba(0, 0, 0, 0.1); } #workspaces button.active { - background-color: #64727D; + color: @text; +} + +#workspaces button.focused { + background-color: @lavender; box-shadow: inset 0 -3px #ffffff; } @@ -69,71 +57,87 @@ button:hover { #mode { background-color: #64727D; - border-bottom: 3px solid #ffffff; + box-shadow: inset 0 -3px #ffffff; } #clock, #battery, #cpu, #memory, -#disk, #temperature, -#backlight, #network, -#pulseaudio, -#wireplumber, -#custom-media, -#tray, -#mode, -#idle_inhibitor, -#scratchpad, -#mpd { +#pulseaudio +{ padding: 0 10px; - color: #ffffff; } -#window, -#workspaces { - margin: 0 4px; +#pulseaudio { + color: @maroon; } -/* If workspaces is the leftmost module, omit left margin */ -.modules-left > widget:first-child > #workspaces { - margin-left: 0; +#network { + color: @yellow; } -/* If workspaces is the rightmost module, omit right margin */ -.modules-right > widget:last-child > #workspaces { - margin-right: 0; -} - -#clock { - background-color: #64727D; +#temperature { + color: @sky; } #battery { - background-color: #ffffff; - color: #000000; + color: @green; } +#clock { + color: @flamingo; +} + +#window { + color: @rosewater; +} + +#custom-launcher { + padding-left: 10px; + padding-right: 10px; + color: @text; +} + +#custom-notification, #custom-updates, #custom-power { + padding-left: 10px; + padding-right: 10px; + color: @maroon; +} + +.modules-right,.modules-left,.modules-center { + border-radius: 0px; +} +.modules-right { + padding: 0 10px; +} + +.modules-left { + padding: 0 10px; +} + +.modules-center { + padding: 0 10px; +} #battery.charging, #battery.plugged { - color: #ffffff; - background-color: #26A65B; + color: @sapphire; } @keyframes blink { to { - background-color: #ffffff; color: #000000; } } +/* Using steps() instead of linear as a timing function to limit cpu usage */ #battery.critical:not(.charging) { background-color: #f53c3c; color: #ffffff; animation-name: blink; animation-duration: 0.5s; - animation-timing-function: linear; + animation-timing-function: steps(12); animation-iteration-count: infinite; animation-direction: alternate; } @@ -142,139 +146,6 @@ label:focus { background-color: #000000; } -#cpu { - background-color: #2ecc71; - color: #000000; -} - -#memory { - background-color: #9b59b6; -} - -#disk { - background-color: #964B00; -} - -#backlight { - background-color: #90b1b1; -} - -#network { - background-color: #2980b9; -} - -#network.disconnected { - background-color: #f53c3c; -} - -#pulseaudio { - background-color: #f1c40f; - color: #000000; -} - #pulseaudio.muted { - background-color: #90b1b1; - color: #2a5c45; -} - -#wireplumber { - background-color: #fff0f5; - color: #000000; -} - -#wireplumber.muted { - background-color: #f53c3c; -} - -#custom-media { - background-color: #66cc99; - color: #2a5c45; - min-width: 100px; -} - -#custom-media.custom-spotify { - background-color: #66cc99; -} - -#custom-media.custom-vlc { - background-color: #ffa000; -} - -#temperature { - background-color: #f0932b; -} - -#temperature.critical { - background-color: #eb4d4b; -} - -#tray { - background-color: #2980b9; -} - -#tray > .passive { - -gtk-icon-effect: dim; -} - -#tray > .needs-attention { - -gtk-icon-effect: highlight; - background-color: #eb4d4b; -} - -#idle_inhibitor { - background-color: #2d3436; -} - -#idle_inhibitor.activated { - background-color: #ecf0f1; - color: #2d3436; -} - -#mpd { - background-color: #66cc99; - color: #2a5c45; -} - -#mpd.disconnected { - background-color: #f53c3c; -} - -#mpd.stopped { - background-color: #90b1b1; -} - -#mpd.paused { - background-color: #51a37a; -} - -#language { - background: #00b093; - color: #740864; - padding: 0 5px; - margin: 0 5px; - min-width: 16px; -} - -#keyboard-state { - background: #97e1ad; - color: #000000; - padding: 0 0px; - margin: 0 5px; - min-width: 16px; -} - -#keyboard-state > label { - padding: 0 5px; -} - -#keyboard-state > label.locked { - background: rgba(0, 0, 0, 0.2); -} - -#scratchpad { - background: rgba(0, 0, 0, 0.2); -} - -#scratchpad.empty { - background-color: transparent; + color: @text; }