Emi Matchu
6dd8e585a3
We add a new `use_responsive_design` helper, for pages to opt into this
new CSS—mostly just because like… it's *worse* to apply these styles
for pages that don't expect it 😅
And then, I fix up a couple things on the item page (including in the
general items layout) to match!
I'm doing this because the species face picker layout is going to want
some responsive awareness, and I want to be doing that from the start!
172 lines
3.4 KiB
Sass
172 lines
3.4 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
|
||
flex-wrap: wrap
|
||
gap: 1em
|
||
|
||
abbr
|
||
cursor: help
|
||
|
||
.item-kind, .first-seen-at
|
||
padding: .25em .5em
|
||
border-radius: .25em
|
||
|
||
text-decoration: none
|
||
font-weight: bold
|
||
line-height: 1
|
||
|
||
background: #E2E8F0
|
||
color: #1A202C
|
||
|
||
.icon
|
||
vertical-align: middle
|
||
|
||
.item-kind
|
||
// 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?
|
||
// NOTE: For the data-type=np case, we use the default gray colors.
|
||
&[data-type=nc]
|
||
background: #E9D8FD
|
||
color: #44337A
|
||
&[data-type=pb]
|
||
background: #FEEBC8
|
||
color: #7B341E
|
||
|
||
.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
|
||
gap: 1em
|
||
|
||
.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
|