/* Attribution: Star Citizen Wiki */
.template-navplate {
margin-top: var( --space-md );
margin-bottom: var( --space-md );
clear: both;
font-size: 0.875rem;
line-height: var( --line-height-sm );
border: 1px solid var( --border-color-base );
border-radius: var( --border-radius--medium );
overflow: hidden;
}
.template-navplate__header {
padding: var( --space-sm ) var( --space-md );
background-color: var( --color-surface-2 );
}
.template-navplate.mw-collapsed .template-navplate__header {
background-color: transparent;
}
.template-navplate__subtitle {
font-size: 0.8125rem;
}
.template-navplate__subtitle,
.template-navplate-item__label {
color: var( --color-base--subtle );
letter-spacing: 0.05em;
}
.template-navplate__title,
.template-navplate__groupheader {
color: var( --color-base--emphasized );
font-weight: var( --font-weight-semibold );
}
.template-navplate__title {
font-size: var( --font-size-h3 );
}
.template-navplate__content {
position: relative;
border-top: 1px solid var( --border-color-base );
}
.template-navplate__groupheader {
background-color: var( --color-surface-2 );
padding: var( --space-xs ) var( --space-md );
}
.template-navplate-item {
display: grid;
}
.template-navplate-item__label {
display: flex;
padding: var( --space-sm ) var( --space-md ) 0 var( --space-md );
gap: var( --space-xs );
}
.template-navplate-item__list {
padding: 10px; /* 10px + 2px = space-sm; 10px + 6px = space-md */
}
.template-navplate-item__list a {
display: inline-block;
padding: 2px 6px;
}
.template-navplate__content > div + div {
border-top: 1px solid var( --border-color-base );
}
/* Style collapse button */
.template-navplate > .mw-collapsible-toggle {
margin-top: 0.96875rem; /* calc( ( var( --font-size-h3 ) + 0.875rem ) / 2 ) */
margin-left: var( --space-xs );
margin-right: var( --space-md );
}
.template-navplate > .mw-collapsible-toggle-default::before,
.template-navplate > .mw-collapsible-toggle-default::after {
content: none;
}
.template-navplate > .mw-collapsible-toggle > .mw-collapsible-text {
display: block;
padding: var( --space-xs ) var( --space-sm );
border: 1px solid var( --border-color-base );
border-radius: var( --border-radius--medium );
background-color: var( --color-surface-2 );
color: var( --color-base--emphasized );
font-weight: var( --font-weight-medium );
}
.template-navplate > .mw-collapsible-toggle > .mw-collapsible-text:hover {
background-color: var( --color-surface-2--hover );
}
.template-navplate > .mw-collapsible-toggle > .mw-collapsible-text:active {
background-color: var( --color-surface-2--active );
}
@media only screen and ( min-width: 720px ) {
.template-navplate-item {
grid-template-columns: 180px auto;
}
.template-navplate-item__label {
border-right: 1px solid var( --border-color-base );
padding-bottom: var( --space-sm );
}
.template-navplate > .mw-collapsible-toggle {
margin-top: 1.03125rem; /* calc( ( var( --font-size-h3 ) + 0.875rem ) / 2 ) */
}
}