MediaWiki:Common.css

/************************************************************
 * CLEAN MINIMAL MEDIAWIKI THEME
 * Full RGB • No Gradients • No Shadows • Responsive • Safari Safe
 ************************************************************/


/*============================================================
  0. GLOBAL RESET / TYPOGRAPHY
============================================================*/

.mw-wiki-logo,
.mw-logo,
.mw-logo-icon,
.mw-logo-wordmark,
.vector-logo,
#p-logo,
#p-logo a,
.mw-logo-container {
    display: none !important;
    visibility: hidden !important;
}

html {
    font-size: 18px !important;
}

body, h1, h2, h3, h4, h5, h6, p, div, span, a, li, td, th,
input, textarea, select, button {
    font-family: Arial, sans-serif !important;
    color: rgb(30, 30, 30) !important;
    line-height: 1.62 !important;
    background: transparent !important;
}

body {
    background: #ffffff !important;
}


/* Remove all shadows everywhere */
.portlet, .pBody, #content, #column-content, #column-one,
.portlet h3, .portlet h5, .gallerybox,
.thumb, .thumbinner, .infobox, table, #footer,
#p-cactions, .vector-menu-tabs {
    box-shadow: none !important;
    text-shadow: none !important;
}



/*============================================================
  1. HEADER + TOP NAVIGATION (FIXED, NON-TRANSPARENT)
============================================================*/

#mw-head,
#mw-head-base,
#mw-page-base,
.vector-header,
.mw-header,
.vector-sticky-header {
    background: #ffffff !important;
    box-shadow: none !important;
    filter: none !important;
    border-bottom: 1px solid #eaeaea !important;

    display: flex !important;
    align-items: center !important;
    min-height: 56px !important;
}

/* Safari compatibility */
#left-navigation,
.vector-page-toolbar {
    display: flex !important;
    align-items: center !important;
}

#right-navigation {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important;
}


/* Tab links (Read / Edit / View / More...) */
#p-namespaces li a,
#p-views li a,
#p-cactions li a,
#p-personal ul li a {
    display: flex !important;
    align-items: center !important;
    height: 36px !important;
    padding: 8px 15px !important;
    background: none !important;
    color: rgb(0, 102, 255) !important;
}

#p-namespaces li.selected a,
#p-views li.selected a,
#p-cactions li.selected a {
    color: rgb(20,20,20) !important;
    font-weight: bold !important;
}

#p-namespaces li a:hover,
#p-views li a:hover,
#p-cactions li a:hover {
    background: rgb(240,240,240) !important;
    color: rgb(0,51,204) !important;
}


/* Remove all borders/underlines from tabs */
#p-namespaces,
#p-views,
#p-cactions,
#left-navigation,
#right-navigation,
.vector-tabs,
.vector-menu-tabs {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
}

#p-namespaces li.selected a::after,
#p-views li.selected a::after {
    content: none !important;
}


/* Search box */
#simpleSearch {
    display: flex !important;
    align-items: center !important;
    background: #ffffff !important;
    transform: scale(0.85);
    transform-origin: right center;
}

#searchInput {
    height: 28px !important;
    width: 140px !important;
    padding: 4px 6px !important;
    font-size: 0.95rem !important;
    border: 1px solid #ccc !important;
    background: #ffffff !important;
}



/*============================================================
  2. EDITOR TOOLBARS (VisualEditor + WikiEditor)
============================================================*/

#wikiEditor-ui-toolbar,
.wikiEditor-ui,
.wikiEditor-ui-toolbar,
.ve-init-mw-desktopArticleTarget-toolbar,
.mw-editToolbar,
#toolbar,
#editform .toolbar {
    background: #ffffff !important;
    border-bottom: 1px solid #eaeaea !important;
    box-shadow: none !important;
}

/* Dropdowns inside editor */
.wikiEditor-ui-toolbar .group .menu,
.oo-ui-dropdownWidget,
.oo-ui-menuSelectWidget,
.oo-ui-menuSelectWidget-menu {
    background: #ffffff !important;
    z-index: 9999 !important;
}



