MediaWiki:Gadget-Tabber.css
Jump to navigation
Jump to search
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* 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;
}