MediaWiki:CustomTabs.css: Difference between revisions
Jump to navigation
Jump to search
Salty Nori (talk | contribs) No edit summary |
Salty Nori (talk | contribs) No edit summary |
||
Line 66: | Line 66: | ||
.custom-tabs.custom-tabs-default span.inactive-tab:hover { | .custom-tabs.custom-tabs-default span.inactive-tab:hover { | ||
background: var(--gray-300); | background: var(--gray-300); | ||
text-decoration: none; | |||
} | } | ||
.custom-tabs.custom-tabs-default span.inactive-tab:hover a:not(.new) { | .custom-tabs.custom-tabs-default span.inactive-tab:hover a:not(.new) { | ||
color: var(--font-color); | color: var(--font-color); | ||
text-decoration: none; | |||
} | } |
Revision as of 06:14, 1 January 2024
.custom-tabs {
display: flex;
flex-direction: row;
gap: 5px;
width: 100%;
margin: 5px 0;
flex-wrap: wrap;
justify-content: space-evenly;
font-family: Fredoka, Rubik, sans-serif;
}
.custom-tabs > span {
border-radius: 4px;
display: flex;
align-items: center;
text-align: center;
justify-content: center;
flex: 1;
border: 1px solid var(--border-color);
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-fandommobile .custom-tabs a,
.skin-fandommobile .custom-tabs .selflink,
.skin-fandommobile .custom-tabs span.new {
font-size: 90%;
}
.custom-tabs.custom-tabs-default span.active-tab {
background-color: var(--brown-300);
}
.custom-tabs.custom-tabs-default span.active-tab strong {
color: #fff;
font-weight: 500;
}
.custom-tabs.custom-tabs-default span.active-tab a:not(.new) {
color: #fff;
}
.custom-tabs.custom-tabs-default span.inactive-tab {
background-color: var(--gray-200);
border-color: var(--border-color);
}
.custom-tabs.custom-tabs-default span.inactive-tab a:not(.new) {
color: var(--font-color);
}
.custom-tabs.custom-tabs-default span.inactive-tab:hover {
background: var(--gray-300);
text-decoration: none;
}
.custom-tabs.custom-tabs-default span.inactive-tab:hover a:not(.new) {
color: var(--font-color);
text-decoration: none;
}