sway: simplify waybar

files/waybar/.config/waybar/config

@@ -1,16 +1,4 @@
-// =============================================================================
-//
-// Waybar configuration
-//
-// Configuration reference: https://github.com/Alexays/Waybar/wiki/Configuration
-//
-// =============================================================================
-
 {
-    // -------------------------------------------------------------------------
-    // Global configuration
-    // -------------------------------------------------------------------------
-
     "layer": "bottom",
 
     "position": "left",
@@ -21,19 +9,13 @@
     "modules-center": [
     ],
     "modules-right": [
-        "backlight",
         "battery",
-        "pulseaudio",
-        "clock#date",
         "clock#time",
-        "idle_inhibitor",
-        "tray"
+        "clock#date"
     ],
 
 
-    // -------------------------------------------------------------------------
-    // Modules
-    // -------------------------------------------------------------------------
+    // MODULES
 
     "idle_inhibitor": {
         "format": "{icon}",
@@ -46,22 +28,20 @@
     "backlight": {
         // "device": "acpi_video1",
         //"format": "{icon} {percent}%",
-        "format": "BRT\n{percent}%",
+        "format": "{percent}",
         "format-icons": ["", "", "", "", "", "", "", "", ""]
     },
 
     "battery": {
-        "interval": 10,
+        "interval": 5,
         "states": {
+            "good": 100,
+            "ok": 50,
             "warning": 30,
             "critical": 15
         },
-        // Connected to AC
-        //"format": " {capacity}%", // Icon: bolt
-        "format": "CHR\n{capacity}%", // Icon: bolt
-        // Not connected to AC
-        //"format-discharging": "{icon}  {capacity}%",
-        "format-discharging": "BAT\n{capacity}%",
+        "format": "{capacity} ",
+        "format-discharging": "{capacity}",
         "format-icons": [
             "", // Icon: battery-full
             "", // Icon: battery-three-quarters
@@ -80,7 +60,7 @@
 
     "clock#date": {
       "interval": 10,
-      "format": "{:%a\n%e}",
+      "format": "{:%a, %e}",
       "tooltip-format": "{:%A, %e %B %Y}"
     },
 
@@ -93,16 +73,6 @@
         }
     },
 
-    "custom/keyboard-layout": {
-      "exec": "swaymsg -t get_inputs | grep -m1 'xkb_active_layout_name' | cut -d '\"' -f4",
-      // Interval set only as a fallback, as the value is updated by signal
-      "interval": 30,
-      "format": "  {}", // Icon: keyboard
-      // Signal sent by Sway key binding (~/.config/sway/key-bindings)
-      "signal": 1, // SIGHUP
-      "tooltip": false
-    },
-
     "memory": {
         "interval": 5,
         "format": " {percentage}% ({used:0.1f})", // Icon: memory
@@ -150,10 +120,10 @@
     "pulseaudio": {
         //"scroll-step": 1,
         //"format": "{icon} {volume}%",
-        "format": "VOL\n{volume}%",
+        //"format": "{volume}%",
         //"format-bluetooth": "{icon} {volume}% ",
-        "format-bluetooth": "BLT\n{volume}% ",
-        "format-muted": "MUT\n 0%",
+        "format-bluetooth": "{volume}% ",
+        "format-muted": "Mute",
         "format-icons": {
             "headphones": "",
             "handsfree": "",

files/waybar/.config/waybar/style.css

@@ -1,14 +1,15 @@
-/* =============================================================================
- *
- * Waybar configuration
- *
- * Configuration reference: https://github.com/Alexays/Waybar/wiki/Configuration
- *
- * =========================================================================== */
+/*
+ * Colors
+ */
 
-/* -----------------------------------------------------------------------------
- * Keyframes
- * -------------------------------------------------------------------------- */
+@define-color bg rgb (50, 50, 50);
+@define-color green rgb (147, 178, 89);
+@define-color red rgb (248, 85, 81);
+@define-color blue rgb (58, 148, 197);
+
+/*
+ * Keyframe functions
+ */
 
 @keyframes blink-warning {
     70% {
@@ -32,10 +33,9 @@
     }
 }
 
-
-/* -----------------------------------------------------------------------------
- * Base styles
- * -------------------------------------------------------------------------- */
+/*
+ * Base config
+ */
 
 /* Reset all styles */
 * {
@@ -48,13 +48,13 @@
 
 /* The whole bar */
 #waybar {
-    background: #323232;
+    background: @bg;
     color: white;
     font-family: SFMono Nerd Font;
     font-size: 13px;
 }
 
-/* Each module */
+/* All modules */
 #idle_inhibitor,
 #battery,
 #backlight,
@@ -69,16 +69,16 @@
 #window,
 #workspaces button,
 #tray {
-    border-radius: 5px;
-    background-color: #282828;
-    margin: 5px;
     padding: 10px
 }
 
+/*
+ * Modules
+ */
 
-/* -----------------------------------------------------------------------------
- * Module styles
- * -------------------------------------------------------------------------- */
+#workspaces {
+    font-size: 14px;
+}
 
 #battery {
     animation-timing-function: linear;
@@ -86,6 +86,14 @@
     animation-direction: alternate;
 }
 
+#battery.good {
+    color: @green;
+}
+
+#battery.ok{
+    color: yellow;
+}
+
 #battery.warning {
     color: orange;
 }
@@ -104,8 +112,16 @@
     animation-duration: 2s;
 }
 
-#clock {
-    /*font-weight: bold; */
+#battery.charging {
+}
+
+#clock.date {
+    font-size: 9px;
+}
+
+#clock.time {
+    font-size: 14px;
+    font-weight: bold;
 }
 
 #cpu {
@@ -177,17 +193,12 @@
 }
 
 #workspaces button.focused {
-    background-color: #93b259;
-    color: #282828;
-    border-bottom: none;
+    border-left: 2px solid @green;
+    color: #ffffff;
 }
 
 #workspaces button.urgent {
-    background-color: #f85551;
-}
-
-#workspaces button.urgent:hover {
-    background-color: #ff5569;
+    border-left: 2px solid @red;
 }
 
 /* remove weird GTK hover effect */
@@ -199,6 +210,11 @@
 }
 
 #workspaces button.focused:hover {
-    background: #a1b259;
-    border: #a1b259;
+    border-left: 2px solid @green;
+    background: #383838;
+}
+
+#workspaces button.urgent:hover {
+    border-left: 2px solid @red;
+    background: #383838;
 }