Make a new tag for productivity / email

- Remove the "media" tag
- Add productivity / email tag

README.org

@@ -51,7 +51,7 @@
     - [[#cpu][CPU]]
     - [[#clock][Clock]]
     - [[#dunst][Dunst]]
-    - [[#dwl][dwl]]
+    - [[#dwl][DWL]]
     - [[#disk][Disk]]
     - [[#idle-inhibitor][Idle Inhibitor]]
     - [[#memory][Memory]]
@@ -604,7 +604,9 @@ killall waybar
     "reload_style_on_change": true,
     "modules-left": [
         "group/power-menu",
-        "group/dwl",
+        "dwl/tags",
+        "dwl/window#title",
+        "dwl/window#layout",
     ],
     "modules-center": [
         "tray",
@@ -637,14 +639,6 @@ killall waybar
             "click-to-reveal": false,
         },
     },
-    "group/dwl": {
-        "orientation": "inherit",
-        "modules": [
-            "dwl/tags",
-            "dwl/window#title",
-            "dwl/window#layout",
-        ],
-    },
     "group/media-playing": {
         "orientation": "inherit",
         "modules": [
@@ -674,15 +668,32 @@ killall waybar
 
 #+BEGIN_SRC css :tangle waybar/style.css
 window#waybar {
+    background: transparent;
+}
+
+#window {
+    padding: 0px 0px;
+    color: transparent;
+    background: transparent;
+}
+
+widget {
     background: #282a36;
+    border-radius: 25px;
+}
+
+label.module {
+    padding: 0px 10px;
+}
+
+button {
+    border-radius: 0px;
+    padding: 0px 0px;
 }
 
 .module,button {
-    border-radius: 0px;
-    padding: 0px 4px;
     font-size: 15px;
     font-family: Ubuntu Nerd Font;
-    margin: 0px 0px;
 }
 #+END_SRC
 
@@ -810,21 +821,28 @@ window#waybar {
 **** Styling
 
 #+BEGIN_SRC css :tangle waybar/style.css
+box#dunst {
+    padding: 0px 10px;
+}
 #custom-dunst-status {
     background: transparent;
     color: #50fa7b;
+    padding: 0px 5px;
 }
 #custom-dunst-clear {
     background: transparent;
     color: #50fa7b;
+    padding: 0px 5px;
 }
 #custom-dunst-history-view {
     background: transparent;
     color: #50fa7b;
+    padding: 0px 5px;
 }
 #custom-dunst-history-clear {
     background: transparent;
     color: #50fa7b;
+    padding: 0px 5px;
 }
 #+END_SRC
 
@@ -841,14 +859,14 @@ else
 fi
 #+END_SRC
 
-*** dwl
+*** DWL
 
 **** Configuration
 
 #+BEGIN_SRC jsonc :tangle waybar/config.jsonc
     "dwl/tags": {
         "num-tags": 9,
-        "tag-labels": [ "󰍩 ₁", "󰠮 ₂", " ₃", "󰿎 ₄", "󰖟 ₅", " ₆", "󰊢 ₇", "󰊖 ₈", " ₉" ],
+        "tag-labels": [ "󰻧 ₁", "󰍩 ₂", "󰠮 ₃", " ₄", "󰖟 ₅", " ₆", "󰊢 ₇", "󰊖 ₈", " ₉" ],
         "disable-click": false
     },
     "dwl/window#title": {
@@ -870,9 +888,13 @@ fi
 **** Styling
 
 #+BEGIN_SRC css :tangle waybar/style.css
+#tags {
+    padding: 0px 10px;
+}
 #tags button {
     background: transparent;
     color: #44475a;
+    padding: 0px 5px;
 }
 #tags button.occupied {
     background: transparent;
@@ -880,7 +902,7 @@ fi
 }
 #tags button.focused {
     background: transparent;
-    color: #bd93f9;
+    box-shadow: inset 0 -3px #bd93f9;
 }
 #tags button.urgent {
     background: transparent;
@@ -889,10 +911,12 @@ fi
 #window.title {
     background: transparent;
     color: #f8f8f2;
+    padding: 0px 10px;
 }
 #window.layout {
     background: transparent;
     color: #50fa7b;
+    padding: 0px 10px;
 }
 #+END_SRC
 
@@ -1006,21 +1030,28 @@ fi
 **** Styling
 
 #+BEGIN_SRC css :tangle waybar/style.css
+box#media-playing {
+    padding: 0px 10px;
+}
 #custom-media-playing-source {
     background: transparent;
     color: #ff5555;
+    padding: 0px 5px;
 }
 #custom-media-playing-prev {
     background: transparent;
     color: #ff5555;
+    padding: 0px 5px;
 }
 #custom-media-playing-play-pause {
     background: transparent;
     color: #ff5555;
+    padding: 0px 5px;
 }
 #custom-media-playing-next {
     background: transparent;
     color: #ff5555;
+    padding: 0px 5px;
 }
 #+END_SRC
 
@@ -1163,29 +1194,38 @@ echo '{"text":"'$mediaSourceIcon'","tooltip":"󰝚\t'$title'\r󰠃\t'$artist'\r
 **** Styling
 
 #+BEGIN_SRC css :tangle waybar/style.css
+box#power-menu {
+    padding: 0px 10px;
+}
 #custom-power-menu-launcher {
     background: transparent;
     color: #8be9fd;
+    padding: 0px 5px;
 }
 #custom-power-menu-shutdown {
     background: transparent;
     color: #ff5555;
+    padding: 0px 5px;
 }
 #custom-power-menu-reboot {
     background: transparent;
     color: #50fa7b;
+    padding: 0px 5px;
 }
 #custom-power-menu-sleep {
     background: transparent;
     color: #f1fa8c;
