From 785071f9e9c34a3b305bdd9b36f8975cb37b24b4 Mon Sep 17 00:00:00 2001 From: Liam Malone Date: Sat, 7 Dec 2024 14:44:59 +0100 Subject: [PATCH] convert waybar config to nix, and switch back to top icons --- modules/desktop/waybar.css | 216 +++++++++++++++++++------------------ modules/desktop/waybar.nix | 18 ++-- 2 files changed, 120 insertions(+), 114 deletions(-) diff --git a/modules/desktop/waybar.css b/modules/desktop/waybar.css index 5faea9c..2925ac6 100644 --- a/modules/desktop/waybar.css +++ b/modules/desktop/waybar.css @@ -4,6 +4,7 @@ @define-color lightgray #686868; @define-color darkgray #353535; @define-color red #C50F1F; +@define-color orange #FFC251; @define-color blue #00FFB2; @define-color lightgreen #a6e3a1; @define-color magenta #f5c2e7; @@ -25,6 +26,8 @@ font-family: Iosevka, Material Design Icons Desktop; font-weight: bold; font-size: 16px; + border: none; + border-radius: 0; } /* * { @@ -37,17 +40,31 @@ } */ +#window { + background-color: @black-transparent-4; + padding: 0px; + border-radius: 6px; + border: none; +} + window#waybar { - background-color: @black-transparent-6; + background: transparent; color: @text; border-radius: 7px; - border: 2px solid @purple; - /* border: 1px solid rgba(0, 0, 0, 0.0); */ + border: none; } +window#waybar.empty { + background-color: transparent; + padding: 0px; + border-radius: 0px; + border: none; +} + + tooltip { background: @black-transparent-9; - border: 1px solid @darkgray; + border: 1px solid @purple; border-radius: 7px; } @@ -55,6 +72,24 @@ tooltip label { color: @text; } +.modules-left { + background: @black-transparent-8; + border-radius: 8px; + border: 2px solid @purple; + margin-left: 2px; + margin-right: 2px; + padding: 2px 4px; +} + +.modules-right { + background: @black-transparent-8; + border-radius: 8px; + border: 2px solid @purple; + margin-left: 2px; + margin-right: 2px; + padding: 2px 4px; +} + #tags { } @@ -88,12 +123,6 @@ tooltip label { animation: colored-gradient 10s ease infinite; } -/* #workspaces button.focused:hover, -#workspaces button.active:hover { - background-color: @white; - transition: all 1s ease; -} */ - #tags button.urgent { background-color: @red; color: @black; @@ -112,9 +141,8 @@ tooltip label { } #workspaces button { - background-color: transparent; color: @lightgray; - padding: 0; + padding: 0px 3px; /* margin: 0; */ margin-top: 3px; margin-bottom: 3px; @@ -142,11 +170,11 @@ tooltip label { animation: colored-gradient 10s ease infinite; } -/* #workspaces button.focused:hover, +#workspaces button.focused:hover, #workspaces button.active:hover { - background-color: @white; + background-color: @darkgray; transition: all 1s ease; -} */ +} #workspaces button.urgent { background-color: @red; @@ -166,9 +194,9 @@ tooltip label { #taskbar button { color: @text; - padding: 1px 8px; - margin-left: 1px; - margin-right: 1px; + padding: 4px 8px; + margin-left: 5px; + margin-right: 5px; } #taskbar button:hover { @@ -190,69 +218,87 @@ tooltip label { animation: colored-gradient 10s ease infinite; } -/* #taskbar button.fullscreen {} */ +#custom-kernel { + margin-top: 2px; + margin-left: 2px; + margin-bottom: 2px; + border-radius: 8px; + color: @magenta; +} -/* -------------------------------------------------------------------------------- */ +#custom-wofi { + color: @archbtw; + margin-left: 4px; + margin-right: 4px; + padding: 0px 4px; +} -#custom-wofi, -#custom-kernel, -#keyboard-state, -/* #window, */ -#submap, -#mode, -#tray, -#cpu, -#memory, -#backlight, -#pulseaudio.audio, -#pulseaudio.microphone, -#network, -#network.enp46s0, -#bluetooth, -#battery, -#clock, -#custom-updates, -#custom-powermenu, -#custom-notification { - background-color: transparent; - color: @text; - padding: 1px 8px; - margin-top: 5px; - margin-bottom: 5px; +#keyboard-state { + padding: 0px 3px; margin-left: 2px; margin-right: 2px; - /* border: 1px solid @darkgray; */ - border-radius: 20px; - transition: all 0.3s ease; } -#submap { - border: 0; +#tray { + background-color: @black-transparent-6; + padding: 0px 0px; + margin-right: 6px; + border-radius: 8px; + border: 2px solid @black; } -/* -------------------------------------------------------------------------------- */ +#tray > .passive { + -gtk-icon-effect: dim; +} -/* #custom-launcher { - background-color: @darkgray; - color: @black; -} */ - -/* #custom-launcher:hover { - color: @white; -} */ - -/* #custom-powermenu { +#tray > .needs-attention { + -gtk-icon-effect: highlight; background-color: @red; - color: @black; } -#custom-powermenu:hover { +#battery.charging { + color: @lightgreen; + margin-left: 2px; + margin-right: 2px; + padding: 4px 4px; +} + +#battery.discharging.good { color: @white; -} */ + margin-left: 2px; + margin-right: 2px; + padding: 4px 4px; +} + +#battery.discharging.warning { + color: @orange; + margin-left: 2px; + margin-right: 2px; + padding: 4px 4px; +} + +#battery.discharging.critical { + color: @red; + margin-left: 2px; + margin-right: 2px; + padding: 4px 4px; +} + +#pulseaudio.audio { + margin-left: 2px; + margin-right: 2px; + padding: 4px 4px; +} + +#clock { + margin-left: 2px; + margin-right: 2px; + padding: 4px 4px; +} /* -------------------------------------------------------------------------------- */ - /* If workspaces is the leftmost module, omit left margin */ + .modules-left > widget:first-child > #workspaces button, .modules-left > widget:first-child > #taskbar button, .modules-left > widget:first-child > #custom-launcher, @@ -267,9 +313,8 @@ tooltip label { .modules-left > widget:first-child > #bluetooth, .modules-left > widget:first-child > #battery, .modules-left > widget:first-child > #clock, -.modules-left > widget:first-child > #custom-powermenu, .modules-left > widget:first-child > #custom-notification { - margin-top: 10px; + margin-left: 8px; } .modules-right > widget:last-child > #workspaces button, @@ -286,43 +331,8 @@ tooltip label { .modules-right > widget:last-child > #bluetooth, .modules-right > widget:last-child > #battery, .modules-right > widget:last-child > #clock, -.modules-right > widget:last-child > #custom-powermenu, .modules-right > widget:last-child > #custom-notification { - margin-bottom: 10px; + margin-right: 8px; } /* -------------------------------------------------------------------------------- */ - -#tray { - background-color: transparent; - padding: 1px 6px; -} -#tray > .passive { - -gtk-icon-effect: dim; -} -#tray > .needs-attention { - -gtk-icon-effect: highlight; - background-color: @red; -} -#battery { - color: @lightgreen; - border-right: 0px; - border-left: 0px; -} -#custom-updates { - color: @magenta; -} -#custom-kernel { - margin-top: 8px; - margin-bottom: 8px; - color: @magenta; -} -#custom-wofi { - color: @archbtw; -} -#keyboard-state { - margin-top: 8px; -} -#clock { -} - diff --git a/modules/desktop/waybar.nix b/modules/desktop/waybar.nix index 80bfe30..36c95ca 100644 --- a/modules/desktop/waybar.nix +++ b/modules/desktop/waybar.nix @@ -42,7 +42,7 @@ "custom/kernel" = { exec = "uname -r | sed 's/-a.*//p'"; - format = "{}"; + format = " {}"; interval = "once"; }; @@ -85,16 +85,11 @@ "hyprland/window" = { format = "{}"; - rewrite = [ - { - "(.*) — Mozilla Firefox" = "🌎 $1"; - } - ]; separate-outputs = false; }; "tray" = { - icon-size = 14; + icon-size = 18; spacing = 8; }; @@ -104,9 +99,9 @@ warning = 30; critical = 15; }; - format = "{icon} {capacity}%"; - format-charging = "󰂄 {capacity}%"; - format-plugged = "󱘖 {capacity}%"; + format = "| {icon} {capacity}%"; + format-charging = "| 󰂄 {capacity}%"; + format-plugged = "| 󱘖 {capacity}%"; format-icons = [ "󰁺" "󰁻" @@ -152,7 +147,8 @@ "clock" = { interval = 1; - format = " {:%d/%m} :: 󰥔 {:%R}"; + format = " {:%d/%m, 󰥔 %R}"; + tooltip-format = "{:%Y %B}\n{calendar}"; }; }; };