MediaWiki:Gadget-Tabs.css

/* General notes: * The classes here are applied by JS and Lua scripts at MediaWiki:Gadget-Tabs.js and Module:UtilsLayout/Tabs, respectively. * * The > selector is used here to account for the possibility of tabs nested within tabs (e.g. Template:Media) * The different tab containers may have different styling options set, * so it's important that styles are only applied to direct children rather than all descendants */

.tabcontainer { display: flex; flex-wrap: wrap; margin-bottom: var(--zw-space-2); margin-left: calc(-1*var(--zw-space-1)); margin-top: calc(-1*var(--zw-space-1) + var(--zw-space-2)); } .tabcontainer--align-x-center { justify-content: center; } .tabcontainer--stretch > .tab { flex: 1 0 0; } .tabcontainer--columns > .tab { flex: 1 0 100%; }

.tabcontainer .tab { background-color: var(--zw-background-interactive); background-image: var(--zw-gradient-tab); border: var(--zw-border-width-2) solid var(--zw-border); border-radius: var(--zw-border-radius-1); box-sizing: border-box; cursor: pointer; font-weight: 500; margin-left: var(--zw-space-1); margin-top: var(--zw-space-1); padding: var(--zw-space-1) var(--zw-space-2); transition: var(--zw-duration-300); white-space: nowrap; display: flex; align-items: center; column-gap: var(--zw-space-1); justify-content: center; } .tabcontainer .tab:hover { background-color: var(--zw-background-interactive-hover); background-image: var(--zw-gradient-tab-hover); } .tabcontainer .tab.active { background-color: var(--zw-background-interactive-pressed); background-image: var(--zw-gradient-tab-active); transition: none; }

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

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

.tabcontents--align-x-center { margin: 0 auto; } .tabcontents--align-x-center > .content { text-align: center; } .tabcontents--align-x-right { margin-left: auto; } .tabcontents--align-x-right > .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 > .content { align-self: center; } .tabcontents--align-y-bottom > .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 > .content, .tabcontents--fixed-height > .content { display: block; grid-row: 1; grid-column: 1; } .tabcontents--fixed-width > .content:not(.content--active), .tabcontents--fixed-height > .content:not(.content--active) { opacity: 0; z-index: -1; } .tabcontents--fixed-width:not(.tabcontents--fixed-height) > .content:not(.content--active) { height: 0; } .tabcontents--fixed-height:not(.tabcontents--fixed-width) > .content:not(.content--active) { width: 0; } /* The timeless skin sets max-width: 100% !important to make images responsive on small screens. But this breaks the "fixedHeight" option on tabs so we override it .tabcontents--fixed-height a > img { max-width: unset !important; }

.tabcontainer .tab.explain { /* See MediaWiki:Gadget-Tooltips */ text-decoration: none; float: none; }