MediaWiki:Common.css: Difference between revisions

From Practices and Politics of Representation
Jump to navigation Jump to search
No edit summary
Tag: Reverted
Remove duplicated banner comment line
 
(65 intermediate revisions by the same user not shown)
Line 1: Line 1:
/* Hide all logos */
/************************************************************
* CLEAN MINIMAL THEME — BLACK & WHITE ONLY
************************************************************/
 
 
/*----------------------------------------------------------
  0. GLOBAL RESET
----------------------------------------------------------*/
 
.mw-wiki-logo,
.mw-wiki-logo,
.mw-logo,
.mw-logo,
Line 12: Line 20:
}
}


/* Hide favicon references */
html {
link[rel="icon"],
    font-size: 18px !important;
link[rel="shortcut icon"],
    -webkit-text-size-adjust: 100% !important;
link[rel="apple-touch-icon"] {
}
     display: none !important;
 
body, h1, h2, h3, h4, h5, h6, p, td, th,
input, textarea, select, button {
    font-family: 'Times New Roman', Times, serif !important;
    color: rgb(0, 0, 0) !important;
    line-height: 1.2 !important;
}
 
body {
     background: rgb(255, 255, 255) !important;
    -webkit-text-size-adjust: 100% !important;
}
}


/* CLEAN FLAT DESIGN CSS - PRESERVES LAYOUT */
a, a:visited {
    color: rgb(0, 0, 255) !important;
    line-height: 1 !important;
}


/* Force all text to Arial font */
a:hover {
*, body, h1, h2, h3, h4, h5, h6, p, div, span, a, li, td, th,
    color: rgb(0, 0, 255) !important;
input, textarea, select, button, .portlet, .pBody {
     text-decoration: underline !important;
     font-family: Arial, sans-serif !important;
}
}


/* Remove ALL shadows, glows, and effects */
/* Remove shadow */
*, *:before, *:after {
* {
     box-shadow: none !important;
     box-shadow: none !important;
     text-shadow: none !important;
     text-shadow: none !important;
    filter: none !important;
    -webkit-filter: none !important;
    -moz-filter: none !important;
}
}


/* Clean up headings - remove underlines but keep structure */
/* Make all borders white (invisible) */
h1, h2, h3, h4, h5, h6 {
*:not(img) {
    border-bottom: none !important;
    border-color: rgb(255, 255, 255) !important;
     background: none !important;
}
    background-image: none !important;
 
    color: #333 !important;
/* Images*/
.mw-body-content img,
.mw-body-content figure,
.mw-body-content .thumb {
width: auto !important;
height: auto !important;
padding-left: 0px !important;
}
 
/*----------------------------------------------------------
  1. HEADER
----------------------------------------------------------*/
 
#mw-head,
#mw-head-base,
#mw-page-base,
.vector-header,
.vector-sticky-header,
.mw-header {
     background: rgb(255, 255, 255) !important;
}
 
/* Align the top menu with the content */
#left-navigation {
  /*  margin-left: 10em !important;*/
}
 
/* Pull the login area inwards */
#p-personal {
  /*  margin-right: 1em !important; */
}
}


/* Page title clean */
#right-navigation {
.firstHeading {
  /* margin-right: 1em !important; */
    border-bottom: none !important;
    background: none !important;
    color: #333 !important;
}
}


/* Sidebar - clean but preserve layout */
 
.portlet {
/*----------------------------------------------------------
     background: none !important;
  2. SIDEBAR
     background-image: none !important;
----------------------------------------------------------*/
     border: none !important;
 
#column-one,
#mw-panel,
.vector-legacy-sidebar {
     background: transparent !important;
     padding-top: 5em !important;
    margin-top: 0 !important;
    width: 250px !important;
}
 
.portlet, .pBody {
     background: rgb(255, 255, 255) !important;
}
}


