622
edits
MediaWiki:Common.css: Difference between revisions
Pokémon infobox fixes
mNo edit summary Tag: Undo |
(Pokémon infobox fixes) |
||
| Line 671: | Line 671: | ||
{ | { | ||
display: none !important; | display: none !important; | ||
} | |||
/* Main table */ | |||
.pokemon-infobox { | |||
/* Radii for different levels nested containers */ | |||
--radius-1: 10px; | |||
--radius-2: 7px; | |||
--radius-3: 5px; | |||
--radius-4: 3px; | |||
/* Shared spacing, like padding */ | |||
--space-1: 4px; | |||
float: right; | |||
text-align: center; | |||
width: 33%; | |||
max-width: 420px; | |||
padding: 0; | |||
border-spacing: var(--space-1); | |||
border-collapse: unset; | |||
line-height: 1.3em; | |||
border-radius: var(--radius-1); | |||
/* Background will be applied in the template */ | |||
} | |||
/* Remove margins from all nested tables */ | |||
.pokemon-infobox table, | |||
.pokemon-infobox tr, | |||
.pokemon-infobox td, | |||
.pokemon-infobox th { | |||
margin: 0px; | |||
padding: 0px; | |||
} | |||
/* Set all table links to be black */ | |||
.pokemon-infobox a { | |||
color: black; | |||
} | |||
/* Utility class to add padding to certain tables or content */ | |||
.pokemon-infobox .padded { | |||
padding: var(--space-1); | |||
} | |||
/* Utility class for table spacing */ | |||
.pokemon-infobox .border-spaced { | |||
border-spacing: var(--space-1); | |||
border-collapse: unset; | |||
margin: 0; | |||
} | |||
/* Utility class for hidden elements */ | |||
.pokemon-infobox .hidden { | |||
display: none; | |||
} | |||
/* Utitility class for margin-bottom */ | |||
.pokemon-infobox .margin-bottom { | |||
margin-bottom: var(--space-1); | |||
} | |||
/* Utility classes for radii */ | |||
.pokemon-infobox .radius-4 { | |||
border-radius: var(--radius-4); | |||
} | |||
/* Image area in top of infobox */ | |||
.pokemon-infobox-images { | |||
border-spacing: 10px !important; | |||
} | |||
/* Nested tables, with a lighter background */ | |||
.pokemon-infobox .table-group { | |||
border-radius: var(--radius-2); | |||
vertical-align: initial; | |||
} | |||
/* Add margin bottom to "headers" in table groups */ | |||
.pokemon-infobox b { | |||
display: inline-block; | |||
margin-bottom: var(--space-1); | |||
} | |||
/* Add top margin to table group "headers" if the group NOT padded */ | |||
.pokemon-infobox .table-group > b { | |||
margin-top: var(--space-1); | |||
margin-bottom: 0px; | |||
} | |||
/* Add bottom margin to table group "headers" if the group IS padded */ | |||
.pokemon-infobox .table-group.padded > b { | |||
margin-top: 0; | |||
margin-bottom: var(--space-1); | |||
} | |||
/* Nested tables or cells with a white background */ | |||
.pokemon-infobox .table-content { | |||
border-spacing: var(--space-1); | |||
background-color: white; | |||
border-radius: var(--radius-3); | |||
border-collapse: unset; | |||
margin-top: var(--space-1); | |||
} | |||
/* Remove margin top on the first of several nested tables */ | |||
/* The margin is there to separate multiple tables inside a table group */ | |||
.pokemon-infobox .table-content:first-of-type { | |||
margin-top: 0; | |||
} | |||
/* Boxes that show the type */ | |||
.pokemon-infobox .table-type { | |||
border-radius: 3px; | |||
min-width: 45px; | |||
padding: 4px 6px 0px; | |||
font-size: 85%; | |||
} | |||
/* Styles for text in type boxes */ | |||
.pokemon-infobox .table-type a { | |||
color: white; | |||
text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4); | |||
} | |||
/* Styles for the gender split bars */ | |||
.pokemon-infobox .gender-bar { | |||
width: 100%; | |||
border-radius: 20px; | |||
display: flex; | |||
gap: 2px; | |||
align-items: stretch; | |||
height: 12px; | |||
overflow: hidden; | |||
padding: 0; | |||
} | |||
/* Styles for lists */ | |||
.pokemon-infobox .external-links ul { | |||
list-style: initial; | |||
list-style-image: initial; | |||
text-align: left; | |||
/* padding-left: 1.5em; */ | |||
} | |||
.pokemon-infobox .external-links ul li ul { | |||
text-align: left; | |||
padding-left: 0.5em; | |||
margin-top: 0.4em; | |||
} | |||
.pokemon-infobox .external-links ul li { | |||
margin-bottom: 0.5em; | |||
} | |||
/* Colour square in the colour cell */ | |||
.pokemon-infobox .color-swatch { | |||
display: inline-block; min-width: 16px; | |||
} | |||
/* Media queries */ | |||
@media screen and (min-width: 720px) { | |||
table.pokemon-infobox { | |||
margin-left: 20px; | |||
} | |||
} | } | ||