style: Improve game item hover styling

This should make the transitions less distracting

cartridges/ui/game-item.blp

@@ -6,7 +6,9 @@ template $GameItem: Box {
   orientation: vertical;
   spacing: 12;
 
-  EventControllerMotion motion {}
+  EventControllerMotion motion {
+    notify::contains-pointer => $_reveal_buttons();
+  }
 
   Adw.Clamp {
     unit: px;
@@ -19,17 +21,14 @@ template $GameItem: Box {
       };
 
       [overlay]
-      Revealer {
+      MenuButton options {
-        reveal-child: bind $_any(motion.contains-pointer, options.active) as <bool>;
-        transition-type: slide_down; // https://gitlab.gnome.org/GNOME/gtk/-/issues/7903
-        halign: end;
-        valign: start;
-
-        child: MenuButton options {
         icon-name: "view-more-symbolic";
         tooltip-text: _("Options");
+        halign: end;
+        valign: start;
         margin-top: 6;
         margin-end: 6;
+        notify::active => $_reveal_buttons();
 
         menu-model: menu {
           item (_("Edit"), "item.edit")
@@ -52,25 +51,19 @@ template $GameItem: Box {
         styles [
           "circular",
         ]
-        };
       }
 
       [overlay]
-      Revealer {
+      Button play {
-        reveal-child: bind motion.contains-pointer;
-        transition-type: slide_up; // https://gitlab.gnome.org/GNOME/gtk/-/issues/7903
-        halign: center;
-        valign: end;
-
-        child: Button {
         action-name: "game.play";
         label: _("Play");
+        halign: center;
+        valign: end;
         margin-bottom: 12;
 
         styles [
           "pill",
         ]
-        };
       }
     };
   }

cartridges/ui/game_item.py

@@ -17,6 +17,10 @@ class GameItem(Gtk.Box):
 
     __gtype_name__ = __qualname__
 
+    motion: Gtk.EventControllerMotion = Gtk.Template.Child()
+    options: Gtk.MenuButton = Gtk.Template.Child()
+    play: Gtk.Button = Gtk.Template.Child()
+
     position = GObject.Property(type=int)
 
     @GObject.Property(type=Game)
@@ -42,6 +46,13 @@ class GameItem(Gtk.Box):
             ),
         ))
 
+        self._reveal_buttons()
+
     @Gtk.Template.Callback()
-    def _any(self, _obj, *values: bool) -> bool:
+    def _reveal_buttons(self, *_args):
-        return any(values)
+        for widget, reveal in (
+            (self.play, contains_pointer := self.motion.props.contains_pointer),
+            (self.options, contains_pointer or self.options.props.active),
+        ):
+            widget.props.can_focus = widget.props.can_target = reveal
+            (widget.remove_css_class if reveal else widget.add_css_class)("hidden")

cartridges/ui/style.css

@@ -29,6 +29,21 @@
   box-shadow:
     0 0 0 1px rgb(from currentcolor r g b / 10%) inset,
     0 1px rgb(from currentcolor r g b / 30%) inset;
+
+  /* https://gitlab.gnome.org/GNOME/libadwaita/-/blob/c42b7c5bbff052a1af0eee131da28d1542254f47/src/stylesheet/_common.scss#L3 */
+  transition-property:
+    outline-color, outline-width, outline-offset, background, box-shadow,
+    opacity, transform;
+}
+
+#game-item button.hidden {
+  opacity: 0;
+  transform: translateY(3px);
+}
+
+#game-item menubutton.hidden button {
+  opacity: 0;
+  transform: translateY(-6px);
 }
 
 #details {