/* Sidebar headers - clean */
.portlet h3, .portlet h5 {
.portlet h3, .portlet h5 {
    background: none !important;
     color: rgb(0, 0, 0) !important;
    background-image: none !important;
    border: none !important;
    border-bottom: none !important;
     color: #333 !important;
     font-weight: bold !important;
     font-weight: bold !important;
    background: rgb(255, 255, 255) !important;
}
/* Tools gizle */
#p-tb {
    display: none !important;
}
}


/* Sidebar links - clean style */
/* Sidebar links */
.portlet .pBody ul li a {
#mw-panel a,
     color: #0066cc !important;
#mw-panel a:visited,
.vector-legacy-sidebar a,
.portlet a,
.pBody a {
     color: rgb(0, 0, 255) !important;
     text-decoration: none !important;
     text-decoration: none !important;
     background: none !important;
     font-size: 20px !important;
     border: none !important;
     -webkit-text-size-adjust: 100% !important;
}
}


.portlet .pBody ul li a:hover {
#mw-panel a:hover,
    color: #004499 !important;
.vector-legacy-sidebar a:hover,
    background: none !important;
.portlet a:hover,
.pBody a:hover {
     text-decoration: underline !important;
     text-decoration: underline !important;
}
}


/* Move Home to VERY bottom of navigation with large gap */
/*----------------------------------------------------------
#p-navigation .pBody ul {
  3. TABS
    display: flex;
----------------------------------------------------------*/
    flex-direction: column;
    min-height: 300px;
}


#p-navigation .pBody ul li:first-child {
#p-namespaces,
    order: 999;
#p-views,
    margin-top: auto !important;
#p-cactions,
     margin-bottom: 0 !important;
.vector-tabs,
     padding-top: 30px !important;
.vector-menu-tabs {
     border-top: 1px solid #eee !important;
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
}
}


/* Tabs - clean but functional */
#p-namespaces ul,
#p-cactions li {
#p-views ul,
     background: none !important;
#p-cactions ul {
    background-image: none !important;
     background: rgb(255, 255, 255) !important;
    border: 1px solid #ddd !important;
    border-bottom: none !important;
}
}


#p-cactions li a {
    background: none !important;
    background-image: none !important;
    color: #0066cc !important;
    text-decoration: none !important;
}


#p-cactions li.selected {
    background: #ffffff !important;
    border-bottom: 1px solid #ffffff !important;
}


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


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


/* Content area - clean background */
/* Remove tab underline */
#content {
#p-namespaces li.selected a::after,
     background: #ffffff !important;
#p-views li.selected a::after,
     border: 1px solid #ddd !important;
.vector-menu-tabs li.selected a::after {
    display: none !important;
     background: transparent !important;
     border: none !important;
    box-shadow: none !important;
}
}


/* Gallery - remove gray backgrounds and make images larger */
 
.gallery {
/*Menu tabs*/
     background: none !important;
.vector-menu-tabs-legacy li a {
     background: transparent !important;
    background-image: none !important;
     border: none !important;
     border: none !important;
    color: rgb(0, 0, 255) !important;
}
}


.gallerybox {
.vector-menu-tabs-legacy li {
     background: none !important;
     background: transparent !important;
     border: none !important;
     border: none !important;
    width: 200px !important;
    margin: 15px !important;
}
}


.gallerybox .thumb {
/*----------------------------------------------------------
     background: none !important;
  4. PERSONAL MENU (Login vs)
     border: none !important;
----------------------------------------------------------*/
     width: 200px !important;
 
     height: auto !important;
#p-personal {
    background: rgb(255, 255, 255) !important;
}
 
#p-personal ul {
     background: rgb(255, 255, 255) !important;
}
 
 
 
 
/*----------------------------------------------------------
  5. CONTENT
----------------------------------------------------------*/
 
#content {
     background: rgb(255, 255, 255) !important;
     font-size: 38px !important;
     margin-left: 250px !important;
}
}


.gallerybox .thumb img {
.mw-body, .mw-body-content {
     width: 200px !important;
     background: rgb(255, 255, 255) !important;
    height: auto !important;
     font-size: 38px !important;
     max-width: none !important;
}
}


