Contents

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →

WikiPartner (talk | contribs)

3 user groups
599 edits
No edit summary
No edit summary
Line 1,620: Line 1,620:
         width: 32px !important;
         width: 32px !important;
         height: 32px !important;
         height: 32px !important;
    }
}
/* ============================================================
  ARTICLE CONTENTS — FINAL CLEANUP
============================================================ */
/* Hide completely when article has no headings */
.wp-title-toc[hidden] {
    display: none !important;
}
/* ============================================================
  CONTENTS DROPDOWN
============================================================ */
.wp-toc-popover {
    width: 220px !important;
    margin: 0 !important;
    padding: 6px !important;
    background:
        var(--wp-surface) !important;
    color:
        var(--wp-text) !important;
    border:
        1px solid
        var(--wp-border) !important;
    border-top:
        4px solid
        var(--wp-teal) !important;
    border-radius:
        10px !important;
    box-shadow:
        var(--wp-shadow) !important;
}
/* ============================================================
  REMOVE OLD CONTENTS/TOP STYLING
============================================================ */
.wp-toc-heading,
.wp-toc-top {
    display: none !important;
}
/* ============================================================
  HEADING LIST
============================================================ */
.wp-toc-links {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 1px !important;
}
/* ============================================================
  ARTICLE HEADING LINKS
============================================================ */
.wp-toc-links > a {
    width: 100% !important;
    min-height: 37px !important;
    margin: 0 !important;
    padding:
        9px
        11px !important;
    display: flex !important;
    align-items: center !important;
    background:
        transparent !important;
    border:
        0 !important;
    border-radius:
        7px !important;
    color:
        var(--wp-text) !important;
    font-size:
        12px !important;
    font-weight:
        500 !important;
    line-height:
        1.3 !important;
    text-decoration:
        none !important;
    transition:
        background 0.15s ease,
        color 0.15s ease;
}
.wp-toc-links > a:hover {
    background:
        var(--wp-hover-bg) !important;
    color:
        var(--wp-teal-dark) !important;
}
/* ============================================================
  HEADING LEVEL INDENTATION
============================================================ */
.wp-toc-links > .wp-toc-level-2 {
    padding-left:
        11px !important;
    font-weight:
        600 !important;
}
.wp-toc-links > .wp-toc-level-3 {
    padding-left:
        24px !important;
}
.wp-toc-links > .wp-toc-level-4 {
    padding-left:
        37px !important;
    font-size:
        11.5px !important;
}
.wp-toc-links > .wp-toc-level-5 {
    padding-left:
        50px !important;
    font-size:
        11px !important;
}
.wp-toc-links > .wp-toc-level-6 {
    padding-left:
        63px !important;
    font-size:
        11px !important;
}
/* ============================================================
  ACCENT
============================================================ */
html.wp-theme-light .wp-toc-popover,
html.wp-theme-dark .wp-toc-popover {
    border-top-color:
        var(--wp-teal) !important;
}
/* ============================================================
  MOBILE
============================================================ */
@media (max-width: 700px) {
    .wp-toc-popover {
        width:
            200px !important;
     }
     }


}
}

Revision as of 00:37, 20 August 2026

/* ============================================================
   WIKIPARTNER
   GLOBAL LIGHT / DARK THEME
============================================================ */


/* ============================================================
   LIGHT THEME
============================================================ */

:root,
html.wp-theme-light {

    color-scheme: light;

    --wp-teal: #0F6B65;
    --wp-teal-dark: #09534E;
    --wp-teal-soft: #EEF6F5;

    --wp-gold: #E8A33D;
    --wp-blue: #3E7CB1;

    --wp-navy: #12233F;
    --wp-charcoal: #2B2B2B;

    --wp-text: #2B2B2B;
    --wp-muted: #6D7378;

    --wp-page-bg: #FAF9F7;

    --wp-surface: #FFFFFF;
    --wp-surface-2: #FAF7F2;
    --wp-surface-3: #F3F5F4;

    --wp-border: #DDDAD3;

    --wp-heading: #12233F;

    --wp-input-bg: #FFFFFF;

    --wp-hover-bg: #EEF6F5;

    --wp-shadow:
        0 8px 24px
        rgba(18, 35, 63, 0.08);
}


