User:ThisIsMyRealName/common.css

From RationalWiki
Jump to navigation Jump to search

Note: After saving, 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: Go to Menu → Settings (Opera → Preferences on a Mac) and then to Privacy & security → Clear browsing data → Cached images and files.
/* WikimediaUI Dark Mode
*
* Wikimedia Design Team 2019-2021
* Original authors:
* - Volker E. – [[User:Volker_E._(WMF)]]
* - Alex Hollender
* - MusikAnimal
* - Carolyn Li-Madeo
* - Jdlrobson
*
* Original at https://en.wikipedia.org/wiki/User:Volker_E._(WMF)/dark-mode.css
* Version for Gadget CSS skin override usage only.
* Basically removed of all interaction element styles and
* set to `html` instead of JS injected `.client-dark-mode` class.
*
* Last updated: 2021-04-20
*
* Tweaks for RationalWiki by:
* - Elsie Hupp <github.com/elsiehupp>
*
*/

@media screen and (prefers-color-scheme: dark) {

	/* Filter needs to reside on `html`, see https://phabricator.wikimedia.org/T221425#5153917 */
	html,
	/* All other selectors have `filter` double-applied to turn back to “normal” by inheritance */
	html img,
	html video,
	html svg,
	html iframe,
	html .mw-no-invert,
	html .mwe-math-element,
	html .wvui-typeahead-suggestion__thumbnail,
	/* Extensions */
	html .cx-slitem__image,
	html .mw-mmv-overlay,
	html .mw-mmv-pre-image,
	html .mw-kartographer-map,
	html .mw-kartographer-mapDialog-map,
	html .ext-related-articles-card-list .ext-related-articles-card-thumb {
		filter: invert( 1 ) hue-rotate( 180deg );
	}

	/* Reset overrides, needed where double application above isn't working. */
	/* Vector modern */
	sup img,
	html .skin-vector .mw-logo-wordmark,
	html .skin-vector .mw-logo-tagline,
	html .wvui-icon svg {
		filter: invert( 1 ) hue-rotate( 180deg );
	}
	
	/* Flip gradient for Donate button upside down */
	/* This way when the gradient is inverted it looks rightside up */
	#p-support .body a {
		background: -moz-linear-gradient(top,#B3802B 0%,#EBA42D 3%,#FFCE7B 98%,#FFDFA8 100%) !important;
		background: -o-linear-gradient(top,#B3802B 0%,#EBA42D 3%,#FFCE7B 98%,#FFDFA8 100%) !important;
		background: -ms-linear-gradient(top,#B3802B 0%,#EBA42D 3%,#FFCE7B 98%,#FFDFA8 100%) !important;
		background: -webkit-gradient(linear,left top,left bottom,color-stop(0.0,#B3802B),color-stop(0.03,#EBA42D),color-stop(0.98,#FFCE7B),color-stop(1.0,#FFDFA8)) !important;
		background: linear-gradient(top,#B3802B 0%,#EBA42D 3%,#FFCE7B 98%,#FFDFA8 100%) !important;
	}
	
	/* Special dark version of RationalWiki site logo */
	/* Repository here: https://gist.github.com/elsiehupp/cc6507e546e90a3d786cec386b096f5d */
	.mw-wiki-logo {
		background: url(https://gist.github.com/elsiehupp/cc6507e546e90a3d786cec386b096f5d/raw/6361946f9cf5105ed66cb13b634bfcfd0e3db8d8/Rw_logo_dark.png) !important;
		background-repeat: no-repeat !important;
		background-position: center center !important;
		filter: invert( 1 ) hue-rotate( 180deg );
	}

	/* Backgrounds */
	html table,
	html table.ambox-content,
	html table.toccolours,
	html .mw-notification,
	html .mwe-popups,
	html .infobox,
	html .toc,
	html .thumbinner,
	html .wikitable,
	html .cbnnr-main,
	html .cx-callout,
	html #simpleSearch,
	html #simpleSearch #searchInput,
	html #siteNotice #centralNotice .cnotice {
		background-color: #ddd;
	}

	/* Borders */
	html body,
	html h1,
	html h2,
	html h3,
	html h4,
	html h5,
	html h6,
	html table.ambox-content,
	html table.toccolours,
	html .mw-notification,
	html .infobox,
	html .toc,
	html .thumbinner,
	html #mw-head,
	html #mw-panel,
	html #content.mw-body,
	html #simpleSearch,
	html #simpleSearch #searchInput,
	html #siteNotice #centralNotice .cnotice {
		border-color: #cdcbc8;
	}

	/* Links */
	/* Links: normal */
	html a,
	html .vector-menu-tabs li a,
	/* Backwards compatible VectorTabs, deprecated in MW v1.35. */
	html .vectorTabs li a,
	html .toctogglelabel,
	html .mw-parser-output a.external,
	html .mw-parser-output a.extiw,
	html .mw-parser-output a.extiw:active,
	html #mw-panel .portal .body li a {
		/* color: #69f; Proposal below for level AA conformance, see also https://phabricator.wikimedia.org/T233266
		`#36c` is transformed by :root `filter` to be closer to chosen `#69f`. */
		color: #36c;
	}

	/* Links: visited */
	html a:visited,
	html .mw-parser-output a.extiw:visited,
	html #mw-panel .portal .body li a:visited {
		/* color: #709bbd; Proposal below uses to-be-standardized color from https://phabricator.wikimedia.org/T213778 */
		color: #6b4ba1;
	}

	/* Links: red */
	html a.new,
	html .vector-menu-tabs li.new a,
	html .vectorTabs li.new a {
		color: #ff6e6e;
	}

	/* ::: Special Element Treatments ::: */
	/* Image thumbnails */
	html .thumbimage {
		border: 0;
	}

	/* Content image (thumbnail) SVGs */
	/* `*not( .mbox-image )` exception doesn't work for unclear reasons */
	html .image img[ src*='svg' ],
	html img[ src*='Wiktionary-logo'] {
		background-color: #fff;
		border-radius: 1px;
	}

	/* Dealing with false positives from selector above */
	html .mw-echo-ui-notificationItemWidget-icon img[ src*='svg' ],
	html .mbox-image .image img[ src*='svg' ],
	/* Vote symbols on Talk pages */
	html .image img[ alt^="Symbol" ] {
		background-color: transparent;
	}

	/* Page previews */
	html .mwe-popups {
		box-shadow: 0 30px 90px -20px rgba( 0, 0, 0, 0.3 ), 0 0 1px #000;
	}

	html .mwe-popups .mwe-popups-extract[ dir='ltr' ]:after {
		background-image: -webkit-linear-gradient( 90deg, rgba( 221, 221, 221, 0 ), #ddd 50% );
		background-image: -moz-linear-gradient( 90deg, rgba( 221, 221, 221, 0 ), #ddd 50% );
		background-image: linear-gradient( 90deg, rgba( 221, 221, 221, 0 ), #ddd 50% );
	}

	html .mwe-popups.flipped-y:after,
	html .mwe-popups.flipped-x-y:after {
		border-top: 11px solid #ddd;
	}

	html .mwe-popups.mwe-popups-no-image-pointer:after {
		border-bottom: 11px solid #ddd;
	}

	/* Contributions menu */
	html .cx-callout-1:after {
		border-bottom-color: #ddd;
	}

	/* ::: Skin specific rules ::: */
	/* Wikipedia globe fix */
	.skin-vector #p-logo.mw-no-invert,
	.skin-timeless #p-logo.mw-no-invert {
		position: absolute;
		top: 0;
		height: 112px;
		overflow: hidden;
	}
	
	/* Timeless globe fix */
	.skin-timeless #mw-site-navigation {
		position: relative;
	}

	.skin-timeless #p-logo.mw-no-invert {
		left: 1em;
		height: 124px;
	}

	/* Mobile Wikipedia logo mobile header */
	html .branding-box img {
		filter: brightness( 0 );
	}

	@-moz-document url-prefix() {
		body {
			background: #000;
		}

	}

}