style: redesigned waybar

3 files changed, 47 insertions, 48 deletions

diff --git a/dot-config/waybar/config.jsonc b/dot-config/waybar/config.jsonc
index 533f3e18..a33879ba 100644
--- a/dot-config/waybar/config.jsonc
+++ b/dot-config/waybar/config.jsonc
@@ -8,7 +8,7 @@
     "margin-bottom": 0,
     "margin-left": 25,
     "margin-right": 25,
-    "modules-left": ["custom/launcher", "group/musicworkspace", "privacy"],
+    "modules-left": ["group/musicworkspace", "privacy"],
     "modules-center": ["hyprland/window"],
     "modules-right": ["cpu", "memory", "custom/gpu", "temperature", "network", "group/misc", "group/power"],
     "reload_style_on_change": true,
diff --git a/dot-config/waybar/modules.jsonc b/dot-config/waybar/modules.jsonc
index 098b7c39..c31ef5bc 100644
--- a/dot-config/waybar/modules.jsonc
+++ b/dot-config/waybar/modules.jsonc
@@ -71,7 +71,6 @@
     "group/musicworkspace": {
         "orientation": "horizontal",
         "modules": ["hyprland/workspaces", "mpris"],
-        "drawer": {}
     },
 
     "memory": {
diff --git a/dot-config/waybar/style.css b/dot-config/waybar/style.css
index 344f3332..3db973a1 100644
--- a/dot-config/waybar/style.css
+++ b/dot-config/waybar/style.css
@@ -13,13 +13,29 @@
 }
 
 .module {
-    background: @BACKGROUND;
-    border-radius: 8px;
+    background-color: @color3;
     margin: 4px;
     padding: 4px 4px 4px 4px;
-    border: 2px solid @color9;
+    /* border: 2px solid @color9; */
     padding-right: 16px;
     padding-left: 16px;
+    border-radius: 18px;
+}
+
+.modules-right {
+    background-color: @BACKGROUND;
+    border-radius: 8px;
+    padding-left: 6px;
+    padding-right: 6px;
+}
+
+#cpu, #memory, #custom-gpu, #temperature, #network, #misc, #power {
+    background-color: @color4;
+}
+
+#window {
+    border-radius: 8px;
+    background-color: @color4;
 }
 
 window#waybar {
@@ -41,28 +57,6 @@ tooltip {
     font-size: 0.8rem;
 }
 
-/* @keyframes glowing {
-    0% {
-        background-position: 0 0
-    }
-
-    50% {
-        background-position: 400% 0
-    }
-
-    to {
-        background-position: 0 0
-    }
-} */
-
-
-/* .modules-center {
-    background: linear-gradient(45deg, rgba(0, 0, 0, 0.8), rgba(255, 255, 255, 0.8));
-    background-size: 400%;
-    border-radius: 8px;
-    animation: glowing 20s linear infinite;
-} */
-
 
 #custom-launcher {
     color: @color14;
@@ -73,25 +67,23 @@ tooltip {
     /* font-size: 2.5rem; */
 }
 
-/* #custom-gmail.unread { */
-/*     color: @WHITE; */
-/* } */
-/* #custom-gmail.inaccurate { */
-/*     color: @YELLOW; */
+/* #workspaces { */
+/*     border-radius: 10px; */
 /* } */
-/* #custom-gmail.error { */
-/*     color: @RED; */
-/* } */
-
-#workspaces {
+.modules-left {
     background-color: @BACKGROUND;
     border-radius: 10px;
 }
 
+#workspaces {
+    background-color: transparent;
+    margin-right: -8px;
+}
+
 #workspaces button {
+    background-color: @color4;
     opacity: 0.8;
     border-radius: 12px; 
-    background-color: @color3;
     margin-top: 4px;
     margin-bottom: 2px;
     margin-left: 1px;
@@ -100,12 +92,6 @@ tooltip {
     transition-timing-function: linear;
 }
 
-#workspaces button.empty {
-    background-color: @FOREGROUND;
-    opacity: 0.4;
-    border-radius: 12px;
-}
-
 #workspaces button.active {
     background-color: @color1;
     margin-left: 1px;
@@ -115,6 +101,12 @@ tooltip {
     opacity: 1;
 }
 
+#workspaces button.empty {
+    background-color: @FOREGROUND;
+    opacity: 0.4;
+    border-radius: 12px;
+}
+
 
 #workspaces button.urgent {
     /* background-color: @RED; */
@@ -132,10 +124,6 @@ tooltip {
     border: none;
 }
 
-/* .mic, .cam { */
-/*     color: @YELLOW; */
-/* } */
-
 #custom-indicator {
     color: @YELLOW;
 }
@@ -171,3 +159,15 @@ tooltip {
 #custom-toggle-cam {
     padding-left: 11px;
 }
+
+#mpris {
+    margin-left: 6px;
+    border-radius: 10px;
+    background-color: @color4;
+    padding-right: 6px;
+}
+
+#misc, #power {
+    border-radius: 32px;
+    margin: 2px;
+}