MediaWiki:Common.css: Difference between revisions

From Practices and Politics of Representation
Jump to navigation Jump to search
No edit summary
Remove duplicated banner comment line
 
(49 intermediate revisions by the same user not shown)
Line 1: Line 1:
/************************************************************
/************************************************************
  * CLEAN MINIMAL MEDIAWIKI THEME
  * CLEAN MINIMAL THEME — BLACK & WHITE ONLY
* Full RGB • No Gradients • No Shadows • Responsive • Safari Safe
  ************************************************************/
  ************************************************************/




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


.mw-wiki-logo,
.mw-wiki-logo,
Line 23: Line 22:
html {
html {
     font-size: 18px !important;
     font-size: 18px !important;
    -webkit-text-size-adjust: 100% !important;
}
}


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


body {
body {
     background: #ffffff !important;
     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 all shadows everywhere */
/* Remove shadow */
.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;
     box-shadow: none !important;
     text-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 + TOP NAVIGATION (FIXED, NON-TRANSPARENT)
   1. HEADER
============================================================*/
----------------------------------------------------------*/


#mw-head,
#mw-head,
Line 57: Line 75:
#mw-page-base,
#mw-page-base,
.vector-header,
.vector-header,
.mw-header,
.vector-sticky-header,
.vector-sticky-header {
.mw-header {
     background: #ffffff !important;
     background: rgb(255, 255, 255) !important;
    box-shadow: none !important;
}
    filter: none !important;
    border-bottom: 1px solid #eaeaea !important;


    display: flex !important;
/* Align the top menu with the content */
    align-items: center !important;
#left-navigation {
    min-height: 56px !important;
  /*  margin-left: 10em !important;*/
}
}


/* Safari compatibility */
/* Pull the login area inwards */
#left-navigation,
#p-personal {
.vector-page-toolbar {
  /*  margin-right: 1em !important; */
    display: flex !important;
    align-items: center !important;
}
}


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




/* Tab links (Read / Edit / View / More...) */
/*----------------------------------------------------------
#p-namespaces li a,
  2. SIDEBAR
#p-views li a,
----------------------------------------------------------*/
#p-cactions li a,
 
#p-personal ul li a {
#column-one,
     display: flex !important;
#mw-panel,
     align-items: center !important;
.vector-legacy-sidebar {
     height: 36px !important;
     background: transparent !important;
    padding: 8px 15px !important;
     padding-top: 5em !important;
    background: none !important;
     margin-top: 0 !important;
     color: rgb(0, 102, 255) !important;
     width: 250px !important;
}
}


#p-namespaces li.selected a,
.portlet, .pBody {
#p-views li.selected a,
    background: rgb(255, 255, 255) !important;
#p-cactions li.selected a {
}
     color: rgb(20,20,20) !important;
 
.portlet h3, .portlet h5 {
     color: rgb(0, 0, 0) !important;
     font-weight: bold !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;
}
}


#p-namespaces li a:hover,
#mw-panel a:hover,
#p-views li a:hover,
.vector-legacy-sidebar a:hover,
#p-cactions li a:hover {
.portlet a:hover,
    background: rgb(240,240,240) !important;
.pBody a:hover {
     color: rgb(0,51,204) !important;
     text-decoration: underline !important;
}
}


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


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


#p-namespaces li.selected a::after,
#p-namespaces ul,
#p-views li.selected a::after {
#p-views ul,
     content: none !important;
#p-cactions ul {
     background: rgb(255, 255, 255) !important;
}
}




/* Search box */
 
#simpleSearch {
#p-namespaces li.selected a,
     display: flex !important;
#p-views li.selected a {
    align-items: center !important;
     font-weight: bold !important;
    background: #ffffff !important;
}
     transform: scale(0.85);
 
    transform-origin: right center;
#p-namespaces li a:hover,
#p-views li a:hover,
#p-cactions li a:hover {
     background: rgb(240, 240, 240) !important;
}
}


#searchInput {
/* Remove tab underline */
    height: 28px !important;
#p-namespaces li.selected a::after,
    width: 140px !important;
#p-views li.selected a::after,
     padding: 4px 6px !important;
.vector-menu-tabs li.selected a::after {
     font-size: 0.95rem !important;
     display: none !important;
     border: 1px solid #ccc !important;
     background: transparent !important;
     background: #ffffff !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;
}


/*============================================================
/*----------------------------------------------------------
   2. EDITOR TOOLBARS (VisualEditor + WikiEditor)
   4. PERSONAL MENU (Login vs)
============================================================*/
----------------------------------------------------------*/


#wikiEditor-ui-toolbar,
#p-personal {
.wikiEditor-ui,
     background: rgb(255, 255, 255) !important;
.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 */
#p-personal ul {
.wikiEditor-ui-toolbar .group .menu,
     background: rgb(255, 255, 255) !important;
.oo-ui-dropdownWidget,
.oo-ui-menuSelectWidget,
.oo-ui-menuSelectWidget-menu {
     background: #ffffff !important;
    z-index: 9999 !important;
}
}






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


#column-one {
/*----------------------------------------------------------
     display: flex !important;
  5. CONTENT
     flex-direction: column !important;
----------------------------------------------------------*/
     min-height: 100vh !important;
 
    background: none !important;
#content {
     background: rgb(255, 255, 255) !important;
     font-size: 38px !important;
     margin-left: 250px !important;
}
}


#mw-panel,
.mw-body, .mw-body-content {
.vector-legacy-sidebar {
     background: rgb(255, 255, 255) !important;
     background: none !important;
    font-size: 38px !important;
}
}


