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

waybar/animations.css

@@ -0,0 +1,27 @@
+@keyframes blink {
+    0% {
+        background: @color3;
+    }
+
+    100% {
+        background: @color2;
+    }
+}
+
+@keyframes pick-attention { 
+    25% {
+        background: @color6;
+    }
+
+    50% {
+        background: @color1;
+    }
+
+    75% {
+        background: @color6;
+    }
+
+    100% {
+        background: @color1;
+    }
+}

waybar/config.jsonc

@@ -112,12 +112,6 @@
     	"escape": true
     },
 
-    "custom/control-center": {
-        "format": "loading control center...",
-        "return-type": "json",
-        "exec": "bash $HOME/.config/waybar/modules/control-center.sh"
-    }, 
-
     "idle_inhibitor": {
         "format": "{icon}",
         "format-icons": {

waybar/modules.css

@@ -0,0 +1,140 @@
+
+@import "./animations.css";
+
+/* Distro Logo */
+#custom-logo {
+    padding-left: 12px;
+    padding-right: 18px;
+    font-size: 15.2px;
+    transition: 110ms ease-in;
+    margin-right: 6px;
+}
+
+
+/* Workspace Indicator */
+#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;
+}
+
+
+/* Notifications */
+widget #custom-notifications {
+    font-size: 16px;
+    padding-left: 10px;
+    padding-right: 12px;
+}
+
+widget #custom-notifications.cc-open {
+    background: @color1;
+}
+
+
+/* Current Window Widget */
+window.empty #window {
+    padding: 0;
+    margin: 0;
+}
+
+
+/* Battery */
+#battery.charging,
+#battery.plugged {
+    color: @foreground;
+    background-color: @color2;
+}
+
+#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 and Wi-Fi */
+#network.disconnected {
+    padding-right: 15px;
+}
+
+
+/* Bluetooth */
+#bluetooth {
+     font-size: 14px;
+     padding: 0 10px;
+}
+
+#bluetooth.connected {
+    padding-right: 12px;
+}
+
+
+/* Pulse Audio */
+#pulseaudio {
+    padding-left: 8px;
+    padding-right: 8px;
+}
+
+/* Media Player Info */
+#custom-media {
+    box-shadow: none;
+    border: 2px solid @color3;
+    font-weight: 500;
+    transition: 200ms ease-in;
+}
+
+#custom-media:hover {
+    background: @color3;
+}
+
+
+/* Sensors */
+#temperature.critical {
+    background-color: @color1;
+}
+
+
+/* App Tray */
+#tray > .passive {
+    -gtk-icon-effect: dim;
+}
+
+#tray > .needs-attention {
+    -gtk-icon-effect: highlight;
+}

waybar/modules/control-center.sh

@@ -1,9 +0,0 @@
-
-# Default return
-CONTROL_CENTER_JSON="{ \"text\": \"\", \"bluetooth\": \"$BLUETOOTH_ACTIVE\" }"
-$BLUETOOTH_ACTIVE=false
-
-if [[ $(systemctl is-active bluetooth) =~ "active" ]]
-then
-    $BLUETOOTH_ACTIVE=true
-fi

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-left, .modules-center, .modules-right {
+.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 */
+widget label {
-#workspaces {
+    font-size: .98em;
-    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;
     font-weight: 500;
-    transition: 200ms ease-in;
 }
 
-#custom-media:hover {
+menu {
-    background: @color3;
+    background: @background;
+    border: none;
+    padding: 2px;
 }
 
-#temperature.critical {
+menu > separator {
-    background-color: @color1;
+    padding: 0px;
 }
 
-#tray > .passive {
+menu > * {
-    -gtk-icon-effect: dim;
+    border-radius: 2px;
 }
 
-#tray > .needs-attention {
+menu > *:first-child {
-    -gtk-icon-effect: highlight;
+    border-top-left-radius: 8px;
+    border-top-right-radius: 8px;
 }
 
-@keyframes blink {
+menu > *:last-child {
-    to {
+    border-bottom-left-radius: 8px;
-        color: @color3;
+    border-bottom-right-radius: 8px;
-    }
 }
 
-@keyframes pick-attention { 
+menu > *:hover {
-    25% {
-        background: @color4;
-    }
-
-    50% {
     background: @color1;
 }
 
-    75% {
+tooltip {
-        background: @color4;
+    padding: 3px;
+    border-radius: 8px;
+    border-color: @color1;
+    background: @background;
 }
 
-    100% {
+tooltip > * {
-        background: @color1;
+    padding: 0;
-    }
+    font-weight: 500;
+    font-size: .95em;
 }