fixing waybar config

modules/home-manager/style.css

@@ -0,0 +1,281 @@
+* {
+  /* `otf-font-awesome` is required to be installed for icons */
+  font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif;
+  font-size: 13px;
+}
+
+window#waybar {
+  background-color: rgba(43, 48, 59, 0.5);
+  border-bottom: 3px solid rgba(100, 114, 125, 0.5);
+  color: #ffffff;
+  transition-property: background-color;
+  transition-duration: .5s;
+}
+
+window#waybar.hidden {
+  opacity: 0.2;
+}
+
+/*
+window#waybar.empty {
+    background-color: transparent;
+}
+window#waybar.solo {
+    background-color: #FFFFFF;
+}
+*/
+
+window#waybar.termite {
+  background-color: #3F3F3F;
+}
+
+window#waybar.chromium {
+  background-color: #000000;
+  border: none;
+}
+
+button {
+  /* Use box-shadow instead of border so the text isn't offset */
+  box-shadow: inset 0 -3px transparent;
+  /* Avoid rounded borders under each button name */
+  border: none;
+  border-radius: 0;
+}
+
+/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
+button:hover {
+  background: inherit;
+  box-shadow: inset 0 -3px #ffffff;
+}
+
+#workspaces button {
+  padding: 0 5px;
+  background-color: transparent;
+  color: #ffffff;
+}
+
+#workspaces button:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+#workspaces button.focused {
+  background-color: #64727D;
+  box-shadow: inset 0 -3px #ffffff;
+}
+
+#workspaces button.urgent {
+  background-color: #eb4d4b;
+}
+
+#mode {
+  background-color: #64727D;
+  border-bottom: 3px solid #ffffff;
+}
+
+#clock,
+#battery,
+#cpu,
+#memory,
+#disk,
+#temperature,
+#backlight,
+#network,
+#pulseaudio,
+#wireplumber,
+#custom-media,
+#tray,
+#mode,
+#idle_inhibitor,
+#scratchpad,
+#mpd {
+  padding: 0 10px;
+  color: #ffffff;
+}
+
+#window,
+#workspaces {
+  margin: 0 4px;
+}
+
+/* If workspaces is the leftmost module, omit left margin */
+.modules-left>widget:first-child>#workspaces {
+  margin-left: 0;
+}
+
+/* If workspaces is the rightmost module, omit right margin */
+.modules-right>widget:last-child>#workspaces {
+  margin-right: 0;
+}
+
+#clock {
+  background-color: #64727D;
+}
+
+#battery {
+  background-color: #ffffff;
+  color: #000000;
+}
+
+#battery.charging,
+#battery.plugged {
+  color: #ffffff;
+  background-color: #26A65B;
+}
+
+@keyframes blink {
+  to {
+    background-color: #ffffff;
+    color: #000000;
+  }
+}
+
+#battery.critical:not(.charging) {
+  background-color: #f53c3c;
+  color: #ffffff;
+  animation-name: blink;
+  animation-duration: 0.5s;
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+}
+
+label:focus {
+  background-color: #000000;
+}
+
+#cpu {
+  background-color: #2ecc71;
+  color: #000000;
+}
+
+#memory {
+  background-color: #9b59b6;
+}
+
+#disk {
+  background-color: #964B00;
+}
+
+#backlight {
+  background-color: #90b1b1;
+}
+
+#network {
+  background-color: #2980b9;
+}
+
+#network.disconnected {
+  background-color: #f53c3c;
+}
+
+#pulseaudio {
+  background-color: #f1c40f;
+  color: #000000;
+}
+
+#pulseaudio.muted {
+  background-color: #90b1b1;
+  color: #2a5c45;
+}
+
+#wireplumber {
+  background-color: #fff0f5;
+  color: #000000;
+}
+
+#wireplumber.muted {
+  background-color: #f53c3c;
+}
+
+#custom-media {
+  background-color: #66cc99;
+  color: #2a5c45;
+  min-width: 100px;
+}
+
+#custom-media.custom-spotify {
+  background-color: #66cc99;
+}
+
+#custom-media.custom-vlc {
+  background-color: #ffa000;
+}
+
+#temperature {
+  background-color: #f0932b;
+}
+
+#temperature.critical {
+  background-color: #eb4d4b;
+}
+
+#tray {
+  background-color: #2980b9;
+}
+
+#tray>.passive {
+  -gtk-icon-effect: dim;
+}
+
+#tray>.needs-attention {
+  -gtk-icon-effect: highlight;
+  background-color: #eb4d4b;
+}
+
+#idle_inhibitor {
+  background-color: #2d3436;
+}
+
+#idle_inhibitor.activated {
+  background-color: #ecf0f1;
+  color: #2d3436;
+}
+
+#mpd {
+  background-color: #66cc99;
+  color: #2a5c45;
+}
+
+#mpd.disconnected {
+  background-color: #f53c3c;
+}
+
+#mpd.stopped {
+  background-color: #90b1b1;
+}
+
+#mpd.paused {
+  background-color: #51a37a;
+}
+
+#language {
+  background: #00b093;
+  color: #740864;
+  padding: 0 5px;
+  margin: 0 5px;
+  min-width: 16px;
+}
+
+#keyboard-state {
+  background: #97e1ad;
+  color: #000000;
+  padding: 0 0px;
+  margin: 0 5px;
+  min-width: 16px;
+}
+
+#keyboard-state>label {
+  padding: 0 5px;
+}
+
+#keyboard-state>label.locked {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+#scratchpad {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+#scratchpad.empty {
+  background-color: transparent;
+}

