1
0
Fork 0
forked from OpenNeo/impress
impress/app/assets/stylesheets/items/_show.sass

103 lines
2.1 KiB
Sass
Raw Normal View History

@import "../partials/clean/constants"
@import "../partials/clean/mixins"
@import "../partials/item_header"
2010-11-05 13:43:26 -07:00
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: "."
2012-03-23 14:37:53 -07:00
2010-11-05 13:43:26 -07:00
.nc-icon
height: 16px
width: 16px
.outfit-viewer
display: block
position: relative
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
.error-indicator
font-size: 85%
color: $error-color
margin-top: .25em
margin-bottom: .5em
display: none
// 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.)
// We are loading when the <turbo-frame> is busy, or when at least one layer
// is loading.
#item-preview[busy] .outfit-viewer, .outfit-viewer:has(outfit-layer:state(loading))
cursor: wait
.loading-indicator
opacity: 1
transition-delay: 2s
#item-preview:has(outfit-layer:state(error))
.outfit-viewer
border: 2px solid red
.error-indicator
display: block
.species-color-picker
.error-icon
cursor: help
margin-right: .25em
&[data-is-valid="false"]
select
border-color: $error-border-color
color: $error-color