MediaWiki:Citizen.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* ========================= | /* ========================= | ||
TAB BAR CONTAINER | TAB BAR CONTAINER | ||
========================= */ | ========================= */ | ||
.wt-tabs { | .wt-tabs { | ||
display: inline-flex; | display: inline-flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: 0. | gap: 0; | ||
border-bottom: 2px solid var(--color-base--subtle, #a2a9b1); | |||
margin-bottom: 1.25em; | |||
padding: 0; | |||
align-items: flex-end; | |||
} | |||
/* ========================= | |||
TAB SPANS (wrappers) | |||
========================= */ | |||
.wt-tab { | |||
display: inline-block; | |||
position: relative; | |||
margin-bottom: -2px; /* overlap container border-bottom */ | |||
} | } | ||
/* ========================= | /* ========================= | ||
TAB LINKS | TAB LINKS | ||
========================= */ | ========================= */ | ||
.wt- | .wt-tab a { | ||
display: inline-block; | display: inline-block; | ||
padding: 0.4em 0.9em; | |||
padding: 0. | |||
text-decoration: none; | text-decoration: none; | ||
color: | color: var(--color-base, #54595d); | ||
background: transparent; | background: transparent; | ||
border: | border: 2px solid transparent; | ||
border-radius: | border-bottom: none; | ||
border-radius: 4px 4px 0 0; | |||
line-height: 1. | line-height: 1.4; | ||
white-space: nowrap; | white-space: nowrap; | ||
font-size: 0.9em; | |||
transition: background 0.15s, color 0.15s; | |||
} | } | ||
/* ========================= | /* ========================= | ||
HOVER | HOVER | ||
========================= */ | ========================= */ | ||
.wt- | .wt-tab a:hover { | ||
background: rgba(54,108,204,0. | background: var(--color-surface-2, rgba(54,108,204,0.07)); | ||
color: var(--color-progressive, #36c); | |||
} | } | ||
/* ========================= | /* ========================= | ||
ACTIVE TAB | ACTIVE TAB | ||
.is-active is set by #ifeq in Template:SubTabs | |||
========================= */ | ========================= */ | ||
.wt- | .wt-tab.is-active a { | ||
. | |||
font-weight: 600; | font-weight: 600; | ||
color: var(--color-progressive, #36c); | |||
background: | background: var(--color-surface-0, #fff); | ||
border-color: var(--color-base--subtle, #a2a9b1); | |||
border-bottom-color: var(--color-surface-0, #fff); /* "cuts into" the bottom border */ | |||
} | } | ||
Revision as of 16:29, 21 April 2026
/* =========================
TAB BAR CONTAINER
========================= */
.wt-tabs {
display: inline-flex;
flex-wrap: wrap;
gap: 0;
border-bottom: 2px solid var(--color-base--subtle, #a2a9b1);
margin-bottom: 1.25em;
padding: 0;
align-items: flex-end;
}
/* =========================
TAB SPANS (wrappers)
========================= */
.wt-tab {
display: inline-block;
position: relative;
margin-bottom: -2px; /* overlap container border-bottom */
}
/* =========================
TAB LINKS
========================= */
.wt-tab a {
display: inline-block;
padding: 0.4em 0.9em;
text-decoration: none;
color: var(--color-base, #54595d);
background: transparent;
border: 2px solid transparent;
border-bottom: none;
border-radius: 4px 4px 0 0;
line-height: 1.4;
white-space: nowrap;
font-size: 0.9em;
transition: background 0.15s, color 0.15s;
}
/* =========================
HOVER
========================= */
.wt-tab a:hover {
background: var(--color-surface-2, rgba(54,108,204,0.07));
color: var(--color-progressive, #36c);
}
/* =========================
ACTIVE TAB
.is-active is set by #ifeq in Template:SubTabs
========================= */
.wt-tab.is-active a {
font-weight: 600;
color: var(--color-progressive, #36c);
background: var(--color-surface-0, #fff);
border-color: var(--color-base--subtle, #a2a9b1);
border-bottom-color: var(--color-surface-0, #fff); /* "cuts into" the bottom border */
}