MediaWiki:Gadget-tabs.css

/* dynamictabs  */
div.tabs-dynamic,
div.tabs-static {
	overflow-x: hidden;
	min-width: calc(320px - 2em);
}

.page-content .mw-content-ltr ul.tabs,
.page-content .mw-content-rtl .mw-content-ltr ul.tabs,
ul.tabs {
	margin: 0;
	padding: 0;
}

ul.tabs > li {
	background-color: var(--interface-background);
	border: 1px solid var(--interface-border);
	border-bottom: 0;
	border-radius: 2px 2px 0 0;
	cursor: pointer;
	display: inline-block;
	font-size: 90%;
	margin: 4px 0 0;
	padding: 1px 0.35em;
}

ul.tabs > li.active {
	background-color: var(--content-bg-color);
	border: 2px solid var(--wiki-color);
	margin-bottom: -2px;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--content-bg-color);
}

.frontpage-inner ul.tabs > li.active {
 background-color:var(--fpbox-background);
}

div.tabs-content {
	background-color: var(--content-bg-color);
	border: 2px solid var(--wiki-color);
	border-right: 0;
	border-bottom: 0;
	padding: 0.5em;
}

.frontpage-inner div.tabs-content {
 background-color:var(--fpbox-background);
}

div.tabs-content > div:not(.active) {
	display: none;
}

div.tabs-content > div {
	overflow-x: auto;
	overflow-y: hidden;
}

ul.tabs > li + li {
  margin-left:0.35em;
}

/* start Module:TabsHeader styles */
/** main tab box **/
.tabheader-top {
    display:flex;
    flex-wrap:wrap;
    white-space:nowrap;
    margin-bottom: 3px;
}

.tabheader-top + .tabheader-top {
    margin-top: 3px;
}

/** individual tabs **/
.tabheader-tab {
    position:relative;
    display: inline-block;
    font-size: 90%;
    line-height: 1em;
    margin: 4px 0 0 0.4em;
    border-bottom: 1px solid var(--tabheader-border);
}
.tabheader-tab:last-of-type {
    display:flex;
    flex-grow:1;
}
.tabheader-active {
  font-weight: bold;
    border-color:transparent; 
}

/** tab content **/
.tabheader-content {
    padding: 0.4em 0.5em 0.2em;
    background-color: var(--tabheader-tab);
    width:auto;
    border: 1px solid transparent;
    border-bottom:0;
}
.tabheader-active .tabheader-content {
    background-color: var(--content-bg-color);
    border-color: var(--tabheader-border);
}

/** between-tab spacers **/
.tabheader-tab::before{
    display:inline-block;
    border-bottom: 1px solid var(--tabheader-border);
    width:calc(2px + .4em);
    /* ok i hate this but its width of gap + total width of left/right border on the tab */
    height:1em;
    position:absolute;
    bottom:-1px;
    left:calc(-1px - .4em);
    content:"";
}

/** last tab spacer **/
.tabheader-tab.tabheader-active:last-of-type::after {
    display: inline-block;
    border-bottom: 1px solid var(--tabheader-border);
    flex-grow: 1;
    content: "";
}

.correspondingpagebox {
	margin: -0.4em 0 0;
	border: 1px dashed var(--tabheader-border);
	float: right;
	padding: 0.3em 0.5em 0.25em;
	font-size: 90%;
	line-height: 0.95em;
}
/* end Module:TabsHeader styles */
/* start titletabs */
.titletabs-tabs {
	width: 100%;
	line-height: normal;
	text-align: center;
	padding: 0 0 4px;
	background-color: var(--titletabs-background);
}

.titletabs-row2 {
	background-color: transparent;
}

.titletabs-tab {
	display: inline-block;
	padding: 5px;
	background-color: transparent;
}


.titletabs-tabs .titletabs-tab,
.titletabs-tabs .titletabs-tab a:visited,
.titletabs-tabs .titletabs-tab a {
	color: var(--body-text-color);
	font-size: 100%;
	text-decoration: none;
}

.titletabs-tab.active,
.titletabs-active {
	background-color: var(--wiki-accent);
}

.titletabs-tabs .optionfromlist-toggler-lazy.active,
.titletabs-tabs .optionfromlist-toggler.active,
.titletabs-tabs .titletabs-active a,
.titletabs-tab.active,
.titletabs-tab.active a:visited,
.titletabs-tab.active a,
.titletabs-active a:visited,
.titletabs-active a {
	color: var(--accent-text-color);
	font-size: 110%;
}
/* end titletabs */