Template:Navbox/styles.css

/* Default style for navigation boxes */
.navbox {                     /* Navbox container style */
	box-sizing: border-box;
	border: 1px solid #a2a9b1;
	width: 100%;
	clear: both;
	font-size: 88%;
	text-align: center;
	padding: 1px;
	margin: 1em auto 0;       /* Prevent preceding content from clinging to navboxes */
}
.navbox .navbox {
	margin-top: 0;            /* No top margin for nested navboxes */
}
.navbox + .navbox {
	margin-top: -1px;         /* Single pixel border between adjacent navboxes */
}
.navbox-inner,
.navbox-subgroup {
	width: 100%;
}
.navbox-group,
.navbox-title,
.navbox-abovebelow {
	padding: 0.25em 1em;      /* Title, group and above/below styles */
	line-height: 1.5em;
	text-align: center;
}
th.navbox-group {             /* Group style */
	white-space: nowrap;
	/* @noflip */
	text-align: right;
}
table.navbox-subgroup {
	display: table;
}
.navbox,
.navbox-subgroup {
	background-color: #fdfdfd; /* Background color */
}
.navbox-list {
	line-height: 1.5em;
	border-color: #fdfdfd;    /* Must match background color */
}
/* cell spacing for navbox cells */
tr + tr > .navbox-abovebelow,
tr + tr > .navbox-group,
tr + tr > .navbox-image,
tr + tr > .navbox-list {    /* Borders above 2nd, 3rd, etc. rows */
	border-top: 2px solid #fdfdfd; /* Must match background color */
}
.navbox th,
.navbox-title {
	background-color: var(--theme-primary-0);      /* Level 1 color */
}
.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
	background-color: var(--theme-primary-1);      /* Level 2 color */
}
.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
	background-color: var(--theme-primary-2);      /* Level 3 color */
}
.navbox-even {
	background-color: #f7f7f7;      /* Even row striping */
}
.navbox-odd {
	background-color: transparent;  /* Odd row striping */
}
.navbox .hlist td dl,
.navbox .hlist td ol,
.navbox .hlist td ul,
.navbox td.hlist dl,
.navbox td.hlist ol,
.navbox td.hlist ul {
	padding: 0.125em 0;       /* Adjust hlist padding in navboxes */
}
.navbox .hlist li {
	white-space: nowrap;
}
.navbox > table > tbody {
	width: 100%;
	display: table;
}

/*
 * Different screen sizes
 */
@media only screen and (max-width: 576px) {
	.navbox .navbox-group,
	.navbox .navbox-list {
		display: block;
		width: auto !important;
	}
	
	.navbox .navbox-group {
		text-align: left !important;
	}
	
	.navbox-image {
		display: none;
	}
	
	.navbox .navbox-list {
		line-height: 2em !important;
	}
	
	.navbox li a img:not(.nohide) {
		display: none;
	}
	
	.navbox .navbox-list li,
	.navbox .navbox-list li a {
		white-space: normal;
	}
}

/*
 * Vector skin
 */
 
/*
 * Citizen skin
 */
body.skin-citizen .navbox,
body.skin-citizen .navbox-subgroup {
	border-color: var(--border-color-base);
	background-color: var(--color-surface-1);
	border-radius: var(--border-radius--small);
}

body.skin-citizen .navbox table {
	margin-top: 0;
}

body.skin-citizen .navbox .navbox-title,
body.skin-citizen .navbox .navbox-title abbr {
	color : #000;
}

body.skin-citizen .navbox .navbox-even {
	background: var(--color-surface-2);
}

html.skin-citizen-light .navbox .navbox-group,
html.skin-citizen-light .navbox .navbox-subgroup .navbox-group,
html.skin-citizen-light .navbox .navbox-abovebelow {
	color: hsl(206.7, 5.1%, 34.7%);
}

html.skin-citizen-dark .navbox .navbox-group,
html.skin-citizen-dark .navbox .navbox-subgroup .navbox-group,
html.skin-citizen-dark .navbox .navbox-abovebelow {
	color: hsl(206.7, 5.1%, 14.7%);
}

html.skin-citizen-dark .navbox .navbox-abovebelow a:not(.selflink),
html.skin-citizen-dark .navbox .navbox-group a:not(.selflink) {
	color: hsl(220, 89%, 16%);
}

html.skin-citizen-dark .navbox .navbox-title .mw-collapsible-text {
	color: hsl(220, 59%, 21%);
}

@media screen and (prefers-color-scheme: dark) {
	html.skin-citizen-auto .navbox .navbox-group,
	html.skin-citizen-auto .navbox .navbox-subgroup .navbox-group,
	html.skin-citizen-auto .navbox .navbox-abovebelow {
		color: hsl(206.7, 5.1%, 14.7%);
	}
	
	html.skin-citizen-auto .navbox .navbox-abovebelow a:not(.selflink),
	html.skin-citizen-auto .navbox .navbox-group a:not(.selflink) {
		color: hsl(220, 89%, 16%);
	}
	
	html.skin-citizen-auto .navbox .navbox-title .mw-collapsible-text {
		color: hsl(220, 59%, 21%);
	}
}

body.skin-citizen .navbox .navbox-list,
body.skin-citizen .navbox .navbox-group,
body.skin-citizen .navbox .navbox-image,
body.skin-citizen tr + tr > .navbox-abovebelow,
body.skin-citizen tr + tr > .navbox-group,
body.skin-citizen tr + tr > .navbox-image,
body.skin-citizen tr + tr > .navbox-list {
	border-color: var(--color-surface-1);
}

/*
 * Cosmos
 */
body.skin-cosmos .navbox,
body.skin-citizen .navbox-subgroup {
	border-radius: 4px;
}