MediaWiki:Common.css/src/template/infocard.scss
This page is one of the SCSS pages which are the basis for MediaWiki:Common.css. After you edit this page, you will need to recompile them for your changes to take effect. See Terraria Wiki:CSS to learn more.
Ancestors: / src / template / infocard.scss
Siblings: achievement.scss animation.scss archive_header.scss archive-box.scss chance.scss coin.scss color_box.scss crafts.scss diagram.scss doc.scss dotlist.scss dpl3.scss editcopy_notice.scss error.scss etext.scss exclusive_icon_link.scss exclusive_icons.scss expert,master,journey.scss flavor_text.scss float_file_box.scss gameText.scss getDropInfo.scss hardmode.scss hatnote.scss history.scss hp.scss info_request.scss infobox.scss infocard.scss item.scss itemlist.scss key.scss l10n_subtemplate.scss licensebox.scss living_preferences.scss loot.scss mctoc.scss msgbox.scss multi-column_list.scss na.scss navbox.scss project.scss protected.scss quotation.scss recipes.scss reflist.scss shortcut.scss sound.scss spoiler.scss summoned.scss templatedata.scss toc_limit.scss toggleBox.scss transclude.scss translation_projects.scss use_time,knockback.scss yes,no.scss
Children: (none)
/********* [[Template:Infocard]] *********/
.infocard {
box-sizing: border-box;
*{
box-sizing: border-box;
}
@mixin narrow-mode {
// for narrow screens
@media screen and (max-width: 450px) {
@content;
}
}
--infocard-padding: 1em;
--infocard-padding-negative: calc(var(--infocard-padding) * -1);
--infocard-padding-half: calc(var(--infocard-padding) * 0.5);
--infocard-padding-half-negative: calc(var(--infocard-padding-negative) * 0.5);
--infocard-icon-right-offset: -2em;
--infocard-box-title-font-size: 1.5em;
--infocard-box-title-font-weight: lighter;
--infocard-main-heading-font-size: 2em;
padding: var(--infocard-padding);
border: 1px solid var(--theme-box-border-color);
border-radius: 6px;
width: 100%;
overflow: hidden;
min-width: 300px;
position: relative;
background: var(--theme-content-background);
& + & {
/* gap between subsequent infocard elements */
margin-top: 0.5em;
}
&.auto-width{
width: unset;
//max-width: 100%;
}
&.compact {
--infocard-padding: 0.5em;
--infocard-icon-right-offset: -2.5em;
--infocard-box-title-font-size: 100%;
--infocard-box-title-font-weight: bold;
--infocard-main-heading-font-size: 1.25em;
min-width: 240px;
}
> .intro {
margin: 1em 0;
min-width: 200px;
}
@media screen and (max-width: 720px) {
.outro .content {
overflow-x: auto;
}
}
.heading {
margin: 1em 0 var(--infocard-padding-half);
font-weight: bold;
}
.main-heading {
border-right: 3em solid transparent;
position: relative;
line-height: 1;
padding-left: var(--infocard-padding);
margin: var(--infocard-padding) var(--infocard-padding-negative);
background: var(--theme-highlight-background);
@include narrow-mode {
padding-right: 0 !important;
}
.hgroup {
display: inline-block;
margin-left: 4px;
padding: 0 var(--infocard-padding);
background: var(--theme-content-background);
> .main {
font-size: var(--infocard-main-heading-font-size);
color: var(--theme-text-color-highlight);
> .namenote {
font-size: 62.5%;
color: var(--theme-text-color-note);
}
}
}
.icon {
position: absolute;
right: var(--infocard-icon-right-offset);
top: 50%;
transform: translateY(-50%);
z-index: 1;
display: flex;
flex-wrap: wrap;
align-items: center;
align-content: center;
justify-content: center;
width: var(--iconsize);
height: var(--iconsize);
&.frame {
border: 1px solid var(--theme-box-border-color);
border-radius: 4px;
background: var(--theme-page-background-color);
&.round {
border-radius: 100%;
}
}
}
}
> .card {
float: right;
margin: -1em 1em 0.75em 0.75em;
@include narrow-mode {
float: none;
margin: 0;
}
box-shadow: 0 0 6px rgba(0, 0, 0, 0.05);
position: relative;
z-index: 5;
.image {
background: var(--theme-box-border-color);
border-left: 1px solid var(--theme-box-border-color);
border-right: 1px solid var(--theme-box-border-color);
box-shadow: var(--theme-widget-shadow);
@include narrow-mode {
width: 100% !important;
text-align: center;
}
}
.content {
border: 1px solid var(--theme-box-border-color);
border-top: 0;
background: var(--theme-content-background);
border-radius: 0 0 4px 4px;
padding: 0 0.75em;
box-shadow: var(--theme-widget-shadow);
@include narrow-mode {
width: 100% !important;
}
> .intro {
margin-top: 0.75em;
}
> dl {
margin: 0.75em 0;
}
dt {
font-weight: bold;
margin-top: 0.75em;
}
dd {
margin: 0;
}
> .outro {
margin-bottom: 0.75em;
}
}
}
.box {
padding: var(--infocard-padding);
margin: 1em 0;
background-color: var(--theme-box-background);
border: 1px solid var(--theme-widget-border-color);
border-radius: 4px;
> .title {
line-height: 1;
display: inline-block;
margin-left: var(--infocard-padding-negative);
padding: 0 1em 0 var(--infocard-padding-half);
min-width: 5em;
border-left: var(--infocard-padding-half) solid transparent;
border-left-color: transparent;
> span {
font-weight: var(--infocard-box-title-font-weight);
font-size: var(--infocard-box-title-font-size);
}
}
> .content {
margin-top: 4px;
}
}
&.biome {
.main-heading + div {
display: flex;
flex-wrap: wrap;
margin: 0 var(--infocard-padding-half-negative) var(--infocard-padding-negative);
> .box {
margin: 0 var(--infocard-padding-half) var(--infocard-padding);
flex: 1 1 auto;
&:last-child,
&.last {
flex: 10 10 auto;
}
.dotlist {
margin-top: -2px;
li {
margin-top: 2px;
}
}
}
}
}
}