MediaWiki:Common.less/infobox.less
Jump to navigation
Jump to search
:root {
--infobox-text-color: var(--text-color);
--table-header: var(--body-darker);
--table-subheader: var(--body-dark);
--table-body: var(--body-light);
--table-border: var(--body-border);
}
/* Default card infobox */
@infobox-lighter: var(--body-dark);
@infobox-darker: var(--body-darker);
@infobox-link: #a5918a;
/* Yellow card infobox */
@infobox-lighter-hopeport: desaturate(@hopeport, 30%);
@infobox-darker-hopeport: @hopeport-dark;
/* Blue card infobox */
@infobox-lighter-mantuban: @mantuban;
@infobox-darker-mantuban: @mantuban-dark;
/* Green card infobox */
@infobox-lighter-hopeforest: desaturate(@hopeforest, 30%);
@infobox-darker-hopeforest: @hopeforest-dark;
/* Grey card infobox */
@infobox-lighter-crenopolis: @crenopolis;
@infobox-darker-crenopolis: @crenopolis-dark;
/* Infobox */
.infobox {
font-size: .85em;
width: 300px;
float: right;
table-layout: fixed;
margin: 0.5em 0 1em 1em;
background: @infobox-lighter;
padding: 2px;
color: var(--body-main);
border-radius: @infobox-outer-radius;
box-shadow: inset 0 0 2px rgba(255,255,255,0.5);
.infobox-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 3px;
margin-bottom: 3px;
.button {
background: var(--table-subheader);
padding: 0 5px;
font-weight: bold;
flex: 1 1 20%;
max-width: 20%;
color: @white;
}
.button.button-selected {
background: var(--table-header);
}
}
tr {
> * {
background: @infobox-darker;
box-shadow: @infobox-card-shadow;
}
td:not(.infobox-padding):not(.infobox-image) {
padding: 0.2em 0.5em;
}
&:nth-last-child(2) {
th {
border-radius: 0 0 0 @infobox-inner-radius;
}
td {
border-radius: 0 0 @infobox-inner-radius 0;
}
}
/* infobox padding temporary
&:last-child {
display: none;
}
*/
}
.infobox-header {
box-shadow: @infobox-card-shadow;
border-radius: @infobox-inner-radius;
padding: 0.5em 0;
text-align: center;
color: @white;
font-size: 1.15em;
font-weight: bold;
line-height: 1.4em;
}
.infobox-image {
text-align: center;
border-radius: @infobox-inner-radius @infobox-inner-radius 0 0;
background-image: url("/images/[email protected]");
background-position: center;
background-size: 300px;
padding: 0;
overflow: hidden;
span {
display: block;
border-radius: 0.9em 0.9em 0 0;
overflow: hidden;
margin: 0.5em;
img {
max-width: calc(292px - 1em);
height: auto;
}
}
}
.infobox-subheader {
background: var(--table-subheader);
font-weight: bold;
text-align: center;
color: @white;
}
.infobox-padding {
background: @infobox-lighter;
height: 20px;
border-radius: 16px;
}
th:not(.infobox-header):not(.infobox-subheader):not(.infobox-nested) {
text-align: right;
padding: 0.2em 0.5em;
}
select {
max-width: 300px;
}
a,
a:hover,
a:visited,
a:active {
color: @infobox-link;
}
/* INFOBOX CLASS/EPISODE VARIANTS */
.infobox-card(@lightColor, @darkColor, @imagePath, @linkColor) {
background-color: @lightColor;
tr > * {
background-color: @darkColor;
}
.infobox-image {
background-image: url("@{imagePath}");
}
.infobox-padding {
background-color: @lightColor;
}
a,
a:hover,
a:visited,
a:active {
color: lighten(@linkColor, 10%);
}
}
&.infobox-Hopeport {
.infobox-card(@infobox-lighter-hopeport, @infobox-darker-hopeport, '/images/[email protected]', @hopeport);
}
&.infobox-Mine_of_Mantuban {
.infobox-card(@infobox-lighter-mantuban, @infobox-darker-mantuban, '/images/[email protected]', @mantuban);
}
&.infobox-Hopeforest {
.infobox-card(@infobox-lighter-hopeforest, @infobox-darker-hopeforest, '/images/[email protected]', @hopeforest);
}
&.infobox-Crenopolis {
.infobox-card(@infobox-lighter-crenopolis, @infobox-darker-crenopolis, '/images/[email protected]', @crenopolis);
}
}
.hidden {
display: none;
}