Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ============================================================
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;
}
}
/* ============================================================
ARTICLE CONTENTS
ONLY SHOW WHEN REAL HEADINGS EXIST
============================================================ */
/*
Hidden by default.
JavaScript adds .wp-toc-ready only when the
article actually contains H2/H3/H4/H5/H6 headings.
*/
.wp-title-toc:not(.wp-toc-ready) {
display: none !important;
}
/*
Restore normal positioning once headings exist.
*/
.wp-title-toc.wp-toc-ready {
display: inline-block;
}
/* ============================================================
REMOVE OLD CONTENTS LABEL / TOP LINK
============================================================ */
.wp-title-toc .wp-toc-heading,
.wp-title-toc .wp-toc-top {
display: none !important;
}
/* ============================================================
CONTENTS DROPDOWN ACCENT
============================================================ */
.wp-title-toc .wp-toc-popover {
border:
1px solid
var(--wp-border) !important;
border-top:
4px solid
var(--wp-teal) !important;
background:
var(--wp-surface) !important;
color:
var(--wp-text) !important;
border-radius:
10px !important;
padding:
6px !important;
box-shadow:
var(--wp-shadow) !important;
}
/* Remove any old divider at the top */
.wp-title-toc .wp-toc-links {
border-top:
0 !important;
margin:
0 !important;
padding:
0 !important;
}
/* ============================================================
REAL ARTICLE HEADING LINKS
============================================================ */
.wp-title-toc .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;
}
.wp-title-toc .wp-toc-links > a:hover {
background:
var(--wp-hover-bg) !important;
color:
var(--wp-teal-dark) !important;
}
/* ============================================================
HEADING LEVELS
============================================================ */
.wp-title-toc .wp-toc-level-2 {
padding-left:
11px !important;
font-weight:
600 !important;
}
.wp-title-toc .wp-toc-level-3 {
padding-left:
24px !important;
}
.wp-title-toc .wp-toc-level-4 {
padding-left:
37px !important;
font-size:
11.5px !important;
}
.wp-title-toc .wp-toc-level-5 {
padding-left:
50px !important;
font-size:
11px !important;
}
.wp-title-toc .wp-toc-level-6 {
padding-left:
63px !important;
font-size:
11px !important;
}
/* ============================================================
ARTICLE BOX = SAME SURFACE AS SIDEBARS
============================================================ */
html.wp-theme-light .wp-content,
html.wp-theme-dark .wp-content {
background: var(--wp-surface) !important;
}
html.wp-theme-light .wp-article-header,
html.wp-theme-dark .wp-article-header,
html.wp-theme-light .wp-article-body,
html.wp-theme-dark .wp-article-body {
background: transparent !important;
}
/* ============================================================
CONTENTS DROPDOWN
KEEP ONLY ONE TEAL ACCENT
============================================================ */
.wp-title-toc .wp-toc-popover {
border-top: 4px solid var(--wp-teal) !important;
}
.wp-title-toc .wp-toc-heading {
display: none !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
height: 0 !important;
min-height: 0 !important;
}
.wp-title-toc .wp-toc-links {
margin-top: 0 !important;
padding-top: 0 !important;
border-top: 0 !important;
}
.wp-title-toc .wp-toc-links::before,
.wp-title-toc .wp-toc-links::after,
.wp-title-toc .wp-toc-popover::before,
.wp-title-toc .wp-toc-popover::after {
display: none !important;
content: none !important;
}
/* ============================================================
WIKIPARTNER LINK COLOR SYSTEM
============================================================ */
/* Existing internal WikiPartner links */
.wp-article-body a:not(.new):not(.external) {
color: var(--wp-teal) !important;
}
/* Missing WikiPartner pages */
.wp-article-body a.new,
.wp-article-body a.new:visited {
color: var(--wp-gold) !important;
text-decoration-line: underline;
text-decoration-style: dotted;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
/* External websites */
.wp-article-body a.external,
.wp-article-body a.external:visited {
color: #3366CC !important;
}
/* Hover states */
.wp-article-body a:not(.new):not(.external):hover {
color: var(--wp-teal-dark) !important;
}
.wp-article-body a.new:hover {
color: #C88726 !important;
}
.wp-article-body a.external:hover {
color: #254A9B !important;
}
/* ============================================================
WIKIPARTNER
SPECIAL:UPLOAD
============================================================ */
/* Main upload form */
body.mw-special-Upload #mw-upload-form,
body.page-Special_Upload #mw-upload-form {
width: 100%;
max-width: 100%;
}
/* ------------------------------------------------------------
FIELDSET CARDS
------------------------------------------------------------ */
body.mw-special-Upload #mw-upload-form fieldset,
body.page-Special_Upload #mw-upload-form fieldset {
margin: 0 0 22px !important;
padding: 20px !important;
background: var(--wp-surface) !important;
border: 1px solid var(--wp-border) !important;
border-top: 4px solid var(--wp-teal) !important;
border-radius: 12px !important;
box-shadow: var(--wp-shadow) !important;
box-sizing: border-box;
}
/* Fieldset titles:
Source file
File description
Upload options
*/
body.mw-special-Upload #mw-upload-form legend,
body.page-Special_Upload #mw-upload-form legend {
padding: 0 10px !important;
background: var(--wp-surface) !important;
color: var(--wp-heading) !important;
font-size: 15px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
/* ------------------------------------------------------------
REMOVE OLD TABLE LOOK
------------------------------------------------------------ */
body.mw-special-Upload #mw-upload-form table,
body.page-Special_Upload #mw-upload-form table {
width: 100% !important;
border: 0 !important;
border-collapse: separate !important;
border-spacing: 0 !important;
background: transparent !important;
}
body.mw-special-Upload #mw-upload-form tr,
body.page-Special_Upload #mw-upload-form tr {
background: transparent !important;
}
body.mw-special-Upload #mw-upload-form th,
body.mw-special-Upload #mw-upload-form td,
body.page-Special_Upload #mw-upload-form th,
body.page-Special_Upload #mw-upload-form td {
padding: 10px 12px !important;
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid var(--wp-border) !important;
color: var(--wp-text) !important;
vertical-align: middle !important;
}
body.mw-special-Upload #mw-upload-form tr:last-child th,
body.mw-special-Upload #mw-upload-form tr:last-child td,
body.page-Special_Upload #mw-upload-form tr:last-child th,
body.page-Special_Upload #mw-upload-form tr:last-child td {
border-bottom: 0 !important;
}
/* Label column */
body.mw-special-Upload #mw-upload-form th,
body.page-Special_Upload #mw-upload-form th {
width: 165px !important;
color: var(--wp-heading) !important;
font-weight: 600 !important;
text-align: left !important;
}
/* ------------------------------------------------------------
TEXT INPUTS / TEXTAREA / SELECT
------------------------------------------------------------ */
body.mw-special-Upload #mw-upload-form input[type="text"],
body.mw-special-Upload #mw-upload-form input[type="url"],
body.mw-special-Upload #mw-upload-form textarea,
body.mw-special-Upload #mw-upload-form select,
body.page-Special_Upload #mw-upload-form input[type="text"],
body.page-Special_Upload #mw-upload-form input[type="url"],
body.page-Special_Upload #mw-upload-form textarea,
body.page-Special_Upload #mw-upload-form select {
box-sizing: border-box !important;
background: var(--wp-input-bg) !important;
color: var(--wp-text) !important;
border: 1px solid var(--wp-border) !important;
border-radius: 8px !important;
padding: 9px 11px !important;
font: inherit !important;
transition:
border-color .15s ease,
box-shadow .15s ease !important;
}
/* Destination filename */
body.mw-special-Upload #wpDestFile,
body.page-Special_Upload #wpDestFile {
width: 100% !important;
max-width: 520px !important;
}
/* Summary */
body.mw-special-Upload #wpUploadDescription,
body.page-Special_Upload #wpUploadDescription {
width: 100% !important;
max-width: 680px !important;
min-height: 120px !important;
resize: vertical !important;
}
/* License */
body.mw-special-Upload #wpLicense,
body.page-Special_Upload #wpLicense {
min-width: 190px !important;
}
/* Focus state */
body.mw-special-Upload #mw-upload-form input:focus,
body.mw-special-Upload #mw-upload-form textarea:focus,
body.mw-special-Upload #mw-upload-form select:focus,
body.page-Special_Upload #mw-upload-form input:focus,
body.page-Special_Upload #mw-upload-form textarea:focus,
body.page-Special_Upload #mw-upload-form select:focus {
outline: none !important;
border-color: var(--wp-teal) !important;
box-shadow:
0 0 0 3px var(--wp-teal-soft) !important;
}
/* ------------------------------------------------------------
FILE PICKER
------------------------------------------------------------ */
body.mw-special-Upload #wpUploadFile,
body.page-Special_Upload #wpUploadFile {
width: 100% !important;
max-width: 520px !important;
color: var(--wp-text) !important;
font: inherit !important;
}
body.mw-special-Upload #wpUploadFile::file-selector-button,
body.page-Special_Upload #wpUploadFile::file-selector-button {
margin-right: 10px !important;
padding: 8px 14px !important;
background: var(--wp-teal) !important;
color: #fff !important;
border: 0 !important;
border-radius: 7px !important;
font-weight: 600 !important;
cursor: pointer !important;
}
body.mw-special-Upload #wpUploadFile::file-selector-button:hover,
body.page-Special_Upload #wpUploadFile::file-selector-button:hover {
background: var(--wp-teal-dark) !important;
}
/* ------------------------------------------------------------
CHECKBOX OPTIONS
------------------------------------------------------------ */
body.mw-special-Upload #mw-upload-form input[type="checkbox"],
body.page-Special_Upload #mw-upload-form input[type="checkbox"] {
width: 16px !important;
height: 16px !important;
margin-right: 7px !important;
accent-color: var(--wp-teal) !important;
vertical-align: -2px !important;
}
/* ------------------------------------------------------------
UPLOAD BUTTON
------------------------------------------------------------ */
body.mw-special-Upload #wpUpload,
body.page-Special_Upload #wpUpload {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 40px !important;
padding: 9px 20px !important;
background: var(--wp-teal) !important;
color: #fff !important;
border: 0 !important;
border-radius: 8px !important;
font-size: 14px !important;
font-weight: 700 !important;
cursor: pointer !important;
box-shadow:
0 4px 12px rgba(15, 107, 101, .16) !important;
transition:
background .15s ease,
transform .15s ease !important;
}
body.mw-special-Upload #wpUpload:hover,
body.page-Special_Upload #wpUpload:hover {
background: var(--wp-teal-dark) !important;
}
body.mw-special-Upload #wpUpload:active,
body.page-Special_Upload #wpUpload:active {
transform: translateY(1px) !important;
}
/* ------------------------------------------------------------
LINKS INSIDE UPLOAD FORM
------------------------------------------------------------ */
body.mw-special-Upload #mw-upload-form a,
body.page-Special_Upload #mw-upload-form a {
color: var(--wp-teal) !important;
font-weight: 500 !important;
}
body.mw-special-Upload #mw-upload-form a:hover,
body.page-Special_Upload #mw-upload-form a:hover {
color: var(--wp-teal-dark) !important;
}
/* ------------------------------------------------------------
HELP / INFORMATION TEXT
------------------------------------------------------------ */
body.mw-special-Upload #mw-upload-form small,
body.mw-special-Upload #mw-upload-form .mw-htmlform-info,
body.page-Special_Upload #mw-upload-form small,
body.page-Special_Upload #mw-upload-form .mw-htmlform-info {
color: var(--wp-muted) !important;
}
/* ------------------------------------------------------------
MOBILE
------------------------------------------------------------ */
@media (max-width: 700px) {
body.mw-special-Upload #mw-upload-form fieldset,
body.page-Special_Upload #mw-upload-form fieldset {
padding: 14px !important;
}
body.mw-special-Upload #mw-upload-form th,
body.mw-special-Upload #mw-upload-form td,
body.page-Special_Upload #mw-upload-form th,
body.page-Special_Upload #mw-upload-form td {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
}
body.mw-special-Upload #mw-upload-form th,
body.page-Special_Upload #mw-upload-form th {
padding-bottom: 4px !important;
border-bottom: 0 !important;
}
body.mw-special-Upload #mw-upload-form td,
body.page-Special_Upload #mw-upload-form td {
padding-top: 4px !important;
}
body.mw-special-Upload #wpDestFile,
body.mw-special-Upload #wpUploadDescription,
body.mw-special-Upload #wpUploadFile,
body.page-Special_Upload #wpDestFile,
body.page-Special_Upload #wpUploadDescription,
body.page-Special_Upload #wpUploadFile {
max-width: none !important;
width: 100% !important;
}
}
/* ============================================================
WIKIPARTNER
SPECIAL:UPLOAD — FINAL UPLOAD BUTTON
============================================================ */
body.mw-special-Upload input[name="wpUpload"],
body.page-Special_Upload input[name="wpUpload"],
body.mw-special-Upload #wpUpload,
body.page-Special_Upload #wpUpload,
body.mw-special-Upload .mw-htmlform-submit,
body.page-Special_Upload .mw-htmlform-submit {
appearance: none !important;
-webkit-appearance: none !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 42px !important;
padding: 10px 22px !important;
background: var(--wp-teal) !important;
background-image: none !important;
color: #fff !important;
border: 1px solid var(--wp-teal) !important;
border-radius: 8px !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
text-shadow: none !important;
box-shadow: 0 4px 12px rgba(15, 107, 101, .18) !important;
cursor: pointer !important;
transition:
background .15s ease,
border-color .15s ease,
transform .15s ease,
box-shadow .15s ease !important;
}
/* Hover */
body.mw-special-Upload input[name="wpUpload"]:hover,
body.page-Special_Upload input[name="wpUpload"]:hover,
body.mw-special-Upload #wpUpload:hover,
body.page-Special_Upload #wpUpload:hover,
body.mw-special-Upload .mw-htmlform-submit:hover,
body.page-Special_Upload .mw-htmlform-submit:hover {
background: var(--wp-teal-dark) !important;
border-color: var(--wp-teal-dark) !important;
box-shadow: 0 6px 16px rgba(15, 107, 101, .22) !important;
}
/* Keyboard focus */
body.mw-special-Upload input[name="wpUpload"]:focus,
body.page-Special_Upload input[name="wpUpload"]:focus,
body.mw-special-Upload #wpUpload:focus,
body.page-Special_Upload #wpUpload:focus,
body.mw-special-Upload .mw-htmlform-submit:focus,
body.page-Special_Upload .mw-htmlform-submit:focus {
outline: none !important;
box-shadow:
0 0 0 3px var(--wp-teal-soft),
0 4px 12px rgba(15, 107, 101, .18) !important;
}
/* Click */
body.mw-special-Upload input[name="wpUpload"]:active,
body.page-Special_Upload input[name="wpUpload"]:active,
body.mw-special-Upload #wpUpload:active,
body.page-Special_Upload #wpUpload:active,
body.mw-special-Upload .mw-htmlform-submit:active,
body.page-Special_Upload .mw-htmlform-submit:active {
transform: translateY(1px) !important;
}
/* ============================================================
WIKIPARTNER
SPECIAL:UPLOAD — SUBMIT BUTTON
============================================================ */
body.mw-special-Upload #mw-upload-form input[type="submit"],
body.page-Special_Upload #mw-upload-form input[type="submit"],
body.mw-special-Upload #mw-upload-form button[type="submit"],
body.page-Special_Upload #mw-upload-form button[type="submit"] {
appearance: none !important;
-webkit-appearance: none !important;
min-height: 42px !important;
padding: 10px 22px !important;
background: var(--wp-teal) !important;
background-image: none !important;
color: #fff !important;
border: 1px solid var(--wp-teal) !important;
border-radius: 8px !important;
font-family: inherit !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
text-shadow: none !important;
box-shadow: 0 4px 12px rgba(15, 107, 101, .18) !important;
cursor: pointer !important;
}
/* Hover */
body.mw-special-Upload #mw-upload-form input[type="submit"]:hover,
body.page-Special_Upload #mw-upload-form input[type="submit"]:hover,
body.mw-special-Upload #mw-upload-form button[type="submit"]:hover,
body.page-Special_Upload #mw-upload-form button[type="submit"]:hover {
background: var(--wp-teal-dark) !important;
border-color: var(--wp-teal-dark) !important;
}
/* Focus */
body.mw-special-Upload #mw-upload-form input[type="submit"]:focus,
body.page-Special_Upload #mw-upload-form input[type="submit"]:focus,
body.mw-special-Upload #mw-upload-form button[type="submit"]:focus,
body.page-Special_Upload #mw-upload-form button[type="submit"]:focus {
outline: none !important;
box-shadow:
0 0 0 3px var(--wp-teal-soft),
0 4px 12px rgba(15, 107, 101, .18) !important;
}