From 979778ea9a11462f8dff3a2e110fa24f2d87a19b Mon Sep 17 00:00:00 2001
From: José Juan Loeza Sierra <jj@xz6ze.com>
Date: Fri, 20 Mar 2026 23:54:48 -0700
Subject: 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.
---
 dot-config/waybar/style.css | 44 ++++++++++++++++++++++++++------------------
 1 file changed, 26 insertions(+), 18 deletions(-)

(limited to 'dot-config/waybar/style.css')

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 {
-- 
cgit v1.3