Emi Matchu
5be35591c2
Instead of offering a form to request a different format, we just render both in the HTML, and use CSS to swap between the two. Love to see the `:has` filter come through for us!
85 lines
1.5 KiB
Sass
85 lines
1.5 KiB
Sass
@import "../partials/clean/constants"
|
|
|
|
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
|
|
|
|
.outfit-viewer-area
|
|
> [data-format=png]
|
|
display: none
|
|
|
|
&:has(input[value=png]:checked)
|
|
.outfit-viewer-area
|
|
> [data-format=svg]
|
|
display: none
|
|
> [data-format=png]
|
|
display: block
|
|
|
|
> 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!
|