MediaWiki:Common.css

/* Import Montserrat font with multiple weights */
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,500,600,700,800,900&display=swap');

/* Base font for entire site */
body, body.mw-special, .mw-body, #content {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
}

/* ----- MAIN PAGE TITLE ----- */
.mw-body-header h1#firstHeading,
.mw-body-header h1#firstHeading span.mw-page-title-main,
.mw-special h1#firstHeading,
body.special h1#firstHeading {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: #000 !important;
}


/* Login link styling - aggressive approach */
.mw-list-item.active a span,
#pt-login a span,
#pt-login-2 a span,
.vector-user-links span,
.vector-menu-content-list .mw-list-item.active span,
.user-links-collapsible-item a span,
nav.vector-user-links .vector-menu-content span,
.vector-user-menu .mw-list-item span {
    text-transform: uppercase !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
}


/* Dark mode version of page title */
@media (prefers-color-scheme: dark) {
    .mw-body-header h1#firstHeading,
    .mw-body-header h1#firstHeading span.mw-page-title-main,
    .mw-special h1#firstHeading,
    body.special h1#firstHeading {
        color: #fff !important;
    }
}

/* to fix the editor being all caps*/
.mw-editform textarea,
#wpTextbox1,
.ace_editor,
.ve-ce-documentNode,
.ve-ui-surface,
.wikiEditor-ui-text textarea,
.mw-ui-input-inline,
.mw-editfont-monospace,
.mw-editfont-sans-serif,
.mw-editfont-serif,
div.ace_content {
    text-transform: none !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
}

/* Additional selectors for MediaWiki dark mode */
.skin-theme-dark .mw-body-header h1#firstHeading,
.theme-dark .mw-body-header h1#firstHeading,
body.vector-feature-theme-enabled.vector-theme-dark .mw-body-header h1#firstHeading,
.skin-theme-dark h1#firstHeading,
.theme-dark h1#firstHeading,
body.vector-feature-theme-enabled.vector-theme-dark h1#firstHeading {
    color: #fff !important;
}

/* ----- SITE WORDMARK ----- */
/* Consolidated wordmark styling - works on all pages */
.mw-logo-wordmark,
body.special .mw-logo-wordmark,
.mw-specialpages .mw-logo-wordmark,
.vector-header-container .mw-logo-wordmark,
body.mw-special .mw-logo-wordmark {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 700 !important;
    font-size: 1.3em !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Light mode specific color */
html:not(.skin-theme-dark):not(.vector-theme-dark):not(.theme-dark) .mw-logo-wordmark {
    color: #000 !important;
}

/* DARK MODE WORDMARK - super aggressive approach */
html.skin-theme-dark .mw-logo-wordmark,
html.vector-theme-dark .mw-logo-wordmark,
html.theme-dark .mw-logo-wordmark,
html[data-darkmode="true"] .mw-logo-wordmark,
html[class*="dark"] .mw-logo-wordmark,
.skin--night .mw-logo-wordmark,
.mw-logo-wordmark.theme-dark,
.theme-dark .mw-logo-wordmark,
body[class*="dark"] .mw-logo-wordmark,
.vector-body-before-content .mw-logo-wordmark,
.mw-dark-mode .mw-logo-wordmark {
    color: #ffffff !important;
}

/* JavaScript-based fallback for dark mode */
@media (prefers-color-scheme: dark) {
    .mw-logo-wordmark {
        color: #ffffff !important;
    }
}

/* Logo container styling */
.mw-logo-container,
body.special .mw-logo-container,
.mw-specialpages .mw-logo-container,
body.mw-special .mw-logo-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 10px 0 !important;
}

/* Fix for editor and input areas */
.mw-editform textarea,
#wpTextbox1,
.ace_editor,
.ve-ce-documentNode,
.ve-ui-surface,
.wikiEditor-ui-text textarea,
.mw-ui-input-inline,
.mw-editfont-monospace,
.mw-editfont-sans-serif,
.mw-editfont-serif,
div.ace_content,
/* New fixes for OOUI input boxes and textareas */
.oo-ui-textInputWidget textarea,
.oo-ui-textInputWidget input,
.ve-ui-mwSaveDialog-summary textarea,
.oo-ui-inputWidget-input,
.oo-ui-textInputWidget-input {
    text-transform: none !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
}

/* Search form styling */
/* Input field - normal text */
.cdx-text-input__input,
.cdx-search-input input,
.cdx-typeahead-search__input input,
#searchform input[type="search"] {
    text-transform: none !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
}

/* Search button - uppercase */
.cdx-button.cdx-search-input__end-button,
#searchform button,
.cdx-search-input button {
    text-transform: uppercase !important;
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
}

/* Ensure placeholder text is also normal case */
.cdx-text-input__input::placeholder,
.cdx-search-input input::placeholder,
.cdx-typeahead-search__input input::placeholder,
#searchform input[type="search"]::placeholder {
    text-transform: none !important;
    font-weight: normal !important;
    letter-spacing: normal !important;
}

