MediaWiki:CustomTabs.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.
.custom-tabs {
display: flex;
flex-direction: row;
gap: 5px;
width: 100%;
margin: 5px 0;
flex-wrap: wrap;
justify-content: space-evenly;
}
.custom-tabs > span {
border-radius: 4px;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
flex: 1;
border: 1px solid var(--theme-tab-active-border);
transition: 0.3s;
}
.custom-tabs a,
.custom-tabs .selflink,
.custom-tabs span.new {
padding: 8px 10px;
width: 100%;
}
/* Mobile 2 column format */
.skin-fandommobile div.custom-tabs {
display: grid;
grid-template-columns: repeat(2, 50%);
grid-auto-flow: row;
flex-wrap: wrap;
}
.skin-mobile .custom-tabs a,
.skin-mobile .custom-tabs .selflink,
.skin-mobile .custom-tabs span.new {
font-size: 90%;
}
.custom-tabs.custom-tabs-default span.active-tab {
background-color: var(--theme-tab-active-bg);
}
.custom-tabs.custom-tabs-default span.active-tab strong {
color: var(--theme-tab-text-color);
font-weight: 500;
}
.custom-tabs.custom-tabs-default span.active-tab a:not(.new) {
color: var(--theme-tab-text-color);
}
.custom-tabs.custom-tabs-default span.inactive-tab {
background-color: var(--theme-tab-inactive-bg);
border-color: var(--theme-tab-inactive-border);
}
.custom-tabs.custom-tabs-default span.inactive-tab a:not(.new) {
color: var(--theme-text-color);
}
.custom-tabs.custom-tabs-default span.inactive-tab:hover {
background: var(--theme-tab-active-bg);
color: var(--theme-tab-text-color);
}
.custom-tabs.custom-tabs-default span.inactive-tab:hover a:not(.new) {
color: var(--custom-tabs-active-color);
}