MediaWiki:Common.css
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.
/* CSS placed here will be applied to all skins */
/* --- HIDE ALL CLUTTER FOR READ-ONLY WIKI --- */
@import url('https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@400;700&display=swap');
/* Hide default MediaWiki footers (privacy, disclaimers, powered by) */
#footer-places,
#footer-icons,
.mw-footer-container {
display: none !important;
}
/* 1. Hide the Hamburger Menu button (top left) */
#mw-sidebar-button,
#vector-main-menu-dropdown {
display: none !important;
}
/* 2. Hide the Log in button / user section (top right) */
body.not-logged-in #p-personal,
body.not-logged-in .vector-user-links,
body.not-logged-in #pt-login,
body.not-logged-in #pt-login-2 {
display: none !important;
}
/* 3. Hide the page category tabs (Main Page | Discussion) & action tabs (Read | View source | View history | Tools) */
body.not-logged-in .vector-page-toolbar,
body.not-logged-in #p-namespaces,
body.not-logged-in #p-views,
body.not-logged-in #p-cactions,
body.not-logged-in .mw-article-toolbar {
display: none !important;
}
/* Hide "Watch this page" checkbox in VisualEditor & standard edit forms */
.mw-widget-checkDef-watchthis,
.page-mw-watchthis,
#wpWatchthis,
label[for="wpWatchthis"],
.oo-ui-fieldLayout:has(#wpWatchthis),
.oo-ui-fieldLayout:has([name="wpWatchthis"]) {
display: none !important;
}
/* 2. Hide Log in Button (Top Right) */
#p-vector-user-menu-overflow,
#pt-login,
#pt-login-2,
.vector-user-links,
.user-links-collapsible-item {
display: none !important;
}
/* Optional: Clean up the top line spacing left behind by the tabs */
.mw-body-header {
border-bottom: none !important;
margin-bottom: 0 !important;
}
/* Hide "Watch this page" checkbox and label in edit forms */
.mw-editWatchlist,
.page-mw-watchthis,
label[for="wpWatchthis"],
#wpWatchthis {
display: none !important;
}
/* Align Table of Contents list with the logo above */
ul#mw-panel-toc-list.vector-toc-contents {
margin-left: 6px !important;
}
/* Hide the pinned table of contents header */
.vector-pinnable-header-pinned.vector-toc-pinnable-header.vector-pinnable-header {
display: none !important;
}
/* Remove the empty yellow margin space above the Table of Contents */
#vector-toc,
.vector-toc {
margin-top: 0 !important;
}
/* Default (light mode) logo text */
.mw-logo-wordmark,
.mw-logo-wordmark * {
color: #000000 !important;
font-family: "Mountains of Christmas", serif !important;
font-weight: 700 !important;
}
/* Dark mode & Automatic (OS dark) logo text */
html.skin-theme-clientpref-night .mw-logo-wordmark,
html.skin-theme-clientpref-night .mw-logo-wordmark * {
color: #ffffff !important;
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .mw-logo-wordmark,
html.skin-theme-clientpref-os .mw-logo-wordmark * {
color: #ffffff !important;
}
}
/* Modern styling for all images inside infoboxes */
.infobox img {
border-radius: 8px; /* Rounds image corners */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Adds a subtle depth shadow */
transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth hover transition */
}
/* --- HIDE INSPECTED UNPIN/HIDE BUTTON --- */
.vector-pinnable-header-toggle-button.vector-pinnable-header-unpin-button {
display: none !important;
}
/* --- MINIMALIST MATERIAL (FLOATING STYLE) --- */
/* 1. Hide the Search button */
.cdx-search-input__end-button,
#searchButton {
display: none !important;
}
/* 2. Hide "Search for pages containing..." in the dropdown */
.cdx-menu-item--search-for {
display: none !important;
}
/* 3. Search Bar Container */
.cdx-search-input {
border-radius: 8px !important;
border: 1px solid transparent !important;
background-color: #f1f3f4 !important;
transition: background-color 0.2s, box-shadow 0.2s, border 0.2s;
}
/* Focus State: Becomes white, pops out, and STAYS rounded */
.cdx-search-input:focus-within {
background-color: #ffffff !important;
box-shadow: 0 4px 6px rgba(32, 33, 36, 0.2) !important;
border: 1px solid #dfe1e5 !important;
border-radius: 8px !important; /* Forces all corners to stay rounded */
}
/* 4. Search Dropdown Menu */
.cdx-menu {
border-radius: 8px !important;
box-shadow: 0 6px 12px rgba(32, 33, 36, 0.15) !important;
border: 1px solid #dfe1e5 !important;
margin-top: 8px !important;
background-color: #ffffff !important;
overflow: hidden !important;
padding: 0 !important; /* REMOVES THE WHITE GAP */
}
/* Highlighted Suggestion */
.cdx-menu-item:hover, .cdx-menu-item[aria-selected="true"] {
background-color: #eeeeee !important;
}
/* 5. Fix alignment shifting on focus */
/* Strip default Codex inner borders/shadows that cause the 1px jump */
.cdx-text-input,
.cdx-text-input:focus-within,
.cdx-text-input.cdx-text-input--status-default {
border: none !important;
box-shadow: none !important;
outline: none !important;
background: transparent !important;
}
/* Stop MediaWiki from dynamically resizing the search container width */
.vector-typeahead-search-container {
max-width: none !important;
margin: 0 !important;
transform: none !important;
}
/* 6. Fix text shifting when typing */
/* Lock internal padding & input styling so text never jumps */
.cdx-text-input__input {
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding-right: 32px !important; /* Permanent space for clear button */
transition: none !important; /* Disables padding shift animations */
}
/* Hover state for dropdown items in dark mode */
html.skin-theme-clientpref-night .cdx-menu-item:hover,
html.skin-theme-clientpref-night .cdx-menu-item[aria-selected="true"] {
background-color: #333639 !important;
}
/* ====================================================
1. LIGHT THEME (Explicit Light or OS Light)
==================================================== */
html.skin-theme-clientpref-day,
html.skin-theme-clientpref-day body,
html.skin-theme-clientpref-day .mw-page-container,
html.skin-theme-clientpref-day .mw-header {
background-color: #ffffff !important;
}
@media (prefers-color-scheme: light) {
html.skin-theme-clientpref-os,
html.skin-theme-clientpref-os body,
html.skin-theme-clientpref-os .mw-page-container,
html.skin-theme-clientpref-os .mw-header {
background-color: #ffffff !important;
}
}
/* ====================================================
2. DARK THEME (Explicit Dark or OS Dark)
==================================================== */
html.skin-theme-clientpref-night,
html.skin-theme-clientpref-night body,
html.skin-theme-clientpref-night .mw-page-container,
html.skin-theme-clientpref-night .mw-header {
background-color: #101418 !important;
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os,
html.skin-theme-clientpref-os body,
html.skin-theme-clientpref-os .mw-page-container,
html.skin-theme-clientpref-os .mw-header {
background-color: #101418 !important;
}
}
/* Logo wordmark text white in dark mode & automatic dark */
html.skin-theme-clientpref-night .mw-logo-wordmark {
color: #ffffff !important;
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .mw-logo-wordmark {
color: #ffffff !important;
}
}
/* ====================================================
3. SEARCH BAR DARK OVERRIDES (Night + OS Dark)
==================================================== */
html.skin-theme-clientpref-night .cdx-search-input,
html.skin-theme-clientpref-night .cdx-search-input:focus-within,
html.skin-theme-clientpref-night .cdx-menu {
background-color: #181d23 !important;
border-color: #272d35 !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4) !important;
}
html.skin-theme-clientpref-night .cdx-text-input__input {
color: #f8f9fa !important;
}
@media (prefers-color-scheme: dark) {
html.skin-theme-clientpref-os .cdx-search-input,
html.skin-theme-clientpref-os .cdx-search-input:focus-within,
html.skin-theme-clientpref-os .cdx-menu {
background-color: #181d23 !important;
border-color: #272d35 !important;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4) !important;
}
html.skin-theme-clientpref-os .cdx-text-input__input {
color: #f8f9fa !important;
}
}
/* 1. Hide the Navigation Toolbar (Main Page | Discussion | Read | View source | View history | Tools) */
.vector-page-toolbar,
#p-namespaces,
#p-views,
#p-cactions,
#vector-page-tools-dropdown {
display: none !important;
}