MediaWiki:Common.css: Difference between revisions

Revision as of 23:55, 19 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;
    }
}

@@ Line 1: / Line 1: @@
 /* ============================================================
     WIKIPARTNER
-    LOGGED-IN HAMBURGER USER MENU
+    GLOBAL LIGHT / DARK THEME
 ============================================================ */
 /* ============================================================
-    LOGGED-IN TOP LEVEL
+    LIGHT THEME
 ============================================================ */
-.wp-user-menu-list.wp-is-logged-in {
+:root,
-     position: relative;
+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;
-     display: flex;
+     --wp-border: #DDDAD3;
-     align-items: center;
+     --wp-heading: #12233F;
-     justify-content: flex-end;
+     --wp-input-bg: #FFFFFF;
-     gap: 8px;
+     --wp-hover-bg: #EEF6F5;
-     flex-wrap: nowrap;
+     --wp-shadow:
+8px 24px
+        rgba(18, 35, 63, 0.08);
 }
-/* Username remains visible */
+/* ============================================================
+   DARK THEME
+============================================================ */
-.wp-user-menu-list.wp-is-logged-in > #pt-userpage {
+html.wp-theme-dark {
-    display: flex;
-     align-items: center;
+     color-scheme: dark;
-}
+    --wp-teal: #70CEC3;
+    --wp-teal-dark: #9BE2DA;
+    --wp-teal-soft: #173431;
-.wp-user-menu-list.wp-is-logged-in > #pt-userpage > a {
+    --wp-gold: #E7B65E;
-     min-height: 34px;
+     --wp-blue: #83B6DF;
-     padding:
+     --wp-navy: #EEE5D4;
-px
+    --wp-charcoal: #E2E9E7;
-px;
-     display: inline-flex;
+     --wp-text: #E2E9E7;
+    --wp-muted: #A4B0AE;
-     align-items: center;
+     --wp-page-bg: #0C1517;
-     background: transparent;
+     --wp-surface: #111D20;
+    --wp-surface-2: #162426;
+    --wp-surface-3: #1B2B2E;
-     border: 0;
+     --wp-border: #2B4144;
-     color: var(--wp-teal);
+     --wp-heading: #F0E7D7;
-     font-size: 12px;
+     --wp-input-bg: #142225;
-     font-weight: 700;
+     --wp-hover-bg: #193633;
-     text-decoration: none !important;
+     --wp-shadow:
+12px 32px
+        rgba(0, 0, 0, 0.30);
 }
-.wp-user-menu-list.wp-is-logged-in > #pt-userpage > a:hover {
+/* ============================================================
+   PAGE
+============================================================ */
+html.wp-theme-light body,
+html.wp-theme-dark body {
      background:
-         var(--wp-teal-soft);
+         var(--wp-page-bg) !important;
+    color:
+        var(--wp-text) !important;
+    transition:
+        background-color 0.2s ease,
+        color 0.2s ease;
+}
+/* ============================================================
+   HEADER
+============================================================ */
-     border-radius: 7px;
+html.wp-theme-light .wp-site-header,
+html.wp-theme-dark .wp-site-header {
+     background:
+        var(--wp-surface) !important;
      color:
-         var(--wp-teal-dark);
+        var(--wp-text) !important;
+    border-color:
+        var(--wp-border) !important;
+    border-bottom-color:
+         var(--wp-teal) !important;
+    box-shadow:
+        var(--wp-shadow) !important;
 }
 /* ============================================================
-    DROPDOWN WRAPPER
+    SEARCH
 ============================================================ */
-.wp-user-dropdown {
+html.wp-theme-light .wp-search,
-     position: relative;
+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;
+}
-    margin: 0 !important;
-    padding: 0 !important;
-    display: flex;
+html.wp-theme-light .wp-search button:hover,
+html.wp-theme-dark .wp-search button:hover {
-     align-items: center;
+     background:
+        var(--wp-hover-bg) !important;
-     list-style: none !important;
+     color:
+        var(--wp-teal-dark) !important;
 }
 /* ============================================================
-    HAMBURGER BUTTON
+    SEARCH AUTOCOMPLETE
 ============================================================ */
