feat(waybar): Update waybar style

.config/sway/scripts/logout.sh

@@ -14,12 +14,11 @@ choice=$(printf "%s\n" "${choices[@]}" | fuzzel -d --prompt "󰚥: ")
 
 if test "$choice" = lock ; then
     # sleep less when power on
-    # if acpi -a | grep -q on; then
+    if acpi -a | grep -q on; then
-    #     sleep_time=3600
+        sleep_time=3600
-    # else
+    else
-    #     sleep_time=10
-    # fi
         sleep_time=10
+    fi
     sleep 0.3
 
     bright=`light`

.config/swaync/config.json

@@ -1,19 +1,13 @@
 {
   "$schema": "/etc/xdg/swaync/configSchema.json",
-  "positionX": "right",
-  "positionY": "top",
   "control-center-margin-top": 12,
   "control-center-margin-bottom": 128,
   "control-center-margin-right": 8,
   "control-center-margin-left": 8,
-  "timeout": 10,
-  "timeout-low": 5,
-  "timeout-critical": 0,
-  "notification-window-width": 512,
   "keyboard-shortcuts": true,
   "image-visibility": "when-available",
   "hide-on-clear": true,
   "hide-on-action": true,
   "script-fail-notify": true,
-  "widgets": ["title", "dnd", "mpris"]
+  "widgets": ["title", "dnd", "notifications"]
 }

.config/swaync/dark.less

@@ -1,9 +1,15 @@
-@define-color border-color #a89984;
 @define-color bg #282828;
-@define-color bg-trans rgba(40, 40, 40, 0.9);
+@define-color bg-a #3c3836;
-@define-color bg-hover #3c3836;
+@define-color bg-b #504945;
-@define-color bg-focus #3c3836;
+@define-color bg-c #665c54;
-@define-color bg-selected #3c3836;
+@define-color bg-d #7c6f64;
+@define-color bg-e #928374;
+@define-color bg-h #1d2021;
 @define-color fg #ebdbb2;
 @define-color warning #d65d0e;
+@define-color warning-light #fe8019;
 @define-color primary #689d6a;
+@define-color primary-light #8ec07c;
+@define-color secondary #458588;
+@define-color secondary-light #83a598;
+@define-color gray #a89984;

.config/swaync/light.less

@@ -1,9 +1,15 @@
-@define-color border-color #928374;
 @define-color bg #fbf1c7;
-@define-color bg-trans rgba(251, 241, 199, 0.9);
+@define-color bg-a #ebdbb2;
-@define-color bg-hover #f2e5bc;
+@define-color bg-b #d5c4a1;
-@define-color bg-focus #f2e5bc;
+@define-color bg-c #bdae93;
-@define-color bg-selected #f2e5bc;
+@define-color bg-d #a89984;
+@define-color bg-e #928374;
+@define-color bg-h #f9f5d7;
 @define-color fg #3c3836;
-@define-color warning #d65d0e;
+@define-color warning #af3a03;
-@define-color primary #689d6a;
+@define-color warning-light #d65d0e;
+@define-color primary #427b58;
+@define-color primary-light #689d6a;
+@define-color secondary #076678;
+@define-color secondary-light #458588;
+@define-color gray #7c6f64;

.config/swaync/style.css

