waybar updates

.config/waybar/style.css

@@ -2,45 +2,35 @@
 
 * {
     border: none;
-    border-radius: 0;
+    border-radius: 10px;
+    margin: 0;
+    color: @foreground;
     font-family: 'Source Code Pro';
+    text-shadow: 0 0 2px @background;
     font-weight: bold;
     font-size: 18px;
-    min-height: 0;
 }
 
 window {
-    padding: 0;
-}
-
-window#waybar {
-    background-color: alpha(@background, 0.5);
-    color: @foreground;
     background: transparent;
-
 }
 
-window#waybar.hidden {
-    opacity: 0.2;
+.modules-right, .modules-center, .modules-left {
+    padding: 0;
+    margin-top: 5px;
 }
 
-window#waybar.kitty {
-    background-color: #3F3F3F;
-}
-
-#window {
-    padding: 0 15px 0 5px;
-    background-color: alpha(@color2, 0.3);
-    border-radius: 0 0 10px 0;
+#workspaces {
+   background-color: alpha(@background, 0.5);
+   margin-left: 8px;
 }
 
 #workspaces button {
-    padding: 2px 5px 3px 5px;
-    margin: 0 3px;
+    padding: 1px 7px 2px 7px;
+    margin: 0;
     font-weight:bold;
-    background-color: alpha(@background, 0.5);
+    /*background-color: alpha(@background, 1.0);*/
     color: alpha(@foreground, 1.0);
-    border-radius: 0 0 15px 15px;
 }
 
 /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
@@ -72,8 +62,36 @@ window#waybar.kitty {
 #mode,
 #mpd,
 #disk,
-#idle_inhibitor {
+#idle_inhibitor,
+#custom-gpu
+{
     padding: 0 10px;
-    margin: 0 5px;
+    margin: 0 8px 0 0;
     color: @foreground;
 }
+
+#clock {
+    background-color:alpha(@background, 0.5);
+}
+
+.modules-right > *:nth-child(1) > * {
+    background-color: alpha(@color1, 1.0);
+}
+.modules-right > *:nth-child(2) > * {
+    background-color: alpha(@color2, 1.0);
+}
+.modules-right > *:nth-child(3) > * {
+    background-color: alpha(@color3, 1.0);
+}
+.modules-right > *:nth-child(4) > * {
+    background-color: alpha(@color4, 1.0);
+}
+.modules-right > *:nth-child(5) > * {
+    background-color: alpha(@color5, 1.0);
+}
+.modules-right > *:nth-child(6) > * {
+    background-color: alpha(@color6, 1.0);
+}
+.modules-right > *:nth-child(7) > * {
+    background-color: alpha(@color7, 1.0);
+}