MediaWiki talk:Timeless.css
Colored text for use on pages[edit source | reply | new]
Can this be added to the end of the existing code, it will allow several colors of text that will change to a lighter shade on this skin. User:Kmdenmark. See related changed at MediaWiki_talk:Common.css. This will be useful in some tables and for positive / negative symbols, possibly for viruses and bacteria. Thank you ~Njt (talk) 01:26, August 22, 2020 (UTC)
/* text colors */ .green { color: #33cc33;} .red { color: #FF2000;} .blue { color: skyblue;} .gray { color: lightgray;} /* dark text shadow, for use on light backgrounds */ .shadow { text-shadow: 2px 2px 4px #000;}
This test code will only work when switching to the Timeless dark skin
Background color #33333.
This is green.
This is red.
This is blue.
This is gray.
Text shadow over a light background.
Old requests[edit source | reply | new]
Non-urgent change[edit source | reply | new]
content hidden |
---|
Please remove this code from the first place it appears (it incorrectly appears twice). ~Njt (talk) 09:53, November 4, 2019 (EST) /* Dropdown box autocomplete must not be navy */ /* Search results suggestion box */ .suggestions-results, .suggestions-special { background-color: #000; border: solid 1px #aaa!important; color: #ccc; } |
More colors[edit source | reply | new]
content hidden |
---|
External links are still sometimes orange, please change this code:
Thanks ~Njt (talk) 23:36, November 12, 2019 (EST)
/* external links light blue-gray not rapture blue */ .mw-body-content a.external, .mw-body-content a.interwiki, .mw-body a.extiw, a.extiw::after, .mw-body-content a.interwiki:link, .mw-body-content a.interwiki:visited, .uls-language-list a, a.external:visited, a.external:hover, a.external:active, a.external:active::after { color: #A7C5DC; } to: /* external links light blue-gray not rapture blue */ .mw-body-content a.external, .mw-body-content a.interwiki, .mw-body a.extiw, .mw-body-content a.interwiki:link, .mw-body-content a.interwiki:visited, .uls-language-list a, a.external:link, a.external:visited, a.external:hover, a.external:active { color: #A7C5DC!important; } |
.box syntax error (and legend css hack error)[edit source | reply | new]
content hidden |
---|
It seems that a syntax error may be causing some lines not to work. I presume it's valid for .less files but not in this css. Can you change this: /* recent changes colors */ .mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions { color: #ccc; .box; } to: /* recent changes colors */ .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions { color: #ccc; } Then also change the legend code from: legend a { .current: #eee!important; :link: #eee!important; :visited: #eee!important; } to: fieldset, legend, legend a, legend a.current, legend a:link, legend a:visited { color: #eee!important; } I am having problems with both legend and fieldset values not working, although it may need other changes yet. Thanks User:Pyrrhus ~Njt (talk) 21:10, November 9, 2019 (EST)
|
content hidden |
---|
Please overwrite MediaWiki:Timeless.css code with this instead[edit source | reply | new]User:Kmdenmark can do you this? It should improve color contrast, and restore the layout and the missing user preferences for mobile users, who currently have to change skins back in Special:SpecialPages. It will also remove the Merriweather font since the new default font is much nicer. There will probably may to be a few more changes after this. Thanks notjusttired (talk) User:JenB Can you copy this code below over to MediaWiki:Timeless.css. notjusttired (talk) 18:11, June 1, 2019 (EDT)
Portal code change[edit source | reply | new]User:Pyrrhus please change (overwrite) this code: /* Portal box colors */ .boxbackground { background: #333!important; color: #ccc!important; border-color: #222!important; border-width: 2px; } .boxtitlecolor { color: #eee!important; } /* Color code snippets incl for errors */ code { background-color: transparent; color: #000; font-weight:bold; } .error code { color: #FF4444; } with this new code: /* Portal box colors */ .boxbackground { background: #333!important; color: #ccc!important; border-color: #222!important; border-width: 2px; } .boxtitlecolor, .whitetext { color: #eee!important; } .whitetext { box-shadow: none; } .boxtitlebackground { background: #000!important; border-color: #000!important; } /* Color code snippets incl for errors */ code { background-color: #ccc; color: #000; font-weight:bold; } .error code { color: #FF4444; } Note that only some posts have changed. The main difference should be that clicking on a portal will make the portal heading colors better in the timeless skin. Thanks ~Njt (talk) 20:15, October 23, 2019 (EDT) New code[edit source | reply | new]Please add to the end of existing code. Changes are:
Thanks ~Njt (talk) 20:22, October 23, 2019 (EDT) /* transparent logo needs white background to get black text visible */ .mw-wiki-logo img { background-color: #FFF; } .thumbinner { background-color: transparent; color: #ccc; border-color: #222; } /* Dark colors for use over colored backgrounds, sets paler text and changes border color of there is a border */ .darkskin { color: #ccc!important; box-shadow: none; border-color: #222!important; } /* Code editing colors */ .mi, .mh, .kp, .kc { color: #eee!important;} .p, .o { color: #aaa!important;} .k, .ki, .mt { color: lightgreen!important;} .nc, .nt { color: skyblue!important;} .c { color: lightgray!important;} .cp { color: palegoldenrod!important; } .nb, .nn {color: #f5b561!important;} .nd {color: #EE2222!important ;} /* recent changes colors */ .mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions { color: #ccc; .box; } .oo-ui-popupWidget { font-size: 95%; width: 95% !important; /* Color gets inverted */ background: #eee; } .mw-echo-ui-notificationItemWidget { /* these colors get inverted */ color: #000!important ; background: #fff !important; width: 100%; } /* Alerts heading plus body background */ .oo-ui-popupWidget-popup { /* colors get inverted */ background: #eee; color: #333 !important; margin-left: 1rem !important ; width: 95vw !important; max-width: 100vw !important; } .oo-ui-popupWidget-body { background: transparent !important; } /* echo alerts popup heading */ .oo-ui-popupWidget-head > .oo-ui-labelElement-label { color: #ccc!important; } .mw-echo-ui-notificationItemWidget * { color: #000!important; background: transparent!important ; } .mw-echo-ui-notificationItemWidget .oo-ui-clippableElement-clippable { background: transparent; } .oo-ui-popupWidget-footer .oo-ui-labelElement-label { color: #333!important; } .oo-ui-popupWidget-head, .oo-ui-popupWidget-footer { filter: invert(100%); background: #000 !important ; } Image invert code, no Borders, and logo name spacing[edit source | reply | new]User:Pyrrhus Please change the following to fix the logo make, and add the new code to create classes that inverts any image, and forces a no invert, and removes any border ideally this should go after the thumbinner and thumb css. * Now ready to do * Thanks ~Njt (talk) 11:43, October 27, 2019 (EDT)
Old code: #p-logo-text a::before { content: "#"; font-family: Oswald, sans-serif; font-style: italic; font-variant: normal; margin-right: -0.3em; } Changed code for #MEpedia so # and MEpedia don't overlap on mobiles / small screens where the name is used instead of the logo: #p-logo-text a::before { content: "#"; font-family: Oswald, sans-serif; font-style: italic; font-variant: normal; margin-right: -0.15em; } New code for images: .oo-ui-image-invert { /* if it's normally inverted, don't invert image */ filter: invert(0%); } .noinvert { /* don't invert image */ background-color: transparent; filter: invert(0%)!important; border: none; } .invert { /* always invert image */ filter: invert(100%)!important; border: none; } /* no border on images eg for userboxes */ .noborder { border: none; } img.noimgborder, .noborder > img, .noborder table tr td img, .noborder table tr td div, .noimgborder > img { border: none; } /* Brighter icons eg for Done ticks */ .bright { filter: brightness(200%) } .brighter { filter: brightness(350%) } Please check the example in Template:Module rating/doc shows a black alpha symbol, which changes to a white alpha symbol using the Timeless skin ~Njt (talk) 11:43, October 27, 2019 (EDT)
Description of changes[edit source | reply | new]It would be helpful to have the edit summary describing which changes were made, eg add invert class, rather than see talk page. Thanks ~Njt (talk) 10:33, October 28, 2019 (EDT) Red and green shade changes[edit source | reply | new]User:Pyrrhus Please see my comment above, and edit the live page to change:
and this code: .mw-plusminus-neg { color: #FF4444; } to this (including adding the 'red' comment) /* red */ .mw-plusminus-neg { color: #FF2000; } Results can be seen in the red and green on the recent changes page, timeless skin (use this link to avoid changing your preferences). I will be asking for more color changes soon but would rather not do all at once. Thanks ~Njt (talk) 14:01, November 2, 2019 (EDT)
/* CSS placed here will affect users of the Timeless skin */ html { background: rgb(0,0,0) !important; height: 100%; filter: brightness(100%) contrast(100%) grayscale(0%) !important; -webkit-filter: brightness(100%) contrast(100%) grayscale(0%) !important; } body { margin: 0; background: #000; color: #ccc; } /* set background to black for header/footer banners */ .custom-top-banner { background-color: rgb(0,0,0) !important; } .custom-bottom-banner { background-color: rgb(0,0,0) !important; } /* adjust background color for "class=mw-lingo-term" tooltips without a lingo definition */ .qtip-content { background-color: #333; } /* Sky blue using low vision color */ a, a:link, a:visited, a:hover, a:active, /* content types etc on search results */ a.current, .current a { /* unvisited links use :link */ color: #56b4e9; } /* Brighter orange */ .orange, .orange a { color: #E69F00!important; } /* wanted pages red color */ a.new, a.new:visited, a.new:link, .new a:visited, a.new:hover, .new a:hover, a.new:active, .new a:active { color: #FF2000; text-shadow: 1px 1px black; } /* stubs lighter than low vision sky blue */ a.stub, a.stub:link, a.stub:visited, a.stub:hover, a.stub:active { color: #86d4f9 !important; } /* low vision sky blue shade for headings */ h2, h3, h4, h5, h6, h7, /* jump to arrow from references */ .mw-cite-backlink { color: #56b4e9; } /* external links light blue-gray not rapture blue */ .mw-body-content a.external, .mw-body-content a.interwiki, .mw-body a.extiw, a.extiw::after, .mw-body-content a.interwiki:link, .mw-body-content a.interwiki:visited, .uls-language-list a, a.external:visited, a.external:hover, a.external:active, a.external:active::after { color: #A7C5DC; } /* these are external links but don't use the external class in the footer */ #mw-footer-container a, #mw-footer-container a:link, #mw-footer-container a:visited { color: #A7C5DC!important; } /* caption does site visits */ caption { color: #ccc; } caption big { color: #bbb; font-weight: normal; } /* set dark colors where missing*/ h1 { color: #fff; text-shadow: 1px 1px 1px #000; } #personal .dropdown b { font-weight: normal; } b, strong { text-shadow: 1px 1px 1px #000; } strong, em { color: inherit; } /* reference redirects image */ .redirectText img { filter: invert(100%); } div.editOptions { border-color: #aaa; background: #555; } #mw-header-nav-hack { border-top: solid 2px #000; background: #333; } #mw-site-navigation .sidebar-inner { background: #333; color: #ccc; border: 0; } #mw-site-navigation .sidebar-chunk { border-color: #aaa; box-shadow: 1px 1px 1px rgba(0,0,0,0.5); border-radius: 2px; } /* set dark colors where missing*/ #mw-wrapper, #mw-header, #mw-header-container, .right-canvas-menu, .left-off-canvas-menu, .off-canvas-list, .sidebar-chunk, #mw-content-text, .toc, #toc, #p-cactions { background-color: #000; color: #ccc; border-color: #aaa; } .sidebar-inner { background-color: #333!important; color: #ccc; border-color: #aaa; } /* set light colors where missing eg spans */ span, .label { color: #eee; } .gallery, .gallerybox, #mw-content-text ul, table, p, div, table ul, table li { background: #333; color: #ccc; border-color: #000; } @media screen and (max-width: 851px) { #user-tools { background-color: #000; } #user-tools h2 { display: block; } #user-tools h2 ul { background-color: #333; } #user-tools { position: absolute; right: 1em; top: 0; } #personal-extra { position: relative; left: -12rem; top: 0.75rem; background-color: transparent; } #personal-inner { background-color: #333; } #pt-notifications-alert, #pt-notifications-notice { filter: invert(100%); background-color: transparent; } } /* end small screen changes */ /**********************************/ /* orange */ .mw-parser-output a.external { color: #ff9900; } #searchInput-container { background: #333; } #simpleSearch { border-color: #000; border-radius: 3px; } /* Dropdown box autocomplete must not be navy */ /* Search results suggestion box */ .suggestions-results, .suggestions-special { background-color: #000; border: solid 1px #aaa!important; color: #ccc; } div#simpleSearch, .suggestions-special .special-label, .suggestions-result, .suggestions-special .special-query { color: #ccc!important; background-color: #333!important; } #searchButton { border-color: transparent!important; } .mw-notification { background: #000; border-color: #333; border-radius: 5px; color: #999; } .mw-wiki-logo { background-size: contain; } #p-logo-text a, #p-logo-text { background-color: #000; color: #eeeeee; font-family: Oswald, sans-serif; font-style: italic; font-variant: small-caps; } #p-logo-text a::before { content: "#"; font-family: Oswald, sans-serif; font-style: italic; font-variant: normal; } /* Dropdown box autocomplete must not be navy */ /* Search results suggestion box */ .suggestions-results, .suggestions-special { background-color: #000; border: solid 1px #aaa!important; color: #ccc; } /* addthis colors */ .addthis_default_style { background-color: #000 !important; border-color: #000; color: #ccc; } #mw-header { width: 100%; max-width: 100%; padding: 0; position: static; } @media screen and (max-width: 850px) { #menus-cover { background: #000; } } #mw-content-block { background: #000; border-bottom: #000 solid 2px; border: none; } #footer-container, #footer-bottom, #mw-footer { background-color: #000; border: none; } #mw-content-container { border-bottom: #E7453A 5px solid; background: #333; } .mw-body { border: none; color: #ccc; } #mw-site-navigation { background: #000; } #mw-content { background: #333; border: solid #000; -webkit-border-bottom-right-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomright: 4px; -moz-border-radius-bottomleft: 4px; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } #mw-page-header-links li.selected a { color: #999900; } #mw-related-navigation .sidebar-chunk { border: outset #333; box-shadow: 2px 2px 1px rgba(0,0,0,0.5); border-radius: 3px; } .color-left, .color-right { background-color: #333; } .color-left-container, .color-right-container, .color-middle-container, .color-middle { background-color: #E7453A; color: #333; overflow: hidden; } .color-bar { background: #E7453A; } /* Table background colors and allow scroll off side */ table { background-color: #333; color: #ccc; border-color: #000; overflow-x: auto; } th { background-color: #333; color: #ccc; border-color: #000; } tr, td { background-color: #333; color: #ccc; border-color: #000; } /* Tabular tables - used on main page */ table.wikitable { border-color: #000 !important; color: #ccc; text-align: center; background-color: #000; text-shadow: 2px 2px 4px #000; } .wikitable tr { background-color: #333; border-color: #000; color: #eee; } .wikitable > * > tr > th { background-color: #454544!important; border-color: #000; color: #fff!important; } .wikitable tr, .wikitable tr td { background-color: #333; border-color: #000 !important; color: #ccc; } /* JQuery white sort arrows */ table.jquery-tablesorter th.headerSort { filter: invert(100%); } table.jquery-tablesorter th.headerSortUp { filter: invert(100%); } table.jquery-tablesorter th.headerSortDown { filter: invert(100%); } @media screen and (max-width: 1099px) and (min-width: 851px) { #mw-related-navigation .sidebar-chunk { border-color: #333; box-shadow: 2px 2px 1px rgba(0,0,0,0.5); } } #personal h2 { text-shadow: 1px 1px 0 #333; } #personal .dropdown { background: #333! important; border-color: #000; } /* transparent images need white background */ img { color: white; background-color: #333; border: 0; } /* Images - transparent images need white background */ .mw-body img { border: 1px solid #000; background-color: #FFF; } /* gallery image border */ .thumb, .image { margin: 0.5rem auto; background-color: #333 !important; border: 1px solid #000 !important; } /* class=transparent available for template icons */ img.transparent, .transparent img, div.transparent, .mbox-image > img, .transparent .thumbinner, .transparent .image { background: transparent; border: 0!important; } hr { border-color: #000; background-color: #333; } /* bullet points within Portal gallery or Portal table sections */ ul.gallery, .gallerybox > div, td > ul, td > p, td div, div div { color: #ccc; background-color: #333; border-color: #333; } /* Visual editor colors */ .oo-ui-toolbar-bar { background: #000; color: #000; border: 0; } .oo-ui-clippableElement-clippable { background: #333; color: #fff; } /* Cite button text */ .oo-ui-tool-title, .oo-ui-tool-accel { color: #fff!important ; } .oo-ui-tool, .oo-ui-tool-link { background: #000; color: #fff!important; } .oo-ui-toolbar-bar { border: transparent ; } .oo-ui-buttonElement-button { background-color: #444; color: #eee; border-color: #000; } /* end of visual editor colors */ /* De-Color user signature links (black-on-black) */ a:not([class]) font, a:not([class]) span, a:not([class]) bold { background-color:inherit!important; color:inherit!important; } /* Color explanations with tool tips */ abbr, acronym, .explain { border-color: #000; color: #ccc; background-color: #333; } .codeEditor-status { color: #555; } .oo-ui-labelElement-label { text-shadow: 1px 2px #333; } #wpSave { text-shadow: 1px 1px 1px #000 !important } #mw-footer-container { background: #000; } fieldset { background: #333! important; border-color: #000; } input { background: #333; border-color: #000!important; border-radius: 2px; color: #ccc; } .mw-ui-button.mw-ui-progressive, .mw-ui-button.mw-ui-progressive:active, .mw-ui-button.mw-ui-progressive.mw-ui-checked, input[type='submit'], input[type='button'], button { border-color: #333!important; text-shadow: 0 0 0 #000 !important; } .oo-ui-flaggedElement-destructive { background: #000; border-color: #444; color: #FF2000!important; } .oo-ui-flaggedElement-destructive:hover { background: #333; color: #ff0000!important; } #searchInput { border: 0!important; } .oo-ui-textInputWidget input, .oo-ui-textInputWidget textarea { background-color: #333; color: #ccc; } #pagehistory li.selected { background-color: #555; } .warningbox { background: #333; } .mw-body-text { color: #ccc; } .mw-indicators { /* symbols need filter */ background-color: transparent!important; filter: invert(100%); border: none; } #mw-indicator-mw-helplink a { color: #000!important; } #mw-indicator-mw-helplink { background: inherit!important; } .mw-changeslist-legend { background: transparent; color: #ccc!important; } .mw-changeslist-legend-plusminus { color: #ccc; } .mw-plusminus-null { color: #bbb; } /* green */ .mw-plusminus-pos { color: #33cc33; } /* red */ .mw-plusminus-neg { color: #FF2000; } .autocomment { color: #ccc; } #mw-footer-container a:hover { color: #00ffff; } #mw-footer-container a:visited { color: #56b4e9; } .diff-addedline .diffchange { background: #ff2000; } .oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button, .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label { text-shadow: 0 0 0 #000 !important; } .oo-ui-labelElement-label { text-shadow: 0 0 0 #000 } .oo-ui-panelLayout-expanded { background: #333; } .oo-ui-messageDialog-message { color: #999; } .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button { color: #999; } .oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget { border-right: 1px solid #000 } .oo-ui-dialog-content > .oo-ui-window-body { outline: 1px solid #000; } .oo-ui-messageDialog-content > .oo-ui-window-foot { outline: 1px solid #000; } textarea[style] { background: #000 !important; color: #fff; } pre, .mw-code { background: #222; color: #B0B0B0; border: 1px solid #444; } .oo-ui-iconWidget.oo-ui-iconElement.oo-ui-iconElement-icon { background-color: #999; border: 1px solid #333; } /* search results had defaulted to black, and dark green for date, size under results */ .searchResults { background-color: #333; color: #aaa; } .results-info, .mw-search-result-data { color: #aaa; } .shortcutbox { background: #222; } /* Portal box colors */ .boxbackground { background: #333!important; color: #ccc!important; border-color: #222!important; border-width: 2px; } .boxtitlecolor, .whitetext { color: #eee!important; } .whitetext { box-shadow: none; } .boxtitlebackground { background: #000!important; border-color: #000!important; } /* Color code snippets incl for errors */ code { background-color: #ccc; color: #000; font-weight:bold; } .error code { color: #FF2000; } /* wikieditor controls */ .wikiEditor-ui .wikiEditor-ui-view { border: 1px solid #000; } .wikiEditor-ui .wikiEditor-ui-top { border-bottom: 1px solid #000; } .wikiEditor-ui, .wikiEditor-section-main { background-color: #333!important; filter: none; color: #ccc ; } /* wikieditor code, bold and italics */ .group-codeeditor-main, .group.group-format, .group-size, .group-format span, .group-insert span { background-color: #fff!important; color: #333!important; filter: invert(100%)!important; } /* wikieditor background and icons without text */ .group { background-color: #000!important; color: #fff!important; } .wikiEditor-ui-toolbar div.tabs a:link, .wikiEditor-ui-toolbar div.tabs a:visited, .section-characters div.index div { background-color: #000; color: #fff; filter: none!important; } .wikiEditor-ui-toolbar, .toolbar, .sections, .tabs, .tab { background-color: #000!important; color: #000!important; border-color: #000; } .oo-ui-widget { background: #333; color: #eee; } /* wikieditor tools end */ /* Recent changes title area */ fieldset { background-color: #333; color: #fff; border-color: #333; } /* add to existing mobile section margins */ #mw-body, #mw-content { padding-left: 1px; padding-right: 1px; } legend { border-color: #000; color: #ccc!important; background-color: #333!important; } legend a { .current: #eee!important; :link: #eee!important; :visited: #eee!important; } /* License images */ .layouttemplate tr td img, .layouttemplate tr td p img { filter: invert(100%); background: transparent; border-color: transparent; } .suggestions-query, .suggestions-special { background-color: #222!important; } /* end of dark CSS Oct 15 2019*/ /* transparent logo needs white background to get black text visible */ .mw-wiki-logo img { background-color: #FFF; } .thumbinner { background-color: transparent; color: #ccc; border-color: #222; } /* Dark colors for use over colored backgrounds, sets paler text and changes border color of there is a border */ .darkskin { color: #ccc!important; box-shadow: none; border-color: #222!important; } /* Code editing colors */ .mi, .mh, .kp, .kc { color: #eee!important;} .p, .o { color: #aaa!important;} .k, .ki, .mt { color: lightgreen!important;} .nc, .nt { color: skyblue!important;} .c { color: lightgray!important;} .cp { color: palegoldenrod!important; } .nb, .nn {color: #f5b561!important;} .nd {color: #EE2222!important ;} /* recent changes colors */ .mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend, .mw-changeslist-legend, .mw-body .mw-search-profile-tabs, .mw-body fieldset#mw-searchoptions { color: #ccc; .box; } .oo-ui-popupWidget { font-size: 95%; width: 95% !important; /* Color gets inverted */ background: #eee; } .mw-echo-ui-notificationItemWidget { /* these colors get inverted */ color: #000!important ; background: #fff !important; width: 100%; } /* Alerts heading plus body background */ .oo-ui-popupWidget-popup { /* colors get inverted */ background: #eee; color: #333 !important; margin-left: 1rem !important ; width: 95vw !important; max-width: 100vw !important; } .oo-ui-popupWidget-body { background: transparent !important; } /* echo alerts popup heading */ .oo-ui-popupWidget-head > .oo-ui-labelElement-label { color: #ccc!important; } .mw-echo-ui-notificationItemWidget * { color: #000!important; background: transparent!important ; } .mw-echo-ui-notificationItemWidget .oo-ui-clippableElement-clippable { background: transparent; } .oo-ui-popupWidget-footer .oo-ui-labelElement-label { color: #333!important; } .oo-ui-popupWidget-head, .oo-ui-popupWidget-footer { filter: invert(100%); background: #000 !important ; } .oo-ui-image-invert { /* if it's normally inverted, don't invert image */ filter: invert(0%); } .noinvert { /* don't invert image */ background-color: transparent; filter: invert(0%)!important; border: none; } .white { background: #fff; filter: invert(0%); } .invert { /* always invert image */ filter: invert(100%)!important; border: none; } /* no border on images eg for userboxes */ .noborder { border: none; } img.noimgborder, .noborder > img, .noborder table tr td img, .noborder table tr td div, .noimgborder > img { border: none; } /* Brighter icons eg for Done ticks */ .bright { filter: brightness(200%) } .brighter { filter: brightness(350%) |