wlogout-styling

config/hypr/scripts/Wlogout.sh

@@ -1,19 +1,41 @@
 #!/bin/bash
 
-# If you have 1440p, better to use this
-#wlogout --protocol layer-shell -b 5 -T 600 -B 600 &
+# Check if wlogout is already running
+if pgrep -x "wlogout" > /dev/null; then
+    pkill -x "wlogout"
+    exit 0
+fi
 
-# for 1080p
-wlogout --protocol layer-shell -b 5 -T 450 -B 450 &
+# detect monitor res
+x_mon=$(hyprctl -j monitors | jq '.[] | select(.focused==true) | .width')
+y_mon=$(hyprctl -j monitors | jq '.[] | select(.focused==true) | .height')
+hypr_scale=$(hyprctl -j monitors | jq '.[] | select (.focused == true) | .scale' | sed 's/\.//')
 
+# Set parameters based on screen resolution
+if [[ $x_mon =~ ^[0-9]+$ && $y_mon =~ ^[0-9]+$ && $hypr_scale =~ ^[0-9]+$ ]]; then
+    resolution=$((y_mon * hypr_scale / 100))
+    
+    echo "Detected Resolution: $resolution"
 
-# Capture the PID of the wlogout process
-wlogout_pid=$!
+    if ((resolution >= 2160)); then
+        wlogout --protocol layer-shell -b 6 -T 600 -B 700 &
+        echo "Setting parameters for resolution >= 2160p"
+    elif ((resolution >= 1440)); then
+        wlogout --protocol layer-shell -b 6 -T 500 -B 550 &
+        echo "Setting parameters for resolution >= 1440p"
+    elif ((resolution >= 1080)); then
+        wlogout --protocol layer-shell -b 6 -T 400 -B 400 &
+        echo "Setting parameters for resolution >= 1080p"
+    elif ((resolution >= 720)); then
+        wlogout --protocol layer-shell -b 3 -T 50 -B 50 &
+        echo "Setting parameters for resolution >= 720p"
+ 	fi
+fi
 
-# Wait for up to 30 seconds for wlogout to exit gracefully
-timeout 30s tail --pid $wlogout_pid -f /dev/null
+# Give some time for wlogout to start and exit
+#sleep 30
 
-# If wlogout is still running after the timeout, forcefully kill it
-if ps -p $wlogout_pid > /dev/null; then
-  kill -KILL $wlogout_pid
-fi
+# Check if wlogout is still running after starting
+#if pgrep -x "wlogout" > /dev/null; then
+#    pkill -x "wlogout"
+#fi

config/wlogout/layout

@@ -24,7 +24,13 @@
 }
 {
     "label" : "suspend",
-    "action" : "systemctl suspend",
+    "action" : "swaylock -f && systemctl suspend",
     "text" : "Suspend",
     "keybind" : "u"
 }
+{
+    "label" : "hibernate",
+    "action" : "systemctl hibernate",
+    "text" : "Hibernate",
+    "keybind" : "h"
+}

config/wlogout/style.css

@@ -1,113 +1,87 @@
+/* ----------- 💫 https://github.com/JaKooLit 💫 -------- */
+/* pywal-wlogout */
+
+/* Importing pywal colors */
+
+@import '../../.cache/wal/colors-waybar.css';
+
 window {
-    font-family: monospace;
-    font-size: 14pt;
+    font-family: Fira Code Medium;
+    font-size: 16pt;
     color: #cdd6f4; /* text */
-    background-color: rgba(30, 30, 46, 0.5);
+    background-color: rgba(30, 30, 46, 0.6);
 }
 
 button {
     background-repeat: no-repeat;
     background-position: center;
-    background-size: 25%;
-    border: none;
-    background-color: rgba(30, 30, 46, 0);
-    margin: 5px;
-	animation: gradient_f 20s ease-in infinite;
-    transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
-}
-
-button:hover#lock {
-	/*background-color: rgba(49, 50, 68, 0.2);*/
-	background-size: 25%;
-	margin-right : 30px;
-	margin-bottom : 30px;
-	border-radius: 20px;
+    background-size: 20%;
+    background-color: rgba(200, 220, 255, 0);
     animation: gradient_f 20s ease-in infinite;
