MediaWiki:Gadget-DarkMode.css: Difference between revisions

From the Kingdom Hearts Wiki, the Kingdom Hearts encyclopedia
Jump to navigationJump to search
No edit summary
mNo edit summary
(39 intermediate revisions by the same user not shown)
Line 3: Line 3:
html, body { height: 100%; }
html, body { height: 100%; }
@-moz-document url-prefix() {
@-moz-document url-prefix() {
html, body { height: auto; min-height: 100vh; }
html, body { min-height: 100vh; }
.ve-init-mw-welcomeDialog { display: none !important; }
.ve-init-mw-welcomeDialog { display: none !important; }
}
}
.noinvert img, img.invert-light { filter: 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; }
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 {
body.skin-vector {
filter: invert(1) hue-rotate(180deg) !important;
height: auto;
}
background: #000 url(https://kh.wiki.gallery/images/9/92/MonacoBackground.png) repeat !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;
}
}
body.skin-timeless #mw-content-container {
.gallerybox:has(.invert-light) a.image { filter: none !important; }
background-color: #fff !important;
.gallerybox:has(.invert) a.image, .gallerybox:has(.invert-dark) a.image {
background-image: url(https://kh.wiki.gallery/images/timeless-bg-dark.png) !important;
filter: invert(1) hue-rotate(180deg);
}
}
body:not(.skin-timeless):not(.skin-apioutput),
body:not(.skin-timeless):not(.skin-apioutput),
.noinvert, .gallery.invert a.image, img:not(.invert), canvas, audio, video, iframe, #wpTextbox1, #p-logo,
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,
body.skin-monobook #p-personal, body.skin-monobook #p-cactions {
body.skin-monobook #p-personal, body.skin-monobook #p-cactions {
Line 26: Line 36:
filter: invert(1) hue-rotate(180deg) url("#gaussian-blur") !important;
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 {
.mwe-popups-container footer, .mwe-popups-image-pointer::after {
display: none !important;
display: none !important;
Line 32: Line 43:
filter: none !important;
filter: none !important;
}
}
body.skin-timeless #mw-content-container {
background-color: #fff !important;
background-image: url(https://kh.wiki.gallery/images/timeless-bg-dark.png) !important;
}
body.skin-vector:not(.skin-vector-2022) {
background: #000 url(https://kh.wiki.gallery/images/9/92/MonacoBackground.png) repeat !important;
}
body.skin-vector-2022 { background: #040506 !important; }
.toc, .toccolours, #filetoc, pre, .catlinks, #content-bottom-stuff,
.toc, .toccolours, #filetoc, pre, .catlinks, #content-bottom-stuff,
body:not(.skin-minerva) div.thumbinner, body.mediawiki .gallerybox div.thumb {
body:not(.skin-minerva) div.thumbinner, body.mediawiki .gallerybox div.thumb {
Line 38: Line 57:
}
}
#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; }
}
}
#wpTextbox0 { background: #ddd !important; }
#wpTextbox0 + #wpTextbox1 { background: transparent !important; }
#wpTextbox1 { background: #ccc !important; color: #000 !important; }
#wpTextbox1 { background: #ccc !important; color: #000 !important; }
.mw-highlight .nc, .mw-highlight .nf, .mw-highlight .nn { color: #66f !important; }
.mw-highlight .nc, .mw-highlight .nf, .mw-highlight .nn { color: #66f !important; }
Line 55: Line 77:
body #whostaff a {
body #whostaff a {
color: #333 !important;
color: #333 !important;
}
div.thumb div.thumbinner div {
color: inherit !important;
}
}
.scroll-container {
.scroll-container {
filter: invert(1) hue-rotate(180deg);
filter: invert(1) hue-rotate(180deg);
}
div.thumb div.thumbinner div.thumbcaption {
color: inherit !important;
}
}
body.skin-roundedblue #bodyContentInnerWrapper a,
body.skin-roundedblue #bodyContentInnerWrapper a,
Line 71: Line 93:
background: #ddd !important;
background: #ddd !important;
}
}
body.mediawiki table.wikitable th {
body table.wikitable > * > tr > th {
background-color: #bbb;
background-color: #bbb;
}
}
body.mediawiki table.wikitable,
body table.wikitable > * > tr:not([bgcolor]) {
body.mediawiki table.wikitable td {
background: #ccc;
background: #ccc;
}
.notice {
border-color: #999 !important;
}
/* TimedMediaHandler infobox/tabber */
.infobox .mw-tmh-player.audio .mw-tmh-play .mw-tmh-play-icon,
.infobox .video-js .vjs-control-bar, .infobox .video-js .vjs-volume-vertical,
.tabber.goright .video-js .vjs-control-bar, .tabber.goright .video-js .vjs-volume-vertical,
.tabber.goright .mw-tmh-player.audio .mw-tmh-play .mw-tmh-play-icon {
background-color: #1E232C;
}
.infobox .mw-tmh-player.audio .mw-tmh-play:hover .mw-tmh-play-icon,
.tabber.goright .mw-tmh-player.audio .mw-tmh-play:hover .mw-tmh-play-icon {
background-color: #24282E;
}
}


