Update waybar style & config

1 files changed, 54 insertions, 43 deletions

diff --git a/dot-config/waybar/style.css b/dot-config/waybar/style.css
index 49ca5af..01782c1 100644
--- a/dot-config/waybar/style.css
+++ b/dot-config/waybar/style.css
@@ -1,61 +1,72 @@
+/* GTK Colours */
+@define-color fg #eee;
+@define-color mg #444;
+@define-color bg #000;
+
 * {
-    font-family: "Hack Nerd Font", "Hack", monospace;
-    font-size: 12px;
-		box-shadow: none;
+	font-family: "Hack Nerd Font", "Hack", monospace;
+	font-size: 12px;
+	font-weight: bold;
+	text-shadow: 1px 1px @bg;
+
+	box-shadow: none;
+	transition-property: background;
+	transition-duration: .5s;
 }
 
+/* Colours */
+
+/* #battery { color: mediumpurple; } */
+/* #clock { color: lightblue; } */
+/* #clock.calendar { color: pink; } */
+/* #wireplumber { color: #f1c40f; } */
+/* #network.linked{ color: seagreen; } */
+/* #network.disconnected{ color: red; } */
+/* #bluetooth { color: royalblue; } */
+
+/* Bar */
 window#waybar {
-    background-color: #000;
-    border-bottom: 1px solid #444;
-    color: #eee;
-    transition-property: background-color;
-    transition-duration: .5s;
+	background: transparent;
+	color: @fg;
+	/* border-top: 1px solid @fg; */
 }
 
-/* WORKSPACES */
-#workspaces button {
-    padding: 0 8px;
-    background-color: transparent;
-    color: #aaa;
-		border: 1px solid black;
-		border-radius: 5px;
-		margin: 1px 0;
+label.module {
+	padding: 0 10px;
 }
 
-#workspaces button:hover {
-    background: #fff;
-		color: #000;
-		border: 1px solid black;
+#tray {
+	background: @bg;
+	border: 1px solid @fg;
+	border-radius: 5px;
+	padding: 0 8px;
 }
 
-#workspaces button.focused {
-    border: 1px solid white;
-    box-shadow: none;
-    color: #fff;
+#custom-menu {
+	padding:0 14px 0 10px;
 }
 
-#workspaces button.urgent {
-    background-color: #eb4d4b;
+#custom-menu:hover {
+	background: @fg;
+	color: @bg;
 }
 
+/* WORKSPACES */
+#workspaces button {
+	padding: 0 6px;
+	border-radius: 0;
+}
 
-/* PULSEAUDIO SLIDER */
-#pulseaudio-slider slider {
-    min-height: 0px;
-    min-width: 0px;
-    opacity: 0;
-    background-image: none;
-    border: none;
-    box-shadow: none;
+#workspaces button.focused {
+	border-bottom: 1px solid @fg;
 }
-#pulseaudio-slider trough {
-    min-height: 10px;
-    min-width: 80px;
-    border-radius: 5px;
-    background-color: black;
+
+#workspaces button:hover {
+	background: @fg;
+	color: @bg;
 }
-#pulseaudio-slider highlight {
-    min-width: 10px;
-    border-radius: 5px;
-    background-color: green;
+
+#workspaces button.urgent {
+	color: red;
 }
+