waybar: Rewrite configuration for hyprland

2 files changed, 77 insertions, 67 deletions

diff --git a/.config/waybar/config b/.config/waybar/config
index 5bf708d..2cee81c 100644
--- a/.config/waybar/config
+++ b/.config/waybar/config
@@ -1,62 +1,33 @@
-// -*- mode: json -*-
+// -*- mode: js-json -*-
 
 {
     "layer": "top",
     "position": "top",
 
     "modules-left": [
-	"sway/workspaces",
-	"custom/right-arrow-dark"
+	"hyprland/workspaces"
     ],
     "modules-center": [
-	"custom/left-arrow-dark",
-	"clock#1",
-	"custom/left-arrow-light",
-	"custom/left-arrow-dark",
-	"clock#2",
-	"custom/right-arrow-dark",
-	"custom/right-arrow-light",
-	"clock#3",
-	"custom/right-arrow-dark"
+	"clock#3"
     ],
     "modules-right": [
-	"custom/left-arrow-dark",
 	"pulseaudio",
-	"custom/left-arrow-light",
-	"custom/left-arrow-dark",
 	"memory",
-	"custom/left-arrow-light",
-	"custom/left-arrow-dark",
 	"cpu",
-	"custom/left-arrow-light",
-	"custom/left-arrow-dark",
 	"battery",
-	"custom/left-arrow-light",
 	"tray"
     ],
 
-    "custom/left-arrow-dark": {
-	"format": "",
-	"tooltip": false
-    },
-    "custom/left-arrow-light": {
-	"format": "",
-	"tooltip": false
-    },
-    "custom/right-arrow-dark": {
-	"format": "",
-	"tooltip": false
+    // Modules // 
+    "hyprland/workspaces": {
+	"format": "{name}",
+	"active-only": false,
+	"all-outputs": false,
+	"show-special": false,
+	"on-click": "activate",
+	"on-scroll-up": "hyprctl dispatch workspace e+1",
+	"on-scroll-down": "hyprctl dispatch workspace e-1"
     },
-    "custom/right-arrow-light": {
-	"format": "",
-	"tooltip": false
-    },
-
-    "sway/workspaces": {
-	"disable-scroll": true,
-	"format": "{name}"
-    },
-
     "clock#1": {
 	"format": "{:%a}",
 	"tooltip": false
@@ -66,7 +37,7 @@
 	"tooltip": false
     },
     "clock#3": {
-	"format": "{:%y/%m/%d}",
+	"format": "{:%a %H:%M | %y/%m/%d}",
 	"tooltip": false
     },
 
diff --git a/.config/waybar/style.css b/.config/waybar/style.css
index 4c6cbf0..c98ace6 100644
--- a/.config/waybar/style.css
+++ b/.config/waybar/style.css
@@ -1,53 +1,92 @@
 * {
-	font-size: 15px;
+	font-size: 17px;
 	font-family: monospace;
 }
 
 window#waybar {
-	background: #292b2e;
+	background: transparent;
 	color: #fdf6e3;
 }
 
-#custom-right-arrow-dark,
-#custom-left-arrow-dark {
-	color: #1a1a1a;
-}
-#custom-right-arrow-light,
-#custom-left-arrow-light {
-	color: #292b2e;
-	background: #1a1a1a;
-}
-
 #workspaces,
-#clock.1,
-#clock.2,
-#clock.3,
 #pulseaudio,
 #memory,
 #cpu,
 #battery,
 #disk,
+#clock.1,
+#clock.2,
+#clock.3,
+#tray {
+    background: #000000;
+    border-radius: 20px; /* Adjust the value for more or less rounding */
+    margin: 3px;
+    border: 2px solid;
+}
+
 #tray {
-	background: #1a1a1a;
+    border-color: transparent;
 }
 
+
+#clock.1,
+#clock.2,
+#clock.3 {
+    color:  #2fafff;
+    margin: 3px;
+    border-radius: 20px;
+}
+
+#clock.2 {
+    font-size: 20px;
+    border-color: transparent;
+    background: transparent;
+}
+
+#workspaces {
+    border-color: #2fafff;
+}
 #workspaces button {
-	padding: 0 2px;
-	color: #fdf6e3;
+    color:  #989898;
+    box-shadow: none;
+    text-shadow: none;
+    padding: 3px;
+    border-radius: 9px;
+    padding-left: 4px;
+    padding-right: 4px;
+    animation: border-pulse 20s ease-in infinite;
+    transition: all 0.5s cubic-bezier(.55,-0.68,.48,1.682);
+}
+
+#workspaces button.active {
+    color: #338fff;
+    border-radius: 50%;
+    background-color: black;
+    padding-left: 8px;
+    padding-right: 8px;
+    animation: border-pulse 20s ease-in infinite;
+    transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
 }
+
 #workspaces button.focused {
-	color: #268bd2;
+    color: #d8dee9;
 }
-#workspaces button:hover {
-	box-shadow: inherit;
-	text-shadow: inherit;
+
+#workspaces button.urgent {
+    color: #11111b;
+    border-radius: 10px;
 }
+
 #workspaces button:hover {
-	background: #1a1a1a;
-	border: #1a1a1a;
-	padding: 0 3px;
+    color: #9CCFD8;
+    border-radius: 15px;
+    padding-left: 2px;
+    padding-right: 2px;
+    animation: gradient_f 20s ease-in infinite;
+    transition: all 0.3s cubic-bezier(.55,-0.68,.48,1.682);
 }
 
+
 #pulseaudio {
 	color: #268bd2;
 }