update configs

.config/waybar/style.css

@@ -1,47 +1,74 @@
 * {
   border: none;
-  font-family: 'Fira Code', 'Symbols Nerd Font Mono';
-  font-size: 12px;
+  font-family: 'Fira Sans Semibold', 'Symbols Nerd Font Mono';
+  font-size: 16px;
   font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
-  min-height: 20px;
 }
 
 window#waybar {
   background: transparent;
 }
 
-#custom-arch, #workspaces {
-  border-radius: 10px;
-  background-color: rgba(17, 17, 27, 0.6);
-  color: #b4befe;
-  margin-top: 5px;
-  margin-right: 5px;
-  padding-top: 1px;
-  padding-left: 10px;
-  padding-right: 10px;
-}
+/* All modules */
 
-#custom-arch {
-  font-size: 14px;
-  margin-left: 15px;
-  color: #b4befe;
-}
-
-#custom-spotify {
+/* Module on the left */
+.modules-left {
+  color: #cdd6f4;
+  margin-top: 4px;
   margin-left: 10px;
 }
 
+#custom-power {
+  background-color: rgba(255, 255, 255, 0.2);
+  color: white;
+  padding: 0px 9px;
+  border-radius: 100px;
+  font-weight: 800;
+}
+
+#custom-power:hover {
+  background-color: #33ccff;
+  color: #107091;
+}
+
+#workspaces {
+  margin-left: 10px;
+  font-size: 12px;
+  border-radius: 100px;
+  background-color: rgba(255, 255, 255, 0.2);
+  padding: 2px;
+}
+
 #workspaces button {
-  color: #b4befe;
+  color: white;
+  animation: gradient_f 20s ease-in infinite;
+  transition: all 0.2s ease-in;
+  border-radius: 100px;
+  padding: 0px 4px;
+  margin: 0px 2px;
 }
 
 #workspaces button:hover {
-  color: #000000
+  background: none;
+  background-color: black;
+  color: white;
+  box-shadow: inherit;
+  text-shadow: inherit;
 }
 
-#clock, #custom-spotify, #cpu, #memory, #pulseaudio, #bluetooth, #network{
-  border-radius: 10px;
-  background-color: rgba(17, 17, 27, 0.6);
+#workspaces button.active {
+  background-color: #33ccff;
+  color: #167797;
+  border-radius: 100px;
+  padding: 0px 10px; 
+}
+
+#custom-spotify {
+  margin-left: 20px;
+}
+
+/* Module in the middle */
+#clock {
   color: #cdd6f4;
   margin-top: 3px;
   padding-left: 10px;
@@ -49,23 +76,39 @@ window#waybar {
   margin-right: 15px;
 }
 
-#bluetooth, #cpu {
-  border-top-right-radius: 0;
-  border-bottom-right-radius: 0;
-  padding-right: 5px;
-  margin-right: 0
-}
+/* Module on the right */
 
-#network, #memory {
-  border-top-left-radius: 0;
-  border-bottom-left-radius: 0;
-  padding-left: 5px;
-}
-
-#network {
+.modules-right {
+  color: black;
+  margin-top: 3px;
   margin-right: 10px;
 }
 
-#clock {
-  margin-right: 0;
+#custom-wireguard, #memory {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 0px 100px 100px 0px;
+  padding-right: 7px;
 }
+
+#bluetooth, #cpu {
+  background-color: rgba(255, 255, 255, 0.8);
+  border-radius: 100px 0px 0px 100px;
+  padding: 0px 7px;
+}
+
+#memory {
+  margin-right: 7px;
+}
+
+#pulseaudio {
+  color: white;
+  margin-right: 7px;
+}
+
+#privacy {
+  background-color: rgba(17, 17, 27, 0.15);
+  padding: 0px 10px;
+  border-radius: 100px;
+  color: white;
+  margin-right: 7px;
+}