styling fixes - less purple

CONFIG/waybar/style.css

@@ -1,60 +1,50 @@
-/* =============================================================================
- *
- * Waybar configuration
- *
- * Configuration reference: https://github.com/Alexays/Waybar/wiki/Configuration
- *
- * =========================================================================== */
-
 /* -----------------------------------------------------------------------------
- * Keyframes
+ * Keyframes & Colors
  * -------------------------------------------------------------------------- */
-
-@define-color highlight #685878 ;
-@define-color base1  #19191e ;
+@define-color highlight #00E5FF;
+@define-color base1     #0A0A0A;
+@define-color text      #FFFFFF;
+@define-color urgent    #FF0033;
+@define-color dim       #333333;
 
 @keyframes blink-warning {
-    70% {
-        color: white;
-    }
-
-    to {
-        color: white;
-        background-color: orange;
-    }
+  70% {
+    color: @text;
+  }
+  to {
+    color: @text;
+    background-color: orange;
+  }
 }
 
 @keyframes blink-critical {
-    70% {
-      color: white;
-    }
-
-    to {
-        color: white;
-        background-color: red;
-    }
+  70% {
+    color: @text;
+  }
+  to {
+    color: @text;
+    background-color: @urgent;
+  }
 }
 
 /* -----------------------------------------------------------------------------
  * Base styles
  * -------------------------------------------------------------------------- */
-
-/* Reset all styles */
 * {
-    border: none;
-    border-radius: 0;
-    min-height: 0;
-    margin: 1px;
-    padding: 0;
+  border: none;
+  border-radius: 0;
+  min-height: 0;
+  margin: 1px;
+  padding: 0;
 }
 
-/* The whole bar */
 #waybar {
-    background: transparent;
-    color: #e3e3ea;
-    background-color: @base1;
-    font-family: JetBrainsMono;
-    font-size: 13px;
+  background: transparent;
+  color: @text;
+  background-color: @base1;
+  font-family: JetBrainsMono;
+  font-size: 13px;
+  border-bottom: 2px solid @dim;
 }
 
 /* Every modules */
@@ -69,80 +59,72 @@
 #battery,
 #clock,
 #tray {
-    padding:0.5rem 0.6rem;
-    margin: 1px 0px;
+  padding: 0.5rem 0.6rem;
+  margin: 1px 0px;
 }
 
 /* -----------------------------------------------------------------------------
  * Module styles
  * -------------------------------------------------------------------------- */
-
-#custom-launcher {
-    margin-left:15px;
-    margin-right:10px;
-}
-
-#workspaces {
-    font-size:13px;
-}
-
 #workspaces button {
-    border-radius: 5px;
-    color: #eceff4;
-    padding: 1px 6px;
-    margin-right: 2px;
-    margin-left: 2px;
+  border-radius: 0px;
+  color: @text;
+  padding: 1px 6px;
+  margin-right: 2px;
+  margin-left: 2px;
+  border-bottom: 2px solid transparent;
 }
 
 #workspaces button.focused {
-    border: 1px solid #d8dee9;
+  border-bottom: 2px solid @highlight;
+  color: @highlight;
 }
 
 #workspaces button.urgent {
-    border-color: #c9545d;
-    color: #c9545d;
+  border-color: @urgent;
+  color: @urgent;
 }
 
 #mode {
-    background: @highlight;
-    border-bottom: 3px transparent;
-    color:white;
-    margin-left: 5px;
-    padding: 7px;
+  background: @highlight;
+  color: #000000;
+  font-weight: bold;
+  margin-left: 5px;
+  padding: 7px;
 }
 
 #window {
-    font-weight: bold;
+  font-weight: bold;
 }
 
 #network.disconnected {
-    color: orange;
+  color: orange;
 }
 
 #cpu.warning {
-    color: orange;
+  color: orange;
 }
 
 #cpu.critical {
-    color: red;
+  color: red;
 }
 
 #memory {
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
 }
 
 #memory.warning {
-    color: orange;
- }
+  color: orange;
+}
 
 #memory.critical {
-    color: red;
-    animation-name: blink-critical;
-    animation-duration: 2s;
-    padding-left:5px;
-    padding-right:5px;
+  color: red;
+  animation-name: blink-critical;
+  animation-duration: 2s;
+  padding-left: 5px;
+  padding-right: 5px;
 }
 
 #backlight.icon {
@@ -152,35 +134,35 @@
 }
 
 #pulseaudio.muted {
-    color: @highlight;
+  color: @highlight;
 }
 
 #battery {
-    animation-timing-function: linear;
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
 }
 
 #battery.warning {
-    color: orange;
+  color: orange;
 }
 
 #battery.critical {
-    color: red;
+  color: red;
 }
 
 #battery.warning.discharging {
-    animation-name: blink-warning;
-    animation-duration: 3s;
+  animation-name: blink-warning;
+  animation-duration: 3s;
 }
 
 #battery.critical.discharging {
-    animation-name: blink-critical;
-    animation-duration: 2s;
+  animation-name: blink-critical;
+  animation-duration: 2s;
 }
 
 #custom-power {
-    margin-left:15px;
-    margin-right:15px;
-    font-size:15px;
+  margin-left: 15px;
+  margin-right: 15px;
+  font-size: 15px;
 }