Waybar: Style occupied workspaces differently

1 files changed, 24 insertions, 15 deletions

diff --git a/dotfiles/waybar/style.css b/dotfiles/waybar/style.css
index 01fded6..2e78598 100644
--- a/dotfiles/waybar/style.css
+++ b/dotfiles/waybar/style.css
@@ -5,7 +5,8 @@
 	border-radius: 0;
 }
 
-window#waybar {
+#window,
+#waybar {
 	background: #222222;
 	color: #bbbbbb;
 }
@@ -24,35 +25,43 @@ window#waybar {
 	margin: 0 0;
 }
 
+/* This is for occupied (but not focused) workspaces */
 #workspaces button {
+	border: none;
+	border-radius: 0;
 	padding: 0 7px;
 	margin: 0;
 	color: #bbbbbb;
+	/* 4px is the white line height */
+	background: linear-gradient(transparent 0%, transparent calc(100% - 4px), white calc(100% - 4px), white 100%);
+	/* 57% is the white line width */
+	background-size: 57% 100%, 100% 100%;
+	background-repeat: no-repeat;
+	background-position: center bottom;
 }
 
-#workspaces button.occupied {
-	border-top: 4px solid #bbbbbb;
-	margin: 0;
-	padding: 0 7px;
-}
-
-#workspaces button.focused, #workspaces button.focused:hover {
-	border-top: 0;
+#workspaces button.focused {
+	border: none;
+	border-radius: 0;
 	margin: 0;
 	padding: 0 7px;
 	color: #222222;
 	background: #bbbbbb;
+	border-bottom: 0px;
 }
 
-#workspaces button:hover {
-	background: inherit;
-	color: inherit;
+button:hover {
 	box-shadow: inherit;
 	text-shadow: inherit;
+	background: inherit;
 }
 
-#battery.critical:not(.charging) {
-    background-color: darkred;
-    color: #ffffff;
+#workspaces button.persistent {
+	border: 0;
+	background: #222222;
 }
 
+#battery.critical:not(.charging) {
+	background-color: darkred;
+	color: #ffffff;
+}