waybar: Change theme (TODO: Credit)

modules/programs/waybar/default.nix

@@ -22,7 +22,7 @@ in {
           {
             output = [ "${cfg.output}" ];
             layer = "bottom";
-            position = "left";
+            position = "top";
             gtk-layer-shell = true;
 
             modules-left = [ "custom/applauncher" "sway/workspaces" "sway/mode" ];

modules/programs/waybar/style.css

@@ -1,133 +1,151 @@
-/*
-  Based on https://github.com/indicozy/wmtm/blob/main/configs/Flower/config/waybar/style.css
-*/
-@define-color background	#323732;
-@define-color foreground	#deddda;
-@define-color selection		#44475a;
-@define-color unfocused		#6272a4;
-@define-color cyan		#5d7380;
-@define-color green		#fff6f6;
-@define-color orange		#d65d0e;
-@define-color pink		#ff5370;
-@define-color purple		#b16286;
-@define-color red		#bf6374;
-@define-color yellow		#d79921;
-@define-color fore          	#d1c29d;
-
-
 * {
-	font-size: 14px;
+  border: none;
-	font-family: "Hack";
+  font-family: Iosevka Nerd Font, sans-serif;
-	padding: 0px;
+  font-size: 13px;
-	margin: 0px;
-/* text-shadow:1px 1px 2px rgba(0,0,0,.6); */
 }
 
 window#waybar {
-	color: @foreground;
+  /* background-color: rgba(18, 21, 29, 0.98); */
-	border-radius: 0;
+  background-color: #12151d;
+  /* background-color: rgba(0, 0, 0, 0); */
+  border-bottom: 3px solid #1e222a;
+  color: #abb2bf;
+  transition-property: background-color;
+  transition-duration: .5s;
 }
 
-window#waybar.left {
+window#waybar.hidden {
-	background: rgba(43, 48, 59, .85);
+  opacity: 0.2;
-	border-top-left-radius: 0px;
-	border-top-right-radius: 0px;
-	border-top: none;
-	margin: 0;
 }
 
-window#waybar.bottom {
-	padding-top: 0px;
-	background: @green;
-	border-bottom-left-radius: 0px;
-	margin: 0;
-}
-
-.modules-left,
-.modules-center,
-.modules-right {
-	margin: 0;
-	padding: 0;
-}
-
-/* Base styling for modules */
 #workspaces,
 #mode,
-#window,
+#cpu,
+#memory,
+#temperature,
+#custom-media,
+#custom-fans,
+#clock,
 #idle_inhibitor,
+#language,
 #pulseaudio,
-#taskbar,
+#backlight,
-#tray,
+#battery,
-#custom-menu {
+#network,
-	padding: 1px 0px 1px 0px;
-	margin: 0px;
-}
-
-#pulseaudio, #idle_inhibitor {
-	font-size: 30px;
-	margin: 0px 2px;
-}
-
-#pulseaudio {
-	font-size: 16px;
-}
-
-#taskbar,
-#tray,
-#window {
-	padding: 0;
-	margin: 0 0px 0 0px;
-}
-#taskbar {
-	margin-top: 0px;
-}
-#taskbar button {
-	color: @foreground;
-	border-radius: 0px;
-	padding: 3px 0px 3px 0px;
-}
-#taskbar button.active {
-	icon-shadow: 0px 0px 3px alpha(#111131, .9);
-	border-style: dashed;
-	border-width: 0 0 0 0;
-	border-color: @foreground;
-	border-radius: 0;
-}
-
 #tray {
-	color: black;
+  background-color: #1e222a;
-	icon-shadow: 0px 1px 2px alpha(#020000, .9);
+  padding: 0 10px;
-	padding: 2px 0px 2px 0px;
+  margin: 2px 4px 5px 4px;
+  border: 3px solid rgba(0, 0, 0, 0);
+  border-radius: 90px;
+  background-clip: padding-box;
 }
 
-#custom-menu,
-#custom-applauncher,
-#custom-notifications {
-	font-size: 30px;
-}
-
-#clock {
-	font-size: 16px;
-	margin-left: 2px;
-	margin-right: 2px;
-}
-
-#workspaces {
-	padding: 0px 0px 0px 0px;
-	margin-left: 0px;
-}
 #workspaces button {
-	margin: 0;
+  padding: 0 5px;
-	padding: 0px 0px 0px 0px;
+  min-width: 20px;
-	border-radius: 0px;
+  color: #61afef;
-	color: @foreground;
+}
+
+#workspaces button:hover {
+  background-color: rgba(0, 0, 0, 0.2)
 }
 
 #workspaces button.focused {
-    color: @foreground;
+  color: #c678dd;
-    background-color: @purple;
+}
-	border-style: solid;
+
-	border-width: 0 0 0 0;
+#workspaces button.urgent {
-	border-color: @foreground;
+  color: #e06c75;
-	border-radius: 0;
+}
+
+#cpu {
+  color: #61afef;
+}
+
+#memory {
+  color: #c678dd;
+}
+
+#temperature {
+  color: #d19a66;
+}
+
+#temperature.critical {
+  background-color: #e06c75;
+  color: #1e222a;
+}
+
+#custom-media {
+  background-color: #c678dd;
+  color: #1e222a;
+}
+
+#custom-fans {
+  color: #98c379;
+}
+
+#clock {
+  color: #61afef;
+}
+
+#idle_inhibitor {
+  color: #abb2bf;
+}
+
+#idle_inhibitor.activated {
+  background-color: #abb2bf;
+  color: #1e222a;
+}
+
+#language {
+  color: #56b6c2;
+}
+
+#pulseaudio {
+  color: #d19a66;
+}
+
+#pulseaudio.muted {
+  background-color: #e06c75;
+  color: #1e222a;
+}
+
+#backlight {
+  color: #61afef;
+}
+
+#battery {
+  color: #98c379;
+}
+
+#battery.charging, #battery.plugged {
+  background-color: #98c379;
+  color: #1e222a;
+}
+
+@keyframes blink {
+    to {
+        background-color: #1e222a;
+        color: #e06c75;
+    }
+}
+
+#battery.critical:not(.charging) {
+    background-color: #e06c75;
+    color: #1e222a;
+    animation-name: blink;
+    animation-duration: 0.5s;
+    animation-timing-function: linear;
+    animation-iteration-count: infinite;
+    animation-direction: alternate;
+}
+
+#network {
+    color: #c678dd
+}
+
+#network.disconnected {
+    background-color: #e06c75;
+    color: #1e222a;
 }