Module:Property navbox/styles.css

/* Don’t rename to “navbox” because MobileFrontend irreversibly deletes everything
   that has the string “navbox” in a classname, even if it’s not a navbox */
.property-navibox {
	background: var(--background-color-progressive-subtle, #f1f4fd);
	border: 3px solid var(--border-color-subtle, #c8ccd1);
}
.property-navibox-header {
	background: var(--background-color-progressive-subtle, #f1f4fd);
	outline: 3px solid var(--border-color-subtle, #c8ccd1);
	padding: 4px;
}
.property-navibox-links {
	float: right;
	margin: 0;
}
/* @noflip */
body.rtl .property-navibox-links {
	float: left;
}
.property-navibox-links li {
	display: inline;
	margin: 0;
}
.property-navibox-links li:after {
	display: inline;
	content: " – ";
}
.property-navibox-links li:last-child:after {
	content: none;
}
.property-navibox-main {
	overflow-x: auto;
}
.property-navibox table {
	display: table; /* override MobileFrontend */
	overflow-x: visible; /* ditto */
}
.property-navibox-main tr {
	vertical-align: text-top;
}

/* @noflip */
.property-navibox[dir="ltr"] .property-navibox-main th {
	padding-right: 1em; /* padding-inline-end is not allowed */
	text-align: left;
}
/* @noflip */
.property-navibox[dir="rtl"] .property-navibox-main th {
	padding-left: 1em;
	text-align: right;
}

/*** Adapt layout on narrower screens ***/
@media (max-width: 720px) {
	.property-navibox-header {
		/* Display the property label/description first, above the links */
		display: flex;
		flex-direction: column-reverse;
	}

	.property-navibox-main > table > tbody > tr > td,
	.property-navibox-main > table > tbody > tr > th {
		/* Display the documentation labels/headings above the values */
		display: block;
	}
}