/* ============================================================
   DARK THEME
============================================================ */

html.wp-theme-dark {

    color-scheme: dark;

    --wp-teal: #70CEC3;
    --wp-teal-dark: #9BE2DA;
    --wp-teal-soft: #173431;

    --wp-gold: #E7B65E;
    --wp-blue: #83B6DF;

    --wp-navy: #EEE5D4;
    --wp-charcoal: #E2E9E7;

    --wp-text: #E2E9E7;
    --wp-muted: #A4B0AE;

    --wp-page-bg: #0C1517;

    --wp-surface: #111D20;
    --wp-surface-2: #162426;
    --wp-surface-3: #1B2B2E;

    --wp-border: #2B4144;

    --wp-heading: #F0E7D7;

    --wp-input-bg: #142225;

    --wp-hover-bg: #193633;

    --wp-shadow:
        0 12px 32px
        rgba(0, 0, 0, 0.30);
}


/* ============================================================
   PAGE
============================================================ */

html.wp-theme-light body,
html.wp-theme-dark body {

    background:
        var(--wp-page-bg) !important;

    color:
        var(--wp-text) !important;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}


/* ============================================================
   HEADER
============================================================ */

html.wp-theme-light .wp-site-header,
html.wp-theme-dark .wp-site-header {

    background:
        var(--wp-surface) !important;

    color:
        var(--wp-text) !important;

    border-color:
        var(--wp-border) !important;

    border-bottom-color:
        var(--wp-teal) !important;

    box-shadow:
        var(--wp-shadow) !important;
}


/* ============================================================
   SEARCH
============================================================ */

html.wp-theme-light .wp-search,
html.wp-theme-dark .wp-search {

    background:
        var(--wp-input-bg) !important;

    border-color:
        var(--wp-border) !important;
}


html.wp-theme-light .wp-search input,
html.wp-theme-dark .wp-search input {

    background:
        transparent !important;

    color:
        var(--wp-text) !important;
}


html.wp-theme-dark .wp-search input::placeholder {

    color:
        #879794 !important;
}


html.wp-theme-light .wp-search button,
html.wp-theme-dark .wp-search button {

    background:
        var(--wp-input-bg) !important;

    color:
        var(--wp-teal) !important;

    border-left-color:
        var(--wp-border) !important;
}


html.wp-theme-light .wp-search button:hover,
html.wp-theme-dark .wp-search button:hover {

    background:
        var(--wp-hover-bg) !important;

    color:
        var(--wp-teal-dark) !important;
}


/* ============================================================
   SEARCH AUTOCOMPLETE
============================================================ */

html.wp-theme-light .wp-search-suggestions,
html.wp-theme-dark .wp-search-suggestions {

    background:
        var(--wp-surface) !important;

    border-color:
        var(--wp-border) !important;

    box-shadow:
        var(--wp-shadow) !important;
}


html.wp-theme-light .wp-search-suggestion,
html.wp-theme-light .wp-search-suggestions a,
html.wp-theme-dark .wp-search-suggestion,
html.wp-theme-dark .wp-search-suggestions a {

    background:
        transparent !important;

    color:
        var(--wp-text) !important;
}


html.wp-theme-light .wp-search-suggestion:hover,
html.wp-theme-light .wp-search-suggestions a:hover,
html.wp-theme-light .wp-search-suggestion.is-active,

html.wp-theme-dark .wp-search-suggestion:hover,
html.wp-theme-dark .wp-search-suggestions a:hover,
html.wp-theme-dark .wp-search-suggestion.is-active {

    background:
        var(--wp-hover-bg) !important;

    color:
        var(--wp-teal) !important;
}


/* ============================================================
   MAIN WEBSITE
============================================================ */

html.wp-theme-light .wp-page,
html.wp-theme-dark .wp-page {

    background:
        var(--wp-page-bg) !important;

    color:
        var(--wp-text) !important;
}


