MediaWiki:Gadget-dark-timeless.css

Note : après avoir publié vos modifications, il se peut que vous deviez forcer le rechargement complet du cache de votre navigateur pour voir les changements.

• Firefox / Safari : maintenez la touche Maj (Shift) en cliquant sur le bouton Actualiser ou appuyez sur Ctrl + F5 ou Ctrl + R (⌘ + R sur un Mac).
• Google Chrome : appuyez sur Ctrl + Maj + R (⌘ + Shift + R sur un Mac).
• Internet Explorer / Edge : maintenez la touche Ctrl en cliquant sur le bouton Actualiser ou pressez Ctrl + F5.
• Opera : appuyez sur Ctrl + F5.

:root .skin-timeless {
	/** Current impl */
	--article        : #222222; /* Article table */
	--body-1         : #111111; /* Page background stripe 1 */
	--body-2         : #181818; /* Page background stripe 2 */
	--border         : #999999; /* Layout border */
	--divider        : #94bf00; /* Layout divider */
	--footer-1       : #191919; /* Page footer 1 */
	--footer-2       : #111111; /* Page footer 2 */
	--input          : #000000; /* Data input background */
	--input-text     : #e4e4e4; /* Data input text */
	--link-admin     : #009400; /* Admin user link */
	--link-bureaucrat: #daa520; /* Bureaucrat user link */
	--link-external  : #4b7bce; /* External link */
	--link-internal  : #3b9400; /* Internal link */
	--link-missing   : #e15151; /* Link destination does not exist */
	--link-niwa      : #319471; /* NIWA affiliate link */
	--link-visited   : #B969AE; /* Visited link */
	--mark           : #484800; /* <mark> background */
	--page           : #111111; /* Main content background */
	--page-b         : #000000; /* Secondary content background */
	--page-text      : #e4e4e4; /* Main content text */
	--page-text-b    : #ababab; /* Secondary content text */
	--reference      : #001024; /* Selected reference background */
	--reply-highlight: #855d00; /* Briefly displayed after reply */
	--selected       : #3366cc; /* Selection background */
	--selected-text  : #ffffff; /* Selection text */
	--shadow         : #000000; /* Layout shadow */
	
	--diff-add	   : #0064C2; /* Diff added contents box border */
	--diff-add-word: #0063C7; /* Diff added word background */
	--diff-context : #616670; /* Diff context box border */
	--diff-del	   : #805e00; /* Diff deleted contents box border */
	--diff-del-word: #7e5901; /* Diff deleted word background */
	--diff-history : #181818; /* Selected diff in history */

	--ui-error      : #df434399;
	--ui-grey       : #ffffff54;
	--ui-invert     : #00000099;
	--ui-main-theme : #00B800;   /* The main UI theme including some components */
	--ui-main-theme-b : rgba(0, 184, 0, 0.25);   /* Above with background highlight opacity */
	--ui-normal     : #ffffff99;
	--ui-progressive: #507bd399;
	--ui-warning    : #ffcc3399;

	/** Overrides on site colors for better dark mode */
	--site-color-text-default			: white;
	--site-color-text-generic			: white;
	--site-color-text-niwa				: white;
	--site-color-text-oe				: white;
	--site-color-text-so				: white;
	--site-color-text-sr				: white;
	--site-color-text-s 				: white;
	--site-color-text-s2				: white;
	--site-color-text-s3				: white;

	/** CSS on this page */
	--translucent-background: rgba(75, 75, 75, 0.8);
	--infobox-background: rgba(75, 75, 75, 0.8);
	--menu-background: rgba(75, 75, 75, 0.96);
	--hatnote-background: rgba(75, 75, 75, 0.5);
	--body-background: #111;  /* was 000 */
	--text-color: var(--page-text);  /* was fff */
	--filter: brightness(0) invert(1);
	--caption: #e4e4e4;  /* was fff */
	--image-border: 2px solid #e4e4e4;
	}

