Module:Navplate/styles.css

.template-navplate { margin-top: 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 ) */ } }