Testing waybar stuff

hosts/nixos-laptop/home-manager/waybar-conf.nix

@@ -1,96 +1,160 @@
 { hostname, ...}: {
   home.file = {
     # https://yewtu.be/watch?v=tWQB1NDDA9c
+    # https://github.com/DN-debug/waybar-examples 
     # Waybar configuration
     ".config/waybar/config.jsonc" = {
       enable = true;
       executable = false;
       text = ''
 {
-            "position": "top", 
+    "layer": "top",
-            # "modules-left": ["sway/workspaces"],
+    "position": "bottom",
-            # "modules-center": ["custom/spotify"],
+    "height": 35,
-            "modules-right": ["network", "custom/vpn", "pulseaudio", "battery", "clock"],
+    "spacing": 4,
+    "margin-top": 10,
+    "margin-bottom":5,
+
+    // Choose the order of the modules
+
+    "modules-left":[  "idle_inhibitor", "pulseaudio", "cpu", "memory", "temperature"],
+    "modules-center": [ "custom/launcher", "custom/media","wlr/taskbar", "custom/power"],
+    "modules-right":["custom/layout", "custom/updater", "custom/snip", "backlight", "keyboard-state",  "battery", "battery#bat2", "network", "tray",  "clock"],
     // Modules configuration
-          "sway/workspaces": {
+
-            "disable-scroll": true,
+    "keyboard-state": {
-            "all-outputs": true,
+        "numlock": true,
-            "format": "{icon}",
+        "capslock": true,
-            "persistent_workspaces": {
+        "format": " {name} {icon}",
-              "1": [],
-              "2": [],
-              "3": [],
-              "4": [],
-              "5": [],
-              "6": [],
-              "7": [],
-              "8": [],
-              "9": [],
-              "10": []
-          },
         "format-icons": {
-                    "default": "",
+            "locked": "",
-                    "urgent": "",
+            "unlocked": ""
-                    "focused": "",
         }
     },
-            "custom/vpn": {
+     "wlr/taskbar": {
-              "format": "{}",
+        "format": "{icon}",
-                "interval": 1,
+        "icon-size": 20,
-                "exec": "/home/loki/bin/waybar-vpn.sh"
+        "icon-theme": "Star",
+        "tooltip-format": "{title}",
+        "on-click": "minimize",
+        "on-click-middle": "close",
+        "on-click-right": "activate"
     },
-            "custom/spotify": {
+   "sway/language": {
-              "format": "<span foreground='#E5B4E2'> </span><span font='OperatorMonoSSm Nerd Font weight=325 Italic'>{}</span>",
+    "format": " {}",
-                "interval": 1,
+    },
-                "exec-if": "pgrep spotify",
+    "idle_inhibitor": {
-                "on-click": "playerctl -p spotify play-pause",
+        "format": "{icon}",
-                "on-scroll-up": "playerctl -p spotify previous",
+        "format-icons": {
-                "on-scroll-down": "playerctl -p spotify next",
+            "activated": "",
-                "tooltip": false,
+            "deactivated": ""
-                "escape": true,
+        }
-                "max-length": 60,
+    },
-                "exec": "/home/loki/bin/spotify.sh"
+    "tray": {
+        "icon-size": 20,
+        "spacing": 10
     },
     "clock": {
-            "format": "<span foreground='#C6AAE8'> </span>{:%a %d %H:%M}",
+        // "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": {
+        "format": "{percent}% {icon}",
+        "format-icons": ["", ""]
     },
     "battery": {
         "states": {
+            // "good": 95,
             "warning": 30,
-                    "critical": 15,
+            "critical": 15
         },
-                "format": "<span size='13000' foreground='#B1E3AD'>{icon}</span> {capacity}%",
+        "format": "{capacity}% {icon}",
-                "format-warning": "<span size='13000' foreground='#B1E3AD'>{icon}</span> {capacity}%",
+        "format-charging": "{capacity}% ",
-                "format-critical": "<span size='13000' foreground='#E38C8F'>{icon}</span> {capacity}%",
+        "format-plugged": "{capacity}% ",
-                "format-charging": "<span size='13000' foreground='#B1E3AD'> </span>{capacity}%",
+        "format-alt": "{time} {icon}",
-                "format-plugged": "<span size='13000' foreground='#B1E3AD'> </span>{capacity}%",
+        "format-icons": ["", "", "", "", ""]
-                "format-alt": "<span size='13000' foreground='#B1E3AD'>{icon}</span> {time}",
+    },
-                "format-full": "<span size='13000' foreground='#B1E3AD'> </span>{capacity}%",
+    "battery#bat2": {
-                  "format-icons": ["", "", "", "", ""],
+        "bat": "BAT2"
-                    "tooltip-format": "{time}"
     },
     "network": {
-                "format-wifi": "<span size='13000' foreground='#F2CECF'> </span>{essid}",
+        // "interface": "wlp2*", // (Optional) To force the use of this interface
-                "format-ethernet": "<span size='13000' foreground='#F2CECF'>󰤭</span> Disconnected",
+        "format-wifi": "{essid} ({signalStrength}%) ",
+        "format-ethernet": "Connected  ",
+        "tooltip-format": "{ifname} via {gwaddr} ",
         "format-linked": "{ifname} (No IP) ",
-                "format-disconnected": "<span size='13000' foreground='#F2CECF'> </span>Disconnected",
+        "format-disconnected": "Disconnected ⚠",
-            "tooltip-format-wifi": "Signal Strenght: {signalStrength}%",
+        "format-alt": "{ifname}: {ipaddr}/{cidr}",
+        "on-click-right": "bash ~/.config/rofi/wifi_menu/rofi_wifi_menu"
+
     },
     "pulseaudio": {
-            "on-click": "pactl set-sink-mute @DEFAULT_SINK@ toggle",
+        "format": "{volume}% {icon}",
-            "format": "<span size='13000' foreground='#EBDDAA'>{icon}</span> {volume}%",
+        "format-bluetooth": "{volume}% {icon}",
-                "format-muted": "<span size='14000' foreground='#EBDDAA'></span> Muted",
+        "format-bluetooth-muted": "{icon} {format_source}",
+        "format-muted": "{format_source}",
+        "format-source": "",
+        "format-source-muted": "",
         "format-icons": {
             "headphone": "",
-                    "hands-free": "",
+            "hands-free": "",
-                    "headset": "",
+            "headset": "",
             "phone": "",
             "portable": "",
             "car": "",
-                    "default": ["", ""]
+            "default": ["", "", ""]
         },
+        "on-click": "pavucontrol"
     },
+    "custom/media": {
+        "format": "{icon} {}",
+        "return-type": "json",
+        "max-length": 15,
+        "format-icons": {
+            "spotify": " ",
+            "default": " "
+        },
+        "escape": true,
+        "exec": "$HOME/.config/system_scripts/mediaplayer.py 2> /dev/null",
+        "on-click": "playerctl play-pause"
+    },
+    "custom/launcher":{
+        "format": " ",
+        "on-click": "rofi -show drun -theme ~/.config/rofi/wayfire/config.rasi",
+        "on-click-right": "killall rofi"
+    },
+    "custom/power":{
+        "format": "  ",
+        "on-click": "nwg-bar",
+        "on-click-right": "killall nwg-bar"
+    },
+    "custom/layout":{
+        "format": "",
+        "on-click": "bash ~/.config/system_scripts/layout.sh"
+    },
+    "custom/updater":{
+        "format": "  {} Updates",
+        "exec": "checkupdates | wc -l",
+        "exec-if": "[[ $(checkupdates | wc -l) != 0 ]]",
+        "interval": 15,
+        "on-click": "alacritty -e yay -Syu"
+    }
 }
       '';
     };
@@ -98,118 +162,325 @@
     ".config/waybar/style.css" = {
       enable = true;
       executable = false;
-      text = ''
+      text = ''* {
-      * {
+    border: none;
-          font-family: "JetBrainsMono Nerd Font";
-          font-size: 17px;
-          /* font-weight: bold; */
     border-radius: 0px;
+    /* `otf-font-awesome` is required to be installed for icons */
+    font-family: Roboto, Helvetica, Arial, sans-serif;
+    font-size: 13px;
+    min-height: 0;
 }
 
 window#waybar {
-          background-color: #45403d;
+    background-color: transparent;
-          border-radius: 10px;
+    color: black;
+    transition-property: background-color;
+    transition-duration: .5s;
 }
 
-      .modules-right {
+window#waybar.hidden {
-          font-size: 10px;
+    opacity: 0.2;
-          margin-right: 0.5rem;
-      }
-      .modules-left {
-          margin-left: 0.5rem;
-      }
-      tooltip {
-          background: #45403d;
-          border-radius: 10px;
-      }
-      tooltip label {
-          color: #ebdbb2;
-          background-color: #45403d;
-          border-radius: 10px;
-      }
-      tooltip * {
-          border-radius: 10px;
 }
+
+
 #workspaces button {
-          margin: 0;
+    background: #1f1f1f;
-          color: #d4be98;
+    color: black;
-          font-weight: bolder;
-          font-style: normal;
-          margin: 0.2rem 0.1rem;
     border-radius: 20px;
+
 }
-      button:hover {
+
-          box-shadow: inherit;
+/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
-          text-shadow: inherit;
+#workspaces button:hover {
-          background: inherit;
+    background: lightblue;
+    color: black;
+    border-bottom: 3px solid black;
+
 }
-      #workspaces button.active {
+
-          color: #ebdbb2;
+#workspaces button.focused {
-          background-color: #7daea3;
+    background: #1f1f1f;
-          text-shadow: 0 0 5px rgba(0, 0, 0, 0.818);
+}
-          transition: all 0.1s ease-in-out;
+
+#workspaces button.focused:hover {
+    background: lightblue;
+    color: black;
+    border-bottom: 3px solid black;
+
+}
+
+#workspaces button.urgent {
+    background-color: #eb4d4b;
+}
+
+#mode {
+    background-color: #64727D;
+    border-bottom: 3px solid black;
 }
 
 #clock,
-      #custom-weather {
+#battery,
-          font-family: "GE Inspira";
+#cpu,
-          font-weight: bolder;
+#memory,
-          text-shadow: 0 0 5px rgb(0, 0, 0);
+#disk,
-          color: #d4be98;
+#temperature,
+#backlight,
+#network,
+#pulseaudio,
+#custom-media,
+#custom-launcher,
+#custom-power,
+#custom-layout,
+#custom-updater,
+#custom-snip,
+#taskbar,
+#tray,
+#mode,
+#idle_inhibitor,
+#mpd {
+    padding: 0 10px;
+    color: black;
+}
+
+#window,
+#workspaces {
+    margin: 0px 4px;
+}
+
+/* If workspaces is the leftmost module, omit left margin */
+.modules-left > widget:first-child > #workspaces {
+    margin-left: 0px;
+}
+
+/* If workspaces is the rightmost module, omit right margin */
+.modules-right > widget:last-child > #workspaces {
+    margin-right: 0px;
 }
 
 #clock {
