clock module styles

modules/home/programs/waybar/default.nix

@@ -12,11 +12,20 @@
           "HDMI-A-1"
         ];
         modules-left = [ "sway/workspaces" ];
-        modules-center = [ "clock" ];
+        modules-center = [ "clock#week" "clock#year" "clock#time" ];
         modules-right = [ "network" "pulseaudio" "memory" "cpu" "battery" ];
 
-        clock = {
-          format = "{:%a %Y-%m-%d %H:%M:%S}";
+        "clock#time" = {
+          format = "{:%H:%M:%S}";
+          interval = 1;
+        };
+
+        "clock#week" = {
+          format = "{:%a}";
+        };
+
+        "clock#year" = {
+          format = "{:%Y-%m-%d}";
           tooltip-format = "<tt><small>{calendar}</small></tt>";
           calendar = {
             mode = "year";
@@ -30,7 +39,6 @@
               today = "<span color='#ff6699'><b><u>{}</u></b></span>";
             };
           };
-          interval = 1;
         };
 
         battery = {

modules/home/programs/waybar/style.css

@@ -54,6 +54,25 @@ button:hover {
     box-shadow: inset 0 -3px #ffffff;
 }
 
+.modules-center * {
+  margin: 0px;
+}
+
+.modules-center .week {
+  color: #d97706;
+  border-radius: 9999px 0px 0px 9999px;
+}
+
+.modules-center .year {
+  color: #ec4899;
+  border-radius: 0px;
+}
+
+.modules-center .time {
+  color: #0ea5e9;
+  border-radius: 0px 9999px 9999px 0px;
+}
+
 #clock,
 #battery,
 #cpu,