waybar: tweaks to appearance

waybar/config

@@ -8,11 +8,7 @@
     "hyprland/workspaces",
     "wlr/taskbar"
   ],
-  "modules-center": [
+  "modules-center": [],
-    "custom/spotify",
-    "custom/toggl",
-    "custom/wakatime"
-  ],
   "modules-right": [
     "network",
     "bluetooth",
@@ -22,7 +18,10 @@
     "temperature",
     "backlight",
     "battery",
-    "clock"
+    "custom/wakatime",
+    "clock",
+    "idle_inhibitor",
+    "custom/logout"
   ],
   "wlr/taskbar": {
     "format": "{icon} {name}",
@@ -78,17 +77,13 @@
     "tooltip-format-disconnected": "MPD (disconnected)"
   },
   "idle_inhibitor": {
-    "format": "{icon}",
+    "format": "󰈈"
-    "format-icons": {
-      "activated": "",
-      "deactivated": ""
-    }
   },
   "tray": {
     "spacing": 10
   },
   "clock": {
-    "format": "{: %H:%M }",
+    "format": "{:󰖉 %H:%M }",
     "format-alt": "{: %d/%m/%Y}"
   },
   "cpu": {
@@ -128,15 +123,14 @@
       "critical": 15
     },
     "format": "{icon} {capacity}%",
-    "format-charging": "  {capacity}%",
+    "format-charging": "󰂈 {capacity}%",
-    "format-plugged": "  {capacity}%",
+    "format-plugged": "󰂄 {capacity}%",
-    "format-alt": "{time} {icon}",
     "format-icons": [
-      "",
+      "󰁻",
-      "",
+      "󰁼",
-      "",
+      "󰁿",
-      "",
+      "󰂀",
-      ""
+      "󰁹"
     ]
   },
   "battery#bat2": {
@@ -210,7 +204,7 @@
   },
   "custom/wakatime": {
     "exec": "source $HOME/dotfiles/.env && python3 $HOME/.config/waybar/resources/custom_modules/wakatime.py",
-    "format": "  {}",
+    "format": "󰅱 {}",
     "return-type": "json",
     "interval": 600
   },
@@ -219,5 +213,10 @@
     "format": "{}",
     "return-type": "json",
     "interval": 600
+  },
+  "custom/logout": {
+    "format": "󰠜",
+    "on-click": "wlogout",
+    "tooltip": false
   }
 }

waybar/style.css

@@ -1,6 +1,5 @@
 * {
-  font-family: FontAwesome, "PragmataPro Mono Liga", Roboto, Helvetica, Arial,
+  font-family: "PragmataPro Mono Liga", Roboto, Helvetica, Arial, sans-serif;
-    sans-serif;
   font-size: 16px;
 }
 
@@ -29,8 +28,9 @@ button {
 
 #workspaces button {
   padding: 2px 3px;
-  color: #282828;
+  /* color: #282828; */
-  background-color: #928374;
+
+  background-color: #3c3836;
   margin-right: 5px;
   margin-top: 6px;
   margin-bottom: 6px;
@@ -45,11 +45,12 @@ button {
   padding: 3px 8px;
   margin-top: 6px;
   margin-bottom: 6px;
+  border-bottom: 2px solid #3c3836;
 }
 
 #taskbar button.active {
-  background-color: #98971a;
+  border-bottom: 2px solid #98971a;
-  color: #282828;
+  color: #98971a;
 
   /* padding: 3px 10px;
   margin-top: 6px;
@@ -76,7 +77,8 @@ button {
 #user,
 #bluetooth,
 #custom-wakatime,
-#custom-toggl {
+#custom-toggl,
+#custom-logout {
   font-weight: 400;
   padding: 3px 10px;
   margin-left: 4px;
@@ -84,6 +86,15 @@ button {
   margin-bottom: 6px;
 }
 
+#custom-wakatime {
+}
+
+#custom-logout {
+  margin-right: 8px;
+  background-color: #ebdbb2;
+  color: #282828;
+}
+
 #custom-os {
   font-weight: 400;
   padding: 3px 10px;
@@ -99,30 +110,35 @@ button {
 }
 
 #clock {
-  background-color: #689d6a;
+  color: #fb4934;
 
-  color: #1d2021;
+  /* color: #1d2021; */
-  margin-right: 8px;
+  /* margin-right: 8px; */
+  margin-right: 4px;
 }
 
 #bluetooth {
-  background-color: #d65d0e;
+  border-right: 1px solid #504945;
-  color: #1d2021;
+  color: #689d6a;
+
+  /* color: #282828; */
 }
 
 #battery {
-  background-color: #b16286;
+  color: #b16286;
-  color: #f2e5bc;
+  border-right: 1px solid #504945;
+  padding-right: 14px;
+  /* color: #282828; */
 }
 
 #battery.charging,
 #battery.plugged {
-  background-color: #b16286;
+  color: #b16286;
-  color: #f2e5bc;
+  /* color: #282828; */
 }
 
 #battery.critical:not(.charging) {
-  background-color: #ea6962;
+  background-color: #fb4934;
   color: #f2e5bc;
   animation-name: blink;
   animation-duration: 0.5s;
@@ -132,37 +148,37 @@ button {
 }
 
 #cpu {
-  background-color: #d79921;
+  color: #d79921;
-  color: #282828;
+  /* color: #282828; */
   /* color: #282828; */
 }
 
 #memory {
-  background-color: #d79921;
+  color: #d79921;
-  color: #282828;
+  /* color: #282828; */
 }
 
 #disk {
-  background-color: #d79921;
+  color: #d79921;
-  color: #282828;
+  /* color: #282828; */
 }
 
 #backlight {
-  background-color: #b16286;
+  color: #b16286;
-  color: #f2e5bc;
+  /* color: #282828; */
 }
 
 #network {
-  background-color: #d65d0e;
+  color: #689d6a;
-  color: #1d2021;
+  /* color: #282828; */
 }
 
 #network.format.icons {
-  background-color: red;
+  background-color: #fb4934;
 }
 
 #network.disconnected {
-  background-color: #ea6962;
+  background-color: #fb4934;
 }
 
 #user {
@@ -176,22 +192,24 @@ button {
 }
 
 #temperature {
-  background-color: #d79921;
+  color: #d79921;
-  color: #282828;
+  border-right: 1px solid #504945;
+  padding-right: 14px;
 }
 
 #temperature.critical {
   color: #282c34;
-  background-color: #e06c75;
+  background-color: #fb4934;
 }
 
 #idle_inhibitor {
-  background-color: #2d3436;
+  background-color: #3c3836;
+  padding-right: 14px;
 }
 
 #idle_inhibitor.activated {
-  background-color: #abb2bf;
+  background-color: #98971a;
-  color: #2d3436;
+  color: #282828;
 }
 
 #custom-os {
@@ -201,9 +219,9 @@ button {
 }
 
 #custom-wakatime {
-  background-color: #b16286;
+  color: #d65d0e;
-  color: #f2e5bc;
+  border-right: 1px solid #504945;
-  margin-right: 4px;
+  padding-right: 14px;
 }
 
 #custom-toggl {