updated styling

waybar/style.css

@@ -9,7 +9,11 @@
 /* -----------------------------------------------------------------------------
  * Keyframes
  * -------------------------------------------------------------------------- */
-
+ @define-color magenta #9d7cd8;
+ @define-color magenta_2 #ff007c;
+ @define-color bg_highlight #292e42;
+ @define-color blue_1 #65bcff;
+ @define-color bg #222436;
 /*
 Arc-Dark Color Scheme
 */
@@ -41,25 +45,25 @@ Arc-Dark Color Scheme
 
 /* Reset all styles */
 * {
+
     border: none;
     border-radius: 0;
     min-height: 0;
-    margin: 1px;
+    margin: 0px;
     padding: 0;
-    color: #66ACED;
+    /* color: @blue_1; */
 }
 
 
 /* The whole bar */
 window#waybar {
     /* color: #dfdfdf; */
-    /* background-color: rgba(0,0,0,0.8); */
-    /* background-color: rgba(8,0,37,0.85); */
     background-color: rgba(0,0,0,0);
+    /* background-color: @bg; */
     /* font-family: JetBrains Mono Nerd Font; */
     font-family: Intel One Mono Nerd Font;
     font-size: 14px;
-    /* border-radius: 22px; */
+    /* border-radius: 3px; */
 }
 
 /* Every modules */
@@ -77,27 +81,38 @@ window#waybar {
 #tray,
 #idle_inhibitor,
 #window,
-#custom-power,
 #workspaces,
+#custom-power,
 #custom-media,
 #custom-PBPbattery {
     padding:0.25rem 0.75rem;
-    margin: 1px 6px;
-    background-color: rgba(0,0,0,0.8);
-    border-radius: 20px;
+    /* margin: 1px 6px; */
+    /* background-color: @bg;
+    border-radius: 20px; */
+    color: @blue_1;
 }
 
+#custom-separator {
+    color: @bg_highlight;
+}
+
+.modules-right,
+.modules-left,
+.modules-center {
+    background-color: @bg;
+    border-radius: 20px;
+}
 /* -----------------------------------------------------------------------------
  * Modules styles
  * -------------------------------------------------------------------------- */
 
 #clock {
-    /* color: #ff4499; */
-    color: #73daca;
+    /* color: @magenta_2; */
+    color: @magenta;
 }
 
 #custom-weather {
-    color: #ff4499;
+    color: @magenta;
 }
 
 #battery {
@@ -125,7 +140,7 @@ window#waybar {
 }
 
 #cpu {
-    color: #f7768e;
+    color: @magenta;
 }
 
 #cpu.warning {
@@ -140,7 +155,7 @@ window#waybar {
     animation-timing-function: linear;
     animation-iteration-count: infinite;
     animation-direction: alternate;
-    color: #f7768e;
+    color: @magenta;
 }
 
 #memory.warning {
@@ -159,8 +174,8 @@ window#waybar {
     /* background: @highlight; */
     /* background: #dfdfdf; */
     border-bottom: 3px transparent;
-    color:#ff4499;
-    margin-left: 5px;
+    color:@magenta_2;
+    /* margin-left: 5px; */
     padding: 7px;
 }
 
@@ -169,7 +184,7 @@ window#waybar {
 }
 
 #pulseaudio {
-    color: #bb9af7;
+    color: @magenta;
     border-left: 0px;
     border-right: 0px;
     margin-right: 0;
@@ -177,7 +192,7 @@ window#waybar {
 }
 
 /* #pulseaudio.muted { */
-/*     color: #ff4499; */
+/*     color: @magenta_2; */
 /* } */
 /**/
 #pulseaudio.microphone {
@@ -189,7 +204,7 @@ window#waybar {
 }
 
 /* #pulseaudio.microphone.muted { */
-/*     color: #ff4499; */
+/*     color: @magenta_2; */
 /* } */
 
 
@@ -203,30 +218,29 @@ window#waybar {
 }
 
 #custom-media {
-    color: #bb9af7;
+    color: @magenta;
 }
 
 #workspaces {
     font-size:16px;
-    background-color: rgba(0,0,0,0.8);
     border-radius: 20px;
 }
 
 #workspaces button {
     border-bottom: 3px solid transparent;
     margin-bottom: 0px;
-    color: #dfdfdf;
+    color: @blue_1;
 }
 
 #workspaces button.active {
-    border-bottom: 1px solid  #ff4499;
-    margin-bottom: 1px;
+    color: @magenta;
+    border-bottom: 1px solid @magenta;
+    /* margin-bottom: 1px; */
     padding-left:0;
 }
 
 #workspaces button.urgent {
-    border-color: #c9545d;
-    color: #c9545d;
+    border-bottom: 1px solid @magenta_2;
 }
 
 #custom-power {
@@ -234,12 +248,6 @@ window#waybar {
     padding-right: 1rem;
 }
 
-#custom-launcher {
-    font-size:15px;
-    margin-left:15px;
-    margin-right:10px;
-}
-
 #backlight.icon {
     padding-right:1px;
     font-size: 13px;