MediaWiki:Gadget-Tabber.css

/* Adapted from ZeldaWiki: https://zeldawiki.wiki/wiki/MediaWiki:Gadget-Tabs.css
Edited by Vish
General notes:
 * The classes here are applied by JS and Lua scripts at MediaWiki:Gadget-Tabber.js and Module:TabberUtils, respectively. 
*/

.jw-tabs--columns {
	display: block;
}

.tabcontainer {
	display: flex;
	flex-wrap: wrap;
	margin-top: calc(-1*0.25rem + 0.5rem);
	margin-bottom: 0.25rem;
}
.tabcontainer--align-x-center {
	justify-content: center;
}
.jw-tabs--stretch .tab {
	flex: 1 0 0;
}
.jw-tabs--columns .tab {
	flex: 1 0 100%;
}

.tabcontainer .tab {
	background-color: #e9e9e9;
	border: 1px solid #747474;
	box-sizing: border-box;
	cursor: pointer;
	font-weight: 400;
	padding: 0.5px 8px;
	white-space: nowrap;
	display: flex;
	align-items: center;
	column-gap: 0.25rem;
	justify-content: center;
	color: #3a1e87;
	font-size: 13px;
	font-family: Rubik;
}
.tabcontainer .tab:hover {
	background-color: #3d4897;
	background-image: linear-gradient(#3d4897,#5c78ce);
	color: white;
	text-shadow: 1px 1px black;
}

.tabcontainer .tab.active {
	background-color: #50567d;
	background-image: linear-gradient(#4a5185, #8482b4);
	color: white;
	text-shadow: 1px 1px black;
}

.tab--label-align-y-bottom {
	align-items: flex-end;
}

.tabcontents > .jw-tabs-content {
	display: none;
}
.tabcontents > .jw-tabs-content.jw-tabs-content--active {
	display: block;
}

.tabcontents--align-x-center {
	margin: 0 auto;
}
.tabcontents--align-x-center > .jw-tabs-content {
	text-align: center;
}
.tabcontents--align-x-right {
	margin-left: auto;
}
.tabcontents--align-x-right > .jw-tabs-content {
	text-align: right;
}

/* No need to add class for top vertical alignment because "start" is the default CSS value for align-self */
.tabcontents--align-y-center > .jw-tabs-content {
	align-self: center;
}
.tabcontents--align-y-bottom > .jw-tabs-content {
	align-self: end;
}

/* The idea behind fixed width/height is to overlap all the images one over the other,
 * so that the container takes on the width/height of the largest tab.
 */
.tabcontents--fixed-width, .tabcontents--fixed-height {
	display: grid;
	grid-template-columns: 1fr;
}
.tabcontents--fixed-width > .jw-tabs-content, .tabcontents--fixed-height > .jw-tabs-content {
	display: block;
	grid-row: 1;
	grid-column: 1;
}
.tabcontents--fixed-width > .jw-tabs-content:not(.jw-tabs-content--active), .tabcontents--fixed-height > .jw-tabs-content:not(.jw-tabs-content--active) {
	opacity: 0;
	visibility: hidden;
	z-index: -1;
}
.tabcontents--fixed-width:not(.tabcontents--fixed-height) > .jw-tabs-content:not(.jw-tabs-content--active) {
	height: 0;
}
.tabcontents--fixed-height:not(.tabcontents--fixed-width) > .jw-tabs-content:not(.jw-tabs-content--active) {
	width: 0;
}

.infoboxtabs2 .tab {
	font-size: 12px;
	filter: saturate(0.4);
	padding: 0 4px;
}

.portable-infobox .tabcontainer {
	margin: 0;
}

.portable-infobox .jw-tabs p {
	margin: 0;
}

.portable-infobox .pi-item[data-source="image"] .tabcontainer {
	background-color: #f1f1f1;
	margin: 0;
}

body.skin-minerva .jw-tabs .jw-tabs-content {
	width: 100%;
	margin: 0;
}