MediaWiki:CustomTabs.css

.custom-tabs {
	display: flex;
	flex-direction: row;
	gap: 5px;
	width: 100%;
	margin: 5px 0;
	flex-wrap: wrap;
	justify-content: space-evenly;
	font-family: Fredoka, Rubik, sans-serif;
}

.custom-tabs > span {
	border-radius: 4px;
	display: flex;
	align-items: center;
	text-align: center;
	justify-content: center;
	flex: 1;
	border: 1px solid var(--border-color);
	transition: 0.3s;
}

.custom-tabs a,
.custom-tabs .selflink,
.custom-tabs span.new {
	padding: 8px 10px;
	width: 100%;
	text-decoration: none;
}

/* Mobile 2 column format */
.skin-fandommobile div.custom-tabs {
	display: grid;
	grid-template-columns: repeat(2, 50%);
	grid-auto-flow: row;
	flex-wrap: wrap;
}

.skin-fandommobile .custom-tabs a,
.skin-fandommobile .custom-tabs .selflink,
.skin-fandommobile .custom-tabs span.new {
	font-size: 90%;
}

.custom-tabs.custom-tabs-default span.active-tab {
	background-color: var(--brown-300);
}

.custom-tabs.custom-tabs-default span.active-tab strong {
	color: #fff;
	font-weight: 500;
}

.custom-tabs.custom-tabs-default span.active-tab a:not(.new) {
	color: #fff;
}

.custom-tabs.custom-tabs-default span.inactive-tab {
	background-color: var(--gray-200);
	border-color: var(--border-color);
}

.custom-tabs.custom-tabs-default span.inactive-tab a:not(.new) {
	color: var(--font-color);
}

.custom-tabs.custom-tabs-default span.inactive-tab:hover {
	background: var(--gray-300);
}

.custom-tabs.custom-tabs-default span.inactive-tab:hover a:not(.new) {
	color: var(--font-color);
}