-          padding: 0 0 0 1.5em;
+    background-color: #FA8BFF;
-      }
+    background-image: linear-gradient(-45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
-      #custom-weather {
+    color: black;
-          padding: 0 1.5em 0 0.5em;
+    border-radius: 0px 20px 20px 0px;
-      }
+    margin-right: 4px;
-      #memory {
+
-          color: #a9b665;
-          padding: 0 0.3em;
 }
 
-      #pulseaudio {
+#battery {
-          margin: 0;
+    background-color: black;
-          padding: 0 0.5em 0 0.4em;
+    color: #000000;
-          color: #d8a657;
+}
+
+#battery.charging, #battery.plugged {
+    color: black;
+    background-color: #26A65B;
+}
+
+@keyframes blink {
+    to {
+        background-color: black;
+        color: #000000;
+    }
+}
+
+#battery.critical:not(.charging) {
+    background-color: #f53c3c;
+    color: black;
+    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: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+#memory {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+#disk {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
 }
 
 #backlight {
-          margin: 0;
+    background-color: #90b1b1;
-          padding: 0 0.5em 0 0.4em;
-          color: #d8a657;
-      }
-      #cpu {
-          margin: 0;
-          padding: 0 0.1em 0 0.1em;
-          color: #a9b665;
 }
+
 #network {
