From 26e8b9571b2a456d0c8609b41527d6c153a4a7b7 Mon Sep 17 00:00:00 2001 From: Noa Aarts Date: Tue, 18 Jun 2024 19:17:29 +0200 Subject: [PATCH] split off waybar styling to respective places --- common/colors.nix | 4 +- modules/waybar/clock.nix | 40 +++++--- modules/waybar/cpu.nix | 26 +++-- modules/waybar/default.nix | 179 --------------------------------- modules/waybar/memory.nix | 26 +++-- modules/waybar/network.nix | 35 +++++-- modules/waybar/power.nix | 19 +++- modules/waybar/spotify.nix | 29 +++--- modules/waybar/tray.nix | 37 ++++++- modules/waybar/window.nix | 40 +++++++- modules/waybar/wireplumber.nix | 21 +++- modules/waybar/workspaces.nix | 50 +++++++-- 12 files changed, 248 insertions(+), 258 deletions(-) diff --git a/common/colors.nix b/common/colors.nix index 2555ffc..2a70ae2 100644 --- a/common/colors.nix +++ b/common/colors.nix @@ -6,8 +6,8 @@ ]; colorScheme = { - slug = "test"; - name = "TestScheme"; + slug = "dracumod"; + name = "ModifiedDracula"; author = "Noa"; palette = { base00 = "#26052e"; # background222c"; # background diff --git a/modules/waybar/clock.nix b/modules/waybar/clock.nix index 2803d95..f56f62b 100644 --- a/modules/waybar/clock.nix +++ b/modules/waybar/clock.nix @@ -8,22 +8,34 @@ in enable = lib.mkEnableOption "enable ${name} waybar module"; }; config = lib.mkIf config.modules.waybar.enabled.${name}.enable { - programs.waybar.settings.mainBar.${name} = { - tooltip-format = "{:%Y %B}\n\n{calendar}"; - interval = 1; - format = "{:%H:%M:%S}"; - format-alt = "{:%Y-%m-%d %H:%M:%S}"; - on-click-middle = "gnome-clocks"; - calendar = { - weeks-pos = "left"; - format = { - today = "{}"; # TODO: use nix-colors - weeks = "{}"; # TODO: use nix-colors + programs.waybar = { + settings.mainBar.${name} = { + tooltip-format = "{:%Y %B}\n\n{calendar}"; + interval = 1; + format = "{:%H:%M:%S}"; + format-alt = "{:%Y-%m-%d %H:%M:%S}"; + on-click-middle = "gnome-clocks"; + calendar = { + weeks-pos = "left"; + format = { + today = "{}"; # TODO: use nix-colors + weeks = "{}"; # TODO: use nix-colors + }; }; + home.packages = [ + pkgs.gnome.gnome-clocks + ]; }; - home.packages = [ - pkgs.gnome.gnome-clocks - ]; + style = '' + #clock { + color: #${config.colorScheme.palette.base04}; + margin: 0px 2px; + padding: 0 15px; + + border-radius: 999px; + box-shadow: none; + } + ''; }; }; } diff --git a/modules/waybar/cpu.nix b/modules/waybar/cpu.nix index b8a239d..763900d 100644 --- a/modules/waybar/cpu.nix +++ b/modules/waybar/cpu.nix @@ -3,14 +3,28 @@ let name = "cpu"; in { - options.modules.waybar.modules = import ./addname.nix lib name; - options.modules.waybar.enabled.${name} = { - enable = lib.mkEnableOption "enable ${name} waybar module"; + options.modules.waybar = { + modules = import ./addname.nix lib name; + enabled.${name} = { + enable = lib.mkEnableOption "enable ${name} waybar module"; + }; }; config = lib.mkIf config.modules.waybar.enabled.${name}.enable { - programs.waybar.settings.mainBar."${name}" = { - format = "cpu: {usage}%"; - tooltip = false; + programs.waybar = { + settings.mainBar."${name}" = { + format = "cpu: {usage}%"; + tooltip = false; + }; + style = '' + #cpu { + color: #${config.colorScheme.palette.base04}; + margin: 0px 0px; + padding: 0 15px; + + border-radius: 999px 0px 0px 999px; + box-shadow: inset 0 0 0 1px #${config.colorScheme.palette.base01}; + } + ''; }; }; } diff --git a/modules/waybar/default.nix b/modules/waybar/default.nix index f037ca7..ab9d841 100644 --- a/modules/waybar/default.nix +++ b/modules/waybar/default.nix @@ -81,30 +81,10 @@ in }; style = '' * { - /* `otf-font-awesome` is required to be installed for icons */ font-family: "Maple Mono NF"; font-size: 14px; } - window#waybar { - background-color: transparent; - border-radius: 999px; - color: #${config.colorScheme.palette.base05}; - transition-property: background-color; - transition-duration: .5s; - } - window#waybar.hidden { - opacity: 0.2; - } - - window#waybar.termite { - background-color: transparent; - } - - window#waybar.chromium { - background-color: transparent; - } - button { /* Use box-shadow instead of border so the text isn't offset */ box-shadow: inset 0 -1px transparent; @@ -113,170 +93,11 @@ in border-radius: 0; } - /* https://githbackground: #000000ub.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */ button:hover { background: inherit; border-radius: 999px; } - #workspaces button { - transition: all 0.2s; - padding: 3px 3px 3px 5px; - margin: 3px; - min-width: 15px; - min-height: 15px; - background-color: transparent; - color: #${config.colorScheme.palette.base04}; - border-radius: 999px; - } - - #workspaces button:hover { - background-color: #${config.colorScheme.palette.base17}; - } - - #workspaces button.active { - font-weight: bold; - background-color: #${config.colorScheme.palette.base0E}; - } - - #workspaces button.urgent { - background-color: #${config.colorScheme.palette.base08}; - } - - #clock, - #battery, - #cpu, - #memory, - #disk, - #temperature, - #backlight, - #network, - #pulseaudio, - #wireplumber, - #custom-media, - #mode, - #idle_inhibitor, - #custom-vpn, - #scratchpad, - #tray, - #custom-updates, - #custom-poweroff, - #mpd { - color: #${config.colorScheme.palette.base04}; - margin: 0px 2px; - padding: 0 15px; - - border-radius: 999px; - box-shadow: inset 0 0 0 1px #${config.colorScheme.palette.base01}; - } - - .modules-right > widget:last-child > #battery { - margin-right: 0px; - } - - #tray { - padding: 4px 10px; - border-radius: 999px 999px 999px 999px; - box-shadow: inset 0px 0px 0 1px #${config.colorScheme.palette.base01}; - } - - #window { - margin-left: 6px; - color: #${config.colorScheme.palette.base04}; - } - - #workspaces { - margin: 0 4px; - padding: 4px 4px; - border-radius: 999px; - box-shadow: inset 0px 0px 0 1px #${config.colorScheme.palette.base01}; - } - - #cpu { - border-radius: 999px 0px 0px 999px; - margin-right: 0px; - } - - #memory { - border-radius: 0px; - padding: 0 10px; - margin: 0px; - box-shadow: inset 0px 2px 0 -1px #${config.colorScheme.palette.base01}, - inset 0px -2px 0 -1px #${config.colorScheme.palette.base01}; - } - - #clock { - box-shadow: none; - } - - - #battery { - min-width: 50px; - border-radius: 999px; - box-shadow: inset 0 0 0 1px #${config.colorScheme.palette.base01}; - background-color: #${config.colorScheme.palette.base01}; - transition: all 0.3s; - } - - #battery.charging, #battery.plugged { - color: #${config.colorScheme.palette.base0B}; - background-color: transparent; - animation: batteryCharging 1.2s linear 0s infinite normal forwards, - } - #battery.full { - animation: batteryFull 7.0s linear 0s infinite normal forwards; - } - #battery.critical:not(.charging) { - background-color: #${config.colorScheme.palette.base00}; - animation: batteryCritical 1.2s linear 0s infinite normal forwards; - } - - #network { - - } - - #network.disconnected, - #pulseaudio.muted { - transition: all 0.2s; - color: #${config.colorScheme.palette.base01}; - } - - .custom-spotify { - color: #${config.colorScheme.palette.base14}; - margin-right: 10px; - } - - #temperature { - margin-left: 0px; - border-radius: 0px 999px 999px 0px; - } - - #temperature.critical { - background-color: transparent; - color: #${config.colorScheme.palette.base08}; - } - - #tray { - background-color: transparent; - } - - - #tray > .passive { - -gtk-icon-effect: dim; - } - - #tray > .needs-attention { - background-color: #${config.colorScheme.palette.base08}; - border-radius: 999px; - } - - #scratchpad { - background: rgba(0, 0, 0, 0.1); - } - #scratchpad.empty { - background-color: transparent; - } - tooltip { background-color: #${config.colorScheme.palette.base00}; border: 1px solid; diff --git a/modules/waybar/memory.nix b/modules/waybar/memory.nix index a505a0d..cf09c6d 100644 --- a/modules/waybar/memory.nix +++ b/modules/waybar/memory.nix @@ -3,14 +3,28 @@ let name = "memory"; in { - options.modules.waybar.modules = import ./addname.nix lib name; - options.modules.waybar.enabled.${name} = { - enable = lib.mkEnableOption "enable ${name} waybar module"; + options.modules.waybar = { + modules = import ./addname.nix lib name; + enabled.${name} = { + enable = lib.mkEnableOption "enable ${name} waybar module"; + }; }; config = lib.mkIf config.modules.waybar.enabled.${name}.enable { - programs.waybar.settings.mainBar."${name}" = { - format = "mem: {}%"; - tooltip = false; + programs.waybar = { + settings.mainBar."${name}" = { + format = "mem: {}%"; + tooltip = false; + }; + style = '' + #memory { + border-radius: 0px; + padding: 0 10px; + color: #${config.colorScheme.palette.base04}; + margin: 0px; + box-shadow: inset 0px 2px 0 -1px #${config.colorScheme.palette.base01}, + inset 0px -2px 0 -1px #${config.colorScheme.palette.base01}; + } + ''; }; }; } diff --git a/modules/waybar/network.nix b/modules/waybar/network.nix index 3b53e4d..853a57c 100644 --- a/modules/waybar/network.nix +++ b/modules/waybar/network.nix @@ -3,18 +3,33 @@ let name = "network"; in { - options.modules.waybar.modules = import ./addname.nix lib name; - options.modules.waybar.enabled.${name} = { - enable = lib.mkEnableOption "enable ${name} waybar module"; + options.modules.waybar = { + modules = import ./addname.nix lib name; + enabled.${name} = { + enable = lib.mkEnableOption "enable ${name} waybar module"; + }; }; config = lib.mkIf config.modules.waybar.enabled.${name}.enable { - programs.waybar.settings.mainBar."${name}" = { - 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}"; + programs.waybar = { + settings.mainBar."${name}" = { + 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}"; + }; + style = '' + #network { + color: #${config.colorScheme.palette.base04}; + margin: 0px 2px; + padding: 0 15px; + border-radius: 999px; + box-shadow: inset 0 0 0 1px #${config.colorScheme.palette.base01}; + } + + #network.disconnected, + ''; }; }; } diff --git a/modules/waybar/power.nix b/modules/waybar/power.nix index 5a3e62a..5defbb3 100644 --- a/modules/waybar/power.nix +++ b/modules/waybar/power.nix @@ -14,10 +14,21 @@ in ]; config = lib.mkIf config.modules.waybar.enabled.${name}.enable { modules.wofi.enable = true; - programs.waybar.settings.mainBar."${name}" = { - format = ""; - on-click = "wofi-power"; - on-click-right = "swaylock"; # TODO: change to whatever lock screen i want + programs.waybar = { + settings.mainBar."${name}" = { + format = ""; + on-click = "wofi-power"; + on-click-right = "swaylock"; # TODO: change to whatever lock screen i want + }; + style = '' + #custom-poweroff { + color: #${config.colorScheme.palette.base04}; + margin: 0px 2px; + padding: 0 15px; + border-radius: 999px; + box-shadow: inset 0 0 0 1px #${config.colorScheme.palette.base01}; + } + ''; }; }; } diff --git a/modules/waybar/spotify.nix b/modules/waybar/spotify.nix index 672042f..620b806 100644 --- a/modules/waybar/spotify.nix +++ b/modules/waybar/spotify.nix @@ -10,22 +10,21 @@ in }; }; config = lib.mkIf config.modules.waybar.enabled.${name}.enable { - programs.waybar.settings.mainBar.${name} = { - tooltip-format = "{:%Y %B}\n\n{calendar}"; - interval = 1; - format = "{:%H:%M:%S}"; - format-alt = "{:%Y-%m-%d %H:%M:%S}"; - on-click-middle = "gnome-clocks"; - calendar = { - weeks-pos = "left"; - format = { - today = "{}"; # TODO: use nix-colors - weeks = "{}"; # TODO: use nix-colors - }; + programs.waybar = { + settings.mainBar.${name} = { + exec = ''${pkgs.playerctl}/bin/playerctl metadata --player=spotify -f "{{ status }}: {{ artist }} - {{ title }}"''; + format = "{}"; + interval = 1; + on-click = "${pkgs.playerctl}/bin/playerctl --player=spotify play-pause"; + on-scroll-up = "${pkgs.playerctl}/bin/playerctl --player=spotify volume 0.01+"; + on-scroll-down = "${pkgs.playerctl}/bin/playerctl --player=spotify volume 0.01-"; }; - home.packages = [ - pkgs.gnome.gnome-clocks - ]; + style = '' + #custom-spotify { + color: #${config.colorScheme.palette.base14}; + margin-right: 10px; + } + ''; }; }; } diff --git a/modules/waybar/tray.nix b/modules/waybar/tray.nix index 9dbde15..f75e38e 100644 --- a/modules/waybar/tray.nix +++ b/modules/waybar/tray.nix @@ -3,13 +3,40 @@ let name = "tray"; in { - options.modules.waybar.modules = import ./addname.nix lib name; - options.modules.waybar.enabled.${name} = { - enable = lib.mkEnableOption "enable ${name} waybar module"; + options.modules.waybar = { + modules = import ./addname.nix lib name; + enabled.${name} = { + enable = lib.mkEnableOption "enable ${name} waybar module"; + }; }; config = lib.mkIf config.modules.waybar.enabled.${name}.enable { - programs.waybar.settings.mainBar."${name}" = { - spacing = 10; + programs.waybar = { + settings.mainBar."${name}" = { + spacing = 10; + }; + style = '' + #tray { + color: #${config.colorScheme.palette.base04}; + margin: 0px 2px; + padding: 4px 10px; + border-radius: 999px 999px 999px 999px; + box-shadow: inset 0px 0px 0 1px #${config.colorScheme.palette.base01}; + } + + #tray { + background-color: transparent; + } + + + #tray > .passive { + -gtk-icon-effect: dim; + } + + #tray > .needs-attention { + background-color: #${config.colorScheme.palette.base08}; + border-radius: 999px; + } + ''; }; }; } diff --git a/modules/waybar/window.nix b/modules/waybar/window.nix index 270fd9e..806ee06 100644 --- a/modules/waybar/window.nix +++ b/modules/waybar/window.nix @@ -3,13 +3,43 @@ let name = "hyprland/window"; in { - options.modules.waybar.modules = import ./addname.nix lib name; - options.modules.waybar.enabled.${name} = { - enable = lib.mkEnableOption "enable ${name} waybar module"; + options.modules.waybar = { + modules = import ./addname.nix lib name; + enabled.${name} = { + enable = lib.mkEnableOption "enable ${name} waybar module"; + }; }; config = lib.mkIf config.modules.waybar.enabled.${name}.enable { - programs.waybar.settings.mainBar."${name}" = { - max-length = 36; + programs.waybar = { + settings.mainBar."${name}" = { + max-length = 36; + }; + style = '' + window#waybar { + background-color: transparent; + border-radius: 999px; + color: #${config.colorScheme.palette.base05}; + transition-property: background-color; + transition-duration: .5s; + } + + window#waybar.hidden { + opacity: 0.2; + } + + window#waybar.termite { + background-color: transparent; + } + + window#waybar.chromium { + background-color: transparent; + } + + #window { + margin-left: 6px; + color: #${config.colorScheme.palette.base04}; + } + ''; }; }; } diff --git a/modules/waybar/wireplumber.nix b/modules/waybar/wireplumber.nix index d33c61e..57a99e7 100644 --- a/modules/waybar/wireplumber.nix +++ b/modules/waybar/wireplumber.nix @@ -10,11 +10,22 @@ in }; }; config = lib.mkIf config.modules.waybar.enabled.${name}.enable { - programs.waybar.settings.mainBar."${name}" = { - format = "{volume}% {icon}"; - format-muted = ""; - on-click = "helvum"; - format-icons = [ "" "" "" ]; + programs.waybar = { + settings.mainBar."${name}" = { + format = "{volume}% {icon}"; + format-muted = ""; + on-click = "helvum"; + format-icons = [ "" "" "" ]; + }; + style = '' + #wireplumber { + color: #${config.colorScheme.palette.base04}; + margin: 0px 2px; + padding: 0 15px; + border-radius: 999px; + box-shadow: inset 0 0 0 1px #${config.colorScheme.palette.base01}; + } + ''; }; }; } diff --git a/modules/waybar/workspaces.nix b/modules/waybar/workspaces.nix index 79f3713..2f5efd7 100644 --- a/modules/waybar/workspaces.nix +++ b/modules/waybar/workspaces.nix @@ -3,15 +3,51 @@ let name = "hyprland/workspaces"; in { - options.modules.waybar.modules = import ./addname.nix lib name; - options.modules.waybar.enabled.${name} = { - enable = lib.mkEnableOption "enable ${name} waybar module"; + options.modules.waybar = { + modules = import ./addname.nix lib name; + enabled.${name} = { + enable = lib.mkEnableOption "enable ${name} waybar module"; + }; }; config = lib.mkIf config.modules.waybar.enabled.${name}.enable { - programs.waybar.settings.mainBar."${name}" = { - format = "{name}"; - on-click = "activate"; - sort-by = "id"; + programs.waybar = { + settings.mainBar."${name}" = { + format = "{name}"; + on-click = "activate"; + sort-by = "id"; + }; + style = '' + #workspaces button { + transition: all 0.2s; + padding: 3px 3px 3px 5px; + margin: 3px; + min-width: 15px; + min-height: 15px; + background-color: transparent; + color: #${config.colorScheme.palette.base04}; + border-radius: 999px; + } + + #workspaces button:hover { + background-color: #${config.colorScheme.palette.base17}; + } + + #workspaces button.active { + font-weight: bold; + background-color: #${config.colorScheme.palette.base0E}; + } + + #workspaces button.urgent { + background-color: #${config.colorScheme.palette.base08}; + } + + #workspaces { + margin: 0 4px; + padding: 4px 4px; + border-radius: 999px; + box-shadow: inset 0px 0px 0 1px #${config.colorScheme.palette.base01}; + } + ''; }; }; }