From 7f4d00759f46b7915540f14ef6001397eeef946f Mon Sep 17 00:00:00 2001
From: Stephan Raabe <mail@stephan-raabe.de>
Date: Thu, 21 Sep 2023 14:04:23 +0200
Subject: [PATCH] Update wlogout style with pywal

---
 wlogout/style.css | 51 +++++++++++++++++++++++++++++++----------------
 1 file changed, 34 insertions(+), 17 deletions(-)

diff --git a/wlogout/style.css b/wlogout/style.css
index b20f2c8..0f68c0d 100644
--- a/wlogout/style.css
+++ b/wlogout/style.css
@@ -10,69 +10,86 @@ by Stephan Raabe (2023)
 ----------------------------------------------------- 
 */
 
+/* -----------------------------------------------------
+ * Import Pywal colors 
+ * ----------------------------------------------------- */
+@import '../../.cache/wal/colors-wlogout.css';
+
+/* -----------------------------------------------------
+ * General 
+ * ----------------------------------------------------- */
+
 * {
+    font-family: "Fira Sans Semibold", FontAwesome, Roboto, Helvetica, Arial, sans-serif;
 	background-image: none;
-	transition: 0ms;
+	transition: 20ms;
 }
 
 window {
 	background-color: rgba(12, 12, 12, 0.1);
-	background-image: url('./noise.png');
 }
 
 button {
 	color: #FFFFFF;
-	border-style: solid;
-	border-width: 2px;
-	background-repeat: no-repeat;
+    font-size:20px;
+
+    background-repeat: no-repeat;
 	background-position: center;
 	background-size: 25%;
 
-	background-color: rgba(108, 112, 134, 0.4);
-	border: 1px solid rgba(108, 112, 134, 0.3);
-	border-top: 1px solid rgba(108, 112, 134, 0.3);
+	border-style: solid;
+	background-color: rgba(12, 12, 12, 0.3);
+	border: 3px solid #FFFFFF;
+
+    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 }
 
 button:focus,
 button:active,
 button:hover {
-	background-color: rgba(156, 161, 192, 0.5);
-	border: 1px solid rgba(108, 112, 134, 0.15);
-	border-top: 1px solid rgba(108, 112, 134, 0.15);
+    color: @color11;
+	background-color: rgba(12, 12, 12, 0.5);
+	border: 3px solid @color11;
 }
 
+/* 
+----------------------------------------------------- 
+Buttons
+----------------------------------------------------- 
+*/
+
 #lock {
 	margin: 10px;
 	border-radius: 20px;
-	background-image: image(url("/usr/share/wlogout/icons/lock.png"), url("/usr/local/share/wlogout/icons/lock.png"));
+	background-image: image(url("icons/lock.png"));
 }
 
 #logout {
 	margin: 10px;
 	border-radius: 20px;
-	background-image: image(url("/usr/share/wlogout/icons/logout.png"), url("/usr/local/share/wlogout/icons/logout.png"));
+	background-image: image(url("icons/logout.png"));
 }
 
 #suspend {
 	margin: 10px;
 	border-radius: 20px;
-	background-image: image(url("/usr/share/wlogout/icons/suspend.png"), url("/usr/local/share/wlogout/icons/suspend.png"));
+	background-image: image(url("icons/suspend.png"));
 }
 
 #hibernate {
 	margin: 10px;
 	border-radius: 20px;
-	background-image: image(url("/usr/share/wlogout/icons/hibernate.png"), url("/usr/local/share/wlogout/icons/hibernate.png"));
+	background-image: image(url("icons/hiberate.png"));
 }
 
 #shutdown {
 	margin: 10px;
 	border-radius: 20px;
-	background-image: image(url("/usr/share/wlogout/icons/shutdown.png"), url("/usr/local/share/wlogout/icons/shutdown.png"));
+	background-image: image(url("icons/shutdown.png"));
 }
 
 #reboot {
 	margin: 10px;
 	border-radius: 20px;
-	background-image: image(url("/usr/share/wlogout/icons/reboot.png"), url("/usr/local/share/wlogout/icons/reboot.png"));
+	background-image: image(url("icons/reboot.png"));
 }