waybar fixes and updates

.config/waybar/style.css

@@ -2,13 +2,12 @@
 
 * {
     border: none;
-    border-radius: 10px;
     margin: 0;
     color: @foreground;
     font-family: 'Source Code Pro';
     text-shadow: 0 0 2px @background;
     font-weight: bold;
-    font-size: 18px;
+    font-size: 16px;
 }
 
 window {
@@ -17,38 +16,24 @@ window {
 
 .modules-right, .modules-center, .modules-left {
     padding: 0;
-    margin-top: 5px;
-}
-
-#workspaces {
-   background-color: alpha(@background, 0.5);
-   margin-left: 8px;
+    margin-top: 0;
 }
 
 #workspaces button {
-    padding: 1px 7px 2px 7px;
+    padding: 0 15px;
+    font-size:20px;
     margin: 0;
     font-weight:bold;
     /*background-color: alpha(@background, 1.0);*/
+    background-color: alpha(@background, 0.8);
     color: alpha(@foreground, 1.0);
 }
 
-/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
-#workspaces button:hover {
-    background: rgba(0, 0, 0, 0.2);
-    box-shadow: inherit;
-}
-
 #workspaces button.focused, #workspaces button.active {
-    background-color: @color4;
+    background-color: alpha(@color4, 0.8);
     color: @foreground;
 }
 
-#mode {
-    background-color: #64727D;
-    border-top: 3px solid #ffffff;
-}
-
 #clock,
 #battery,
 #cpu,
@@ -63,15 +48,28 @@ window {
 #mpd,
 #disk,
 #idle_inhibitor,
-#custom-gpu
+#custom-gpu,
+#network,
+#wireplumber
 {
     padding: 0 10px;
-    margin: 0 8px 0 0;
     color: @foreground;
 }
 
 #clock {
-    background-color:alpha(@background, 0.5);
+    background-color: alpha(@background, 0.8);
+    padding: 0 20px 5px 20px;
+    margin: 0;
+    font-size: 20px;
+    border-radius: 0 0 10px 10px;
+}
+
+#workspaces *:last-child {
+    border-bottom-right-radius: 10px;
+}
+
+.modules-right > *:first-child > * {
+    border-bottom-left-radius: 10px;
 }
 
 .modules-right > *:nth-child(1) > * {
@@ -95,3 +93,9 @@ window {
 .modules-right > *:nth-child(7) > * {
     background-color: alpha(@color7, 1.0);
 }
+.modules-right > *:nth-child(8) > * {
+    background-color: alpha(@color7, 1.0);
+}
+.modules-right > *:nth-child(9) > * {
+    background-color: alpha(@color7, 1.0);
+}