#p-navigation {
/* Headings */
     order: 999 !important;
h1, h2, h3, h4, h5, h6, .firstHeading {
    margin-top: auto !important;
     color: rgb(0, 0, 0) !important;
    padding-top: 60px !important;
    border-top: 1px solid #eee !important;
}
}


.portlet h3,
h1 { font-size: 50px !important; }
.portlet h5 {
h2 { font-size: 42px !important; }
    color: rgb(20,20,20) !important;
h3 { font-size: 47px !important; }
    font-weight: bold !important;
h4 { font-size: 43px !important; }
     background: none !important;
 
/* Links */
a, a:visited {
     color: rgb(0, 0, 255) !important;
}
}


.portlet .pBody ul li a {
a:hover {
     color: rgb(0,102,255) !important;
     color: rgb(0, 0, 255) !important;
     text-decoration: none !important;
     text-decoration: underline !important;
}
}
.portlet .pBody ul li a:hover {
 
     color: rgb(0,51,204) !important;
 
    text-decoration: underline !important;
/*----------------------------------------------------------
  6. SEARCH
----------------------------------------------------------*/
 
#p-search,
#simpleSearch,
#searchInput {
     background: rgb(255, 255, 255) !important;
}
}




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


/*============================================================
table, th, td {
  4. CONTENT AREA (Responsive + Clean)
    background: rgb(255, 255, 255) !important;
============================================================*/
}


#content,
 
.mw-body,
/*----------------------------------------------------------
.mw-body-content {
  8. IMAGES
     background: none !important;
----------------------------------------------------------*/
    border: none !important;
 
.thumb,
.thumbinner,
.thumbimage,
.gallerybox,
figure,
figcaption {
     background: transparent !important;
}
}


#content {
.thumbcaption, .gallerytext {
     background: #ffffff !important;
     color: rgb(0, 0, 0) !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;
  9. INFOBOX
    color: rgb(20,20,20) !important;
----------------------------------------------------------*/
 
.infobox, .infobox th, .infobox td {
     background: rgb(255, 255, 255) !important;
}
}


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






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


.mw-body-content,
/*----------------------------------------------------------
#content,
  11. VISUAL EDITOR
#mw-content-text {
----------------------------------------------------------*/
    max-width: 1100px !important;
 
    margin-left: auto !important;
.ve-ui-toolbar,
     margin-right: auto !important;
.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;
}
}


@media (max-width: 1100px) {
.oo-ui-tool:hover,
    .mw-body-content,
.oo-ui-buttonElement-button:hover {
    #content,
    background: rgb(240, 240, 240) !important;
    #mw-content-text {
        max-width: 90% !important;
    }
}
}


@media (max-width: 700px) {
.oo-ui-menuSelectWidget,
    .mw-body-content,
.oo-ui-popupWidget-popup,
    #content,
.oo-ui-optionWidget,
    #mw-content-text {
.oo-ui-menuOptionWidget {
        max-width: 100% !important;
    background: rgb(255, 255, 255) !important;
        padding: 0 16px !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,
  6. IMAGES / GALLERIES
.wikiEditor-ui-toolbar {
============================================================*/
    background: rgb(255, 255, 255) !important;
}


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


.gallerybox {
/*----------------------------------------------------------
    width: 200px !important;
  12. DROPDOWN MENUS
    margin: 15px !important;
----------------------------------------------------------*/
}


.gallerybox .thumb img {
.vector-menu-dropdown .vector-menu-content,
     width: 200px !important;
.vector-dropdown-content,
     height: auto !important;
#p-cactions .vector-menu-content {
     background: transparent !important;
    border: none !important;
     box-shadow: none !important;
}
}


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




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


/*============================================================
input, textarea, select {
  7. TABLES
    background: rgb(255, 255, 255) !important;
============================================================*/
    color: rgb(0, 0, 0) !important;
}


table {
.hover-word {
    border-collapse: collapse !important;
  position: relative;
    background: none !important;
  text-decoration: underline dotted;
  cursor: help;
}
}
table th, table td {
.hover-word .hover-pop {
    border: 1px solid #ddd !important;
  position: absolute;
    padding: 6px !important;
  bottom: 100%;
  left: 0;
  display: none;
  z-index: 100;
}
}
table th {
.hover-word:hover .hover-pop {
    font-weight: bold !important;
  display: block;
    color: rgb(20,20,20) !important;
}
}


/* ============================================================
  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
  8. INFOBOX
      line up with the first letter of the heading.
============================================================*/
  ============================================================ */


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


.infobox th,
/* Top-left tabs (Page / Discussion) */
.infobox td {
#left-navigation {
     border-bottom: 1px solid #eee !important;
     margin-left: var(--rep-left) !important;
    padding: 8px 0 !important;
}
}


.infobox tr:last-child th,
/* Let "Page" sit flush at the column edge (remove tab indent) */
.infobox tr:last-child td {
#p-namespaces li:first-child {
     border-bottom: none !important;
    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 */
  9. FORMS
.wikiEditor-ui-toolbar {
============================================================*/
    font-size: 14px !important;
    line-height: normal !important;
}


input, textarea, select {
/* Source editing textarea stays readable */
    border: 1px solid #ccc !important;
#wpTextbox1 {
     background: #ffffff !important;
     font-size: 15px !important;
     border-radius: 0 !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;
}


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


#footer,
/* Hover popup opening downwards - for words on the first line */
#catlinks {
.hover-word .hover-pop.below {
     background: none !important;
     top: 100%;
    border-top: 1px solid #eee !important;
     bottom: auto;
     color: rgb(110,110,110) !important;
}
}

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