@@ -5,145 +5,380 @@
 @import "dark.less";
 
 * {
+  all: unset;
+  font-size: 14px;
+  transition: 200ms;
+}
+
+.floating-notifications.background .notification-row .notification-background {
+  box-shadow:
+    0 0 8px 0 rgba(0, 0, 0, 0.8),
+    inset 0 0 0 1px @bg-a;
+  border-radius: 12.6px;
+  margin: 18px;
+  background-color: @bg;
   color: @fg;
-  text-shadow: none;
-}
-
-.notification-row {
-  outline: none;
-  background: transparent;
-}
-.notification-row:focus,
-.notification-row:hover {
-  background: @bg-hover;
-}
-
-.notification {
-  border-radius: 2px;
-  margin: 6px 12px;
-  box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.3);
   padding: 0;
 }
 
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification {
+  padding: 7px;
+  border-radius: 12.6px;
+}
+
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification.critical {
+  box-shadow: inset 0 0 7px 0 @warning;
+}
+
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
   .notification-content {
-  background: transparent;
+  margin: 7px;
-  padding: 6px;
-  border-radius: 3px;
-}
-
-.close-button {
-  background: black;
-  color: white;
-  text-shadow: none;
-  padding: 0 2px;
-  box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.3);
-  border-radius: 50%;
-}
-.close-button:hover {
-  background: rgb(30, 30, 30);
-  transition: all 0.15s ease-in-out;
-}
-
-.notification-default-action,
-.notification-action {
-  padding: 4px;
-  margin: 0;
-  box-shadow: none;
-  background: @bg;
-  border: 1px solid @border-color;
-}
-
-.notification-default-action:hover,
-.notification-action:hover {
-  background: @bg-hover;
-}
-
-.notification-default-action {
-  border-radius: 3px;
-}
-
-/* When alternative actions are visible */
-.notification-default-action:not(:only-child) {
-  border-bottom-left-radius: 0px;
-  border-bottom-right-radius: 0px;
-}
-
-.notification-action {
-  border-radius: 0px;
-  border-top: none;
-  border-right: none;
-}
-
-/* add bottom border radius to eliminate clipping */
-.notification-action:first-child {
-  border-bottom-left-radius: 10px;
-}
-.notification-action:last-child {
-  border-bottom-right-radius: 10px;
-  border-right: 1px solid @border-color;
-}
-
-.body-image {
-  margin-top: 6px;
-  background-color: white;
-  border-radius: 3px;
 }
 
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
   .summary {
   color: @fg;
-  text-shadow: none;
 }
 
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
   .time {
-  color: @fg;
+  color: @gray;
-  text-shadow: none;
 }
 
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
   .body {
-  background: transparent;
   color: @fg;
-  text-shadow: none;
 }
 
