Styling bar

.config/waybar/style.css

@@ -1,12 +1,10 @@
 * {
-	/* `otf-font-awesome` is required to be installed for icons */
 	font-family: "JetBrainsMono Nerd Font", FontAwesome, Roboto, Helvetica, Arial, sans-serif;
 	font-size: 16px;
 }
 
 window#waybar {
-	background-color: rgba(43, 48, 59, 0.5);
-	border-bottom: 3px solid rgba(100, 114, 125, 0.5);
+	background-color: #1e1e2e;
 	color: #ffffff;
 	transition-property: background-color;
 	transition-duration: .5s;
@@ -16,24 +14,6 @@ window#waybar.hidden {
 	opacity: 0.2;
 }
 
-/*
-window#waybar.empty {
-    background-color: transparent;
-}
-window#waybar.solo {
-    background-color: #FFFFFF;
-}
-*/
-
-window#waybar.termite {
-	background-color: #3F3F3F;
-}
-
-window#waybar.chromium {
-	background-color: #000000;
-	border: none;
-}
-
 button {
 	/* Use box-shadow instead of border so the text isn't offset */
 	box-shadow: inset 0 -3px transparent;
@@ -54,9 +34,9 @@ button:hover {
 }
 
 #workspaces button {
-	padding: 0 5px;
+	padding: 0 8px;
 	background-color: transparent;
-	color: #ffffff;
+	color: #cdd6f1;
 }
 
 #workspaces button:hover {
@@ -65,17 +45,21 @@ button:hover {
 
 #workspaces button.focused,
 #workspaces button.active {
-	background-color: #64727D;
-	box-shadow: inset 0 -3px #ffffff;
+	background-color: #a6e3a1;
+	color: #1e1e2e;
+	/* box-shadow: inset 0 -3px #ffffff; */
 }
 
 #workspaces button.urgent {
-	background-color: #eb4d4b;
+	background-color: #f38ba8;
+	color: #1e1e2e;
 }
 
 #mode {
-	background-color: #64727D;
-	box-shadow: inset 0 -3px #ffffff;
+	background-color: #f38ba8;
+	color: #1e1e2e;
+	padding: 0 10px;
+	font-weight: 800;
 }
 
 #clock,
@@ -90,13 +74,16 @@ button:hover {
 #wireplumber,
 #custom-media,
 #tray,
-#mode,
 #idle_inhibitor,
 #scratchpad,
 #power-profiles-daemon,
 #mpd {
 	padding: 0 10px;
-	color: #ffffff;
+	color: #1e1e2e;
+}
+
+#power {
+	color: hotpink;
 }
 
 #window,
@@ -115,18 +102,20 @@ button:hover {
 }
 
 #clock {
-	background-color: #64727D;
+	background-color: #eba0ac;
+	color: #1e1e2e;
 }
 
 #battery {
-	background-color: #ffffff;
-	color: #000000;
+	background-color: #89b4fa;
+	color: #1e1e2e;
+	padding-right: 14px;
 }
 
 #battery.charging,
 #battery.plugged {
-	color: #ffffff;
-	background-color: #26A65B;
+	color: #1e1e2e;
+	background-color: #f9e2af;
 }
 
 @keyframes blink {
@@ -171,12 +160,13 @@ label:focus {
 }
 
 #cpu {
-	background-color: #2ecc71;
-	color: #000000;
+	padding-right: 14px;
+	background-color: #f2cdcd;
 }
 
 #memory {
-	background-color: #9b59b6;
+	padding-right: 14px;
+	background-color: #89dceb;
 }
 
 #disk {
@@ -184,11 +174,13 @@ label:focus {
 }
 
 #backlight {
-	background-color: #90b1b1;
+	background-color: #a6e3a1;
+	padding-right: 14px;
 }
 
 #network {
-	background-color: #2980b9;
+	padding-right: 18px;
+	background-color: #89b4fa;
 }
 
 #network.disconnected {
@@ -196,13 +188,12 @@ label:focus {
 }
 
 #pulseaudio {
-	background-color: #f1c40f;
-	color: #000000;
+	padding-right: 14px;
+	background-color: #a6e3a1;
 }
 
 #pulseaudio.muted {
-	background-color: #90b1b1;
-	color: #2a5c45;
+	background-color: #f38ba8;
 }
 
 #wireplumber {
@@ -229,15 +220,17 @@ label:focus {
 }
 
 #temperature {
-	background-color: #f0932b;
+	padding-right: 14px;
+	background-color: #fab387;
 }
 
 #temperature.critical {
-	background-color: #eb4d4b;
+	background-color: #f38ba8;
 }
 
 #tray {
-	background-color: #2980b9;
+	background-color: transparent;
+	border: 1px solid #f9e2af;
 }
 
 #tray>.passive {
@@ -250,12 +243,14 @@ label:focus {
 }
 
 #idle_inhibitor {
-	background-color: #2d3436;
+	background-color: #181825;
+	padding: 3px 14px 3px 6px;
+	color: #cdd6f4;
 }
 
 #idle_inhibitor.activated {
-	background-color: #ecf0f1;
-	color: #2d3436;
+	background-color: #181825;
+	color: #f38ba8;
 }
 
 #mpd {