html.wp-theme-light .wp-content,
html.wp-theme-dark .wp-content {

    background:
        transparent !important;

    color:
        var(--wp-text) !important;
}


/* ============================================================
   ARTICLE HEADER
============================================================ */

html.wp-theme-light .wp-article-header,
html.wp-theme-dark .wp-article-header {

    background:
        transparent !important;

    color:
        var(--wp-text) !important;
}


html.wp-theme-light .firstHeading,
html.wp-theme-dark .firstHeading,

html.wp-theme-light .mw-parser-output h1,
html.wp-theme-dark .mw-parser-output h1,

html.wp-theme-light .mw-parser-output h2,
html.wp-theme-dark .mw-parser-output h2,

html.wp-theme-light .mw-parser-output h3,
html.wp-theme-dark .mw-parser-output h3,

html.wp-theme-light .mw-parser-output h4,
html.wp-theme-dark .mw-parser-output h4 {

    color:
        var(--wp-heading) !important;
}


/* ============================================================
   ARTICLE BODY
============================================================ */

html.wp-theme-light .wp-article-body,
html.wp-theme-dark .wp-article-body,

html.wp-theme-light .mw-body,
html.wp-theme-dark .mw-body,

html.wp-theme-light .mw-body-content,
html.wp-theme-dark .mw-body-content,

html.wp-theme-light .mw-parser-output,
html.wp-theme-dark .mw-parser-output {

    background:
        transparent !important;

    color:
        var(--wp-text) !important;
}


/* ============================================================
   PARAGRAPHS / TEXT
============================================================ */

html.wp-theme-dark .mw-parser-output p,
html.wp-theme-dark .mw-parser-output li,
html.wp-theme-dark .mw-parser-output dd,
html.wp-theme-dark .mw-parser-output dt {

    color:
        var(--wp-text) !important;
}


/* ============================================================
   LINKS
============================================================ */

html.wp-theme-light a,
html.wp-theme-dark a {

    color:
        var(--wp-teal);
}


html.wp-theme-light a:hover,
html.wp-theme-dark a:hover {

    color:
        var(--wp-teal-dark);
}


/* ============================================================
   SIDEBARS
============================================================ */

html.wp-theme-light .wp-sidebar-box,
html.wp-theme-dark .wp-sidebar-box {

    background:
        var(--wp-surface) !important;

    color:
        var(--wp-text) !important;

    border-color:
        var(--wp-border) !important;

    box-shadow:
        var(--wp-shadow) !important;
}


html.wp-theme-light .wp-sidebar-section,
html.wp-theme-dark .wp-sidebar-section {

    border-color:
        var(--wp-border) !important;
}


html.wp-theme-light .wp-sidebar-title,
html.wp-theme-dark .wp-sidebar-title {

    color:
        var(--wp-heading) !important;
}


html.wp-theme-light .wp-sidebar-static-item,
html.wp-theme-dark .wp-sidebar-static-item {

    color:
        var(--wp-muted) !important;
}


html.wp-theme-light .wp-sidebar-highlight,
html.wp-theme-dark .wp-sidebar-highlight {

    background:
        var(--wp-surface-2) !important;
}


/* ============================================================
   CONTENTS BUTTON
============================================================ */

html.wp-theme-light .wp-toc-button,
html.wp-theme-dark .wp-toc-button {

    background:
        var(--wp-surface) !important;

    color:
        var(--wp-teal) !important;

    border-color:
        var(--wp-border) !important;
}


html.wp-theme-light .wp-toc-popover,
html.wp-theme-dark .wp-toc-popover {

    background:
        var(--wp-surface) !important;

    color:
        var(--wp-text) !important;

    border-color:
        var(--wp-border) !important;

    box-shadow:
        var(--wp-shadow) !important;
}


html.wp-theme-light .wp-toc-heading,
html.wp-theme-dark .wp-toc-heading {

    color:
        var(--wp-heading) !important;
}


/* ============================================================
   INFOBOX
============================================================ */