-.wp-user-menu-trigger {
+html.wp-theme-light .wp-search-suggestions,
-     width: 36px;
+html.wp-theme-dark .wp-search-suggestions {
-     height: 36px;
+    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 {
-     margin: 0;
+     background:
-    padding: 0;
+        transparent !important;
-     display: inline-flex;
+     color:
+        var(--wp-text) !important;
+}
-    align-items: center;
-    justify-content: center;
-    appearance: none;
+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,
-    cursor: pointer;
+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-teal-soft);
+        var(--wp-hover-bg) !important;
+    color:
+         var(--wp-teal) !important;
+}
+/* ============================================================
+   MAIN WEBSITE
+============================================================ */
-    border:
+html.wp-theme-light .wp-page,
-px solid
+html.wp-theme-dark .wp-page {
-        #CEE0DB;
-     border-radius: 8px;
+     background:
+        var(--wp-page-bg) !important;
      color:
-         var(--wp-teal);
+         var(--wp-text) !important;
+}
+html.wp-theme-light .wp-content,
+html.wp-theme-dark .wp-content {
+    background:
+        transparent !important;
-     transition:
+     color:
-         background 0.15s ease,
+         var(--wp-text) !important;
-        color 0.15s ease,
-        border-color 0.15s ease,
-        transform 0.15s ease;
 }
