add Mac OS 9 inspired styling to waybar

again, colors from https://github.com/B00merang-Project/Mac-OS-9.git
separator icon from https://github.com/BlissThatMiss/MacOSthemes.git

BUG: now the waybar glitches out when plugging in / unplugging
external monitor. Maybe it's the use of the image? Or maybe it will
fix itself with an update.

The absolute path to the sparator image is quite ugly, but I couldn't
figure out another way to do it.

1 files changed, 26 insertions, 18 deletions

diff --git a/dot-config/waybar/style.css b/dot-config/waybar/style.css
index a476547..4b6a6ee 100644
--- a/dot-config/waybar/style.css
+++ b/dot-config/waybar/style.css
@@ -1,20 +1,32 @@
+@define-color bg #DCDCDC;
+@define-color fg #000000;
+@define-color sel #9999FF;
+
 * {
-    border: none;
     border-radius: 0;
-    /*font-family: "PragmataPro Liga";*/
     font-family: "BerkeleyMono";
-    font-weight: 500;
+    font-weight: 800;
     font-size: 15px;
     min-height: 0;
 }
 
 window#waybar {
-    background: black;
-    color: white;
+    background: @bg;
+    color: @fg;
 }
 
 window#waybar > box {
-  padding: 0 8px 0 0;
+  padding: 0 8px 0 8px;
+  /* border-top: 2px solid @fg; */
+  border-bottom: 2px solid @fg;
+}
+
+.modules-left > * > * {
+  margin: 0px 4px 0px 4px;
+}
+
+.modules-right > * > * {
+  margin: 0px 6px 0px 6px;
 }
 
 #hardware * {
@@ -22,26 +34,22 @@ window#waybar > box {
 }
 
 tooltip {
-  background: rgba(43, 48, 59, 0.5);
-  border: 1px solid rgba(100, 114, 125, 0.5);
+  background: @bg;
+  border: 2px solid @fg;
 }
+
 tooltip label {
-  color: white;
+  color: @fg;
+  text-shadow: none;
 }
 
 #workspaces button {
-    padding: 0 3px;
-    background: transparent;
-    color: white;
+    padding: 0 4px;
 }
 
 #workspaces button.focused {
-    background: #658594;
-}
-
-#mode {
-    background: #64727D;
-    border-bottom: 3px solid white;
+    background: @sel;
+    color: white;
 }
 
 @keyframes blink {