html.wp-theme-light .infobox,
html.wp-theme-dark .infobox {

    background:
        var(--wp-surface-2) !important;

    color:
        var(--wp-text) !important;

    border-color:
        var(--wp-border) !important;
}


html.wp-theme-light .infobox th,
html.wp-theme-dark .infobox th {

    background:
        var(--wp-hover-bg) !important;

    color:
        var(--wp-heading) !important;
}


html.wp-theme-light .infobox td,
html.wp-theme-dark .infobox td {

    color:
        var(--wp-text) !important;

    border-color:
        var(--wp-border) !important;
}


/* ============================================================
   TABLES
============================================================ */

html.wp-theme-dark .mw-parser-output table {

    color:
        var(--wp-text) !important;

    border-color:
        var(--wp-border) !important;
}


html.wp-theme-dark .mw-parser-output table th {

    background:
        var(--wp-surface-3) !important;

    color:
        var(--wp-heading) !important;

    border-color:
        var(--wp-border) !important;
}


html.wp-theme-dark .mw-parser-output table td {

    background:
        var(--wp-surface) !important;

    color:
        var(--wp-text) !important;

    border-color:
        var(--wp-border) !important;
}


/* ============================================================
   MEDIAWIKI FORMS
============================================================ */

html.wp-theme-dark input,
html.wp-theme-dark textarea,
html.wp-theme-dark select {

    background:
        var(--wp-input-bg) !important;

    color:
        var(--wp-text) !important;

    border-color:
        var(--wp-border) !important;
}


/* ============================================================
   CODE
============================================================ */

html.wp-theme-dark pre,
html.wp-theme-dark code,
html.wp-theme-dark .mw-code {

    background:
        #142225 !important;

    color:
        #E4ECEA !important;

    border-color:
        var(--wp-border) !important;
}


/* ============================================================
   USER AREA
============================================================ */

.wp-user-area {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 7px;
}


/* ============================================================
   USERNAME
============================================================ */

.wp-user-primary {

    margin: 0;
    padding: 0;

    display: flex;

    align-items: center;

    list-style: none;
}


.wp-user-primary.is-empty {

    display: none;
}


.wp-user-primary > li {

    margin: 0;
    padding: 0;

    list-style: none;
}


.wp-user-primary > li > a {

    min-height: 34px;

    padding:
        8px
        11px;

    display: inline-flex;

    align-items: center;

    border-radius: 7px;

    color:
        var(--wp-teal) !important;

    font-size: 12px;

    font-weight: 700;

    text-decoration: none !important;
}


.wp-user-primary > li > a:hover {

    background:
        var(--wp-hover-bg) !important;

    color:
        var(--wp-teal-dark) !important;
}


/* ============================================================
   USER MENU TOP LEVEL
============================================================ */

.wp-user-menu-list {

    margin: 0;
    padding: 0;

    display: flex;

    align-items: center;

    gap: 7px;

    list-style: none;
}


.wp-user-menu-list > li {

    margin: 0;
    padding: 0;

    list-style: none;
}


/* ============================================================
   LOGGED-OUT LINKS
============================================================ */

.wp-user-menu-list.wp-is-logged-out > li > a {

    min-height: 34px;

    padding:
        8px
        11px;

    display: inline-flex;

    align-items: center;

    border:
        1px solid
        var(--wp-border);

    border-radius: 7px;

    background:
        var(--wp-surface-2);

    color:
        var(--wp-teal) !important;

    font-size: 12px;

    font-weight: 600;

    text-decoration: none !important;
}


.wp-user-menu-list.wp-is-logged-out > li > a:hover {

    background:
        var(--wp-hover-bg);

    color:
        var(--wp-teal-dark) !important;
}


/* ============================================================
   THEME BUTTON
============================================================ */

.wikipartner-theme-item {

    margin: 0 !important;
    padding: 0 !important;

    display: flex;

    align-items: center;

    list-style: none !important;
}


