User:KnowledgeJunkie/vector.css
Jump to navigation
Jump to search
Note: After saving, you have to bypass your browser's cache to see the changes. The simplest method that will work for most users is to hold down the ⇧ Shift key and click the Reload toolbar button. For details and other methods, see Help:Clear your browser cache.
/* 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;
}