-.wp-user-menu-trigger:hover {
+/* ============================================================
+   ARTICLE HEADER
+============================================================ */
+html.wp-theme-light .wp-article-header,
+html.wp-theme-dark .wp-article-header {
      background:
-         #E5F1EE;
+         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,
-    border-color:
+html.wp-theme-light .mw-parser-output h4,
-        #B7D3CC;
+html.wp-theme-dark .mw-parser-output h4 {
      color:
-         var(--wp-teal-dark);
+         var(--wp-heading) !important;
 }
-.wp-user-menu-trigger:active {
+/* ============================================================
-     transform:
+   ARTICLE BODY
-         scale(0.95);
+============================================================ */
+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;
 }
-.wp-user-menu-trigger:focus-visible {
+/* ============================================================
-    outline:
+   PARAGRAPHS / TEXT
-px solid
+============================================================ */
-        var(--wp-gold);
+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 {
-     outline-offset: 2px;
+     color:
+        var(--wp-text) !important;
 }
 /* ============================================================
-    THREE HORIZONTAL LINES
+    LINKS
 ============================================================ */
-.wp-menu-bars {
+html.wp-theme-light a,
-     width: 17px;
+html.wp-theme-dark a {
-    height: 14px;
+     color:
+        var(--wp-teal);
+}
-    display: flex;
-    flex-direction: column;
+html.wp-theme-light a:hover,
+html.wp-theme-dark a:hover {
-     justify-content: space-between;
+     color:
+        var(--wp-teal-dark);
 }
-.wp-menu-bars > span {
+/* ============================================================
-    width: 100%;
+   SIDEBARS
-    height: 2px;
+============================================================ */
-    display: block;
+html.wp-theme-light .wp-sidebar-box,
+html.wp-theme-dark .wp-sidebar-box {
      background:
-         currentColor;
+         var(--wp-surface) !important;
+    color:
+        var(--wp-text) !important;
+    border-color:
+        var(--wp-border) !important;
+    box-shadow:
+        var(--wp-shadow) !important;
+}
-    border-radius: 999px;
+html.wp-theme-light .wp-sidebar-section,
+html.wp-theme-dark .wp-sidebar-section {
-     transition:
+     border-color:
-         transform 0.18s ease,
+         var(--wp-border) !important;
-        opacity 0.18s ease;
 }
-/*
+html.wp-theme-light .wp-sidebar-title,
-   Cute small animation when menu opens.
+html.wp-theme-dark .wp-sidebar-title {
-*/
-.wp-user-dropdown.is-open
+     color:
-.wp-menu-bars > span:nth-child(1) {
+         var(--wp-heading) !important;
-     transform:
-         translateY(6px)
-        rotate(45deg);
 }
-.wp-user-dropdown.is-open
+html.wp-theme-light .wp-sidebar-static-item,
-.wp-menu-bars > span:nth-child(2) {
+html.wp-theme-dark .wp-sidebar-static-item {
-     opacity: 0;
+     color:
+        var(--wp-muted) !important;
 }
-.wp-user-dropdown.is-open
+html.wp-theme-light .wp-sidebar-highlight,
-.wp-menu-bars > span:nth-child(3) {
+html.wp-theme-dark .wp-sidebar-highlight {
-     transform:
-         translateY(-6px)
+     background:
-        rotate(-45deg);
+         var(--wp-surface-2) !important;
 }
 /* ============================================================
-    DROPDOWN MENU
+    CONTENTS BUTTON
 ============================================================ */
-.wp-user-dropdown-menu {
+html.wp-theme-light .wp-toc-button,
-    position: absolute;
+html.wp-theme-dark .wp-toc-button {
-     top: calc(100% + 10px);
+     background:
-    right: 0;
+        var(--wp-surface) !important;
-     z-index: 1000;
+     color:
+        var(--wp-teal) !important;
-     width: 210px;
+     border-color:
+        var(--wp-border) !important;
-    margin: 0;
+}
-    padding: 6px;
-    display: block;
-    list-style: none;
+html.wp-theme-light .wp-toc-popover,
+html.wp-theme-dark .wp-toc-popover {
      background:
-         var(--wp-surface);
+         var(--wp-surface) !important;
-     border:
+     color:
-px solid
+         var(--wp-text) !important;
-         var(--wp-border);
-     border-radius: 10px;
+     border-color:
+        var(--wp-border) !important;
      box-shadow:
-12px 32px
+         var(--wp-shadow) !important;
-        rgba(18, 35, 63, 0.14);
 }
-.wp-user-dropdown-menu[hidden] {
+html.wp-theme-light .wp-toc-heading,
-     display: none !important;
+html.wp-theme-dark .wp-toc-heading {
+     color:
+        var(--wp-heading) !important;
 }
 /* ============================================================
-    MENU ITEMS
+    INFOBOX
 ============================================================ */
-.wp-user-dropdown-menu > li {
+html.wp-theme-light .infobox,
-     width: 100%;
+html.wp-theme-dark .infobox {
+    background:
+        var(--wp-surface-2) !important;
+    color:
+        var(--wp-text) !important;
+     border-color:
+        var(--wp-border) !important;
+}
-    margin: 0 !important;
+html.wp-theme-light .infobox th,
-    padding: 0 !important;
+html.wp-theme-dark .infobox th {
-     display: block;
+     background:
+        var(--wp-hover-bg) !important;
-     list-style: none !important;
+     color:
+        var(--wp-heading) !important;
 }
-.wp-user-dropdown-menu > li::before,
+html.wp-theme-light .infobox td,
-.wp-user-dropdown-menu > li::after {
+html.wp-theme-dark .infobox td {
-     display: none !important;
+     color:
+        var(--wp-text) !important;
-     content: none !important;
+     border-color:
+        var(--wp-border) !important;
 }
 /* ============================================================
-    MENU LINKS
+    TABLES
 ============================================================ */
-.wp-user-dropdown-menu > li > a {
+html.wp-theme-dark .mw-parser-output table {
-     width: 100%;
+     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 {
-     min-height: 38px;
+     background:
+        var(--wp-surface) !important;
-     padding:
+     color:
-px
+         var(--wp-text) !important;
-px;
-     display: flex;
+     border-color:
+        var(--wp-border) !important;
+}
-    align-items: center;
-    border: 0 !important;
+/* ============================================================
+   MEDIAWIKI FORMS
+============================================================ */
-    border-radius: 7px;
+html.wp-theme-dark input,
+html.wp-theme-dark textarea,
+html.wp-theme-dark select {
      background:
-         transparent !important;
+         var(--wp-input-bg) !important;
      color:
          var(--wp-text) !important;
-     font-size: 12px;
+     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:
+px
+px;
-     font-weight: 500;
+     display: inline-flex;
-     line-height: 1.25;
+     align-items: center;
-     text-align: left;
+     border-radius: 7px;
-     white-space: normal;
+     color:
+        var(--wp-teal) !important;
+    font-size: 12px;
+    font-weight: 700;
      text-decoration: none !important;
@@ Line 319: / Line 642: @@
-.wp-user-dropdown-menu > li > a:hover {
+.wp-user-primary > li > a:hover {
      background:
-         var(--wp-teal-soft) !important;
+         var(--wp-hover-bg) !important;
      color:
@@ Line 329: / Line 653: @@
 /* ============================================================
-    LOG OUT
+    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-dropdown-menu #pt-logout > a {
+.wp-user-menu-list.wp-is-logged-out > li > a {
-     margin-top: 4px;
+    min-height: 34px;
+    padding:
+px
+px;
+    display: inline-flex;
+     align-items: center;
-     border-top:
+     border:
 px solid
-         var(--wp-border) !important;
+         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);
-     border-radius:
+     color:
+         var(--wp-teal-dark) !important;
-px
-px;
 }
 /* ============================================================
-    THEME INSIDE LOGGED-IN MENU
+    THEME BUTTON
 ============================================================ */
-.wp-user-dropdown-menu
 .wikipartner-theme-item {
-    width: 100%;
      margin: 0 !important;
+    padding: 0 !important;
+    display: flex;
+    align-items: center;
+    list-style: none !important;
 }
-.wp-user-dropdown-menu
 .wikipartner-theme-toggle {
-    width: 100% !important;
-    height: 38px !important;
-     min-height: 38px;
+     width: 35px;
+    height: 35px;
-     margin: 0 !important;
+     margin: 0;
+    padding: 0;
-    padding:
+     display: inline-flex;
-px
-px !important;
-     display: flex !important;
      align-items: center;
-     justify-content: flex-start !important;
+     justify-content: center;
-     gap: 10px;
+     flex: 0 0 35px;
-     border:
+     cursor: pointer;
-!important;
-     border-radius:
+     appearance: none;
-px !important;
      background:
-         transparent !important;
+         var(--wp-surface-2) !important;
      color:
-         var(--wp-text) !important;
+         var(--wp-teal) !important;
-     box-shadow:
+     border:
-         none !important;
+px solid
+        var(--wp-border) !important;
-     transform:
+     border-radius: 50%;
-        none !important;
-     font-size: 12px;
+     box-shadow: none !important;
-     font-weight: 500;
+     transition:
+        background 0.15s ease,
+        color 0.15s ease,
+        border-color 0.15s ease,
+        transform 0.15s ease;
 }
-.wp-user-dropdown-menu
 .wikipartner-theme-toggle:hover {
      background:
-         var(--wp-teal-soft) !important;
+         var(--wp-hover-bg) !important;
      color:
          var(--wp-teal-dark) !important;
-    box-shadow:
-        none !important;
      transform:
-         none !important;
+         rotate(-7deg);
 }
-.wp-user-dropdown-menu
 .wp-theme-icon {
      width: 18px;
+    height: 18px;
+    display: flex;
-     flex: 0 0 18px;
+     align-items: center;
+    justify-content: center;
 }
-.wp-theme-menu-label {
+.wp-theme-icon svg {
-     display: none;
-}
+    width: 18px;
+    height: 18px;
+     fill: none;
+    stroke: currentColor;
+    stroke-width: 1.8;
-/*
+    stroke-linecap: round;
-   Show the text Dark mode / Light mode
-   only when the theme button is inside
-   the logged-in hamburger menu.
-*/
-.wp-user-dropdown-menu
+    stroke-linejoin: round;
-.wp-theme-menu-label {
-    display: inline;
 }
 /* ============================================================
-    LOGGED-OUT THEME BUTTON
+    HAMBURGER
 ============================================================ */
-/*
+.wp-user-dropdown {
-   Logged out:
-   Create account | moon/sun | Log in
+    position: relative;
-   Hide the text label so only the cute
+    margin: 0 !important;
-   round icon remains.
+    padding: 0 !important;
-*/
-.wp-user-menu-list.wp-is-logged-out
+    list-style: none !important;
-.wp-theme-menu-label {
-    display: none;
 }
-/* ============================================================
+.wp-user-menu-trigger {
-   DARK MODE HAMBURGER
-============================================================ */
+    width: 35px;
+    height: 35px;
+    margin: 0;
+    padding: 0;
-html.wp-theme-dark
+     display: inline-flex;
-.wp-user-menu-trigger {
-     background:
-        #18332F;
-     border-color:
+     align-items: center;
-        #31514D;
+    justify-content: center;
-     color:
+     cursor: pointer;
-        #69C9BD;
-}
+    appearance: none;
-html.wp-theme-dark
-.wp-user-menu-trigger:hover {
      background:
-         #20413C;
+         var(--wp-surface-2) !important;
-     border-color:
+    color:
-         #42645F;
+        var(--wp-teal) !important;
+     border:
+px solid
+        var(--wp-border) !important;
+    border-radius: 8px;
-     color:
+     transition:
-         #91DDD4;
+        background 0.15s ease,
+        color 0.15s ease,
+         border-color 0.15s ease;
 }
-html.wp-theme-dark
+.wp-user-menu-trigger:hover {
-.wp-user-dropdown-menu {
      background:
-         #111D20;
+         var(--wp-hover-bg) !important;
-     border-color:
+     color:
-         var(--wp-border);
+         var(--wp-teal-dark) !important;
-    box-shadow:
-14px 38px
-        rgba(0, 0, 0, 0.38);
 }
 /* ============================================================
-    MOBILE
+    HAMBURGER LINES
 ============================================================ */
-@media (max-width: 700px) {
+.wp-menu-bars {
-     .wp-user-menu-trigger {
+     width: 17px;
-        width: 33px;
+    height: 14px;
-        height: 33px;
-        border-radius: 7px;
+    display: flex;
-    }
+    flex-direction: column;
-     .wp-user-dropdown-menu {
+     justify-content: space-between;
-        width: 195px;
+}
-        right: 0;
-    }
+.wp-menu-bars > span {
-     .wp-user-menu-list.wp-is-logged-in
+     width: 100%;
-     > #pt-userpage > a {
+     height: 2px;
-        max-width: 140px;
-        overflow: hidden;
+    display: block;
-         text-overflow: ellipsis;
+    background:
+         currentColor;
-        white-space: nowrap;
+    border-radius: 999px;
-    }
+}
-}
 /* ============================================================
-    WIKIPARTNER
+    HAMBURGER DROPDOWN
-   USERNAME OUTSIDE HAMBURGER
 ============================================================ */
-.wp-user-primary {
+.wp-user-dropdown-menu {
+    position: absolute;
+    top:
+        calc(100% + 10px);
+    right: 0;
+    z-index: 9999;
+    width: 220px;
      margin: 0;
-    padding: 0;
-     display: flex;
+     padding: 6px;
-    align-items: center;
      list-style: none;
+    background:
+        var(--wp-surface) !important;
+    color:
+        var(--wp-text) !important;
+    border:
+px solid
+        var(--wp-border) !important;
+    border-radius: 10px;
+    box-shadow:
+        var(--wp-shadow) !important;
+}
+.wp-user-dropdown-menu[hidden] {
+    display: none !important;
 }
-.wp-user-primary.is-empty {
+.wp-user-dropdown-menu > li {
-     display: none;
+    width: 100%;
+    margin: 0 !important;
+    padding: 0 !important;
+     display: block;
+    list-style: none !important;
 }
-.wp-user-primary > li {
+.wp-user-dropdown-menu > li > a {
-     margin: 0;
-     padding: 0;
+    width: 100%;
+     min-height: 38px;
+     padding:
+px
+px;
      display: flex;
      align-items: center;
-     list-style: none;
+     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-primary > li::before,
+.wp-user-dropdown-menu > li > a:hover {
-.wp-user-primary > li::after {
-    display: none !important;
+    background:
-     content: none !important;
+        var(--wp-hover-bg) !important;
+     color:
+        var(--wp-teal-dark) !important;
 }
-.wp-user-primary > li > a {
+.wp-user-dropdown-menu #pt-logout > a {
-     min-height: 34px;
+    margin-top: 4px;
+     border-top:
+px solid
+        var(--wp-border) !important;
+}
-    padding: 8px 11px;
-    display: inline-flex;
+/* ============================================================
+   FOOTER
+============================================================ */
-    align-items: center;
+html.wp-theme-light .wp-footer,
-    justify-content: center;
+html.wp-theme-dark .wp-footer {
-     border-radius: 7px;
+     background:
+        var(--wp-surface) !important;
-     color: var(--wp-teal);
+     color:
+        var(--wp-muted) !important;
-     font-family: var(--wp-body-font);
+     border-color:
+        var(--wp-border) !important;
+}
-    font-size: 12px;
-    font-weight: 700;
+html.wp-theme-light .wp-footer-inner,
+html.wp-theme-dark .wp-footer-inner {
-     line-height: 1;
+     color:
+        var(--wp-muted) !important;
+}
-    white-space: nowrap;
-    text-decoration: none !important;
+html.wp-theme-light .wp-footer a,
+html.wp-theme-dark .wp-footer a {
-     transition:
+     color:
-         color 0.15s ease,
+         var(--wp-teal) !important;
-        background 0.15s ease;
 }
-.wp-user-primary > li > a:hover {
+html.wp-theme-light .wp-social-icon,
-     background: var(--wp-teal-soft);
+html.wp-theme-dark .wp-social-icon {
+     background:
+        var(--wp-surface-2) !important;
-     color: var(--wp-teal-dark);
+     color:
+        var(--wp-teal) !important;
-     text-decoration: none !important;
+     border-color:
+        var(--wp-border) !important;
 }
-/* Dark mode username */
+/* ============================================================
+   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
-.wp-user-primary > li > a {
+[class*="wp-feature"] {
-     color: var(--wp-teal);
+    background-color:
+        var(--wp-surface) !important;
+    color:
+        var(--wp-text) !important;
+     border-color:
+        var(--wp-border) !important;
 }
 html.wp-theme-dark
-.wp-user-primary > li > a:hover {
+[class*="wp-card"] h1,
-     background: var(--wp-teal-soft);
+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: var(--wp-teal-dark);
+     color:
+        #FFFFFF;
 }
-/* Keep account controls neatly aligned */
+/* ============================================================
+   MOBILE
+============================================================ */
+@media (max-width: 700px) {
+    .wp-user-dropdown-menu {
-.wp-user-area {
+        width: 200px;
-    display: flex;
+    }
+    .wikipartner-theme-toggle,
+    .wp-user-menu-trigger {
+        width: 32px;
+        height: 32px;
+        flex-basis: 32px;
+    }
-    align-items: center;
-     justify-content: flex-end;
+     .wp-theme-icon,
+    .wp-theme-icon svg {
-    gap: 6px;
+        width: 16px;
+        height: 16px;
+    }
 }

WikiPartner (talk | contribs)

Revision as of 23:55, 19 August 2026