.wikipartner-theme-toggle {

    width: 35px;
    height: 35px;

    margin: 0;
    padding: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    flex: 0 0 35px;

    cursor: pointer;

    appearance: none;

    background:
        var(--wp-surface-2) !important;

    color:
        var(--wp-teal) !important;

    border:
        1px solid
        var(--wp-border) !important;

    border-radius: 50%;

    box-shadow: none !important;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease,
        transform 0.15s ease;
}


.wikipartner-theme-toggle:hover {

    background:
        var(--wp-hover-bg) !important;

    color:
        var(--wp-teal-dark) !important;

    transform:
        rotate(-7deg);
}


.wp-theme-icon {

    width: 18px;
    height: 18px;

    display: flex;

    align-items: center;
    justify-content: center;
}


.wp-theme-icon svg {

    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;
}


/* ============================================================
   HAMBURGER
============================================================ */

.wp-user-dropdown {

    position: relative;

    margin: 0 !important;
    padding: 0 !important;

    list-style: none !important;
}


.wp-user-menu-trigger {

    width: 35px;
    height: 35px;

    margin: 0;
    padding: 0;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    cursor: pointer;

    appearance: none;

    background:
        var(--wp-surface-2) !important;

    color:
        var(--wp-teal) !important;

    border:
        1px solid
        var(--wp-border) !important;

    border-radius: 8px;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease;
}


.wp-user-menu-trigger:hover {

    background:
        var(--wp-hover-bg) !important;

    color:
        var(--wp-teal-dark) !important;
}


/* ============================================================
   HAMBURGER LINES
============================================================ */

.wp-menu-bars {

    width: 17px;
    height: 14px;

    display: flex;

    flex-direction: column;

    justify-content: space-between;
}


.wp-menu-bars > span {

    width: 100%;
    height: 2px;

    display: block;

    background:
        currentColor;

    border-radius: 999px;
}


/* ============================================================
   HAMBURGER DROPDOWN
============================================================ */

.wp-user-dropdown-menu {

    position: absolute;

    top:
        calc(100% + 10px);

    right: 0;

    z-index: 9999;

    width: 220px;

    margin: 0;

    padding: 6px;

    list-style: none;

    background:
        var(--wp-surface) !important;

    color:
        var(--wp-text) !important;

    border:
        1px solid
        var(--wp-border) !important;

    border-radius: 10px;

    box-shadow:
        var(--wp-shadow) !important;
}


.wp-user-dropdown-menu[hidden] {

    display: none !important;
}


.wp-user-dropdown-menu > li {

    width: 100%;

    margin: 0 !important;

    padding: 0 !important;

    display: block;

    list-style: none !important;
}


.wp-user-dropdown-menu > li > a {

    width: 100%;

    min-height: 38px;

    padding:
        9px
        11px;

    display: flex;

    align-items: center;

    background:
        transparent !important;

    color:
        var(--wp-text) !important;

    border: 0 !important;

    border-radius: 7px;

    font-size: 12px;

    font-weight: 500;

    text-decoration: none !important;
}


.wp-user-dropdown-menu > li > a:hover {

    background:
        var(--wp-hover-bg) !important;

    color:
        var(--wp-teal-dark) !important;
}


.wp-user-dropdown-menu #pt-logout > a {

    margin-top: 4px;

    border-top:
        1px solid
        var(--wp-border) !important;
}


/* ============================================================
   FOOTER
============================================================ */

html.wp-theme-light .wp-footer,
html.wp-theme-dark .wp-footer {

    background:
        var(--wp-surface) !important;

    color:
        var(--wp-muted) !important;

    border-color:
        var(--wp-border) !important;
}


html.wp-theme-light .wp-footer-inner,
html.wp-theme-dark .wp-footer-inner {

    color:
        var(--wp-muted) !important;
}


html.wp-theme-light .wp-footer a,
html.wp-theme-dark .wp-footer a {

    color:
        var(--wp-teal) !important;
}


html.wp-theme-light .wp-social-icon,
html.wp-theme-dark .wp-social-icon {

    background:
        var(--wp-surface-2) !important;

    color:
        var(--wp-teal) !important;

    border-color:
        var(--wp-border) !important;
}


