Waybar config

.config/waybar/config

@@ -0,0 +1,30 @@
+{
+    "layer": "bottom",
+    "position": "top",
+    "modules-left": [],
+    "modules-center": ["sway/workspaces", "sway/mode"],
+    "modules-right": ["clock", "idle_inhibitor", "tray"],
+    "sway/workspaces": {
+        "disable-scroll": true,
+        "all-outputs": false,
+        "format": "{name}"
+    },
+    "sway/mode": {
+        "format": "<span style=\"italic\">{}</span>"
+    },
+    "idle_inhibitor": {
+    	"format": "{icon}",
+        "format-icons": {
+            "deactivated": "💤",
+            "activated": "🦉",
+            "default": ""
+         }
+    },
+    "tray": {
+        "icon-size": 24,
+        "spacing": 16
+    },
+    "clock": {
+	"format": "{:%m-%d %H:%M}",
+    }
+}

.config/waybar/style.css

@@ -0,0 +1,78 @@
+@import "../../.cache/wal/colors-waybar.css";
+
+* {
+    border: none;
+    border-radius: 0;
+    font-family: 'JetBrainsMono Nerd Font Mono';
+    font-weight: bold;
+    font-size: 16px;
+    min-height: 0;
+}
+
+window {
+    padding: 0;
+}
+
+window#waybar {
+    background-color: alpha(@background, 0.3);
+    color: @foreground;
+}
+
+window#waybar.hidden {
+    opacity: 0.2;
+}
+
+window#waybar.kitty {
+    background-color: #3F3F3F;
+}
+
+#workspaces button {
+    padding: 5px;
+    margin: 0 3px;
+    font-weight:bold;
+    background-color: alpha(@background, 0.5);
+    color: alpha(@foreground, 0.5);
+}
+
+/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
+#workspaces button:hover {
+    background: rgba(0, 0, 0, 0.2);
+    box-shadow: inherit;
+}
+
+#workspaces button.focused {
+    background-color: @background;
+    color: @foreground;
+}
+
+#mode {
+    background-color: #64727D;
+    border-top: 3px solid #ffffff;
+}
+
+#clock,
+#battery,
+#cpu,
+#memory,
+#temperature,
+#backlight,
+#network,
+#pulseaudio,
+#custom-media,
+#tray,
+#mode,
+#mpd,
+#disk,
+#idle_inhibitor {
+    padding: 0 10px;
+    margin: 0 5px;
+    color: @foreground;
+    text-shadow: 1px 1px 2px @background;
+}
+
+@keyframes blink {
+    to {
+        background-color: #ffffff;
+        color: #000000;
+    }
+}