+    padding: 0px 5px;
 }
 #custom-power-menu-lock {
     background: transparent;
     color: #ff79c6;
+    padding: 0px 5px;
 }
 #custom-power-menu-logout {
     background: transparent;
     color: #ffb86c;
+    padding: 0px 5px;
 }
 #+END_SRC
 
@@ -1278,6 +1318,7 @@ echo '{"text":"󰢮 '$graphics'","tooltip":"󰢮\t'$graphics'\r󰐥\t'$graphicsP
 #+BEGIN_SRC css :tangle waybar/style.css
 #tray {
     background: transparent;
+    padding: 0px 10px;
 }
 #+END_SRC
 

waybar/config.jsonc

@@ -13,7 +13,9 @@
     "reload_style_on_change": true,
     "modules-left": [
         "group/power-menu",
-        "group/dwl",
+        "dwl/tags",
+        "dwl/window#title",
+        "dwl/window#layout",
     ],
     "modules-center": [
         "tray",
@@ -46,14 +48,6 @@
             "click-to-reveal": false,
         },
     },
-    "group/dwl": {
-        "orientation": "inherit",
-        "modules": [
-            "dwl/tags",
-            "dwl/window#title",
-            "dwl/window#layout",
-        ],
-    },
     "group/media-playing": {
         "orientation": "inherit",
         "modules": [
@@ -148,7 +142,7 @@
 
     "dwl/tags": {
         "num-tags": 9,
-        "tag-labels": [ "󰍩 ₁", "󰠮 ₂", " ₃", "󰿎 ₄", "󰖟 ₅", " ₆", "󰊢 ₇", "󰊖 ₈", " ₉" ],
+        "tag-labels": [ "󰻧 ₁", "󰍩 ₂", "󰠮 ₃", " ₄", "󰖟 ₅", " ₆", "󰊢 ₇", "󰊖 ₈", " ₉" ],
         "disable-click": false
     },
     "dwl/window#title": {

waybar/style.css

@@ -1,13 +1,30 @@
 window#waybar {
+    background: transparent;
+}
+
+#window {
+    padding: 0px 0px;
+    color: transparent;
+    background: transparent;
+}
+
+widget {
     background: #282a36;
+    border-radius: 25px;
+}
+
+label.module {
+    padding: 0px 10px;
+}
+
+button {
+    border-radius: 0px;
+    padding: 0px 0px;
 }
 
 .module,button {
-    border-radius: 0px;
-    padding: 0px 4px;
     font-size: 15px;
     font-family: Ubuntu Nerd Font;
-    margin: 0px 0px;
 }
 
 #battery {
@@ -25,26 +42,37 @@ window#waybar {
     color: #bd93f9;
 }
 
+box#dunst {
+    padding: 0px 10px;
+}
 #custom-dunst-status {
     background: transparent;
     color: #50fa7b;
+    padding: 0px 5px;
 }
 #custom-dunst-clear {
     background: transparent;
     color: #50fa7b;
+    padding: 0px 5px;
 }
 #custom-dunst-history-view {
     background: transparent;
     color: #50fa7b;
+    padding: 0px 5px;
 }
 #custom-dunst-history-clear {
     background: transparent;
     color: #50fa7b;
+    padding: 0px 5px;
 }
 
+#tags {
+    padding: 0px 10px;
+}
 #tags button {
     background: transparent;
     color: #44475a;
+    padding: 0px 5px;
 }
 #tags button.occupied {
     background: transparent;
@@ -52,7 +80,7 @@ window#waybar {
 }
 #tags button.focused {
     background: transparent;
-    color: #bd93f9;
+    box-shadow: inset 0 -3px #bd93f9;
 }
 #tags button.urgent {
     background: transparent;
@@ -61,10 +89,12 @@ window#waybar {
 #window.title {
     background: transparent;
     color: #f8f8f2;
+    padding: 0px 10px;
 }
 #window.layout {
     background: transparent;
     color: #50fa7b;
+    padding: 0px 10px;
 }
 
 #disk {
@@ -86,46 +116,62 @@ window#waybar {
     color: #8be9fd;
 }
 
+box#media-playing {
+    padding: 0px 10px;
+}
 #custom-media-playing-source {
     background: transparent;
     color: #ff5555;
+    padding: 0px 5px;
 }
 #custom-media-playing-prev {
     background: transparent;
     color: #ff5555;
+    padding: 0px 5px;
 }
 #custom-media-playing-play-pause {
     background: transparent;
     color: #ff5555;
+    padding: 0px 5px;
 }
 #custom-media-playing-next {
     background: transparent;
     color: #ff5555;
+    padding: 0px 5px;
 }
 
+box#power-menu {
+    padding: 0px 10px;
+}
 #custom-power-menu-launcher {
     background: transparent;
     color: #8be9fd;
+    padding: 0px 5px;
 }
 #custom-power-menu-shutdown {
     background: transparent;
     color: #ff5555;
+    padding: 0px 5px;
 }
 #custom-power-menu-reboot {
     background: transparent;
     color: #50fa7b;
+    padding: 0px 5px;
 }
 #custom-power-menu-sleep {
     background: transparent;
     color: #f1fa8c;
+    padding: 0px 5px;
 }
 #custom-power-menu-lock {
     background: transparent;
     color: #ff79c6;
+    padding: 0px 5px;
 }
 #custom-power-menu-logout {
     background: transparent;
     color: #ffb86c;
+    padding: 0px 5px;
 }
 
 #pulseaudio {
@@ -140,4 +186,5 @@ window#waybar {
 
 #tray {
     background: transparent;
+    padding: 0px 10px;
 }