User:Harimaron/Sandbox/Template:Navbox/styles.css: Difference between revisions

Latest revision as of 17:01, 4 May 2024

table.navbox {
	margin: auto;
	width: 80%;
	border-radius: 20px;
	border-spacing: 2px;
}
table.navbox > tbody > tr:first-child > td > div {
	font-size: 17px;
	font-weight: bold;
	text-align: center;
	margin-left: 56px;
}
table.navbox > tbody > tr:not(:first-child) > td {
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 18px;
	padding: 0;
}
table.navbox > tbody > tr:not(:first-child) > td > div {
	box-shadow: 0 0 15px rgba(255, 255, 255, 0.5) inset;
	border-radius: 18px;
	padding: 4px 4px 0 4px;
}

table.navbox-group {
	border: 2px solid;
	border-radius: 14px;
	width: 100%;
	border-spacing: 2px;
	margin-bottom: 4px;
}
table.navbox-group > tbody > tr > th:first-child {
	border-radius: 11px 0 0 11px;
	text-align: center;
	font-weight: bold;
}

/* This matches the transition width of the Timeless skin */
@media (max-width: 850px) {
	table.navbox {
		display: table !important; /* remove the `display:inline-table` property so that the table can be centred */
		max-width: 630px; /* for a somewhat smooth transition when resizing window ~ ((850 - 30 * 2) * 80%) */
		width: 100%;
	}

	table.navbox-group {
		display: flex !important; /* force table row to be laid out vertically */
		flex-flow: column;
		gap: 2px;
		padding: 2px !important;
	}
	table.navbox-group > tbody,
	table.navbox-group > tbody > tr {
		display: contents !important; /* transparent in the layout */
	}
	table.navbox-group > tbody > tr > th:first-child {
		width: unset !important;
		border-radius: 11px 11px 0 0;
		position: sticky;
		top: 0;
		z-index: 1; /* show above `position:relative` elements, e.g. `<sup>` */
	}
	table.navbox-group > tbody > tr > td {
		width: unset !important;
	}
}