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!
309 lines
6.4 KiB
Sass
309 lines
6.4 KiB
Sass
@import "../partials/clean/constants"
|
|
@import "../partials/clean/mixins"
|
|
@import "../partials/item_header"
|
|
|
|
@import "../application/outfit-viewer"
|
|
|
|
#container
|
|
width: 900px // A bit more generous to the preview area!
|
|
|
|
.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
|
|
|
|
.preview-area
|
|
margin: 0 auto
|
|
position: relative
|
|
|
|
.customize-more
|
|
position: absolute
|
|
top: 1em
|
|
right: 1em
|
|
|
|
display: flex
|
|
align-items: center
|
|
text-decoration: none
|
|
|
|
background: #EDF2F7
|
|
padding-inline: .75em
|
|
border-radius: .375em
|
|
min-height: 2rem
|
|
min-width: 2rem
|
|
box-sizing: border-box
|
|
|
|
.customize-more-label
|
|
width: 0
|
|
overflow: hidden
|
|
transition: width .25s
|
|
white-space: nowrap
|
|
--natural-width: auto
|
|
|
|
measured-content
|
|
padding-right: .5em
|
|
|
|
&:hover, &:focus
|
|
// Expand the label to its natural width. If the JS ran to tell us
|
|
// what it is in px, we can use that for a smooth transition. If not,
|
|
// okay, we just pop out to `auto`, which CSS can't make smooth.
|
|
.customize-more-label
|
|
width: var(--natural-width)
|
|
|
|
outfit-viewer
|
|
width: 300px
|
|
height: 300px
|
|
border: 1px solid $module-border-color
|
|
border-radius: 1em
|
|
|
|
.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 are
|
|
// loading when the <turbo-frame> is busy, or when at least one layer
|
|
// is loading.
|
|
//
|
|
// We only apply the delay here, not on the base styles, because fading
|
|
// *out* on load should be instant.
|
|
#item-preview[busy] outfit-viewer
|
|
+outfit-viewer-loading
|
|
|
|
#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
|
|
|
|
form[data-is-valid="false"]
|
|
select
|
|
border-color: $error-border-color
|
|
color: $error-color
|
|
|
|
// If JS is enabled, but auto-loading isn't ready yet (script loading or
|
|
// failed?), hide the submit button for .75sec, to give it time to load.
|
|
@media (scripting: enabled)
|
|
input[type=submit]
|
|
position: absolute
|
|
margin-left: .5em
|
|
opacity: 0
|
|
animation: fade-in .25s forwards
|
|
animation-delay: .75s
|
|
|
|
// Once the auto-loading behavior is ready, remove the submit button.
|
|
&:state(auto-loading)
|
|
input[type=submit]
|
|
display: none
|
|
|
|
species-face-picker
|
|
display: block
|
|
position: relative
|
|
margin-top: -10px
|
|
|
|
species-face-picker-options
|
|
display: flex
|
|
justify-content: center
|
|
flex-wrap: wrap
|
|
isolation: isolate // avoid z-index conflicts between pets and noscript
|
|
overflow: auto
|
|
max-height: 200px // 4 rows of 50px images, and padding will offer a hint of below
|
|
padding: 10px // leave enough room for the zoomed-in selected face
|
|
|
|
img
|
|
width: 54px
|
|
height: 54px
|
|
transition: all 0.2s
|
|
|
|
// Calm down the default color, just a smidge! There's a lot of color
|
|
// on this page already, y'know?
|
|
opacity: .9
|
|
filter: saturate(90%)
|
|
|
|
label
|
|
display: flex
|
|
overflow: hidden
|
|
transition: all 0.2s
|
|
position: relative
|
|
line-height: 1
|
|
|
|
// NOTE: The box-shadows here were copy-pasted from Impress 2020, which uses
|
|
// Chakra UI's styling system to generate them! (The colors are from their
|
|
// color palette, too.)
|
|
&:has(input:checked)
|
|
border-radius: 6px
|
|
z-index: 1
|
|
background: #9AE6B4
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04), #2F855A 0 0 2px 2px
|
|
transform: scale(1.1)
|
|
|
|
&:has(input:focus)
|
|
background: #BEE3F8
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),0 10px 10px -5px rgba(0, 0, 0, 0.04), #4299e1 0 0 0 3px
|
|
transform: scale(1.2)
|
|
|
|
input[type=radio]
|
|
position: absolute
|
|
left: -10000px
|
|
top: auto
|
|
width: 1px
|
|
height: 1px
|
|
overflow: hidden
|
|
|
|
&:checked + img
|
|
opacity: 1
|
|
filter: saturate(110%)
|
|
|
|
&:disabled + img
|
|
opacity: .6
|
|
filter: saturate(0%)
|
|
|
|
label:has(input[type=radio]:disabled)
|
|
cursor: not-allowed
|
|
|
|
noscript
|
|
position: absolute
|
|
inset: 0
|
|
padding: 1em
|
|
background: rgba(white, .8)
|
|
z-index: 1
|
|
cursor: auto
|
|
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
text-align: center
|
|
|
|
&:has(species-face-picker-options[inert])
|
|
cursor: wait
|
|
|
|
.item-preview-meta-info
|
|
display: grid
|
|
grid-template-columns: 1fr auto
|
|
gap: .5em
|
|
align-items: center
|
|
|
|
.item-zones-info
|
|
h3
|
|
display: inline
|
|
font: inherit
|
|
font-weight: bold
|
|
&:after
|
|
content: ": "
|
|
|
|
ul
|
|
list-style-type: none
|
|
display: inline
|
|
|
|
li
|
|
display: inline
|
|
&:not(:last-of-type):after
|
|
content: ", "
|
|
|
|
.no-zones
|
|
font-style: italic
|
|
opacity: .85
|
|
|
|
.zone-species-info
|
|
font-style: italic
|
|
text-decoration: underline dotted
|
|
|
|
// Many of these styles copied from Impress 2020 and its Chakra UI styles!
|
|
.item-html5-info
|
|
display: flex
|
|
align-items: center
|
|
border: 1px solid
|
|
border-radius: .375em
|
|
padding: 4px 8px
|
|
min-height: 30px
|
|
box-sizing: border-box
|
|
box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px
|
|
|
|
&[data-status=converted]
|
|
background: $module-bg-color
|
|
color: $text-color
|
|
|
|
svg:nth-of-type(2)
|
|
margin-right: -4px // spacing hacks!
|
|
|
|
&[data-status=unconverted]
|
|
background: $warning-bg-color
|
|
color: #975A16
|
|
gap: .25em // spacing hacks!
|
|
|
|
svg:first-of-type
|
|
width: 12px
|
|
height: 12px
|
|
|
|
svg:nth-of-type(2)
|
|
width: 20px
|
|
height: 20px
|
|
|
|
#item-preview
|
|
display: flex
|
|
flex-direction: column
|
|
gap: .75em
|
|
|
|
@media (min-width: 700px)
|
|
display: grid
|
|
grid-template-areas: "viewer faces" "picker meta"
|
|
gap: .5em
|
|
|
|
.preview-area
|
|
grid-area: viewer
|
|
outfit-viewer
|
|
width: 380px
|
|
height: 380px
|
|
|
|
species-color-picker
|
|
grid-area: picker
|
|
|
|
species-face-picker
|
|
grid-area: faces
|
|
species-face-picker-options
|
|
max-height: 380px
|
|
|
|
.item-preview-meta-info
|
|
grid-area: meta
|
|
|
|
@keyframes fade-in
|
|
from
|
|
opacity: 0
|
|
to
|
|
opacity: 1
|