MediaWiki:Common.less/infobox.less: Difference between revisions
(Fix class episode names to new class names) |
No edit summary |
||
(2 intermediate revisions by the same user not shown) | |||
Line 13: | Line 13: | ||
/* Yellow card infobox */ |
/* Yellow card infobox */ |
||
@infobox-lighter-hopeport: desaturate(@hopeport, |
@infobox-lighter-hopeport: darken(desaturate(spin(@hopeport, -5%), 55%), 10%); |
||
@infobox-darker-hopeport: @hopeport-dark; |
@infobox-darker-hopeport: @hopeport-dark; |
||
Line 154: | Line 154: | ||
/* INFOBOX CLASS/EPISODE VARIANTS */ |
/* INFOBOX CLASS/EPISODE VARIANTS */ |
||
.infobox-card(@lightColor, @darkColor, @imagePath |
.infobox-card(@lightColor, @darkColor, @imagePath) { |
||
background-color: @lightColor; |
background-color: @lightColor; |
||
tr > * { |
tr > * { |
||
Line 169: | Line 169: | ||
a:visited, |
a:visited, |
||
a:active { |
a:active { |
||
color: lighten(@ |
color: lighten(@lightColor, 10%); |
||
} |
} |
||
} |
} |
||
&.infobox-Hopeport { |
&.infobox-Hopeport { |
||
.infobox-card(@infobox-lighter-hopeport, @infobox-darker-hopeport, '/images/[email protected]' |
.infobox-card(@infobox-lighter-hopeport, @infobox-darker-hopeport, '/images/[email protected]'); |
||
} |
} |
||
&.infobox-Mine_of_Mantuban { |
&.infobox-Mine_of_Mantuban { |
||
.infobox-card(@infobox-lighter-mantuban, @infobox-darker-mantuban, '/images/[email protected]' |
.infobox-card(@infobox-lighter-mantuban, @infobox-darker-mantuban, '/images/[email protected]'); |
||
} |
} |
||
&.infobox-Hopeforest { |
&.infobox-Hopeforest { |
||
.infobox-card(@infobox-lighter-hopeforest, @infobox-darker-hopeforest, '/images/[email protected]' |
.infobox-card(@infobox-lighter-hopeforest, @infobox-darker-hopeforest, '/images/[email protected]'); |
||
} |
} |
||
&.infobox-Crenopolis { |
&.infobox-Crenopolis { |
||
.infobox-card(@infobox-lighter-crenopolis, @infobox-darker-crenopolis, '/images/[email protected]' |
.infobox-card(@infobox-lighter-crenopolis, @infobox-darker-crenopolis, '/images/[email protected]'); |
||
} |
} |
||
} |
} |
Latest revision as of 21:58, 24 April 2024
: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: darken(desaturate(spin(@hopeport, -5%), 55%), 10%);
@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) {
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(@lightColor, 10%);
}
}
&.infobox-Hopeport {
.infobox-card(@infobox-lighter-hopeport, @infobox-darker-hopeport, '/images/[email protected]');
}
&.infobox-Mine_of_Mantuban {
.infobox-card(@infobox-lighter-mantuban, @infobox-darker-mantuban, '/images/[email protected]');
}
&.infobox-Hopeforest {
.infobox-card(@infobox-lighter-hopeforest, @infobox-darker-hopeforest, '/images/[email protected]');
}
&.infobox-Crenopolis {
.infobox-card(@infobox-lighter-crenopolis, @infobox-darker-crenopolis, '/images/[email protected]');
}
}
.hidden {
display: none;
}