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: 0; }

.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 */