From 26954a3bf2ab8cc6262c7296950e45ce4d8e4284 Mon Sep 17 00:00:00 2001
From: Matchu <matchu1993@gmail.com>
Date: Mon, 8 Jul 2024 17:19:14 -0700
Subject: [PATCH] Restyle play/pause button for new item page preview

---
 app/assets/stylesheets/items/_show.sass  | 40 +++++++++++++++++++++++-
 app/views/items/_outfit_viewer.html.haml |  7 +++--
 2 files changed, 44 insertions(+), 3 deletions(-)

diff --git a/app/assets/stylesheets/items/_show.sass b/app/assets/stylesheets/items/_show.sass
index d672515f..627cbd6f 100644
--- a/app/assets/stylesheets/items/_show.sass
+++ b/app/assets/stylesheets/items/_show.sass
@@ -74,10 +74,48 @@ body.items-show
       left: 8px
       bottom: 8px
       display: none
+      align-items: center
+      justify-content: center
+      color: white
+      background: rgba(0, 0, 0, 0.64)
+      width: 2.5em
+      height: 2.5em
+      border-radius: 100%
+      border: 2px solid transparent
+      transition: all .25s
+
+      .playing-label, .paused-label
+        display: none
+        width: 1em
+        height: 1em
+
+      .play-pause-toggle
+        // Visually hidden
+        clip: rect(0 0 0 0)
+        clip-path: inset(50%)
+        height: 1px
+        overflow: hidden
+        position: absolute
+        white-space: nowrap
+        width: 1px
+
+        &:checked ~ .playing-label
+          display: block
+
+        &:not(:checked) ~ .paused-label
+          display: block
+
+      &:hover, &:has(.play-pause-toggle:focus)
+        border: 2px solid $module-border-color
+        background: $module-bg-color
+        color: $text-color
+
+      &:active
+        transform: translateY(2px)
 
     &:has(outfit-layer:state(has-animations))
       .play-pause-button
-        display: block
+        display: flex
 
   .error-indicator
     font-size: 85%
diff --git a/app/views/items/_outfit_viewer.html.haml b/app/views/items/_outfit_viewer.html.haml
index 1848f3c8..23f7693f 100644
--- a/app/views/items/_outfit_viewer.html.haml
+++ b/app/views/items/_outfit_viewer.html.haml
@@ -1,12 +1,15 @@
 %outfit-viewer
   .loading-indicator= render partial: "hanger_spinner"
 
-  %label.play-pause-button
+  %label.play-pause-button{title: "Pause/play animations"}
     %input.play-pause-toggle{
       type: "checkbox",
       checked: outfit_viewer_is_playing,
     }
-    Play/pause
+    %svg.playing-label{viewBox: "0 0 24 24", "aria-hidden": "true", "aria-label": "Pause"}
+      %path{fill: "currentColor", d: "M6 19h4V5H6v14zm8-14v14h4V5h-4z"}
+    %svg.paused-label{viewBox: "0 0 24 24", "aria-hidden": "true", "aria-label": "Play"}
+      %path{fill: "currentColor", d: "M8 5v14l11-7z"}
 
   - outfit.visible_layers.each do |swf_asset|
     %outfit-layer{