💄 style(waybar): changed a lot of css, put hyprland/window between clock and custom/media

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": "<tt>{calendar}</tt>"
+        "tooltip-format": "<big><tt>{calendar}</tt></big>"
     },
 
     "cpu": {

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;

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;
 }