Updated

waybar/style.css

@@ -1,148 +1,98 @@
+@define-color base00 #ff0000;
+@define-color base01 #1a1a1a;
+@define-color base02 #363636;
+@define-color base03 #ffffff;
+@define-color base04 #cfac78;
+@define-color base05 #cfac78;
+@define-color base06 #e8e8e8;
+@define-color base07 #f8f8f8;
+@define-color base08 #ab4642;
+@define-color base09 #dc9656;
+@define-color base0A #f7ca88;
+@define-color base0B #a1b56c;
+@define-color base0C #86c1b9;
+@define-color base0D #7cafc2;
+@define-color base0E #ba8baf;
+@define-color base0F #a16946;
+
 * {
-	border: none;
-	border-radius: 0;
-	font-family: "JetbrainsMono Nerd Font";
-	font-size: 12px;
+  transition: none;
+  box-shadow: none;
 }
 
-window#waybar {
-	background: none;
+#waybar {
+	font-family: 'Source Code Pro', sans-serif;
+	font-size: 1.2em;
+	font-weight: 400;
+  color: @base04;
+  background: @base01;
 }
 
-window#waybar.hidden {
-	opacity: 0.2;
+#workspaces {
+  margin: 0 4px;
 }
 
-#window {
-	margin-top: 6px;
-	padding-left: 10px;
-	padding-right: 10px;
-	border-radius: 5px;
-	transition: none;
-	background: #2e3440;
-	color: #d8dee9;
+#workspaces button {
+  margin: 4px 0;
+  padding: 0 4px;
+  color: @base05;
 }
 
-#tags {
-	margin-top: 6px;
-	margin-right: 12px;
-	margin-left: 12px;
-	font-size: 4px;
-	border-radius: 5px;
-	transition: none;
-	background: #2e3440;
+#workspaces button.visible {
 }
 
-#tags button {
-	transition: none;
-	color: #4c566a;
-	background: transparent;
-	border-radius: 0px;
+#workspaces button.active {
+  border-radius: 4px;
+  background-color: #8c4b00;
 }
 
-#tags button.occupied {
-	transition: none;
-	color: #a3be8c;
-	background: transparent;
-	font-size: 4px;
-}
-
-#tags button.focused {
-	color: #81a1c1;
-	border-bottom: 2px solid #81a1c1;
-}
-
-#tags button:hover {
-	transition: none;
-	box-shadow: inherit;
-	text-shadow: inherit;
-	color: #81a1c1;
-}
-
-#temperature {
-	margin-top: 6px;
-	margin-left: 12px;
-	border-radius: 5px;
-	transition: none;
-	padding: 0 10px;
-	color: #a3be8c;
-	background: #2e3440;
-}
-
-#pulseaudio {
-	margin-top: 6px;
-	margin-left: 12px;
-	border-radius: 5px;
-	transition: none;
-	padding: 0 10px;
-	color: #a3be8c;
-	background: #2e3440;
-}
-
-#cpu {
-	margin-top: 6px;
-	margin-left: 12px;
-	border-radius: 5px;
-	transition: none;
-	padding: 0 10px;
-	color: #a3be8c;
-	background: #2e3440;
-}
-
-#clock {
-	margin-top: 6px;
-	margin-left: 12px;
-	margin-right: 12px;
-	border-radius: 5px;
-	transition: none;
-	padding: 0 10px;
-	color: #a3be8c;
-	background: #2e3440;
-}
-
-#battery {
-	margin-top: 6px;
-	margin-left: 12px;
-	border-radius: 5px;
-	transition: none;
-	padding: 10px 10px;
-	color: #a3be8c;
-	background: #2e3440;
-}
-
-#battery.critical:not(.charging) {
-	background-color: #d8dee9;
-	color: #2e3440;
-	animation-name: blink;
-	animation-duration: 0.5s;
-	animation-timing-function: linear;
-	animation-iteration-count: infinite;
-	animation-direction: alternate;
-}
-
-@keyframes blink {
-	to {
-		background-color: #bf616a;
-		color: #d8dee9;
-	}
-}
-
-#backlight {
-	margin-top: 6px;
-	margin-left: 12px;
-	border-radius: 5px;
-	transition: none;
-	padding: 10px 10px;
-	color: #88c0d0;
-	background: #2e3440;
+#workspaces button.urgent {
+  color: rgba(238, 46, 36, 1);
 }
 
 #tray {
-	margin-top: 6px;
-	margin-right: 12px;
-	border-radius: 5px;
-	padding-left: 10px;
-	padding-right: 10px;
-	color: #d8dee9;
-	background: #2e3440;
-}
+  margin: 4px 4px 4px 4px;
+  border-radius: 4px;
+  background-color: @base02;
+}
+
+#tray * {
+  padding: 0 6px;
+  border-left: 1px solid @base00;
+}
+
+#tray *:first-child {
+  border-left: none;
+}
+
+#mode, #battery, #cpu, #memory, #bluetooth, #network, #pulseaudio, #idle_inhibitor, #backlight, #custom-storage, #custom-updates, #custom-weather, #custom-mail, #clock, #temperature {
+  margin: 4px 2px;
+  padding: 0 6px;
+  background-color: @base02;
+  border-radius: 4px;
+  min-width: 20px;
+}
+
+#pulseaudio.muted {
+  color: @base0F;
+}
+
+#pulseaudio.bluetooth {
+  color: @base0C;
+}
+
+#clock {
+  margin-left: 0px;
+  margin-right: 4px;
+  background-color: transparent;
+}
+
+#temperature.critical {
+  color: @base0F;
+}
+
+#window {
+  font-size: 0.9em;
+	font-weight: 400;
+	font-family: sans-serif;
+}