MediaWiki:Timeless.css: Difference between revisions

From MEpedia, a crowd-sourced encyclopedia of ME and CFS science and history
(syntax error? also legend and fieldset values)
(added code per request)
Line 861: Line 861:
   filter: brightness(350%)
   filter: brightness(350%)
}
}
/* 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;}

Revision as of 13:26, August 24, 2020

/* 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,
 .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;
}
/*  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;
}

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;
}
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 */
.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-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 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%)
}

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