-    transition: all 0.3s cubic-bezier(.55,0.0,.28,1.682);
+    border-radius: 80px; /* Increased border radius for a more rounded look */
 }
 
-button:hover#logout {
-	/*background-color: rgba(49, 50, 68, 0.2);*/
-	background-size: 25%;
-	margin-right : 30px;
-	margin-top : 30px;
-	border-radius: 20px;
-    animation: gradient_f 20s ease-in infinite;
-	transition: all 0.3s cubic-bezier(.55,0.0,.28,1.682);
-}
+button:focus {
+    background-size: 25%;
+	border: 0px;
 
-button:hover#shutdown {
-	/*background-color: rgba(49, 50, 68, 0.2);*/
-	background-size: 25%;
-	margin-left : 20px;
-	margin-bottom : 30px;
-	border-radius: 20px;
-    animation: gradient_f 20s ease-in infinite;
-	transition: all 0.3s cubic-bezier(.55,0.0,.28,1.682);
 }
 
-button:hover#reboot {
-	/*background-color: rgba(49, 50, 68, 0.2);*/
-	background-size: 25%;
-	margin-left : 30px;
-	margin-top : 30px;
-	border-radius: 20px;
-    	animation: gradient_f 20s ease-in infinite;
-	transition: all 0.3s cubic-bezier(.55,0.0,.28,1.682);
+button:hover {
+    background-color: @color2; 
+    color: #1e1e2e;
+    background-size: 50%;
+    margin: 30px;
+    border-radius: 80px; 
+    transition: all 0.3s cubic-bezier(.55, 0.0, .28, 1.682), box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
+    box-shadow: 0 0 20px @color7; 
+	
 }
 
-button:hover#suspend {
-	/*background-color: rgba(49, 50, 68, 0.2);*/
-	background-size: 25%;
-	margin-left : 30px;
-	margin-top : 30px;
-	border-radius: 20px;
-    	animation: gradient_f 20s ease-in infinite;
-	transition: all 0.3s cubic-bezier(.55,0.0,.28,1.682);
+/* Adjust the size of the icon or content inside the button */
+button span {
+    font-size: 1.2em; /* Increase the font size */
 }
 
-button:focus {
-    background-color: rgba(180, 190, 254, 0.3);
-    color: #1e1e2e;
-	background-size: 25%;
-	margin-left : 30px;
-	margin-top : 30px;
-	border-radius: 20px;
-    animation: gradient_f 20s ease-in infinite;
-	transition: all 0.3s cubic-bezier(.55,0.0,.28,1.682);
-}
 
 #lock {
-    background-image: image(url("./lock.png"));
+    background-image: image(url("./icons/lock.png"));
 }
-#lock:focus {
-    background-image: image(url("./lock-hover.png"));
+#lock:hover {
+    background-image: image(url("./icons/lock-hover.png"));
 }
 
 #logout {
-    background-image: image(url("./logout.png"));
+    background-image: image(url("./icons/logout.png"));
 }
-#logout:focus {
-    background-image: image(url("./logout-hover.png"));
+#logout:hover {
+    background-image: image(url("./icons/logout-hover.png"));
 }
 
 #suspend {
-    background-image: image(url("./sleep.png"));
+    background-image: image(url("./icons/sleep.png"));
 }
-#suspend:focus {
-    background-image: image(url("./sleep-hover.png"));
+#suspend:hover {
+    background-image: image(url("./icons/sleep-hover.png"));
 }
 
 #shutdown {
-    background-image: image(url("./power.png"));
+    background-image: image(url("./icons/power.png"));
 }
-#shutdown:focus {
-    background-image: image(url("./power-hover.png"));
+#shutdown:hover {
+    background-image: image(url("./icons/power-hover.png"));
 }
 
 #reboot {
-    background-image: image(url("./restart.png"));
+    background-image: image(url("./icons/restart.png"));
+}
+#reboot:hover {
+    background-image: image(url("./icons/restart-hover.png"));
+}
+
+#hibernate {
+    background-image: image(url("./icons/hibernate.png"));
 }
-#reboot:focus {
-    background-image: image(url("./restart-hover.png"));
+#hibernate:hover {
+    background-image: image(url("./icons/hibernate-hover.png"));
 }