/*============================================================
  3. SIDEBAR
============================================================*/

#column-one {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100vh !important;
    background: none !important;
}

#mw-panel,
.vector-legacy-sidebar {
    background: none !important;
}

#p-navigation {
    order: 999 !important;
    margin-top: auto !important;
    padding-top: 60px !important;
    border-top: 1px solid #eee !important;
}

.portlet h3,
.portlet h5 {
    color: rgb(20,20,20) !important;
    font-weight: bold !important;
    background: none !important;
}

.portlet .pBody ul li a {
    color: rgb(0,102,255) !important;
    text-decoration: none !important;
}
.portlet .pBody ul li a:hover {
    color: rgb(0,51,204) !important;
    text-decoration: underline !important;
}



/*============================================================
  4. CONTENT AREA (Responsive + Clean)
============================================================*/

#content,
.mw-body,
.mw-body-content {
    background: none !important;
    border: none !important;
}

#content {
    background: #ffffff !important;
    border: 1px solid #ddd !important;
    border-top: none !important;
    margin-top: 24px !important;
}

/* Headings */
h1 { font-size: 2rem !important; }
h2 { font-size: 1.6rem !important; }
h3 { font-size: 1.35rem !important; }
h4 { font-size: 1.15rem !important; }
h5 { font-size: 1rem !important; }
h6 { font-size: 0.9rem !important; }

h1, h2, h3, h4, h5, h6, .firstHeading {
    border: none !important;
    color: rgb(20,20,20) !important;
}

/* Edit section links */
.mw-editsection a {
    color: rgb(0,102,255) !important;
}
.mw-editsection a:hover {
    color: rgb(0,51,204) !important;
    text-decoration: underline !important;
}



/*============================================================
  5. RESPONSIVE CONTENT WIDTH
============================================================*/

.mw-body-content,
#content,
#mw-content-text {
    max-width: 1100px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 1100px) {
    .mw-body-content,
    #content,
    #mw-content-text {
        max-width: 90% !important;
    }
}

@media (max-width: 700px) {
    .mw-body-content,
    #content,
    #mw-content-text {
        max-width: 100% !important;
        padding: 0 16px !important;
    }
}



/*============================================================
  6. IMAGES / GALLERIES
============================================================*/

.gallerybox,
.gallerybox .thumb,
.thumb,
.thumbinner {
    background: none !important;
    border: none !important;
}

.gallerybox {
    width: 200px !important;
    margin: 15px !important;
}

.gallerybox .thumb img {
    width: 200px !important;
    height: auto !important;
}

.gallerytext,
.thumbcaption {
    color: rgb(110,110,110) !important;
}



/*============================================================
  7. TABLES
============================================================*/

table {
    border-collapse: collapse !important;
    background: none !important;
}
table th, table td {
    border: 1px solid #ddd !important;
    padding: 6px !important;
}
table th {
    font-weight: bold !important;
    color: rgb(20,20,20) !important;
}



/*============================================================
  8. INFOBOX
============================================================*/

.infobox {
    background: none !important;
    border-left: 3px solid rgb(0,180,255) !important;
    padding: 15px !important;
    margin: 0 0 20px 20px !important;
}

.infobox th,
.infobox td {
    border-bottom: 1px solid #eee !important;
    padding: 8px 0 !important;
}

.infobox tr:last-child th,
.infobox tr:last-child td {
    border-bottom: none !important;
}



/*============================================================
  9. FORMS
============================================================*/

input, textarea, select {
    border: 1px solid #ccc !important;
    background: #ffffff !important;
    border-radius: 0 !important;
}



/*============================================================
  10. FOOTER
============================================================*/

#footer,
#catlinks {
    background: none !important;
    border-top: 1px solid #eee !important;
    color: rgb(110,110,110) !important;
}

/************************************************************
 * FIX: VisualEditor + OOUI Popups, Insert Menu, Media Settings
 * Removes transparency, sets solid white background everywhere
 ************************************************************/

/* Main VisualEditor popup panels */
.oo-ui-window,
.oo-ui-dialog,
.oo-ui-window-frame,
.oo-ui-dialog-content,
.oo-ui-window-content,
.oo-ui-dialog-body {
    background: #ffffff !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid #dcdcdc !important;
}

