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,58 +21,49 @@ template $GameItem: Box {
       };
 
       [overlay]
-      Revealer {
+      MenuButton options {
-        reveal-child: bind $_any(motion.contains-pointer, options.active) as <bool>;
+        icon-name: "view-more-symbolic";
-        transition-type: slide_down; // https://gitlab.gnome.org/GNOME/gtk/-/issues/7903
+        tooltip-text: _("Options");
         halign: end;
         valign: start;
+        margin-top: 6;
+        margin-end: 6;
+        notify::active => $_reveal_buttons();
 
-        child: MenuButton options {
+        menu-model: menu {
-          icon-name: "view-more-symbolic";
+          item (_("Edit"), "item.edit")
-          tooltip-text: _("Options");
-          margin-top: 6;
-          margin-end: 6;
 
-          menu-model: menu {
+          item {
-            item (_("Edit"), "item.edit")
+            label: _("Hide");
+            action: "game.hide";
+            hidden-when: "action-disabled";
+          }
 
-            item {
+          item {
-              label: _("Hide");
+            label: _("Unhide");
-              action: "game.hide";
+            action: "game.unhide";
-              hidden-when: "action-disabled";
+            hidden-when: "action-disabled";
-            }
+          }
 
-            item {
+          item (_("Remove"), "game.remove")
-              label: _("Unhide");
-              action: "game.unhide";
-              hidden-when: "action-disabled";
-            }
-
-            item (_("Remove"), "game.remove")
-          };
-
-          styles [
-            "circular",
-          ]
         };
+
+        styles [
+          "circular",
+        ]
       }
 
       [overlay]
-      Revealer {
+      Button play {
-        reveal-child: bind motion.contains-pointer;
+        action-name: "game.play";
-        transition-type: slide_up; // https://gitlab.gnome.org/GNOME/gtk/-/issues/7903
+        label: _("Play");
         halign: center;
         valign: end;
+        margin-bottom: 12;
 
-        child: Button {
+        styles [
-          action-name: "game.play";
+          "pill",
-          label: _("Play");
+        ]
-          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 {