refactor: waybar, hypr config

waybar/style/style_top.css

@@ -77,12 +77,16 @@ window#waybar.chromium {
 }
 
 /* Workspace States */
-#workspaces button.empty {
+#workspaces button.empty:not(.special) {
   color: @text-secondary;
 }
 
-#workspaces button.empty:not(.hosting-monitor) {
-  color: alpha(@text-secondary, 0.1);
+#workspaces button.active:not(.hosting-monitor) {
+  text-shadow: 0px 0px 8px @accent;
+}
+
+#workspaces button.special.active {
+  text-shadow: 0px 0px 8px @primary;
 }
 
 #workspaces button.active.hosting-monitor {
@@ -91,6 +95,10 @@ window#waybar.chromium {
   animation: hover 0.8s 1;
 }
 
+#workspaces button.empty:not(.hosting-monitor):not(.special) {
+  color: alpha(@text-secondary, 0.45);
+}
+
 #workspaces button.urgent {
   color: @attention;
   font-weight: 700;
@@ -105,7 +113,7 @@ window#waybar.chromium {
   text-shadow: 0px -2px 3px @text-primary;
 }
 
-#workspaces button:not(.hosting-monitor):not(.empty) {
+#workspaces button:not(.hosting-monitor):not(.empty):not(.special) {
     color: alpha(@accent, 0.2);
 }
 
@@ -119,18 +127,13 @@ window#waybar.chromium {
 /* --------------------------------------------------------------------------
    SIDE PANEL GROUPS
    -------------------------------------------------------------------------- */
-#mpd, #mpris, .modules-center, .modules-right {
+#mpd, #mpris, #workspaces, .modules-right {
   /* Layout & Box Model */
   border: 1px solid @border-color;
   border-radius: 15px;
    
   /* Colors */
   background-color: @bg-panel;
-  /* color: @text-primary; */
-  
-  /* Effects & Transitions */
-  /* transition-property: background-color; */
-  /* transition-duration: 0.5s; */
 }
 
 .modules-left {
@@ -269,7 +272,7 @@ window#waybar.chromium {
    -------------------------------------------------------------------------- */
 #window,
 #workspaces {
-  margin: 0 0px;
+  margin: 0 2.5px;
 }
 
 .modules-left > widget:first-child > #workspaces {