Rounded widgets with transparent bar

2024-10-18 22:37:29 -04:00
parent 07c8cc46d3
commit e95d0bf9a9
4 changed files with 108 additions and 24 deletions
--- a/README.org
+++ b/README.org
@@ -576,6 +576,7 @@ static const Button buttons[] = {
 killall waybar

 /usr/bin/waybar \
+    -l debug \
    -c $HOME/.config/dwl/waybar/config.jsonc \
    -s $HOME/.config/dwl/waybar/style.css &
 #+END_SRC
@@ -604,7 +605,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 +640,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 +669,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 +822,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

@@ -870,9 +889,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;
@@ -889,10 +912,12 @@ fi
 #window.title {
    background: transparent;
    color: #f8f8f2;
+    padding: 0px 10px;
 }
 #window.layout {
    background: transparent;
    color: #50fa7b;
+    padding: 0px 10px;
 }
 #+END_SRC

@@ -1006,21 +1031,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 +1195,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 +1319,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

--- a/waybar/config.jsonc
+++ b/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": [
--- a/waybar/launch.sh
+++ b/waybar/launch.sh
@@ -2,5 +2,6 @@
 killall waybar

 /usr/bin/waybar \
+    -l debug \
    -c $HOME/.config/dwl/waybar/config.jsonc \
    -s $HOME/.config/dwl/waybar/style.css &
--- a/waybar/style.css
+++ b/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;
@@ -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;
 }