MediaWiki:Gadget-DarkMode.css: Difference between revisions

From the Super Mario Wiki, the Mario encyclopedia
Jump to navigationJump to search
No edit summary
mNo edit summary
 
(32 intermediate revisions by the same user not shown)
Line 7: Line 7:
}
}
body.mediawiki .gallery.blackbg div.thumb { background: #fff !important; }
body.mediawiki .gallery.blackbg div.thumb { background: #fff !important; }
body.mediawiki .gallerybox:has(.blackbg) div.thumb { background: #fff !important; }
body.mediawiki .gallery.graybg div.thumb, body.mediawiki .gallery.greybg div.thumb {
body.mediawiki .gallery.graybg div.thumb, body.mediawiki .gallery.greybg div.thumb {
background: #808080 !important;
background: #808080 !important;
}
}
.noinvert img, img.invert-light { filter: none !important; }
body.mediawiki .gallerybox:has(.graybg) div.thumb, body.mediawiki .gallerybox:has(.greybg) div.thumb {
background: #808080 !important;
}
img.whitebg, .gallery.whitebg img { background: #fff !important; }
img.whitebg, .gallery.whitebg img { background: #fff !important; }
.noinvert img.invert { filter: invert(1) hue-rotate(180deg) !important; }
.noinvert img.invert, .noinvert img.invert-dark, .noinvert img.invert-all, .noinvert img.invert-both {
html, .noinvert, .gallery.invert a.image, img:not(.invert), canvas, audio, video, iframe, #wpTextbox0, #wpTextbox1, #p-logo,
filter: invert(1) hue-rotate(180deg) !important;
}
img.invert, img.invert-dark, img.invert-all, img.invert-both,
img.mwe-math-fallback-image-inline, .noinvert img, .gallery.invert-light a.image {
filter: none !important;
}
.gallerybox:has(.invert-light) a.image { filter: none !important; }
.gallerybox:has(.invert) a.image, .gallerybox:has(.invert-dark) a.image {
filter: invert(1) hue-rotate(180deg);
}
html, img, .noinvert, .gallery.invert a.image, .gallery.invert-dark a.image, canvas, audio, video, iframe, #wpTextbox0, #wpTextbox1, #p-logo,
.mw-tmh-player.audio, .mw-tmh-player.video .mw-tmh-play-icon, .mw-tmh-player.video .mw-tmh-label, .vjs-fill .vjs-control-bar,
.mw-mmv-overlay, .mw-mmv-pre-image, .media-viewer, .image-details, .results .list-thumb, .ext-related-articles-card-thumb {
.mw-mmv-overlay, .mw-mmv-pre-image, .media-viewer, .image-details, .results .list-thumb, .ext-related-articles-card-thumb {
filter: invert(1) hue-rotate(180deg);
filter: invert(1) hue-rotate(180deg);
Line 34: Line 48:
}
}
#file img, .filehistory a img {
#file img, .filehistory a img {
background: url(https://wiki.gallery/images/checker-dark.svg) repeat !important;
background: url(https://wiki.gallery/images/dark/checker.svg) repeat !important;
}
}
html div.thumbimage { background-color: #000; }
html div.thumbimage { background-color: #000; }
body.skin-timeless .thumbimage { border: 0 !important; }
body.skin-timeless .thumbimage { border: 0 !important; }
html img.thumbimage { border-color: #2F3237 !important; }
@media all and (min-width: 851px) {
@media all and (min-width: 851px) {
body.skin-timeless .thumbimage { margin: 1px !important; }
body.skin-timeless .thumbimage { margin: 1px !important; }
Line 78: Line 93:
color: 00f !important;
color: 00f !important;
}
}
body.mediawiki table.wikitable th {
body table.wikitable > * > tr > * {
border-color: #a2a9b1 !important;
}
body table.wikitable > * > tr > th {
background-color: #bbb;
background-color: #bbb;
border-color: #a2a9b1;
}
}
body.mediawiki table.wikitable,
body table.wikitable > * > tr:not([bgcolor]) {
body.mediawiki table.wikitable td {
background: #ccc;
background: #ccc;
border-color: #a2a9b1;
}
}
td[style*="background:#000"], td[style*="background: #000"],
td[style*="background:#000"], td[style*="background: #000"],
Line 96: Line 111:
color: #000 !important;
color: #000 !important;
background: #fff !important;
background: #fff !important;
}
/* TimedMediaHandler infobox */
.infobox .mw-tmh-player.audio .mw-tmh-play .mw-tmh-play-icon,
.infobox .video-js .vjs-control-bar, .infobox .video-js .vjs-volume-vertical {
background-color: #1E232C;
}
.infobox .mw-tmh-player.audio .mw-tmh-play:hover .mw-tmh-play-icon {
background-color: #24282E;
}
}


Line 230: Line 254:
body .portal .body li a, html body.mediawiki #p-cactions li a, body a:hover,
body .portal .body li a, html body.mediawiki #p-cactions li a, body a:hover,
body a:visited, body a:visited:hover, body .content a:visited, body .portal .body li a:visited,
body a:visited, body a:visited:hover, body .content a:visited, body .portal .body li a:visited,
body a:active, body .content a:active, .toctogglelabel, body .mw-parser-output span.fakelink,
body .mw-parser-output span.fakelink, body .notice-template.maintenance#delete a:not(.new),
body .notice-template.maintenance#delete a:not(.new) {
body a:active, body .content a:active, .toctogglelabel,
.mw-special-CheckUser .mw-checkuser-paging-links {
color: #009CFF;
color: #009CFF;
}
}
Line 261: Line 286:
.sidebar-chunk { background: #ddd !important; }
.sidebar-chunk { background: #ddd !important; }
}
}
.vector-menu-tabs .selected {
body:not(.skin-vector-2022) .vector-menu-tabs .selected {
background: linear-gradient(to top,#ddd 0,transparent 100%) !important;
background: linear-gradient(to top,#ddd 0,transparent 100%) !important;
}
html img.thumbimage {
border-color: #2F3237 !important;
}
}


Line 274: Line 296:
}
}
body.skin-minerva .content .section-heading,
body.skin-minerva .content .section-heading,
body.skin-minerva .content .mw-body-content > h2,
body.skin-minerva .content .mw-parser-output > h2 {
body.skin-minerva .content .mw-parser-output > h2 {
border-color: #53595d !important;
border-color: #53595d !important;
Line 282: Line 305:
.mw-ui-icon-mf-expand::before {
.mw-ui-icon-mf-expand::before {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eexpand%3C/title%3E%3Cpath fill=%22%23333%22 d=%22M17.5 4.75l-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z%22/%3E%3C/svg%3E") !important;
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eexpand%3C/title%3E%3Cpath fill=%22%23333%22 d=%22M17.5 4.75l-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z%22/%3E%3C/svg%3E") !important;
}
body.skin-timeless .tools-inline li.selected a {
color: #000 !important;
}
}
body.skin-timeless #mw-header-container, body.skin-timeless #mw-header-nav-hack,
body.skin-timeless #mw-header-container, body.skin-timeless #mw-header-nav-hack,
Line 288: Line 314:
background: #666 !important;
background: #666 !important;
}
}
body.skin-minerva h2.list-header, body.skin-minerva .last-modified-bar, body.skin-minerva .last-modified-bar.active {
body.skin-minerva #content .mw-index-pager-list-header,
body.skin-minerva .last-modified-bar, body.skin-minerva .last-modified-bar.active {
background: #777 !important;
background: #777 !important;
}
}
Line 295: Line 322:
border-color: #888 !important;
border-color: #888 !important;
}
}
body.mobile h2.list-header,
body.skin-minerva form.mw-mf-settings #beta-field::before {
body.skin-minerva form.mw-mf-settings #beta-field::before {
background: #888 !important;
background: #888 !important;

Latest revision as of 21:39, March 29, 2024

/* Apply a quick color-inverted night theme */

@-moz-document url-prefix() {
	html { background: #fff !important; }
	html, body { height: auto; min-height: 100vh; }
	.ve-init-mw-welcomeDialog { display: none !important; }
}
body.mediawiki .gallery.blackbg div.thumb { background: #fff !important; }
body.mediawiki .gallerybox:has(.blackbg) div.thumb { background: #fff !important; }
body.mediawiki .gallery.graybg div.thumb, body.mediawiki .gallery.greybg div.thumb {
	background: #808080 !important;
}
body.mediawiki .gallerybox:has(.graybg) div.thumb, body.mediawiki .gallerybox:has(.greybg) div.thumb {
	background: #808080 !important;
}
img.whitebg, .gallery.whitebg img { background: #fff !important; }
.noinvert img.invert, .noinvert img.invert-dark, .noinvert img.invert-all, .noinvert img.invert-both {
	filter: invert(1) hue-rotate(180deg) !important;
}
img.invert, img.invert-dark, img.invert-all, img.invert-both,
img.mwe-math-fallback-image-inline, .noinvert img, .gallery.invert-light a.image {
	filter: none !important;
}
.gallerybox:has(.invert-light) a.image { filter: none !important; }
.gallerybox:has(.invert) a.image, .gallerybox:has(.invert-dark) a.image {
	filter: invert(1) hue-rotate(180deg);
}
html, img, .noinvert, .gallery.invert a.image, .gallery.invert-dark a.image, canvas, audio, video, iframe, #wpTextbox0, #wpTextbox1, #p-logo,
.mw-tmh-player.audio, .mw-tmh-player.video .mw-tmh-play-icon, .mw-tmh-player.video .mw-tmh-label, .vjs-fill .vjs-control-bar,
.mw-mmv-overlay, .mw-mmv-pre-image, .media-viewer, .image-details, .results .list-thumb, .ext-related-articles-card-thumb {
	filter: invert(1) hue-rotate(180deg);
}
.mw-mmv-image img.blurred {
	filter: invert(1) hue-rotate(180deg) url("#gaussian-blur") !important;
}
.mwe-popups .mwe-popups-extract { color: #000 !important; }
.mwe-popups-container footer, .mwe-popups-image-pointer::after {
	display: none !important;
}
body.skin-timeless .mw-wiki-logo.timeless-logo img,
body.skin-timeless .mw-wiki-title.wordmark img, body.skin-minerva .branding-box img, .minerva-footer-logo img {
	filter: none !important;
}
.toc, .toccolours, #filetoc, pre, .catlinks, #content-bottom-stuff,
body:not(.skin-minerva) div.thumbinner, body.mediawiki .gallerybox div.thumb {
	background: #ccc !important;
	border-color: #aaa !important;
}
#file img, .filehistory a img {
	background: url(https://wiki.gallery/images/dark/checker.svg) repeat !important;
}
html div.thumbimage { background-color: #000; }
body.skin-timeless .thumbimage { border: 0 !important; }
html img.thumbimage { border-color: #2F3237 !important; }
@media all and (min-width: 851px) {
	body.skin-timeless .thumbimage { margin: 1px !important; }
}
#wpTextbox0 { background: #ddd !important; }
#wpTextbox0 + #wpTextbox1 { background: transparent !important; }
#wpTextbox1 { background: #ccc !important; color: #000 !important; }
.mw-highlight .nc, .mw-highlight .nf, .mw-highlight .nn { color: #66f !important; }
body:not(.skin-timeless) .mw-changeslist-legend { border-color: #ccc; background: none; }
code { border-color: #ccc !important; background: #aaa !important; }
.mw-special-ReplaceText textarea { background: #ccc !important; }
.toctitle, fieldset { border-color: #aaa !important; }

/* Fixes */
.multiframe .thumbimage > div,
.multiframe .thumbimage > div > div {
	filter: invert(1) hue-rotate(180deg);
}
body select {
	border-color: #8f8f9d;
}
blockquote {
	border-color: #888 !important;
}
.nav-right {
	background: #ccc !important;
	border-color: #aaa !important;
}
.mediawiki .navbox td a,
.mediawiki .navbox td a:visited {
	color: #009CFF;
}
.mediawiki .notice-template.maintenance {
	background: #fff !important;
}
.notice-template.maintenance#delete {
	color: #000 !important;
}
.notice-template.maintenance#delete a:not(.new) {
	color: 00f !important;
}
body table.wikitable > * > tr > * {
	border-color: #a2a9b1 !important;
}
body table.wikitable > * > tr > th {
	background-color: #bbb;
}
body table.wikitable > * > tr:not([bgcolor]) {
	background: #ccc;
}
td[style*="background:#000"], td[style*="background: #000"],
td[style*="background:black"], td[style*="background: black"],
td[style*="background-color:#000"], td[style*="background-color: #000"],
td[style*="background-color:black"], td[style*="background-color: black"] {
	background: #fff !important;
}
#pgod {
	color: #000 !important;
	background: #fff !important;
}

/* TimedMediaHandler infobox */
.infobox .mw-tmh-player.audio .mw-tmh-play .mw-tmh-play-icon,
.infobox .video-js .vjs-control-bar, .infobox .video-js .vjs-volume-vertical {
	background-color: #1E232C;
}
.infobox .mw-tmh-player.audio .mw-tmh-play:hover .mw-tmh-play-icon {
	background-color: #24282E;
}

/* Diffs */
.diff-addedline {
	background: #eee !important;
	border-color: lightskyblue !important;
}
.diff-addedline .diffchange {
	background: lightskyblue !important;
}
.diff-deletedline {
	background: #eee !important;
	border-color: pink !important;
}
.diff-deletedline .diffchange {
	background: pink !important;
}
.diff-context {
	background: none !important;
	border-color: #ccc !important;
}
.mw-plusminus-pos {
	color: #0d0 !important;
}
.mw-plusminus-neg {
	color: #f77 !important;
}

/* Navboxes */
body.mediawiki .navbox {
	color: #000 !important;
	background: #fff !important;
	border-color: #aaa !important;
}
body.mediawiki .navbox tr,
body.mediawiki .navbox tr td,
body.mediawiki .navbox tr th {
	color: #000 !important;
	border-color: #aaa !important;
}
body.mediawiki .navbox font,
body.mediawiki .navbox span,
body.mediawiki .navbox tr th a,
body.mediawiki .navbox tr:first-of-type > th a,
body.mediawiki .navbox .mw-collapsible-toggle,
body.mediawiki .navbox .mw-collapsible-text {
	color: #000 !important;
}
body.mediawiki .navbox tr:first-child th {
	background: #ccc !important;
}
body.mediawiki .navbox tr th {
	background: #ddd !important;
}
body.mediawiki .navbox tr td {
	background: #eee !important;
}

/* File templates */
#aboutfile {
	border-color: #aaa !important;
}
#aboutfile tr:first-of-type td {
	color: #000 !important;
	background: #ccc !important;
	border-color: #aaa !important;
}
#aboutfile tr:nth-of-type(2) td,
#aboutfile tr:last-of-type td {
	color: #000 !important;
	background: #aaa !important;
	border-color: #aaa !important;
}
#aboutfile tr:last-of-type td span {
	color: #000 !important;
}
.notice-template.copyright {
	background: #ccc !important;
	border-color: #aaa !important;
}

/* Main page */
.mainpagebox {
	background: #eee !important;
}
.mainpagebox#nav {
	background: #ddd !important;
}
.mainpagebox h2 {
	filter: invert(1) hue-rotate(180deg);
}
.mainpagebox h2 span {
	color: #fff !important;
}
.mainpage-image-wrapper {
	background: #000 !important;
}
.pds-answer-feedback .pds-answer-feedback-bar {
	background: #666 !important;
}

/* Skin fixes */
body:not(.skin-minerva) #p-personal li,
body:not(.skin-minerva) #p-personal li a {
	filter: invert(1) hue-rotate(180deg);
}
textarea, .CodeMirror, .catlinks {
	background-image: none !important;
}

/* MonoBook */
body.skin-monobook .mw-footer,
body.skin-monobook #searchInput,
body.skin-monobook input.searchButton {
	border-color: #aaa !important;
}
body.skin-monobook #p-cactions li.selected {
	border-color: #888 !important;
}
body.mediawiki.skin-monobook #p-personal li a,
body.mediawiki.skin-monobook #p-personal li a:hover {
	color: #009CFF;
}

/* Links */
a.new, .new a, a.mw-usertoollinks-contribs-no-edits, .error, .unpatrolled {
	color: #f66 !important;
}
.vector-menu-portal .vector-menu-content li a {
	color: #009CFF !important;
}
body a, body .content a, body .vector-menu-tabs li a,
body .portal .body li a, html body.mediawiki #p-cactions li a, body a:hover,
body a:visited, body a:visited:hover, body .content a:visited, body .portal .body li a:visited,
body .mw-parser-output span.fakelink, body .notice-template.maintenance#delete a:not(.new),
body a:active, body .content a:active, .toctogglelabel,
.mw-special-CheckUser .mw-checkuser-paging-links {
	color: #009CFF;
}

/* Desktop skins */
.content, #content, #content h1, #content h2,
#content h3, #content h4, #content h5, #content h6 {
	color: #333 !important;
}
body.mediawiki:not(.skin-timeless):not(.skin-vector-2022) #content, #mw-content,
#sidebar .pBody, .skin-monobook #footer, .skin-monobook #p-cactions li a, .mediawiki .mw-prefs-buttons,
.mediawiki .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
.dropdown, .sidebar-inner, #p-cactions-mobile li.selected a, #p-cactions-mobile li:hover a {
	background-color: #ddd !important;
}
@media all and (max-width: 550px) {
	body.skin-monobook #p-cactions li a {
		background: none !important;
	}
	body.skin-monobook #sidebar .pBody {
		background: #fff !important;
	}
}
#personal .dropdown::after, .sidebar-inner::before, .sidebar-inner::after,
.sidebar-chunk h2 span::before, .sidebar-chunk h2 span::after {
	border-bottom-color: #ddd !important;
}
@media all and (min-width: 1100px) {
	.sidebar-chunk { background: #ddd !important; }
}
body:not(.skin-vector-2022) .vector-menu-tabs .selected {
	background: linear-gradient(to top,#ddd 0,transparent 100%) !important;
}

/* Mobile skins */
body.skin-minerva .page-actions-menu {
	border-top-color: #bbc0c3 !important;
	border-bottom-color: #53595d !important;
}
body.skin-minerva .content .section-heading,
body.skin-minerva .content .mw-body-content > h2,
body.skin-minerva .content .mw-parser-output > h2 {
	border-color: #53595d !important;
}
body.skin-minerva.action-history .mw-history-compareselectedversions {
	background-color: #ddd !important;
}
.mw-ui-icon-mf-expand::before {
	background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Eexpand%3C/title%3E%3Cpath fill=%22%23333%22 d=%22M17.5 4.75l-7.5 7.5-7.5-7.5L1 6.25l9 9 9-9z%22/%3E%3C/svg%3E") !important;
}
body.skin-timeless .tools-inline li.selected a {
	color: #000 !important;
}
body.skin-timeless #mw-header-container, body.skin-timeless #mw-header-nav-hack,
body.skin-minerva .header-container.header-chrome, body.skin-minerva #mw-mf-page-left,
body.skin-minerva #mw-mf-page-center, body.skin-minerva .minerva-footer, html body.skin-minerva {
	background: #666 !important;
}
body.skin-minerva #content .mw-index-pager-list-header,
body.skin-minerva .last-modified-bar, body.skin-minerva .last-modified-bar.active {
	background: #777 !important;
}
body.skin-minerva .mw-mf-watchlist-selector li.selected a, body.skin-minerva form.mw-mf-settings .oo-ui-fieldLayout,
body.skin-minerva .minerva-footer, body.skin-minerva .last-modified-bar, body.skin-minerva .post-content .minerva-footer-logo {
	border-color: #888 !important;
}
body.mobile h2.list-header,
body.skin-minerva form.mw-mf-settings #beta-field::before {
	background: #888 !important;
}
.client-nojs body.skin-minerva .search-box .search:focus,
body.skin-minerva .search-overlay .search-box .search:focus {
	border-color: #000 !important;
	box-shadow: inset 0 0 0 1px #000,0 1px 1px rgba(0,0,0,0.05) !important;
}
body.skin-minerva #mw-mf-page-left ul li a:hover {
	box-shadow: inset 4px 0 0 0 #999 !important;
}
body.skin-timeless,
body.skin-timeless #mw-footer-container,
body.skin-timeless #mw-footer-container a {
	color: #000 !important;
	background: #fff !important;
}
body.skin-timeless #personal .dropdown h3,
body.skin-timeless #mw-page-header-links li.selected,
body.skin-timeless #mw-site-navigation .sidebar-chunk h3,
body.skin-timeless #mw-related-navigation .sidebar-chunk h3,
body.skin-timeless #mw-content h1, body.skin-timeless #mw-content h2,
body.skin-timeless #mw-content h1::after, body.skin-timeless #mw-content h2::after,
body.skin-timeless #mw-content h1.firstHeading, body.skin-timeless #mw-content-container {
	border-color: #aaa !important;
}
body.skin-timeless .color-left, body.skin-timeless .color-middle, body.skin-timeless .color-right,
body.skin-timeless #content-bottom-stuff, body.skin-timeless .catlinks,
body.skin-timeless .suggestions .suggestions-result-current {
	background: #ccc !important;
}