forked from OpenNeo/impress
Emi Matchu
0011fdf76a
My intent is to next add behavior to save this state across pageloads, for power users to not have to always reopen it!
163 lines
No EOL
3.2 KiB
Sass
163 lines
No EOL
3.2 KiB
Sass
@import "../partials/clean/constants"
|
||
@import "../partials/clean/mixins"
|
||
|
||
=item-header
|
||
border-bottom: 1px solid $module-border-color
|
||
margin-top: 1em
|
||
margin-bottom: 1em
|
||
|
||
.item-header-main
|
||
display: grid
|
||
grid-template-areas: "img gap1" "img name" "img links" "img lists" "img gap2" "nav nav"
|
||
align-items: center
|
||
justify-content: center
|
||
column-gap: 1em
|
||
row-gap: .5em
|
||
|
||
.item-thumbnail
|
||
grid-area: img
|
||
|
||
border: 1px solid $module-border-color
|
||
height: 80px
|
||
width: 80px
|
||
|
||
.item-name
|
||
grid-area: name
|
||
|
||
text-align: left
|
||
line-height: 100%
|
||
margin-bottom: 0
|
||
|
||
.item-links
|
||
grid-area: links
|
||
|
||
font-size: 85%
|
||
text-align: left
|
||
display: flex
|
||
align-items: center
|
||
gap: 1em
|
||
|
||
.item-kind
|
||
padding: .25em .5em
|
||
border-radius: .25em
|
||
cursor: help
|
||
text-decoration: none
|
||
|
||
font-weight: bold
|
||
line-height: 1
|
||
|
||
// These colors are copied from DTI 2020, for initial consistency!
|
||
// They're based on the Chakra UI colors, which I think are in turn the
|
||
// Bootstrap colors? Or something?
|
||
&[data-type=nc]
|
||
background: #E9D8FD
|
||
color: #44337A
|
||
&[data-type=pb]
|
||
background: #FEEBC8
|
||
color: #7B341E
|
||
&[data-type=np]
|
||
background: #E2E8F0
|
||
color: #1A202C
|
||
|
||
.user-lists-info
|
||
grid-area: lists
|
||
font-size: 85%
|
||
text-align: left
|
||
|
||
.user-lists-form-opener
|
||
&::after
|
||
content: " ›"
|
||
|
||
.user-lists-form
|
||
background: $background-color
|
||
border: 1px solid $module-border-color
|
||
border-radius: .5em
|
||
padding: 1em
|
||
width: 30em
|
||
text-align: center
|
||
z-index: 2
|
||
margin-top: .5em
|
||
margin-inline: auto
|
||
margin-bottom: 1.5em
|
||
font-size: 85%
|
||
|
||
h3
|
||
font-size: 150%
|
||
font-weight: bold
|
||
margin-bottom: .75em
|
||
|
||
.closet-hangers-ownership-groups
|
||
+clearfix
|
||
margin-bottom: .5em
|
||
|
||
div
|
||
float: left
|
||
margin: 0 5%
|
||
text-align: left
|
||
width: 40%
|
||
|
||
li
|
||
list-style: none
|
||
word-wrap: break-word
|
||
|
||
label.unlisted
|
||
font-style: italic
|
||
|
||
form
|
||
padding: .5em 0
|
||
|
||
select
|
||
width: 9em
|
||
|
||
input[type=number]
|
||
margin-right: .5em
|
||
width: 3em
|
||
|
||
.item-description
|
||
margin-top: .5em
|
||
margin-bottom: 1em
|
||
|
||
.item-subpages-nav
|
||
display: flex
|
||
align-items: flex-end
|
||
|
||
.preview-link
|
||
margin-right: auto
|
||
|
||
.trades-section
|
||
display: flex
|
||
gap: .5em
|
||
|
||
header
|
||
align-self: center
|
||
font-weight: bold
|
||
|
||
&::after
|
||
content: ":"
|
||
|
||
ul
|
||
align-self: flex-end
|
||
list-style: none
|
||
display: flex
|
||
gap: .5em
|
||
|
||
li
|
||
display: block
|
||
|
||
a
|
||
display: block
|
||
background: $module-bg-color
|
||
border: 1px solid $module-border-color
|
||
border-bottom: 0
|
||
border-radius: .5em .5em 0 0
|
||
padding: .5em 1em
|
||
text-decoration: none
|
||
|
||
&:hover, &:focus
|
||
text-decoration: underline
|
||
|
||
&[data-is-current=true]
|
||
background: $background-color
|
||
padding-bottom: calc(.5em + 1px)
|
||
font-weight: bold
|
||
margin-bottom: -1px |