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:
/* All CSS here will be loaded for users of the Citizen skin */
/* =========================
 
  SUBTABS WRAPPER
/* === SubTabs Navigation === */
========================= */
 
.subtab-wrapper {
.subtab-wrapper {
     border-bottom: 1px solid #a2a9b1;
     border-bottom: 1px solid #a2a9b1;
     margin-bottom: 1em;
     margin-bottom: 1em;
     padding-bottom: 0.3em;
     padding-bottom: 0.25em;
}
}


/* FORCE flex even under Citizen overrides */
/* =========================
  FLEX CONTAINER FIX
========================= */
.subtab-list {
.subtab-list {
     display: flex;
     display: flex !important;
     flex-wrap: wrap;
    flex-direction: row;
     gap: 0.5rem;
     flex-wrap: wrap; /* change to nowrap if you want scroll tabs */
    list-style: none;
 
     gap: 0.4rem;
 
     margin: 0;
     margin: 0;
     padding: 0;
     padding: 0;
    list-style: none;
    align-items: center;
    /* prevents Citizen overrides */
    width: 100%;
}
}


/* Ensure items behave as inline-flex (Citizen likes to break flex children) */
/* =========================
  TAB ITEMS (CRITICAL FIX)
========================= */
.subtab-item {
.subtab-item {
     display: inline-flex !important;
     display: inline-flex !important;
     width: auto !important;
     width: auto !important;
}


.subtab-item.active {
    padding: 0.25em 0.6em;
     font-weight: bold;
 
     border-bottom: 2px solid #36c;
    border-radius: 4px;
 
     white-space: nowrap;
 
     text-decoration: none;
}
}


/* Link reset (Citizen aggressively styles links) */
/* Make MediaWiki links inside spans behave properly */
.subtab-item a {
.subtab-item a {
     text-decoration: none !important;
     text-decoration: none;
     color: #0645ad;
     color: inherit;
    padding-bottom: 2px;
    display: inline-block;
}
}


/* Hover */
/* =========================
.subtab-item a:hover {
  ACTIVE TAB
     text-decoration: underline !important;
========================= */
.subtab-item.active {
    font-weight: 600;
     border-bottom: 2px solid #36c;
}
}


/* Active tab override (VERY IMPORTANT for Citizen) */
/* =========================
.subtab-item.active a {
  OPTIONAL: HOVER EFFECT
     font-weight: 700;
========================= */
    color: #202122 !important;
.subtab-item:hover {
    border-bottom: 2px solid #202122;
     background: rgba(54, 108, 204, 0.08);
}
}


/* Base tab */
/* =========================
.subtab-base a {
  EMERGENCY OVERRIDE (Citizen safety net)
    font-weight: 700;
========================= */
}
.subtab-list > * {
 
     display: inline-flex !important;
/* Link */
    width: auto !important;
.subtab-link {
     display: inline-block;
}
}

Revision as of 16:10, 21 April 2026

/* =========================
   SUBTABS WRAPPER
========================= */
.subtab-wrapper {
    border-bottom: 1px solid #a2a9b1;
    margin-bottom: 1em;
    padding-bottom: 0.25em;
}

/* =========================
   FLEX CONTAINER FIX
========================= */
.subtab-list {
    display: flex !important;
    flex-direction: row;
    flex-wrap: wrap; /* change to nowrap if you want scroll tabs */

    gap: 0.4rem;

    margin: 0;
    padding: 0;

    list-style: none;

    align-items: center;

    /* prevents Citizen overrides */
    width: 100%;
}

/* =========================
   TAB ITEMS (CRITICAL FIX)
========================= */
.subtab-item {
    display: inline-flex !important;
    width: auto !important;

    padding: 0.25em 0.6em;

    border-radius: 4px;

    white-space: nowrap;

    text-decoration: none;
}

/* Make MediaWiki links inside spans behave properly */
.subtab-item a {
    text-decoration: none;
    color: inherit;
}

/* =========================
   ACTIVE TAB
========================= */
.subtab-item.active {
    font-weight: 600;
    border-bottom: 2px solid #36c;
}

/* =========================
   OPTIONAL: HOVER EFFECT
========================= */
.subtab-item:hover {
    background: rgba(54, 108, 204, 0.08);
}

/* =========================
   EMERGENCY OVERRIDE (Citizen safety net)
========================= */
.subtab-list > * {
    display: inline-flex !important;
    width: auto !important;
}