Waybar: Separate styles for date and time.

home/file/waybar/config/default.nix

@@ -15,7 +15,7 @@ in
     start_hidden = false;
     output = [ config.module.display.primary ];
     modules-left = [
-      "clock"
+      "group/datetime"
       "sway/scratchpad"
       "mpris"
     ];
@@ -42,8 +42,13 @@ in
         ""
       ];
     };
-    clock = {
-      format = "{:%H:%M %a %d}";
+    "clock#time" = {
+      format = "{:%H:%M}";
+      on-click = "xdg-open https://cloud.voronind.com/apps/calendar/";
+      tooltip-format = "<big><tt>{calendar}</tt></big>";
+    };
+    "clock#date" = {
+      format = "{:%a %d}";
       on-click = "xdg-open https://cloud.voronind.com/apps/calendar/";
       tooltip-format = "<big><tt>{calendar}</tt></big>";
     };
@@ -165,6 +170,13 @@ in
         "custom/taghw2"
       ];
     };
+    "group/datetime" = {
+      orientation = "horizontal";
+      modules = [
+        "clock#time"
+        "clock#date"
+      ];
+    };
     "custom/display" = {
       exec = "swayscript displaywidget";
       on-click = "sleep 0.1 && swayscript dnd"; # HACK: https://github.com/Alexays/Waybar/issues/2166 & https://github.com/Alexays/Waybar/issues/1968

home/file/waybar/style/Plugin.css

@@ -12,9 +12,9 @@
 }
 
 /* Padding for global widgets. */
-#clock,
 #custom-display,
 #custom-network,
+#datetime,
 #mpris,
 #pulseaudio,
 #scratchpad {
@@ -23,6 +23,7 @@
 }
 
 /* Padding for combined widgets. */
+#clock.date,
 #cpu.load,
 #custom-powerlimit,
 #custom-powersave,
@@ -33,9 +34,9 @@
 
 /* Hover style. */
 #batteryinfo:hover,
-#clock:hover,
 #custom-display:hover,
 #custom-network:hover,
+#datetime:hover,
 #hardware:hover,
 #mpris:hover,
 #pulseaudio:hover,
@@ -89,6 +90,6 @@
 	border-top: @borderSize@ solid @accent@;
 }
 
-#clock {
+#clock.time {
 	font-weight: bold;
 }