finally fixed a ton of shit about waybar and added music and weather widget

.config/waybar/style.css

@@ -1,92 +1,68 @@
-\* {
+/* General styles */
+* {
     border: none;
     border-radius: 0;
     font-family: Iosevka, FontAwesome;
     font-size: 15px;
     min-height: 0;
+    color: #bebebe;
 }
 
 window#waybar {
     opacity: 0.7;
     background: #000000;
-    color: #bebebe;
 }
 
+/* Specific module styles */
 #workspaces button {
-    color: #bebebe;
     background: transparent;
-    padding: 0px 5px 0px 5px;
-    margin: 5px 10px 0 10px;
-}
-#workspaces button.focused {
-    color: white;
-    margin: 5px 10px 0 10px;
 }
 
+#workspaces button.focused,
 #workspaces button.active {
     color: white;
-    margin: 5px 10px 0 10px;
 }
 
-#workspaces button.urgent{
-    margin: 5px 10px 0 10px;
-    padding: 0px 8px 0px 8px;
+#workspaces button.urgent {
     animation-duration: 0.5s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
     animation-direction: alternate;
     border-radius: 7px;
-     }
+}
+
 #mode {
     font-family: "Iosevka";
-    margin: 0px 15px 0px 15px;
-    padding: 0px 12px 0px 12px;
     color: black;
     background: white;
 }
 
-#battery{
-    color: #bebebe;
-    margin:7px 4px 0 4px;
+#battery {
     border-radius: 5px;
-    padding: 0px 5px 0px 5px;
-    }
+}
 
 #network {
-    color: #bebebe;
-    margin:7px 4px 4px 4px;
-    font-size: 16.5px;
     border-radius: 6px;
-    /* padding: 0px 5px 0px 5px; */
 }
 
-#custom-power {
-    color: #bebebe;
-    margin:7px 4px 0 4px;
-    font-size: 16.5px;
-    border-radius: 6px;
-    /*padding: 0px 0px 0px 0px;*/
-}
 
+/* Animations */
 @keyframes critical {
     to {
-    background: rgba(187,56,0, 1);
-    border-radius: 7px;
-    margin:7px 4px 0 4px;
-    padding: 3px 8px 2px 8px;
+        background: rgba(187,56,0, 1);
+        border-radius: 7px;
     }
 }
+
 @keyframes urgent {
     to {
-    background: rgba(212,140,0, 1);
-    color: black;
-    border-radius: 7px;
+        background: rgba(212,140,0, 1);
+        color: black;
+        border-radius: 7px;
     }
 }
 
 #battery.critical:not(.charging) {
-    padding: 0px 6px 0px 6px;
-    color: #bebebe;
     animation-name: critical;
     animation-duration: 0.5s;
     animation-timing-function: linear;
@@ -95,54 +71,36 @@ window#waybar {
 }
 
 #clock {
-    border: none;
-    color: #bebebe;
     font-family: Manjari;
-    font-size: 16.5px;
-    border-radius: 0;
-    padding: 3px 6px 2px 0px;
 }
 
-#clock:hover {
-    box-shadow: inherit;
-    text-shadow: inherit;
-    background: inherit;
+#custom-weather {
+    font-family: Manjari;
 }
 
-#custom-wlsunset {
-    margin:7px 4px 0 4px;
-    color: #bebebe;
-    border: none;
-    border-radius: 0;
-    /* padding: 0px px 5px 0px; */
+#custom-music {
+    font-family: Manjari;
 }
 
-#custom-wlsunset:hover {
-    box-shadow: inherit;
-    text-shadow: inherit;
-    background: inherit;
-}
+#custom-wlsunset {}
 
 #pulseaudio {
     background: transparent;
-    margin:7px 4px 0 4px;
-    font-size: 16.5px;
-    color: #bebebe;
-    /* border-radius: 5px; */
-    /* padding: 0px 5px 0px 5px; */
+}
+
+#custom-power {
+    margin:0px 3px 0px 0px;
+    border-radius: 6px;
 }
 
 #tray {
-    margin: 7px 15px 3px 4px;
+    margin: 7px 10px 8px 4px;
     background: rgba(40,40,40, .65);
     border-radius: 6px;
-    padding: 5px 3px 5px 5px;
+    padding: 5px 5px 5px 5px;
 }
 
 #idle_inhibitor {
-    color: #bebebe;
     background: transparent;
-    margin: 7px 4px 0 4px;
     border-radius: 6px;
-    padding: 0px 5px 0px 5px;
 }