waybar powerline

waybar/style.css

@@ -1,162 +1,190 @@
+@import "themes/catppuccin-macchiato.css";
+
 * {
-  border: none;
-  border-radius: 0;
-  min-height: 0;
   font-family: NotoSans NF SemBd;
-  font-size: 14px;
+  font-size: 15px;
+  margin: 0px;
+  min-height: 0;
+  border-radius: 0;
+  color: @text;
 }
 
-window#waybar {
-  /* background-color: rgba(30, 30, 46, 0.5); */
-  background: transparent;
-  transition-property: background-color;
-  transition-duration: 0.5s;
+#waybar {
+  background-color: alpha(@base, 0.7);
+  /* background: transparent; */
 }
 
-window#waybar.hidden {
-  opacity: 0.5;
+#custom-logo {
+  background-image: url("./icons/pika-logo.svg");
+  background-color: @base;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 24px;
+  padding: 0px 8px 0px 24px;
+}
+
+#custom-pl-taskbar,
+#custom-pl-workspaces,
+#custom-pl-window,
+#custom-pl-swaync,
+#custom-pl-clock,
+#custom-pl-idle,
+#custom-pl-stats,
+#custom-pl-swaync-before,
+#custom-pl-pulse,
+#custom-pl-idle-before,
+#custom-pl-tray {
+  font-size: 26px;
+}
+
+#workspaces *,
+#window *,
+#custom-swaync,
+#clock,
+#idle_inhibitor,
+#cpu,
+#memory,
+#temperature,
+#pulseaudio,
+#custom-power,
+#custom-pl-tray {
+  color: @base;
+}
+
+#taskbar {
+  background-color: @base;
+}
+
+#custom-pl-taskbar {
+  color: @base;
+  background-color: @mauve;
 }
 
 #workspaces {
-  background-color: transparent;
+  background-color: @mauve;
 }
 
 #workspaces button,
 #taskbar button {
-  all: initial;
-  /* Remove GTK theme values (waybar #1351) */
-  min-width: 0;
-  /* Fix weird spacing in materia (waybar #450) */
-  box-shadow: inset 0 -3px transparent;
-  /* Use box-shadow instead of border so the text isn't offset */
-  padding: 6px 18px;
-  margin: 6px 3px;
-  border-radius: 4px;
-  background-color: #1e1e2e;
-  color: #cdd6f4;
+  background: transparent;
+  box-shadow: inherit;
+  text-shadow: inherit;
+  border: none;
 }
 
-#workspaces button.active,
-#taskbar button.active {
-  color: #1e1e2e;
-  background-color: #cdd6f4;
-}
-
-#taskbar button {
-  padding: 6px 8px;
+#workspaces button.active {
+  box-shadow: inset 0 -4px @base;
+  color: @base;
 }
 
 #workspaces button:hover {
+  background: transparent;
   box-shadow: inherit;
   text-shadow: inherit;
-  color: #1e1e2e;
-  background-color: #cdd6f4;
+  box-shadow: inset 0 -4px @base;
+  color: @base;
 }
 
-#workspaces button.urgent {
-  background-color: #f38ba8;
+#taskbar button.active {
+  box-shadow: inset 0 -4px @subtext1;
+  color: @base;
 }
 
-#custom-spacer {
-  margin: 12px;
-  border-left: 2px solid white;
+#taskbar button:hover {
+  box-shadow: inset 0 -4px @subtext1;
+}
+
+#custom-pl-workspaces {
+  color: @mauve;
+  background-color: @lavender;
+}
+
+#window {
+  background-color: @lavender;
+  color: @base;
+}
+
+#custom-pl-window {
+  color: @lavender;
+  background: transparent;
+}
+
+#custom-pl-swaync-before {
+  background: transparent;
+  color: @teal;
+}
+
+#custom-swaync {
+  background-color: @teal;
+}
+
+#custom-pl-swaync {
+  color: @teal;
+  background-color: @green;
+}
+
+#clock {
+  background-color: @green;
+}
+
+#custom-pl-clock {
+  color: @green;
+  background: transparent;
+}
+
+#custom-pl-idle-before {
+  background: transparent;
+  color: @yellow;
+}
+
+#idle_inhibitor {
+  background-color: @yellow;
+}
+
+#custom-pl-idle {
+  background: @peach;
+  color: @yellow;
 }
 
-#memory,
-#custom-power,
-#battery,
-#backlight,
-#wireplumber,
-#network,
-#clock,
 #cpu,
-#bluetooth,
-#pulseaudio,
-#temperature,
-#window,
-#idle_inhibitor,
-#custom-swaync,
+#memory,
+#temperature {
+  background: @peach;
+  padding: 0px 6px;
+}
+
+#custom-pl-stats {
+  color: @peach;
+  background-color: @red;
+}
+
+#pulseaudio {
+  background-color: @red;
+}
+
+#custom-pl-pulse {
+  color: @red;
+  background-color: @base;
+}
+
 #tray {
-  border-radius: 4px;
-  margin: 6px 3px;
-  padding: 6px 12px;
-  background-color: #1e1e2e;
-  color: #181825;
+  background-color: @base;
+  padding: 0px 6px;
+}
+
+#custom-pl-tray,
+#custom-power {
+  background-color: @sky;
 }
 
 #custom-power {
-  margin-right: 6px;
-}
-
-#custom-logo {
-  padding-right: 7px;
-  padding-left: 7px;
-  margin-left: 5px;
-  font-size: 15px;
-  border-radius: 8px 0px 0px 8px;
-  color: #1793d1;
-}
-
-#memory,
-#cpu {
-  background-color: #f5a97f;
-}
-
-#battery {
-  background-color: #f38ba8;
-}
-
-#battery.warning,
-#battery.critical,
-#battery.urgent {
-  background-color: #ff0000;
-  color: #FFFF00;
-}
-
-#battery.charging {
-  background-color: #a6e3a1;
-  color: #181825;
-}
-
-#backlight,
-#bluetooth {
-  background-color: #8aadf4;
-}
-
-#wireplumber,
-#pulseaudio {
-  background-color: #a6da95;
-}
-
-#network,
-#custom-swaync {
-  background-color: #8bd5ca;
-}
-
-#clock,
-#custom-power,
-#idle_inhibitor,
-#window {
-  color: #cdd6f4;
-}
-
-#power,
-#temperature {
-  background-color: #b7bdf8;
-}
-
-tooltip {
-  border-radius: 8px;
-  padding: 15px;
-  background-color: rgba(30, 30, 46, 0.8);
-}
-
-tooltip label {
-  padding: 5px;
+  padding-right: 6px;
 }
 
 menu {
-  border-radius: 8px;
-  padding: 15px;
-  background-color: rgba(30, 30, 46, 0.8);
+  background-color: alpha(@base, 0.7);
+}
+
+menu button:hover {
+  background-color: @sky;
 }