Template:Infobox/styles.css: Difference between revisions
From Love and Deepspace Wiki
Content added Content deleted
(Created page with "→Infobox template style: .infobox { border: 1px solid #a2a9b1; border-spacing: 3px; background-color: #f8f9fa; color: black; →@noflip: margin: 0.5em 0 0.5em 1em; padding: 0.2em; →@noflip: float: right; →@noflip: clear: right; font-size: 88%; line-height: 1.5em; width: 22em; } .infobox-header, .infobox-label, .infobox-above, .infobox-full-data, .infobox-data, .infobox-below, .infobox-subheader, .infobox-image, .infobox-navbar, /* Remove elem...") |
mNo edit summary |
||
(11 intermediate revisions by the same user not shown) | |||
Line 1: | Line 1: | ||
/* Infobox template style */ |
/* Infobox template style */ |
||
.infobox { |
.infobox { |
||
display: grid; |
|||
grid-gap: 0.2em; |
|||
border: 1px solid #a2a9b1; |
border: 1px solid #a2a9b1; |
||
border-spacing: 3px; |
border-spacing: 3px; |
||
Line 15: | Line 17: | ||
line-height: 1.5em; |
line-height: 1.5em; |
||
width: 22em; |
width: 22em; |
||
} |
|||
.infobox-title { |
|||
background-color: #c9c9f1; |
|||
} |
|||
.infobox-image img { |
|||
width: 100%; |
|||
height: auto; |
|||
} |
} |
||
Line 62: | Line 73: | ||
.infobox .infobox-image, |
.infobox .infobox-image, |
||
.infobox .infobox-full-data, |
.infobox .infobox-full-data, |
||
.infobox .infobox-below |
.infobox .infobox-below, |
||
.infobox .infobox-caption { |
|||
text-align: center; |
text-align: center; |
||
} |
} |
||
Line 70: | Line 82: | ||
/* @noflip */ |
/* @noflip */ |
||
text-align: right; |
text-align: right; |
||
} |
|||
.infobox-above { |
|||
font-size: 125%; |
|||
} |
|||
.infobox-header { |
|||
background: lavender; |
|||
} |
|||
.infobox-row-2-grid { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr; |
|||
} |
|||
.infobox-row-3-grid { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr 1fr; |
|||
} |
|||
.infobox-row-4-grid { |
|||
display: grid; |
|||
grid-template-columns: 1fr 1fr 1fr 1fr; |
|||
} |
|||
@media screen and (max-width: 768px) { |
|||
.infobox { |
|||
display: grid; |
|||
grid-gap: 0.2em; |
|||
border: 1px solid #a2a9b1; |
|||
border-spacing: 3px; |
|||
background-color: #f8f9fa; |
|||
color: black; |
|||
/* @noflip */ |
|||
margin: 0.5em; |
|||
padding: 0.2em; |
|||
/* @noflip */ |
|||
float: unset; |
|||
/* @noflip */ |
|||
clear: right; |
|||
font-size: 88%; |
|||
line-height: 1.5em; |
|||
width: auto; |
|||
} |
|||
} |
} |
Latest revision as of 18:20, 3 March 2024
/* Infobox template style */
.infobox {
display: grid;
grid-gap: 0.2em;
border: 1px solid #a2a9b1;
border-spacing: 3px;
background-color: #f8f9fa;
color: black;
/* @noflip */
margin: 0.5em 0 0.5em 1em;
padding: 0.2em;
/* @noflip */
float: right;
/* @noflip */
clear: right;
font-size: 88%;
line-height: 1.5em;
width: 22em;
}
.infobox-title {
background-color: #c9c9f1;
}
.infobox-image img {
width: 100%;
height: auto;
}
.infobox-header,
.infobox-label,
.infobox-above,
.infobox-full-data,
.infobox-data,
.infobox-below,
.infobox-subheader,
.infobox-image,
.infobox-navbar,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox th,
.infobox td {
vertical-align: top;
}
.infobox-label,
.infobox-data,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox th,
.infobox td {
/* @noflip */
text-align: left;
}
/* Remove .infobox when element selectors above are removed */
.infobox .infobox-above,
.infobox .infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox caption {
font-size: 125%;
font-weight: bold;
text-align: center;
}
.infobox-title,
/* Remove element selector when every .infobox thing is using the standard module/templates */
.infobox caption {
padding: 0.2em;
}
/* Remove .infobox when element selectors above are removed */
.infobox .infobox-header,
.infobox .infobox-subheader,
.infobox .infobox-image,
.infobox .infobox-full-data,
.infobox .infobox-below,
.infobox .infobox-caption {
text-align: center;
}
/* Remove .infobox when element selectors above are removed */
.infobox .infobox-navbar {
/* @noflip */
text-align: right;
}
.infobox-above {
font-size: 125%;
}
.infobox-header {
background: lavender;
}
.infobox-row-2-grid {
display: grid;
grid-template-columns: 1fr 1fr;
}
.infobox-row-3-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
.infobox-row-4-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
@media screen and (max-width: 768px) {
.infobox {
display: grid;
grid-gap: 0.2em;
border: 1px solid #a2a9b1;
border-spacing: 3px;
background-color: #f8f9fa;
color: black;
/* @noflip */
margin: 0.5em;
padding: 0.2em;
/* @noflip */
float: unset;
/* @noflip */
clear: right;
font-size: 88%;
line-height: 1.5em;
width: auto;
}
}