Jump to content

MediaWiki:Common.css: Difference between revisions

From Fedoverse Wiki, the free encyclopedia
No edit summary
No edit summary
Line 139: Line 139:
}
}


/* --- Modernized Search Bar Styling --- */
/* --- OPTION 1: SOFT & PILL-SHAPED --- */
/* --- Fixed Modern Search Bar --- */
/* Search Bar Container */
.cdx-search-input {
    border-radius: 24px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #eaeced !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease-in-out;
}
 
.cdx-search-input:focus-within {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
    border-color: #c8ccd1 !important;
}
 
/* Remove default input styling */
.cdx-text-input__input {
    border: none !important;
    box-shadow: none !important;
    padding-left: 20px !important;
    background: transparent !important;
}
 
/* Search Dropdown Menu */
.cdx-menu {
    border-radius: 16px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #eaeced !important;
    margin-top: 8px !important;
    padding: 8px !important;
}
 
/* Highlighted Suggestion */
.cdx-menu-item:hover, .cdx-menu-item[aria-selected="true"] {
    background-color: #f5f6f7 !important;
    border-radius: 8px !important;
}

Revision as of 16:20, 30 July 2026

/* 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 Vector 2022 specific hamburger menu & main menu toggles */
body.not-logged-in #vector-main-menu-dropdown,
body.not-logged-in #vector-page-tools-dropdown,
body.not-logged-in .vector-header-end #p-user-menu-overflow {
    display: none !important;
}

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

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

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

@media screen {
    body {
        background-color: #ffffff !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-column-start,
#vector-toc,
.vector-toc {
    margin-top: 0 !important;
}

.mw-logo-wordmark {
    /* Change to your desired color (hex code or name) */
    color: #000000 !important; 
    
    /* Change to your desired font */
    font-family: "Mountains of Christmas", serif !important;
    
    /* Change weight: can be 'normal', 'bold', or a number like 400, 700 */
    font-weight: 700 !important; 
}

img.mw-logo-icon {
    margin-right: 8 !important;
}

#siteSub {
    display: block !important;
}

/* Force the wiki icon to display on mobile screens */
@media screen and (max-width: 999px) {
    .mw-logo-icon {
        display: inline-block !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 */
}

/* --- OPTION 1: SOFT & PILL-SHAPED --- */
/* Search Bar Container */
.cdx-search-input {
    border-radius: 24px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    border: 1px solid #eaeced !important;
    background-color: #ffffff !important;
    overflow: hidden !important;
    transition: box-shadow 0.2s ease-in-out;
}

.cdx-search-input:focus-within {
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12) !important;
    border-color: #c8ccd1 !important;
}

/* Remove default input styling */
.cdx-text-input__input {
    border: none !important;
    box-shadow: none !important;
    padding-left: 20px !important;
    background: transparent !important;
}

/* Search Dropdown Menu */
.cdx-menu {
    border-radius: 16px !important;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12) !important;
    border: 1px solid #eaeced !important;
    margin-top: 8px !important;
    padding: 8px !important;
}

/* Highlighted Suggestion */
.cdx-menu-item:hover, .cdx-menu-item[aria-selected="true"] {
    background-color: #f5f6f7 !important;
    border-radius: 8px !important;
}