nixos/modules/applications/wlogout.nix

{ ... }: {
  # replaced by wlogout
  flake.homeModules.wlogout = { ... }: let
    wallpaper = ../../assets/wallpaper1.jpg;
    lock = ../../assets/lock.png;
    lock-hover = ../../assets/lock-hover.png;
    shutdown = ../../assets/power.png;
    shutdown-hover = ../../assets/power-hover.png;
    logout = ../../assets/logout.png;
    logout-hover = ../../assets/logout-hover.png;
    reboot = ../../assets/restart.png;
    reboot-hover = ../../assets/restart-hover.png;
  in {
    programs.wlogout = {
      enable = true;
      layout = [
        {
          label = "lock";
          action = "swaylock -eFLfk -i ${wallpaper}";
          text = "  Lock (L)  ";
          keybind = "l";
        }
        {
          label = "reboot";
          action = "systemctl reboot";
          text = " Reboot (R) ";
          keybind = "r";
        }
        {
          label = "shutdown";
          action = "systemctl poweroff";
          text = "Shutdown (S)";
          keybind = "s";
        }
        {
          label = "logout";
          action = "loginctl terminate-session $(loginctl show-session $(loginctl | grep $USER | awk '{print $1}') -p Id --value)";
          text = " Logout (E) ";
          keybind = "e";
        }
      ];
      style = ''
        window {
          font-family: OxProto Nerd Font;
          font-size: 14pt;
              color: #000000; /* text */
          background-color: rgba(40, 40, 40, 0.76);
        }
  
        button {
          background-repeat: no-repeat;
          background-position: center;
          background-size: 50%;
          border-style: solid;
          border-radius: 4px;
          border-width: 2px;
          border-color: #ebdbb2;
          background-color: rgba(40, 40, 40, 0.76);
          margin: 10px;
          transition:
            box-shadow 0.3s ease-in-out,
            background-color 0.3s ease-in-out;
        }
  
        button:hover {
          background-color: rgba(250, 137, 26, 0.3);
          color: #282828;
        }
  
        button:focus {
          background-color: #ebdbb2;
          color: #282828;
        }
  
        #lock {
          background-image: image(url("${lock}"));
        }
        #lock:focus {
          background-image: image(url("${lock-hover}"));
        }
        #lock:hover {
          background-image: image(url("${lock-hover}"));
        }
  
        #logout {
          background-image: image(url("${logout}"));
        }
        #logout:focus {
          background-image: image(url("${logout-hover}"));
        }
        #logout:hover {
          background-image: image(url("${logout-hover}"));
        }
  
  
        #shutdown {
          background-image: image(url("${shutdown}"));
        }
        #shutdown:focus {
          background-image: image(url("${shutdown-hover}"));
        }
        #shutdown:hover {
          background-image: image(url("${shutdown-hover}"));
        }
  
        #reboot {
          background-image: image(url("${reboot}"));
        }
        #reboot:focus {
          background-image: image(url("${reboot-hover}"));
        }
        #reboot:hover {
          background-image: image(url("${reboot-hover}"));
        }
      '';
    };
  };
}