Line 217: Line 253:


/* Links */
/* Links */
a.new, .new a, .error, .unpatrolled {
a.new, .new a, a.mw-usertoollinks-contribs-no-edits, .error, .unpatrolled {
color: #f66 !important;
color: #f66 !important;
}
}
Line 226: Line 262:
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, ul.tabbernav li a {
body a:active, body .content a:active, .toctogglelabel,
.mw-special-CheckUser .mw-checkuser-paging-links {
color: #009CFF;
color: #009CFF;
}
}
Line 235: Line 272:
color: #333 !important;
color: #333 !important;
}
}
body:not(.skin-timeless):not(.skin-roundedblue) #content, #mw-content,
body:not(.skin-timeless):not(.skin-vector-2022):not(.skin-roundedblue) #content, #mw-content,
.skin-monobook #footer, .mediawiki .mw-prefs-buttons, .suite_tab, .suitediv,
.skin-monobook #footer, .mediawiki .mw-prefs-buttons, body:not(.skin-vector-2022) .suite_tab, body:not(.skin-vector-2022) .suitediv,
.mediawiki .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
.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 {
.dropdown, .sidebar-inner, #p-cactions-mobile li.selected a, #p-cactions-mobile li:hover a {
Line 256: Line 293:
.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;
}
}
Line 274: Line 311:
.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;
}
}

Revision as of 01:43, 30 March 2024

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

html, body { height: 100%; }
@-moz-document url-prefix() {
	html, body { 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);
}
body:not(.skin-timeless):not(.skin-apioutput),
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,
body.skin-monobook #p-personal, body.skin-monobook #p-cactions {
	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 {
	filter: none !important;
}
body.skin-timeless #mw-content-container {
	background-color: #fff !important;
	background-image: url(https://kh.wiki.gallery/images/timeless-bg-dark.png) !important;
}
body.skin-vector:not(.skin-vector-2022) {
	background: #000 url(https://kh.wiki.gallery/images/9/92/MonacoBackground.png) repeat !important;
}
body.skin-vector-2022 { background: #040506 !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 */
body #whostaff a {
	color: #333 !important;
}
.scroll-container {
	filter: invert(1) hue-rotate(180deg);
}
div.thumb div.thumbinner div.thumbcaption {
	color: inherit !important;
}
body.skin-roundedblue #bodyContentInnerWrapper a,
body.skin-roundedblue #bodyContentInnerWrapper a:hover {
	color: #009CFF;
}
.wikitable .gallerybox div.thumb,
body.skin-roundedblue .mw-dismissable-notice,
body.skin-roundedblue #td-roundedbox, body.skin-roundedblue #p-lang {
	background: #ddd !important;
}
body table.wikitable > * > tr > th {
	background-color: #bbb;
}
body table.wikitable > * > tr:not([bgcolor]) {
	background: #ccc;
}
.notice {
	border-color: #999 !important;
}