/* Target OOUI components */
.oo-ui-widget, .oo-ui-widget *,
.oo-ui-element-hidden, .oo-ui-labelElement-label,
.oo-ui-buttonElement-button {
    font-family: "Montserrat", sans-serif !important;
}

/* Specifically for Special:Preferences */
.mw-htmlform-ooui .oo-ui-layout-preserve,
.mw-special-Preferences * {
    font-family: "Montserrat", sans-serif !important;
}

body.mw-special-Preferences .oo-ui-widget,
body.mw-special-Preferences button,
body.mw-special-Preferences input,
body.mw-special-Preferences select,
body.mw-special-Preferences textarea {
    font-family: "Montserrat", sans-serif !important;
}

/* Form elements - add !important to overcome OOUI styles */
button, input, select, textarea,
body.special button, body.special input, body.special select, body.special textarea {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
}

/* ----- HEADINGS ----- */
h1 {
    font-family: "Montserrat", sans-serif;
    font-weight: 900;
    text-transform: uppercase;
}

h2 {
    font-family: "Montserrat", sans-serif;
    font-weight: 800;
}

h3 {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

h4, h5, h6 {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}


/* ----- ADDITIONAL HEADING CLASSES ----- */
/* Section headlines in wiki content */
.mw-headline {
    font-family: "Montserrat", sans-serif !important;
    font-weight: inherit; /* Preserves the weight from parent heading */
}

/* Preview header when editing */
.mw-previewheader {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
}


/* ----- TEXT FORMATTING ----- */
/* Italics and emphasis */
em, i {
    font-family: "Montserrat", sans-serif;
    font-style: italic;
    font-weight: 300;
}

/* Bold text */
strong, b {
    font-family: "Montserrat", sans-serif;
    font-weight: 700;
}

/* Code blocks */
pre, code {
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    background-color: #f5f5f5;
    padding: 5px;
    border-radius: 3px;
}

/* ----- UI ELEMENTS ----- */
/* Navigation */
#p-navigation, #mw-panel,
body.special #p-navigation, body.special #mw-panel,
body.mw-special #p-navigation, body.mw-special #mw-panel {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
}

/* Footer */
#footer, body.special #footer, body.mw-special #footer {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
}

/* Form elements */
button, input, select, textarea,
body.special button, body.special input, body.special select, body.special textarea {
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}




/* ----- SYNTAX HIGHLIGHTING FOR DARK MODE (SUBLIME TEXT MONOKAI THEME) ----- */
@media (prefers-color-scheme: dark),
       (--is-dark-theme: true) {
  /* Code block backgrounds */
  pre, code, .mw-highlight, div.mw-code {
    background-color: #272822 !important;
    border-color: #3e3d32 !important;
    color: #f8f8f2 !important;
  }

  /* Basic syntax elements - Sublime Text Monokai colors */
  .mw-highlight .keyword, .mw-highlight .k { color: #f92672 !important; }
  .mw-highlight .string, .mw-highlight .s, .mw-highlight .s1, .mw-highlight .s2, .mw-highlight .st { color: #e6db74 !important; }
  .mw-highlight .comment, .mw-highlight .c, .mw-highlight .c1, .mw-highlight .cm { color: #75715e !important; }
  .mw-highlight .number, .mw-highlight .mi, .mw-highlight .mf { color: #ae81ff !important; }
  .mw-highlight .function, .mw-highlight .nf { color: #a6e22e !important; }
  .mw-highlight .operator, .mw-highlight .o { color: #f92672 !important; }
  .mw-highlight .variable, .mw-highlight .nv { color: #f8f8f2 !important; }
  .mw-highlight .class, .mw-highlight .nc, .mw-highlight .kd { color: #66d9ef !important; }
  .mw-highlight .property, .mw-highlight .p { color: #66d9ef !important; font-style: italic !important; }
  .mw-highlight .punctuation { color: #f8f8f2 !important; }
  .mw-highlight .tag, .mw-highlight .nt { color: #f92672 !important; }
  .mw-highlight .attr, .mw-highlight .na { color: #a6e22e !important; }
  .mw-highlight .builtin, .mw-highlight .nb { color: #66d9ef !important; }

  /* Vector-specific dark mode */
  .vector-feature-theme-enabled.vector-theme-dark pre,
  .vector-feature-theme-enabled.vector-theme-dark code,
  .vector-feature-theme-enabled.vector-theme-dark .mw-highlight,
  html.skin-theme-dark pre,
  html.skin-theme-dark code,
  html.skin-theme-dark .mw-highlight {
    background-color: #272822 !important;
    border-color: #3e3d32 !important;
    color: #f8f8f2 !important;
  }
}

/* For inline code in dark mode */
@media (prefers-color-scheme: dark),
       (--is-dark-theme: true) {
  code {
    background-color: #3a3a3a !important;
    color: #f8f8f2 !important;
    padding: 2px 4px !important;
    border-radius: 3px !important;
  }
}