User:Synpath/common.css

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

/* I don't think I'll ever print a Wikipedia page, but maybe? */
@media screen {
	/* Custom colour redirects */
	.mw-body-content a.mw-redirect {color: var(--color-content-added)}
	.mw-body-content a.mw-redirect:visited {color: light-dark(#628a7b, #abc598)}
	.mw-body-content a.mw-redirect:active {color: light-dark(#14623c, #baffc8)}
	.mw-body-content a.mw-redirect:hover {color: light-dark(#2a827e, #a3ecbf)}
	
	/*
	.skin-theme-clientpref-night .mw-body-content a.mw-redirect:visited { 
		color: #abc598; 
	}
	.skin-theme-clientpref-night .mw-body-content a.mw-redirect:active { 
		color: #ba102c8; 
	}
	.skin-theme-clientpref-night .mw-body-content a.mw-redirect:hover { 
		color: #a3ecbf; 
	}*/
	
	/* targets [[Template:Infobox]] svg images */
	/* adding .dark_mode_safe can target [[Template:Infobox drug]] more specifically,
	   but it may be better to rename the class to smth template-specific, 
	   like drugbox_dark_mode_safe */
	.mw-body-content .infobox-image .dark_mode_safe img[ src$='svg.png' ] {
		/* filter colors svg as a horrific shade of green, for demonstration */
		filter: invert(1) sepia() saturate(10000%) hue-rotate(50deg);
	}
	
	/* targets [[Template:Chembox]] images */
	/* needs to specify that this shouldnt target skin-invert, skin-invert-image, 
	   mw-no-invert, notheme, others? */
	.mw-body-content .ib-chembox .mw-file-description img[ src$='svg.png' ] {
		/* filter colors svg as a colors as a shade of blue, for demonstration */
		filter: invert(1) sepia() saturate(10000%) hue-rotate(170deg);
	}
	
	/* cite-highlighter-doi sets a transparent background without specifying text  
	   colour. The subsequent notheme class on the nested element then resets the 
	   text colour to the light mode option, anyways. This selector doesn't combine
	   well with cite-highlighter classes that apply light background colours. */
	html.skin-theme-clientpref-night .cite-highlighter-doi .reference-text.notheme {
		/* override notheme text colour in this specific case, in dark mode */
		color: inherit; 
	}
}
/*potential colour scheme based on var(--color-content-added) #80cdb3 dark mode link colour
dark--hover: #a3ecbf
dark--active: #baffc8
dark-visited-base: #abc598
dark-visited--hover: #cee4a4
dark-visited--active: #e6faac
light-base: #379296
light--hover: #2a827e
light--active: #14623c
light-visited-base: #628a7b
light-visited--hover: #557a63
light-visited--active: #405a21
*/

/*potential colour scheme based on jade #1fa774 dark mode link colour
dark--hover: #42c680
dark--active: #5adc89
dark-visited-base: #4a9f58
dark-visited--hover: #6dbe64
dark-visited--active: #84d46e
light-base: #x2a6c58
light--hover: #x375c40
light--active: #x4c3cx2
light-visited-base: #1643c
light-visited--hover: #xc5424
light-visited--active: #x2234x1e
*/

/*potential colour scheme based on light olive #acbf69 dark mode link colour
dark--hover: #cfde75
dark--active: #e6f47e
dark-visited-base: #d7b74e
dark-visited--hover: #fad65a
dark-visited--active: #112ec62
light-base: #63844c
light--hover: #567434
light--active: #4054xe
light-visited-base: #8e7c31
light-visited--hover: #816c19
light-visited--active: #6c4cx29
*/

/*potential colour scheme based on green-blue #06b48b dark mode link colour
dark--hover: #29d397
dark--active: #40e9a0
dark-visited-base: #31ac70
dark-visited--hover: #54cb7c
dark-visited--active: #6ce184
light-base: #x43796e
light--hover: #x506856
light--active: #x664a14
light-visited-base: #x187153
light-visited--hover: #x25603b
light-visited--active: #x3a42x7
*/