.gallerytext {
/* Headings */
    background: none !important;
h1, h2, h3, h4, h5, h6, .firstHeading {
    border: none !important;
     color: rgb(0, 0, 0) !important;
     color: #666 !important;
    padding: 5px 0 !important;
    text-align: center !important;
}
}


/* Image thumbnails - remove ALL gray backgrounds */
h1 { font-size: 50px !important; }
.thumb {
h2 { font-size: 42px !important; }
    background: none !important;
h3 { font-size: 47px !important; }
     border: none !important;
h4 { font-size: 43px !important; }
 
/* Links */
a, a:visited {
     color: rgb(0, 0, 255) !important;
}
}


.thumbinner {
a:hover {
     background: none !important;
     color: rgb(0, 0, 255) !important;
     background-color: transparent !important;
     text-decoration: underline !important;
    border: none !important;
}
}


.thumbcaption {
 
     background: none !important;
/*----------------------------------------------------------
    border: none !important;
  6. SEARCH
    color: #666 !important;
----------------------------------------------------------*/
 
#p-search,
#simpleSearch,
#searchInput {
     background: rgb(255, 255, 255) !important;
}
}


/* Infobox - CLEAN and simplified */
 
.infobox {
/*----------------------------------------------------------
    background: none !important;
  7. TABLES
    background-color: transparent !important;
----------------------------------------------------------*/
    border: none !important;
 
    border-left: 3px solid #0066cc !important;
table, th, td {
    padding: 15px !important;
     background: rgb(255, 255, 255) !important;
    margin: 0 0 20px 20px !important;
     width: 300px !important;
}
}


.infobox th {
 
    background: none !important;
/*----------------------------------------------------------
    background-image: none !important;
  8. IMAGES
    background-color: transparent !important;
----------------------------------------------------------*/
    border: none !important;
 
    border-bottom: 1px solid #eee !important;
.thumb,
    color: #333 !important;
.thumbinner,
    font-weight: bold !important;
.thumbimage,
    padding: 8px 0 !important;
.gallerybox,
     text-align: left !important;
figure,
figcaption {
     background: transparent !important;
}
}


.infobox td {
.thumbcaption, .gallerytext {
     background: none !important;
     color: rgb(0, 0, 0) !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid #eee !important;
    padding: 8px 0 !important;
    color: #666 !important;
}
}


.infobox tr:last-child th,
 
.infobox tr:last-child td {
/*----------------------------------------------------------
     border-bottom: none !important;
  9. INFOBOX
----------------------------------------------------------*/
 
.infobox, .infobox th, .infobox td {
     background: rgb(255, 255, 255) !important;
}
}


/* Tables - clean borders */
 
table {
/*----------------------------------------------------------
     border-collapse: collapse !important;
  10. FOOTER
     background: none !important;
----------------------------------------------------------*/
 
#footer, #catlinks {
     background: rgb(255, 255, 255) !important;
     color: rgb(0, 0, 0) !important;
}
}


table th {
 
    background: none !important;
 
    background-image: none !important;
 
    border: 1px solid #ddd !important;
/*----------------------------------------------------------
    color: #333 !important;
  11. VISUAL EDITOR
     font-weight: bold !important;
----------------------------------------------------------*/
 
.ve-ui-toolbar,
.ve-ui-toolbar-bar,
.oo-ui-toolbar,
.oo-ui-toolbar-bar,
.oo-ui-toolGroup,
.oo-ui-tool,
.oo-ui-buttonElement-button {
     background: rgb(255, 255, 255) !important;
}
}


table td {
.oo-ui-tool:hover,
     background: none !important;
.oo-ui-buttonElement-button:hover {
    border: 1px solid #ddd !important;
     background: rgb(240, 240, 240) !important;
}
}


