wlogout-styling

15 files changed, 57 insertions, 77 deletions

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"));
 }