style: Waybar config and styling

.config/waybar/config

@@ -0,0 +1,93 @@
+// For Arch users: Compile waybar with `-Dexperimental=true` flag!
+{
+    "layer": "top",
+    "height": 28, // Waybar height (to be removed for auto height)
+    "spacing": 0, // Gaps between modules (4px)
+    "modules-left": ["wlr/workspaces", "custom/media"],
+    "modules-center": ["hyprland/window"],
+    "modules-right": ["idle_inhibitor", "pulseaudio", "network", "disk", "memory", "temperature", "clock", "tray"],
+    "wlr/workspaces": {
+        "format": "{icon}",
+        "on-click": "activate",
+	"sort-by-number": true
+    },
+    "keyboard-state": {
+        "numlock": true,
+        "capslock": true,
+        "format": "{name} {icon}",
+        "format-icons": {
+            "locked": "",
+            "unlocked": ""
+        }
+    },
+    "idle_inhibitor": {
+        "format": "{icon}",
+        "format-icons": {
+            "activated": "",
+            "deactivated": ""
+        }
+    },
+    "disk": {
+    	"interval": 30,
+	"format": "{free} free 󰋊"
+    },
+    "tray": {
+        // "icon-size": 21,
+        "spacing": 10
+    },
+    "clock": {
+        // "timezone": "America/New_York",
+        "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
+	"format": "{:%a, %d %b %Y • %H:%M %Z} 󰥔",
+        "format-alt": "{:%Y-%m-%d} 󰥔"
+    },
+    "memory": {
+        "format": "{}% 󰍛"
+    },
+    "temperature": {
+        // "thermal-zone": 2,
+        // "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input",
+        "critical-threshold": 80,
+        // "format-critical": "{temperatureC}°C {icon}",
+        "format": "{temperatureC}°C {icon}",
+        "format-icons": ["󱃃", "󰔏", "󱃂"]
+    },
+    "network": {
+        // "interface": "wlp2*", // (Optional) To force the use of this interface
+        "format-wifi": "{essid} ({signalStrength}%) 󰤨",
+        "format-ethernet": "󰌘",
+        "tooltip-format": "{ifname} via {gwaddr}",
+        "format-linked": "󰌚",
+        "format-disconnected": "󰌙",
+        "format-alt": "{ipaddr}/{cidr} 󰌘"
+    },
+    "pulseaudio": {
+        // "scroll-step": 1, // %, can be a float
+        "format": "{volume}% {icon} {format_source}",
+        "format-muted": "󰝟 {format_source}",
+        "format-source": "{volume}% 󰍬",
+        "format-source-muted": "󰍭",
+        "format-icons": {
+            "headphone": "",
+            "hands-free": "",
+            "headset": "",
+            "phone": "",
+            "portable": "",
+            "car": "",
+            "default": ["󰕿", "󰖀", "󰕾"]
+        },
+        "on-click": "pavucontrol"
+    },
+    "custom/media": {
+        "format": "{icon} {}",
+        "return-type": "json",
+        "max-length": 40,
+        "format-icons": {
+            "spotify": "",
+            "default": "🎜"
+        },
+        "escape": true,
+        "exec": "$HOME/.config/waybar/mediaplayer.py 2> /dev/null" // Script in resources folder
+        // "exec": "$HOME/.config/waybar/mediaplayer.py --player spotify 2> /dev/null" // Filter player based on name
+    }
+}

.config/waybar/style.css

@@ -0,0 +1,62 @@
+* {
+    font-family: Sarasa Term J, Iosevka Nerd Font, monoscope;
+    font-weight: bold;
+}
+
+window#waybar {
+    background-color: rgba(43, 48, 59, 0.5);
+    color: #ffffff;
+    transition-property: background-color;
+    transition-duration: .5s;
+}
+
+#workspaces {
+    background-color: #0E1418;
+    border-radius: 6px;
+}
+
+#workspaces button {
+    padding: 0 5px;
+    background-color: transparent;
+    color: #ffffff;
+    border-radius: 6px;
+    border-bottom: 3px solid transparent;
+}
+
+#workspaces button:hover {
+    background: #2c363d;
+    border-bottom: 3px solid #FFF;
+}
+
+#workspaces button.active {
+    border-bottom: 3px solid #08A5DE;
+}
+
+#workspaces button.urgent {
+    background-color: #eb4d4b;
+}
+
+#clock,
+#battery,
+#cpu,
+#memory,
+#disk,
+#temperature,
+#backlight,
+#network,
+#pulseaudio,
+#wireplumber,
+#custom-media,
+#tray,
+#mode,
+#idle_inhibitor,
+#scratchpad,
+#mpd {
+    padding: 0 10px;
+    color: #ffffff;
+}
+
+box.modules-right {
+    background-color: #0E1418;
+    border-radius: 6px;
+}