/* Forms - clean input fields */
.oo-ui-menuSelectWidget,
input, textarea, select {
.oo-ui-popupWidget-popup,
    border: 1px solid #ccc !important;
.oo-ui-optionWidget,
     background: #ffffff !important;
.oo-ui-menuOptionWidget {
     border-radius: 0 !important;
     background: rgb(255, 255, 255) !important;
     color: rgb(0, 0, 0) !important;
}
}


/* Search box */
.oo-ui-optionWidget:hover {
#searchInput {
     background: rgb(240, 240, 240) !important;
    border: 1px solid #ccc !important;
     background: #ffffff !important;
    border-radius: 0 !important;
}
}


/* Personal tools - clean */
.ve-ui-surface,
#p-personal ul li a {
.ve-ce-surface {
    color: #0066cc !important;
     background: rgb(255, 255, 255) !important;
    text-decoration: none !important;
     background: none !important;
}
}


#p-personal ul li a:hover {
.wikiEditor-ui,
     color: #004499 !important;
.wikiEditor-ui-toolbar {
    text-decoration: underline !important;
     background: rgb(255, 255, 255) !important;
}
}


/* Footer - clean */
 
#footer {
/*----------------------------------------------------------
     background: none !important;
  12. DROPDOWN MENUS
----------------------------------------------------------*/
 
.vector-menu-dropdown .vector-menu-content,
.vector-dropdown-content,
#p-cactions .vector-menu-content {
     background: transparent !important;
     border: none !important;
     border: none !important;
     border-top: 1px solid #eee !important;
     box-shadow: none !important;
     color: #666 !important;
}
 
 
 
/*----------------------------------------------------------
  13. FORMS
----------------------------------------------------------*/
 
input, textarea, select {
    background: rgb(255, 255, 255) !important;
     color: rgb(0, 0, 0) !important;
}
 
.hover-word {
  position: relative;
  text-decoration: underline dotted;
  cursor: help;
}
.hover-word .hover-pop {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: none;
  z-index: 100;
}
.hover-word:hover .hover-pop {
  display: block;
}
}


/* Edit section links */
/* ============================================================
.mw-editsection a {
  14. ALIGN TOP TABS + FOOTER WITH THE HEADING
    color: #0066cc !important;
  The sidebar is 250px wide, so the heading/body sit to its
    text-decoration: none !important;
  right (the large content font adds extra left padding, so the
     background: none !important;
  heading text starts around 305px). By default the top tabs
  ("Page" / "Discussion") and the footer don't follow, so they
  look misaligned. These rules push both to the heading's edge.
 
  NOTE: #left-navigation ignores the `left` property (it is
  floated), so we must use margin-left here, not left.
 
  >>> ONE KNOB: tune --rep-left until "Page" and the footer
      line up with the first letter of the heading.
  ============================================================ */
 
:root {
     --rep-left: 305px;
}
}


.mw-editsection a:hover {
/* Top-left tabs (Page / Discussion) */
    color: #004499 !important;
#left-navigation {
     text-decoration: underline !important;
     margin-left: var(--rep-left) !important;
}
}


/* Categories */
/* Let "Page" sit flush at the column edge (remove tab indent) */
#catlinks {
#p-namespaces li:first-child {
     background: none !important;
     margin-left: 0 !important;
    border: none !important;
}
    border-top: 1px solid #eee !important;
#p-namespaces li:first-child a {
     color: #666 !important;
     padding-left: 0 !important;
}
}


/* Remove gradients from Vector skin */
/* Footer text block */
.vector-menu-tabs li {
#footer {
     background-image: none !important;
    margin-left: var(--rep-left) !important;
     padding-left: 0 !important;
}
}
/* ============================================================
  15. EDITOR INTERFACE FIX
  The large content font (38px) was leaking into the editor
  toolbar and menus. These rules reset the editor UI to a
  normal size. The reading view is not affected.
  ============================================================ */


