From e3a2e8ef6820cec6b32bf947f882def19df4bf59 Mon Sep 17 00:00:00 2001 From: Tibo De Peuter Date: Sat, 4 Jun 2022 21:44:29 +0200 Subject: [PATCH] A lot of styling later... --- config/waybar-config | 126 ---------------- config/waybar/config | 42 ++++++ config/waybar/default.json | 24 +++ config/waybar/left.json | 20 +++ .../mediaplayer.py} | 0 config/waybar/modules.json | 137 ++++++++++++++++++ config/waybar/round.css | 50 +++++++ config/waybar/sharp.css | 23 +++ config/{waybar-style.css => waybar/style.css} | 104 ++++++------- config/waybar/transparent.css | 23 +++ 10 files changed, 364 insertions(+), 185 deletions(-) delete mode 100644 config/waybar-config create mode 100644 config/waybar/config create mode 100644 config/waybar/default.json create mode 100644 config/waybar/left.json rename config/{waybar-mediaplayer.py => waybar/mediaplayer.py} (100%) create mode 100644 config/waybar/modules.json create mode 100644 config/waybar/round.css create mode 100644 config/waybar/sharp.css rename config/{waybar-style.css => waybar/style.css} (68%) create mode 100644 config/waybar/transparent.css diff --git a/config/waybar-config b/config/waybar-config deleted file mode 100644 index a0043c0..0000000 --- a/config/waybar-config +++ /dev/null @@ -1,126 +0,0 @@ -// -// ~/.config/waybar/config -// - -[{ - "position": "top", - "height": 25, - "spacing": 4, - "margin": "-25px 0 0 0", - - "modules-left": ["sway/workspaces", "custom/media"], - "modules-right": ["idle_inhibitor", "disk", "memory", "cpu", "temperature", "pulseaudio", "battery", "tray"], - - - "mode": "hide", - "ipc": true, - - "sway/workspaces": { - "disable-scroll": true, - "all-outputs": true, - "format": "{icon}{name}", - "format-icons": { - "urgent": "\uf071 ", - "default": "" // Prevent showing workspace name literal. - }, - }, - "custom/media": { - "format": "{icon} {}", - "return-type": "json", - "max-length": 40, - "format-icons": { - "spotify": "\uf1bc", - "default": "\uf51f" - }, - "escape": true, - "exec": "~/.config/waybar/mediaplayer.py 2> /dev/null", // Script in resources folder - "on-click": "playerctl play-pause", - }, - - - "idle_inhibitor": { - "format": "{icon}", - "format-icons": { - "activated": "\uf06e", - "deactivated": "\uf070" - }, - "tooltip": false, - }, - "disk": { - "interval": 30, - "format": "{percentage_free}% ({free}) \uf0a0", - "path": "/", - "on-click": "alacritty -e ncdu /", - }, - "memory": { - "format": "{}% \uf1c0", - "on-click": "alacritty -e htop", - }, - "cpu": { - "format": "{usage}% \uf2db", - "tooltip": true, - "on-click": "alacritty -e htop", - }, - "temperature": { - "critical-threshold": 70, - // "format-critical": "{temperatureC}°C {icon}", - "format": "{temperatureC}°C {icon}", - "format-icons": ["\uf2cb", "\uf2c9", "\uf2c7"], - }, - "pulseaudio": { - "scroll-step": 2, - "format": "{volume}% {icon} {format_source}", - "format-bluetooth": "{volume}% {icon}\uf294 {format_source}", - "format-bluetooth-muted": "\uf6a9 {icon}\uf294 {format_source}", - "format-muted": "\uf6a9 {format_source}", - "format-source": "{volume}% \uf130", - "format-source-muted": "\uf131", - "format-icons": { - "headphone": "\uf58f", - "hands-free": "\uf590", - "headset": "\uf590", - "phone": "\uf3ce", - "portable": "\uf3ce", - "car": "\uf1b9", - "default": ["\uf026", "\uf027", "\uf028 "] - }, - "on-click": "pavucontrol", - }, - "battery": { - "states": { - "warning": 30, - "critical": 15 - }, - "format": "{capacity}% {icon}", - "format-alt": "{time} {icon}", - "format-charging": "{capacity}% \uf0e7 {icon}", - "format-plugged": "{capacity}% \ue55c", - // "format-good": "", // An empty format will hide the module - // "format-full": "", - "format-icons": ["\uf244", "\uf243", "\uf242", "\uf241", "\uf240"], - }, - "tray": { - // "icon-size": 21, - "spacing": 10, - }, -}, - -{ - "position": "top", - "height": 25, - "modules-left": ["sway/mode"], - "modules-center": ["sway/window"], - "modules-right": ["clock"], - - "sway/window": { - "max-length": 85, - }, - - "clock": { - "timezone": "Europe/Brussels", - "format": "{:%H:%M}", - "format-alt": "{:%d/%m/%Y %H:%M}", //"{:%H:%M}\n21-03-2022", //\n{:%d/%m/%Y}", - "tooltip-format": "{:%Y %B}\n{calendar}", - }, -}] - diff --git a/config/waybar/config b/config/waybar/config new file mode 100644 index 0000000..67b3a56 --- /dev/null +++ b/config/waybar/config @@ -0,0 +1,42 @@ +// +// ~/.config/waybar/config +// + +[{ + + "name": "toggle", + + "mode": "hide", + "ipc": true, + + "position": "top", + "height": 25, + "spacing": 4, + "margin": "-25px 0 0 0", // Show this bar on top of the other one, seemingly the "same" one. + + "custom/sep": { + "format": "\uf142" + }, + + "include": [ + // Import modules (!) + "~/.config/waybar/modules.json", +// "~/.config/waybar/default.json" + "~/.config/waybar/left.json" + ], +}, + +{ + + // Import modules (!) + "include": "~/.config/waybar/modules.json", + + "name": "keep", + "position": "top", + "height": 25, + "modules-left": ["sway/mode"], + "modules-center": ["sway/window"], + "modules-right": ["clock"], + +}] + diff --git a/config/waybar/default.json b/config/waybar/default.json new file mode 100644 index 0000000..d045a28 --- /dev/null +++ b/config/waybar/default.json @@ -0,0 +1,24 @@ + +{ + "modules-left": [ + "idle_inhibitor", + "custom/media" + ], + "modules-center": [ + "sway/workspaces" + ], + "modules-right": [ + "disk", + "memory", + "cpu", + "temperature", + "custom/sep", + "bluetooth", + "network", + "pulseaudio", + "battery", + "custom/sep", + "tray" + ] +} + diff --git a/config/waybar/left.json b/config/waybar/left.json new file mode 100644 index 0000000..9fae4c0 --- /dev/null +++ b/config/waybar/left.json @@ -0,0 +1,20 @@ +{ + "modules-left": [ + "sway/workspaces", + "idle_inhibitor", + "custom/media" + ], + "modules-right": [ + "disk", + "memory", + "cpu", + "temperature", + "custom/sep", + "bluetooth", + "network", + "pulseaudio", + "battery", + "custom/sep", + "tray" + ] +} diff --git a/config/waybar-mediaplayer.py b/config/waybar/mediaplayer.py similarity index 100% rename from config/waybar-mediaplayer.py rename to config/waybar/mediaplayer.py diff --git a/config/waybar/modules.json b/config/waybar/modules.json new file mode 100644 index 0000000..24968f2 --- /dev/null +++ b/config/waybar/modules.json @@ -0,0 +1,137 @@ +{ + + "battery": { + "format": "{capacity}% {icon}", + "format-alt": "{time} {icon}", + "format-charging": "{capacity}% \uf0e7 {icon}", + "format-icons": ["\uf244", "\uf243", "\uf242", "\uf241", "\uf240"], + "format-plugged": "{capacity}% \ue55c", + "states": { + "warning": 30, + "critical": 15 + } + }, + + + "disk": { + "interval": 30, + "format": "{percentage_used}% \uf0a0", + "on-click": "alacritty -e ncdu /", + "path": "/", + "tooltip-format": "{used} used out of {total} on {path} ({percentage_free}% or {free} free)" + }, + + + "bluetooth": { + "format": "\uf294 {status}", + "format-disabled": "\uf294", + "on-click": "~/.scripts/bluetoggle.sh", + "on-click-right": "blueman-manager" + }, + + + "clock": { + "format": "{:%H:%M}", + "format-alt": "{:%d/%m/%Y %H:%M}", + "timezone": "Europe/Brussels", + "tooltip-format": "{:%Y %B}\n{calendar}" + }, + + + "custom/media": { + "escape": true, + "exec": "~/.config/waybar/mediaplayer.py 2> /dev/null", + "format": "{icon} {}", + "format-icons": { + "default": "\uf51f", + "spotify": "\uf1bc" + }, + "max-length": 40, + "on-click": "playerctl play-pause", + "return-type": "json" + }, + + + "cpu": { + "format": "{usage}% \uf2db", + "on-click": "alacritty -e htop", + "tooltip": true + }, + + + "idle_inhibitor": { + "format": "{icon}", + "format-icons": { + "activated": "\uf06e", + "deactivated": "\uf070" + }, + "tooltip": false + }, + + + "memory": { + "format": "{}% \uf1c0", + "on-click": "alacritty -e htop" + }, + + + "network": { + "format-disconnected": "\uf127", + "format-ethernet": "\uf6ff {ifname}: {ipadds}/{cidr}", + "format-wifi": "\uf1eb {essid} ({signalStrength}%)", + "interval": 5, + "on-click-right": "alacritty -e nmtui", + "tooltip-format": "{ifname}: {ipaddr}" + }, + + + "sway/window": { + "max-length": 85 + }, + + + "sway/workspaces": { + "all-outputs": true, + "disable-scroll": true, + "format": "{icon}{name}", + "format-icons": { + "default": "", // Prevent showing workspace name literal. + "urgent": "\uf071 " + } + }, + + + "pulseaudio": { + "format": "{volume}% {icon} {format_source}", + "format-bluetooth": "{volume}% {icon}\uf294 {format_source}", + "format-bluetooth-muted": "\uf6a9 {icon}\uf294 {format_source}", + "format-muted": "\uf6a9 {format_source}", + "format-source": "{volume}% \uf130", + "format-source-muted": "\uf131", + "format-icons": { + "headphone": "\uf58f", + "hands-free": "\uf590", + "headset": "\uf590", + "phone": "\uf3ce", + "portable": "\uf3ce", + "car": "\uf1b9", + "default": ["\uf026", "\uf027", "\uf028 "] + }, + "on-click": "pulsemixer --toggle-mute", + "on-click-right": "pavucontrol", + "scroll-step": 2 + }, + + + "temperature": { + "critical-threshold": 70, + "format": "{temperatureC}°C {icon}", + "format-icons": ["\uf2cb", "\uf2c9", "\uf2c7"] + }, + + + "tray": { + "spacing": 10 + } + +} diff --git a/config/waybar/round.css b/config/waybar/round.css new file mode 100644 index 0000000..61f2bab --- /dev/null +++ b/config/waybar/round.css @@ -0,0 +1,50 @@ +/* + * ~/.config/waybar/round.css + * + * This stylesheet has round modules and titles. + */ + +window#waybar { + color: @white; + background-color: transparent; +} + +.modules-left { + background-color: @transparent-black; + border-radius: 0 20px 20px 0; + /* Coloured modules must hit the border! */ + padding-right: 0; +} + +.modules-center { + background-color: @transparent-black; + border-radius: 20px; +} + +.keep .modules-center { + background-color: transparent; + padding: 0 10px; +} + +.modules-right { + background-color: @transparent-black; + border-radius: 20px 0 0 20px; + padding-left: 10px; +} + +#workspaces button { + border-radius: 20px; +} + +#workspaces button:hover, +#workspaces button.focused { + background-color: @accent; + border-radius: 20px; + color: @white; +} + +#custom-media { + border-radius: 0 20px 20px 0; + padding-right: 10px; +} + diff --git a/config/waybar/sharp.css b/config/waybar/sharp.css new file mode 100644 index 0000000..131c554 --- /dev/null +++ b/config/waybar/sharp.css @@ -0,0 +1,23 @@ +/* + * ~/.config/waybar/sharp.css + * + * This stylesheet is a take on a minimal layout. + */ + +window#waybar { + color: @white; + background-color: transparent; +} + +#mode, +.toggle .modules-left, +.toggle .modules-right { + background-color: @transparent-black; +} + +#mode, +#workspaces button.focused, +#workspaces button:hover { + box-shadow: inset 0 2px #ffffff; +} + diff --git a/config/waybar-style.css b/config/waybar/style.css similarity index 68% rename from config/waybar-style.css rename to config/waybar/style.css index 3c18dab..5b08181 100644 --- a/config/waybar-style.css +++ b/config/waybar/style.css @@ -1,68 +1,54 @@ /* * ~/.config/waybar/style.css - * */ + * + * `otf-font-awesome` is required to be installed for icons. + * + * Pick your stylesheet: + * - sharp.css + * - transparent.css + * - round.css + */ -* { - /* `otf-font-awesome` is required to be installed for icons */ - font-family: Letter; - font-size: 13px; -} +@define-color transparent-black rgba(23, 23, 23, 0.9); +@define-color white #ecf0f1; +@define-color warning-red #eb4d4b; +@define-color accent #00897b; window#waybar { - color: #ffffff; - background-color: transparent; + font-family: Letter; /* This is my personal font. */ + font-size: 13px; transition-property: background-color; transition-duration: .5s; } -window#waybar.hidden { - opacity: 0.2; +#window, #workspaces { + margin: 0 4px; } #workspaces button { - padding: 0 5px; border: none; border-radius: 0; min-width: 30px; + padding: 0 5px; } -/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ -#workspaces button:hover, #workspaces button.focused, #mode { - box-shadow: inset 0 2px #ffffff; - - /* Keep this to prevent white overlay on hover */ +#workspaces button:hover, +#workspaces button.focused { background-color: transparent; - color: #ffffff; + color: @white; } #workspaces button.urgent { - background-color: #eb4d4b; -} - -#clock, -#battery, -#cpu, -#memory, -#disk, -#temperature, -#backlight, -#network, -#pulseaudio, -#custom-media, -#tray, -#mode, -#idle_inhibitor, -#mpd { - padding: 0 10px; + color: @white; + background-color: @warning-red; } +/* All modules individually. */ +#backlight, #battery, #bluetooth, #clock, #cpu, +#custom-media, #disk, #idle_inhibitor, #memory, +#mode, #mpd, #network, #pulseaudio, #temperature, #tray { - background-color: rgba(43, 48, 59, 0.95); -} - -#window, -#workspaces { - margin: 0 4px; + padding: 0 10px; } /* If workspaces is the leftmost module, omit left margin */ @@ -75,11 +61,6 @@ window#waybar.hidden { margin-right: 0; } -#battery.charging, #battery.plugged { - color: #ffffff; - background-color: #26A65B; -} - @keyframes blink { to { background-color: #ffffff; @@ -87,6 +68,17 @@ window#waybar.hidden { } } +label:focus { + background-color: #000000; +} + +/* Module specific colours */ + +#battery.charging, #battery.plugged { + color: #ffffff; + background-color: #26A65B; +} + #battery.critical:not(.charging) { background-color: #f53c3c; color: #ffffff; @@ -97,17 +89,9 @@ window#waybar.hidden { animation-direction: alternate; } -label:focus { - background-color: #000000; -} - -#pulseaudio.muted { - color: #171717; /* REPLACE */ -} - #custom-media { - background-color: #66cc99; color: #2a5c45; + background-color: #66cc99; min-width: 100px; } @@ -123,6 +107,11 @@ label:focus { background-color: #eb4d4b; } +#idle_inhibitor.activated { + background-color: #ecf0f1; + color: #2d3436; +} + #tray > .passive { -gtk-icon-effect: dim; } @@ -132,8 +121,5 @@ label:focus { background-color: #eb4d4b; } -#idle_inhibitor.activated { - background-color: #ecf0f1; - color: #2d3436; -} +@import "transparent.css"; diff --git a/config/waybar/transparent.css b/config/waybar/transparent.css new file mode 100644 index 0000000..4361b0e --- /dev/null +++ b/config/waybar/transparent.css @@ -0,0 +1,23 @@ +/* + * ~/.config/waybar/transparent.css + * + * This stylesheet is a minimalistic, transparent style. + */ + +@define-color transparent-black-light rgba(23, 23, 23, 0.5); + +window#waybar { + color: @white; + background-color: transparent; +} + +.toggle .modules-right { + background-color: @transparent-black-light; +} + +#workspaces button:hover, +#workspaces button.focused, +#mode { + box-shadow: inset 0 2px #ffffff; +} +