MediaWiki:CustomTabs.css: Difference between revisions
Jump to navigation
Jump to search
Salty Nori (talk | contribs) (Created page with ".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; w...") |
Salty Nori (talk | contribs) No edit summary |
||
(4 intermediate revisions by the same user not shown) | |||
Line 8: | Line 8: | ||
justify-content: space-evenly; | justify-content: space-evenly; | ||
font-family: Fredoka, Rubik, sans-serif; | font-family: Fredoka, Rubik, sans-serif; | ||
font-weight: 800; | |||
} | } | ||
Line 26: | Line 27: | ||
padding: 8px 10px; | padding: 8px 10px; | ||
width: 100%; | width: 100%; | ||
text-decoration: none; | |||
} | } | ||
Line 47: | Line 49: | ||
.custom-tabs.custom-tabs-default span.active-tab strong { | .custom-tabs.custom-tabs-default span.active-tab strong { | ||
color: | color: var(--font-color); | ||
font-weight: 500; | font-weight: 500; | ||
} | } | ||
.custom-tabs.custom-tabs-default span.active-tab a:not(.new) { | .custom-tabs.custom-tabs-default span.active-tab a:not(.new) { | ||
color: | color: var(--font-color); | ||
} | } | ||
Line 69: | Line 71: | ||
.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(-- | color: var(--font-color); | ||
} | } |
Latest revision as of 06:17, 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;
font-weight: 800;
}
.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%;
text-decoration: none;
}
/* 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: var(--font-color);
font-weight: 500;
}
.custom-tabs.custom-tabs-default span.active-tab a:not(.new) {
color: var(--font-color);
}
.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);
}
.custom-tabs.custom-tabs-default span.inactive-tab:hover a:not(.new) {
color: var(--font-color);
}