modules/home-manager/waybar.nix

@@ -9,301 +9,153 @@
     };
     settings = {
       main_bar = {
-        gtk-layer-shell = true;
+            layer = "top"; 
-        position = "top";
+            position = "top";
-        height = 0;
+            height = 30;
-        modules-left = [
+            spacing = 4; 
-          "river/mode"
+            # // Choose the order of the modules
-          "river/tags"
+            modules-left = [];
-        ];
+            modules-center = [];
-        modules-center = [
+            modules-right = [
-          "clock"
+              "pulseaudio"
-          "custom/joljol"
+              "network"
-        ];
-        modules-right = [
-          "tray"
-          "network"
-          "pulseaudio"
-          "battery"
-        ];
-        clock = {
-          format = "{:%H:%M}";
-              format-alt = "{:%Y-%m-%d}";
-        };
-        battery = {
-          interval = 60;
-          states = {
-            hundred = 100;
-            ninty = 90;
-            eighty = 80;
-            seventy = 70;
-            sixty = 60;
-            fifty = 50;
-            fourty = 40;
-            thirty = 30;
-            twenty = 20;
-            ten = 10;
-            five = 5;
-            three = 3;
-          };
-          format = "   {capacity}   ";
-          format-charging = "   {capacity}   ";
-          format-discharging = "   {capacity}   ";
-          format-plugged = "   {capacity}   ";
-          format-full = "   {capacity}   ";
-        };
-        network = {
-          format-wifi = "";
-          format-ethernet = "ﯱ";
-          format-linked = "  (No IP)";
-          format-disconnected = "睊";
-          format-alt = "{bandwidthUpBytes} {bandwidthDownBits}";
-          interval = 2;
-        };
-        pulseaudio = {
-          states = {
-            hundred = 100;
-            ninty = 90;
-            eighty = 80;
-            seventy = 70;
-            sixty = 60;
-            fifty = 50;
-            fourty = 40;
-            thirty = 30;
-            twenty = 20;
-            ten = 10;
-            zero = 0;
-          };
-          format = "{icon}";
-          format-muted = "";
-          on-click = "pactl set-sink-mute  alsa_output.pci-0000_00_1f.3.analog-stereo toggle";
-          scroll-steps = 10;
-          format-icons = {
-            headphone = "";
-            hands-free = "";
-            headset = "";
-            phone = "";
-            portable = "";
-            car = "";
-            default = [
-              ""
-              ""
-              ""
             ];
-          };
+            # "keyboard-state": {
-        };
+            #     "numlock": true,
-        tray = {
+            #     "capslock": true,
-          show-passive-items = true;
+            #     "format": "{name} {icon}",
-          icon-size = 20;
+            #     "format-icons": {
-          spacing = 10;
+            #         "locked": "",
+            #         "unlocked": ""
+            #     }
+            # },
+            # "mpd": {
+            #     "format": "{stateIcon} {consumeIcon}{randomIcon}{repeatIcon}{singleIcon}{artist} - {album} - {title} ({elapsedTime:%M:%S}/{totalTime:%M:%S}) ⸨{songPosition}|{queueLength}⸩ {volume}% ",
+            #     "format-disconnected": "Disconnected ",
+            #     "format-stopped": "{consumeIcon}{randomIcon}{repeatIcon}{singleIcon}Stopped ",
+            #     "unknown-tag": "N/A",
+            #     "interval": 2,
+            #     "consume-icons": {
+            #         "on": " "
+            #     },
+            #     "random-icons": {
+            #         "off": "<span color=\"#f53c3c\"></span> ",
+            #         "on": " "
+            #     },
+            #     "repeat-icons": {
+            #         "on": " "
+            #     },
+            #     "single-icons": {
+            #         "on": "1 "
+            #     },
+            #     "state-icons": {
+            #         "paused": "",
+            #         "playing": ""
+            #     },
+            #     "tooltip-format": "MPD (connected)",
+            #     "tooltip-format-disconnected": "MPD (disconnected)"
+            # },
+            # "idle_inhibitor": {
+            #     "format": "{icon}",
+            #     "format-icons": {
+            #         "activated": "",
+            #         "deactivated": ""
+            #     }
+            # },
+            # "tray": {
+            #     // "icon-size": 21,
+            #     "spacing": 10
+            # },
+            # "clock": {
+            #     // "timezone": "America/New_York",
+            #     "tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
+            #     "format-alt": "{:%Y-%m-%d}"
+            # },
+            # "cpu": {
+            #     "format": "{usage}% ",
+            #     "tooltip": false
+            # },
+            # "memory": {
+            #     "format": "{}% "
+            # },
+            # "temperature": {
+            #     // "thermal-zone": 2,
+            #     // "hwmon-path": "/sys/class/hwmon/hwmon2/temp1_input",
+            #     "critical-threshold": 80,
+            #     // "format-critical": "{temperatureC}°C {icon}",
+            #     "format": "{temperatureC}°C {icon}",
+            #     "format-icons": ["", "", ""]
+            # },
+            # "backlight": {
+            #     // "device": "acpi_video1",
+            #     "format": "{percent}% {icon}",
+            #     "format-icons": ["", "", "", "", "", "", "", "", ""]
+            # },
+            # "battery": {
+            #     "states": {
+            #         // "good": 95,
+            #         "warning": 30,
+            #         "critical": 15
+            #     },
+            #     "format": "{capacity}% {icon}",
+            #     "format-charging": "{capacity}% ",
+            #     "format-plugged": "{capacity}% ",
+            #     "format-alt": "{time} {icon}",
+            #     // "format-good": "", // An empty format will hide the module
+            #     // "format-full": "",
+            #     "format-icons": ["", "", "", "", ""]
+            # },
+            # "battery#bat2": {
+            #     "bat": "BAT2"
+            # },
+            network = {
+                format-wifi = "{essid} ({signalStrength}%) ";
+                format-ethernet = "{ipaddr}/{cidr} ";
+                tooltip-format = "{ifname} via {gwaddr} ";
+                format-linked = "{ifname} (No IP) ";
+                format-disconnected = "Disconnected ⚠";
+                format-alt = "{ifname}: {ipaddr}/{cidr}";
+            };
+            pulseaudio = {
+                scroll-step = 1;
+                format = "{volume}% {icon} {format_source}";
+                format-bluetooth = "{volume}% {icon} {format_source}";
+                format-bluetooth-muted = " {icon} {format_source}";
+                format-muted = " {format_source}";
+                format-source = "{volume}% ";
+                format-source-muted = "";
+                format-icons = {
+                    headphone = "";
+                    hands-free = "";
+                    headset = "";
+                    phone = "";
+                    portable = "";
+                    car = "";
+                    default = [
+                      ""
+                      ""
+                      ""
+                    ];
+                };
+                on-click = "pavucontrol";
+            };
+            # custom/media = {
+            #     format = "{icon} {}";
+            #     return-type = "json";
+            #     max-length = 40;
+            #     format-icons = {
+            #         spotify = "";
+            #         default = "🎜";
+            #     };
+            #     escape = true;
+            #     # Script in resources folder
+            #     exec = "$HOME/.config/waybar/mediaplayer.py 2> /dev/null"; 
+            #     # Filter player based on name
+            #     exec = "$HOME/.config/waybar/mediaplayer.py --player spotify 2> /dev/null"; 
+            # };
         };
+      };
     };
 
-    style = ''
+    style = builtins.readFile ./style.css;
-      * {
+  }
-      	border: none;
-      	/* font-family: "Recursive Sans Casual Static", "JetBrainsMono Nerd Font"; */
-      	font-family: "Gintronic","Recursive Sans Casual Static", "JetBrainsMono Nerd Font";
-      	font-size: 12px;
-      	min-height: 20px;
-      	border-radius: 0px;
-      }
-      
-      window#waybar {
-      	background: transparent;
-      	border-radius: 0px;
-      }
-      tooltip {
-      	background: #ebbcba;
-      }
-      
-      tooltip label {
-      	color: #191724;
-      }
-      #tags {
-      	background-color: transparent;
-      	border-radius: 0px;
-      	padding: 5px 5px 0px 5px;
-      }
-      
-      #tags button {
-      	padding: 0px 5px;
-      	margin-right: 5px;
-      	margin-left: 5px;
-      	color: transparent;
-      	/* border: 0px solid transparent; */
-      	/* border-top: 3px solid #f6c177; */
-      	/* border-left: 3px solid #f6c177; */
-      	/* border-bottom: 2px solid #f6c177; */
-      	background: #1f1d2e;
-      }
-      
-      #tags button.occupied {
-      	border-radius: 0px;
-      	font-weight: 900;
-      	color: #191724;
-      	background: #31748f;
-      }
-      
-      #tags button.focused {
-      	font-weight: 900;
-      	color: #191724;
-      	background: #ebbcba;
-      }
-      
-      #tags button.urgent {
-      	color: #e0def4;
-      	background-color: #eb6f92;
-      	border-radius: 0px;
-      }
-      
-      #custom-date,
-      #clock,
-      #battery,
-      #pulseaudio,
-      #network,
-      #custom-joljol {
-      	color: #e0def4;
-      	background: #1f1d2e;
-      	padding: 2.5px 15px;
-      	margin: 10px 10px 0px 0px;
-      	font-weight: 900;
-      }
-      
-      #clock {
-      	color: #ebbcba;
-      }
-      
-      
-      #battery {
-      	background: #31748f;
-      	color: #191724;
-      }
-      
-      /* #battery.charging { */
-      /* 	color: #9ccfd8; */
-      /* } */
-      
-      #battery.ninty.charging {
-      	background: linear-gradient(to right, #31748f 90%, #9ccfd8 90%);
-      }
-      #battery.ninty:not(.charging) {
-      	background: linear-gradient(to right, #31748f 90%, #ebbcba 90%);
-      }
-      #battery.eighty.charging {
-      	background: linear-gradient(to right, #31748f 80%, #9ccfd8 80%);
-      }
-      #battery.eighty:not(.charging) {
-      	background: linear-gradient(to right, #31748f 80%, #ebbcba 80%);
-      }
-      #battery.seventy.charging {
-      	background: linear-gradient(to right, #31748f 70%, #9ccfd8 70%);
-      }
-      #battery.seventy:not(.charging) {
-      	background: linear-gradient(to right, #31748f 70%, #ebbcba 70%);
-      }
-      #battery.sixty.charging {
-      	background: linear-gradient(to right, #31748f 60%, #9ccfd8 60%);
-      }
-      #battery.sixty:not(.charging) {
-      	background: linear-gradient(to right, #31748f 60%, #ebbcba 60%);
-      }
-      #battery.fifty.charging {
-      	background: linear-gradient(to right, #31748f 50%, #9ccfd8 50%);
-      }
-      #battery.fifty:not(.charging) {
-      	background: linear-gradient(to right, #31748f 50%, #ebbcba 50%);
-      }
-      #battery.fourty.charging {
-      	background: linear-gradient(to right, #31748f 40%, #9ccfd8 40%);
-      }
-      #battery.fourty:not(.charging) {
-      	background: linear-gradient(to right, #31748f 40%, #ebbcba 40%);
-      }
-      #battery.thirty.charging {
-      	background: linear-gradient(to right, #31748f 30%, #9ccfd8 30%);
-      }
-      #battery.thirty:not(.charging) {
-      	background: linear-gradient(to right, #31748f 30%, #ebbcba 30%);
-      }
-      #battery.twenty.charging {
-      	background: linear-gradient(to right, #31748f 20%, #9ccfd8 20%);
-      }
-      #battery.twenty:not(.charging) {
-      	background: linear-gradient(to right, #31748f 20%, #eb6f92 20%);
-      }
-      #battery.ten.charging {
-      	background: linear-gradient(to right, #31748f 10%, #9ccfd8 10%);
-      }
-      #battery.ten:not(.charging) {
-      	background: linear-gradient(to right, #31748f 10%, #eb6f92 10%);
-      }
-      #battery.five.charging {
-      	background: linear-gradient(to right, #31748f 5%, #9ccfd8 5%);
-      }
-      #battery.five:not(.charging) {
-      	background: linear-gradient(to right, #31748f 5%, #eb6f92 5%);
-      }
-      #battery.three.charging {
-      	background: linear-gradient(to right, #31748f 3%, #9ccfd8 3%);
-      }
-      #battery.three:not(.charging) {
-      	background: linear-gradient(to right, #31748f 3%, #eb6f92 3%);
-      }
-      #network {
-      	color: #31748f;
-      }
-      
-      #pulseaudio {
-      	background: #c4a7e7;
-      	color: #191724;
-      }
-      #pulseaudio.ninty {
-      	background: linear-gradient(to top, #c4a7e7 90%, #908caa 90%);
-      }
-      #pulseaudio.eighty {
-      	background: linear-gradient(to top, #c4a7e7 80%, #908caa 80%);
-      }
-      #pulseaudio.seventy {
-      	background: linear-gradient(to top, #c4a7e7 70%, #908caa 70%);
-      }
-      #pulseaudio.sixty {
-      	background: linear-gradient(to top, #c4a7e7 60%, #908caa 60%);
-      }
-      #pulseaudio.fifty {
-      	background: linear-gradient(to top, #c4a7e7 50%, #908caa 50%);
-      }
-      #pulseaudio.fourty {
-      	background: linear-gradient(to top, #c4a7e7 40%, #908caa 40%);
-      }
-      #pulseaudio.thirty {
-      	background: linear-gradient(to top, #c4a7e7 30%, #908caa 30%);
-      }
-      #pulseaudio.twenty {
-      	background: linear-gradient(to top, #c4a7e7 20%, #908caa 20%);
-      }
-      #pulseaudio.ten {
-      	background: linear-gradient(to top, #c4a7e7 10%, #908caa 10%);
-      }
-      #pulseaudio.zero {
-      	background: linear-gradient(to top, #c4a7e7 0%, #908caa 00%);
-      }
-      #pulseaudio.muted {
-      	font-weight: 900;
-      	background: #eb6f92;
-      }
-      
-      #tray {
-      	/* background: #505050; */
-      	/* padding: 5px 10px; */
-      	margin: 10px 10px 0px 10px;
-      	color: #e0def4;
-      }
-      
-      #tray menu {
-      	color: #e0def4;
-      }
-    '';
-  };
-};
-}