.vector-menu-tabs a {
/* VisualEditor + OOUI: toolbar, menus, popups, dialogs */
     background-image: none !important;
.ve-ui-toolbar,
.ve-ui-context,
.ve-ui-contextSelectWidget,
.oo-ui-toolbar,
.oo-ui-popupWidget,
.oo-ui-popupWidget-popup,
.oo-ui-menuSelectWidget,
.oo-ui-window,
.oo-ui-dialog,
.oo-ui-defaultOverlay {
     font-size: 14px !important;
    line-height: normal !important;
}
}


/* Clean body but preserve layout */
/* Classic (source) editor toolbar */
body {
.wikiEditor-ui-toolbar {
     background: #ffffff !important;
     font-size: 14px !important;
    line-height: normal !important;
}
}


/* Preserve column layout */
/* Source editing textarea stays readable */
#column-one, #column-content {
#wpTextbox1 {
     background: none !important;
    font-size: 15px !important;
     line-height: 1.5 !important;
}
}


/* Remove only visual effects, keep structure */
/* Give popups/menus a visible border
.mw-body, .mw-body-content {
  (the "white border" rule had made them invisible) */
    background: none !important;
.oo-ui-popupWidget-popup,
     border: none !important;
.oo-ui-menuSelectWidget {
     border: 1px solid rgb(0, 0, 0) !important;
}
}


/* Remove any remaining gray backgrounds */
/* Editor labels in black instead of blue */
.mw-parser-output {
.oo-ui-tool .oo-ui-tool-title,
     background: none !important;
.oo-ui-labelElement-label,
.ve-ui-toolbar a,
.oo-ui-popupWidget a {
     color: rgb(0, 0, 0) !important;
}
}


/* Special handling for any remaining backgrounds */
 
div, span, p {
/* Hover popup opening downwards - for words on the first line */
     background-color: transparent !important;
.hover-word .hover-pop.below {
     top: 100%;
    bottom: auto;
}
}

Latest revision as of 12:19, 7 September 2026

/************************************************************
 * CLEAN MINIMAL THEME — BLACK & WHITE ONLY
 ************************************************************/


/*----------------------------------------------------------
  0. GLOBAL RESET
----------------------------------------------------------*/

.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;
    -webkit-text-size-adjust: 100% !important;
}

body, h1, h2, h3, h4, h5, h6, p, td, th,
input, textarea, select, button {
    font-family: 'Times New Roman', Times, serif !important;
    color: rgb(0, 0, 0) !important;
    line-height: 1.2 !important;
}

body {
    background: rgb(255, 255, 255) !important;
    -webkit-text-size-adjust: 100% !important;
}

a, a:visited {
    color: rgb(0, 0, 255) !important;
    line-height: 1 !important;
}

a:hover {
    color: rgb(0, 0, 255) !important;
    text-decoration: underline !important;
}

/* Remove shadow */
* {
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Make all borders white (invisible) */
*:not(img) {
    border-color: rgb(255, 255, 255) !important;
}

/* Images*/
.mw-body-content img,
.mw-body-content figure,
.mw-body-content .thumb {
width: auto !important;
height: auto !important;
padding-left: 0px !important;
}

/*----------------------------------------------------------
  1. HEADER
----------------------------------------------------------*/

#mw-head,
#mw-head-base,
#mw-page-base,
.vector-header,
.vector-sticky-header,
.mw-header {
    background: rgb(255, 255, 255) !important;
}

/* Align the top menu with the content */
#left-navigation {
  /*  margin-left: 10em !important;*/
}

/* Pull the login area inwards */
#p-personal {
   /*  margin-right: 1em !important; */
}

#right-navigation {
   /*  margin-right: 1em !important; */
}


/*----------------------------------------------------------
  2. SIDEBAR
----------------------------------------------------------*/

#column-one,
#mw-panel,
.vector-legacy-sidebar {
    background: transparent !important;
    padding-top: 5em !important;
    margin-top: 0 !important;
    width: 250px !important;
}

.portlet, .pBody {
    background: rgb(255, 255, 255) !important;
}

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


