feat(waybar): cleaner look

.config/waybar/config

@@ -8,9 +8,9 @@
     // "width": 1280, // Waybar width
     "spacing": 4, // Gaps between modules (4px)
     // Choose the order of the modules
-    "modules-left": ["hyprland/window", "custom/media"],
+	"modules-left": ["hyprland/workspaces"],
-    "modules-center": ["hyprland/workspaces"],
+    "modules-center": ["clock"],
-    "modules-right": ["pulseaudio", "cpu", "memory", "temperature", "backlight", "hyprland/language", "battery", "clock", "tray"],
+    "modules-right": ["pulseaudio", "temperature", "cpu", "memory", "battery", "backlight", "hyprland/language", "tray"],
     "hyprland/workspaces": {
         "disable-scroll": false,
         "all-outputs": false,
@@ -38,14 +38,25 @@
             "unlocked": ""
         }
     },
+	"wlr/taskbar": {
+		"format": "{icon}",
+		"icon-size": 14,
+		"on-click": "activate",
+	},
     "tray": {
         // "icon-size": 21,
         "spacing": 10
     },
     "clock": {
-        // "timezone": "America/New_York",
+        "timezones": ["Europe/Berlin", "Asia/Hong_Kong"],
-        "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
+        "tooltip-format": "<small>{tz_list}</small>\n<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
-        "format-alt": "{:%Y-%m-%d}"
+		"format": "{:%H:%M}",
+        "format-alt": "{:%Y-%m-%d}",
+		"actions":{
+			"on-scroll-up": "tz_up",
+			"on-scroll-down": "tz_down",
+		},
+		"smooth-scrolling-threshold": 6.0,
     },
     "cpu": {
         "format": "{usage}% ",
@@ -64,7 +75,7 @@
         "format-icons": ["", "", ""]
     },
     "backlight": {
-        // "device": "acpi_video1",
+        "device": "intel_backlight",
         "format": "{percent}%",// {icon}",
         "format-icons": ["", "", "", "", "", "", "", "", ""]
     },

.config/waybar/style.css

@@ -1,21 +1,29 @@
 * {
   /* `otf-font-awesome` is required to be installed for icons */
-    font-family: "Hurmit Nerd Font", FontAwesome, Roboto, Helvetica, Arial, sans-serif;
+  font-family: "Hurmit Nerd Font", FontAwesome, Roboto, Helvetica, Arial,
+    sans-serif;
   font-size: 1.1rem;
+  margin: 0;
 }
 
 window#waybar {
-    background-color: rgba(43, 48, 59, 0.0);
+  background-color: rgba(43, 48, 59, 0);
-    /*border-bottom: 3px solid rgba(100, 114, 125, 0.5);*/
+  color: rgb(204, 204, 204);
-    color: rgb(204,204,204);
-    /*padding-top: 2px;
-    margin-top: 2px;*/
   transition-property: background-color;
-    transition-duration: .5s;
+  transition-duration: 0.5s;
 }
 
 window#waybar.hidden {
-    opacity: 0.0;
+  opacity: 0;
+}
+
+.modules-left,
+.modules-center,
+.modules-right {
+  /*background-color: black; rgba(255, 255, 255, 1);*/
+  border: 1px solid;
+  border-radius: 8px;
+  padding: 0px;
 }
 
 /*
@@ -42,26 +50,40 @@ button:hover {
 }
 
 #workspaces button {
-    padding: 0 5px;
+  padding: 2px 5px 0px 5px;
   border: 1px solid transparent; /*avoid jumping by always having a border*/
   background-color: transparent;
   color: #ffffff;
   border-radius: 8px;
-	transition: linear .1s;
+}
+
+#workspaces button,
+#workspaces button.empty,
+#workspaces button.active,
+#workspaces button.special,
+#workspaces button.special.empty,
+#workspaces button.special.active {
+  background-color: transparent;
+  transition: linear 0.1s;
+}
+
+#workspaces button.urgent,
+#workspaces button.special.urgent {
+  background-color: rgba(250, 17, 55, 0.6);
 }
 
 #workspaces button.empty {
-	color: rgba(255, 255, 255, .4);
+  color: rgba(255, 255, 255, 0.4);
 }
 
 #workspaces button:hover {
   border: 1px solid rgba(40, 220, 255, 0.8);
   box-shadow: inset 0 0 0 0 transparent;
-	transition: linear 0s;
+  padding: 0px 5px 2px 5px;
 }
 #workspaces button.active {
   color: rgba(40, 240, 255, 0.9);
-	transition: linear .1s;
+  padding: 1px 5px 1px 5px;
 }
 
 /*#workspaces button.active {
@@ -69,24 +91,15 @@ button:hover {
 	padding-top: 1px;
 }*/
 
-#workspaces button.special.active,
-#workspaces button.special {
-	background-color: transparent;
-}
-
-#workspaces button.urgent {
-    background-color: rgba(250, 17, 55, 0.6);
-}
-
 #workspaces {
-    background-color: rgba(255, 255, 255, .1);
+  background-color: rgba(255, 255, 255, 0.1);
-	border: 1px solid;
+  /*border: 1px solid;*/
   border-radius: 8px;
   padding: 1px;
 }
 
 #mode {
-    background-color: #64727D;
+  background-color: #64727d;
   /*border-bottom: 3px solid #ffffff;*/
 }
 
@@ -112,6 +125,8 @@ button:hover {
   border-radius: 0px;
   border-top: 1rem;
   border: solid;
+  margin: 0px;
+  border-bottom: 0rem;
 }
 #backlight,
 #battery,
@@ -120,10 +135,10 @@ button:hover {
   color: #eeeeee;
 }
 
-#window,
+/*#window,
 #workspaces {
   margin: 0 4px;
-}
+}*/
 
 /* If workspaces is the leftmost module, omit left margin */
 .modules-left > widget:first-child > #workspaces {
@@ -136,17 +151,16 @@ button:hover {
 }
 
 #clock {
-    background-color: #64727D;
+  font-weight: bold;
-	border-radius: 5px;
+  font-size: 1.2rem;
-	margin: 2px 0;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-radius: 8px;
+  margin: 0;
 }
 
-#battery {
+#battery.charging,
-	border-top: 2px #ffffff;
+#battery.plugged {
-}
+  background-color: #26a65b;
-
-#battery.charging, #battery.plugged {
-    background-color: #26A65B;
 }
 
 @keyframes blink {
@@ -169,8 +183,12 @@ label:focus {
   background-color: #000000;
 }
 
-#cpu {
+#cpu,
+#battery,
+#temperature,
+#memory {
   border-top: solid 2px #1de8d1;
+  margin: 0;
 }
 
 /*#memory {
@@ -178,7 +196,7 @@ label:focus {
 }*/
 
 #disk {
-    background-color: #964B00;
+  background-color: #964b00;
 }
 
 #backlight {
@@ -221,10 +239,6 @@ label:focus {
   /*background-color: #ffa000;*/
 }
 
-#temperature {
-    border-top: 2px #f0932b;
-}
-
 #temperature.critical {
   background-color: #eb4d4b;
 }
@@ -272,14 +286,12 @@ label:focus {
   border-top: 2px #df73cf;
   color: #909090;
   padding: 0 5px;
-    margin: 0 5px;
   min-width: 16px;
 }
 
 #keyboard-state {
   border-top: 2px #97e1ad;
   padding: 0 0px;
-    margin: 0 5px;
   min-width: 16px;
 }