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:


/* container */
/* =========================
  TAB BAR CONTAINER
========================= */
.wt-tabs {
.wt-tabs {
     display: flex !important;
     display: inline-flex;         /* safer than flex in Citizen */
     flex-wrap: wrap;
     flex-wrap: wrap;
     gap: 0.5rem;
     gap: 0.4rem;


     border-bottom: 1px solid #a2a9b1;
     border-bottom: 1px solid #a2a9b1;
     margin-bottom: 1em;
     margin-bottom: 1em;
     padding-bottom: 0.25em;
     padding-bottom: 0.25em;
    align-items: center;
}
}


/* THIS is the real fix for "blue boxes" */
/* =========================
  TAB LINKS (CRITICAL)
  avoids Citizen card styling
========================= */
.wt-tabs a {
.wt-tabs a {
     background: transparent !important;
     display: inline-block;
    box-shadow: none !important;
 
     border: none !important;
     padding: 0.35em 0.75em;


     padding: 0 !important;
     text-decoration: none;
     margin: 0 !important;
     color: inherit;


     text-decoration: none !important;
     background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;


     color: inherit !important;
     line-height: 1.2;
}


/* optional hover */
     white-space: nowrap;
.wt-tabs a:hover {
    background: rgba(54,108,204,0.08) !important;
     border-radius: 4px;
}
}


/* =========================
/* =========================
   FORCE FLEX ROW (Citizen-proof)
   HOVER STATE
========================= */
========================= */
.mw-parser-output .wt-tabs {
.wt-tabs a:hover {
     display: flex !important;
     background: rgba(54,108,204,0.10);
    flex-direction: row !important;
     border-color: rgba(54,108,204,0.25);
    flex-wrap: wrap !important;
 
    gap: 0.5rem !important;
 
     align-items: center !important;
 
    margin-bottom: 1em;
    padding-bottom: 0.25em;
 
    border-bottom: 1px solid #a2a9b1;
}
}


/* =========================
/* =========================
   FORCE INLINE LINKS (CRITICAL)
   ACTIVE TAB (simple + safe)
========================= */
========================= */
.mw-parser-output .wt-tabs a {
.wt-tabs a[aria-current="page"],
     display: inline-block !important;
.wt-tabs a.active {
 
     font-weight: 600;
    padding: 0.25em 0.6em !important;
     border-bottom: 2px solid #36c;
 
     background: rgba(54,108,204,0.08);
    text-decoration: none !important;
 
    background: transparent !important;
    box-shadow: none !important;
     border: none !important;
 
    white-space: nowrap !important;
 
    color: inherit !important;
}
 
/* hover */
.mw-parser-output .wt-tabs a:hover {
     background: rgba(54,108,204,0.08) !important;
    border-radius: 4px;
}
}

Revision as of 16:25, 21 April 2026

/* =========================
   TAB BAR CONTAINER
========================= */
.wt-tabs {
    display: inline-flex;          /* safer than flex in Citizen */
    flex-wrap: wrap;
    gap: 0.4rem;

    border-bottom: 1px solid #a2a9b1;
    margin-bottom: 1em;
    padding-bottom: 0.25em;

    align-items: center;
}

/* =========================
   TAB LINKS (CRITICAL)
   avoids Citizen card styling
========================= */
.wt-tabs a {
    display: inline-block;

    padding: 0.35em 0.75em;

    text-decoration: none;
    color: inherit;

    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;

    line-height: 1.2;

    white-space: nowrap;
}

/* =========================
   HOVER STATE
========================= */
.wt-tabs a:hover {
    background: rgba(54,108,204,0.10);
    border-color: rgba(54,108,204,0.25);
}

/* =========================
   ACTIVE TAB (simple + safe)
========================= */
.wt-tabs a[aria-current="page"],
.wt-tabs a.active {
    font-weight: 600;
    border-bottom: 2px solid #36c;
    background: rgba(54,108,204,0.08);
}