Jump to content

MediaWiki:Vector.css

From Startup Mojave Wiki

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.
/* 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;
    }
}

/* Login page styling */
.mw-special-Userlogin,
.page-Special_UserLogin {
    font-family: "Montserrat", sans-serif !important;
}

/* Login page headings */
.mw-special-Userlogin #firstHeading,
.page-Special_UserLogin #firstHeading {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 900 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Login form elements */
.mw-htmlform-field-HTMLTextField input,
.cdx-text-input__input,
.loginText,
.loginPassword,
#wpName1,
#wpPassword1 {
    font-family: "Montserrat", sans-serif !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

/* Login button */
.mw-htmlform-submit,
#wpLoginAttempt {
    font-family: "Montserrat", sans-serif !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
}

/* Checkbox and links */
.cdx-checkbox__label,
.mw-form-related-link-container a {
    font-family: "Montserrat", sans-serif !important;
    font-weight: normal !important;
}

/* Dark mode support for login page */
@media (prefers-color-scheme: dark),
html.skin-theme-dark, html.vector-theme-dark, html.theme-dark,
.skin--night, body[class*="dark"] {
    .mw-special-Userlogin #firstHeading,
    .page-Special_UserLogin #firstHeading {
        color: #fff !important;
    }
  
    .cdx-text-input__input {
        background-color: #333 !important;
        color: #fff !important;
        border-color: #555 !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;
}

/* ----- 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;
}
Retrieved from "https://wiki.startupmojave.org/index.php?title=MediaWiki:Vector.css&oldid=94"