From 24b3d6c9ce379ff43066b38834ae4fd4ae765b97 Mon Sep 17 00:00:00 2001 From: nomadics9 Date: Sat, 26 Oct 2024 20:21:56 +0300 Subject: [PATCH] waybar css code clean --- home/features/desktop/hyprland.nix | 6 +- home/features/desktop/wayland.nix | 530 ++++++++--------------------- 2 files changed, 141 insertions(+), 395 deletions(-) diff --git a/home/features/desktop/hyprland.nix b/home/features/desktop/hyprland.nix index b75a307..2c1e6c4 100644 --- a/home/features/desktop/hyprland.nix +++ b/home/features/desktop/hyprland.nix @@ -58,8 +58,10 @@ in general = { gaps_in = 5; gaps_out = 5; - border_size = 1; - "col.active_border" = "rgba(02BEF5ee) rgba(02BEF5ee) 45deg"; + border_size = 2; + #"col.active_border" = "rgba(02BEF5ee) rgba(02BEF5ee) 45deg"; + # "col.active_border" = "rgba(0dcaf5ee) rgba(0dcaf5ee) 45deg"; + "col.active_border" = "rgba(5faaffee) rgba(5faaffee) 45deg"; "col.inactive_border" = "rgba(595959aa)"; layout = "dwindle"; }; diff --git a/home/features/desktop/wayland.nix b/home/features/desktop/wayland.nix index e381a7d..38e527e 100644 --- a/home/features/desktop/wayland.nix +++ b/home/features/desktop/wayland.nix @@ -19,14 +19,14 @@ in layer = "top"; modules-left = [ "custom/launcher" "custom/wg" "cpu" "memory" "custom/weather" "hyprland/workspaces" ]; modules-center = [ "mpris" ]; - modules-right = [ "network" "pulseaudio" "backlight" "battery" "clock" "tray" "hyprland/language" "custom/wallpaper" "idle_inhibitor" "custom/refresh-rate" ]; + modules-right = [ "network" "pulseaudio" "backlight" "battery" "tray" "hyprland/language" "custom/wallpaper" "idle_inhibitor" "custom/refresh-rate" "clock" ]; "hyprland/workspaces" = { format = "{name}"; all-outputs = true; on-click = "activate"; format-icons = { - active = " 󱎴"; + active = "󱎴"; default = "󰍹"; }; persistent-workspaces = { @@ -41,17 +41,15 @@ in "9" = [ ]; }; }; + "hyprland/language" = { format = "{short}"; }; - "hyprland/window" = { - max-length = 200; - separate-outputs = true; - }; "tray" = { spacing = 10; }; + "clock" = { format = "{:%H:%M}"; format-alt = "{:%b %d %Y}"; @@ -60,21 +58,17 @@ in "cpu" = { interval = 10; - format = " {}%"; + format = "🤖 {}%"; max-length = 10; - on-click = ""; }; + "memory" = { interval = 30; format = "🧠 {}%"; format-alt = "🧠 {used:0.1f}GB"; max-length = 10; }; - "temperature" = { - interval = 10; - format = " {temperatureC}°C"; - max-length = 10; - }; + "backlight" = { device = "intel_backlight"; format = "{icon}"; @@ -86,6 +80,7 @@ in smooth-scrolling-threshold = "2400"; tooltip-format = "Brightness {percent}%"; }; + "network" = { format-wifi = "{bandwidthDownBytes} {icon}"; min-length = 10; @@ -105,17 +100,6 @@ in on-click = "~/.config/hypr/scripts/wg-toggle.sh"; }; - "bluetooth" = { - format = "{icon}"; - format-alt = "bluetooth: {status}"; - interval = 30; - format-icons = { - enabled = ""; - disabled = "󰂲"; - }; - tooltip-format = "{status}"; - }; - "pulseaudio" = { format = "{icon}"; format-muted = "󰖁"; @@ -134,8 +118,8 @@ in adapter = "ADP0"; interval = 60; states = { - warning = 20; - critical = 15; + warning = 15; + critical = 7; }; max-length = 20; format = "{icon}"; @@ -145,8 +129,9 @@ in format-plugged = "󰚥"; format-notcharging = "󰚥"; format-full = "󰂄"; - - format-alt = "{capacity}% "; + format-alt = "{capacity}%"; + format-alt-warning = "{capacity}%"; + format-critical-alt = "{capacity}%"; format-icons = [ "󱊡" "󱊢" "󱊣" ]; }; @@ -199,375 +184,133 @@ in }; }; }; + + style = '' - * { - /* `otf-font-awesome` is required to be installed for icons */ - font-family: Material Design Icons, JetBrainsMono Nerd Font, Iosevka Nerd Font ; - font-size: 14px; - border: none; - border-radius: 0; - min-height: 0; + + * { + font-family: JetBrains Mono, JetBrainsMono Nerd Font, Material Design Icons; + font-size: 17px; + border: none; + border-radius: 0; + min-height: 0; + } + + window#waybar { + background-color: rgba(26, 27, 38, 0.5); + color: #ffffff; + transition-property: background-color; + transition-duration: 0.5s; + } + + /* General styling for individual modules */ + #clock, + #temperature, + #mpris, + #cpu, + #memory, + #tray, + #workspaces, + #custom-launcher, + #custom-weather, + #custom-wg { + background-color: #222034; + font-size: 14px; + color: #8a909e; + padding: 3px 8px; + border-radius: 8px; + margin: 8px 2px; + } + + /* Styling for Network, Pulseaudio, Backlight, and Battery group */ + #network, + #pulseaudio, + #backlight, + #battery { + background-color: #222034; + font-size: 20px; + padding: 3px 8px; + margin: 8px 0px; + } + + /* Module-specific colors for Network, Pulseaudio, Backlight, Battery */ + #network, #pulseaudio { color: #5796E0; } + #backlight { color: #ecd3a0; } + #battery { + color: #8fbcbb; + padding-right: 14px + } + + /* Battery state-specific colors */ + #battery.warning { color: #ecd3a0; } + #battery.critical:not(.charging) { color: #fb958b; } + + /* Pulseaudio mute state */ + #pulseaudio.muted { color: #fb958b; } + + /* Styling for Language, Custom Wallpaper, Idle Inhibitor, Custom Refresh Rate group */ + #language, + #custom-refresh-rate, + #custom-wallpaper, + #idle_inhibitor { + background-color: #222034; + color: #8a909e; + padding: 3px 4px; + margin: 8px 0px; + } + + /* Rounded corners for specific group elements */ + #language { border-radius: 8px 0 0 8px; } + #custom-refresh-rate { border-radius: 0 8px 8px 0; } + #network { border-radius: 8px 0 0 8px; } + #battery { border-radius: 0 8px 8px 0; } + + /* Temperature, CPU, and Memory colors */ + #temperature { color: #5796E0; } + #cpu { color: #fb958b; } + #memory { color: #a1c999; } + + /* Workspaces active button styling */ + #workspaces button { + color: #5796E0; + border-radius: 8px; + box-shadow: inset 0 -3px transparent; + padding: 3px 4px; + transition: all 0.5s cubic-bezier(0.55, -0.68, 0.48, 1.68); + } + #workspaces button.active { + color: #ecd3a0; + font-weight: bold; + border-radius: 8px; + transition: all 0.5s cubic-bezier(0.55, -0.68, 0.48, 1.68); + } + + #idle_inhibitor.activated { + background-color: #ecf0f1; + color: #2d3436; + border-radius: 8px; + } + + /* Custom launcher */ + #custom-launcher { + color: #5796E0; + font-size: 22px; + padding-right: 14px; + } + + /* Tooltip styling */ + tooltip { + border-radius: 15px; + padding: 15px; + background-color: #222034; + } + tooltip label { + padding: 5px; + font-size: 14px; } - window#waybar { - background-color: rgba(26, 27, 38, 0.5); - color: #ffffff; - transition-property: background-color; - transition-duration: 0.5s; - } + ''; - window#waybar.hidden { - opacity: 0.1; - } - - #window { - color: #64727d; - } - - #clock, - #temperature, - #mpris, - #cpu, - #memory, - #custom-media, - #tray, - #mode, - #custom-lock, - #workspaces, - #custom-launcher, - #custom-spotify, - #custom-weather, - #custom-wg, - #custom-weather.severe, - #custom-weather.sunnyDay, - #custom-weather.clearNight, - #custom-weather.cloudyFoggyDay, - #custom-weather.cloudyFoggyNight, - #custom-weather.rainyDay, - #custom-weather.rainyNight, - #custom-weather.showyIcyDay, - #custom-weather.snowyIcyNight, - #custom-weather.default { - color: #e5e5e5; - border-radius: 6px; - padding: 2px 10px; - background-color: #222034; - border-radius: 8px; - font-size: 14px; - - margin-left: 4px; - margin-right: 4px; - - margin-top: 8.5px; - margin-bottom: 8.5px; - } - #temperature{ - color: #7a95c9; - } - #cpu { - color: #fb958b; - } - - #memory { - color: #a1c999; - } - - #workspaces button { - color: #7a95c9; - box-shadow: inset 0 -3px transparent; - - padding-right: 3px; - padding-left: 4px; - - margin-left: 0.1em; - margin-right: 0em; - transition: all 0.5s cubic-bezier(0.55, -0.68, 0.48, 1.68); - } - - #workspaces button.active { - color: #ecd3a0; - padding-left: 1px; - padding-right: 5px; - font-family: Iosevka Nerd Font; - font-weight: bold; - font-size: 12px; - margin-left: 0em; - margin-right: 0em; - transition: all 0.5s cubic-bezier(0.55, -0.68, 0.48, 1.68); - } - - /* If workspaces is the leftmost module, omit left margin */ - .modules-left > widget:first-child > #workspaces { - margin-left: 0; - } - - /* If workspaces is the rightmost module, omit right margin */ - .modules-right > widget:last-child > #workspaces { - margin-right: 0; - } - - #custom-launcher { - margin-left: 12px; - - padding-right: 18px; - padding-left: 14px; - - font-size: 22px; - - color: #7a95c9; - - margin-top: 8.5px; - margin-bottom: 8.5px; - } - #bluetooth, - #backlight, - #battery, - #pulseaudio, - #network { - background-color: #222034; - padding: 0em 2em; - - font-size: 14px; - - padding-left: 7.5px; - padding-right: 7.5px; - - padding-top: 3px; - padding-bottom: 3px; - - margin-top: 7px; - margin-bottom: 7px; - - font-size: 20px; - } - - #pulseaudio { - color: #81A1C1; - padding-left: 9px; - font-size: 22px; - } - - #pulseaudio.muted { - color: #fb958b; - padding-left: 9px; - font-size: 22px; - } - - #backlight { - color: #ecd3a0; - padding-right: 5px; - padding-left: 8px; - font-size: 21.2px; - } - - #network { - padding-left: 0.2em; - color: #5E81AC; - border-radius: 8px 0px 0px 8px; - padding-left: 14px; - padding-right: 14px; - font-size: 20px; - } - - #network.disconnected { - color: #fb958b; - } - - #bluetooth { - padding-left: 0.2em; - color: #5E81AC; - border-radius: 8px 0px 0px 8px; - padding-left: 14px; - padding-right: 14px; - font-size: 20px; - } - - #bluetooth.disconnected { - color: #fb958b; - } - - - #battery { - color: #8fbcbb; - border-radius: 0px 8px 8px 0px; - padding-right: 12px; - padding-left: 12px; - font-size: 22px; - } - - #battery.critical, - #battery.warning, - #battery.full, - #battery.plugged { - color: #8fbcbb; - padding-left: 12px; - padding-right: 12px; - font-size: 22px; - } - - #battery.charging { - font-size: 18px; - padding-right: 12px; - padding-left: 12px; - } - - #battery.full, - #battery.plugged { - font-size: 22.5px; - padding-right: 12px; - } - - @keyframes blink { - to { - background-color: rgba(30, 34, 42, 0.5); - color: #abb2bf; - } - } - - #battery.warning { - color: #ecd3a0; - } - - #battery.critical:not(.charging) { - color: #fb958b; - } - - #custom-lock { - color: #ecd3a0; - padding: 0 15px 0 15px; - margin-left: 7px; - margin-top: 7px; - margin-bottom: 7px; - } - #clock { - color: #8a909e; - font-family: Iosevka Nerd Font; - font-weight: bold; - margin-top: 7px; - margin-bottom: 7px; - } - - #language, - #custom-refresh-rate, - #custom-wallpaper, - #idle_inhibitor { - background-color: #222034; - color: #8a909e; - font-family: JetBrains Mono Nerd Font; - font-weight: bold; - font-size: 17px; - padding: 0 7px; /* Adjust padding here */ - margin-top: 7px; - margin-bottom: 7px; - padding-top: 3px; - padding-bottom: 3px; -} - -#language { - border-radius: 8px 0 0 8px; /* Rounded on the left */ -} - -#custom-refresh-rate { - border-radius: 0 8px 8px 0; /* Rounded on the right */ - margin-right: 12px; -} - -#custom-wallpaper, -#idle_inhibitor { - /* No border-radius here to avoid separation */ - padding-left: 7px; - padding-right: 7px; -} - -/* Remove additional borders/margins that might cause separation */ -#idle_inhibitor, -#custom-wallpaper { - margin-left: 0; /* Reset margin */ - margin-right: 0; /* Reset margin */ - margin-top: 7px; /* Reset margin */ - margin-bottom: 7px; /* Reset margin */ -} - - tooltip { - font-family: Iosevka Nerd Font; - border-radius: 15px; - padding: 15px; - background-color: #1f232b; - } - - tooltip label { - font-family: Iosevka Nerd Font; - padding: 5px; - } - - label:focus { - background-color: #1f232b; - } - - #tray { - margin-right: 8px; - margin-top: 7px; - margin-bottom: 7px; - font-size: 30px; - - } - - #tray > .passive { - -gtk-icon-effect: dim; - } - - #tray > .needs-attention { - -gtk-icon-effect: highlight; - background-color: #eb4d4b; - } - - #idle_inhibitor.activated { - background-color: #ecf0f1; - color: #2d3436; - border-radius: 8px - } - #mpris, - #custom-spotify { - color: #abb2bf; - } - - #custom-weather { - font-family: Iosevka Nerd Font; - font-size: 14px; - color: #8a909e; - } - - #custom-weather.severe { - color: #eb937d; - } - - #custom-weather.sunnyDay { - color: #c2ca76; - } - - #custom-weather.clearNight { - color: #cad3f5; - } - - #custom-weather.cloudyFoggyDay, - #custom-weather.cloudyFoggyNight { - color: #c2ddda; - } - - #custom-weather.rainyDay, - #custom-weather.rainyNight { - color: #5aaca5; - } - - #custom-weather.showyIcyDay, - #custom-weather.snowyIcyNight { - color: #d6e7e5; - } - - #custom-weather.default { - color: #dbd9d8; - } - ''; }; home.packages = with pkgs; [ @@ -616,3 +359,4 @@ in ]; }; } +