/* ============================================================
   COMMON HOMEPAGE / COMPONENT SURFACES
============================================================ */

/*
   These selectors intentionally cover WikiPartner components
   that may still have hard-coded white backgrounds in the
   skin's homepage.css/components.css files.
*/

html.wp-theme-dark
[class*="wp-card"],

html.wp-theme-dark
[class*="wp-box"],

html.wp-theme-dark
[class*="wp-panel"],

html.wp-theme-dark
[class*="wp-section-card"],

html.wp-theme-dark
[class*="wp-feature"] {

    background-color:
        var(--wp-surface) !important;

    color:
        var(--wp-text) !important;

    border-color:
        var(--wp-border) !important;
}


html.wp-theme-dark
[class*="wp-card"] h1,

html.wp-theme-dark
[class*="wp-card"] h2,

html.wp-theme-dark
[class*="wp-card"] h3,

html.wp-theme-dark
[class*="wp-box"] h1,

html.wp-theme-dark
[class*="wp-box"] h2,

html.wp-theme-dark
[class*="wp-box"] h3 {

    color:
        var(--wp-heading) !important;
}


/* ============================================================
   MEDIAWIKI NOTICES
============================================================ */

html.wp-theme-dark .mw-message-box,
html.wp-theme-dark .warningbox,
html.wp-theme-dark .errorbox,
html.wp-theme-dark .successbox {

    color:
        var(--wp-text) !important;

    border-color:
        var(--wp-border) !important;
}


/* ============================================================
   SELECTION
============================================================ */

html.wp-theme-dark ::selection {

    background:
        #24514C;

    color:
        #FFFFFF;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .wp-user-dropdown-menu {

        width: 200px;
    }


    .wikipartner-theme-toggle,
    .wp-user-menu-trigger {

        width: 32px;
        height: 32px;

        flex-basis: 32px;
    }


    .wp-theme-icon,
    .wp-theme-icon svg {

        width: 16px;
        height: 16px;
    }
}

/* ============================================================
   WIKIPARTNER
   RESTORE SIDEBAR CARD SEPARATION + FOOTER ACCENT
============================================================ */


/* ============================================================
   SIDEBAR OUTER WRAPPER
   Must stay transparent so gaps between cards remain visible.
============================================================ */

html.wp-theme-light .wp-sidebar-box,
html.wp-theme-dark .wp-sidebar-box {
    background: transparent !important;

    border: 0 !important;

    box-shadow: none !important;
}


/* ============================================================
   INDIVIDUAL SIDEBAR CARDS
============================================================ */

html.wp-theme-light .wp-sidebar-section,
html.wp-theme-dark .wp-sidebar-section {
    background: var(--wp-surface) !important;

    color: var(--wp-text) !important;

    border-color: var(--wp-border) !important;

    box-shadow:
        0 7px 18px
        rgba(18, 35, 63, 0.055) !important;
}


/* Keep proper separation between every card */

.wp-sidebar-section + .wp-sidebar-section {
    margin-top: 16px !important;
}


/* ============================================================
   LEFT SIDEBAR — TEAL ACCENT
============================================================ */

html.wp-theme-light
.wp-left-sidebar
.wp-sidebar-section,

html.wp-theme-dark
.wp-left-sidebar
.wp-sidebar-section {
    border-top-color: var(--wp-teal) !important;
}


/* ============================================================
   RIGHT SIDEBAR — GOLD ACCENT
============================================================ */

html.wp-theme-light
.wp-right-sidebar
.wp-sidebar-section,

html.wp-theme-dark
.wp-right-sidebar
.wp-sidebar-section {
    border-top-color: var(--wp-gold) !important;
}


/* ============================================================
   FOOTER
   Restore WikiPartner teal top accent.
============================================================ */

html.wp-theme-light .wp-footer,
html.wp-theme-dark .wp-footer {
    border-top:
        4px solid
        var(--wp-teal) !important;
}


/* ============================================================
   LIGHT MODE PAGE BACKGROUND
   Keeps visible warm gaps around white sidebar cards.
============================================================ */

