diff --git a/waybar/config.jsonc b/waybar/config.jsonc index c43a41e..92f14fc 100644 --- a/waybar/config.jsonc +++ b/waybar/config.jsonc @@ -2,15 +2,15 @@ "position": "top", "layer": "top", "spacing": 0, - "margin": 6, + "margin": 0, "reload_style_on_change": true, "modules-left": [ "custom/logo", "hyprland/workspaces" ], "modules-center": [ - "hyprland/window", "clock", + "hyprland/window", "custom/media" ], "modules-right": [ @@ -128,7 +128,7 @@ "clock": { "format": "{:L%A %d, %H:%M}", "format-alt": "{:%Y-%m-%d}", - "tooltip-format": "{calendar}" + "tooltip-format": "{calendar}" }, "cpu": { diff --git a/waybar/modules.css b/waybar/modules.css index 10b9c67..8184a99 100644 --- a/waybar/modules.css +++ b/waybar/modules.css @@ -11,22 +11,22 @@ /* Workspace Indicator */ #workspaces { - padding: 5px 0; - margin: 0 4px; + padding-left: 8px; + padding-right: 8px; } #workspaces > button { - border: none; - box-shadow: none; + all: unset; + transition: 80ms linear; background: @color1; border-radius: 14px; - padding: 0 4px; + padding: 4px 12px; margin: 0 2px; } #workspaces > button.active { background: @foreground; - padding-right: 24px; + padding-right: 30px; } #workspaces > button.urgent { @@ -62,6 +62,7 @@ window.empty #window { padding: 0; margin: 0; + border: none; } @@ -104,11 +105,6 @@ window.empty #window { padding: 0 10px; } -#bluetooth.connected { - padding-right: 12px; -} - - /* Pulse Audio */ #pulseaudio { padding-left: 8px; diff --git a/waybar/style.css b/waybar/style.css index acefbbe..a42813e 100644 --- a/waybar/style.css +++ b/waybar/style.css @@ -5,45 +5,55 @@ * { color: @foreground; transition: 120ms ease-in; + font-family: "Noto Sans", "Font Awesome", sans-serif; + font-size: 12px; } window#waybar { - font-family: "Noto Sans", "Font Awesome", sans-serif; - font-size: 12px; - color: @foreground; background: transparent; } -window#waybar > * { - padding: 4px; +window#waybar > box { + margin: 6px 6px 0px 6px; +} + +/* Styling modules-[left/center/right] */ +window#waybar > box > * { + padding: 5px; background: alpha(@background, .78); margin-bottom: 4px; - border-radius: 14px; + border-radius: 18px; } -.module { - padding: 0 10px; +/* Style all widgets */ +widget .module { + padding: 4px 10px; font-weight: 500; - margin: 0 1px; -} - -widget > * { + margin: 0 2px; border-radius: 14px; } -widget > *:hover:not(#workspaces):not(#tray):not(#custom-media) { - background: @color1; -} - -label { +widget .module label { font-size: .98em; font-weight: 500; } +widget .module:hover:not(#workspaces):not(#tray):not(#custom-media) { + background: @color1; +} + +window#waybar > box > * > widget:first-child .module { + margin-left: 0px; +} + +window#waybar > box > * > widget:last-child .module { + margin-right: 0px; +} + + menu { - background: @background; + background: transparent; border: none; - padding: 2px; } menu > separator { @@ -71,14 +81,18 @@ menu > *:hover { } tooltip { - padding: 3px; - border-radius: 8px; - border-color: @color1; - background: @background; + all: unset; + padding: 10px; } -tooltip > * { - padding: 0; - font-weight: 500; - font-size: .95em; +tooltip > box { + border-radius: 12px; + border: 1px solid @color1; + background: @background; + box-shadow: 0 0 6px 1px alpha(@background, .5); +} + +tooltip > box > label { + font-weight: 600; + font-size: 1em; }