Template:Tabs/styles.css

/* display:table allows tabs to be used next to infoboxes without wrapping beneath them */ .zw-tabs { display: table; } .zw-tabs--stretch, .zw-tabs--columns { display: block; }

/* Center-aligned galleries don't work correctly when contained in tabs. */ /* Since we're moving away from center-aligned galleries anyway, we simply disable gallery centering within tabs */ .zw-tabs .gallery.center { text-align: left; width: auto; }

.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; } .zw-tabs--stretch .tab { flex: 1 0 0; } .zw-tabs--columns .tab { flex: 1 0 100%; }

.tabcontainer .tab { /* background-color: var(--zw-bg-interactive); */ /* background-image: var(--zw-bg-toggle-gradient); */ /* 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-bg-interactive-hover); */ /* background-image: var(--zw-bg-toggle-hover-gradient); */ } .tabcontainer .tab.active { /* background-color: var(--zw-bg-interactive-pressed); */ /* background-image: var(--zw-bg-toggle-active-gradient); */ 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; visibility: hidden; 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; }