make waybar "float", change colors and way of styling widgets

waybar/style.css

@@ -1,17 +1,30 @@
 
 @import "mocha.css";
 
+@define-color hover shade(@blue, .5);
+
+* {
+    color: @text;
+    border-radius: 14px;
+}
+
 window {
     font-family: "0xProto Nerd Font Regular", "Font Awesome", sans-serif;
     font-size: 12px;
     color: @text;
+    border-radius: 16px;
 }
 
-* {
-    color: @text;
-    border-radius: 12px;
-    margin-left: 0;
-    margin-right: 0;
+/* Manage "floating" waybar position with paddings */
+window > * {
+    margin-top: 5px;
+    margin-left: 4px;
+    margin-right: 4px;
+    padding: 2px;
+}
+
+window > * {
+    background: alpha(@base, .8);
 }
 
 window#waybar {
@@ -22,22 +35,18 @@ window#waybar.hidden {
     opacity: .1;
 }
 
-/*
-window#waybar.empty {
+/*window#waybar.empty {
     background-color: transparent;
 }
 window#waybar.solo {
     background-color: #FFFFFF;
 }
-*/
-
 window#waybar.termite {
     background-color: alpha(@base, .1);
 }
-
 window#waybar.chromium {
     background-color: @base;
-}
+}*/
 
 button {
     /* Use box-shadow instead of border so the text isn't offset */
@@ -50,7 +59,25 @@ button {
 
 /* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
 button:hover {
-    background-color: alpha(shade(@blue, .3), .4);
+    background-color: @hover;
+}
+
+widget > * {
+    padding-top: 1px;
+    padding-bottom: 1px;
+    transition: 100ms ease-in;
+}
+
+widget > *:hover:not(#window):not(#workspaces):not(#tray):not(#custom-media) {
+    background: @hover;
+}
+
+#custom-logo {
+    padding-left: 12px;
+    padding-right: 18px;
+    font-size: 15.2px;
+    transition: 110ms ease-in;
+    margin-right: 6px;
 }
 
 /* you can set a style on hover for any module like this */
@@ -59,21 +86,24 @@ button:hover {
 }
 
 #workspaces {
-    background: alpha(@base, .3);
-    padding-top: 2px;
-    padding-bottom: 2px;
+    border-radius: 16px;
+    padding-left: 2px;
+    padding-right: 2px;
 }
 
 #workspaces button {
     color: @text;
-    padding-left: 6px;
-    padding-right: 6.9px;
+    background: transparent;
     font-size: 19px;
+    border-radius: 16px; 
+}
+
+#workspaces button *:hover {
+    background: @base;
 }
 
 #workspaces button.active {
     background: alpha(shade(@blue, .5), .6);
-    /* Customize font size and stuff when in different states */
 }
 
 #workspaces button.urgent {
@@ -126,16 +156,6 @@ button:hover {
 #workspaces {}
 */
 
-/* If workspaces is the leftmost module, omit left margin */
-.modules-left > widget:first-child > #workspaces {
-    margin-left: 0;
-}
-
-/* If workspaces is the rightmost module, omit right margin */
-.modules-right > widget:last-child > #workspaces {
-    margin-right: 0;
-}
-
 #clock {
     background-color: alpha(@base, .3);
 }