delete borders of waybar

eww/Lyrics/eww.yuck

@@ -90,6 +90,6 @@
     :windowtype "normal"
     :wm-ignore true
     :monitor 0
-    :geometry (geometry :x 1100 :y -48)
+    :geometry (geometry :x 1108 :y -45)
     (lyrics-single)
 )

hypr/hyprland/general.conf

@@ -36,7 +36,7 @@ gestures {
 general {
     # Gaps and border
     gaps_in = 2
-    gaps_out = 0, 4, 4, 4
+    gaps_out = 0
     gaps_workspaces = 50
     border_size = 2
 

hypr/hyprland/monitors.conf

@@ -6,7 +6,7 @@ monitor=eDP-2,2560x1600@240,auto,1.25,bitdepth,10
 
 monitorv2 {
     output = eDP-1
-    mode = 1920x1200@240
+    mode = 2560x1600@240
     scale = 1.25
     bitdepth = 10
 

waybar/config.jsonc

@@ -8,12 +8,23 @@
   "margin-bottom": 0,
   "margin-right": 0,
   "spacing": 2, // Gaps between modules (px)
-  "modules-left": ["custom/rofi", "group/workspaceactions", "hyprland/window", "custom/mediaplayer"],
+  "modules-left": [
+    "custom/rofi",
+    "custom/separator",
+    "group/workspaceactions",
+    "custom/separator",
+    "hyprland/window",
+    "custom/mediaplayer"
+  ],
   "modules-center": ["clock"],
-  "modules-right": ["group/monitors", "tray", "idle_inhibitor", "custom/power"],
+  "modules-right": ["group/monitors", "custom/separator", "tray", "custom/separator", "idle_inhibitor", "custom/power"],
   // -------------------------------------------------------------------------
   // Modules
   // -------------------------------------------------------------------------
+  // Separators
+  "custom/separator": {
+    "format": "|"
+  },
   // Buttons
   "custom/power": {
     "format": "󰐥",

waybar/style.css

@@ -45,9 +45,12 @@ tooltip {
 #custom-rofi,
 #idle_inhibitor,
 #custom-power {
-  background-color: alpha(@base, 0.6);
-  border-radius: 14px;
-  padding: 1px 10px;
+  padding: 0px 10px;
+}
+
+#custom-separator {
+  padding: 0px 5px;
+  font-size: 20px;
 }
 
 #custom-rofi,
@@ -55,6 +58,7 @@ tooltip {
 #custom-power {
   padding-left: 6px;
   padding-right: 6px;
+  font-size: 18px;
 }
 
 #custom-workspacenew,
@@ -62,7 +66,7 @@ tooltip {
   padding: 0px 5px;
   margin: 3px 3px;
   border-radius: 8px;
-  color: @text;
+  color: @flavor;
   background-color: transparent;
   transition: all 0.3s ease-in-out;
 }
@@ -84,7 +88,6 @@ tooltip {
 #workspaceactions {
   padding-left: 1px;
   padding-right: 1px;
-  border: 2px solid @flavor;
 }
 
 #workspaces {
@@ -144,12 +147,8 @@ window#waybar.empty #window {
   color: @lavender;
 }
 
-#tray {
-  border: 2px solid @flavor;
-}
-
 #custom-power {
-  border: 3px solid @maroon;
+  color: @maroon;
 }
 
 #custom-power:hover {
@@ -158,7 +157,6 @@ window#waybar.empty #window {
 
 #custom-rofi {
   color: @archlinux;
-  border: 3px solid @archlinux;
 }
 
 #custom-rofi:hover {
@@ -166,7 +164,7 @@ window#waybar.empty #window {
 }
 
 #idle_inhibitor {
-  border: 3px solid @yellow;
+  color: @yellow;
 }
 
 #idle_inhibitor:hover {
@@ -174,7 +172,7 @@ window#waybar.empty #window {
 }
 
 #idle_inhibitor.activated {
-  border: 3px solid @peach;
+  color: @peach;
 }
 
 #clock {

waybar/style.css.template

@@ -45,9 +45,12 @@ tooltip {
 #custom-rofi,
 #idle_inhibitor,
 #custom-power {
-  background-color: alpha(@base, 0.6);
-  border-radius: 14px;
-  padding: 1px 10px;
+  padding: 0px 10px;
+}
+
+#custom-separator {
+  padding: 0px 5px;
+  font-size: 20px;
 }
 
 #custom-rofi,
@@ -55,6 +58,7 @@ tooltip {
 #custom-power {
   padding-left: 6px;
   padding-right: 6px;
+  font-size: 18px;
 }
 
 #custom-workspacenew,
@@ -62,7 +66,7 @@ tooltip {
   padding: 0px 5px;
   margin: 3px 3px;
   border-radius: 8px;
-  color: @text;
+  color: @flavor;
   background-color: transparent;
   transition: all 0.3s ease-in-out;
 }
@@ -84,7 +88,6 @@ tooltip {
 #workspaceactions {
   padding-left: 1px;
   padding-right: 1px;
-  border: 2px solid @flavor;
 }
 
 #workspaces {
@@ -144,12 +147,8 @@ window#waybar.empty #window {
   color: @lavender;
 }
 
-#tray {
-  border: 2px solid @flavor;
-}
-
 #custom-power {
-  border: 3px solid @maroon;
+  color: @maroon;
 }
 
 #custom-power:hover {
@@ -158,7 +157,6 @@ window#waybar.empty #window {
 
 #custom-rofi {
   color: @archlinux;
-  border: 3px solid @archlinux;
 }
 
 #custom-rofi:hover {
@@ -166,7 +164,7 @@ window#waybar.empty #window {
 }
 
 #idle_inhibitor {
-  border: 3px solid @yellow;
+  color: @yellow;
 }
 
 #idle_inhibitor:hover {
@@ -174,7 +172,7 @@ window#waybar.empty #window {
 }
 
 #idle_inhibitor.activated {
-  border: 3px solid @peach;
+  color: @peach;
 }
 
 #clock {