♻️ refactor(waybar): separate modules and general styling to other files

waybar/style.css

@@ -1,9 +1,9 @@
 
 @import "../../.cache/wal/colors-waybar.css";
+@import "./modules.css";
 
 * {
     color: @foreground;
-    border-radius: 14px;
     transition: 120ms ease-in;
 }
 
@@ -23,9 +23,11 @@ window > * > * {
     padding: 4px;
 }
 
-/* General */
-.modules-left, .modules-center, .modules-right {
+.modules-left, 
+.modules-center, 
+.modules-right {
     background: alpha(@background, .80);
+    border-radius: 14px;
 }
 
 .module {
@@ -34,146 +36,56 @@ window > * > * {
     margin: 0 1px;
 }
 
+widget > * {
+    border-radius: 14px;
+}
+
 widget > *:hover:not(#workspaces):not(#tray):not(#custom-media) {
     background: @color1;
 }
-/***/
 
-/* Workspaces */
-#workspaces {
-    padding: 4px;
-}
-
-#workspaces button {
-    background: @color1;
-    border-radius: 14px;
-    padding: 0 4px;
-    margin: 0 2px;
-}
-
-#workspaces button.active {
-    background: @foreground;
-    padding-left: 14px;
-    padding-right: 14px;
-}
-
-#workspaces button.urgent {
-    animation: pick-attention;
-    animation-duration: 2s;
-}
-
-#workspace button.special {
-    background: @color3;
-}
-
-#workspaces button:first-child {
-    margin-left: 0px;
-}
-
-#workspaces button:last-child {
-    margin-right: 0px;
-}
-/***/
-
-#custom-logo {
-    padding-left: 12px;
-    padding-right: 18px;
-    font-size: 15.2px;
-    transition: 110ms ease-in;
-    margin-right: 6px;
-}
-
-widget #custom-notifications {
-    font-size: 16px;
-    padding-left: 10px;
-    padding-right: 12px;
-}
-
-widget #custom-notifications.cc-open {
-    background: @color1;
-}
-
-window#waybar.empty #window {
-    padding: 0;
-    margin: 0;
-}
-
-widget #battery.charging,
-widget #battery.plugged {
-    color: @text;
-    background-color: @background;
-}
-
-widget #battery:not(.plugged):not(.charging) {
-    background-color: shade(@color1, .68);
-}
-
-#battery.critical:not(.charging) {
-    background-color: @color1;
-    color: @foreground;
-    animation-name: blink;
-    animation-duration: .5s;
-    animation-timing-function: steps(12);
-    animation-iteration-count: infinite;
-    animation-direction: alternate;
-}
-
-#network.disconnected {
-    padding-right: 15px;
-}
-
-#bluetooth {
-     font-size: 14px;
-     padding: 0 10px;
-}
-
-#bluetooth.connected {
-    padding-right: 12px;
-}
-
-#custom-media {
-    box-shadow: none;
-    border: 2px solid @color3;
+widget label {
+    font-size: .98em;
     font-weight: 500;
-    transition: 200ms ease-in;
 }
 
-#custom-media:hover {
-    background: @color3;
+menu {
+    background: @background;
+    border: none;
+    padding: 2px;
 }
 
-#temperature.critical {
-    background-color: @color1;
+menu > separator {
+    padding: 0px;
 }
 
-#tray > .passive {
-    -gtk-icon-effect: dim;
+menu > * {
+    border-radius: 2px;
 }
 
-#tray > .needs-attention {
-    -gtk-icon-effect: highlight;
+menu > *:first-child {
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
 }
 
-@keyframes blink {
-    to {
-        color: @color3;
-    }
+menu > *:last-child {
+    border-bottom-left-radius: 8px;
+    border-bottom-right-radius: 8px;
 }
 
-@keyframes pick-attention { 
-    25% {
-        background: @color4;
-    }
+menu > *:hover {
+    background: @color1;
+}
 
-    50% {
-        background: @color1;
-    }
+tooltip {
+    padding: 3px;
+    border-radius: 8px;
+    border-color: @color1;
+    background: @background;
+}
 
-    75% {
-        background: @color4;
-    }
-
-    100% {
-        background: @color1;
-    }
+tooltip > * {
+    padding: 0;
+    font-weight: 500;
+    font-size: .95em;
 }