-          margin: 0;
+    background-color: #FA8BFF;
-          padding: 0 0.4em 0 0.5em;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
-          color: #d8a657;
+    color: black;
 }
-      #custom-cycle_wall {
+
-          margin: 0;
+#network.disconnected {
-          padding: 0 0.5em;
+    background-color: #FA8BFF;
-          color: #d3869b;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: red;
+}
+
+#pulseaudio {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+#pulseaudio.muted {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: red;
+}
+
+#custom-media {
+    background-color: #8EC5FC;
+    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
+    color: black;
+    border-radius: 20px;
+    margin-right: 5px;
+    margin-left: 5px;
+}
+
+#custom-media.custom-spotify {
+    background-color: #8EC5FC;
+    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
+    color: black;
+    border-radius: 20px;
+    margin-right: 5px;
+
+}
+
+#custom-media.custom-vlc {
+    background-color: #8EC5FC;
+    background-image: linear-gradient(62deg, #8EC5FC 0%, #E0C3FC 100%);
+    color: black;
+    border-radius: 20px;
+    margin-right: 5px;
+}
+
+#custom-power{
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    font-size: 18px;
+    border-radius: 20px;
+    margin-left: 2px;
+}
+
+#custom-launcher{
+    background-color: #FA8BFF;
+    background-image: linear-gradient(-45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    font-size: 25px;
+    border-radius: 20px;
+    margin-right: 2px;
+}
+
+#custom-updater {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+#custom-snip {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+    font-size: 20px;
+}
+
+#custom-layout{
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+    font-size: 18px;
+    border-radius: 20px 0px 0px 20px;
+}
+
+#taskbar {
+    background-color: #2BD2FF;
+    background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #FA8BFF 90%);
+    border-radius: 20px;
+
+}
+
+
+#temperature {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(-45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+    border-radius: 0px 20px 20px 0px;
+}
+
+#temperature.critical {
+    background-color: #eb4d4b;
+}
+
+#tray {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(-45deg, #2BD2FF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+#tray > .passive {
+    -gtk-icon-effect: dim;
+    background-color: #FA8BFF;
+    background-image: linear-gradient(-45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+#tray > .needs-attention {
+    -gtk-icon-effect: highlight;
+    background-color: #FA8BFF;
+    background-image: linear-gradient(-45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+}
+
+#idle_inhibitor {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    border-radius: 20px 0px 0px 20px;
+
+}
+
+#idle_inhibitor.activated {
+    background-color: #FA8BFF;
+    background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
+    color: black;
+    border-radius: 20px 0px 0px 20px;
+
 }
 
 #language {
-          margin: 0;
+    background-color: #FA8BFF;
-          padding: 0 0.1em;
+    background-image: linear-gradient(45deg, #FA8BFF 0%, #2BD2FF 52%, #2BD2FF 90%);
-          color: #d3869b;
+    color: black;
+    min-width: 16px;
+    padding-left : 8px;
+    border-radius: 20px 0px 0px 20px;
 }
-      #tray {
+
-          margin: 0;
+#keyboard-state {
-          padding: 0 0.2em;
+    background: #97e1ad;
-          color: #d3869b;
+    color: #000000;
+    min-width: 16px;
 }
-      #battery {
+
-          margin: 0;
+#keyboard-state > label {
-          padding: 0 0.5em 0 0.4em;
+    padding: 0px 5px;
-          color: #a9b665;
+}
+
+#keyboard-state > label.locked {
+    background: rgba(0, 0, 0, 0.2);
 }
       '';
     };