/* TimedMediaHandler infobox/tabber */
.infobox .mw-tmh-player.audio .mw-tmh-play .mw-tmh-play-icon,
.infobox .video-js .vjs-control-bar, .infobox .video-js .vjs-volume-vertical,
.tabber.goright .video-js .vjs-control-bar, .tabber.goright .video-js .vjs-volume-vertical,
.tabber.goright .mw-tmh-player.audio .mw-tmh-play .mw-tmh-play-icon {
	background-color: #1E232C;
}
.infobox .mw-tmh-player.audio .mw-tmh-play:hover .mw-tmh-play-icon,
.tabber.goright .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;
}

/* Site notice */
.sitenotice > table {
	background: #bbb !important;
	border-color: #999 !important;
}
.sitenotice > table th {
	background: #999 !important;
	border-color: #aaa !important;
}
.sitenotice > table th .altcolors {
	color: #000 !important;
}
.sitenotice > table td a span {
	color: #000 !important;
}

/* Main page */
body.page-Main_Page #main-page-wrapper,
body.page-Main_Page #main-page-wrapper .nav > a,
body.page-Main_Page #main-page-wrapper .dropdown,
body.page-Main_Page #main-page-wrapper .floatnone,
body.page-Main_Page #main-page-wrapper .floatleft,
body.page-Main_Page #main-page-wrapper .floatright,
body.page-Main_Page #main-page-wrapper .links-list,
body.page-Main_Page #main-page-wrapper .links-list a,
body.page-Main_Page #main-page-wrapper #socialIcons > a {
	filter: invert(1) hue-rotate(180deg);
}
body.page-Main_Page #main-page-wrapper h3 {
	color: #fff !important;
}

/* MonoBook */
body.skin-monobook #sidebar > div > h3 {
	filter: invert(1) hue-rotate(180deg);
}
@media all and (min-width: 551px) {
	body.skin-monobook #sidebar > div {
		background: #ccc !important;
	}
	body.skin-monobook #p-personal .pBody ul {
		background: #333 !important;
		border-color: #666 !important;
	}
	body.mediawiki.skin-monobook #p-cactions li a {
		color: #ddd;
		background: #555 !important;
		border-color: #333 !important;
	}
	body.skin-monobook #p-cactions li a:hover,
	body.skin-monobook #p-cactions li.selected a:hover {
		color: #111 !important;
		background: #aaa !important;
		border-color: #666 !important;
	}
	body.skin-monobook #p-cactions li.selected a {
	  	color: #fff !important;
		background: #222 !important;
		border-color: #666 !important;
	}
	body.mediawiki.skin-monobook #p-personal li a:hover {
	  	color: #bbb;
	}
}
@media all and (max-width: 550px) {
	body.skin-monobook #sidebar > div > h3 {
		filter: none !important;
	}
	body.skin-monobook #p-cactions,
	body.skin-monobook #p-personal {
		background: #000 !important;
	}
	body.skin-monobook #p-cactions-label,
	body.skin-monobook #p-personal-label {
		color: #fff !important;
	}
	body.skin-monobook #ca-more a {
		color: #000 !important;
	}
}

/* Links */
a.new, .new a, a.mw-usertoollinks-contribs-no-edits, .error, .unpatrolled {
	color: #f66 !important;
}
.vector-menu-portal .vector-menu-content li a, body.skin-roundedblue .portlet 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 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:not(.skin-timeless):not(.skin-vector-2022):not(.skin-roundedblue) #content, #mw-content,
.skin-monobook #footer, .mediawiki .mw-prefs-buttons, body:not(.skin-vector-2022) .suite_tab, body:not(.skin-vector-2022) .suitediv,
.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-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;
}