modify design

style.css

@@ -1,40 +1,22 @@
 @import "mocha.css";
 
 * {
-  font-family: FantasqueSansMono Nerd Font;
-  font-size: 17px;
+  font-family: "FantasqueSansMono Nerd Font", monospace;
+  font-size: 15px;
   min-height: 0;
 }
 
 #waybar {
-  background: transparent;
+  background: @base;
   color: @text;
-  margin: 5px 5px;
-}
-
-#workspaces {
-  border-radius: 1rem;
-  margin: 5px;
-  background-color: @surface0;
-  margin-left: 1rem;
-}
-
-#workspaces button {
-  color: @lavender;
-  border-radius: 1rem;
-  padding: 0.4rem;
-}
-
-#workspaces button.active {
-  color: @sky;
-  border-radius: 1rem;
-}
-
-#workspaces button:hover {
-  color: @sapphire;
-  border-radius: 1rem;
+  border-radius: 0;
+  margin: 0;
+  padding: 0;
 }
 
+#workspaces,
+#workspaces button,
+#custom-haskell,
 #custom-music,
 #tray,
 #backlight,
@@ -43,15 +25,44 @@
 #pulseaudio,
 #custom-lock,
 #custom-power {
-  background-color: @surface0;
-  padding: 0.5rem 1rem;
-  margin: 5px 0;
+  border-radius: 0;
+  padding: 4px 8px;
+  margin: 0;
+  background: transparent;
+}
+
+#custom-haskell {
+  color: @mauve;
+  font-size: 16px;
+  font-weight: 900;
+}
+
+#workspaces {
+  background: transparent;
+}
+
+#workspaces button {
+  color: @overlay1;
+  box-shadow: none;
+  border: none;
+  outline: none;
+}
+
+#workspaces button.active {
+  color: #eb3489;
+  font-weight: bold;
+}
+
+#workspaces button:hover {
+  color: @text;
+  font-weight: bold;
+  box-shadow: none;
+  border: none;
+  background: transparent;
 }
 
 #clock {
   color: @blue;
-  border-radius: 0px 1rem 1rem 0px;
-  margin-right: 1rem;
 }
 
 #battery {
@@ -70,33 +81,30 @@
   color: @yellow;
 }
 
-#backlight, #battery {
-    border-radius: 0;
-}
-
 #pulseaudio {
   color: @maroon;
-  border-radius: 1rem 0px 0px 1rem;
-  margin-left: 1rem;
 }
 
 #custom-music {
   color: @mauve;
-  border-radius: 1rem;
 }
 
 #custom-lock {
-    border-radius: 1rem 0px 0px 1rem;
-    color: @lavender;
+  color: @lavender;
 }
 
 #custom-power {
-    margin-right: 1rem;
-    border-radius: 0px 1rem 1rem 0px;
-    color: @red;
+  color: @red;
 }
 
-#tray {
-  margin-right: 1rem;
-  border-radius: 1rem;
+#custom-haskell:hover,
+#custom-music:hover,
+#tray:hover,
+#backlight:hover,
+#clock:hover,
+#battery:hover,
+#pulseaudio:hover,
+#custom-lock:hover,
+#custom-power:hover {
+  font-weight: bold;
 }