✨ feat(wlogout): new visual, pretty!

wlogout/layout

@@ -24,7 +24,7 @@
 }
 {
     "label" : "logout",
-    "action" : "loginctl terminate-user $USER && killall sddm",
+    "action" : "loginctl kill-user $(whoami)",
     "text" : "Logout",
     "keybind" : "e"
 }

wlogout/style.css

@@ -3,52 +3,62 @@
 
 
 * {
+    all: unset;
 	background-image: none;
-	box-shadow: none;
-    outline: none;
     background-repeat: no-repeat;
+    transition: 100ms ease-in-out;
 }
 
 window {
-	background-color: alpha(shade(@background, .6), .6);
+    background: transparent;
-}
-
-window > * > * {
-    border: 2px solid @color2;
-    border-radius: 18.8px;
-}
-
-button:first-child {
-    border-radius: 16px 0 0 16px;
 }
 
 button {
-    border-radius: 0;
+    border-radius: 16px;
-    color: @foreground;
+    background-position: center 40%;
-	background-color: @background;
+	background-size: 35%;
-    background-position: center;
+    margin: 0 6px;
-	background-size: 40%;
-    transition: 150ms linear;
     font-size: 1.25em;
     font-weight: 700;
 }
 
-button:last-child {
+window > * > * {
-    border-radius: 0 16px 16px 0;
+    padding: 140px 60px;
 }
 
-button:focus, button:hover {
+button:first-child {
+    margin-right: 6px;
+}
+
+button:last-child {
+    margin-left: 6px;
+}
+
+button:focus,
+button:hover {
 	background-color: shade(@color1, .75);
+    background-size: 40%;
+    background-position: center;
 }
 
 button:focus:hover {
-    background-color: @color3;
+    background-color: @color2;
 }
 
 button:active {
     background-color: @color1;
 }
 
+button > label {
+    font-size: 1.8em;
+    color: transparent;
+}
+
+button:hover > label,
+button:focus > label {
+    color: @foreground;
+}
+
 #lock {
     background-image: image(url("/usr/share/wlogout/icons/lock.png"), url("/usr/local/share/wlogout/icons/lock.png"));
 }