diff --git a/modules/home/hyprland/waybar/config.json b/modules/home/hyprland/waybar/config.json index 4da5fac..5a4e949 100644 --- a/modules/home/hyprland/waybar/config.json +++ b/modules/home/hyprland/waybar/config.json @@ -4,7 +4,7 @@ "mode": "dock", "exclusive": true, "passtrough": true, - "height": 20, + "height": 16, "modules-left": [ "hyprland/workspaces" @@ -14,8 +14,24 @@ "modules-right": ["idle_inhibitor", "disk", "cpu", "memory", "pulseaudio", "battery", "clock", "tray"], - "hyprland/window": { - "format": "{}" + "hyprland/workspaces": { + "on-scroll-up": "hyprctl dispatch workspace m+1", + "on-scroll-down": "hyprctl dispatch workspace m-1", + "all-outputs": false, + "on-click": "activate", + "format": "{icon}", + "format-icons": { + "1": "1", + "2": "2", + "3": "3", + "4": "4", + "5": "5", + "6": "6", + "7": "7", + "8": "8", + "9": "9", + "10": "10" + } }, "idle_inhibitor": { @@ -25,6 +41,7 @@ "deactivated": "" } }, + "disk": { "interval": 30, "format": "Free: {percentage_free}% ({free})", @@ -32,44 +49,14 @@ "unit": "GB" }, - "hyprland/workspaces": { - "on-scroll-up": "hyprctl dispatch workspace m+1", - "on-scroll-down": "hyprctl dispatch workspace m-1", - "all-outputs": false, - "on-click": "activate", - "format": "{icon}", - "format-icons": { - "1": "1", - "2": "2", - "3": "3", - "4": "4", - "5": "5", - "6": "6", - "7": "7", - "8": "8", - "9": "9", - "10": "10" - } - }, "cpu": { "format": " {usage}%" }, + "memory": { "format": " {}%" }, - "tray": { - "icon-size": 20, - "tooltip": false, - "spacing": 10 - }, - - "clock": { - "tooltip-format": "{calendar}", - "format": "{:%a %d.%m %H:%M:%S}", - "interval": 1 - }, - "pulseaudio": { "format": "{icon} {volume}%", "format-muted": "󰝟", @@ -77,7 +64,7 @@ "headphone": "", "default": ["", "", ""] }, - "scroll-step": 5.0, + "scroll-step": 5.0, "max-volume": 200, "on-click": "pulseaudio-popup", "on-click-right": "wpctl set-mute @DEFAULT_AUDIO_SINK@ toggle" @@ -93,5 +80,17 @@ "format-plugged": " {capacity}% ({time})", "format-full": "{icon} ", "format-icons": ["", "", "", "", ""] + }, + + "clock": { + "tooltip-format": "{calendar}", + "format": "{:%a %d.%m %H:%M:%S}", + "interval": 1 + }, + + "tray": { + "icon-size": 20, + "tooltip": false, + "spacing": 10 } } diff --git a/modules/home/hyprland/waybar/default.nix b/modules/home/hyprland/waybar/default.nix index ecf932c..48a3e2b 100644 --- a/modules/home/hyprland/waybar/default.nix +++ b/modules/home/hyprland/waybar/default.nix @@ -24,200 +24,26 @@ in enable = true; systemd.enable = true; settings.mainBar = builtins.fromJSON (builtins.readFile ./config.json); - style = '' - * { - /* `otf-font-awesome` is required to be installed for icons */ - font-family: JetBrainsMono Nerd Font; - font-size: 16px; - } - - #clock, - #custom-notification, - #custom-launcher, - #custom-power-menu, - /*#custom-colorpicker,*/ - #custom-window, - #memory, - #disk, - #network, - #battery, - #custom-spotify, - #pulseaudio, - #window, - #idle_inhibitor, - #cpu, - #tray { - padding: 0 15px; - border-radius: 12px; - background: #${palette.base00}; - color: #${palette.base07}; - margin-top: 0px; - margin-bottom: 0px; - margin-right: 2px; - margin-left: 2px; - transition: all 0.3s ease; - } - - #window { - background-color: transparent; - box-shadow: none; - } - - window#waybar { - background-color: rgba(0, 0, 0, 0.096); - border-radius: 17px; - } - - window * { - background-color: transparent; - border-radius: 0px; - } - - #workspaces button label { - color: #${palette.base07}; - } - - #workspaces button.active label { - color: #${palette.base00}; - font-weight: bolder; - } - - #workspaces button:hover { - box-shadow: #${palette.base07} 0 0 0 1.5px; - background-color: #${palette.base00}; - min-width: 50px; - } - - #workspaces { - background-color: transparent; - border-radius: 17px; - padding: 0 0px; - margin-top: 2px; - margin-bottom: 2px; - } - - #workspaces button { - background-color: #${palette.base00}; - border-radius: 12px; - margin-left: 4px; - - transition: all 0.3s ease; - } - - #workspaces button.active { - min-width: 50px; - box-shadow: rgba(0, 0, 0, 0.288) 2 2 5 2px; - background-color: #${palette.base0F}; - background-size: 400% 400%; - transition: all 0.3s ease; - background: linear-gradient( - 58deg, - #${palette.base0E}, - #${palette.base0E}, - #${palette.base0E}, - #${palette.base0D}, - #${palette.base0D}, - #${palette.base0E}, - #${palette.base08} - ); - background-size: 300% 300%; - animation: colored-gradient 20s ease infinite; - } - - @keyframes colored-gradient { - 0% { - background-position: 71% 0%; - } - 50% { - background-position: 30% 100%; - } - 100% { - background-position: 71% 0%; - } - } - - #custom-power-menu { - margin-right: 10px; - padding-left: 12px; - padding-right: 15px; - padding-top: 3px; - } - - #custom-spotify { - margin-left: 5px; - padding-left: 15px; - padding-right: 15px; - padding-top: 3px; - color: #${palette.base07}; - background-color: #${palette.base00}; - transition: all 0.3s ease; - } - - #custom-spotify.playing { - color: rgb(180, 190, 254); - background: rgba(30, 30, 46, 0.6); - background: linear-gradient( - 90deg, - #${palette.base02}, - #${palette.base00}, - #${palette.base00}, - #${palette.base00}, - #${palette.base00}, - #${palette.base02} - ); - background-size: 400% 100%; - animation: grey-gradient 3s linear infinite; - transition: all 0.3s ease; - } - - @keyframes grey-gradient { - 0% { - background-position: 100% 50%; - } - 100% { - background-position: -33% 50%; - } - } - - #tray menu { - color: #${palette.base07}; - background-color: #${palette.base00}; - opacity: 1.0; - } - - #battery.warning { - color: #${palette.base08}; - } - - #pulseaudio.muted { - color: #${palette.base08}; - padding-right: 16px; - } - - #custom-notification.collapsed, - #custom-notification.waiting_done { - min-width: 12px; - padding-right: 17px; - } - - #custom-notification.waiting_start, - #custom-notification.expanded { - background-color: transparent; - background: linear-gradient( - 90deg, - #${palette.base02}, - #${palette.base00}, - #${palette.base00}, - #${palette.base00}, - #${palette.base00}, - #${palette.base02} - ); - background-size: 400% 100%; - animation: grey-gradient 3s linear infinite; - min-width: 500px; - border-radius: 17px; - } - ''; }; + + xdg.configFile."waybar/style.css".source = ./style.css; + xdg.configFile."waybar/theme.css".text = '' + /* + bg - background + fg - foreground + */ + + /* Main Colors */ + @define-color background #${palette.base00}; + @define-color foreground #${palette.base05}; + + /* Workspace Button Colors */ + @define-color hover-bg #${palette.base01}; + @define-color hover-fg #${palette.base05}; + @define-color active-bg #${palette.base02}; + @define-color active-fg #${palette.base08}; + @define-color urgent-bg #${palette.base08}; + @define-color urgent-fg #${palette.base00}; + ''; }; } diff --git a/modules/home/hyprland/waybar/style.css b/modules/home/hyprland/waybar/style.css new file mode 100644 index 0000000..7470138 --- /dev/null +++ b/modules/home/hyprland/waybar/style.css @@ -0,0 +1,94 @@ +* { + /* `otf-font-awesome` is required to be installed for icons */ + font-family: JetBrainsMono Nerd Font; + font-size: 16px; +} + +/* This imports the base16 colors */ +@import "theme.css"; + +/* Main Background */ +window#waybar { background: @background; } + +/* Tooltip Styling */ +tooltip { + color: @foreground; + background: @background; + border: solid; + border-width: 1.5px; + border-radius: 7px; + border-color: white; +} + +/* Workspace Button */ +#workspaces button { + color: @foreground; + border-radius: 5px; + box-shadow: none; + margin-top: 2px; + margin-bottom: 2px; + margin-left: 0px; + margin-right: 0px; + padding: 0px; + padding-right: 2px; + padding-left: 2px; +} + +/* Opened workspaces (also on other screen) */ +#workspaces button.visible{ + color: @active-fg; + background: @hover-bg; + box-shadow: none; +} + +/* Active Workspace Button */ +#workspaces button.active { + color: @active-fg; + background: @active-bg; + box-shadow: 0px 0px 2px 1px rgba(0, 0, 0, 1); + margin-right: 2px; + margin-left: 2px; + padding-right: 6px; + padding-left: 6px; + transition: all 0.4s cubic-bezier(.55,-0.68,.48,1.682); +} + +/* Hover Effect for Workspace Buttons */ +#workspaces button.inactive:hover { + color: @hover-fg; + background: @hover-bg; + box-shadow: none; +} + +/* Urgent Workspace Buttons */ +#workspaces button.urgent { + color: @urgent-fg; + background: @urgent-bg; + box-shadow: none; +} + +/* General Module Styling */ +#idle_inhibitor, +#disk, +#cpu, +#memory, +#pulseaudio, +#battery, +#clock, +#tray { + color: @foreground; + padding: 0 10px; + margin-top: 0px; + margin-bottom: 0px; + margin-right: 2px; + margin-left: 2px; +} + +/* #battery.warning { */ +/* color: #${palette.base08}; */ +/* } */ + +/* #pulseaudio.muted { */ +/* color: #${palette.base08}; */ +/* padding-right: 16px; */ +/* } */