html.wp-theme-light body,
html.wp-theme-light .wp-page {
    background:
        #FAF7F2 !important;
}


/* ============================================================
   DARK MODE PAGE BACKGROUND
============================================================ */

html.wp-theme-dark body,
html.wp-theme-dark .wp-page {
    background:
        var(--wp-page-bg) !important;
}


/* ============================================================
   DARK MODE SIDEBAR SHADOW
============================================================ */

html.wp-theme-dark
.wp-sidebar-section {
    box-shadow:
        0 8px 22px
        rgba(0, 0, 0, 0.22) !important;
}

/* ============================================================
   USER DROPDOWN — WIKIPARTNER ACCENT
============================================================ */

.wp-user-dropdown-menu {
    border-top:
        4px solid
        var(--wp-teal) !important;

    border-radius:
        10px !important;
}


/* ============================================================
   REMOVE DIVIDER ABOVE LOG OUT
============================================================ */

.wp-user-dropdown-menu #pt-logout > a {
    border-top:
        0 !important;

    margin-top:
        0 !important;
}

/* ============================================================
   ARTICLE CONTENTS DROPDOWN
   Match WikiPartner user hamburger menu
============================================================ */


/* ============================================================
   CONTENTS DROPDOWN BOX
============================================================ */

.wp-toc-popover {
    width: 220px !important;

    margin: 0 !important;
    padding: 6px !important;

    background:
        var(--wp-surface) !important;

    color:
        var(--wp-text) !important;

    border:
        1px solid
        var(--wp-border) !important;

    border-top:
        4px solid
        var(--wp-teal) !important;

    border-radius:
        10px !important;

    box-shadow:
        var(--wp-shadow) !important;
}


/* ============================================================
   CONTENTS HEADING
============================================================ */

.wp-toc-heading {
    margin: 0 !important;

    padding:
        9px
        11px !important;

    color:
        var(--wp-heading) !important;

    font-size: 12px !important;

    font-weight: 700 !important;

    line-height: 1.25 !important;
}


/* ============================================================
   CONTENTS LINKS WRAPPER
============================================================ */

.wp-toc-links {
    display: flex !important;

    flex-direction: column !important;

    gap: 1px !important;

    margin: 0 !important;
    padding: 0 !important;
}


/* ============================================================
   CONTENTS LINKS
============================================================ */

.wp-toc-links > a {
    width: 100% !important;

    min-height: 38px !important;

    margin: 0 !important;

    padding:
        9px
        11px !important;

    display: flex !important;

    align-items: center !important;

    background:
        transparent !important;

    color:
        var(--wp-text) !important;

    border: 0 !important;

    border-radius:
        7px !important;

    font-size:
        12px !important;

    font-weight:
        500 !important;

    line-height:
        1.25 !important;

    text-decoration:
        none !important;

    transition:
        background 0.15s ease,
        color 0.15s ease !important;
}


/* ============================================================
   CONTENTS LINK HOVER
============================================================ */

.wp-toc-links > a:hover {
    background:
        var(--wp-hover-bg) !important;

    color:
        var(--wp-teal-dark) !important;

    text-decoration:
        none !important;
}


/* ============================================================
   "(TOP)" LINK
============================================================ */

.wp-toc-links > .wp-toc-top {
    color:
        var(--wp-teal) !important;

    font-weight:
        600 !important;
}


/* ============================================================
   NESTED CONTENTS LEVELS
============================================================ */

.wp-toc-links .wp-toc-level-2 {
    padding-left:
        20px !important;
}


.wp-toc-links .wp-toc-level-3 {
    padding-left:
        30px !important;

    font-size:
        11.5px !important;
}


.wp-toc-links .wp-toc-level-4 {
    padding-left:
        40px !important;

    font-size:
        11px !important;
}


/* ============================================================
   CONTENTS HAMBURGER BUTTON
   Match user hamburger button
============================================================ */

