Emi Matchu
347419aee8
I've known there are bugs in the SVGs pretty often, because they're not very well attended-to—I noticed pretty quick that the Marble Eyrie, for example, has its Body asset saved correctly in PNG, but its SVG is just another copy of the head, oops! I think SVG is still a nice default for this UI, but I added a little form to switch to PNG, to give us a debugging method and escape hatch if it starts to get weird.
78 lines
1.4 KiB
Sass
78 lines
1.4 KiB
Sass
@import "../partials/clean/constants"
|
|
@import "../partials/context_button"
|
|
|
|
support-outfit-viewer
|
|
display: flex
|
|
gap: 2em
|
|
flex-wrap: wrap
|
|
justify-content: center
|
|
|
|
outfit-viewer
|
|
flex: 0 0 auto
|
|
border: 1px solid $module-border-color
|
|
border-radius: 1em
|
|
|
|
.outfit-viewer-controls
|
|
margin-block: .5em
|
|
isolation: isolate // Avoid z-index weirdness with our buttons vs the lens
|
|
|
|
display: flex
|
|
align-items: center
|
|
justify-content: center
|
|
gap: .5em
|
|
|
|
font-size: .85em
|
|
|
|
fieldset
|
|
display: contents
|
|
|
|
legend
|
|
font-weight: bold
|
|
&::after
|
|
content: ":"
|
|
|
|
label
|
|
display: flex
|
|
align-items: center
|
|
gap: .25em
|
|
|
|
input[type=radio]
|
|
margin: 0
|
|
|
|
[type=submit]
|
|
+context-button
|
|
|
|
> table
|
|
flex: 0 0 auto
|
|
border-collapse: collapse
|
|
table-layout: fixed
|
|
border-radius: .5em
|
|
|
|
th, td
|
|
border: 1px solid $module-border-color
|
|
font-size: .85em
|
|
padding: .25em .5em
|
|
text-align: left
|
|
|
|
> tbody
|
|
[data-field=links]
|
|
ul
|
|
list-style-type: none
|
|
display: flex
|
|
gap: .5em
|
|
|
|
// Once the component is ready, add some hints about potential interactions.
|
|
&:state(ready)
|
|
> table
|
|
> tbody > tr
|
|
cursor: zoom-in
|
|
&:hover
|
|
background: $module-bg-color
|
|
|
|
magic-magnifier
|
|
--magic-magnifier-lens-width: 100px
|
|
--magic-magnifier-lens-height: 100px
|
|
--magic-magnifier-scale: 2.5
|
|
|
|
magic-magnifier-lens
|
|
z-index: 2 // Be above things by default, but not by much!
|