/* Tools gizle */
#p-tb {
    display: none !important;
}

/* Sidebar links */
#mw-panel a,
#mw-panel a:visited,
.vector-legacy-sidebar a,
.portlet a,
.pBody a {
    color: rgb(0, 0, 255) !important;
    text-decoration: none !important;
    font-size: 20px !important;
    -webkit-text-size-adjust: 100% !important;
}

#mw-panel a:hover,
.vector-legacy-sidebar a:hover,
.portlet a:hover,
.pBody a:hover {
    text-decoration: underline !important;
}

/*----------------------------------------------------------
  3. TABS
----------------------------------------------------------*/

#p-namespaces,
#p-views,
#p-cactions,
.vector-tabs,
.vector-menu-tabs {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#p-namespaces ul,
#p-views ul,
#p-cactions ul {
    background: rgb(255, 255, 255) !important;
}



#p-namespaces li.selected a,
#p-views li.selected a {
    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;
}

/* Remove tab underline */
#p-namespaces li.selected a::after,
#p-views li.selected a::after,
.vector-menu-tabs li.selected a::after {
    display: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/*Menu tabs*/
.vector-menu-tabs-legacy li a {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    color: rgb(0, 0, 255) !important;
}

.vector-menu-tabs-legacy li {
    background: transparent !important;
    border: none !important;
}

/*----------------------------------------------------------
  4. PERSONAL MENU (Login vs)
----------------------------------------------------------*/

#p-personal {
    background: rgb(255, 255, 255) !important;
}

#p-personal ul {
    background: rgb(255, 255, 255) !important;
}




/*----------------------------------------------------------
  5. CONTENT
----------------------------------------------------------*/

#content {
    background: rgb(255, 255, 255) !important;
    font-size: 38px !important;
    margin-left: 250px !important;
}

.mw-body, .mw-body-content {
    background: rgb(255, 255, 255) !important;
    font-size: 38px !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6, .firstHeading {
    color: rgb(0, 0, 0) !important;
}

h1 { font-size: 50px !important; }
h2 { font-size: 42px !important; }
h3 { font-size: 47px !important; }
h4 { font-size: 43px !important; }

/* Links */
a, a:visited {
    color: rgb(0, 0, 255) !important;
}

a:hover {
    color: rgb(0, 0, 255) !important;
    text-decoration: underline !important;
}


/*----------------------------------------------------------
  6. SEARCH
----------------------------------------------------------*/

#p-search,
#simpleSearch,
#searchInput {
    background: rgb(255, 255, 255) !important;
}


/*----------------------------------------------------------
  7. TABLES
----------------------------------------------------------*/

table, th, td {
    background: rgb(255, 255, 255) !important;
}


/*----------------------------------------------------------
  8. IMAGES
----------------------------------------------------------*/

.thumb,
.thumbinner,
.thumbimage,
.gallerybox,
figure,
figcaption {
    background: transparent !important;
}

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


/*----------------------------------------------------------
  9. INFOBOX
----------------------------------------------------------*/

.infobox, .infobox th, .infobox td {
    background: rgb(255, 255, 255) !important;
}


/*----------------------------------------------------------
  10. FOOTER
----------------------------------------------------------*/

#footer, #catlinks {
    background: rgb(255, 255, 255) !important;
    color: rgb(0, 0, 0) !important;
}




/*----------------------------------------------------------
  11. VISUAL EDITOR
----------------------------------------------------------*/

.ve-ui-toolbar,
.ve-ui-toolbar-bar,
.oo-ui-toolbar,
.oo-ui-toolbar-bar,
.oo-ui-toolGroup,
.oo-ui-tool,
.oo-ui-buttonElement-button {
    background: rgb(255, 255, 255) !important;
}

.oo-ui-tool:hover,
.oo-ui-buttonElement-button:hover {
    background: rgb(240, 240, 240) !important;
}

