more waybar style fiddling

waybar/config.jsonc

@@ -36,7 +36,8 @@
     "clock": {
         "timezone": "America/New_York",
         "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
-        "format-alt": "{:%Y-%m-%d}"
+        "format-alt": "{:%Y-%m-%d}",
+        "on-click": ""
     },
     "cpu": {
         "format": "󰻠  {usage}%",

waybar/styles/module-groups.css

@@ -2,43 +2,33 @@
 * Modules groups
 */
 .modules-left {
-  padding: 0 2px 0 2px;
+  padding: 0 3px;
+  border: 1px solid rgba(125, 125, 125, 0.66);
   border-radius: 5px;
   background: rgba(0, 0, 0, 0.66);
-  margin-left: 15px;
+  margin-left: 10px;
+  animation: fadeIn 2.5s;
 }
 
 .modules-center {
-  padding: 0 2px 0 2px;
+  padding: 0 3px;
+  border: 1px solid rgba(125, 125, 125, 0.66);
   border-radius: 5px;
   background: rgba(0, 0, 0, 0.66);
+  animation: fadeIn 2.5s;
 }
 
 .modules-right {
-  padding: 0 2px 0 2px;
+  padding: 0 3px;
+  border: 1px solid rgba(125, 125, 125, 0.66);
   border-radius: 5px;
   background: rgba(0, 0, 0, 0.66);
-  margin-right: 15px;
+  margin-right: 10px;
+  animation: fadeIn 2.5s;
 }
 
-/*
-* Module widgets
-*/
-.modules-left > widget {
+@keyframes fadeIn {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
 }
 
-.modules-left > widget:first-child {
-}
-
-.modules-left > widget:last-child {
-}
-.modules-right > widget {
-}
-
-.modules-right > widget:first-child {
-}
-
-.modules-right > widget:last-child {
-}
-
-

waybar/styles/modules.css

@@ -1,9 +1,11 @@
 label.module {
   padding: 0 10px;
-    box-shadow: inset 0 -3px;
+  box-shadow: inset 0 -2px;
+  transition: color 0.5s ease-in-out;
+  transition: background-color 0.5s ease-in-out;
 }
 
 box.module {
   padding: 0 10px;
+  box-shadow: inset 0 -2px;
 }
-

waybar/styles/modules/clock.css

@@ -1,4 +1,4 @@
 #clock {
-  color: white;
+  color: #8fbcbb;
 }
 

waybar/styles/modules/cpu.css

@@ -1,4 +1,4 @@
 #cpu {
-  color: white;
+  color: #bf616a;
 }
 

waybar/styles/modules/idle.css

@@ -1,7 +1,8 @@
 #idle_inhibitor {
+  color: #5e81ac;
 }
 
 #idle_inhibitor.activated {
-  background-color: #555;
+  background-color: #d8dee9;
 }
 

waybar/styles/modules/memory.css

@@ -1,4 +1,4 @@
 #memory {
-  color: white;
+  color: #b48ead;
 }
 

waybar/styles/modules/network.css

@@ -1,8 +1,8 @@
 #network {
-  color: #2980b9;
+  color: #5e81ac;
 }
 
 #network.disconnected {
-  color: #f53c3c;
+  background-color: #f53c3c;
 }
 

waybar/styles/modules/spotify.css

@@ -1,4 +1,3 @@
 .custom-spotify {
-    color: #1DB954;
+  color: #1db954;
 }
-

waybar/styles/modules/temperature.css

@@ -1,8 +1,8 @@
 #temperature {
-  color: #f0932b;
+  color: #d08770;
 }
 
 #temperature.critical {
-  color: #eb4d4b;
+  color: #bf616a;
 }
 

waybar/styles/modules/wireplumber.css

@@ -1,5 +1,5 @@
 #wireplumber {
-  color: white;
+  color: #a3be8c;
 }
 
 #wireplumber.muted {

waybar/styles/modules/workspaces.css

@@ -1,6 +1,7 @@
 
 #workspaces {
-  padding-right: 0px;
+  padding-left: 0;
+  padding-right: 0;
 }
 
 #workspaces button {
@@ -8,10 +9,12 @@
   border: none;
   border-radius: 0px;
   box-shadow: inset 0 -3px transparent;
+  transition: color 0.5s ease;
 }
 
 #workspaces button.active {
   color: #5e81ac;
+  box-shadow: inset 0 -3px #5e81ac;
 }
 
 #workspaces button:hover {
@@ -20,10 +23,10 @@
 }
 
 #workspaces button.focused {
-  background-color: #64727d;
+  background-color: #81a1c1;
 }
 
 #workspaces button.urgent {
-  background-color: #eb4d4b;
+  background-color: #bf616a;
 }