From 2bc65a1857090aaaafc6e9347a03dfd7559222d7 Mon Sep 17 00:00:00 2001 From: Michael Beck <ich@mbeck.cologne> Date: Wed, 12 Mar 2025 22:58:04 +0100 Subject: [PATCH] customizes waybar --- .config/waybar/config | 8 +- .config/waybar/style.css | 324 +++++++++++++++++++++++++++++++++++++++ 2 files changed, 328 insertions(+), 4 deletions(-) create mode 100644 .config/waybar/style.css diff --git a/.config/waybar/config b/.config/waybar/config index 3b6394e..5ac3b7b 100644 --- a/.config/waybar/config +++ b/.config/waybar/config @@ -7,7 +7,7 @@ "position": "top", - //"height": 20, + "height": 20, "margin-left": 10, "margin-bottom": 0, @@ -18,6 +18,8 @@ "modules-left": [ //"custom/rofi", "hyprland/workspaces", + "custom/weather", + "clock", //"hyprland/submap", "temperature", //"idle_inhibitor", @@ -25,9 +27,7 @@ "custom/spotify" ], "modules-center": [ - //"hyprland/window" - "clock#date", - "custom/weather" + "hyprland/window" //"custom/gammastep" ], "modules-right": [ diff --git a/.config/waybar/style.css b/.config/waybar/style.css new file mode 100644 index 0000000..eee8459 --- /dev/null +++ b/.config/waybar/style.css @@ -0,0 +1,324 @@ + +* { + font-family: "Fira Sans Semibold", "Font Awesome 6 Free", FontAwesome, Roboto, Helvetica, Arial, sans-serif; + font-size: 12px; + font-weight: 900; + margin: 0; + padding: 0; + transition-property: background-color; + transition-duration: 0.5s; +} + +/* Reset all styles */ +* { + border: none; + border-radius: 3px; + min-height: 0; + margin: 0em 0.2em 0em 0.2em; +} + +/* The whole bar */ +#waybar { + background-color: transparent; + color: rgba(255, 255, 255, 1); + transition-property: background-color; + transition-duration: 0.5s; + border-radius: 0px; + margin: 0px 0px; +} + +window#waybar.hidden { + opacity: 0.2; +} + +#workspaces button { + padding: 3px 2px; /* Adjusted padding to reduce height */ + margin: 3px 2px; /* Reduced margin slightly */ + border-radius: 6px; + color: @foreground; + background-color: rgba(17, 24, 39, 0.5); + transition: all 0.3s ease-in-out; + font-size: 13px; /* Slightly smaller font size */ +} + +#workspaces button.active { + color: @foreground; + background: rgba(2, 89, 57, 0.5); +} + +#workspaces button:hover { + background: rgba(51, 51, 51, 0.5); +} + +#workspaces button.urgent { + background-color: rgba(235, 77, 75, 0.5); +} + +#workspaces { + background-color: rgba(17,24,39,0.5); + + border-radius: 14px; + padding: 3px 6px; /* Adjusted padding to reduce height */ +} + +#window { + background-color: rgba(17,24,39,0.5); + font-size: 11px; /* Slightly smaller font size */ + font-weight: 800; + color: @foreground; + border-radius: 14px; + padding: 1px 2px; /* Reduced padding */ + margin: 2px; +} + +#clock, +#battery, +#cpu, +#memory, +#disk, +#temperature, +#backlight, +#network, +#pulseaudio, +#wireplumber, +#custom-media, +#mode, +#idle_inhibitor, +#mpd, +#bluetooth, +#custom-hyprPicker, +#custom-power-menu, +#custom-spotify, +#custom-weather, +#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 { + background-color: rgba(17,24,39,0.5); + border-radius: 14px; + padding: 5px; /* Adjusted padding */ +} + +#custom-screenshot_t { + background-color: rgba(17,24,39,0.5); + border-radius: 14px; + padding: 4px; +} + +#custom-spotify { + background-color: rgba(17,24,39,0.5); + border-radius: 14px; + padding: 3px 12px; +} + +#tray { + background-color: rgba(17,24,39,0.5); + border-radius: 14px; + padding: 4px; /* Adjusted padding */ +} + +#cpu { + color: #fb958b; + background-color: rgba(17,24,39,0.5); + padding: 4px; +} + +#memory { + color: #ebcb8b; + background-color: rgba(17,24,39,0.5); + padding: 4px; +} + +#custom-power { + background-color: rgba(17,24,39,0.5); + border-radius: 14px; + padding: 4px; +} + +#custom-storage { + background-color: rgba(17,24,39,0.5); + border-radius: 14px; + padding: 4px; +} + +#custom-launcher { + background-color: rgba(27, 36, 43, 0.5); + color: rgba(106, 146, 215, 0.5); + border-radius: 7.5px; + padding: 3px 6px; /* Adjusted padding */ +} + +#custom-weather.severe { + color: rgba(235, 147, 125, 0.5); +} + +#custom-weather.sunnyDay { + color: rgba(194, 202, 118, 0.5); +} + +#custom-weather.clearNight { + color: rgba(202, 211, 245, 0.5); +} + +#custom-weather.cloudyFoggyDay, +#custom-weather.cloudyFoggyNight { + color: rgba(194, 221, 218, 0.5); +} + +#custom-weather.rainyDay, +#custom-weather.rainyNight { + color: rgba(90, 172, 165, 0.5); +} + +#custom-weather.showyIcyDay, +#custom-weather.snowyIcyNight { + color: rgba(214, 231, 229, 0.5); +} + +#custom-weather.default { + color: rgba(219, 217, 216, 0.5); +} + +/* 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; +} + +#pulseaudio { + color: rgba(125, 155, 186, 0.5); +} + +#backlight { + color: rgba(143, 188, 187, 0.5); +} + +#clock { + color: rgba(200, 210, 224, 0.5); +} + +#battery { + color: rgba(192, 202, 245, 0.5); +} + +#battery.charging, +#battery.full, +#battery.plugged { + color: rgba(38, 166, 91, 0.5); +} + +@keyframes blink { + to { + background-color: rgba(30, 34, 42, 0.5); + color: rgba(171, 178, 191, 0.5); + } +} + +#battery.critical:not(.charging) { + color: rgba(245, 60, 60, 0.5); + animation-name: blink; + animation-duration: 0.5s; + animation-timing-function: linear; + animation-iteration-count: infinite; + animation-direction: alternate; +} + +label:focus { + background-color: rgba(0, 0, 0, 0.5); +} + +#disk { + background-color: rgba(150, 75, 0, 0.5); +} + +#bluetooth { + color: rgba(112, 125, 157, 0.5); +} + +#bluetooth.disconnected { + color: rgba(245, 60, 60, 0.5); +} + +#network { + color: rgba(180, 142, 173, 0.5); +} + +#network.disconnected { + color: rgba(245, 60, 60, 0.5); +} + + +#custom-media { + background-color: rgba(102, 204, 153, 0.5); + color: #2a5c45; + min-width: 100px; +} + +#custom-media.custom-spotify { + background-color: rgba(102, 204, 153, 0.5); +} + +#custom-media.custom-vlc { + background-color: rgba(255, 160, 0, 0.5); +} + +#temperature { + background-color: rgba(240, 147, 43, 0.5) +} + +#temperature.critical { + background-color: rgba(253, 77, 75, 0.5); +} + +#tray > .passive { + -gtk-icon-effect: dim; +} + +#tray > .needs-attention { + -gtk-icon-effect: highlight; + background-color: rgba(253, 77, 75, 0.5); +} + +#idle_inhibitor { + background-color: rgba(45, 52, 54, 0.5); +} + +#idle_inhibitor.activated { + background-color: rgba(236, 240, 241, 0.5); /* bleibt gleich */ + color: rgba(45, 52, 54, 1); +} + +#language { + background: rgba(0, 176, 147, 0.5); + color: rgba(116, 8, 100, 0.5); + padding: 0 0px; + margin: 0 5px; + min-width: 16px; +} + +#keyboard-state { + background: rgba(151, 225, 173, 0.5); + color: rgba(0, 0, 0, 0.5); + padding: 0 0px; + margin: 0 5px; + min-width: 16px; +} + + +#keyboard-state > label { + padding: 0 0px; +} + +#keyboard-state > label.locked { + background: rgba(0, 0, 0, 0.2); +}