-.control-center-clear-all {
+.floating-notifications.background
-  color: @warning;
+  .notification-row
-  text-shadow: none;
+  .notification-background
-  background: @bg;
+  .notification
-  border: 1px solid @border-color;
+  > *:last-child
-  box-shadow: none;
+  > * {
-  border-radius: 3px;
+  min-height: 3.4em;
 }
-.control-center-clear-all:hover {
+
-  background: @bg-hover;
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action {
+  border-radius: 7px;
+  color: @fg;
+  background-color: @bg-a;
+  box-shadow: inset 0 0 0 1px @bg-b;
+  margin: 7px;
+}
+
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action:hover {
+  box-shadow: inset 0 0 0 1px @bg-b;
+  background-color: @bg-a;
+  color: @fg;
+}
+
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action:active {
+  box-shadow: inset 0 0 0 1px @bg-b;
+  background-color: @primary-dark;
+  color: @fg;
+}
+
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .close-button {
+  margin: 7px;
+  padding: 2px;
+  border-radius: 6.3px;
+  color: @bg;
+  background-color: @warning;
+}
+
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .close-button:hover {
+  background-color: #eba0ac;
+  color: @bg;
+}
+
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .close-button:active {
+  background-color: @warning;
+  color: @bg;
+}
+
+.control-center {
+  box-shadow:
+    0 0 8px 0 rgba(0, 0, 0, 0.8),
+    inset 0 0 0 1px @bg-a;
+  border-radius: 12.6px;
+  margin: 18px;
+  background-color: @bg;
+  color: @fg;
+  padding: 14px;
+}
+
+.control-center .widget-title {
+  color: @fg;
+  font-size: 1.3em;
+}
+
+.control-center .widget-title button {
+  border-radius: 7px;
+  color: @fg;
+  background-color: @bg-a;
+  box-shadow: inset 0 0 0 1px @bg-b;
+  padding: 8px;
+}
+
+.control-center .widget-title button:hover {
+  box-shadow: inset 0 0 0 1px @bg-b;
+  background-color: @bg-c;
+  color: @fg;
+}
+
+.control-center .widget-title button:active {
+  box-shadow: inset 0 0 0 1px @bg-b;
+  background-color: @primary-dark;
+  color: @bg;
+}
+
+.control-center .notification-row .notification-background {
+  border-radius: 7px;
+  color: @fg;
+  background-color: @bg-a;
+  box-shadow: inset 0 0 0 1px @bg-b;
+  margin-top: 14px;
+}
+
+.control-center .notification-row .notification-background .notification {
+  padding: 7px;
+  border-radius: 7px;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification.critical {
+  box-shadow: inset 0 0 7px 0 @warning;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content {
+  margin: 7px;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .summary {
+  color: @fg;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .time {
+  color: @gray;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .body {
+  color: @fg;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > * {
+  min-height: 3.4em;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action {
+  border-radius: 7px;
+  color: @fg;
+  background-color: #11111b;
+  box-shadow: inset 0 0 0 1px @bg-b;
+  margin: 7px;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action:hover {
+  box-shadow: inset 0 0 0 1px @bg-b;
+  background-color: @bg-a;
+  color: @fg;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action:active {
+  box-shadow: inset 0 0 0 1px @bg-b;
+  background-color: @primary-dark;
+  color: @fg;
+}
+
+.control-center .notification-row .notification-background .close-button {
+  margin: 7px;
+  padding: 2px;
+  border-radius: 6.3px;
+  color: @bg;
+  background-color: @fg;
+}
+
+.control-center .notification-row .notification-background .close-button:hover {
+  background-color: @warning;
+  color: @bg;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .close-button:active {
+  background-color: @warning;
+  color: @bg;
+}
+
+.control-center .notification-row .notification-background:hover {
+  box-shadow: inset 0 0 0 1px @bg-b;
+  background-color: @bg-e;
+  color: @fg;
+}
+
+.control-center .notification-row .notification-background:active {
+  box-shadow: inset 0 0 0 1px @bg-b;
+  background-color: @primary-dark;
+  color: @fg;
+}
+
+progressbar,
+progress,
+through {
+  border-radius: 12.6px;
+}
+
+progressbar {
+  box-shadow: inset 0 0 0 1px @bg-b;
+}
+
+.notification.critical progress {
+  background-color: @warning;
+}
+
+.notification.low progress,
+.notification.normal progress {
+  background-color: @secondary-dark;
+}
+
+through {
+  background-color: @bg-a;
+}
+
+.control-center through {
+  background-color: @bg-b;
 }
 
 .control-center-dnd {
-  border-radius: 3px;
+  margin-top: 5px;
-  background: @bg;
+  border-radius: 8px;
-  border: 1px solid @border-color;
+  background: @bg-a;
+  border: 1px solid @bg-b;
   box-shadow: none;
 }
 
 .control-center-dnd:checked {
-  background: @primary;
+  background: @bg-a;
 }
+
 .control-center-dnd slider {
-  border-radius: 3px;
+  background: @bg-b;
-  background: @bg-hover;
+  border-radius: 8px;
-  border: 1px solid @border-color;
 }
 
-.control-center {
+.widget-dnd {
-  background: @bg-trans;
+  margin: 0px;
-  border-radius: 5px;
+  font-size: 1.1rem;
-  border: 1px solid @border-color;
-}
-.control-center-list {
-  background: @bg-trans;
-  border: 1px @border-color;
-  border-style: dashed solid hidden solid;
 }
 
-.floating-notifications {
+.widget-dnd > switch {
-  background: transparent;
+  font-size: initial;
+  border-radius: 8px;
+  background: @bg-a;
+  border: 1px solid @bg-b;
+  box-shadow: none;
+}
+
+.widget-dnd > switch:checked {
+  background: @bg-a;
+}
+
+.widget-dnd > switch slider {
+  background: @bg-b;
+  border-radius: 8px;
+  border: 1px solid @bg-d;
 }

.config/waybar/config.hypr

@@ -1,99 +0,0 @@
-{
-  "layer": "top",
-  "modules-left": [
-    "hyprland/workspaces"
-  ],
-  "fixed-center": false,
-  "modules-center": [
-    "hyprland/window"
-  ],
-  "modules-right": [
-    "tray",
-    "custom/notification",
-    "custom/player",
-    "cpu",
-    "memory",
-    "network",
-    "battery",
-    "clock"
-  ],
-  "hyprland/workspaces": {
-     "on-scroll-up": "hyprctl dispatch workspace e-1",
-     "on-scroll-down": "hyprctl dispatch workspace e+1",
-     "show_special": true,
-     "on-click": "activate",
-     "persistent_workspaces": {
-        "9": ["HDMI-A-1"] 
-    }
-  },
-  "hyprland/window": {
-    "max-length": 50,
-    "separate-outputs": true
-  },
-  "tray": {
-    "spacing": 10
-  },
-  "cpu": {
-    "format": "  {load}",
-    "format-alt": "  {usage}% @ {avg_frequency}GHz"
-  },
-  "memory": {
-    "format": "󰍛  {used:0.1f}G / {total:0.1f}G",
-    "format-alt": "󰓡  Swap: {swapUsed:0.1f}G / {swapTotal:0.1f}G"
-  },
-  "network": {
-    "format-wifi": "  {essid} ({signalStrength}%)",
-    "format-ethernet": "󰈀  {ifname}",
-    "format-linked": "  {ifname}",
-    "format-disconnected": "󰌙  Disconnected",
-    "format-alt": "󰩟  {ifname}: {ipaddr}/{cidr}",
-    "tooltip-format": "{ifname} via {gwaddr}"
-  },
-  "battery": {
-    "states": {
-      "good": 75,
-      "warning": 15,
-      "critical": 5
-    },
-    "format": "{icon} {capacity}%",
-    "format-charging": "🗲  {capacity}%",
-    "format-plugged": "  {capacity}%",
-    "format-alt": "{icon} ETA: {time}",
-    "format-icons": [
-      "",
-      "",
-      "",
-      "",
-      ""
-    ]
-  },
-  "clock": {
-    "format": "{:󰅐  %H:%M\t  %m-%d}",
-    "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>"
-  },
-  "custom/notification": {
-    "tooltip": true,
-    "format": "{icon}",
-    "format-icons": {
-      "notification": " <span foreground='red'><sup></sup></span> New notifications",
-      "none": "  No notifications",
-      "dnd-notification": "  DND on",
-      "dnd-none": "  DND on"
-    },
-    "return-type": "json",
-    "exec-if": "which swaync-client",
-    "exec": "swaync-client -swb",
-    "on-click": "swaync-client -t -sw",
-    "on-click-right": "swaync-client -d -sw",
-    "escape": true
-  },
-  "custom/player": {
-    "format": "󰎈  {}",
-    "return-type": "json",
-    "exec": "playerctl -a metadata --format '{\"text\": \"{{uc(playerName)}}: {{artist}} - {{markup_escape(title)}}\", \"tooltip\": \"{{playerName}} : {{markup_escape(title)}}\", \"class\": \"{{status}}\"}' -F",
-    "max-length": 35,
-    "on-click-middle": "playerctl play-pause",
-    "on-click-right": "plaerctl next",
-    "on-click-left": "playerctl previous"
-  }
-}

.config/waybar/style.css

@@ -3,9 +3,7 @@
  */
 
 * {
-  border: none;
+  font-family: "IBM Plex Mono", "Symbols Nerd Font", sans-serif;
-  border-radius: 1px;
-  font-family: "IBM Plex Sans", "Symbols Nerd Font", sans-serif;
   font-size: 14px;
   min-height: 0;
 }
@@ -22,8 +20,12 @@ window#waybar {
   margin: 5px 10px;
 }
 
+#window {
+  font-weight: bold;
+}
+
 #workspaces button {
-  padding: 0 2px;
+  padding: 0 0.1em;
   background: transparent;
   color: @background_b;
 }
@@ -51,11 +53,11 @@ window#waybar {
 }
 
 #clock {
-  color: @cyan;
+  color: @foreground;
 }
 
 #battery {
-  color: @blue;
+  color: @cyan;
 }
 
 #battery.charging {
@@ -70,22 +72,25 @@ window#waybar {
 }
 
 #battery.warning:not(.charging) {
-  color: @background;
-  background-color: red;
-  animation-name: blink;
-  animation-duration: 0.5s;
-  animation-timing-function: linear;
-  animation-iteration-count: infinite;
   animation-direction: alternate;
+  animation-duration: 0.5s;
+  animation-iteration-count: infinite;
+  animation-name: blink;
+  animation-timing-function: linear;
+  background-color: red;
+  color: @background;
+  font-weight: bold;
 }
 
 #network.disconnected,
 #network.disabled {
   color: @red;
+  font-weight: bold;
 }
 
 #network.wifi {
   color: @green;
+  font-style: italic;
 }
 
 #clock,

.config/waybar/sway-modules.json

@@ -0,0 +1,72 @@
+{
+  "sway/workspaces": {
+    "show_special": true,
+    "on-click": "activate"
+  },
+  "sway/window": {
+    "max-length": 50
+  },
+  "tray": {
+    "spacing": 10
+  },
+  "cpu": {
+    "format": " {load}",
+    "format-alt": " {usage}% @ {avg_frequency}GHz"
+  },
+  "memory": {
+    "format": "󰍛 {used:0.1f}G / {total:0.1f}G",
+    "format-alt": "󰓡 Swap: {swapUsed:0.1f}G / {swapTotal:0.1f}G"
+  },
+  "network": {
+    "format-wifi": " {essid} ({signalStrength}%)",
+    "format-ethernet": "󰈀 {ifname}",
+    "format-linked": " {ifname}",
+    "format-disconnected": "󰌙 Disconnected",
+    "format-alt": "󰩟 {ifname}: {ipaddr}/{cidr}",
+    "tooltip-format": "{ifname} via {gwaddr}"
+  },
+  "battery": {
+    "states": {
+      "good": 75,
+      "warning": 15,
+      "critical": 5
+    },
+    "format": "{icon} {capacity}%",
+    "format-charging": "󰉁 {capacity}%",
+    "format-plugged": " {capacity}%",
+    "format-alt": "{icon} ETA: {time}",
+    "format-icons": ["", "", "", "", ""]
+  },
+  "clock": {
+    "format": "{:󰅐 %H:%M   %m-%d}",
+    "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>"
+  },
+  "custom/notification": {
+    "tooltip": true,
+    "format": "{icon}",
+    "format-icons": {
+      "notification": " <span foreground='red'><sup></sup></span> <span weight=\"bold\">Unread</span>",
+      "none": "  <span style=\"italic\">Empty</span>",
+      "dnd-notification": "  <span style=\"italic\">DND on</span>",
+      "dnd-none": "  <span style=\"italic\">DND on</span>"
+    },
+    "return-type": "json",
+    "exec-if": "which swaync-client",
+    "exec": "swaync-client -swb",
+    "on-click": "swaync-client -t -sw",
+    "on-click-right": "swaync-client -d -sw",
+    "escape": true
+  },
+  "custom/player": {
+    "format": "{icon} <span style=\"italic\">{}</span>",
+    "format-icons": {
+      "Playing": "󰎈 ",
+      "Paused": "󰏤 "
+    },
+    "return-type": "json",
+    "exec": "playerctl -a metadata --format '{\"text\": \"{{playerName}}: {{artist}} - {{markup_escape(title)}}\", \"tooltip\": \"{{markup_escape(title)}} - {{markup_escape(album)}}\", \"class\": \"{{status}}\", \"alt\": \"{{status}}\" }' -F",
+    "max-length": 40,
+    "on-click": "playerctl play-pause",
+    "on-click-right": "pavucontrol"
+  }
+}