From 4619c0b8b3549122b796f8c1575c517ca681a2d7 Mon Sep 17 00:00:00 2001
From: surtur <a_mirre@utb.cz>
Date: Sat, 26 Mar 2022 15:45:41 +0100
Subject: [PATCH] waybar: use dracula-esque colours, FiraCode Retina

also adjust margin sizes, font sizes and weight
---
 .config/waybar/style.css | 87 ++++++++++++++++++++++++++--------------
 1 file changed, 57 insertions(+), 30 deletions(-)

diff --git a/.config/waybar/style.css b/.config/waybar/style.css
index 6bc0d5a..2c0999f 100644
--- a/.config/waybar/style.css
+++ b/.config/waybar/style.css
@@ -1,8 +1,8 @@
 * {
 	border: none;
 	border-radius: 0;
-	font-family: DejaVu Sans;
-	font-size: 13px;
+	font-size: 14px;
+	font-weight: 400;
 	box-shadow: none;
 	text-shadow: none;
 	transition-duration: 0s;
@@ -10,35 +10,42 @@
 
 /* The whole bar */
 #waybar {
-	background: #323232;
+	background: #282a36;
 	color: white;
-	font-family: Cantarell, Noto Sans, sans-serif;
+	font-family: FiraCode Retina, Noto Sans, sans-serif;
+	font-weight: 600;
 	font-size: 13px;
 }
 
-window {
-	color:      rgba(217, 216, 216, 1);
+
+#window {
+	border-top: 3px solid transparent;
+	padding: 0 2px;
 	background: rgba(35, 31, 32, 0.00);
+	color: #bd93f9;
+	font-weight: 700;
 }
 
 window#waybar.solo {
-	color: rgba(217, 216, 216, 1);
+	/* color: rgba(217, 216, 216, 1); */
 }
 
 #mode {
+	border-top: 3px solid transparent;
+	padding: 1px 2px;
 	background: #791455;
-	padding: .1em .2em;
+	/* padding: .1em .2em; */
 }
 
 #workspaces {
-	margin: 0 0px;
+	margin: 0;
+	padding: 0;
 }
 
 #workspaces button {
-	border-top: 2px solid transparent;
 	/* To compensate for the top border and still have vertical centering */
-	/* padding: .1em .1em; */
-	padding: 0;
+	border-top: 2px solid transparent;
+	padding: 0 2px;
 	color: #888888;
 }
 
@@ -47,9 +54,10 @@ window#waybar.solo {
 }
 
 #workspaces button.focused {
-	border-color: #4c7899;
+	border-top: 2px solid #bd93f9;
 	color: white;
-	background-color: #285577;
+	background-color: #6262a4;
+	font-weight: 700;
 }
 
 #workspaces button.urgent {
@@ -57,18 +65,17 @@ window#waybar.solo {
 	color: #c9545d;
 }
 
-#mode, #battery, #cpu, #memory, #network, #pulseaudio, #backlight, #custom-storage, #custom-spotify, #custom-weather, #custom-mail {
+#mode, #battery, #cpu, #memory, #pulseaudio, #backlight, #custom-storage, #custom-spotify, #custom-weather, #custom-mail {
 	margin: 0px 5px 0px 5px;
-	/* min-width: 25px; */
 	min-width: 30px;
 }
 #language {
 	margin: 0px 5px;
-	min-width: 18px;
+	min-width: 30px;
 }
 
 #clock.date {
-	margin: 0px 0px 0px 10px;
+	margin: 0px 0px 0px 5px;
 }
 #clock.time {
 	margin: 0px 10px 0px 0px
@@ -79,25 +86,42 @@ window#waybar.solo {
 		color: white;
 	}
 }
+@keyframes blink-w-cr {
+	to {
+		color: pink;
+	}
+}
 #battery.warning {
-	color: rgba(255, 210, 4, 1);
+	color: #ffbf00;
+	background-color: #282a36;
+	font-weight: bold;
+	animation: blink-w-cr 2s linear infinite alternate;
 }
 #battery.critical {
 	color: rgba(238, 46, 36, 1);
-	animation: blink .7s linear infinite alternate;
+	background-color: #282a36;
+	font-weight: bold;
+	animation: blink-w-cr .9s linear infinite alternate;
 }
 #battery.charging {
 	color: rgba(59, 176, 216, 1);
+	background-color: #282a36;
 	font-weight: bold;
-	animation: blink 1s linear infinite alternate;
+	animation: blink 2s linear infinite alternate;
+}
+
+#network {
+	/* min-width: 10px; */
+	margin: 0px 2px 0px 5px;
 }
 
 #network.disconnected {
 	color: red;
+	background-color: #282a36;
 }
 
 #network.wireguard {
-	margin: 0 3px 0 0;
+	margin: 0 3px;
 	min-width: 0;
 }
 
@@ -107,24 +131,26 @@ window#waybar.solo {
 }
 
 #custom-storage.warning {
-	color: rgba(255, 210, 4, 1);
+	color: #ffbf00;
+	background-color: #282a36;
 }
 #custom-storage.critical {
 	color: rgba(238, 46, 36, 1);
+	background-color: #282a36;
 }
 #custom-storage {
-	margin: 0 0 0 10px;
+	margin: 0 0 0 7px;
 }
 #memory {
 	margin: 0 5px;
 }
 #memory.warning {
 	color: #ffbf00;
-	background-color: #323232;
+	background-color: #282a36;
 }
 #memory.critical {
 	color: rgba(238, 46, 36, 1);
-	background-color: #323232;
+	background-color: #282a36;
 }
 #cpu {
 	/* color: #6c71c4; */
@@ -132,18 +158,19 @@ window#waybar.solo {
 }
 #cpu.warning {
 	color: #99c1f1;
-	background-color: #323232;
+	background-color: #282a36;
 }
 #cpu.critical {
 	color: rgba(238, 46, 36, 1);
-	background-color: #323232;
+	background-color: #282a36;
 }
 
 #tray {
-	margin: 0 5px 0 10px;
+	margin: 0 5px;
+	min-width: 30px;
 }
 #pulseaudio {
-	margin: 0 5px 0 5px;
+	margin: 0 2px;
 }