MediaWiki:Common.css/src/template/navbox.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 / navbox.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:Navbox]] *********/
/* subtemplates:
* [[Template:Navbox/end]]
* [[Template:Navbox/h1]]
* [[Template:Navbox/h2]]
* [[Template:Navbox/start]]
* [[Template:Navbox/v.d.e]]
*/
@mixin box-style {
background: var(--theme-highlight-background);
background-size: 100%;
border-width: 1px;
border-style: solid;
border-color: var(--theme-box-border-color-inner);
border-radius: var(--theme-box-border-radius-inner);
}
.navbox {
@include box-style;
box-sizing: border-box;
padding: 6px;
margin: 0.5em auto;
width: 100%;
max-width: 1800px;
position: relative;
clear: both;
.i {
padding: 1px 0;
}
> .header {
@include box-style;
text-align: left;
font-size: 16px;
font-weight: bold;
line-height: 2;
min-height: 1em;
padding: 4px 70px 4px 6px;
}
> .vde {
position: absolute;
right: 10px;
top: calc(2rem + 2px);
font-size: 9px;
line-height: 1;
color: var(--theme-text-color-note);
}
.table > div {
> .title,
> .h1,
> .h2 {
@include box-style;
}
}
> .mw-collapsible-toggle {
position: absolute;
line-height: 1;
right: 10px;
top: 10px;
font-size: 12px;
> .mw-collapsible-bracket {
display: none;
}
&:before {
content: "";
vertical-align: middle;
display: inline-block;
width: 5px;
height: 5px;
transform: rotate(45deg);
position: relative;
left: -3px;
border-left: 2px solid var(--theme-link-color);
border-top: 2px solid var(--theme-link-color);
border-right: 0;
border-bottom: 0;
top: 1px;
}
&:after {
content: "";
}
&.mw-collapsible-toggle-collapsed:before {
border-left: 0;
border-top: 0;
border-right: 2px solid var(--theme-link-color);
border-bottom: 2px solid var(--theme-link-color);
top: -2px;
}
}
> .content {
text-align: left;
padding: 6px 6px 0;
.dotlist + .dotlist {
margin-top: 0.5em;
}
> .dotlist + .dotlist {
margin-top: 6px;
padding-top: 6px;
border-top: 1px solid var(--theme-body-text-color--hover);
}
}
& & {
/* nested navbox */
border: 0;
padding: 0;
width: auto;
margin: 0 -6px 6px -6px;
&:last-child {
margin: 0 -6px;
}
> .header {
font-size: 14px;
padding: 0 64px 0 6px;
}
> .mw-collapsible-toggle {
right: 4px;
top: 4px;
font-size: 10px;
&:before {
width: 3px;
height: 3px;
border-left: 1px solid var(--theme-link-color);
border-top: 1px solid var(--theme-link-color);
border-right: 0;
border-bottom: 0;
top: 1px;
}
&.mw-collapsible-toggle-collapsed:before {
border-left: 0;
border-top: 0;
border-right: 1px solid var(--theme-link-color);
border-bottom: 1px solid var(--theme-link-color);
top: -1px;
}
}
}
.h1 {
font-weight: bold;
margin-top: 0.5em;
margin-bottom: 0.25em;
line-height: 1.5;
&::after {
content: '';
display: block;
margin: auto auto auto 0;
width: 5em;
height: 0;
border-bottom: 2px solid var(--theme-box-border-color);
}
+ .h2 {
margin-top: 0.5em;
}
}
.table > div:first-child .h1,
.content > .h1:first-child {
margin-top: auto;
}
.h2 {
font-weight: bold;
line-height: 1.5;
margin-top: 0.25em;
font-size: 12px;
+ .h3 {
margin-top: 0.5em;
}
}
.h3 {
font-size: 10px;
font-weight: bold;
line-height: 1.5;
}
@media (max-width: 599px) {
.table > div > .title::after,
.table > .dotlist > .title::after {
content: ":";
margin-right: 0.25em;
}
}
@media (min-width: 600px) {
.table {
display: table;
text-align: left;
margin: -5px -7px -1px -7px;
> div {
display: table-row;
> * {
display: table-cell;
padding: 4px 7px;
vertical-align: middle;
box-shadow: inset 0 0 0 1px var(--theme-page-background-color);
}
> .title,
> .h1,
> .h2 {
background: var(--theme-highlight-background);
text-align: right;
line-height: 1.1;
/*width: max-content;*/
.eil {
white-space: normal;
}
}
> .title::after,
> .h1::after {
display: none;
}
}
.table {
display: table;
padding: 0;
margin: 0 -1px 0 0;
}
.cell {
padding: 0;
> .dotlist {
padding: 4px 7px;
}
}
}
}
}