/* VE Insert menu dropdown */
.ve-ui-toolbar-popup,
.ve-ui-toolbar-popupToolGroup,
.ve-ui-toolbar .oo-ui-toolGroup-tools,
.oo-ui-toolGroup-tools,
.ve-ui-toolbar-popupWidget,
.ve-ui-toolbar .oo-ui-popupWidget,
.oo-ui-popupWidget-popup,
.oo-ui-popupWidget-body {
    background: #ffffff !important;
    border: 1px solid #dcdcdc !important;
    box-shadow: none !important;
}

/* VE “Media settings” panel */
.ve-ui-mediaDialog-panel,
.ve-ui-mediaDialog-info,
.ve-ui-mediaDialog-options,
.ve-ui-mediaDialog-content {
    background: #ffffff !important;
    border: none !important;
}

/* Search + Upload area inside media dialog */
.ve-ui-mediaSearchWidget,
.ve-ui-mediaSearchWidget-input,
.ve-ui-mediaSearchWidget .oo-ui-textInputWidget,
.ve-ui-mediaSearchWidget .oo-ui-inputWidget-input {
    background: #ffffff !important;
    border: 1px solid #cfcfcf !important;
}

/* Media results strip */
.ve-ui-mediaResultWidget,
.ve-ui-mediaResultWidget-thumb,
.ve-ui-mediaResultWidget-info {
    background: #ffffff !important;
}

/* All OOUI menus globally */
.oo-ui-menuSelectWidget,
.oo-ui-menuSelectWidget-menu,
.oo-ui-selectWidget,
.oo-ui-dropdownWidget-menu,
.oo-ui-listToolGroup-tools {
    background: #ffffff !important;
    border: 1px solid #dcdcdc !important;
    box-shadow: none !important;
}

/* Remove transparent overlays */
.oo-ui-windowManager,
.oo-ui-windowManager-modal > .oo-ui-window-frame,
.oo-ui-windowManager > .oo-ui-window-frame {
    background: rgba(255,255,255,1) !important;
}

/* Force toolbar dropdown background */
.oo-ui-toolGroup,
.oo-ui-toolGroup-enabled,
.oo-ui-toolGroup-active {
    background: #ffffff !important;
}

/************************************************************
 * FIX: WikiEditor (Source Editor) Panels and Character Menus
 * Makes advanced tools solid white and restores proper layout
 ************************************************************/

/* Main Wikitext editor container */
.wikiEditor-ui,
.wikiEditor-ui-toolbar,
.wikiEditor-ui-view,
#wikiEditor-ui-toolbar {
    background: #ffffff !important;
    border-bottom: 1px solid #e1e1e1 !important;
}

/* Toolbar groups (Advanced, Special characters, Help) */
.wikiEditor-ui-toolbar .group,
.wikiEditor-ui-toolbar .section,
.wikiEditor-ui-toolbar .tabs,
.wikiEditor-ui-toolbar .tabs span {
    background: #ffffff !important;
    border: none !important;
}

/* Character selection panel box */
.wikiEditor-ui-toolbar .sections-wrapper,
#wikiEditor-ui-toolbar .sections-wrapper,
.wikiEditor-ui-toolbar .section-main,
#wikiEditor-ui-toolbar .section-main {
    background: #ffffff !important;
    border: 1px solid #dcdcdc !important;
    box-shadow: none !important;
}

/* Character buttons */
.wikiEditor-ui-toolbar .section-main .character {
    background: #ffffff !important;
    border: 1px solid #e0e0e0 !important;
    color: #222 !important;
}

.wikiEditor-ui-toolbar .section-main .character:hover {
    background: #f0f0f0 !important;
}

/* Prevent toolbar overlap */
#editform,
.mw-editform,
textarea#wpTextbox1 {
    background: #ffffff !important;
    z-index: 1 !important;
}

/* Fixes the overlapping top border with tabs */
#mw-content-text,
#content {
    padding-top: 20px !important;
}