Restyle play/pause button for new item page preview
This commit is contained in:
parent
20202b5cd9
commit
26954a3bf2
2 changed files with 44 additions and 3 deletions
|
@ -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%
|
||||||
|
|
|
@ -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{
|
||||||
|
|
Loading…
Reference in a new issue