feat: hyprland done, testing needed, add wlogout config

config/matugen/templates/hyprland/colors.lua

@@ -1,13 +1,21 @@
 hl.config({
     general = {
         col = {
-            active_border   = "rgba({{colors.outline_variant.default.hex_stripped}}77)",
+            active_border   = "rgba({{colors.primary.default.hex_stripped}}cc) rgba({{colors.secondary.default.hex_stripped}}cc) rgba({{colors.tertiary.default.hex_stripped}}cc) 45deg",
             inactive_border = "rgba({{colors.surface_container_low.default.hex_stripped}}33)",
         },
     },
-    misc = {
-        background_color = "rgba({{colors.surface.dark.hex_stripped}}FF)",
+    group = {
+        col = {
+            active_border   = "rgba({{colors.outline_variant.default.hex_stripped}}77)",
+            inactive_border = "rgba({{colors.surface_container_high.default.hex_stripped}}33)",
+        },
     },
+    decoration = {
+        shadow = {
+            color = "rgba({{colors.shadow.default.hex_stripped}}20)",
+        }
+    }
 })
 
 hl.window_rule({

config/matugen/templates/wlogout/style.css

@@ -0,0 +1,66 @@
+/*
+ *          ╭───────────────────────────────────────────────╮
+ *          │                    WLOGOUT                    │
+ *          ╰───────────────────────────────────────────────╯
+*/
+window {
+    font-family: monospace;
+    font-size: 14pt;
+    color: {{colors.on_background.default.hex}}; /* text */
+    background-color: {{colors.primary.background.hex}}60;
+}
+
+button {
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: 25%;
+    border: none;
+    background-color: transparent;
+    margin: 5px;
+    transition: box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
+    border-radius: 40px;
+}
+
+button:hover {
+    background-color: {{colors.primary.default.hex}};
+}
+
+button:focus {
+    background-color: {{colors.primary.default.hex}}80;
+    color: {{colors.on_primary.default.hex}};
+}
+
+#lock {
+    background-image: image(url("./lock.png"));
+}
+#lock:focus {
+    background-image: image(url("./lock-hover.png"));
+}
+
+#logout {
+    background-image: image(url("./logout.png"));
+}
+#logout:focus {
+    background-image: image(url("./logout-hover.png"));
+}
+
+#suspend {
+    background-image: image(url("./sleep.png"));
+}
+#suspend:focus {
+    background-image: image(url("./sleep-hover.png"));
+}
+
+#shutdown {
+    background-image: image(url("./power.png"));
+}
+#shutdown:focus {
+    background-image: image(url("./power-hover.png"));
+}
+
+#reboot {
+    background-image: image(url("./restart.png"));
+}
+#reboot:focus {
+    background-image: image(url("./restart-hover.png"));
+}