Emi Matchu
734b7fba1d
Now that we have such a convenient lil outfit viewer component we built for the item page preview, it's easy peasy to drop it in here too! And it's all nice and lightweight, since in this case it's basically just. image tags, with some supporting enhancements. Anyway, this page has no actual useful styles of its own yet. Gonna make it look nice and such!
110 lines
2.5 KiB
Sass
110 lines
2.5 KiB
Sass
@import "../partials/clean/constants"
|
|
|
|
// When loading, fade in the loading spinner after a brief delay. We only apply
|
|
// the delay here, not on the base styles, because fading *out* on load should
|
|
// be instant.
|
|
//
|
|
// This is implemented as a mixin, so that the item page can leverage the same
|
|
// loading state when loading a new preview altogether. Once CSS container
|
|
// style queries gain wider support, maybe use that instead.
|
|
=outfit-viewer-loading
|
|
cursor: wait
|
|
|
|
.loading-indicator
|
|
opacity: 1
|
|
transition-delay: 2s
|
|
|
|
// If the outfit *starts* in loading state, still delay the fade-in.
|
|
@starting-style
|
|
opacity: 0
|
|
|
|
outfit-viewer
|
|
display: block
|
|
position: relative
|
|
overflow: hidden
|
|
|
|
// These are default widths, expected to often be overridden.
|
|
width: 300px
|
|
height: 300px
|
|
|
|
// There's no useful text in here, but double-clicking the play/pause
|
|
// button can cause a weird selection state. Disable text selection.
|
|
user-select: none
|
|
-webkit-user-select: none
|
|
|
|
outfit-layer
|
|
display: block
|
|
position: absolute
|
|
inset: 0
|
|
|
|
// We disable pointer-events most importantly for the iframes, which
|
|
// will ignore our `cursor: wait` and show a plain cursor for the
|
|
// inside of its own document. But also, the context menus for these
|
|
// elements are kinda actively misleading, too!
|
|
pointer-events: none
|
|
|
|
img, iframe
|
|
width: 100%
|
|
height: 100%
|
|
|
|
.loading-indicator
|
|
position: absolute
|
|
z-index: 1000
|
|
bottom: 0px
|
|
right: 4px
|
|
padding: 8px
|
|
background: radial-gradient(circle closest-side, white 45%, #ffffff00)
|
|
|
|
opacity: 0
|
|
|
|
.play-pause-button
|
|
position: absolute
|
|
z-index: 1001
|
|
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
|
|
|
|
&:has(.play-pause-toggle:active)
|
|
transform: translateY(2px)
|
|
|
|
&:has(outfit-layer:state(has-animations))
|
|
.play-pause-button
|
|
display: flex
|
|
|
|
&:has(outfit-layer:state(loading))
|
|
+outfit-viewer-loading
|