User:KnowledgeJunkie/vector.css

/* Timeless and Vector skin -- Dark mode, hand-picked colours */



/**** Color palette ****/

/* Common colors */
:root {
	--warn-bg-1: #fef6e7;  /* .warningbox  from Vector, Timeless */
	--warn-bg-2: #ffdbdb;  /* div.mw-warning-with-logexcerpt  from Vector, Timeless */
	--warn-border-1: #fc3;  /* from Timeless */
	--warn-border-2: #bb7070;  /* from Timeless */
	--warn-bg-1: #cb6;
	--warn-bg-1: #d95;  /* from Timeless? */
	--warn-bg-1: #d80;
	--warn-text-1: var(--text-shade-1);
	--warn-text-1: #222;
	--warn-text-1: #fff;

	--warn-bg-2: #d63;
	--warn-text-2: var(--text-shade-1);
	--warn-text-2: #222;
	--warn-text-2: #ddd;

	--note-text-1: #000;

	--focus-border-color: #36c;  /* from Timeless */
	--focus-border-color: var(--link-shade-4);
	--focus-border-color: royalblue;
	--focus-border-color: #46dc;
	--link-hover-bg: #fff8;
	--link-hover-bg: #8884;

	--link-red-1: #a55858;  /* from Vector */
	--link-red-2: #ba0000;  /* from Vector */
	--link-red-1: #b32424;  /* from WMF Style Guide */
	--link-red-2: #dd3333;  /* from WMF Style Guide */
}


/** Dark mode: discord-like colors **/

/**/ :root,  /* Not the default palette */
:root.dark {
	--text-shade-1: #fff;
	--text-shade-2: #ddd;
	--text-shade-3: #bbb;
	--text-shade-4: #999;

	--link-shade-1: #ddf;
	--link-shade-2: #bbf;
	--link-shade-3: #99f;
	--link-shade-4: #66f;
	--link-focus-bg: #48ad;

	--bg-overlay-0: #0008;
	--bg-shadow-0: #000a;
	--bg-shadow-1: var(--bg-shade-0);
	--popup-bg: #222e;  /* alpha(var(--bg-shade-2), #d); */
	--popup-anim-bg: #fff6;

	--bg-shade-0: #000;
	--bg-shade-1: #181818;
	--bg-shade-2: #222;
	--bg-shade-3: #333;
	--border-shade-3: var(--bg-shade-5);
	--bg-shade-3a: #3a3a3a;
	--bg-shade-4: #444;
	--border-shade-4: var(--bg-shade-5);
	--bg-shade-48: #484848;
	--bg-shade-4a: #4a4a4a;
	--bg-shade-50: #505050;
	--bg-shade-5: #555;
	--bg-shade-6: #666;

	/* Difference view: gray, red and green with highlights */
	--diff-bg: var(--bg-shade-4);
	--diff-bg: #fff1;  /* brighten -- add some white with transparency -> #414141 */
	/* --diff-bg: #fff2; */  /* bit bright -> #4f4f4f */
	--diff-text: var(--text-shade-2);
	--diff-text-1: var(--text-shade-1);
	--diff-text-1: unset;  /* inherit var(--diff-text); */

	/* --diff-add-bg: #0f04; */  /* bit bright */
	--diff-add-bg: #0f03;  /* add some green to --bg-shade-3 -> #2a5a2e */
	--diff-add-bg: #353;  /* #444 + #0f03 -> #2a5a2e rounded */
	--diff-add-bg-1: #0f05;  /* add more green -> #258b2a */
	--diff-add-bg-1: #282;  /* #353 + #0f05 -> #258b2a rounded */

	/* --diff-del-bg: #f004; */  /* bit bright */
	--diff-del-bg: #f003;  /* add some red to --bg-shade-3 -> #5d2d2d */
	--diff-del-bg: #533;  /* #444 + #f003 -> #5d2d2d rounded, bit dimmer */
	--diff-del-bg-1: #f005;  /* add more red -> #8f2829 */
	--diff-del-bg-1: #833;  /* #533 + #f005 -> #8f2829 rounded */

	/* --warn-bg-1: #b71; */
	/* --warn-bg-1: #cb6; */
	--image-invert: invert(1);
}
:root.dark.a1 {
	--text-shade-1: #dde;
	--text-shade-2: #bbc;
	--text-shade-3: #99a;
	--text-shade-4: #778;
}
:root.dark.a2 {
	--text-shade-1: #eef;
	--text-shade-2: #ccd;
	--text-shade-3: #aab;
	--text-shade-4: #889;
}