Restyle play/pause button for new item page preview

This commit is contained in:
Emi Matchu 2024-07-08 17:19:14 -07:00
parent 20202b5cd9
commit 26954a3bf2
2 changed files with 44 additions and 3 deletions

View file

@ -74,10 +74,48 @@ body.items-show
left: 8px left: 8px
bottom: 8px bottom: 8px
display: none 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)) &:has(outfit-layer:state(has-animations))
.play-pause-button .play-pause-button
display: block display: flex
.error-indicator .error-indicator
font-size: 85% font-size: 85%

View file

@ -1,12 +1,15 @@
%outfit-viewer %outfit-viewer
.loading-indicator= render partial: "hanger_spinner" .loading-indicator= render partial: "hanger_spinner"
%label.play-pause-button %label.play-pause-button{title: "Pause/play animations"}
%input.play-pause-toggle{ %input.play-pause-toggle{
type: "checkbox", type: "checkbox",
checked: outfit_viewer_is_playing, 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.visible_layers.each do |swf_asset|
%outfit-layer{ %outfit-layer{