8,290
edits
(fix ambox / infobox interaction issues) |
(add subtype infocard supplemental styles) |
||
Line 2,069: | Line 2,069: | ||
font-size: 80%; | font-size: 80%; | ||
opacity: 0.5; | opacity: 0.5; | ||
} | |||
/* | |||
* QUD SUBTYPE INFOCARD | |||
* ==================== | |||
* Styles to supplement [[Template:Subtype infocard]] for smaller screens. | |||
* Note that these use !important more than I'd usually like, because they | |||
* need to override inline styles applied by the template. | |||
*/ | |||
@media screen and (max-width: 1599px) { | |||
.subtype-infobox { | |||
max-width: 780px !important; | |||
} | |||
.subtype-items { | |||
flex: 0 0 100% !important; | |||
flex-wrap: wrap !important; | |||
} | |||
} | |||
@media screen and (max-width: 900px) { | |||
.subtype-title { | |||
justify-content: center; | |||
padding: 0.2em 0 !important; | |||
} | |||
.subtype-image, .subtype-bonus-box { | |||
flex: 0 0 50%; | |||
justify-content: center; | |||
} | |||
.subtype-skill-box { | |||
margin: auto; | |||
flex: 0 0 90%; | |||
} | |||
.subtype-items-list ul { | |||
display: flex !important; | |||
flex-wrap: wrap; | |||
} | |||
.subtype-items-list ul li { | |||
flex: 0 0 100% !important; | |||
} | |||
.subtype-equip-list, .subtype-items-list { | |||
width: 100%; | |||
padding: 1em !important; | |||
text-align: center; | |||
} | |||
.subtype-equip-list ul, .subtype-items-list ul { | |||
list-style-type: none; | |||
margin: 0 !important; | |||
} | |||
.subtype-equip-list div, .subtype-items-list div { | |||
padding: 0 !important; | |||
} | |||
.subtype-footnote { | |||
justify-content: center !important; | |||
} | |||
} | |||
@media screen and (max-width: 550px) { | |||
.subtype-image, .subtype-bonus-box { | |||
flex: 0 0 90%; | |||
max-width: unset !important; | |||
margin: auto; | |||
} | |||
.subtype-bonus-box { | |||
text-align: center; | |||
} | |||
.subtype-bonus-box div { | |||
position: static !important; | |||
} | |||
} | } | ||
/* | /* |