MediaWiki:Common.less/infobox.less: Difference between revisions
Jump to navigation
Jump to search
Content added Content deleted
No edit summary |
No edit summary |
||
(53 intermediate revisions by 2 users not shown) | |||
Line 1: | Line 1: | ||
:root { |
:root { |
||
--infobox-text-color: var(--text-color); |
--infobox-text-color: var(--text-color); |
||
--table-header: |
--table-header: var(--body-darker); |
||
--table-subheader: |
--table-subheader: var(--body-dark); |
||
--table-body: |
--table-body: var(--body-light); |
||
--table-border: |
--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%); |
|||
font-size: .85em; |
|||
@infobox-darker-hopeport: @hopeport-dark; |
|||
width: 300px; |
|||
border-collapse: collapse; |
|||
float: right; |
|||
table-layout: fixed; |
|||
margin: 0.5em 0 1em 1em; |
|||
} |
|||
/* Blue card infobox */ |
|||
@infobox-lighter-mantuban: @mantuban; |
|||
display: flex; |
|||
@infobox-darker-mantuban: @mantuban-dark; |
|||
flex-wrap: wrap; |
|||
justify-content: center; |
|||
grid-gap: 3px; |
|||
margin-bottom: 3px; |
|||
} |
|||
/* Green card infobox */ |
|||
.infobox .infobox-buttons .button { |
|||
@infobox-lighter-hopeforest: desaturate(@hopeforest, 30%); |
|||
background: var(--table-header); |
|||
@infobox-darker-hopeforest: @hopeforest-dark; |
|||
padding: 0 5px; |
|||
font-weight: bold; |
|||
flex: 1 1 20%; |
|||
max-width: 20%; |
|||
color: white; |
|||
} |
|||
/* Grey card infobox */ |
|||
.infobox tbody { |
|||
@infobox-lighter-crenopolis: @crenopolis; |
|||
border: 1px solid var(--table-border); |
|||
@infobox-darker-crenopolis: @crenopolis-dark; |
|||
background: var(--table-body); |
|||
box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(231, 215, 199, 0.5); |
|||
} |
|||
/* Infobox */ |
|||
.infobox .infobox-header { |
|||
background: var(--table-header); |
|||
padding: 0.5em 0; |
|||
text-align: center; |
|||
color: white; |
|||
font-size: 1.15em; |
|||
font-weight: bold; |
|||
line-height: 1.4em; |
|||
} |
|||
.infobox |
.infobox { |
||
font-size: .85em; |
|||
text-align: center; |
|||
width: 300px; |
|||
background: var(--body-main); |
|||
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 { |
|||
.infobox .infobox-subheader { |
|||
background: var(--table-header); |
|||
} |
|||
font-weight: bold; |
|||
} |
|||
text-align: center; |
|||
color: white; |
|||
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]'); |
|||
backgound: var(--table-body); |
|||
} |
|||
} |
|||
&.infobox-Mine_of_Mantuban { |
|||
.infobox-card(@infobox-lighter-mantuban, @infobox-darker-mantuban, '/images/[email protected]'); |
|||
padding: 0.2em 0.5em; |
|||
} |
|||
} |
|||
&.infobox-Hopeforest { |
|||
.infobox th:not(.infobox-header):not(.infobox-subheader):not(.infobox-nested) { |
|||
.infobox-card(@infobox-lighter-hopeforest, @infobox-darker-hopeforest, '/images/[email protected]'); |
|||
border-right: 2px solid var(--table-subheader); |
|||
} |
|||
text-align: right; |
|||
padding: 0.2em 0.5em; |
|||
&.infobox-Crenopolis { |
|||
.infobox-card(@infobox-lighter-crenopolis, @infobox-darker-crenopolis, '/images/[email protected]'); |
|||
} |
|||
} |
} |
||
/*Hide*/ |
|||
.hidden { |
.hidden { |
||
display: none; |
display: none; |
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;
}