wlogout-styling

17 files changed, 91 insertions, 89 deletions

diff --git a/config/hypr/scripts/Wlogout.sh b/config/hypr/scripts/Wlogout.sh
index c8ce86c1..0cfb0907 100755
--- a/config/hypr/scripts/Wlogout.sh
+++ b/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
diff --git a/config/hypr/v2.1.15 b/config/hypr/v2.1.16
index 31b3414d..31b3414d 100644
--- a/config/hypr/v2.1.15
+++ b/config/hypr/v2.1.16
diff --git a/config/wlogout/sleep-hover.png b/config/wlogout/icons/hibernate-hover.png
index 0fd3bade..0fd3bade 100644
--- a/config/wlogout/sleep-hover.png
+++ b/config/wlogout/icons/hibernate-hover.png
diff --git a/config/wlogout/sleep.png b/config/wlogout/icons/hibernate.png
index 6a3d607f..6a3d607f 100644
--- a/config/wlogout/sleep.png
+++ b/config/wlogout/icons/hibernate.png
diff --git a/config/wlogout/lock-hover.png b/config/wlogout/icons/lock-hover.png
index 8fb86fe4..8fb86fe4 100644
--- a/config/wlogout/lock-hover.png
+++ b/config/wlogout/icons/lock-hover.png
diff --git a/config/wlogout/lock.png b/config/wlogout/icons/lock.png
index 430451c8..430451c8 100644
--- a/config/wlogout/lock.png
+++ b/config/wlogout/icons/lock.png
diff --git a/config/wlogout/logout-hover.png b/config/wlogout/icons/logout-hover.png
index 9e570a9e..9e570a9e 100644
--- a/config/wlogout/logout-hover.png
+++ b/config/wlogout/icons/logout-hover.png
diff --git a/config/wlogout/logout.png b/config/wlogout/icons/logout.png
index 128c9955..128c9955 100644
--- a/config/wlogout/logout.png
+++ b/config/wlogout/icons/logout.png
diff --git a/config/wlogout/icons/moon_865813.png b/config/wlogout/icons/moon_865813.png
new file mode 100644
index 00000000..b87fabf8
--- /dev/null
+++ b/config/wlogout/icons/moon_865813.png
diff --git a/config/wlogout/power-hover.png b/config/wlogout/icons/power-hover.png
index 122d3318..122d3318 100644
--- a/config/wlogout/power-hover.png
+++ b/config/wlogout/icons/power-hover.png
diff --git a/config/wlogout/power.png b/config/wlogout/icons/power.png
index ce561661..ce561661 100644
--- a/config/wlogout/power.png
+++ b/config/wlogout/icons/power.png
diff --git a/config/wlogout/restart-hover.png b/config/wlogout/icons/restart-hover.png
index 3e185360..3e185360 100644
--- a/config/wlogout/restart-hover.png
+++ b/config/wlogout/icons/restart-hover.png
diff --git a/config/wlogout/restart.png b/config/wlogout/icons/restart.png
index 7855d409..7855d409 100644
--- a/config/wlogout/restart.png
+++ b/config/wlogout/icons/restart.png
diff --git a/config/wlogout/icons/sleep-hover.png b/config/wlogout/icons/sleep-hover.png
new file mode 100644
index 00000000..ef735a7c
--- /dev/null
+++ b/config/wlogout/icons/sleep-hover.png
diff --git a/config/wlogout/icons/sleep.png b/config/wlogout/icons/sleep.png
new file mode 100644
index 00000000..f9480dd3
--- /dev/null
+++ b/config/wlogout/icons/sleep.png
diff --git a/config/wlogout/layout b/config/wlogout/layout
index 6d1c3975..5f006580 100644
--- a/config/wlogout/layout
+++ b/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"
+}
\ No newline at end of file
diff --git a/config/wlogout/style.css b/config/wlogout/style.css
index 57c9ede2..c2e8bc2e 100644
--- a/config/wlogout/style.css
+++ b/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"));
 }