.oo-ui-menuSelectWidget,
.oo-ui-popupWidget-popup,
.oo-ui-optionWidget,
.oo-ui-menuOptionWidget {
    background: rgb(255, 255, 255) !important;
    color: rgb(0, 0, 0) !important;
}

.oo-ui-optionWidget:hover {
    background: rgb(240, 240, 240) !important;
}

.ve-ui-surface,
.ve-ce-surface {
    background: rgb(255, 255, 255) !important;
}

.wikiEditor-ui,
.wikiEditor-ui-toolbar {
    background: rgb(255, 255, 255) !important;
}


/*----------------------------------------------------------
  12. DROPDOWN MENUS
----------------------------------------------------------*/

.vector-menu-dropdown .vector-menu-content,
.vector-dropdown-content,
#p-cactions .vector-menu-content {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}



/*----------------------------------------------------------
  13. FORMS
----------------------------------------------------------*/

input, textarea, select {
    background: rgb(255, 255, 255) !important;
    color: rgb(0, 0, 0) !important;
}

.hover-word {
  position: relative;
  text-decoration: underline dotted;
  cursor: help;
}
.hover-word .hover-pop {
  position: absolute;
  bottom: 100%;
  left: 0;
  display: none;
  z-index: 100;
}
.hover-word:hover .hover-pop {
  display: block;
}

/* ============================================================
   14. ALIGN TOP TABS + FOOTER WITH THE HEADING
   The sidebar is 250px wide, so the heading/body sit to its
   right (the large content font adds extra left padding, so the
   heading text starts around 305px). By default the top tabs
   ("Page" / "Discussion") and the footer don't follow, so they
   look misaligned. These rules push both to the heading's edge.

   NOTE: #left-navigation ignores the `left` property (it is
   floated), so we must use margin-left here, not left.

   >>> ONE KNOB: tune --rep-left until "Page" and the footer
       line up with the first letter of the heading.
   ============================================================ */

:root {
    --rep-left: 305px;
}

/* Top-left tabs (Page / Discussion) */
#left-navigation {
    margin-left: var(--rep-left) !important;
}

/* Let "Page" sit flush at the column edge (remove tab indent) */
#p-namespaces li:first-child {
    margin-left: 0 !important;
}
#p-namespaces li:first-child a {
    padding-left: 0 !important;
}

/* Footer text block */
#footer {
    margin-left: var(--rep-left) !important;
    padding-left: 0 !important;
}
/* ============================================================
   15. EDITOR INTERFACE FIX
   The large content font (38px) was leaking into the editor
   toolbar and menus. These rules reset the editor UI to a
   normal size. The reading view is not affected.
   ============================================================ */

/* VisualEditor + OOUI: toolbar, menus, popups, dialogs */
.ve-ui-toolbar,
.ve-ui-context,
.ve-ui-contextSelectWidget,
.oo-ui-toolbar,
.oo-ui-popupWidget,
.oo-ui-popupWidget-popup,
.oo-ui-menuSelectWidget,
.oo-ui-window,
.oo-ui-dialog,
.oo-ui-defaultOverlay {
    font-size: 14px !important;
    line-height: normal !important;
}

/* Classic (source) editor toolbar */
.wikiEditor-ui-toolbar {
    font-size: 14px !important;
    line-height: normal !important;
}

/* Source editing textarea stays readable */
#wpTextbox1 {
    font-size: 15px !important;
    line-height: 1.5 !important;
}

/* Give popups/menus a visible border
   (the "white border" rule had made them invisible) */
.oo-ui-popupWidget-popup,
.oo-ui-menuSelectWidget {
    border: 1px solid rgb(0, 0, 0) !important;
}

/* Editor labels in black instead of blue */
.oo-ui-tool .oo-ui-tool-title,
.oo-ui-labelElement-label,
.ve-ui-toolbar a,
.oo-ui-popupWidget a {
    color: rgb(0, 0, 0) !important;
}


/* Hover popup opening downwards - for words on the first line */
.hover-word .hover-pop.below {
    top: 100%;
    bottom: auto;
}