Update waybar style & config

2 files changed, 78 insertions, 157 deletions

diff --git a/dot-config/waybar/config.jsonc b/dot-config/waybar/config.jsonc
index 390ba25..23b72f3 100644
--- a/dot-config/waybar/config.jsonc
+++ b/dot-config/waybar/config.jsonc
@@ -1,122 +1,32 @@
-// -*- mode: jsonc -*-
+//
+// WAYBAR CONFIG
+//
+
 {
-	// "height": 10,
-		"spacing": 20,
-		"reload_style_on_change": true,
-		"modules-left": [ "niri/workspaces" ],
-		"modules-center": [],
-		"modules-right": [
-			"tray",
+	"include": ["~/.config/waybar/modules.json"],
+	"reload_style_on_change": true,
+
+	"modules-left": [
+		"custom/menu",
+		"sway/workspaces",
+		// "sway/scratchpad",
+		"niri/workspaces"
+	],
+
+	"modules-center": [],
+
+	"modules-right": [
+		"mpd",
 		"cpu",
 		"memory",
-		"network",
 		"backlight",
+		"network",
+		"bluetooth",
+		//"wireplumber#source",
 		"wireplumber",
 		"battery",
+		"clock#calendar",
 		"clock",
-		"clock#calendar"
-		],
-
-		// MODULES
-		"niri/workspaces": {
-			"format": "{value}"
-		},
-		"clock": {
-			"format": "{:%R} 󱑊 ",
-			"format-alt": "{:%r} 󱑊 "
-		},
-		"clock#calendar": {
-			"format": "{:%a %d %B}  ",
-			"format-alt": "{:%Y-%m-%d}  ",
-			"tooltip-format": "<tt><small>{calendar}</small></tt>",
-			"calendar": {
-				"mode"          : "year",
-				"mode-mon-col"  : 3,
-				"weeks-pos"     : "right",
-				"on-scroll"     : 1,
-				"format": {
-					"months":     "<span color='#ffead3'><b>{}</b></span>",
-					"days":       "<span color='#ecc6d9'><b>{}</b></span>",
-					"weeks":      "<span color='#99ffdd'><b>W{}</b></span>",
-					"weekdays":   "<span color='#ffcc66'><b>{}</b></span>",
-					"today":      "<span color='#ff6699'><b><u>{}</u></b></span>"
-				}
-			},
-			"actions":  {
-				"on-click": "mode"
-			}
-		},
-		"battery": {
-			"interval": 60,
-			"states": {
-				"warning": 20,
-				"critical": 10
-			},
-			"format": "{capacity}% {icon}",
-			"format-alt": "({time}) {capacity}% {icon}",
-			"format-icons": ["󰁺 ","󰁻 ","󰁼 ","󰁽 ","󰁾 ","󰁿 ","󰂀 ","󰂁 ","󰂂 ","󰁹 "]
-		},
-		"wireplumber": {
-			"format": "{volume}% {icon}",
-			"format-muted": " ",
-			"on-click": "pulsemixer",
-			"format-icons": [" ", " ", " "]
-		},
-		"tray": {
-			"icon-size": 21,
-			"spacing": 10,
-			"icons": {
-				"blueman": "bluetooth",
-				"TelegramDesktop": "$HOME/.local/share/icons/hicolor/16x16/apps/telegram.png"
-			}
-		},
-		"network": {
-			"format": "{ifname}",
-			"format-wifi": "{essid}  ",
-			"format-ethernet": "{ipaddr}/{cidr} 󰊗 ",
-			"format-disconnected": "", //An empty format will hide the module.
-			"tooltip-format": "{ifname} via {gwaddr} 󰊗 ",
-			"tooltip-format-wifi": "{essid} ({signalStrength}%)  ",
-			"tooltip-format-ethernet": "{ifname} " ,
-			"tooltip-format-disconnected": "Disconnected",
-			"max-length": 100
-		},
-		"memory": {
-			"interval": 30,
-			"format": "{used:0.1f}G  "
-		},
-		"cpu": {
-			"interval": 10,
-			"format": "{}%  ",
-			"max-length": 10
-		},
-		"backlight": {
-			"format": "{percent}% {icon}",
-			"format-icons": ["󱩎 ","󱩏 ","󱩐 ","󱩑 ","󱩒 ","󱩓 ","󱩔 ","󱩕 ","󱩖 ","󰛨 "]
-		},
-
-		// NOT ENABLED
-		"wlr/taskbar": {
-			"format": "{icon}",
-			"icon-size": 14,
-			"icon-theme": "Numix-Circle",
-			"tooltip-format": "{title}",
-			"on-click": "activate",
-			"on-click-middle": "close",
-			"ignore-list": [
-				"Alacritty"
-			],
-			"app_ids-mapping": {
-				"firefoxdeveloperedition": "firefox-developer-edition"
-			},
-			"rewrite": {
-				"Firefox Web Browser": "Firefox",
-				"Foot Server": "Terminal"
-			}
-		},
-		"pulseaudio/slider": {
-			"min": 0,
-			"max": 100,
-			"orientation": "horizontal"
-		}
+		"tray"
+	]
 }
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;
 }
+