Toggle menu
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
No edit summary
No edit summary
Line 1: Line 1:
/* =========================
/* =========================
   TAB BAR CONTAINER
   TAB BAR CONTAINER
========================= */
========================= */
.wt-tabs {
.wt-tabs {
     display: inline-flex;         /* safer than flex in Citizen */
     display: inline-flex;
     flex-wrap: wrap;
     flex-wrap: wrap;
     gap: 0.4rem;
     gap: 0;
    border-bottom: 2px solid var(--color-base--subtle, #a2a9b1);
    margin-bottom: 1.25em;
    padding: 0;
    align-items: flex-end;
}


     border-bottom: 1px solid #a2a9b1;
/* =========================
     margin-bottom: 1em;
  TAB SPANS (wrappers)
     padding-bottom: 0.25em;
========================= */
 
.wt-tab {
    align-items: center;
     display: inline-block;
     position: relative;
     margin-bottom: -2px; /* overlap container border-bottom */
}
}


/* =========================
/* =========================
   TAB LINKS (CRITICAL)
   TAB LINKS
  avoids Citizen card styling
========================= */
========================= */
.wt-tabs a {
.wt-tab a {
     display: inline-block;
     display: inline-block;
 
     padding: 0.4em 0.9em;
     padding: 0.35em 0.75em;
 
     text-decoration: none;
     text-decoration: none;
     color: inherit;
     color: var(--color-base, #54595d);
 
     background: transparent;
     background: transparent;
     border: 1px solid transparent;
     border: 2px solid transparent;
     border-radius: 6px;
    border-bottom: none;
 
     border-radius: 4px 4px 0 0;
     line-height: 1.2;
     line-height: 1.4;
 
     white-space: nowrap;
     white-space: nowrap;
    font-size: 0.9em;
    transition: background 0.15s, color 0.15s;
}
}


/* =========================
/* =========================
   HOVER STATE
   HOVER
========================= */
========================= */
.wt-tabs a:hover {
.wt-tab a:hover {
     background: rgba(54,108,204,0.10);
     background: var(--color-surface-2, rgba(54,108,204,0.07));
     border-color: rgba(54,108,204,0.25);
     color: var(--color-progressive, #36c);
}
}


/* =========================
/* =========================
   ACTIVE TAB (simple + safe)
   ACTIVE TAB
  .is-active is set by #ifeq in Template:SubTabs
========================= */
========================= */
.wt-tabs a[aria-current="page"],
.wt-tab.is-active a {
.wt-tabs a.active {
     font-weight: 600;
     font-weight: 600;
     border-bottom: 2px solid #36c;
     color: var(--color-progressive, #36c);
     background: rgba(54,108,204,0.08);
     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 */
}