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-link: #d5ab9c;
/* Hopeport card infobox */
@infobox-lighter-hopeport: darken(desaturate(spin(@hopeport, -5%), 55%), 10%);
@infobox-darker-hopeport: @hopeport-dark;
/* Hopeforest card infobox */
@infobox-lighter-hopeforest: desaturate(@hopeforest, 30%);
@infobox-darker-hopeforest: @hopeforest-dark;
/* Mine_of_Mantuban card infobox */
@infobox-lighter-mantuban: @mantuban;
@infobox-darker-mantuban: @mantuban-dark;
/* Crenopolis card infobox */
@infobox-lighter-crenopolis: @crenopolis;
@infobox-darker-crenopolis: @crenopolis-dark;
/* Stonemaw card infobox */
@infobox-lighter-stonemaw: @stonemaw;
@infobox-darker-stonemaw: @stonemaw-dark;
/* Bleakholm card infobox */
@infobox-lighter-bleakholm: @mantuban; /* temporary until we know what color the card is, should be blue */
@infobox-darker-bleakholm: @mantuban-dark; /* temporary until we know what color the card is, should be blue */
/* Infobox */
.infobox {
font-size: .85em;
width: 300px;
float: right;
table-layout: fixed;
margin: 0.5em 0 1em 1em;
background: var(--body-dark);
padding: 2px;
color: #fdfcfc;
border-radius: @infobox-outer-radius;
box-shadow: inset 0 2px 2px rgba(255, 255, 255, 0.4), inset 0 -2px 2px rgba(0, 0, 0 ,0.1);
.infobox-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
grid-gap: 3px;
margin-bottom: 3px;
.button {
background: var(--table-subheader);
border-color: var(--table-header);
padding: 0 5px;
font-weight: bold;
/*flex: 1 1 40%;*/
color: @white;
}
.button.button-selected {
background: var(--table-header);
}
}
tr {
> * {
background: var(--body-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,
&.infobox-bubble-row {
display: flex;
width: 292px; /*300 - padding - whatever is there from not collapsing*/
box-shadow: @infobox-card-shadow;
justify-content: center;
border-radius: @infobox-inner-radius;
grid-gap: 5px;
overflow: hidden;
padding: 0;
height: 30px;
position: relative;
&::before {
position: absolute;
content: "";
height: 100%;
width: 37px;
left: -7px;
background-image: url("/images/Unknown_episode_infobox_icon.png");
background-size: 65%;
background-position: 10px;
background-repeat: no-repeat;
background-color: var(--body-darker);
border-radius: @infobox-inner-radius;
box-shadow: @infobox-card-shadow;
top: 50%;
transform: translateY(-50%);
}
&::after {
position: absolute;
content: "";
height: 100%;
width: 37px;
right: -7px;
background-image: url("/images/Unknown_episode_infobox_icon.png");
background-size: 65%;
background-position: 3px;
background-repeat: no-repeat;
background-color: var(--body-darker);
border-radius: @infobox-inner-radius;
box-shadow: @infobox-card-shadow;
top: 50%;
transform: translateY(-50%);
}
td.infobox-bubble-item {
padding-right: 15px;
padding-left: 15px;
border-radius: @infobox-inner-radius;
font-size: 1.2em;
font-weight: bold;
/*text-align: center;*/
display: flex;
justify-content: center;
align-items: center;
flex-basis: 47px; /* have the bubbles be the same width */
line-height: 0.9;
span {
padding-right: 5px;
}
img {
max-height: 23px;
width: auto;
}
}
}
.infobox-padding {
display: table-cell;
}
}
.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/Default_infobox_transparent_background.png");
background-position: center;
background-size: 300px;
background-repeat: repeat;
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;
}
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 ITEM */
&.infobox-Item:not(.infobox-questitem) {
.infobox-image {
a {
display: inline-block;
position: relative;
img {
max-height: 150px;
width: auto;
border-radius: @infobox-inner-radius;
background: radial-gradient(#707070, #2c2b29 80%); /* same as the in-game so pictures that have already been made transparent don't look super weird. */
padding: 9px; /* account for the border so transparent images don't get cut off */
}
&::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background: url('/images/Default_Infobox_Item_border_top_left.png') top left no-repeat,
url('/images/Default_Infobox_Item_border_top_right.png') top right no-repeat,
url('/images/Default_Infobox_Item_border_bottom_right.png') bottom right no-repeat,
url('/images/Default_Infobox_Item_border_bottom_left.png') bottom left no-repeat,
url('/images/Default_Infobox_Item_border_top.png') top center repeat-x,
url('/images/Default_Infobox_Item_border_right.png') center right repeat-y,
url('/images/Default_Infobox_Item_border_bottom.png') bottom center repeat-x,
url('/images/Default_Infobox_Item_border_left.png') center left repeat-y;
background-size: 15px 15px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 15px;
}
}
}
}
/* INFOBOX QUESTITEM */
&.infobox-questitem {
.infobox-image {
background: url(/images/Default_transparent_background.png), url(/images/Quest_Item_Background.png);
background-size: 300px, auto 150px;
background-position: center;
background-repeat: repeat, no-repeat;
background-color: var(--body-darker);
height: calc(150px + 1em);
img {
max-width: 100px;
max-height: 90px;
width: auto;
height: auto;
}
}
}
/* ---------------------------------------------------------------------------------
M I X I N S
--------------------------------------------------------------------------------- */
/* MIXIN - INFOBOX CLASS/EPISODE VARIANTS */
.infobox-card(@lightColor, @darkColor, @imagePath, @episodeImagePath) {
background-color: @lightColor;
tr {
> * {
background-color: @darkColor;
}
.infobox-padding,
&.infobox-bubble-row {
background-color: @lightColor;
&::before {
background-image: url(@episodeImagePath);
background-color: @darkColor;
}
&::after {
background-image: url(@episodeImagePath);
background-color: @darkColor;
}
}
}
.infobox-image {
background-image: url(@imagePath);
}
a,
a:hover,
a:visited,
a:active {
color: lighten(@lightColor, 10%);
}
}
/* MIXIN - MULTI EPISODE */
.infobox-multi-episode(@lightColor1, @darkColor1, @lightColor2, @darkColor2, @episodeBackgroundPath, @episodeIconPath) {
background: linear-gradient(to right, @lightColor1 0%, @lightColor1 50%, @lightColor2 50%, @lightColor2 100%);
tr > * {
background-image: linear-gradient(to right, @darkColor1 0%, @darkColor1 50%, @darkColor2 50%, @darkColor2 100%);
}
tr {
th[colspan="6"] {
background: @darkColor1;
}
td[colspan="14"] {
background: linear-gradient(to right, @darkColor1 0%, @darkColor1 28%, @darkColor2 29%, @darkColor2 100%);
}
&.infobox-bubble-row,
.infobox-padding {
background: linear-gradient(to right, @lightColor1 0%, @lightColor1 50%, @lightColor2 50%, @lightColor2 100%);
td:first-child {
background: @darkColor1;
}
td {
background: @darkColor2;
}
&::after {
background-image: url(@episodeIconPath);
background-color: @darkColor2;
}
}
}
.infobox-image {
background-image: url(@episodeBackgroundPath), linear-gradient(to right, @darkColor1 0%, @darkColor1 50%, @darkColor2 50%, @darkColor2 100%);;
background-position: center;
background-size: 300px;
background-repeat: repeat-y;
}
}
/* MIXIN - INFOBOX ITEM */
.infobox-item-recolor(@episodeprefix) {
background: url('images/@{episodeprefix}_Infobox_Item_border_top_left.png') top left no-repeat,
url('images/@{episodeprefix}_Infobox_Item_border_top_right.png') top right no-repeat,
url('images/@{episodeprefix}_Infobox_Item_border_bottom_right.png') bottom right no-repeat,
url('images/@{episodeprefix}_Infobox_Item_border_bottom_left.png') bottom left no-repeat,
url('images/@{episodeprefix}_Infobox_Item_border_top.png') top center repeat-x,
url('images/@{episodeprefix}_Infobox_Item_border_right.png') center right repeat-y,
url('images/@{episodeprefix}_Infobox_Item_border_bottom.png') bottom center repeat-x,
url('images/@{episodeprefix}_Infobox_Item_border_left.png') center left repeat-y;
background-size: 15px 15px;
}
/* MIXIN - INFOBOX QUEST ITEM */
.infobox-questitem-background(@episode, @episode-background, @episode-background-color) {
&.infobox-@{episode} {
.infobox-image {
background: url(@episode-background), url(/images/Quest_Item_Background.png);
background-size: 300px, auto 150px;
background-position: center;
background-repeat: repeat, no-repeat;
background-color: @episode-background-color;
height: calc(150px + 1em);
img {
max-width: 100px;
height: auto;
}
}
}
}
/* ---------------------------------------------------------------------------------
M I X I N S U S A G E
--------------------------------------------------------------------------------- */
/* MIXIN - INFOBOX CLASS/EPISODE VARIANTS */
&.infobox-Hopeport {
.infobox-card(@infobox-lighter-hopeport, @infobox-darker-hopeport, '/images/Hopeport_transparent_background.png', '/images/Hopeport_episode_infobox_icon.png');
}
&.infobox-Hopeforest {
.infobox-card(@infobox-lighter-hopeforest, @infobox-darker-hopeforest, '/images/Hopeforest_transparent_background.png', '/images/Hopeforest_episode_infobox_icon.png');
}
&.infobox-Mine_of_Mantuban {
.infobox-card(@infobox-lighter-mantuban, @infobox-darker-mantuban, '/images/Mine_of_Mantuban_transparent_background.png', '/images/Mine_of_Mantuban_episode_infobox_icon.png');
}
&.infobox-Crenopolis {
.infobox-card(@infobox-lighter-crenopolis, @infobox-darker-crenopolis, '/images/Crenopolis_transparent_background.png', '/images/Crenopolis_episode_infobox_icon.png');
}
&.infobox-Stonemaw_Hill {
.infobox-card(@infobox-lighter-stonemaw, @infobox-darker-stonemaw, '/images/Stonemaw_Hill_transparent_background.png', '/images/Stonemaw_Hill_episode_infobox_icon.png');
}
&.infobox-Bleakholm_Crags {
.infobox-card(@infobox-lighter-bleakholm, @infobox-darker-bleakholm, '/images/Bleakholm_Crags_transparent_background.png', '/images/Bleakholm_Crags_episode_infobox_icon.png');
}
/* MIXIN - MULTI EPISODE */
&.infobox-Hopeport {
&.infobox-Hopeforest-additional {
.infobox-multi-episode(@infobox-lighter-hopeport, @infobox-darker-hopeport, @infobox-lighter-hopeforest, @infobox-darker-hopeforest, '/images/Hopeport_transparent_background.png', '/images/Hopeforest_episode_infobox_icon.png');
}
&.infobox-Mine_of_Mantuban-additional {
.infobox-multi-episode(@infobox-lighter-hopeport, @infobox-darker-hopeport, @infobox-lighter-mantuban, @infobox-darker-mantuban, '/images/Hopeport_transparent_background.png', '/images/Mine_of_Mantuban_episode_infobox_icon.png');
}
&.infobox-Crenopolis-additional {
.infobox-multi-episode(@infobox-lighter-hopeport, @infobox-darker-hopeport, @infobox-lighter-crenopolis, @infobox-darker-crenopolis, '/images/Hopeport_transparent_background.png', '/images/Crenopolis_episode_infobox_icon.png');
}
&.infobox-Stonemaw_Hill-additional {
.infobox-multi-episode(@infobox-lighter-hopeport, @infobox-darker-hopeport, @infobox-lighter-stonemaw, @infobox-darker-stonemaw, '/images/Hopeport_transparent_background.png', '/images/Stonemaw_Hill_episode_infobox_icon.png');
}
&.infobox-Bleakholm_Crags-additional {
.infobox-multi-episode(@infobox-lighter-hopeport, @infobox-darker-hopeport, @infobox-lighter-bleakholm, @infobox-darker-bleakholm, '/images/Hopeport_transparent_background.png', '/images/Bleakholm_Crags_episode_infobox_icon.png');
}
}
&.infobox-Hopeforest {
&.infobox-Hopeport-additional {
.infobox-multi-episode(@infobox-lighter-hopeforest, @infobox-darker-hopeforest, @infobox-lighter-hopeport, @infobox-darker-hopeport, '/images/Hopeforest_transparent_background.png', '/images/Hopeport_episode_infobox_icon.png');
}
&.infobox-Mine_of_Mantuban-additional {
.infobox-multi-episode(@infobox-lighter-hopeforest, @infobox-darker-hopeforest, @infobox-lighter-mantuban, @infobox-darker-mantuban, '/images/Hopeforest_transparent_background.png', '/images/Mine_of_Mantuban_episode_infobox_icon.png');
}
&.infobox-Crenopolis-additional {
.infobox-multi-episode(@infobox-lighter-hopeforest, @infobox-darker-hopeforest, @infobox-lighter-crenopolis, @infobox-darker-crenopolis, '/images/Hopeforest_transparent_background.png', '/images/Crenopolis_episode_infobox_icon.png');
}
&.infobox-Stonemaw_Hill-additional {
.infobox-multi-episode(@infobox-lighter-hopeforest, @infobox-darker-hopeforest, @infobox-lighter-stonemaw, @infobox-darker-stonemaw, '/images/Hopeforest_transparent_background.png', '/images/Stonemaw_Hill_episode_infobox_icon.png');
}
&.infobox-Bleakholm_Crags-additional {
.infobox-multi-episode(@infobox-lighter-hopeforest, @infobox-darker-hopeforest, @infobox-lighter-bleakholm, @infobox-darker-bleakholm, '/images/Fopeforest_transparent_background.png', '/images/Bleakholm_Crags_episode_infobox_icon.png');
}
}
&.infobox-Mine_of_Mantuban {
&.infobox-Hopeport-additional {
.infobox-multi-episode(@infobox-lighter-mantuban, @infobox-darker-mantuban, @infobox-lighter-hopeport, @infobox-darker-hopeport, '/images/Mine_of_Mantuban_transparent_background.png', '/images/Hopeport_episode_infobox_icon.png');
}
&.infobox-Hopeforest-additional {
.infobox-multi-episode(@infobox-lighter-mantuban, @infobox-darker-mantuban, @infobox-lighter-hopeforest, @infobox-darker-hopeforest, '/images/Mine_of_Mantuban_transparent_background.png', '/images/Hopeforest_episode_infobox_icon.png');
}
&.infobox-Crenopolis-additional {
.infobox-multi-episode(@infobox-lighter-mantuban, @infobox-darker-mantuban, @infobox-lighter-crenopolis, @infobox-darker-crenopolis, '/images/Mine_of_Mantuban_transparent_background.png', '/images/Crenopolis_episode_infobox_icon.png');
}
&.infobox-Stonemaw_Hill-additional {
.infobox-multi-episode(@infobox-lighter-mantuban, @infobox-darker-mantuban, @infobox-lighter-stonemaw, @infobox-darker-stonemaw, '/images/Mine_of_Mantuban_transparent_background.png', '/images/Stonemaw_Hill_episode_infobox_icon.png');
}
&.infobox-Bleakholm_Crags-additional {
.infobox-multi-episode(@infobox-lighter-mantuban, @infobox-darker-mantuban, @infobox-lighter-bleakholm, @infobox-darker-bleakholm, '/images/Mine_of_Mantuban_transparent_background.png', '/images/Bleakholm_Crags_episode_infobox_icon.png');
}
}
&.infobox-Crenopolis {
&.infobox-Hopeport-additional {
.infobox-multi-episode(@infobox-lighter-crenopolis, @infobox-darker-crenopolis, @infobox-lighter-hopeport, @infobox-darker-hopeport, '/images/Crenopolis_transparent_background.png', '/images/Hopeport_episode_infobox_icon.png');
}
&.infobox-Hopeforest-additional {
.infobox-multi-episode(@infobox-lighter-crenopolis, @infobox-darker-crenopolis, @infobox-lighter-hopeforest, @infobox-darker-hopeforest, '/images/Crenopolis_transparent_background.png', '/images/Hopeforest_episode_infobox_icon.png');
}
&.infobox-Mine_of_Mantuban-additional {
.infobox-multi-episode(@infobox-lighter-crenopolis, @infobox-darker-crenopolis, @infobox-lighter-mantuban, @infobox-darker-mantuban, '/images/Crenopolis_transparent_background.png', '/images/Mine_of_Mantuban_episode_infobox_icon.png');
}
&.infobox-Stonemaw_Hill-additional {
.infobox-multi-episode(@infobox-lighter-crenopolis, @infobox-darker-crenopolis, @infobox-lighter-stonemaw, @infobox-darker-stonemaw, '/images/Crenopolis_transparent_background.png', '/images/Stonemaw_Hill_episode_infobox_icon.png');
}
&.infobox-Bleakholm_Crags-additional {
.infobox-multi-episode(@infobox-lighter-crenopolis, @infobox-darker-crenopolis, @infobox-lighter-bleakholm, @infobox-darker-bleakholm, '/images/Crenopolis_transparent_background.png', '/images/Bleakholm_Crags_episode_infobox_icon.png');
}
}
&.infobox-Stonemaw_Hill {
&.infobox-Hopeport-additional {
.infobox-multi-episode(@infobox-lighter-stonemaw, @infobox-darker-stonemaw, @infobox-lighter-hopeport, @infobox-darker-hopeport, '/images/Stonemaw_Hill_transparent_background.png', '/images/Hopeport_episode_infobox_icon.png');
}
&.infobox-Hopeforest-additional {
.infobox-multi-episode(@infobox-lighter-stonemaw, @infobox-darker-stonemaw, @infobox-lighter-hopeforest, @infobox-darker-hopeforest, '/images/Stonemaw_Hill_transparent_background.png', '/images/Hopeforest_episode_infobox_icon.png');
}
&.infobox-Mine_of_Mantuban-additional {
.infobox-multi-episode(@infobox-lighter-stonemaw, @infobox-darker-stonemaw, @infobox-lighter-mantuban, @infobox-darker-mantuban, '/images/Stonemaw_Hill_transparent_background.png', '/images/Mine_of_Mantuban_episode_infobox_icon.png');
}
&.infobox-Crenopolis-additional {
.infobox-multi-episode(@infobox-lighter-stonemaw, @infobox-darker-stonemaw, @infobox-lighter-crenopolis, @infobox-darker-crenopolis, '/images/Stonemaw_Hill_transparent_background.png', '/images/Crenopolis_episode_infobox_icon.png');
}
&.infobox-Bleakholm_Crags-additional {
.infobox-multi-episode(@infobox-lighter-stonemaw, @infobox-darker-stonemaw, @infobox-lighter-bleakholm, @infobox-darker-bleakholm, '/images/Stonemaw_Hill_transparent_background.png', '/images/Bleakholm_Crags_episode_infobox_icon.png');
}
}
&.infobox-Bleakholm_Crags {
&.infobox-Hopeport-additional {
.infobox-multi-episode(@infobox-lighter-bleakholm, @infobox-darker-bleakholm, @infobox-lighter-hopeport, @infobox-darker-hopeport, '/images/Bleakholm_Crags_transparent_background.png', '/images/Hopeport_episode_infobox_icon.png');
}
&.infobox-Hopeforest-additional {
.infobox-multi-episode(@infobox-lighter-bleakholm, @infobox-darker-bleakholm, @infobox-lighter-hopeforest, @infobox-darker-hopeforest, '/images/Bleakholm_Crags_transparent_background.png', '/images/Hopeforest_episode_infobox_icon.png');
}
&.infobox-Mine_of_Mantuban-additional {
.infobox-multi-episode(@infobox-lighter-bleakholm, @infobox-darker-bleakholm, @infobox-lighter-mantuban, @infobox-darker-mantuban, '/images/Bleakholm_Crags_transparent_background.png', '/images/Mine_of_Mantuban_episode_infobox_icon.png');
}
&.infobox-Crenopolis-additional {
.infobox-multi-episode(@infobox-lighter-bleakholm, @infobox-darker-bleakholm, @infobox-lighter-crenopolis, @infobox-darker-crenopolis, '/images/Bleakholm_Crags_transparent_background.png', '/images/Crenopolis_episode_infobox_icon.png');
}
&.infobox-Stonemaw_Hill-additional {
.infobox-multi-episode(@infobox-lighter-bleakholm, @infobox-darker-bleakholm, @infobox-lighter-stonemaw, @infobox-darker-stonemaw, '/images/Bleakholm_Crags_transparent_background.png', '/images/Stonemaw_Hill_episode_infobox_icon.png');
}
}
/* MIXIN - INFOBOX ITEM */
&.infobox-Item:not(.infobox-questitem) {
&.infobox-Hopeport .infobox-image a::before { .infobox-item-recolor (Hopeport); }
&.infobox-Hopeforest .infobox-image a::before { .infobox-item-recolor (Hopeforest); }
&.infobox-Mine_of_Mantuban .infobox-image a::before { .infobox-item-recolor (Mine_of_Mantuban); }
&.infobox-Crenopolis .infobox-image a::before { .infobox-item-recolor (Crenopolis); }
&.infobox-Stonemaw_Hill .infobox-image a::before { .infobox-item-recolor (Stonemaw_Hill); }
&.infobox-Bleakholm_Crags .infobox-image a::before { .infobox-item-recolor (Bleakholm_Crags); }
}
/* MIXIN - INFOBOX QUEST ITEM */
&.infobox-Item.infobox-questitem {
.infobox-questitem-background (Hopeport, '/images/Hopeport_transparent_background.png', @infobox-darker-hopeport);
.infobox-questitem-background (Hopeforest, '/images/Hopeforest_transparent_background.png', @infobox-darker-hopeforest);
.infobox-questitem-background (Mine_of_Mantuban, '/images/Mine_of_Mantuban_transparent_background.png', @infobox-darker-mantuban);
.infobox-questitem-background (Crenopolis, '/images/Crenopolis_transparent_background.png', @infobox-darker-crenopolis);
.infobox-questitem-background (Stonamw_Hill, '/images/Stonemaw_Hill_transparent_background.png', @infobox-darker-stonemaw);
.infobox-questitem-background (Bleakholm_Crags, '/images/Bleakholm_Crags_transparent_background.png', @infobox-darker-bleakholm);
}
}
.hidden {
display: none;
}