From: Andre Ramnitz Date: Sun, 25 Aug 2024 13:37:07 +0000 (+0200) Subject: waybar: more simplistic look X-Git-Tag: v0.2~128 X-Git-Url: https://git.ramnitz.eu/?a=commitdiff_plain;h=3c1a2513c75a1c76c0814b0b1270d0436ee1ceba;p=dotfiles.git waybar: more simplistic look --- diff --git a/config/waybar/config.jsonc b/config/waybar/config.jsonc index d101201a..d9318822 100644 --- a/config/waybar/config.jsonc +++ b/config/waybar/config.jsonc @@ -2,21 +2,21 @@ { "layer": "top", // Waybar at top layer "position": "top", // Waybar position (top|bottom|left|right) - //"width": 3440, // Waybar width - "height": 33, // Waybar height, leave blank for auto + "width": 3440, // Waybar width + "height": 32, // Waybar height, leave blank for auto "spacing": 1, // Gaps between modules (4px) "modules-left": ["custom/launcher", "hyprland/workspaces", "mpd"], "modules-center": ["hyprland/window"], "modules-right": [ - "tray", - "custom/notification", + "tray", "custom/pipespacer", "cpu", - "memory", - "group/temps", - "group/gammarelay", - "group/system", - "pulseaudio", + "memory", "custom/pipespacer", + "group/temps", "custom/pipespacer", + "group/gammarelay", "custom/pipespacer", + "pulseaudio", "custom/pipespacer", + "idle_inhibitor", "custom/pipespacer", "clock", + "custom/notification", ], // Modules configuration @@ -254,14 +254,14 @@ "tooltip": false, "format": "{icon}", "format-icons": { - "notification": "", - "none": "  ", + "notification": "", + "none": "", "dnd-notification": "", - "dnd-none": "  ", + "dnd-none": "", "inhibited-notification": "", - "inhibited-none": "  ", + "inhibited-none": "", "dnd-inhibited-notification": "", - "dnd-inhibited-none": "  ", + "dnd-inhibited-none": "", }, "return-type": "json", "exec-if": "pidof swaync-client", @@ -272,7 +272,7 @@ }, "idle_inhibitor": { - "format": " {icon} ", + "format": "{icon}", "format-icons": { "activated": "", "deactivated": "", @@ -362,4 +362,9 @@ "temperature#gpu", ], }, + "custom/pipespacer": { + "format": "|", + "max-length": 3, + "tooltip": false, + }, } diff --git a/config/waybar/laststyle-20240825.css b/config/waybar/laststyle-20240825.css new file mode 100644 index 00000000..bc0ad867 --- /dev/null +++ b/config/waybar/laststyle-20240825.css @@ -0,0 +1,347 @@ +/* ----------------------------------- import ----------------------------------- */ +@import "../colors/colorscheme.css"; + +/* ----------------------------------- window ----------------------------------- */ +* { + font-family: "Iosevka Nerd Font Propo"; + font-size: 13pt; + min-height: 0px; + font-weight: 500; + font-stretch: expanded; + padding: 0; + margin: 0; +} + +/* ----------------------------------- waybar ----------------------------------- */ +#waybar { + border-radius: 2px; + border-top: 1px @border; + border-bottom: 1px @border; + border-left: 1px @border; + border-right: 1px @border; + color: @ws; +} + +#waybar>box { + padding-left: 12px; + padding-right: 12px; +} + + +tooltip { + background: @bs; + border: 1px @border; + border-radius: 0; +} +tooltip label { + color: @text; +} + +/* ------------------------------------ modules left ------------------------------- */ +#custom-launcher { + border-radius: 8px; + padding-left: 10px; + padding-right: 10px; + margin-top: 4px; + margin-left: 1px; + margin-right: 1px; + margin-bottom: 5px; + color: @bs; + background: @yellow; + border: 1px solid alpha(@border, 0.5); + font-size: 14pt; +} + +#workspaces { + border-radius: 8px; + padding-left: 12px; + padding-right: 12px; + margin-top: 4px; + margin-left: 1px; + margin-right: 1px; + margin-bottom: 5px; + background-color: alpha(@ral9023,0.3); + font-size: 13pt; +} + +#workspaces button { + border-radius: 8px; + background: @ral9023; + color: @bt5; + border: 0px solid @ral9022; + padding-left: 8px; + padding-right: 8px; + margin-top: 4px; + margin-left: 1px; + margin-right: 1px; + margin-bottom: 5px; + transition: all 0.3s ease; + font-weight: 500; +} + +#workspaces button:hover { + border-radius: 8px; + box-shadow: inherit; + text-shadow: inherit; + color: @bs; + opacity: 0.8; + background: @orange; + border: 0px solid @ral9022; + transition: all 0.3s ease; +} + +#workspaces button.focused, +#workspaces button.active { + border-radius: 8px; + background: @orange; + border: 0px solid @ral9022; + color: @bs; + transition: all 0.3s ease; + animation: colored-gradient 10s ease infinite; +} + +#workspaces button.urgent { + border-radius: 8px; + background: @red; + border: 0px solid @ral9022; + color: @bs; + transition: all 0.3s ease; +} + +#mpd { + border-radius: 8px; + padding-left: 8px; + padding-right: 8px; + margin-top: 4px; + margin-left: 0px; + margin-right: 0px; + margin-bottom: 5px; + color: @ws; + background-color: alpha(@cyan, 0.3); + border: 1px solid alpha(@border, 0.5); +} + +#mpris { + border-radius: 8px; + padding-left: 8px; + padding-right: 8px; + margin-top: 4px; + margin-left: 0px; + margin-right: 0px; + margin-bottom: 5px; + color: @ws; + background-color: alpha(@ral9023, 0.3); + border: 1px solid alpha(@border, 0.5); +} + +/* ------------------------------------ modules center ----------------------------- */ +#window { + border-radius: 8px; + padding-left: 8px; + padding-right: 8px; + margin-top: 4px; + margin-left: 0px; + margin-right: 0px; + margin-bottom: 5px; + color: @ws; + background-color: alpha(@ral9023, 0.3); + border: 1px solid alpha(@border, 0.5); +} + +window#waybar { + border-left: 1px solid @ral9023; + border-right: 1px solid @ral9023; + border-bottom: 1px solid @ral9023; + color: @wt9; + background-color: @ral9017; + transition-property: background-color; + transition-duration: 0.5s; + background-image: url("/home/andy/dotfiles/config/waybar/textures/D.png"); + background-position: topleft; + background-repeat: repeat-x; +} + +window#waybar.footclient { + background: rgba(36, 36, 36, 0.95); + border-left: 1px transparent; + border-right: 1px transparent; + border-bottom: 1px transparent; +} + +window#waybar.empty { + border-left: 1px transparent; + border-right: 1px transparent; + border-bottom: 1px transparent; +} + +/* ------------------------------------ modules right ------------------------------ */ +#tray { + border-radius: 8px; + padding-left: 8px; + padding-right: 8px; + margin-top: 4px; + margin-left: 0px; + margin-right: 0px; + margin-bottom: 5px; + color: @ws; + background-color: alpha(@ral9023,0.3); + border: 1px solid alpha(@border, 0.5); +} + +#pulseaudio { + border-radius: 8px; + padding-left: 8px; + padding-right: 8px; + margin-top: 4px; + margin-left: 0px; + margin-right: 0px; + margin-bottom: 5px; + color: @ws; + background-color: alpha(@yellow, 0.3); + border: 1px solid alpha(@border, 0.5); + font-weight: 600; + font-size: 13pt; +} + +#mpd#volume { + border-radius: 8px; + padding-left: 0px; + color: @wt8; + background: @ral9017; + padding-right: 4px; +} + +#cpu { + border-radius: 8px; + padding-left: 8px; + padding-right: 8px; + margin-top: 4px; + margin-left: 0px; + margin-right: 0px; + margin-bottom: 5px; + color: @ws; + background-color: alpha(@blue, 0.3); + border: 1px solid alpha(@border, 0.5); + font-weight: 600; + font-size: 13pt; +} +#memory { + border-radius: 8px; + padding-left: 8px; + padding-right: 8px; + margin-top: 4px; + margin-left: 0px; + margin-right: 0px; + margin-bottom: 5px; + color: @ws; + background-color: alpha(@cyan, 0.3); + border: 1px solid alpha(@border, 0.5); + font-weight: 600; + font-size: 13pt; +} + +#clock { + border-radius: 8px; + padding-left: 8px; + padding-right: 8px; + margin-top: 4px; + margin-left: 0px; + margin-right: 0px; + margin-bottom: 5px; + color: @ws; + background-color: alpha(@ral9023, 0.3); + border: 1px solid alpha(@border, 0.5); + font-weight: 600; + font-size: 13pt; +} + +#custom-notification { + border-radius: 8px; + padding-left: 10px; + padding-right: 10px; + margin-top: 4px; + margin-left: 1px; + margin-right: 1px; + margin-bottom: 5px; + color: @bs; + background-color: @cyan; + border: 1px solid alpha(@border, 0.5); + font-size: 14pt; +} + +#temperature, +#temperature#cpu, +#temperature#chipset, +#temperature#vrm, +#temperature#gpu { + border-radius: 8px; + padding-left: 8px; + padding-right: 8px; + margin-top: 4px; + margin-left: 0px; + margin-right: 0px; + margin-bottom: 5px; + color: @ws; + background-color: alpha(@orange, 0.3); + border: 1px solid alpha(@border, 0.5); +} + +#temperature.critical, +#temperature#cpu.critical, +#temperature#chipset.critical, +#temperature#vrm.critical, +#temperature#gpu.critical { + border-radius: 8px; + padding-left: 8px; + padding-right: 8px; + margin-top: 4px; + margin-left: 0px; + margin-right: 0px; + margin-bottom: 5px; + color: @ws; + background-color: alpha(@green, 0.3); + border: 1px solid alpha(@border, 0.5); +} + +#custom-gammarelay-temperature, +#custom-gammarelay-gamma, +#custom-gammarelay-brightness { + border-radius: 8px; + padding-left: 8px; + padding-right: 8px; + margin-top: 4px; + margin-left: 0px; + margin-right: 0px; + margin-bottom: 5px; + color: @ws; + background-color: alpha(@orange, 0.3); + border: 1px solid alpha(@border, 0.5); +} + +#idle_inhibitor, +#custom-wallpaper { + border-radius: 8px; + padding-left: 8px; + padding-right: 8px; + margin-top: 4px; + margin-left: 0px; + margin-right: 0px; + margin-bottom: 5px; + color: @ws; + background-color: alpha(@yellow, 0.3); + border: 1px solid alpha(@border, 0.5); +} + +#custom-powermenu { + border-radius: 8px; + padding-left: 8px; + padding-right: 8px; + margin-top: 4px; + margin-left: 0px; + margin-right: 0px; + margin-bottom: 5px; + color: @yellow; + background-color: alpha(@yellow, 0.3); + border: 1px solid alpha(@border, 0.5); +} + diff --git a/config/waybar/style.css b/config/waybar/style.css index 9bc02158..b15e3e1f 100644 --- a/config/waybar/style.css +++ b/config/waybar/style.css @@ -4,7 +4,7 @@ /* ----------------------------------- window ----------------------------------- */ * { font-family: "Iosevka Nerd Font Propo"; - font-size: 13pt; + font-size: 12pt; min-height: 0px; font-weight: 500; font-stretch: expanded; @@ -14,86 +14,90 @@ /* ----------------------------------- waybar ----------------------------------- */ #waybar { - border-radius: 2px; + border-radius: 0px 0px 8px 8px; border-top: 1px @border; border-bottom: 1px @border; border-left: 1px @border; border-right: 1px @border; color: @ws; + background-color: transparent; } #waybar>box { - padding-left: 12px; - padding-right: 12px; + padding-left: 4px; + padding-right: 4px; + background: none; } - tooltip { background: @bs; border: 1px @border; - border-radius: 0; + border-radius: 4px; } tooltip label { + padding: 8px; color: @text; + font-size: 15pt; } /* ------------------------------------ modules left ------------------------------- */ #custom-launcher { - border-radius: 8px; padding-left: 10px; padding-right: 10px; - margin-top: 5px; + margin-top: 2px; margin-left: 1px; margin-right: 1px; - margin-bottom: 7px; + margin-bottom: 3px; color: @bs; background: @yellow; border: 1px solid alpha(@border, 0.5); + border-radius: 2px 8px 2px 8px; font-size: 14pt; } #workspaces { - border-radius: 8px; + border-radius: 0px; padding-left: 12px; padding-right: 12px; - margin-top: 5px; + margin-top: 2px; margin-left: 1px; margin-right: 1px; - margin-bottom: 7px; + margin-bottom: 2px; background-color: alpha(@ral9023,0.3); font-size: 13pt; + background: none; } #workspaces button { - border-radius: 8px; + border-radius: 12px; background: @ral9023; color: @bt5; border: 0px solid @ral9022; padding-left: 8px; padding-right: 8px; - margin-top: 5px; + margin-top: 1px; margin-left: 1px; margin-right: 1px; - margin-bottom: 7px; + margin-bottom: 2px; transition: all 0.3s ease; font-weight: 500; } #workspaces button:hover { - border-radius: 8px; + border-radius: 12px; box-shadow: inherit; text-shadow: inherit; color: @bs; opacity: 0.8; - background: @orange; + background: @cyan; border: 0px solid @ral9022; transition: all 0.3s ease; } #workspaces button.focused, #workspaces button.active { - border-radius: 8px; - background: @orange; + border-radius: 12px; + background: @cyan; border: 0px solid @ral9022; color: @bs; transition: all 0.3s ease; @@ -109,164 +113,113 @@ tooltip label { } #mpd { - border-radius: 8px; + border-radius: 0px; padding-left: 8px; padding-right: 8px; - margin-top: 5px; - margin-left: 0px; - margin-right: 0px; - margin-bottom: 7px; - color: @ws; + margin-top: 2px; + margin-left: 1px; + margin-right: 1px; + margin-bottom: 2px; + color: @cyan; background-color: alpha(@cyan, 0.3); border: 1px solid alpha(@border, 0.5); + background: none; + border: none; } #mpris { - border-radius: 8px; padding-left: 8px; padding-right: 8px; - margin-top: 5px; - margin-left: 0px; - margin-right: 0px; - margin-bottom: 7px; - color: @ws; + color: @ral9023; background-color: alpha(@ral9023, 0.3); - border: 1px solid alpha(@border, 0.5); + background: none; + border: none; } /* ------------------------------------ modules center ----------------------------- */ #window { - border-radius: 8px; - padding-left: 8px; - padding-right: 8px; - margin-top: 5px; - margin-left: 0px; - margin-right: 0px; - margin-bottom: 7px; + border-radius: 0px; color: @ws; background-color: alpha(@ral9023, 0.3); border: 1px solid alpha(@border, 0.5); + background: none; + border: none; } window#waybar { border-left: 1px solid @ral9023; border-right: 1px solid @ral9023; border-bottom: 1px solid @ral9023; - color: @wt9; - background-color: @ral9017; + color: @ws; + /*background-color: alpha(@ral9017, 0.75);*/ transition-property: background-color; transition-duration: 0.5s; - background-image: url("/home/andy/dotfiles/config/waybar/textures/D.png"); + background-image: url("/home/andy/dotfiles/config/waybar/textures/D_0.65.png"); background-position: topleft; background-repeat: repeat-x; } -window#waybar.footclient { - background: rgba(36, 36, 36, 0.95); - border-left: 1px transparent; - border-right: 1px transparent; - border-bottom: 1px transparent; -} - -window#waybar.empty { - border-left: 1px transparent; - border-right: 1px transparent; - border-bottom: 1px transparent; -} /* ------------------------------------ modules right ------------------------------ */ #tray { - border-radius: 8px; padding-left: 8px; padding-right: 8px; - margin-top: 5px; - margin-left: 0px; - margin-right: 0px; - margin-bottom: 7px; - color: @ws; + color: @ral9023; background-color: alpha(@ral9023,0.3); - border: 1px solid alpha(@border, 0.5); + background: none; + border: none; } #pulseaudio { - border-radius: 8px; padding-left: 8px; padding-right: 8px; - margin-top: 5px; - margin-left: 0px; - margin-right: 0px; - margin-bottom: 7px; - color: @ws; + color: @blue; background-color: alpha(@yellow, 0.3); - border: 1px solid alpha(@border, 0.5); font-weight: 600; font-size: 13pt; + background: none; + border: none; } #mpd#volume { - border-radius: 8px; padding-left: 0px; - color: @wt8; + color: @ral9017; background: @ral9017; padding-right: 4px; + background: none; + border: none; } #cpu { - border-radius: 8px; padding-left: 8px; - padding-right: 8px; - margin-top: 5px; - margin-left: 0px; - margin-right: 0px; - margin-bottom: 7px; - color: @ws; - background-color: alpha(@blue, 0.3); - border: 1px solid alpha(@border, 0.5); + padding-right: 4px; + color: @orange; + background-color: alpha(@orange, 0.3); font-weight: 600; font-size: 13pt; + background: none; + border: none; } #memory { - border-radius: 8px; - padding-left: 8px; + padding-left: 4px; padding-right: 8px; - margin-top: 5px; - margin-left: 0px; - margin-right: 0px; - margin-bottom: 7px; - color: @ws; - background-color: alpha(@cyan, 0.3); - border: 1px solid alpha(@border, 0.5); + color: @orange; + background-color: alpha(@orange, 0.3); font-weight: 600; font-size: 13pt; + background: none; + border: none; } #clock { - border-radius: 8px; padding-left: 8px; - padding-right: 8px; - margin-top: 5px; - margin-left: 0px; - margin-right: 0px; - margin-bottom: 7px; + padding-right: 12px; color: @ws; background-color: alpha(@ral9023, 0.3); - border: 1px solid alpha(@border, 0.5); font-weight: 600; font-size: 13pt; -} - -#custom-notification { - border-radius: 8px; - padding-left: 8px; - padding-right: 8px; - margin-top: 5px; - margin-left: 0px; - margin-right: 0px; - margin-bottom: 7px; - color: @ws; - background-color: alpha(@purple, 0.3); - border: 1px solid alpha(@border, 0.5); - font-size: 13pt; + background: none; + border: none; } #temperature, @@ -274,16 +227,12 @@ window#waybar.empty { #temperature#chipset, #temperature#vrm, #temperature#gpu { - border-radius: 8px; padding-left: 8px; padding-right: 8px; - margin-top: 5px; - margin-left: 0px; - margin-right: 0px; - margin-bottom: 7px; - color: @ws; - background-color: alpha(@orange, 0.3); - border: 1px solid alpha(@border, 0.5); + color: @green; + background-color: alpha(@green, 0.3); + background: none; + border: none; } #temperature.critical, @@ -291,56 +240,61 @@ window#waybar.empty { #temperature#chipset.critical, #temperature#vrm.critical, #temperature#gpu.critical { - border-radius: 8px; padding-left: 8px; padding-right: 8px; - margin-top: 5px; - margin-left: 0px; - margin-right: 0px; - margin-bottom: 7px; - color: @ws; - background-color: alpha(@green, 0.3); - border: 1px solid alpha(@border, 0.5); + color: @red; + background-color: alpha(@red, 0.3); + background: none; + border: none; } #custom-gammarelay-temperature, #custom-gammarelay-gamma, #custom-gammarelay-brightness { - border-radius: 8px; padding-left: 8px; padding-right: 8px; - margin-top: 5px; - margin-left: 0px; - margin-right: 0px; - margin-bottom: 7px; - color: @ws; - background-color: alpha(@orange, 0.3); - border: 1px solid alpha(@border, 0.5); + color: @yellow; + background-color: alpha(@yellow, 0.3); + background: none; + border: none; } #idle_inhibitor, #custom-wallpaper { - border-radius: 8px; padding-left: 8px; padding-right: 8px; - margin-top: 5px; - margin-left: 0px; - margin-right: 0px; - margin-bottom: 7px; - color: @ws; - background-color: alpha(@yellow, 0.3); - border: 1px solid alpha(@border, 0.5); + color: @purple; + background-color: alpha(@purple, 0.3); + background: none; + border: none; } #custom-powermenu { - border-radius: 8px; padding-left: 8px; padding-right: 8px; - margin-top: 5px; - margin-left: 0px; - margin-right: 0px; - margin-bottom: 7px; - color: @ws; + color: @yellow; background-color: alpha(@yellow, 0.3); + background: none; + border: none; +} + +#custom-pipespacer { + background: none; + border: none; + color: @ws; +} + +#custom-notification { + padding-left: 10px; + padding-right: 10px; + margin-top: 2px; + margin-left: 1px; + margin-right: 1px; + margin-bottom: 3px; + color: @bs; + background: @yellow; border: 1px solid alpha(@border, 0.5); + border-radius: 8px 2px 8px 2px; + font-size: 14pt; } + diff --git a/config/waybar/textures/D.png b/config/waybar/textures/D.png deleted file mode 100644 index 34af7122..00000000 Binary files a/config/waybar/textures/D.png and /dev/null differ diff --git a/config/waybar/textures/D_0.10.png b/config/waybar/textures/D_0.10.png new file mode 100644 index 00000000..2afe2278 Binary files /dev/null and b/config/waybar/textures/D_0.10.png differ diff --git a/config/waybar/textures/D_0.20.png b/config/waybar/textures/D_0.20.png new file mode 100644 index 00000000..d83d7f4c Binary files /dev/null and b/config/waybar/textures/D_0.20.png differ diff --git a/config/waybar/textures/D_0.30.png b/config/waybar/textures/D_0.30.png new file mode 100644 index 00000000..f26d804e Binary files /dev/null and b/config/waybar/textures/D_0.30.png differ diff --git a/config/waybar/textures/D_0.40.png b/config/waybar/textures/D_0.40.png new file mode 100644 index 00000000..ce4ef0a1 Binary files /dev/null and b/config/waybar/textures/D_0.40.png differ diff --git a/config/waybar/textures/D_0.50.png b/config/waybar/textures/D_0.50.png new file mode 100644 index 00000000..7c41cfdd Binary files /dev/null and b/config/waybar/textures/D_0.50.png differ diff --git a/config/waybar/textures/D_0.60.png b/config/waybar/textures/D_0.60.png new file mode 100644 index 00000000..3be7b315 Binary files /dev/null and b/config/waybar/textures/D_0.60.png differ diff --git a/config/waybar/textures/D_0.65.png b/config/waybar/textures/D_0.65.png new file mode 100644 index 00000000..2acae52a Binary files /dev/null and b/config/waybar/textures/D_0.65.png differ diff --git a/config/waybar/textures/D_0.70.png b/config/waybar/textures/D_0.70.png new file mode 100644 index 00000000..41b055e9 Binary files /dev/null and b/config/waybar/textures/D_0.70.png differ diff --git a/config/waybar/textures/D_0.75.png b/config/waybar/textures/D_0.75.png new file mode 100644 index 00000000..816d8bc1 Binary files /dev/null and b/config/waybar/textures/D_0.75.png differ diff --git a/config/waybar/textures/D_0.80.png b/config/waybar/textures/D_0.80.png new file mode 100644 index 00000000..bad70cc9 Binary files /dev/null and b/config/waybar/textures/D_0.80.png differ diff --git a/config/waybar/textures/D_0.85.png b/config/waybar/textures/D_0.85.png new file mode 100644 index 00000000..a5ca44c7 Binary files /dev/null and b/config/waybar/textures/D_0.85.png differ diff --git a/config/waybar/textures/D_0.90.png b/config/waybar/textures/D_0.90.png new file mode 100644 index 00000000..f6b30a6c Binary files /dev/null and b/config/waybar/textures/D_0.90.png differ diff --git a/config/waybar/textures/D_0.95.png b/config/waybar/textures/D_0.95.png new file mode 100644 index 00000000..ef8a376b Binary files /dev/null and b/config/waybar/textures/D_0.95.png differ diff --git a/config/waybar/textures/D_1.00.png b/config/waybar/textures/D_1.00.png new file mode 100644 index 00000000..34af7122 Binary files /dev/null and b/config/waybar/textures/D_1.00.png differ