@media screen and (min-width: 768px) {
	.skin-timeless .header-container.header-chrome {
		background: var(--menu-background);
	}
	.skin-timeless .content figcaption, .content .thumbcaption {
		color: var(--caption);
	}
	.skin-timeless .page-actions-menu__list-item > a {
		color: var(--grey-text-color);
	}
}
@media screen and (min-width: 1025px) {
	.skin-timeless .pre-content h1 {
		color: var(--text-color);
	}
}
.skin-timeless #mw-mf-page-left ul.hlist li a {
	color: var(--link-color);
}
.skin-timeless .overlay-header-container, .overlay-footer-container {
	background: var(--translucent-background);
}
.skin-timeless #mw-mf-page-left {
	background: var(--translucent-background);
}
.skin-timeless .mw-searchresults-has-iw .iw-resultset {
	background: var(--infobox-background);
}

/* Dark Mode */
.skin-timeless #content, #mw-mf-page-center {
	background: var(--body-background);
	color: var(--text-color);
}
.skin-timeless .toggle-list__list {
	background: var(--translucent-background);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}
.skin-timeless .toggle-list-item:hover {
	background: var(--body-background);
}
.skin-timeless .toggle-list-item__label {
	color: var(--text-color);
}
.skin-timeless .mw-highlight {
	background: var(--translucent-background);
}
.skin-timeless .page-summary h2, .page-summary h3, .overlay.search-overlay li.page-summary .wikidata-description {
	color: var(--text-color);
}
.skin-timeless .unicode, .haudio {
	filter: var(--filter);
}
.skin-timeless .branding-box img {
	filter: var(--filter);
}
.skin-timeless .mw-ui-icon-element, .mw-ui-icon-before:before {
	filter: var(--filter);
}
.skin-timeless .client-js .toc {
	background-color: var(--body-background);
}
.skin-timeless #pt-notifications-alert .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read, #pt-notifications-notice .mw-echo-notifications-badge.mw-echo-notifications-badge-all-read {
	opacity: 1;
	filter: var(--filter);
}
.skin-timeless .minerva__tab-container .minerva__tab:visited, .minerva__tab-container .minerva__tab:hover, .minerva__tab-container .minerva__tab:active, .minerva__tab-container .minerva__tab.new, .minerva__tab-container .minerva__tab.new:visited, .minerva__tab-container .minerva__tab.new:active, .minerva__tab-container .minerva__tab.new:hover {
	color: var(--text-color);
}
.skin-timeless #mw-mf-page-left ul li a {
	color: var(--text-color);
}
.skin-timeless .content figure .thumbinner, .content .thumb .thumbinner {
	background: var(--infobox-background);
}
.skin-timeless .overlay {
	background: var(--translucent-background);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}
.skin-timeless .hatnote {
	background: var(--translucent-background);
	color: var(--caption);
	border-radius: 10px;
}

/* Banner */
.skin-timeless #mw-mf-page-left ul li a {
	color: var(--text-color);
}
.skin-timeless .header-container.header-chrome {
	background: var(--menu-background);
	box-shadow: 3px 3px 6px rgba(0,0,0,0.20);
}
/* Targeting Safari for Backdrop Filter and Font size bug*/
@media not all and (min-resolution:.001dpcm) { 
    @media {
        .header-container.header-chrome {
   			background: var(--translucent-background) !important;
   			-webkit-backdrop-filter: blur(20px);
   			backdrop-filter: blur(20px);
  		}
  		@media screen and (min-width: 768px) {
  			body, p {
				font-size: 1.1em !important;
			}
			.pre-content h1 {
				font-size: 3em;
			}
  		}
    }
}
@media screen and (max-width: 767px) {
	.skin-timeless .content figcaption, .content .thumbcaption {
		color: var(--text-color);
	}
}
/* Fonts */
.skin-timeless .pre-content h1 {
	color: var(--text-color);
}
.skin-timeless h2 .mw-headline {
	color: var(--text-color);
}
.skin-timeless h3 .mw-headline{
	color: var(--text-color);
}
.skin-timeless h4 .mw-headline{
	color: var(--text-color);
}
.skin-timeless .content table.infobox {
	background: var(--infobox-background);
	color: var(--text-color);
}
/* Editor */
.skin-timeless .oo-ui-toolbar-bar {
	background-color: var(--translucent-background);
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	color: var(--text-color);
}
.skin-timeless .oo-ui-iconElement-icon {
	filter: var(--filter);
}
.skin-timeless .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-iconElement-icon, .oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle .oo-ui-indicatorElement-indicator {
	filter: var(--filter);
}
.skin-timeless .client-js .mw-edittools-section input[type="button"] {
	color: var(--text-color);
}