1
0
Fork 0
forked from OpenNeo/impress
impress/app/assets/stylesheets/items/_show.sass
Matchu 059644f847 Improve the loading indicator for the new item page previews
Add some unobtrusive white background for contrast, show it when the
Turbo frame is loading too, add a spinner cursor, and fix a silliness
of how we put the `position: absolute` stuff into the component-y part
of the hanger spinner instead of this specific use case lol oops!
2024-07-07 21:32:41 -07:00

100 lines
2 KiB
Sass

@import "../partials/clean/constants"
@import "../partials/clean/mixins"
@import "../partials/item_header"
body.items-show
.item-header
+item-header
#item-contributors
+subtle-banner
clear: both
margin:
bottom: 0
top: 2em
header
display: inline
font-weight: bold
margin-right: .25em
footer
display: inline
ul
display: inline
list-style: none
li
display: inline
&::after
content: ", "
&:last-child::after
content: "."
.nc-icon
height: 16px
width: 16px
.outfit-viewer
position: relative
display: block
width: 300px
height: 300px
border: 1px solid $module-border-color
border-radius: 1em
overflow: hidden
margin: 0 auto .75em
outfit-layer
display: block
position: absolute
inset: 0
img, iframe
width: 100%
height: 100%
.loading-indicator
position: absolute
z-index: 999
bottom: 0px
right: 4px
padding: 8px
background: radial-gradient(circle closest-side, white 45%, #ffffff00)
opacity: 0
transition: opacity .5s
// When loading, fade in the loading spinner after a brief delay. (We only
// apply the delay here, because fading *out* on load should be instant.)
&:has(outfit-layer:state(loading))
cursor: wait
.loading-indicator
opacity: 1
transition-delay: 2s
&:has(outfit-layer:state(error))
border-color: $error-border-color
// We also show the loading spinner when the item preview Turbo frame is
// loading in new data for us.
turbo-frame#item-preview[busy]
.outfit-viewer
cursor: wait
.loading-indicator
opacity: 1
transition-delay: 2s
.species-color-picker
.error-icon
cursor: help
margin-right: .25em
&[data-is-valid="false"]
select
border-color: $error-border-color
color: $error-color