v0.2.0: Cursor-Fix + Text über Icons

desktop-icons.yuck

@@ -3,30 +3,34 @@
     :x "50%"
     :y "50%"
     :anchor "top left"
-    :width "400px"
-    :height "120px")
-  :stacking "fg"   ;; oder "bg", je nach Geschmack
+    :width "500px"
+    :height "150px")
+  :stacking "fg"
   (box
     :orientation "h"
     :halign "center"
     :spacing 40
 
+    ;; Remmina
     (button
       :class "icon-btn"
-      :tooltip "Remmina"
       :onclick "remmina"
-      (image :path "~/.config/eww/icons/remmina.png" :width 64 :height 64))
+      (box :orientation "v" :halign "center" :valign "center" :spacing 0
+        (label :class "icon" :text "")
+        (label :class "icon-text" :text "Remote Desktop")))
 
+    ;; Support
     (button
       :class "icon-btn"
-      :tooltip "Support (coming soon)"
       :onclick "notify-send 'Support kommt später...'"
-      (image :path "~/.config/eww/icons/help.png" :width 64 :height 64))
+      (box :orientation "v" :halign "center" :valign "center"
+        (label :class "icon" :text "")
+        (label :class "icon-text" :text "Stines Support")))
 
+    ;; Reboot
     (button
       :class "icon-btn"
-      :tooltip "Reboot"
       :onclick "systemctl reboot"
-      (image :path "~/.config/eww/icons/reboot.png" :width 64 :height 64))
-  )
-)
+      (box :orientation "v" :halign "center" :valign "center" :spacing 0
+        (label :class "icon" :text "")
+        (label :class "icon-text" :text "Neustarten")))))

eww.scss

@@ -1,11 +1,35 @@
 .icon-btn {
   background: transparent;
   border: none;
-  padding: 10px;
-  transition: all 0.2s ease;
+  min-width: 80px;
+  min-height: 60px;
+  margin: 0px;
+  // display: flex;
+  // align-items: center;
+  // justify-content: center;
+  // transition: background 0.2s ease;
+  // padding: 5px;
+  // cursor: pointer;
 }
 
 .icon-btn:hover {
-  background: rgba(255, 255, 255, 0.15);
-  border-radius: 20px;
+   background: rgba(255, 255, 255, 0.15);
+}
+
+.icon-btn:hover .icon-text {
+  text-decoration: underline;
+}
+
+.icon {
+  font-family: "Symbols Nerd Font Mono";
+  font-size: 60px;
+  margin-left: -1rem;
+  margin-bottom: -1rem;
+  color: #ffffff;
+}
+
+.icon-text {
+  font-family: "sans";
+  font-size: 14px;
+  color: #dddddd;
 }