wlogout and hyprlock :)

.config/hypr/binds.conf

@@ -14,7 +14,7 @@ $browser = firefox
 # Window/Session actions
 bind = $mainMod, backspace, exec, $scrPath/dontkillsteam.sh # close focused window
 bind = $mainMod, F, fullscreen # toggle the window between focus and fullscreen
-bind = $mainMod, e, exec, caelestia shell drawers toggle session # Launcher for caelestia
+bind = $mainMod, e, exec, wlogout -b 5 # Wlogout menu
 bind = $mainMod, d, exec, walker # Launcher
 
 # Application shortcuts

.config/hypr/hyprlock.conf

@@ -0,0 +1,109 @@
+source = $HOME/.config/hypr/mocha.conf
+
+$accent = $mauve
+$accentAlpha = $mauveAlpha
+$font = JetBrainsMono Nerd Font
+
+# GENERAL
+general {
+  hide_cursor = true
+}
+
+# BACKGROUND
+background {
+  monitor =
+  path = $HOME/.config/background
+  blur_passes = 0
+  color = $base
+}
+
+
+# LAYOUT
+label {
+  monitor =
+  text = Layout: $LAYOUT
+  color = $text
+  font_size = 25
+  font_family = $font
+  position = 30, -30
+  halign = left
+  valign = top
+}
+
+# TIME
+label {
+  monitor =
+  text = $TIME
+  color = $text
+  font_size = 90
+  font_family = $font
+  position = -30, 0
+  halign = right
+  valign = top
+}
+
+# DATE
+label {
+  monitor =
+  text = cmd[update:43200000] date +"%A, %d %B %Y"
+  color = $text
+  font_size = 25
+  font_family = $font
+  position = -30, -150
+  halign = right
+  valign = top
+}
+
+# FINGERPRINT
+{
+  monitor = "";
+  text = "$FPRINTPROMPT";
+  color = "$text";
+  font_size = 14;
+  font_family = $font;
+  position = "0, -107";
+  halign = "center";
+  valign = "center";
+}
+
+image {
+  path = $HOME/.config/hypr/cat.png
+  size = 240
+  border_color = transparent
+  rounding = 0
+  position = 0, 7px
+}
+
+# USER AVATAR
+image {
+  monitor =
+  path = $HOME/.face
+  size = 100
+  border_color = $accent
+  position = 0, 75
+  halign = center
+  valign = center
+}
+
+# INPUT FIELD
+input-field {
+  monitor =
+  size = 300, 60
+  outline_thickness = 4
+  dots_size = 0.2
+  dots_spacing = 0.2
+  dots_center = true
+  outer_color = $accent
+  inner_color = $surface0
+  font_color = $text
+  fade_on_empty = false
+  placeholder_text = <span foreground="##$textAlpha"><i>󰌾 Logged in as </i><span foreground="##$accentAlpha">$USER</span></span>
+  hide_input = false
+  check_color = $accent
+  fail_color = $red
+  fail_text = <i>$FAIL <b>($ATTEMPTS)</b></i>
+  capslock_color = $yellow
+  position = 0, -47
+  halign = center
+  valign = center
+}

.config/hypr/mocha.conf

@@ -0,0 +1,78 @@
+
+$rosewater = rgb(f5e0dc)
+$rosewaterAlpha = f5e0dc
+
+$flamingo = rgb(f2cdcd)
+$flamingoAlpha = f2cdcd
+
+$pink = rgb(f5c2e7)
+$pinkAlpha = f5c2e7
+
+$mauve = rgb(cba6f7)
+$mauveAlpha = cba6f7
+
+$red = rgb(f38ba8)
+$redAlpha = f38ba8
+
+$maroon = rgb(eba0ac)
+$maroonAlpha = eba0ac
+
+$peach = rgb(fab387)
+$peachAlpha = fab387
+
+$yellow = rgb(f9e2af)
+$yellowAlpha = f9e2af
+
+$green = rgb(a6e3a1)
+$greenAlpha = a6e3a1
+
+$teal = rgb(94e2d5)
+$tealAlpha = 94e2d5
+
+$sky = rgb(89dceb)
+$skyAlpha = 89dceb
+
+$sapphire = rgb(74c7ec)
+$sapphireAlpha = 74c7ec
+
+$blue = rgb(89b4fa)
+$blueAlpha = 89b4fa
+
+$lavender = rgb(b4befe)
+$lavenderAlpha = b4befe
+
+$text = rgb(cdd6f4)
+$textAlpha = cdd6f4
+
+$subtext1 = rgb(bac2de)
+$subtext1Alpha = bac2de
+
+$subtext0 = rgb(a6adc8)
+$subtext0Alpha = a6adc8
+
+$overlay2 = rgb(9399b2)
+$overlay2Alpha = 9399b2
+
+$overlay1 = rgb(7f849c)
+$overlay1Alpha = 7f849c
+
+$overlay0 = rgb(6c7086)
+$overlay0Alpha = 6c7086
+
+$surface2 = rgb(585b70)
+$surface2Alpha = 585b70
+
+$surface1 = rgb(45475a)
+$surface1Alpha = 45475a
+
+$surface0 = rgb(313244)
+$surface0Alpha = 313244
+
+$base = rgb(1e1e2e)
+$baseAlpha = 1e1e2e
+
+$mantle = rgb(181825)
+$mantleAlpha = 181825
+
+$crust = rgb(11111b)
+$crustAlpha = 11111b

.config/wlogout/layout

@@ -1,6 +1,6 @@
 {
     "label" : "lock",
-    "action" : "loginctl lock-session",
+    "action" : "hyprlock",
     "text" : "Lock",
     "keybind" : "l"
 }

.config/wlogout/style.css

@@ -53,21 +53,21 @@ button:last-child {
 }
 
 #lock:focus {
-    background-color: #d20f39;
+    background-color: #f38ba8;
 }
 
 #logout:focus {
-    background-color: #d79921;
+    background-color: #fab387;
-}
-
-#suspend:focus {
-    background-color: #04a5e5;
 }
 
 #shutdown:focus {
-    background-color: #40a02b;
+    background-color: #a6e3a1;
+}
+
+#suspend:focus {
+    background-color: #f9e2af;
 }
 
 #reboot:focus {
-    background-color: #8839ef;
+    background-color: #cba6f7;
 }