.wp-toc-button {
    width: 35px !important;
    height: 35px !important;

    margin: 0 !important;
    padding: 0 !important;

    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    cursor: pointer !important;

    background:
        var(--wp-surface-2) !important;

    color:
        var(--wp-teal) !important;

    border:
        1px solid
        var(--wp-border) !important;

    border-radius:
        8px !important;

    transition:
        background 0.15s ease,
        color 0.15s ease,
        border-color 0.15s ease !important;
}


.wp-toc-button:hover {
    background:
        var(--wp-hover-bg) !important;

    color:
        var(--wp-teal-dark) !important;
}


/* ============================================================
   CONTENTS HAMBURGER LINES
============================================================ */

.wp-toc-icon {
    width: 17px !important;
    height: 14px !important;

    display: flex !important;

    flex-direction: column !important;

    justify-content: space-between !important;
}


.wp-toc-icon > span {
    width: 100% !important;
    height: 2px !important;

    display: block !important;

    background:
        currentColor !important;

    border-radius:
        999px !important;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .wp-toc-popover {
        width: 200px !important;
    }


    .wp-toc-button {
        width: 32px !important;
        height: 32px !important;
    }

}

/* ============================================================
   ARTICLE CONTENTS — FINAL CLEANUP
============================================================ */


/* Hide completely when article has no headings */

.wp-title-toc[hidden] {
    display: none !important;
}


/* ============================================================
   CONTENTS DROPDOWN
============================================================ */

.wp-toc-popover {
    width: 220px !important;

    margin: 0 !important;
    padding: 6px !important;

    background:
        var(--wp-surface) !important;

    color:
        var(--wp-text) !important;

    border:
        1px solid
        var(--wp-border) !important;

    border-top:
        4px solid
        var(--wp-teal) !important;

    border-radius:
        10px !important;

    box-shadow:
        var(--wp-shadow) !important;
}


/* ============================================================
   REMOVE OLD CONTENTS/TOP STYLING
============================================================ */

.wp-toc-heading,
.wp-toc-top {
    display: none !important;
}


/* ============================================================
   HEADING LIST
============================================================ */

.wp-toc-links {
    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    display: flex !important;

    flex-direction: column !important;

    gap: 1px !important;
}


/* ============================================================
   ARTICLE HEADING LINKS
============================================================ */

.wp-toc-links > a {
    width: 100% !important;

    min-height: 37px !important;

    margin: 0 !important;

    padding:
        9px
        11px !important;

    display: flex !important;

    align-items: center !important;

    background:
        transparent !important;

    border:
        0 !important;

    border-radius:
        7px !important;

    color:
        var(--wp-text) !important;

    font-size:
        12px !important;

    font-weight:
        500 !important;

    line-height:
        1.3 !important;

    text-decoration:
        none !important;

    transition:
        background 0.15s ease,
        color 0.15s ease;
}


.wp-toc-links > a:hover {
    background:
        var(--wp-hover-bg) !important;

    color:
        var(--wp-teal-dark) !important;
}


/* ============================================================
   HEADING LEVEL INDENTATION
============================================================ */

.wp-toc-links > .wp-toc-level-2 {
    padding-left:
        11px !important;

    font-weight:
        600 !important;
}


.wp-toc-links > .wp-toc-level-3 {
    padding-left:
        24px !important;
}


.wp-toc-links > .wp-toc-level-4 {
    padding-left:
        37px !important;

    font-size:
        11.5px !important;
}


.wp-toc-links > .wp-toc-level-5 {
    padding-left:
        50px !important;

    font-size:
        11px !important;
}


.wp-toc-links > .wp-toc-level-6 {
    padding-left:
        63px !important;

    font-size:
        11px !important;
}


/* ============================================================
   ACCENT
============================================================ */

html.wp-theme-light .wp-toc-popover,
html.wp-theme-dark .wp-toc-popover {
    border-top-color:
        var(--wp-teal) !important;
}


/* ============================================================
   MOBILE
============================================================ */

@media (max-width: 700px) {

    .wp-toc-popover {
        width:
            200px !important;
    }

}
Retrieved from "https://en.wikipartner.org/index.php?title=MediaWiki:Common.css&oldid=121"