MediaWiki:Timeless.css
From MEpedia, a crowd-sourced encyclopedia of ME and CFS science and history
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
- Opera: Press Ctrl-F5.
/* 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;
}
.skin-timeless {
background: #333;
color: #ccc;
}
/* normalize.less colors */
mark {
background: #333;
color: #eee;
}
/* set background to black for header/footer banners */
.custom-top-banner {
background-color: rgb(0,0,0) !important;
}
/* black banner behind menus */
.ts-inner, .ts-container {
background: #000;
}
/* overwrite lightyellow information disclaimer */
.custom-bottom-banner {
background: #111!important;
color: #eee!important;
}
.custom-bottom-banner p {
background: inherit;
color: inherit;
}
/* 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 without text shadow */
.new, a.new,
#p-personal a.new,
#p-personal a.new:visited,
a.new:link, .new a:link,
a.new:visited, .new a:visited,
a.new:hover, .new a:hover,
a.new:active, .new a:active {
color: #FF5D5D;
text-shadow: none;
}
/* 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,
.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;
}
/* overwrite screen-common.less colors
for external links that don't use the
external class in the footer
*/
/* Smallish screens display a white section without this */
#mw-header-hack {
background-color: #000;
border-color: #E7453A;
}
#mw-header-nav-hack {
background-color: #000;
border-color: #000;
box-shadow: 0 3px 3px 2px rgba( 0, 0, 0, 0.075 ), 0 0 2px rgba( 0, 0, 0, 0.2 );
}
.mw-footer-container a,
.mw-footer-container a:hover,
.mw-footer-container a:visited {
color: #A7C5DC !important;
}
/* arrow color after links */
.external {
background-image: none!important;
filter: none;
}
.mw-parser-output a.external,
.link-https,
a.external {
padding-right:0;
}
.mw-parser-output a.external:after,
.link-https:after,
a.external:after {
/* filter calculated to convert icon from black
using https://codepen.io/sosuke/pen/Pjoqqp
svg falls back to png, then none */
/* Image won't display without some content, so using thin space so link icon doesn't touch letters, then add the image size as padding to prevent filtering characters swashing into it */
content: '\2002';
padding-left: 12px;
background-image: none;
filter: invert(88%) sepia(5%) saturate(2721%) hue-rotate(177deg) brightness(91%) contrast(89%);
background-image:url('https://www.me-pedia.org/images/d/d3/External-link-fa4.png');
background-image:url('https://www.me-pedia.org/images/c/c2/External-link-fa.svg')!important;
background-size: 12px;
background-repeat: no-repeat;
}
.oo-ui-tagItemWidget {
background-color: #ccc;
color: #000;
}
/* overwrite screen-common.less colors */
#mw-content {
background: #333;
color: #ccc;
border-color: #000;
border-bottom: 0;
}
#siteSub {
color: #ccc;
display: block;
}
#contentSub {
color: #ccc;
}
.mw-datatable, .mw-datatable th, .mw-datatable tr,
.mw-datatable > tr > td, .mw-datatable > * > tr > th,
.mw-datatable > * > tr > td {
background: #333;
color: #ccc;
}
.mw-datatable, .mw-datatable > tr > th, .mw-datatable > tr > td,
.mw-datatable > * > tr > th, .mw-datatable > * > tr > td,
.wikitable, .wikitable > tr > th, .wikitable > tr > td,
.wikitable > * > tr > th, .wikitable > * > tr > td {
border: 1px solid #000;
}
/* screen-mobile.less */
#menus-cover {
background: #000;
}
#mw-content-block {
background: #333;
color: #ccc;
}
/* change mw default colors */
/* forms mediawiki/resources/src/mediawiki.ui/components/forms.less */
.mw-ui-vform > label, .mw-ui-label {
color: #ccc;
}
/* End mw default colors */
/* 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;
}
/* mediawiki resources/src/mediawiki.action/ mediawiki.action.view.redirectPage.css */
/* reference redirects image */
.redirectText li {
filter: invert(100%);
}
.redirectMsg p {
filter: none;
}
/* Disabled - May needed for forms
div.editOptions {
border-color: #aaa;
background: #555;
}
*/
/* set dark colors where missing*/
#mw-wrapper, #mw-header, #mw-header-container,
.right-canvas-menu,
#mw-content-text,
#p-cactions {
background-color: #000;
color: #ccc;
border-color: #aaa;
}
.toc, #toc,
.toccolours, .tocnumber,
.left-off-canvas-menu,
.off-canvas-list,
#p-cactions {
background-color: #333;
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;
}
/* tools menu / right menu defaults to black
except on small screens where it if a pop-up
so needs color #333 */
#user-tools, #personal, #personal-extra, #personal-inner {
background-color: #000;
}
#user-tools h2 ul {
background-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 */
/**********************************/
.mw-wiki-logo {
background-size: contain;
}
#p-logo-text a, #p-logo-text {
background-color: #000;
color: #eee;
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;
}
/* jquery.suggestions.css */
/* Dropdown box autocomplete must not be navy */
/* Search results suggestion box */
.suggestions-results,
.suggestions-special {
background-color: #333;
border: solid 1px #aaa!important;
color: #ccc;
}
.suggestions-result {
color: #eee;
}
/* mediawiki/ resources/src/mediawiki.searchSuggest/ searchSuggest.css */
.suggestions a.mw-searchSuggest-link,
.suggestions a.mw-searchSuggest-link:hover,
.suggestions a.mw-searchSuggest-link:active,
.suggestions a.mw-searchSuggest-link:focus {
color: #eee;
}
#searchInput-container {
background: #333;
}
#simpleSearch {
border-color: #000;
border-radius: 3px;
}
div#simpleSearch,
.suggestions,
.suggestions-special .special-label,
.suggestions-special .special-hover,
.suggestions-special .special-query,
.suggestions-result,
.suggestions-results,
.suggestions-special,
.suggestions .suggestions-result-current {
color: #ccc;
background-color: #333!important;
}
.suggestions-result-current {
border-color: #aaa;
/* inverted colors */
background-color: #ccc;
color: #000;
}
.suggestions-result-current .special-label,
.suggestions-result-current .special-query {
/* inverted colors */
background-color: #ccc;
color: #000;
}
#searchButton {
border-color: transparent!important;
}
.mw-notification {
background: #000;
border-color: #333;
border-radius: 5px;
color: #999;
}
/* addthis colors */
.addthis_default_style {
background: #333;
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: 0;
}
/* black footer */
#footer-bottom, .footer-places {
background-color: #000;
border: none;
}
#mw-content-container {
border-bottom: #E7453A 5px solid;
background: #333;
}
.mw-body {
border: none;
background: #333;
color: #ccc;
}
.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%);
}
/* larger screens only white placeholder behind the MEpedia logo */
@media screen and (min-width: 851px) {
.mw-wiki-logo {
background-color: #fff;
}
#p-logo {
background-size: contain;
background-color: inherit;
}
.sidebar-chunk,
#mw-related-navigation .sidebar-inner,
#mw-site-navigation .sidebar-inner,
#personal-inner,
.sidebar-inner,
#page-tools,
#site-tools,
#user-tools {
background: #333 !important;
border-color: #333;
}
}
@media screen and (max-width: 1099px) and (min-width: 851px) {
#mw-header {
background-color: #000;
}
.color-bar {
border-color: transparent;
}
#page-tools h2,
#personal h3,
.pokey {
background: transparent !important;
box-shadow: none;
}
#mw-related-navigation,
.sidebar-chunk,
#page-tools,
#site-tools,
#user-tools,
#personal {
background: transparent !important;
box-shadow: none;
border: 0;
}
}
#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: #fff;
border-color: #000;
}
/* 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-clippableElement-clippable {
background: #333;
color: #fff;
}
/* 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
}
fieldset {
background: #333! important;
border-color: #000;
}
input {
/* background: #333; */
border-color: #000!important;
border-radius: 2px;
color: #ccc;
}
/* display file info from
mediawiki/resources/src/mediawiki.action/ mediawiki.action.view.filepage.css
*/
#filetoc {
border: 1px solid #000;
background-color: #333;
}
.mw_metadata td, .mw_metadata th {
border: 1px solid #000;
}
.mw_metadata th, .mw_metadata td {
background: #333;
}
#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, .success-message {
color: #33cc33;
}
/* red */
.mw-plusminus-neg, .error {
color: #FF5D5D;
}
.autocomment {
color: #ccc;
}
.diff-addedline .diffchange {
background: #ff2000;
}
.oo-ui-buttonElement-button {
background-color: #444;
color: #eee;
border-color: #000;
}
.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: #FF5D5D!important;
}
.oo-ui-flaggedElement-destructive:hover {
background: #333;
color: #FF5D5D!important;
}
.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;
}
textarea,
#wpUploadDescription {
color: #ccc;
background: #000;
}
/* Used in Special:Upload */
.htmlform-tip {
color: #ccc;
}
td.mw-input input {
border-color: #eee!important;
}
/* mediawiki resources/src/mediawiki.skinning/ normalize.less */
tt, kbd, samp {
background-color: #000;
}
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 */
/* red */
.red, .error {
color: #FF5D5D;
}
code {
background-color: #ccc;
color: #000;
font-weight:bold;
}
/* red over white */
.error code {
background: #fff;
color: #cc0000!important;
}
/* 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: #fff!important;
border-color: #000;
}
/* 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;
}
fieldset, legend, legend a,
legend a.current,
legend a:link, legend a:visited {
color: #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 */
.kc, .kp, .kt, .mf, .mh, .mi { color: #eee!important;}
.o, .p { color: #bbb!important;}
.k, .ki, .mt { color: lightgreen!important;}
.nc, .nt { color: skyblue!important;}
.c { color: lightgray!important;}
.cp { color: palegoldenrod!important;}
.nb, .nn {color: #B5E0FF!important;}
.nd {color: salmon!important;}
.n, .s1 {color: violet!important;}
/* recent changes colors */
.mw-changeslist-legend,
.mw-body .mw-search-profile-tabs,
.mw-body fieldset#mw-searchoptions {
color: #ccc;
}
.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 bell symbol */
.oo-ui-popupWidget-head > .oo-ui-iconElement-icon {
background-color: transparent;
}
/* 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: #ccc!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%)
}
/* text colors- red defined higher up */
.green { color: #33cc33;}
/* low vision sky blue */
.blue { color: #56b4e9;}
.gray { color: lightgray;}
/* dark text shadow, for use on light backgrounds */
.shadow { text-shadow: 2px 2px 4px #000;}