MediaWiki:Common.css/src/template/infobox.scss
< MediaWiki:Common.css | src
Jump to navigation
Jump to search
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 / infobox.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: drop_infobox.scss infobox_wrapper.scss item_infobox.scss npc_infobox.scss portable_infobox.scss
/********* Infobox templates *********/
/* Common styles for these infobox templates:
* [[Template:Drop infobox]]
* [[Template:Item infobox]]
* [[Template:Npc infobox]]
* (other infobox templates are portable infoboxes instead and do not use the common ".infobox" class)
*/
.infobox {
border: 1px solid var(--theme-box-border-color);
border-radius: 8px;
--padding: 6px;
padding: var(--padding);
font-size: 12px;
background-color: var(--theme-box-background);
line-height: 1.5;
float: right;
margin: 0.5em 0 0.5em 1em;
box-sizing: border-box;
* {
background: none;
}
&.float {
&-right {
float: right;
margin: 0.5em 0 0.5em 1em;
}
&-left {
float: left;
margin: 0.5em 1em 0.5em 0;
}
&-none {
float: none;
margin: 0.5em 1em 0.5em 0;
}
}
blockquote.quotation {
/* this seems unnecessary... where are blockquote.quotation elements used *inside* infoboxes? */
padding: 0 0.25em;
margin: 0.5em auto;
&:before {
/* this seems unnecessary... where are blockquote.quotation elements used *inside* infoboxes? */
font-size: 3.5em;
left: 0;
}
div {
/* this seems unnecessary... where are blockquote.quotation elements used *inside* infoboxes? */
padding: 0;
margin-left: 2em;
border-left: 0;
}
}
table {
background: none;
width: 100%;
border-spacing: 0;
th,
td {
padding: 2px;
vertical-align: middle;
}
th {
white-space: nowrap;
text-align: right;
width: 5em;
}
}
> .title,
.section > .title {
background: var(--modetabs-background);
color: var(--modetabs-text-color);
border: 1px solid;
border-color: var(--theme-box-border-color-inner);
border-radius: var(--theme-box-border-radius-inner);
font-weight: bold;
text-align: center;
padding: 2px 0;
}
> .title {
font-size: 15px;
padding: 6px 3px;
line-height: 1.2;
> .ename,
> .namesub {
display: block;
font-size: 12px;
font-style: italic;
}
> .namesub {
color: var(--theme-text-color-note);
&:before {
content: "(";
font-style: normal;
margin-right: 1px;
}
&:after {
content: ")";
font-style: normal;
margin-left: 1px;
}
&.namenote {
font-size: 10px;
}
}
}
.content-section {
padding: 6px 3px;
}
.variant {
color: var(--modetabs-text-color);
font-weight: bold;
text-align: center;
font-size: 12px;
padding: 4px 0;
line-height: 1.2;
margin-bottom: 2px;
}
.images {
position: relative;
padding: 6px 0;
min-height: 40px;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 5px;
img {
max-width: 100%;
height: auto;
}
}
ul {
list-style: none;
margin: auto;
text-align: center;
}
.section {
margin-bottom: 4px;
&:last-child {
margin-bottom: 0;
}
> .title {
&:first-child {
+ * {
margin-top: 4px;
}
+ :empty {
/* hide empty section contents */
display: none;
}
}
&:last-child {
/* hide titles of empty sections */
display: none;
}
}
.stat th .gameText {
/* revert the "white-space:pre-wrap" in {{gameText}} in captions, e.g. in the sound section */
white-space: unset;
}
&.buff,
&.debuff {
table {
border-bottom: 1px solid var(--theme-box-border-color);
margin-bottom: 0.25em;
}
&:after {
content: "";
display: block;
height: 4px;
margin-top: -7px;
background: var(--theme-page-background-color);
}
}
&.ids {
border-top: 1px solid var(--theme-box-border-color);
text-align: center;
font-size: 10.5px;
background: var(--modetabs-background);
color: var(--modetabs-text-color);
li {
padding: 2px 0;
border-bottom: 2px solid var(--theme-page-background-color);
margin: 0;
font-weight: bold;
&:last-child {
border-bottom: 0;
}
}
}
}
tr.buff {
th,
td {
background: var(--modetabs-background);
border: 1px solid var(--modetabs-border-color);
}
th {
border-left: 0;
}
td {
border-right: 0;
padding-left: 3px;
b {
font-weight: bold;
white-space: nowrap;
}
}
}
.imageother {
text-align: center;
padding: 6px 0;
border-top: 1px solid var(--theme-box-border-color);
.imageothercaption {
margin: 0.15em 0 0;
}
}
}
.infobox,
.portable-infobox {
.tags {
/* tag list */
--tags-border-color: rgba(var(--theme-text-color--rgb), 0.4);
--tags-border-color-linked: rgba(var(--theme-link-color--rgb), 0.4);
margin-top: -1px;
margin-bottom: -1px;
.tag {
border: 1px solid var(--tags-border-color-linked);
display: inline-block;
padding: 0 4px;
border-radius: 3px;
margin: 3px 6px 3px auto;
@supports selector(:has(p)) {
& {
border-color: var(--tags-border-color);
&:has(> a) {
border-color: var(--tags-border-color-linked);
}
}
}
a {
white-space: nowrap;
}
}
}
}
.modetabs {
display: flex;
padding: 0 4px;
.tab {
margin: 0 2px -1px;
border-radius: 3px 3px 0 0;
background: transparent;
padding: 4px 0 3px;
text-align: center;
font-weight: bold;
cursor: pointer;
border: 1px solid transparent;
border-bottom: none;
&.current {
background: var(--theme-box-background);
border-color: var(--theme-box-border-color);
}
&:hover {
text-decoration: underline;
}
}
.infobox & {
border-bottom: 1px solid var(--theme-box-border-color);
margin: 6px -6px;
.tab {
flex: 1 1 33.33333333%;
}
}
}
/* -------------------------------------------------------- */
/* classic/expert/master mode tabber */
/* -------------------------------------------------------- */
.infobox,
.portable-infobox,
.infotable {
--modetabs-background: var(--theme-modetabs-classic-background);
--modetabs-border-color: var(--theme-modetabs-classic-border-color);
--modetabs-text-color: var(--theme-modetabs-classic-text-color);
}
.modesbox {
&.c-normal {
.m-expert,
.m-master,
.m-expert-master {
display: none !important;
}
}
&.c-expert {
--modetabs-background: var(--theme-modetabs-expert-background);
--modetabs-border-color: var(--theme-modetabs-expert-border-color);
--modetabs-text-color: var(--theme-modetabs-expert-text-color);
.m-normal,
.m-master,
.m-normal-master {
display: none !important;
}
}
&.c-master {
--modetabs-background: var(--theme-modetabs-master-background);
--modetabs-border-color: var(--theme-modetabs-master-border-color);
--modetabs-text-color: var(--theme-modetabs-master-text-color);
.m-normal,
.m-expert,
.m-normal-expert {
display: none !important;
}
}
&.expertonly,
.expertonly {
.m-normal {
display: none !important;
}
}
&.masteronly,
.masteronly {
.m-normal,
.m-expert {
display: none !important;
}
}
}
/* @import template/infobox/portable_infobox.css */
/* @import template/infobox/item_infobox.css */
/* @import template/infobox/npc_infobox.css */
/* @import template/infobox/drop_infobox.css */
/* @import template/infobox/infobox_wrapper.css */