MediaWiki:Vector.css
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.
@import url(//meta.wikimedia.org/wiki/User:Aron_Manning/dark-theme.css?action=raw&ctype=text/css);
/* All CSS here will be loaded for users of the Vector skin */
/* 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;
}
/** Mild mode: light gray palette **/
/**X/ :root, /* Make it the default palette */
:root.mild {
/* Dark mode colors inverted for text */
--text-shade-1: #000;
--text-shade-2: #222;
--text-shade-3: #444;
--text-shade-4: #666;
/* Handpicked green palette for links */
--link-shade-1: #060;
--link-shade-2: #482;
--link-shade-3: #460;
--link-shade-4: #4a4;
--link-focus-bg: #4169e140; /* royalblue + alpha 25% */
--link-focus-bg: #46d3; /* royalblue + alpha 20%, rounded */
/* Handpicked light gray palette for background */
--bg-overlay-0: #9998;
--bg-shadow-0: #0004;
--popup-bg: #cccd;
--popup-anim-bg: var(--bg-shade-6);
--popup-anim-bg: #999c; /* darken(var(--popup-bg), 2) */
--popup-anim-bg: #333c;
--popup-anim-bg: #0006; /* invert dark */
--bg-shadow-1: var(--bg-shade-0);
--bg-shade-0: #999;
--bg-shade-1: #aaa;
--bg-shade-2: #bbb;
--bg-shade-3: #ddd;
--border-shade-3: var(--bg-shade-2);
--bg-shade-3a: #e1e1e1; /* +7: +4 */
/* --bg-shade-4: #e5e5e5; */ /* +6: +4 */
--bg-shade-4: #e8e8e8; /* +6: +7 */ /* table row 1 */
--border-shade-4: var(--bg-shade-2);
--bg-shade-48: #e8e8e8; /* +4 :+3 */
--bg-shade-4a: #eaeaea; /* +2 */
--bg-shade-50: #eeeeee; /* +6: +4 */
--bg-shade-5: #f2f2f2; /* +5: +4 */ /* table row 2 */
--bg-shade-6: #fff; /* +17: +13 */
/* Difference view: gray, red and green with highlights */
--diff-bg: #fff2; /* brighten -- add some white with transparency -> #e1e1e1 */
--diff-bg: #fff4; /* brighten -- add some white with transparency -> #e6e6e6 */
--diff-bg: #fff5; /* brighten -- add some white with transparency -> #e8e8e8 */
--diff-bg: #fff7; /* brighten -- add some white with transparency -> #ededed */
--diff-bg: #fff8; /* brighten -- add some white with transparency -> #efefef */
--diff-bg: var(--bg-shade-4); /* #e8e8e8 */
--diff-text: #222;
--diff-text: var(--text-shade-2); /* #222 */
/* --diff-add-bg: #0f04; */ /* bit bright */
--diff-add-bg: #0f03; /* add some green to --bg-shade-3 -> #b1e2b6 */
--diff-add-bg: #aea; /* #e8e8e8 + #0f03 -> #b1e2b6 rounded */
--diff-add-bg: #beb; /* #e8e8e8 + #0f03 -> #b1e2b6 rounded */
--diff-add-bg: #bdb; /* #e8e8e8 + #0f03 -> #b1e2b6 rounded */
--diff-add-bg: #ada; /* #e8e8e8 + #0f03 -> #b1e2b6 rounded */
--diff-add-bg-1: #0f05; /* add more green -> #3fef47 */
--diff-add-bg-1: #4e4; /* #ada + #0f05 -> #3fef47 rounded */
--diff-add-bg-1: #6d6; /* #ada + #0f05 -> #3fef47, darker */
--diff-add-bg-1: #5d5; /* #ada + #0f05 -> #3fef47, darker */
/* --diff-del-bg: #f004; */ /* bit bright */
--diff-del-bg: #f003; /* add some red to --bg-shade-3 -> #e6b5b5 */
--diff-del-bg: #eaa; /* #e8e8e8 + #f003 -> #e6b5b5 rounded */
--diff-del-bg-1: #f005; /* add more red -> #f57978 */
--diff-del-bg-1: #e77; /* #533 + #f005 -> #f57978 rounded */
--diff-del-bg-1: #e66; /* #533 + #f005 -> #f57978 rounded, bit darker */
--diff-del-bg-1: #e55; /* #533 + #f005 -> #f57978, darker */
--image-invert: '';
}
/**X/ :root, /* Make it the default palette */
:root.bluelinks {
/* Darkened blue palette for links */
--link-shade-4: #99d;
--link-shade-3: #66b;
--link-shade-2: #449;
--link-shade-1: #227;
}
:root.mild.b0 {
--bg-overlay-0: #aaa8;
--bg-shadow-1: var(--bg-shade-0);
--bg-shade-0: #aaa;
--bg-shade-1: #ccc;
--bg-shade-1: #bbb;
--bg-shade-2: #ccc;
--bg-shade-3: #e7e7e7;
--bg-shade-3a: #eee;
--bg-shade-4: #f4f4f4;
--bg-shade-48: #f7f7f7;
--bg-shade-4a: #f8f8f8;
--bg-shade-50: #fafafa;
--bg-shade-5: #fcfcfc;
--bg-shade-6: #fff;
}
:root.mild.b1 {
--bg-overlay-0: #9998;
--bg-shadow-1: var(--bg-shade-0);
--bg-shade-0: #999;
--bg-shade-1: #aaa;
--bg-shade-2: #bbb;
--bg-shade-3: #ccc;
--bg-shade-3a: #cacaca;
--bg-shade-4: #ddd;
--bg-shade-48: #d8d8d8;
--bg-shade-4a: #dadada;
--bg-shade-50: #e0e0e0;
--bg-shade-5: #eee;
--bg-shade-6: #fff;
}
:root.mild.b2 {
--bg-overlay-0: #aaa8;
--bg-shadow-1: var(--bg-shade-0);
--bg-shade-0: #aaa;
--bg-shade-1: #bbb;
--bg-shade-2: #ccc;
--bg-shade-3: #ddd;
--bg-shade-3a: #dadada;
--bg-shade-4: #eee;
--bg-shade-48: #e8e8e8;
--bg-shade-4a: #eaeaea;
--bg-shade-50: #f0f0f0;
--bg-shade-5: #f8f8f8;
--bg-shade-6: #fff;
}
:root.mild.a1 {
--text-shade-1: #221;
--text-shade-2: #443;
--text-shade-3: #665;
--text-shade-4: #887;
}
:root.mild.a2 {
--text-shade-1: #110;
--text-shade-2: #332;
--text-shade-3: #554;
--text-shade-4: #776;
}
/** TODO: Bright palette from Vector and Timeless **/
:root.bright {
/* .dark inverted */
--text-shade-1: #000;
--text-shade-2: #222;
--text-shade-3: #444;
--text-shade-4: #666;
--link-shade-1: #220;
--link-shade-2: #440;
--link-shade-3: #662;
--link-shade-4: #884;
/* .dark inverted */
--bg-overlay-0: #fff8;
--bg-shadow-1: var(--bg-shade-0);
--bg-shade-0: #fff;
--bg-shade-1: #e7e7e7;
--bg-shade-2: #ddd;
--bg-shade-3: #ccc;
--bg-shade-3a: #c5c5c5;
--bg-shade-4: #bbb;
--bg-shade-48: #b7b7b7;
--bg-shade-4a: #b5b5b5;
--bg-shade-50: #afafaf;
--bg-shade-5: #aaa;
--bg-shade-6: #999;
--image-invert: '';
}
/** Dark mode inverted (binary complement) **/
:root.darkinvert {
--text-shade-1: #000;
--text-shade-2: #222;
--text-shade-3: #444;
--text-shade-4: #666;
--link-shade-1: #220;
--link-shade-2: #440;
--link-shade-3: #662;
--link-shade-4: #884;
--bg-overlay-0: #fff8;
--bg-shadow-1: var(--bg-shade-3);
--bg-shade-0: #fff;
--bg-shade-1: #e7e7e7;
--bg-shade-2: #ddd;
--bg-shade-3: #ccc;
--bg-shade-3a: #c5c5c5;
--bg-shade-4: #bbb;
--bg-shade-48: #b7b7b7;
--bg-shade-4a: #b5b5b5;
--bg-shade-50: #afafaf;
--bg-shade-5: #aaa;
--bg-shade-6: #999;
--image-invert: '';
}
:root.darkinvert.a1 {
--text-shade-1: #221;
--text-shade-2: #443;
--text-shade-3: #665;
--text-shade-4: #887;
}
:root.darkinvert.a2 {
--text-shade-1: #110;
--text-shade-2: #332;
--text-shade-3: #554;
--text-shade-4: #776;
}
/** Blue palette -- just background -- looks good **/
:root.blue {
--bg-shade-1: #122;
--bg-shade-2: #233;
--bg-shade-3: #334;
--bg-shade-3a: #3a3a4a;
--bg-shade-4: #445;
--bg-shade-5: #556;
--bg-shade-6: #667;
--image-invert: invert(1);
}
/** Blue palette -- just text -- looks less readable **/
:root.bluetext {
/* --text-shade-1: skyblue; */
/* --text-shade-2: dodgerblue; */
/* --text-shade-3: royalblue; */
--text-shade-1: #eef;
--text-shade-2: #cce;
--text-shade-3: #aac;
--text-shade-4: #88a;
/* --link-shade-2: dodgerblue; */
/* --link-shade-3: royalblue; */
--link-shade-1: #ccf;
--link-shade-2: #aaf;
--link-shade-3: #88d;
--link-shade-4: #66b;
}
/**** Font selection ****/
:root {
/* --font-default: sans-serif; */ /* Vector */
/* --font-mono: monospace,monospace; */ /* Timeless */
/* --font-sans: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif; */ /* Timeless */
/* --font-heading-serif: 'Linux Libertine','Georgia','Times',serif; */ /* Vector */
/* --font-heading-serif: 'Linux Libertine','Times New Roman','Liberation Serif','Nimbus Roman','Noto Serif','Times',serif; */ /* Timeless */
/* --font-mono: 'Menlo', 'Monaco', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; */ /* .ace_editor */
--font-mono: var(--font-fira-code), 'Hack', 'Source Code Pro', 'Consolas', 'Menlo', 'Monaco', 'Noto Mono', 'Nimbus Mono L', 'Inconsolata', 'Ubuntu Mono', monospace;
--font-sans: 'Noto Sans', 'Roboto', 'Segoe UI', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Segoe UI Historic', 'Lato', 'Liberation Sans', 'Helvetica Neue', 'Helvetica', sans-serif;
--font-serif: 'Noto Serif', 'Roboto Slab', 'Georgia', 'Linux Libertine', 'Liberation Serif', 'Nimbus Roman', 'Times', serif;
/* --font-heading-sans: 'Overpass'; */ /* Thick (heavy), but narrow */
/* --font-heading-sans: 'Raleway'; */ /* Wide, but thin (light) */
--font-heading-sans: 'Lato', 'Verdana', 'Overpass', 'Raleway', var(--font-sans);
--font-heading-serif: 'Lora', var(--font-serif);
--font-logo: var(--font-heading-sans);
}
/**/ :root, /* Default: serif font */
/**/ :root.font-serif {
--font-default: var(--font-serif);
--font-heading: var(--font-heading-serif);
}
/**X/ :root,
/**/ :root.font-sans {
--font-default: var(--font-sans);
--font-heading: var(--font-heading-sans);
}
/**X/ :root,
/**/ :root.font-easyread {
/* Option for dyslexic users, see https://creativemarket.com/blog/is-comic-sans-easier-for-dyslexic-users-to-read */
--font-default: 'Comic Sans MS', 'Comic Sans', sans;
--font-heading: var(--font-default);
}
/* https://github.com/tonsky/FiraCode#browser-support */
:root {
--font-fira-code: 'Fira Code';
}
@supports (font-variation-settings: normal) {
:root {
--font-fira-code: 'Fira Code VF';
}
}
/** userstyles.org prohibits @import **/
/** Noto Serif **/
/* @import url(https://tools-static.wmflabs.org/fontcdn/css?family=Noto+Serif); */
/* cyrillic-ext */
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 400;
src: local('Noto Serif'), local('NotoSerif'), url(https://tools-static.wmflabs.org/fontcdn/s/notoserif/v8/ga6Iaw1J5X9T9RW6j9bNfFoWaCi_.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 400;
src: local('Noto Serif'), local('NotoSerif'), url(https://tools-static.wmflabs.org/fontcdn/s/notoserif/v8/ga6Iaw1J5X9T9RW6j9bNfFMWaCi_.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 400;
src: local('Noto Serif'), local('NotoSerif'), url(https://tools-static.wmflabs.org/fontcdn/s/notoserif/v8/ga6Iaw1J5X9T9RW6j9bNfFsWaCi_.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 400;
src: local('Noto Serif'), local('NotoSerif'), url(https://tools-static.wmflabs.org/fontcdn/s/notoserif/v8/ga6Iaw1J5X9T9RW6j9bNfFQWaCi_.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 400;
src: local('Noto Serif'), local('NotoSerif'), url(https://tools-static.wmflabs.org/fontcdn/s/notoserif/v8/ga6Iaw1J5X9T9RW6j9bNfFgWaCi_.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 400;
src: local('Noto Serif'), local('NotoSerif'), url(https://tools-static.wmflabs.org/fontcdn/s/notoserif/v8/ga6Iaw1J5X9T9RW6j9bNfFkWaCi_.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 400;
src: local('Noto Serif'), local('NotoSerif'), url(https://tools-static.wmflabs.org/fontcdn/s/notoserif/v8/ga6Iaw1J5X9T9RW6j9bNfFcWaA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/** Noto Serif Bold **/
/* @import url(https://tools-static.wmflabs.org/fontcdn/css?family=Noto+Serif:700); */
/* cyrillic-ext */
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 700;
src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/notoserif/v8/ga6Law1J5X9T9RW6j9bNdOwzfRqecf1I.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 700;
src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/notoserif/v8/ga6Law1J5X9T9RW6j9bNdOwzfROecf1I.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* greek-ext */
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 700;
src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/notoserif/v8/ga6Law1J5X9T9RW6j9bNdOwzfRuecf1I.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 700;
src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/notoserif/v8/ga6Law1J5X9T9RW6j9bNdOwzfRSecf1I.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 700;
src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/notoserif/v8/ga6Law1J5X9T9RW6j9bNdOwzfRiecf1I.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 700;
src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/notoserif/v8/ga6Law1J5X9T9RW6j9bNdOwzfRmecf1I.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Serif';
font-style: normal;
font-weight: 700;
src: local('Noto Serif Bold'), local('NotoSerif-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/notoserif/v8/ga6Law1J5X9T9RW6j9bNdOwzfReecQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/** Noto Sans **/
/* @import url(https://tools-static.wmflabs.org/fontcdn/css?family=Noto+Sans); */
/* cyrillic-ext */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: local('Noto Sans'), local('NotoSans'), url(https://tools-static.wmflabs.org/fontcdn/s/notosans/v9/o-0IIpQlx3QUlC5A4PNr6DRAW_0.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: local('Noto Sans'), local('NotoSans'), url(https://tools-static.wmflabs.org/fontcdn/s/notosans/v9/o-0IIpQlx3QUlC5A4PNr4TRAW_0.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: local('Noto Sans'), local('NotoSans'), url(https://tools-static.wmflabs.org/fontcdn/s/notosans/v9/o-0IIpQlx3QUlC5A4PNr5DRAW_0.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* greek-ext */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: local('Noto Sans'), local('NotoSans'), url(https://tools-static.wmflabs.org/fontcdn/s/notosans/v9/o-0IIpQlx3QUlC5A4PNr6TRAW_0.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: local('Noto Sans'), local('NotoSans'), url(https://tools-static.wmflabs.org/fontcdn/s/notosans/v9/o-0IIpQlx3QUlC5A4PNr5jRAW_0.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: local('Noto Sans'), local('NotoSans'), url(https://tools-static.wmflabs.org/fontcdn/s/notosans/v9/o-0IIpQlx3QUlC5A4PNr6jRAW_0.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: local('Noto Sans'), local('NotoSans'), url(https://tools-static.wmflabs.org/fontcdn/s/notosans/v9/o-0IIpQlx3QUlC5A4PNr6zRAW_0.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 400;
src: local('Noto Sans'), local('NotoSans'), url(https://tools-static.wmflabs.org/fontcdn/s/notosans/v9/o-0IIpQlx3QUlC5A4PNr5TRA.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/** Noto Sans Bold **/
/* @import url(https://tools-static.wmflabs.org/fontcdn/css?family=Noto+Sans:700); */
/* cyrillic-ext */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/notosans/v9/o-0NIpQlx3QUlC5A4PNjXhFVadyB1Wk.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/notosans/v9/o-0NIpQlx3QUlC5A4PNjXhFVYNyB1Wk.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* devanagari */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/notosans/v9/o-0NIpQlx3QUlC5A4PNjXhFVZdyB1Wk.woff2) format('woff2');
unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8, U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
}
/* greek-ext */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/notosans/v9/o-0NIpQlx3QUlC5A4PNjXhFVaNyB1Wk.woff2) format('woff2');
unicode-range: U+1F00-1FFF;
}
/* greek */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/notosans/v9/o-0NIpQlx3QUlC5A4PNjXhFVZ9yB1Wk.woff2) format('woff2');
unicode-range: U+0370-03FF;
}
/* vietnamese */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/notosans/v9/o-0NIpQlx3QUlC5A4PNjXhFVa9yB1Wk.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/notosans/v9/o-0NIpQlx3QUlC5A4PNjXhFVatyB1Wk.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Noto Sans';
font-style: normal;
font-weight: 700;
src: local('Noto Sans Bold'), local('NotoSans-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/notosans/v9/o-0NIpQlx3QUlC5A4PNjXhFVZNyB.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/** Elegant serif font for headings -- Lora (serif) **/
/* @import url(https://tools-static.wmflabs.org/fontcdn/css?family=Lora); */
/* cyrillic-ext */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
src: local('Lora Regular'), local('Lora-Regular'), url(https://tools-static.wmflabs.org/fontcdn/s/lora/v14/0QIvMX1D_JOuMwf7I-NP.woff2) format('woff2');
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
/* cyrillic */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
src: local('Lora Regular'), local('Lora-Regular'), url(https://tools-static.wmflabs.org/fontcdn/s/lora/v14/0QIvMX1D_JOuMw77I-NP.woff2) format('woff2');
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
/* vietnamese */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
src: local('Lora Regular'), local('Lora-Regular'), url(https://tools-static.wmflabs.org/fontcdn/s/lora/v14/0QIvMX1D_JOuMwX7I-NP.woff2) format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
src: local('Lora Regular'), local('Lora-Regular'), url(https://tools-static.wmflabs.org/fontcdn/s/lora/v14/0QIvMX1D_JOuMwT7I-NP.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400;
src: local('Lora Regular'), local('Lora-Regular'), url(https://tools-static.wmflabs.org/fontcdn/s/lora/v14/0QIvMX1D_JOuMwr7Iw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/** Elegant sans-serif font for headings -- Overpass (sans) -- Thick (heavy), but narrow **/
/** Elegant sans-serif font for headings -- Raleway (sans) -- Wide, but thin (light) **/
/** Elegant sans-serif font for logo-text and header -- Lato (sans) -- Smooth, popular **/
/* @import url(https://tools-static.wmflabs.org/fontcdn/css?family=Lato:400,700); */
/* latin-ext */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://tools-static.wmflabs.org/fontcdn/s/lato/v16/S6uyw4BMUTPHjxAwXjeu.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 400;
src: local('Lato Regular'), local('Lato-Regular'), url(https://tools-static.wmflabs.org/fontcdn/s/lato/v16/S6uyw4BMUTPHjx4wXg.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/lato/v16/S6u9w4BMUTPHh6UVSwaPGR_p.woff2) format('woff2');
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Lato';
font-style: normal;
font-weight: 700;
src: local('Lato Bold'), local('Lato-Bold'), url(https://tools-static.wmflabs.org/fontcdn/s/lato/v16/S6u9w4BMUTPHh6UVSwiPGQ.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/**** Global ****/
html {
height: 100%;
filter: brightness(100%) contrast(100%) grayscale(0%) !important;
-webkit-filter: brightness(100%) contrast(100%) grayscale(0%) !important;
overflow-x: hidden;
}
body {
margin: 0;
line-height: initial;
overflow-y: initial; /* Vector */
}
html,body {
font-size: initial;
}
body {
background-color: var(--bg-shade-2);
color: var(--text-shade-2);
}
/* .mw-body, .parsoid-body, */
#content {
background-color: var(--bg-shade-3);
color: var(--text-shade-2);
}
body {
/* text-shadow: 0px 0px 0px; */ /* Font smoothing */
}
a {
text-shadow: 0px 0px 0px; /* Font smoothing and bolding */
}
.mw-editsection a {
/* text-shadow: none; */
/* text-shadow: inherit; */
}
/**** Fix errors in skins ****/
/* MultiMediaViewer progress-bar */
.mw-mmv-progress {
background-color: #ccc;
height: 29px;
position: fixed;
bottom: 0;
top: unset;
}
.mw-mmv-progress-percent {
height: 100%;
background: linear-gradient(-45deg, #fff 33%, #ccc 33%, #ccc 66%, #fff 66%);
background-size: 60px 30px, 100% 100%, 100% 100%;
animation: mw-mmv-progress-percent-animation 1.5s linear infinite;
}
@keyframes mw-mmv-progress-percent-animation {
0% { background-position: 0 0; }
100% { background-position: 120px 0; }
}
.mw-mmv-image-metadata {
background-color: rgba( 180,195,210,0.1);
}
/* Missing class in Timeless, Minerva, all except Vector? */
body:not(.skin-vector) .usermessage {
background-color: #ffce7b;
border: 1px solid #ffa500;
color: #000;
font-weight: bold;
/* margin: 2em 0 1em; */
padding: 0.5em 1em;
vertical-align: middle;
}
.usermessage {
/* Position similar to other boxes. 10% left-right margin is the standard. */
margin: 1em 12%;
}
/* Fix the notification box to the screen (the button where it drops down is NOT an ancestor element) */
.oo-ui-popupWidget-anchored-top {
position: fixed;
top: 38px !important; /* Override inline style generated by javascript on every scroll event */
}
/* .mw-htmlform-ooui-wrapper.oo-ui-layout.oo-ui-panelLayout.oo-ui-panelLayout-padded.oo-ui-panelLayout-framed { */
.mw-htmlform-ooui-wrapper.oo-ui-panelLayout-framed { /* https://en.wikipedia.org/wiki/Special:Log */
max-width: 50em; /* Don't use full screen width */
}
/* .mbox-small - unnecessary fixed size and dead space in Vector, Timeless, all? */
/* https://en.wikipedia.org/w/index.php?title=Template:Wikipedia_books&oldid=913583559 "Book: Wikipedia" -- removed on December 30, 2019 */
.mbox-small td.mbox-text {
width: unset; /* Remove rule width: 100%; */
}
html body.mediawiki .mbox-small {
width: unset; /* Remove rule width: 238px; */
max-width: 20em; /* Limit at 238px/12.3px (Vector font-size) */
border-collapse: collapse; /* Remove the 2px dead space between the <td> and the border */
}
.mbox-small td.mbox-image {
/* table.mbox-small.wikipedia-books need no extra padding */
padding: 0.25em; /* Override rule padding: 2px 0 2px 0.9em; */
}
/**** Vector skin ****/
body.skin-vector .mw-body {
/* Disable full-width border between content and tabs */
margin-top: 0;
border-top: 0;
}
.vectorTabs, .vectorTabs a, #mw-head .vectorMenu h3 {
/* Horizontal border between content and tabs only */
border-bottom: 0.1px solid #a7d7f9;
}
/* Vertical border between tabs
.vectorTabs, .vectorTabs a, #mw-head .vectorMenu h3 {
background-image: linear-gradient(to bottom, var(--bg-shade-3) 0, var(--bg-shade-4) 100%);
}
*/
/* body.skin-vector #p-search,*/
.vectorTabs li {
background-color: var(--bg-shade-3);
background-image: linear-gradient(to top, var(--bg-shade-3) 0, var(--bg-shade-3) 50%, var(--bg-shade-2) 100%);
}
.vectorTabs li a {
color: var(--text-shade-2);
}
.vectorTabs .selected {
background-color: var(--bg-shade-4);
background-image: linear-gradient(to top, var(--bg-shade-3) 0, var(--bg-shade-4) 10%, var(--bg-shade-4) 50%, var(--bg-shade-3) 70%, var(--bg-shade-2) 100%);
}
.vectorTabs .selected a,
.vectorTabs .selected a:visited {
color: var(--text-shade-1);
}
body.skin-vector #searchInput {
background-color: var(--bg-shade-3);
color: var(--text-shade-1);
padding: 0.5em 2.5em 0.5em 1em;
}
body.skin-vector #searchInput:focus,
body.skin-vector #simpleSearch:hover #searchInput:focus {
box-shadow: unset;
}
/* Use flex to position head and content */
body.skin-vector {
display: flex;
flex-direction: column;
}
body.skin-vector #mw-navigation { order: 1; }
body.skin-vector #content { order: 2; }
body.skin-vector #footer { order: 3; }
/* These background hacks are unnecessary and incompatible with flex positioning */
#mw-page-base, /* background-image: linear-gradient(to bottom,#ffffff 50%,#f6f6f6 100%); -- unnoticably subtle gradient in the .vectorTabs area */
#mw-head-base { /* overlay above #mw-page-base that does nothing? spoils the flex width margin-top: -5em; */
display: none;
margin-top: 0;
}
/* Use var to set panel width */
body.skin-vector { --sidebar-width: 11em; }
@media screen and (max-width: 981px) {
body.skin-vector { --sidebar-width: 10em; }
}
body.skin-vector #mw-panel {
width: var(--sidebar-width);
transition: padding-left 0.5s ease;
box-sizing: border-box;
}
body.skin-vector #mw-head, /* Refactored from #left-navigation */
body.skin-vector .mw-body,
body.skin-vector #mw-data-after-content,
body.skin-vector #footer {
margin-left: var(--sidebar-width);
transition: margin-left 0.5s ease;
}
/* Move all tabs and search to the left and up */
body.skin-vector #mw-head {
position: static;
width: unset;
display: flex;
flex-wrap: wrap-reverse; /* If not wide enough then wrap vectorTabs below personal menu */
background-image: linear-gradient(to bottom, var(--bg-shade-0) 0%, var(--bg-shade-3) 100%); /* Gradient in the row of vectorTabs, refactored from #mw-head-base */
background-image: linear-gradient(to bottom, var(--bg-shade-0) 0%, var(--bg-shade-1) 20%, var(--bg-shade-3) 100%); /* Gradient in the row of vectorTabs, refactored from #mw-head-base */
}
body.skin-vector #left-navigation,
body.skin-vector #right-navigation {
margin-top: 0;
margin-bottom: 0;
}
body.skin-vector #left-navigation {
flex: 0 0 auto; /* No grow, no shrink */
margin-left: 0; /* Margin refactored to #mw-head */
margin-right: 0.1px; /* To avoid calculateTabDistance() returning 0 and triggering tab collapsing */
}
body.skin-vector #right-navigation {
flex: 1 1 auto; /* Grow and shrink for the search field */
display: flex;
}
body.skin-vector #p-views { /* #right-navigation .vectorTabs */
flex: 0 0 auto; /* No grow, no shrink */
}
body.skin-vector #p-search {
flex: 1 1 auto; /* Only the search field grows and shrinks */
padding: 0 0.5em;
margin: auto 0 auto 0.5em;
--search-width: 25em;
max-width: var(--search-width);
}
body.skin-vector #p-search form {
margin: 0;
}
/* #p-search form #simpleSearch */
body.skin-vector #simpleSearch {
width: 100%;
max-width: unset;
}
body.skin-vector #p-personal {
order: 3;
/* float: right; */
float: unset;
position: static;
margin: 0.5em 1em 0 auto;
z-index: initial;
}
body.skin-vector #p-personal ul {
padding-left: 0;
}
#ca-view {
/* Hide "Read" tab: redundant with "Article"/"Page" tab */
display: none;
}
#mw-panel .portal h3 {
/* Navbar headings: use default color --text-shade-2 */
color: inherit;
}
/* Fix Vector's flawed heading typography */
body.skin-vector .mw-body-content h5,
body.skin-vector .mw-body-content h6 {
font-weight: bold;
}
body.skin-vector .mw-body-content h1 { font-size: 1.8em; }
body.skin-vector .mw-body-content h2 { font-size: 1.7em; }
body.skin-vector .mw-body-content h3 { font-size: 1.4em; }
body.skin-vector .mw-body-content h4 { font-size: 1.2em; }
body.skin-vector .mw-body-content h5 { font-size: 1.1em; }
body.skin-vector .mw-body-content h6 { font-size: 1.0em; }
/**** Timeless skin ****/
/* Timeless - Header and Content: use basic document flow to size and position content below header, instead of margin and top position */
body.skin-timeless {
--sidebar-width: 14em;
}
body.skin-timeless #mw-header-container {
width: 100%;
padding: 0;
height: auto;
min-height: initial; /* Allow smaller header */
}
body.skin-timeless #p-search {
margin: auto; /* Vertical and horizontal centering */
padding: 0.45em 0.5em; /* Produces 47.56px height; almost same as the original 47.5px */
}
#mw-header-hack {
position: static;
position: sticky;
/* top: initial; */
}
#mw-content-container {
margin-top: 0;
margin-top: 0.35em; /* Height of #mw-header-hack; not necessary if that's moved into #mw-header-container */
margin-top: 3em; /* Approximation of #mw-header-container height */
}
body.skin-timeless #mw-header > * {
margin: auto 0; /* Vertically center header elements */
}
body.skin-timeless #mw-header {
display: flex; /* Even below 850px */
/* Use flex space-between to position header elements */
justify-content: space-between;
}
body.skin-timeless #p-logo-text { order: 1; }
body.skin-timeless #p-search { order: 2; } /* Search box */
body.skin-timeless #user-tools { order: 3; } /* User icons */
/* TODO Timeless: delete #mw-header-nav-hack, move to end of #mw-header-container, adjust box-shadow (was doubled), optionally rename #mw-header-hack to #mw-header-border */
/*
#mw-header-hack {
position: sticky;
top: initial;
}
#mw-header-nav-hack {
display: none;
}
*/
/* Timeless - Header */
#mw-header-container {
color: var(--text-shade-2);
/* color: var(--text-shade-3); */
background-color: var(--bg-shade-4);
/* background-image: linear-gradient(190deg, transparent, #000d, transparent); */
background-image: linear-gradient(190deg, transparent, var(--bg-shade-0), transparent);
}
#mw-header-container {
/* border-bottom: 0.35em solid var(--bg-shade-5); */
/* border-bottom-color: #186; */
/* border-bottom-color: #0c664d; */
/* box-shadow: 0 6px 6px 0 var(--link-shade-3); */
/* box-shadow: 0 6px 6px 0 #105040; */
/* box-shadow: 0 6px 6px 0px #334a44; */
/* box-shadow: 0 4px 4px 0 var(--bg-shade-4); */
box-shadow: 0 5px 10px 0 var(--bg-shade-2);
box-shadow: 0 5px 10px 0 var(--bg-shadow-1);
box-shadow: 0 6px 10px -3px var(--bg-shadow-1);
}
#mw-header-hack {
display: none; /* Hide multi-colored border */
}
/* Timeless - Header - Logo */
.mw-wiki-logo {
background-size: contain;
}
#p-logo-text {
flex: 0 1 12em;
margin: auto auto auto 0; /* Grow to the right only */
min-width: unset; /* Spoils width calculation? */
box-sizing: border-box;
/* max-width: unset; */
/* white-space: nowrap; */
text-align: center;
}
/* #personal-inner, */
#p-logo-text a,
#p-logo-text a.long {
padding: 0; /* Remove vertical padding that misaligns header elements. Result: logo text is properly aligned vertically with the above rule. */
color: var(--link-shade-1);
font-family: unset;
font-family: var(--font-logo);
font-weight: bold;
/* font-variant: all-small-caps; */
text-shadow: 4px 2px 4px var(--bg-shade-0);
text-shadow: 4px 2px 4px var(--bg-shadow-1);
text-shadow: 3px 2px 5px var(--bg-shadow-1);
}
#p-logo-text a.long {
/* font-size: 1.85em; */ /* Same as :not(.long) */
}
/*
@media screen and (max-width: 850px) {
#p-logo-text {
position: static;
left: 0 !important;
right: 0;
margin-top: 0;
margin-left: 0;
margin-right: 0;
width: 100%;
top: 3.3em;
}
#p-logo-text a.long {
width: 100%;
top: 7px;
text-align: center;
font-size: 40px !important;
}
}
/**/
/*
@media screen and (min-width: 851px) and (max-width: 1099px) {
#p-logo-text a.long {
font-size: 23px !important;
}
}
@media screen and (min-width: 100px) and (max-width: 900px) {
#p-logo-text a.long {
font-size: 43px !important;
}
}
*/
/* Timeless - Header - Search */
body.skin-timeless #p-search {
--search-width: 30em;
max-width: var(--search-width);
}
body.skin-timeless #p-search {
flex: 1 3 var(--search-width); /* Overrides original width-dependent rule */
}
body.skin-timeless #simpleSearch {
background-color: var(--bg-shade-3);
border: 1px solid;
}
#searchInput-container {
height: auto;
background-color: initial;
}
body.skin-timeless #searchInput {
height: auto;
padding: 0.2em 2.5em 0.2em 1em;
/* border: 0 !important; */
}
#searchButton, #mw-searchButton {
height: 100%;
width: 2em;
right: 0.3em;
background-position: center;
border: 0;
}
/* Timeless - Header - User tools: notifications, personal user menu */
#user-tools {
flex: 0 0 auto;
display: flex;
justify-content: unset; /* Remove justify-content: space-between; */
margin: 0 2em 0 auto; /* User menu in the top-right corner */
margin: 0 auto 0 2em; /* User menu at around 8/9 of screen width */
}
#user-tools > * {
margin: auto 0;
}
#personal {
order: 2;
position: relative;
}
#personal h2 {
background-position: left center;
margin-bottom: 0; /* Disable margin-bottom: -1em; in original css */
padding: 0; /* Disable padding-bottom: 1em; in original css */
padding-left: 1em; /* Space for the user icon */
border-bottom: 0; /* Unset h2's border-bottom */
overflow: visible;
font-family: var(--font-logo);
font-size: 1.15em;
}
#personal h2 span {
height: auto;
vertical-align: baseline;
overflow: visible;
}
#personal h2::after {
background-position: bottom;
}
#personal-extra ul {
margin: 0;
}
#personal .dropdown {
/* Glassy look for user menu */
background-color: var(--popup-bg);
border: 1px solid var(--bg-shade-3);
/* border: unset; */
border-radius: var(--usermenu-radius);
right: 0.25em;
padding: 1.5em 1.5em 0em;
}
.mw-portlet-body {
padding-bottom: 1.5em;
}
#mw-site-navigation .sidebar-inner .mw-portlet-body,
#mw-related-navigation .sidebar-inner .mw-portlet-body,
#personal .dropdown .mw-portlet-body {
margin: 0;
}
.dropdown h3 {
margin-top: 0;
}
.sidebar-inner li {
margin: unset;
}
/* Dropdowns' anchor triangle */
.client-nojs #mw-site-navigation .sidebar-chunk:hover h2 span:before,
.client-nojs #mw-related-navigation .sidebar-chunk:hover .sidebar-inner::before,
#mw-site-navigation .dropdown-active h2 span::before,
#mw-related-navigation .sidebar-inner::before,
#personal .dropdown::before,
#personal .dropdown::after {
/* Border of anchor triangle on top */
border-bottom-color: var(--bg-shade-3);
}
.client-nojs #mw-site-navigation .sidebar-chunk:hover h2 span:after,
.client-nojs #mw-related-navigation .sidebar-chunk:hover .sidebar-inner::after,
#mw-site-navigation .dropdown-active h2 span::after,
#mw-related-navigation .sidebar-inner::after,
#personal .dropdown::after {
/* Anchor triangle on top */
border-bottom-color: var(--popup-bg);
}
#personal .dropdown::before {
right: 0.6em;
}
#mw-related-navigation .sidebar-inner:before,
.client-nojs #mw-related-navigation .sidebar-chunk:hover .sidebar-inner::before,
#personal .dropdown::before {
top: -10px; /* Originally -10px; */
}
#mw-related-navigation .sidebar-inner:after,
.client-nojs #mw-related-navigation .sidebar-chunk:hover .sidebar-inner::after,
#personal .dropdown::after {
border-bottom-color: var(--bg-shade-2);
top: -9px; /* Fix -8px; */
}
.client-nojs #mw-site-navigation .sidebar-chunk:hover h2 span:before,
#mw-site-navigation .dropdown-active h2 span::before,
#mw-site-navigation .sidebar-chunk h2 span:before {
top: 35px; /* Fix 36px; */
}
.client-nojs #mw-site-navigation .sidebar-chunk:hover h2 span:after,
#mw-site-navigation .dropdown-active h2 span::after,
#mw-site-navigation .sidebar-chunk h2 span:after {
top: 36px; /* Originally 36px; */
}
.mm-submenu { /* "MoreMenu" gadget's popup menus */
background-color: var(--popup-bg);
border: 0;
border-radius: var(--usermenu-radius);
}
.mm-submenu::after { /* "MoreMenu" gadget's popup menus */
border-left-color: var(--popup-bg);
padding-right: unset;
right: -8px;
}
#personal .dropdown h3 {
/* TODO: check if size adjustment is needed */
/* line-height: 25px; */
}
#personal .dropdown b {
display: block;
}
#personal .dropdown a {
/* background-color: var(--popup-bg-text); */
/* box-shadow: var(--popup-bg-text) 0px 0px 10px 5px; */
}
/* Timeless - Header - Wide (desktop) */
@media screen and (min-width: 851px) {
body.skin-timeless #mw-header-container {
position: fixed;
z-index: 100;
top: 0;
}
#p-logo-text {
padding: 2px 1em;
flex-basis: var(--sidebar-width);
}
#personal .dropdown {
top: 32px;
}
}
@media screen and (min-width: 1100px) {
#mw-site-navigation .sidebar-chunk,
#mw-related-navigation .sidebar-chunk {
background-color: var(--bg-shade-3);
/* box-shadow: var(--bg-shade-3) 0 0px 4px 4px; */
}
}
/* Timeless - Header - Thin (mobile) */
@media screen and (max-width: 850px) {
/* Undo absolute positioning */
body.skin-timeless #p-logo-text,
body.skin-timeless #personal-extra,
body.skin-timeless #user-tools h2 {
position: relative;
top: unset;
left: unset;
right: unset;
bottom: unset;
}
body.skin-timeless #mw-header-container {
position: relative;
z-index: 100;
top: 0;
}
body.skin-timeless .sidebar-chunk {
position: absolute;
z-index: 101;
top: 8px;
}
body.skin-timeless #site-navigation {
left: 5px;
}
body.skin-timeless #site-tools {
left: 50px;
}
body.skin-timeless .sidebar-chunk h2 {
position: static;
/* Invert black icons for dark-mode */
filter: var(--image-invert);
}
body.skin-timeless .sidebar-chunk h2:after {
filter: unset;
}
#personal .dropdown,
body.skin-timeless .sidebar-inner {
top: 2.4em;
}
body.skin-timeless #site-navigation .sidebar-inner {
left: 0em;
min-width: 14em;
}
body.skin-timeless #site-tools .sidebar-inner {
left: -3em;
}
body.skin-timeless #p-logo-text {
flex: 0 1 16.5em;
max-width: 16.5em; /* 14em max - 2em padding + 5.5em 90px - 1em for no reason */
margin: auto;
}
body.skin-timeless #p-logo-text a {
margin-left: 90px; /* Space for 2 icons */
}
body.skin-timeless #user-tools {
height: 45px;
}
body.skin-timeless #user-tools h2 {
/*width: 20px;
height: 20px;*/
/* background-size: 20px; */ /* The .svg is set to 30px * 30px */
/* The normal icon is different at 20px: head is bigger. */
/* background-image: linear-gradient( transparent, transparent ), url( /w/skins/Timeless/resources/images/user-grey.svg?49b1e ); */
}
body.skin-timeless #p-more {
order: 3;
}
body.skin-timeless #page-tools .sidebar-inner {
right: -100vh;
}
body.skin-timeless #mw-content-container {
margin-top: unset;
}
body.skin-timeless #personal-extra li {
margin-right: 0.8em;
}
body.skin-timeless #personal h2:after {
/* left: unset; */
}
body.skin-timeless #personal .dropdown ul,
body.skin-timeless #personal .dropdown li {
margin: unset;
}
body.skin-timeless .sidebar-inner ul,
body.skin-timeless .dropdown ul {
margin: unset;
}
.mw-echo-ui-overlay .mw-echo-ui-notificationBadgeButtonPopupWidget-popup {
left: unset !important;
right: 1px !important;
width: unset;
}
.mw-echo-ui-overlay .mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-popupWidget-popup .oo-ui-clippableElement-clippable {
max-width: unset !important;
}
/*
}
@media screen and (max-width: 850px) or (pointer: coarse) {
*/
/* #p-personal { */
.mw-portlet-body {
/* Bigger sized menu items for easy touch */
font-size: 1.3em;
}
}
@media screen and (max-width: 500px) {
body.skin-timeless #mw-header {
flex-wrap: wrap;
}
body.skin-timeless #p-logo-text {
max-width: 13em;
margin: auto;
}
body.skin-timeless #p-search {
order: 4;
}
}
@media screen and (max-width: 350px) {
body.skin-timeless #mw-header {
flex-direction: column;
}
body.skin-timeless #p-logo-text {
flex: 0 0 45px;
}
body.skin-timeless #p-search {
order: 4;
flex: unset;
}
body.skin-timeless #p-logo-text a {
margin-left: unset; /* No space for 2 icons */
}
body.skin-timeless #user-tools {
margin-left: auto;
}
body.skin-timeless .sidebar-chunk {
top: 53px;
}
}
/* Timeless - Header - Thin (tablet) */
@media screen and (min-width: 851px) and (max-width: 1099px) {
body.skin-timeless #mw-header {
padding: unset;
}
body.skin-timeless #mw-header-nav-hack {
display: none;
}
body.skin-timeless #mw-content-block {
display: flex;
flex-wrap: wrap;
/* Use content background for drop-down buttons */
background-color: var(--bg-shade-3);
}
body.skin-timeless #mw-site-navigation,
body.skin-timeless #mw-related-navigation {
top: unset;
position: relative;
}
body.skin-timeless #mw-site-navigation {
order: 1;
}
body.skin-timeless #mw-related-navigation {
order: 2;
margin-left: auto;
}
body.skin-timeless #mw-site-navigation .sidebar-inner {
/* top: 2.75em; */
top: 44px;
}
body.skin-timeless #mw-related-navigation .sidebar-inner {
/* top: 2.75em !important; */
top: 44px !important;
}
body.skin-timeless #site-navigation .sidebar-inner {
left: -1.75em;
}
body.skin-timeless #site-tools .sidebar-inner {
left: -2em;
}
body.skin-timeless #page-tools .sidebar-inner {
left: -6em;
}
body.skin-timeless #personal .dropdown {
right: 0.25em;
}
body.skin-timeless #mw-content-wrapper {
order: 3;
width: 100%;
}
body.skin-timeless #mw-content {
margin-top: unset;
}
/*
#mw-header-nav-hack {
background-color: var(--bg-shade-4);
background-image: linear-gradient(190deg, transparent, var(--bg-shade-0), transparent);
border: unset;
}
.color-bar {
display: none;
}
*/
}
@media screen and (max-width: 1099px) {
#mw-site-navigation .sidebar-inner,
#mw-related-navigation .sidebar-inner,
.sidebar-inner,
.dropdown {
padding: 1.5em 1.5em 0em;
background-color: var(--bg-shade-2);
/* Glassy look for drop-down menus */
background-color: var(--popup-bg);
border: 1px solid var(--bg-shade-3);
/* border: unset; */
border-radius: var(--usermenu-radius);
box-shadow: 0px 6px 20px 6px var(--bg-shadow-0); /* Separate from page with a strong 3D effect */
}
#menus-cover {
background-color: var(--bg-shade-0);
background-color: var(--bg-shadow-0);
}
body.skin-timeless #mw-header-container {
padding: unset;
}
/*
#site-tools h2 {
right: 3em;
top: 0.9em;
padding-bottom: 5px;
}
*/
}
/* Timeless - Header - Icons */
/*
#searchButton, #mw-searchButton {
background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2221%22%20height%3D%2221%22%3E%3Cg%20transform%3D%22rotate%28-45%208.525%208.386%29%22%20opacity%3D%22.33%22%3E%3Cpath%20d%3D%22M8.438.938a7.5%207.5%200%200%200-7.5%207.5%207.5%207.5%200%200%200%207.5%207.5%207.5%207.5%200%200%200%207.5-7.5%207.5%207.5%200%200%200-7.5-7.5zm0%202.812a4.688%204.688%200%200%201%204.687%204.688%204.688%204.688%200%200%201-4.687%204.687A4.688%204.688%200%200%201%203.75%208.438%204.688%204.688%200%200%201%208.438%203.75z%22%20fill%3D%22white%22/%3E%3Crect%20ry%3D%221.318%22%20y%3D%2213.125%22%20x%3D%227.031%22%20height%3D%229.265%22%20width%3D%222.813%22%20fill%3D%22white%22/%3E%3C/g%3E%3C/svg%3E%0A);
}
.oo-ui-icon-bell, .mw-ui-icon-bell::before {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E %3Ctitle%3E bell %3C/title%3E %3Cpath d=%22M16 7a5.38 5.38 0 0 0-4.46-4.85C11.6 1.46 11.53 0 10 0S8.4 1.46 8.46 2.15A5.38 5.38 0 0 0 4 7v6l-2 2v1h16v-1l-2-2zm-6 13a3 3 0 0 0 3-3H7a3 3 0 0 0 3 3z%22%20fill%3D%22white%22/%3E %3C/svg%3E");
}
.oo-ui-icon-tray, .mw-ui-icon-tray::before {
background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 width=%2220%22 height=%2220%22 viewBox=%220 0 20 20%22%3E%3Ctitle%3Etray%3C/title%3E%3Cpath d=%22M3 1a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm14 12h-4l-1 2H8l-1-2H3V3h14z%22%20fill%3D%22white%22/%3E%3C/svg%3E");
}
#personal h2 {
background-image: linear-gradient(transparent,transparent),url(data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20opacity%3D%22.33%22%20d%3D%22M3.643%209.46c-1.758%202.39-1.957%205-1.227%206.729.49%201.18%201.18%201.871%201.99%202.29.792.429%201.75.518%202.6.521h6.329c.92%200%201.851-.208%202.65-.675.8-.467%201.46-1.198%201.8-2.29.49-1.549.266-4.03-1.48-6.46-.007.013-.02.02-.03.03a7.506%207.506%200%200%201-6.267%203.39A7.506%207.506%200%200%201%203.643%209.46z%22%20fill%3D%22white%22/%3E%3Cpath%20opacity%3D%22.33%22%20d%3D%22M10.008.992a4.5%204.5%200%201%200%200%209%204.5%204.5%200%200%200%200-9z%22%20fill%3D%22white%22/%3E%3C/svg%3E%0A);
}
/**/
/* Invert icons */
.mw-ui-icon::before,
.sidebar-chunk h2::after,
#ca-more span,
#searchButton, #mw-searchButton,
.oo-ui-icon-bell, .mw-ui-icon-bell::before,
.oo-ui-icon-tray, .mw-ui-icon-tray::before,
#personal h2, #personal h2 span,
.tools-inline li a, .tools-inline li a > span,
.oo-ui-indicatorElement-indicator,
.oo-ui-iconElement-icon:not(.oo-ui-image-invert) {
/* Invert black icons for dark-mode */
filter: var(--image-invert);
}
/* Fix notifications icons vertical alignment */
body.skin-timeless #pt-notifications-alert .mw-echo-notifications-badge,
body.skin-timeless #pt-notifications-notice .mw-echo-notifications-badge {
top: unset;
}
/* Timeless - Content - Header (the equivalent of vectorTabs in Vector) */
#mw-page-header-links { display: flex; }
#mw-page-header-links > * { float: unset; }
#p-namespaces { margin-right: auto; /* Push #p-views to the right */ }
#contentSub .subpages,
.tools-inline li {
/* Dim the header links, except the active and when hovering */
opacity: 0.5;
transition: opacity 0.25s ease;
}
.tools-inline li {
/* border-bottom: unset; */
border-bottom-width: 1px;
}
.tools-inline li.selected:hover,
.tools-inline li.selected {
border-bottom-color: transparent;
border-radius: 1em;
box-shadow: 0px 0px 8px 4px var(--bg-shade-2);
background-color: var(--bg-shade-2);
padding: 4px 0.7em 4px 0.5em;
margin: -4px -0.7em -4px -0.5em;
}
.tools-inline li.selected a { color: var(--text-shade-2); }
#mw-page-header-links .tools-inline li.selected { opacity: 1; }
#contentSub:hover .subpages,
#mw-page-header-links:hover li {
opacity: 1;
}
.tools-inline li a:hover,
.tools-inline li a:focus {
text-decoration: none;
background-color: var(--link-hover-bg) !important;
/* background-color: unset; */
/* box-shadow: unset; */
}
.tools-inline li:hover { border-bottom-color: transparent; }
body.skin-timeless #pagehistory li {
border-color: var(--bg-shade-4);
}
/* Timeless - Footer */
#footer, /* Vector */
#mw-footer-container { /* Timeless */
background-color: var(--bg-shade-4);
padding-top: 0.5em;
/* border-top: solid 1px var(--bg-shade-5); */
border-top: 0;
color: unset;
}
#mw-footer-container { /* Timeless */
box-shadow: 0 -4px 4px 0 var(--bg-shade-4);
/* box-shadow: 0 -4px 4px 0 var(--bg-shadow-1); */
}
#mw-footer ul, #mw-footer li {
margin: 0 auto;
padding: 0 2em;
}
#mw-footer .footer-icons {
margin: 1em 2em 0 0;
}
#footer li {
/* Vector: disable color override */
color: unset;
}
#contents-footer {
background-color: var(--bg-shade-5) !important;
border: 1px solid var(--bg-shade-6) !important;
}
/* Timeless - Content container */
.ts-inner {
padding: 0;
}
@media screen and (min-width: 851px) {
.ts-inner {
max-width: unset; /* Don't limit to 115em */
/* margin: 0; */
}
}
#mw-content {
background-color: var(--bg-shade-3);
/* box-shadow: var(--bg-shade-3) 0 0 3px 3px; */
border: unset;
/* padding-top: 0.1px; */ /* Don't collapse the content's top margin */
}
#mw-content-container {
background: initial;
border-bottom: 0;
}
@media screen and (max-width: 1099px) {
#mw-content {
padding: 0em 0.5em 3em;
}
#catlinks {
background-color: var(--bg-shade-3a);
padding: 1em 2em 0.5em;
margin: unset;
}
}
/*
@media screen and (max-width: 850px) {
#mw-content-block {
background-color: var(--bg-shade-1);
}
}
*/
#siteNotice {
/* Remove empty siteNotice's margin */
margin: unset;
}
#centralNotice:not(:empty) {
/* Add margin to child */
margin: 0.5em auto 1.5em
}
ul#filetoc, .toc, .mw-warning {
padding: 1.0em 1.5em;
}
/**** Notifications (Extension:Echo) menu - Timeless, Vector, ... ****/
/* Background and borders */
#personal .dropdown,
.mw-echo-ui-overlay .oo-ui-popupWidget-popup {
box-shadow: 0px 4px 20px 10px var(--bg-shadow-0); /* Separate from page with a strong 3D effect */
}
.mw-echo-ui-overlay .oo-ui-popupWidget-popup {
background-color: unset; /* Allow transparency for child elements */
/* border: 1px solid var(--bg-shade-3); */
/* border-color: var(--bg-shade-3); */
border-radius: var(--usermenu-radius);
}
.oo-ui-popupWidget-popup,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-head,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer,
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-footer .mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons .oo-ui-buttonElement:last-child {
/* Border around, below header, above footer, between footer buttons */
border-color: var(--bg-shade-6);
}
.mw-echo-ui-notificationItemWidget {
/* Border between notifications */
border-color: var(--bg-shade-4);
}
.oo-ui-popupWidget-head,
.oo-ui-popupWidget-footer,
.mw-echo-ui-placeholderItemWidget,
.mw-echo-ui-notificationItemWidget {
/* Header, footer and notifications background */
background-color: var(--popup-bg-text);
background-color: var(--popup-bg);
}
.mw-echo-ui-notificationItemWidget:hover {
/* Highlight hovered notification */
background-color: var(--bg-shade-3);
}
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor {
top: -10px;
}
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::before {
/* Border of anchor triangle on top */
border-bottom-color: var(--bg-shade-3);
}
.oo-ui-popupWidget-anchored-top .oo-ui-popupWidget-anchor::after {
/* Anchor triangle on top */
border-bottom-color: var(--popup-bg);
}
/* Fix text and link colors */
.mw-echo-ui-notificationItemWidget-content-message-header {
color: var(--text-shade-3);
}
.mw-echo-ui-notificationsListWidget:not(:hover) a,
.mw-echo-ui-notificationsListWidget a {
color: var(--link-shade-2);
}
#p-personal .mw-echo-ui-notificationsListWidget:not(:hover) a.new,
#p-personal .mw-echo-ui-notificationsListWidget a.new {
color: var(--link-red-2);
}
.mw-echo-ui-menuItemWidget-prioritized {
opacity: unset;
}
.mw-echo-ui-notificationBadgeButtonPopupWidget-footer-buttons > span {
/* Background of footer buttons */
background-image: linear-gradient(to right, transparent 0%, var(--bg-grad) 50%, transparent 100%);
--bg-grad: var(--popup-anim-bg);
--bg-grad: var(--bg-shade-4);
}
/* Notifications loading animation */
.oo-ui-popupWidget-head {
position: relative;
}
.oo-ui-popupWidget-head::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -100%;
right: 0;
-webkit-animation: oo-ui-pendingElement-smooth 1s linear infinite;
-moz-animation: oo-ui-pendingElement-smooth 1s linear infinite;
animation: oo-ui-pendingElement-smooth 1s linear infinite;
-webkit-animation-play-state: paused;
-moz-animation-play-state: paused;
animation-play-state: paused;
opacity: 0.4;
background-image: linear-gradient(to right, transparent 0%, var(--bg-grad) 25%, transparent 50%, var(--bg-grad) 75%, transparent 100%);
--bg-grad: var(--text-shade-4);
--bg-grad: var(--bg-shade-6);
--bg-grad: #333c; /* brighten(var(--popup-bg), 2) */
--bg-grad: var(--popup-anim-bg);
}
.oo-ui-pendingElement-pending {
animation: unset;
background-image: unset;
}
.oo-ui-popupWidget-head.oo-ui-pendingElement-pending::before {
/* Animated background while loading notifications */
-webkit-animation-play-state: running;
-moz-animation-play-state: running;
animation-play-state: running;
}
@-webkit-keyframes oo-ui-pendingElement-smooth {
from { transform: translateX(0%); }
to { transform: translateX(50%); }
}
@-moz-keyframes oo-ui-pendingElement-smooth {
from { transform: translateX(0%); }
to { transform: translateX(50%); }
}
@keyframes oo-ui-pendingElement-smooth {
from { transform: translateX(0%); }
to { transform: translateX(50%); }
}
/* TODO: What's this?
$('.mw-notification')
*/
.mw-notification {
border-radius: 5px;
border: var(--bg-shade-1);
background-color: var(--bg-shade-1);
color: var(--text-shade-2);
width: 200px;
}
/**** Content ****/
/* Images */
/* Math formulas */
.mwe-math-fallback-image-display,
.mwe-math-fallback-image-inline
{
filter: var(--image-invert);
}
/* Text */
.oo-ui-buttonElement > .oo-ui-buttonElement-button,
.ve-ui-overlay,
body {
font-family: var(--font-default);
}
b, strong {
text-shadow: 1px 1px 1px var(--bg-shade-0);
text-shadow: 1px 1px 1px var(--bg-shadow-1);
}
.mw-body h6,
.mw-body h5,
.mw-body h4,
.mw-body h3,
.mw-body h2,
.mw-body h1 {
font-family: var(--font-heading);
}
.mw-body h6,
.mw-body h5,
.mw-body h4,
.mw-body h3,
.mw-body h2:not([style*="color:"]), /* not on https://en.wikipedia.org/wiki/Main_Page */
.mw-body h1 {
color: var(--text-shade-1);
text-shadow: 2px 1px 2px var(--bg-shadow-1);
}
.mw-body h1.firstHeading {
border-bottom: solid 1px;
}
.mw-body .mw-parser-output h1::after,
.mw-body .mw-parser-output h2::after {
border-bottom: solid 1px var(--text-shade-2);
}
/* All links text color */
.mw-parser-output a.external,
#mw-panel .portal .body li a, /* Vector */
#mw-footer-container a,
#mw-footer-container a:hover,
.mw-parser-output a.extiw,
.new a:hover,
.new a:focus,
.new a,
a.new:hover,
a.new:focus,
a.new,
a:hover,
a:focus,
a {
text-decoration: unset;
color: var(--link-shade-2);
transition: all 0.1s linear;
}
/* All links after visited */
#mw-panel .portal .body li a:visited, /* Vector */
#mw-footer-container a:visited,
.mw-parser-output a.extiw:visited, /* Translation link in mediawiki infobox */
.mw-parser-output a.extiw:active,
a:visited {
color: var(--link-shade-3);
}
/* All links on hover, focus: darker, blurred background */
.toctogglelabel:hover,
/* .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > a.oo-ui-buttonElement-button:hover, */
#mw-footer-container a:hover,
.new a:hover,
.new a:focus,
a.new:hover,
a.new:focus,
a:hover,
a:focus {
/* background-color: #fff9; */
/* border-bottom: 1px solid; */
/* border-bottom: 4px solid; */
/* border-radius: 1em;*/ /* For fun */
/* box-shadow: inset 0px -1px; */ /* Border bottom without re-layout */
/* text-decoration: none; */
/* text-decoration: underline; */
/* color: var(--link-shade-1); */
/* A shadowy background for hovered links */
background-color: var(--link-hover-bg);
box-shadow: 0px 0px 4px 1px var(--link-hover-bg);
border-radius: 0.5em;
/* Wider background?
padding: 0 0.2em;
margin: 0 -0.2em;
* Timeless super-rounded?
border-radius: 1em;
padding: 0 0.5em;
margin: 0 -0.5em;
*/
}
/* Red (new) links */
.new a:visited,
.new a,
a.new:visited,
a.new {
color: var(--link-red-2);
}
/* Red (new) links when hovered or focused */
.new a:hover,
.new a:focus,
a.new:hover,
a.new:focus {
color: var(--link-red-2);
/* color: var(--link-red-1); */
}
/* Logo background does not change on hover */
a.mw-wiki-title:hover,
a.mw-wiki-logo:hover {
background-color: unset;
box-shadow: unset;
}
.toctogglecheckbox:focus + .toctitle .toctogglelabel, /* Css-only toggle using checkbox */
.toctogglelabel:hover { text-decoration: unset; }
/* Focused link: colored bottom border */
/* a:focus, */
span.mw-collapsible-toggle:focus,
.toctogglecheckbox:focus + .toctitle .toctogglelabel { /* Css-only toggle using checkbox */
outline: none;
border-radius: 0.5em;
border-bottom: 3px solid var(--focus-border-color);
}
legend.mw-collapsible-toggle:focus {
outline: none;
}
/* Focused link and icon button: colored background */
legend.mw-collapsible-toggle:focus .oo-ui-labelElement-label,
a:focus:not(.oo-ui-buttonElement-button),
div > .flow-menu .flow-menu-js-drop a:focus,
#searchButton:focus, #mw-searchButton:focus {
outline: none;
background-color: var(--link-focus-bg);
box-shadow: 0px 0px 6px 2px var(--link-focus-bg);
/* box-shadow: inset 0px 0px 4px 1px var(--focus-border-color); */
/* box-shadow: inset 0px 0px 14px -5px var(--focus-border-color); */
border-radius: 5px;
transition: all 0.25s linear;
}
/* Focused input button */
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-iconElement > .oo-ui-buttonElement-button:focus:active,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-labelElement > .oo-ui-buttonElement-button:focus:active,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-iconElement > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-labelElement > .oo-ui-buttonElement-button:active,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-iconElement > .oo-ui-buttonElement-button:focus,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-labelElement > .oo-ui-buttonElement-button:focus {
outline: none;
box-shadow: inset 0px 0px 0px 2px var(--link-focus-bg);
}
/* Recent changes - Filter - "Show","Hide" */
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-iconElement > .oo-ui-buttonElement-button:focus,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled.oo-ui-labelElement > .oo-ui-buttonElement-button:focus {
border-color: transparent;
}
/* Content markup */
.toctogglelabel {
color: var(--text-shade-3);
}
.mw-highlight {
/* background-color: var(--bg-shade-4); */
background-color: inherit;
}
code, pre, .mw-code {
background-color: var(--bg-shade-2);
border-color: var(--bg-shade-4);
color: var(--text-shade-2);
}
.inline-quote-talk {
/* !important is necessary in Flow discussions to override inlined style */
/* color: inherit !important; */
color: var(--text-shade-3) !important;
background-color: var(--bg-shade-4) !important;
padding: 3px !important;
border-radius: 5px; /* {{tq}} rounded on all skins, not just Timeless */
}
.mw-pt-translate-header {
border-bottom: 0;
}
.mw-pt-translate-header a {
border-bottom: 1px solid var(--text-shade-4);
}
.mw-tag-marker { /* on history, Special:RecentChanges */
background-color: var(--bg-shade-5);
color: var(--text-shade-1);
border-radius: 5px;
padding: 0px 3px;
}
.flaggedrevs-color-1 {
background-color: var(--bg-shade-5) !important;
}
.mw-parser-output .tudnivalok,
div.flaggedrevs_short,
div.flaggedrevs_short_details {
background-color: var(--bg-shade-5);
color: var(--text-shade-1);
}
.mw-parser-output .tudnivalok-cimsor {
background-color: var(--bg-shade-6);
color: var(--text-shade-0);
}
/* Tables */
/* bg-shade-6 */
.mw-parser-output tr .taxontree-lcell, /* common with the next selector */
.mw-parser-output tr .wikidatainfobox-lcell, /* https://commons.wikimedia.org/wiki/Category:CC-Zero */
.fileinfo-paramfield,
.statstable > * > tr > th,
.wikitable > tr > th,
.wikitable > * > tr > th {
/* Table header */
background-color: var(--bg-shade-6);
}
.mw_metadata {
border-style: hidden; /* Remove outer borders */
}
.mw_metadata th {
background-color: var(--bg-shade-5);
}
.mw_metadata td, .mw_metadata th {
border-left: 0;
border-right: 0;
border-color: var(--bg-shade-6);
}
.mw_metadata td,
.statstable > * > tr > td,
.mw-datatable > tr > td,
.wikitable > tr > td,
.mw-datatable > * > tr > td,
.wikitable > * > tr > td {
/* Odd table row */
background-color: var(--bg-shade-4);
}
.statstable > * > tr.tux-statstable-even > td,
.mw-datatable > tr:nth-child(2n) > td,
.wikitable > tr:nth-child(2n) > td,
.mw-datatable > * > tr:nth-child(2n) > td,
.wikitable > * > tr:nth-child(2n) > td {
/* Even table row */
background-color: var(--bg-shade-5);
}
.statstable {
color: var(--text-shade-1);
}
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.mw-changeslist-legend,
.mw-body .mw-search-profile-tabs,
.mw-body fieldset#mw-searchoptions,
.wikitable,
.mw-datatable {
color: var(--text-shade-2);
}
.mw-datatable > tr > th,
.wikitable > tr > th,
.mw-datatable > tr > td,
.wikitable > tr > td,
.mw-datatable > * > tr > th,
.wikitable > * > tr > th,
.mw-datatable > * > tr > td,
.wikitable > * > tr > td {
border: 0;
}
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.mw-changeslist-legend,
.mw-body .mw-search-profile-tabs,
.mw-body fieldset#mw-searchoptions,
.wikitable,
.mw-datatable {
border: 0;
}
/* Darker boxes */
/* bg reset */
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle { /* https://dokapon.miraheze.org/wiki/Special:RecentChanges */
background-color: unset;
margin-top: unset;
}
/* bg-shade-3 */
.mw-parser-output .quotebox { /* Close summaries */
background-color: var(--bg-shade-3);
border-color: var(--border-shade-3);
color: var(--text-shade-2);
}
/* bg-shade-4 */
.mw-parser-output blockquote.talkquote,
.mw-body li.gallerybox div.thumbdiv.editOptions,
ul.ext-related-articles-card-list .ext-related-articles-card, /* "Related articles" -- bottom of article pages */
div.thumbinner,
.thumbinner,
.catlinks, /* "Categories" */
div.editOptions,
ul#filetoc, #toc, .toc, .mw-warning, .toccolours,
table.ambox:not(.ambox-content),
/* table.ombox, */
table.fmbox {
background-color: var(--bg-shade-4);
border-color: var(--bg-shade-5);
border-color: var(--bg-shade-2);
border-color: var(--border-shade-4);
color: var(--text-shade-2);
}
table.ambox-content {
background-color: var(--bg-shade-4);
border-top-color: var(--bg-shade-5);
border-bottom-color: var(--bg-shade-5);
border-right-color: var(--bg-shade-5);
color: var(--text-shade-2);
}
ul.ext-related-articles-card-list h3::after { /* "Related articles" -- bottom of article pages */
/* What's the purpose of this marker? */
content: none;
display: none;
/* background-image: linear-gradient(to right, transparent, var(--bg-shade-6) ); */
}
ul.ext-related-articles-card-list h3 a { /* "Related articles" -- bottom of article pages */
color: var(--text-shade-1);
}
.mw-parser-output .main-box, /* Main page content https://ru.wikipedia.org/wiki/ */
.shortcutbox, /* Hardcoded background-color for whatever reason */
#recentchangestext #box,
.mw-parser-output div.module-shortcutboxplain {
/* "Shortcuts" with inlined template style: overspecify with div. to override */
background-color: var(--bg-shade-4) !important;
border-color: var(--bg-shade-6) !important;
}
.thumbinner .thumbimage,
.thumbborder {
border: 0;
}
/* Lighter boxes */
/* bg-shade-5 */
div.cnotice, /* Main page Fundraising2020 banner https://dokapon.miraheze.org/wiki/Main_Page */
.tpl-infobox, /* Mediawiki extension, skin infobox */
.mw-dismissable-notice, /* Temporal noticebox above articles */
table.imbox, /* Box on image page */
table.ombox, /* Box at top of articles */
table.tmbox, /* Box at top of talk pages */
.skin-infobox,
.skin-infobox-header,
.infobox,
.messagebox,
.messagebox.standard-talk,
#watchlist-message, /* Maybe highlight more? Intermittent -- https://commons.wikimedia.org/wiki/Special:Watchlist */
div.user-block,
table[style]:not(.tpl-infobox):not(.navbox-inner),
.mw-pt-languages, /* Language selector */
.mw-parser-output .note.note-info {
/* More specific than the `.mw-parser-output .note-info` inlined style */
background-color: var(--bg-shade-5);
border-color: var(--bg-shade-6);
}
table.cmbox {
/* Use original background-color */
border-color: var(--bg-shade-5);
color: var(--warn-text-1);
}
.messagebox[style*="color"] {
color: inherit !important;
}
div.cnotice, /* Main page Fundraising2020 banner https://dokapon.miraheze.org/wiki/Main_Page */
div.cnotice-message p,
.messagebox, .errorbox, .warningbox, .successbox,
.infobox {
color: inherit;
}
.mw-parser-output .note {
color: var(--note-text-1);
}
.mw-pt-languages-label {
/* background-color: var(--bg-shade-4); */
background-color: initial;
}
/* Navbox */
.navbox {
border-color: var(--bg-shade-5);
}
.navbox, .navbox-subgroup,
.navbox th, .navbox-title {
background-color: var(--bg-shade-4);
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow,
.navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title {
background-color: var(--bg-shade-4a);
}
.navbox-odd {
background-color: var(--bg-shade-50);
}
.navbox-even {
background-color: var(--bg-shade-48);
}
tr + tr > .navbox-abovebelow, tr + tr > .navbox-group, tr + tr > .navbox-image, tr + tr > .navbox-list {
border: 0;
}
td.navbox-list[style*="border"] {
border: 0 !important; /* Override style hardcoded in wikitext */
}
/* Special:Preferences */
div.oo-ui-tabSelectWidget-framed {
background-color: var(--bg-shade-4);
color: var(--text-shade-2);
}
div.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected,
div.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:active,
div.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
background-color: var(--bg-shade-5);
color: var(--text-shade-1);
}
div.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active,
div.oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
color: var(--text-shade-1);
}
div.oo-ui-tabOptionWidget {
color: inherit;
}
/* Special boxes background */
/* :not(.ambox-content) -> */
/* :not(.mw-collapsible) -> https://en.wikipedia.org/wiki/Talk:Main_Page */
table:not(.ambox-content):not(.mw-collapsible) td.mbox-image {
/* Highlight the background of the icon at the left side of the box. .ambox-content has a 10px wide left border that looks bad with the highlight, so avoid that */
padding: 0.9em; /* Override rule padding: 2px 0 2px 0.9em; */
background-color: var(--bg-shade-6);
}
div.warningbox, .warningbox {
background: var(--warn-bg-1);
color: var(--warn-text-1);
}
.mbox-text div[style*="background:#ebb"] { /* https://en.wikipedia.org/wiki/Talk:Main_Page */
background: var(--warn-bg-1) !important;
color: var(--warn-text-1);
}
.warningbox a,
.mbox-text div[style*="background:#ebb"] a {
color: var(--link-shade-4);
}
div.errorbox, .errorbox {
background: var(--warn-bg-2);
color: var(--warn-text-2);
}
/* Special boxes glowing shadow */
.mbox-text div[style*="background:#ebb"], /* https://en.wikipedia.org/wiki/Talk:Main_Page */
.warningbox,
.errorbox {
/* box-shadow: 2px 4px 10px 8px var(--bg-shade-1); */
/* box-shadow: 2px 4px 16px 4px var(--bg-shade-0); */
box-shadow: 0px 0px 10px 2px var(--warn-bg-1);
/* Add shadow: lightblue links on orange are not easy to read */
text-shadow: 1px 1px 1px var(--bg-shade-0);
text-shadow: 1px 1px 1px var(--bg-shadow-1);
}
/* Notification boxes glow */
/*
ul#filetoc, .toc, .mw-warning {
box-shadow: var(--bg-shade-4) 0px 0px 3px 3px;
}
*/
.mw-dismissable-notice,
.messagebox,
.successbox,
table.tmbox-protection,
table.tmbox-notice {
box-shadow: 0 0 5px 1px var(--bg-shade-5); /* Highlight with a glow around */
}
/* Standard shadow */
.ve-init-mw-diffPage-diffMode .oo-ui-buttonSelectWidget, /* "Visual" / "Wikitext" toggle on differences page (if enabled in settings) */
.mw-htmlform-ooui-wrapper.oo-ui-panelLayout-framed, /* Page history "Filter revisions" */
/* .oo-ui-layout.oo-ui-panelLayout.oo-ui-panelLayout-padded.oo-ui-panelLayout-framed.mw-htmlform-ooui-wrapper -- Add shadow -- Page history */
/* .oo-ui-layout.oo-ui-panelLayout.oo-ui-panelLayout-padded.oo-ui-panelLayout-framed -- Don't add shadow -- https://www.mediawiki.org/wiki/Special:Contributions/ */
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined, /* Add shadow -- https://en.wikipedia.org/wiki/Special:Watchlist */
.oo-ui-menuSelectWidget,
.oo-ui-floatableElement-floatable,
.mw-parser-output .main-top, /* Main page welcome https://ru.wikipedia.org/wiki/ */
.mw-parser-output .main-box, /* Main page content https://ru.wikipedia.org/wiki/ */
.mw-revslider-container,
.mw-recentchanges-toplinks:not(.mw-collapsed),
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.mw-changeslist-legend,
/* .mw-widget-calendarWidget, */
.mw-advancedSearch-expandablePane-options,
.mw-advancedSearch-expandablePane-namespaces {
box-shadow: 1px 1px 8px 2px var(--bg-shadow-1);
box-shadow: 2px 2px 12px 4px var(--bg-shadow-0);
box-shadow: 2px 2px 10px 1px var(--bg-shadow-0);
}
.wikipediauserbox {
border: unset !important;
margin: 2px !important;
/* background-color: var(--bg-shade-5) !important; */
box-shadow: 0px 0px 2px 1px var(--bg-shadow-1);
box-shadow: 0px 0px 2px 0px var(--bg-shadow-1);
}
/* Popup box shadow */
.oo-ui-popupWidget-popup {
background-color: var(--bg-shade-4);
border-color: var(--bg-shade-6);
box-shadow: 3px 3px 10px 0px var(--bg-shadow-1);
}
/* Gallery */
ul.gallery {
display: flex;
flex-wrap: wrap;
/* align-items: flex-end; */
align-items: stretch;
justify-content: center;
}
li.gallerybox {
/* width: unset !important; */
/* width: 155px; */
margin: 2px;
background-color: var(--bg-shade-4);
/* box-shadow: 0px 0px 6px 2px var(--bg-shade-1); */
}
li.gallerybox > div {
width: unset !important;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-evenly;
}
.mw-body li.gallerybox div.thumb {
/* flex-grow: 2; */
display: flex; /* No more margin trickery with javascript */
align-items: center; /* Center vertically */
justify-content: center; /* Center horizontally */
margin: 0px;
background-color: unset;
border: unset;
box-shadow: unset;
}
#content .gallerybox div.thumb {
background-color: unset; /* Remove background-color: #f8f9fa; */
}
.thumb > div {
margin: 4px !important;
box-shadow: 1px 2px 8px 4px var(--bg-shadow-1);
border-radius: 2px; /* Only affects the shadow, not the image */
}
.mw-tmh-player {
display: block; /* Why a span for video? */
}
.mw-tmh-player .mw-tmh-play {
background-position: center;
background-size: contain;
}
div.gallerytext {
/* flex-grow: 2; */
padding: 0px 2px 4px 2px;
text-align: center;
/* background-color: var(--bg-shade-4); */
/* box-shadow: 0px 0px 6px 2px var(--bg-shade-1); */
}
.gallery.mw-gallery-packed {
justify-content: space-evenly;
}
.gallery.mw-gallery-packed div.gallerytext {
margin: auto;
}
/** Timeless skin: rounded, border-less boxes **/
body {
--box-border: 1px;
--box-radius: 0;
--button-radius: 0;
--usermenu-radius: 0px;
}
body.skin-timeless {
--box-border: 0;
--box-radius: 5px;
--button-radius: 4px;
--usermenu-radius: 20px;
}
.oo-ui-popupWidget-popup,
#mw-content,
.sidebar-chunk,
#centralized-discussion-label,
ul.ext-related-articles-card-list .ext-related-articles-card, /* "Related articles" -- bottom of article pages */
.mw-revslider-container,
div.editOptions,
.mw-parser-output div[style*="border:"],
.mw-parser-output .portal > ul,
.mw-parser-output .note,
.mw-parser-output div.module-shortcutboxplain,
/* .mw-body li.gallerybox div.thumb, */ /* Rounded thumbnail frames look weird */
.gallerybox,
.gallerytext,
.messagebox,
.messagebox.standard-talk,
.successbox,
.warningbox,
.errorbox,
.usermessage,
div.user-block,
.toc,
ul#filetoc,
code,
pre,
.mw-code,
.mw-warning,
.mw-highlight,
.mw-pt-languages,
.mw-dismissable-notice,
.catlinks,
.shortcutbox,
div.thumbinner,
.thumbinner,
table.ambox:not(.ambox-content),
table.cmbox,
table.fmbox,
table.ombox,
table.tmbox,
table[style]:not(.tpl-infobox):not(.navbox-inner),
.tmbox td[style*="background"], /* Graph on https://en.wikipedia.org/wiki/Talk:Main_Page */
.navbox,
.infobox,
.infobox .NavHead,
.infobox th[style*="background"],
.infobox th.summary,
.vertical-navbox th[style],
.wikitable,
th.mbox-image[style],
.flow-topic-titlebar,
.flow-board-header,
.skin-infobox,
.skin-infobox-header {
/* Disable borders in Timeless skin */
border-width: var(--box-border) !important;
/* Round the corners of boxes */
border-radius: var(--box-radius);
}
table.ambox-content {
/* Disable borders in Timeless skin, except left border which is different, used as a highlight */
border-top-width: var(--box-border) !important;
border-bottom-width: var(--box-border) !important;
border-right-width: var(--box-border) !important;
/* Round the corners of boxes */
border-radius: var(--box-radius);
}
@media screen and (max-width: 1099px) {
#mw-content,
.sidebar-chunk,
.catlinks {
border-radius: unset;
}
}
.mw-dismissable-notice {
overflow: auto; /* Prevent collapsing the margin of child elements */
}
ul.ext-related-articles-card-list .ext-related-articles-card-thumb, /* "Related articles" -- bottom of article pages */
td.mbox-image {
/* Only the left corners are rounded */
border-radius: var(--box-radius) 0 0 var(--box-radius);
}
.wikipediauserbox td:last-child {
/* Only the right corners are rounded */
border-radius: 0 var(--box-radius) var(--box-radius) 0;
}
body.skin-timeless .mw-editform .editOptions { /* Edit page bottom area with "Summary" textfield and "Publish Changes" button */
/* Only the bottom corners are rounded */
border-radius: 0px 0px var(--box-radius) var(--box-radius);
}
/* Timeless skin: input fields */
.oo-ui-tagMultiselectWidget-handle,
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
.oo-ui-dropdownWidget-handle,
/* Timeless skin: rounded buttons */
#simpleSearch,
.mw-ui-input,
.mw-ui-button,
button,
input[type='button'],
input[type='submit'] {
border-radius: var(--button-radius);
}
/**** Override some styles hardcoded in the wikitext ****/
/** Main page welcome **/
/* Russian main page welcome */
/*
.mw-parser-output .main-top {
background-color: var(--bg-shade-5) !important;
}
.mw-parser-output .main-top-left {
background-image: linear-gradient(to right, var(--bg-shade-1) 0%, var(--bg-shade-5) 70%) !important;
background-image: linear-gradient(to right, var(--bg-shadow-0) 0%, var(--bg-shade-5) 70%) !important;
background-image: linear-gradient(to right, var(--bg-shadow-0) 0%, transparent 70%) !important;
}
*/
body.page-Main_Page #mp-topbanner::before, /* https://en.wikipedia.org/wiki/Main_Page */
body.page-Заглавная_страница .mw-parser-output .main-top::before, /* https://ru.wikipedia.org/wiki/ */
body.page-Wikiversity_Main_Page #mw-content-text > div:first-child div[style*="background-color: #f6f6f6"]::before { /* https://en.wikiversity.org/wiki/Wikiversity:Main_Page */
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: -1;
background-color: var(--bg-shade-3);
background-image: url("https://upload.wikimedia.org/wikipedia/commons/e/e3/Wikipedia_logo_letters_banner.svg");
}
body.page-Main_Page #mp-topbanner, /* https://en.wikipedia.org/wiki/Main_Page */
body.page-Заглавная_страница .mw-parser-output .main-top, /* https://ru.wikipedia.org/wiki/ */
body.page-Wikiversity_Main_Page #mw-content-text > div:first-child div[style*="background-color: #f6f6f6"] { /* https://en.wikiversity.org/wiki/Wikiversity:Main_Page */
position: relative;
color: var(--text-shade-1) !important;
background-color: unset !important;
border-color: var(--bg-shade-4) !important;
--banner-overlay-1: #333d;
--banner-overlay-1: var(--bg-shade-3);
--highlight-from: 30%;
--highlight-to: 90%;
background-image: linear-gradient( var(--highlight-angle), var(--banner-overlay-0), transparent var(--highlight-center), var(--banner-overlay-1) var(--highlight-to), var(--banner-overlay-0) );
background-image: linear-gradient( var(--highlight-angle), var(--banner-overlay-0), var(--banner-overlay-1) var(--highlight-from), transparent var(--highlight-center), var(--banner-overlay-1) var(--highlight-to), var(--banner-overlay-0) );
--banner-overlay-0: var(--bg-shadow-0);
--banner-overlay-0: var(--bg-shade-0);
--highlight-center: 85%;
--highlight-center: 60%;
--highlight-center: 40%;
--highlight-angle: 40deg;
--highlight-angle: 60deg;
--highlight-angle: 30deg;
background-image: linear-gradient( var(--highlight-angle), var(--banner-overlay-0), transparent var(--highlight-center), var(--banner-overlay-0) );
}
body.page-Заглавная_страница .mw-parser-output .main-top-left {
background-image: unset;
}
body.page-Main_Page #mp-topbanner { /* https://en.wikipedia.org/wiki/Main_Page */
}
body.page-Заглавная_страница .mw-parser-output .main-top { /* https://ru.wikipedia.org/wiki/ */
--highlight-angle: 40deg;
--highlight-center: 60%;
}
body.page-Wikiversity_Main_Page #mw-content-text > div:first-child div[style*="background-color: #f6f6f6"] { /* https://en.wikiversity.org/wiki/Wikiversity:Main_Page */
--highlight-angle: 30deg;
--highlight-center: 85%;
}
.mw-parser-output .main-top {
background-color: var(--bg-shade-3);
}
.mw-parser-output .main-top-left {
background-image: linear-gradient( 40deg, var(--bg-shade-0) 0%, var(--bg-shade-6) 30%, rgba(248,249,250,0) 100% );
flex-grow: 3;
}
.mw-parser-output .main-top-right .mw-ui-button.mw-ui-quiet {
color: var(--text-shade-4);
}
/** Main page content **/
#mp-upper { background-color: unset !important; }
.MainPageBG, /* https://en.wikipedia.org/wiki/Main_Page */
td[style*="background-color:#f6fff1"], /* Wikiversity Welcome */
td[style*="background:#A7C1F2"] {
background: var(--bg-shade-4) !important;
border-color: var(--bg-shade-2) !important;
color: unset !important;
}
#mp-other-lower h2,
.MainPageBG h2 {
border: 0 !important;
box-shadow: 1px 4px 10px 0px var(--bg-shade-1);
background-image: linear-gradient(25deg, #4f49, #222f) !important;
background-image: linear-gradient(45deg, #2220 20%, #111f 110%) !important;
background-image: linear-gradient(25deg, #264, #222) !important;
background-image: linear-gradient(25deg, #7D8, #222) !important; /* Vivid green, without blend-mode */
background-blend-mode: luminosity;
background-image: linear-gradient(25deg, #2220 10%, #111 100%) !important; /* Emphasize base green and blue */
}
#mp-other-lower h2::after,
.mw-body .mw-parser-output .MainPageBG h2::after {
content: none;
/* border-color: var(--text-shade-4); */
}
.mw-parser-output .mainpage-box-title { /* https://commons.wikimedia.org/wiki/Main_Page */
background-blend-mode: luminosity;
background-image: linear-gradient(25deg, #2220 10%, #111 100%); /* Emphasize base green and blue */
background-image: linear-gradient(25deg, #888f, #000c 80%, #000f);
background-image: linear-gradient(25deg, var(--bg-shade-5), var(--bg-shadow-0) 70%, var(--bg-shade-0) );
}
.mw-parser-output .mainpage-box {
border-width: 2px;
}
#centralized-discussion-label {
padding: 0.2em 0.4em !important;
margin: 0.2em 0.4em;
}
#centralized-discussion-label + div {
/* Select div below the label, disable border between the two elements */
border-top: unset !important;
}
#centralized-discussion-label,
.infobox th.summary,
.vertical-navbox th[style] {
/* Highlighted header */
box-shadow: var(--bg-shadow-1) 0px 8px 8px -8px;
}
body.skin-timeless .infobox td, body.skin-timeless .infobox th {
padding: 1px 3px;
}
/** Box backgrounds **/
/* unset */
td[style*="background-color: #E0E0E0"], /* https://en.wikipedia.org/wiki/Wikipedia:Arbitration/Requests/Case/* */
.mw-inputbox-centered[style], /* https://en.wikipedia.org/wiki/Help:Contents */
td[style*="background-color: #fcf4ef"], /* https://en.wikipedia.org/wiki/Wikipedia:Contents */
tr[style*="background:#FFE2E0"], /* Commons "This media file has been nominated for deletion" */
.wikipediauserbox td[style*="background:#ffffff"], /* Clock on https://en.wikipedia.org/wiki/Wikipedia:Bureaucrats%27_noticeboard */
table#portal td {
background: unset !important;
}
td[style*="color:black"] { /* Some userboxes */
color: unset !important;
}
/* bg-shade-2 */
div.archived {
background-color: var(--bg-shade-2) !important;
border-color: var(--bg-shade-4) !important;
}
/* bg-shade-3 */
td[style*="background: White"] { /* "Extended content" on Wikiversity */
background: var(--bg-shade-3) !important;
border: unset !important;
color: unset;
}
/* Experiment adding blueish hue with alpha transparency */
/*
.mw-parser-output div[style*="background:#F0F0FF"] {
background: #445 !important;
background: #00f4 !important;
background: #44f4 !important;
background: #88f4 !important;
background: #fff4 !important;
}
*/
/* bg-shade-4 */
table.mw-collapsible div[style*="background:#CCF"] { /* https://meta.wikimedia.org/wiki/Steward_requests/Checkuser "How to make a request" */
background: var(--bg-shade-4) !important;
}
/* div.mw-body-content.mw-indicators > div.mw-indicator > div[style] */
#histlegend, /* .mw-history-legend div, -- https://commons.wikimedia.org/w/index.php?title=Commons:Requests_for_comment/Partial_blocks&action=history */
.mw-parser-output div[style*="background:#F0F0FF"], /* https://en.wikipedia.org/wiki/Wikipedia:Wikipedia_Signpost/2019-12-27/Special_report */
.mw-parser-output div[style*="background-color:#f8f8f8"],
.mw-parser-output div.boilerplate[style*="background-color:"],
.mw-parser-output .portal,
.mw-parser-output .portal > ul,
.mw-parser-output .tright[style*="background"], /* TODO: where was this? $('.tright')[1] */
div.user-block[style*="background"], /* UTRSBot notices */
div[style*="background-color: #f9f9f9"],
.mw-indicator div[style],
.vertical-navbox,
table[style]:not(.tpl-infobox):not([style*="background:transparent"]) {
/* Tables with style hardcoded in wikitext */
background: var(--bg-shade-4) !important;
border-color: var(--bg-shade-5) !important;
border-color: var(--bg-shade-2) !important;
border-color: var(--border-shade-4) !important;
color: var(--text-shade-2) !important;
}
/* bg-shade-5 */
div#user-unified-loginspan[style*="background-color: White"] { /* https://en.wikipedia.org/wiki/Wikipedia:Arbitration/Requests/Case/* */
background-color: var(--bg-shade-5) !important;
padding: 4px 8px;
border-radius: 1em;
}
div[style*="background-color:#FFF"], /* https://en.wikipedia.org/wiki/Wikipedia:Wikipedia_Signpost/2019-12-27/Special_report */
div[style*="background-color: #ffffff"], /* https://commons.wikimedia.org/wiki/Commons:Community_portal */
.infobox td[style*="background-color: #b0c4de"],
.mw-parser-output .mainpage-welcome,
/*.vertical-navbox */ .NavHead,
.vertical-navbox div[style*="background-color: #adf"], /* https://en.wikipedia.org/wiki/Talk:Main_Page */
/* th.navbox-title[style*="background"], */
td.navbox-abovebelow, /* Or td.hlist or [style*="background:#cce"] https://en.wikipedia.org/wiki/Wikipedia:Bureaucrats%27_noticeboard "Current admin count" */
th[style*="background"],
div[style*="background:#FFF"], /* https://meta.wikimedia.org/wiki/Steward_requests/Checkuser "Shortcut: SRCU" */
div[role="note"] > span[style*="background"],
/* div.resolved > span[style*="background"], */
/* div.unresolved > span[style*="background"], */
.wikipediauserbox td+td {
background: var(--bg-shade-5) !important;
}
div[style*="background-color:#c0eaa6"], /* Wikiversity Welcome */
div[style*="background-color:#FDFDFD"], /* "Resolved" comment https://commons.wikimedia.org/wiki/Commons:Help_desk */
div[style*="background: ivory"], /* https://en.wikipedia.org/wiki/Wikipedia:Arbitration/Requests/Case/* */
tr[style*="background: #E0E0E0"] { /* https://en.wikipedia.org/wiki/Wikipedia:Arbitration/Requests/Case */
background: var(--bg-shade-5) !important;
border-color: var(--bg-shade-4) !important;
color: unset !important;
}
.mw-parser-output .mainpage-welcome {
color: var(--text-shade-2) !important;
}
/* bg-shade-6 */
table#portal tr:first-child td,
.tmbox td[style*="background"]:not(.wpbs-inner),
#centralized-discussion-label,
.mw-parser-output .mainpage-portals,
#wmhu-tax-banner, /* https://hu.wikipedia.org/wiki/ */
.infobox th.summary,
.vertical-navbox th[style],
span[style*="background:#f9fcf9"], /* "Resolved" https://commons.wikimedia.org/wiki/Commons:Help_desk */
th.mbox-image[style], /* Highlighted header or field */
td.import[style] {
/* padding: 0.2em 0.4em; */ /* Hardcoded in the template */
background: var(--bg-shade-6) !important;
}
div#user-unified-login, /* div#user-unified-login[style*="background:#F5F5F5"] -- {{Notification preferences|ping|<user>}} -- https://en.wikipedia.org/wiki/Template:Notification_preferences */
td[style="background:#C5D8FC"] {
background: var(--bg-shade-6) !important;
border-color: var(--bg-shade-4) !important;
color: unset !important;
}
div#user-unified-login span { /* https://en.wikipedia.org/wiki/Template:Notification_preferences */
color: unset !important;
}
/* Hardcoded box borders */
.tmbox td[style*="background"] {
border: 0 !important;
}
/* Recolor hardcoded rules border-top: 1px solid #c0c090; border-bottom: 1px solid #c0c090; */
.tmbox td[style*="border-top"],
.tmbox td[style*="border-bottom"] {
border-color: var(--bg-shade-6) !important;
}
table.mw-collapsible { /* "Extended content" on Wikiversity */
border: 2px solid var(--bg-shade-4) !important;
border: 4px double var(--bg-shade-4) !important;
border-bottom: 0.5em double var(--bg-shade-4) !important;
}
/* Portal boxes and "Help desk" padding and size correction */
.mw-parser-output div[style*="background-color:#f9f9f9"],
.mw-parser-output .portal {
padding: 0.4em !important;
}
.mw-parser-output .portal li > span {
padding: 0.25em 0em !important;
padding-right: 0.4em !important;
}
.mw-parser-output .portal > ul {
padding: 0 !important;
}
/* Jumpbox -- "Skip to TOC Skip to bottom" https://en.wikipedia.org/wiki/Wikipedia:Bureaucrats%27_noticeboard */
div.nomobile.metadata[style*="position"] {
background-color: var(--bg-shade-6) !important;
border-color: var(--text-shade-4) !important;
border-radius: 1em;
padding: 3px 0.7em !important;
top: 0.1em !important;
right: 2em !important;
}
/** Responsive tables **/
/* Border below header row */
/* .wikitable th[scope=col], */
/* .wikitable tbody th[scope=col], */
.wikitable.plainrowheaders tbody th[scope=col],
.wikitable.sortable thead th {
box-shadow: inset 0px -4px 0px 0px var(--bg-shade-3);
box-shadow: inset 0px -3px 0px 0px var(--text-shade-4);
}
.wikitable.sortable tfoot th {
box-shadow: inset 0px 4px 0px 0px var(--bg-shade-3);
box-shadow: inset 0px 3px 0px 0px var(--text-shade-4);
}
/* Make wide tables horizontally scrollable */
/* .mw-parser-output > table:not([style*="float"]):not([style*="position"]), */
.widescroll, /* TODO: Proposed class */
.thumb.tmulti { /* Mutliple thumbnails */
/* Might need to select wide tables to scroll with javascript and a specific class to avoid the issues with turning a table into a block for small tables. */
/* Alternative is to wrap in a div that's scrolled. This can be done only in the skin. */
display: block; /* Needed for scroll, spoils accessibility and anything that depends on table semantics. */
overflow-x: auto; /* Horizontal scrollbar if wider than parent div.mw-parser-output */
/* overflow-y: hidden; */ /* Why is there a vertical scrollbar without padding-bottom: 1px ? */
padding: 0 0 1px 0 !important; /* Remove .wikitable padding */
max-width: 100%;
width: fit-content;
height: fit-content;
}
@media screen and (max-width: 850px) {
/* Add a scrollbar at the bottom of the table, hide the overflow if wider than available space */
.wikitable.sortable {
display: block;
overflow-x: auto;
padding: 0 0 1px 0 !important;
max-width: 100%;
width: fit-content;
height: fit-content;
}
} /* @media screen and (max-width: 850px) */
@media screen and (min-width: 851px) {
/* Keep header on-screen when scrolling down */
/* Test: https://en.wikipedia.org/wiki/Usage_share_of_web_browsers https://meta.wikimedia.org/wiki/Reports */
/* .wikitable.plainrowheaders,
.wikitable.sortable { */
.wikitable {
--sticky-top: 0em; /* Old skins scroll the whole height, have no fixed header */
--sticky-top2: 2.16em;
}
body.skin-minerva .wikitable,
body.skin-timeless .wikitable {
--sticky-top: 2.7em; /* Timeless has a ca. 3em height header fixed always on screen */
--sticky-top2: 4.86em; /* +2.16em */
}
/* .wikitable tr:nth-child(2) tbody th[scope=col], */
.wikitable thead tr:nth-child(2) th {
--sticky-top: var(--sticky-top2);
}
/* .wikitable tbody th[scope=col], */
.wikitable.plainrowheaders tbody th[scope=col],
.wikitable.sortable thead th {
position: sticky;
top: var(--sticky-top);
}
.wikitable.sortable tfoot th {
position: sticky;
bottom: 0em;
}
/* Don't sticky the headers of floating tables (on the right), these are usually small enough to not need that. */
/*
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend th,
.mw-changeslist-legend th,
.mw-body .mw-search-profile-tabs th,
.mw-body fieldset#mw-searchoptions th,
.wikitable th,
.infobox th,
.mw-datatable th,
table[align] th,
table[style*="float"] th {
position: unset;
box-shadow: unset;
}
*/
/* Alternative sticky header approach
* https://bugs.chromium.org/p/chromium/issues/detail?id=702927
* Issue 702927: position: sticky does not work on <thead> or <tr>
* Sun, Mar 19, 2017 "Until Blink supports CSS3 positioning, I don't think we can properly support sticky on <thead> and <tr>, as it would require (from memory) changing the definition of container() for those elements (and for <th>)."
* Wed, Mar 29, 2017 TheDJ? hartman....@gmail.com "The problems is that on Wikipedia we have many tables with multi row table headers, and having to target the individual cells with the same (top) offset, causes them to overlap in that case..."
* Mon, Jan 29, 2018 "My current understanding is that robhogan@ attempted to fix both relative and sticky positioning on table rows, believing the Blink support to be there. However it turned out that this caused Netflix to render incorrectly (see issue 798164). The fix from robhogan@ was reverted and that revert merged all the way back to M64 to avoid breaking Netflix. The root bug here to track is issue 417223; until Blink has the proper support for relative postioning for table rows, there isn't much we can do :(. I'm afraid I don't have any idea of whether that'll be fixed soon."
* Wed, Apr 25, 2018 "No current work is happening by me on sticky for <thead>, dropping to Available."
* Abandoned since then.
*/
/*
thead {
display: block;
position: sticky;
top: var(--sticky-top);
}
*/
} /* @media screen and (min-width: 851px) */
/** History **/
span.updatedmarker {
margin: 0 0.5em;
padding: 0 0.5em;
border-radius: 5px;
border-radius: 1em;
background-color: var(--bg-shade-4a);
color: var(--text-shade-4);
}
/** Recent changes **/
/** Revision differences **/
.mw-revslider-container {
/* "Browse history interactively" */
background-color: var(--bg-shade-3a);
color: var(--text-shade-1);
}
.mw-revslider-container:focus,
.mw-revslider-container :focus {
outline: none;
}
.mw-revslider-container .oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
color: inherit;
}
[data-diff-action='insert'], table[data-diff-action='insert'] > caption, figure[data-diff-action='insert'] > figcaption {
background-color: var(--diff-add-bg) !important;
box-shadow: 0 0 4px 2px var(--diff-add-bg);
border-radius: var(--box-radius);
}
[data-diff-action='remove'], table[data-diff-action='remove'] > caption, figure[data-diff-action='remove'] > figcaption {
background-color: var(--diff-del-bg) !important;
box-shadow: 0 0 4px 2px var(--diff-del-bg);
border-radius: var(--box-radius);
}
td.diff-context {
color: var(--diff-text);
background-color: var(--diff-bg);
border-color: transparent;
}
td.diff-addedline {
background-color: var(--diff-add-bg);
border-color: var(--diff-add-bg-1);
}
td.diff-deletedline {
background-color: var(--diff-del-bg);
border-color: var(--diff-del-bg-1);
}
td.diff-addedline .diffchange {
background-color: var(--diff-add-bg-1);
padding-left: 0;
}
td.diff-deletedline .diffchange {
background-color: var(--diff-del-bg-1);
}
.diffchange {
font-weight: unset;
}
.diff {
border-spacing: 1px;
}
.diff td {
padding: 0 0.5em;
}
.diff td.diff-marker {
padding: 0 0.25em;
}
td.diff-addedline .diffchange,
td.diff-deletedline .diffchange {
border-radius: 0;
padding: 0;
}
td.diff-addedline, td.diff-deletedline, td.diff-context {
font-size: initial;
border-width: 0 0 0 4px;
}
/* Flow -- Structured discussions */
.mw-content-ltr .flow-post {
margin: 0 0 0 1em;
}
.flow-post {
padding: 8px 0;
border-bottom: 1px solid var(--bg-shade-6);
/* box-shadow: 0px 9px 8px -10px var(--link-shade-2); */
/* margin: 0; */
color: var(--text-shade-2);
}
.flow-topic-titlebar {
background-color: var(--bg-shade-4);
box-shadow: var(--bg-shade-4) 0px 2px 3px 3px;
padding: 0.5em;
}
.flow-topic-moderatestate-lock .flow-topic-titlebar {
background-color: var(--bg-shade-4);
}
.flow-topic-moderatestate-lock .flow-topic-titlebar h2 {
color: var(--text-shade-3);
}
.flow-ui-modal {
background-color: var(--bg-overlay-0);
}
.flow-ui-modal-layout {
background-color: var(--bg-shade-3);
color: var(--text-shade-3);
border-radius: var(--box-radius);
box-shadow: 1px 1px 8px 2px var(--bg-shadow-1);
}
.flow-post-content > section:last-child > p:last-child {
/* Decrease unnecessary margin at top and bottom of posts */
margin-bottom: 0;
}
.flow-post-content > section:first-child > p:first-child {
margin-top: 4px;
}
.flow-topic-meta,
.flow-topic-summary-container .flow-topic-summary .flow-topic-summary-author,
.flow-topic-summary-container .flow-ui-editTopicSummaryWidget .flow-topic-summary-author {
color: inherit;
}
.flow-topic-titlebar .flow-topic-summary,
.flow-topic-titlebar .flow-ui-editTopicSummaryWidget,
.mw-content-ltr .flow-topic-titlebar .flow-topic-titlebar-container,
.mw-content-ltr .flow-topic-titlebar .flow-edit-title-form {
padding-left: 0.5em;
}
.flow-ui-editorWidget > .flow-ui-editorWidget-editor:not(.oo-ui-pendingElement-pending) {
background-color: var(--bg-shade-2) !important; /* override inlined <style> */
}
.flow-ui-editorWidget-wikitextHelpLabel {
bottom: 50px; /* Hacked positioning depends on font */
}
.flow-component.flow-board-page.flow-full-height-side-rail .flow-board-header::before {
display: none;
background-color: transparent;
}
.flow-component.flow-board-page.flow-full-height-side-rail:not(.expanded) .flow-board-header {
background-color: var(--bg-shade-4);
/* box-shadow: 0px 0px 5px 4px var(--bg-shade-4); */
box-shadow: 0px 2px 8px 4px var(--bg-shade-2);
}
a.flow-timestamp-anchor:hover,
a.flow-timestamp-anchor:hover:visited {
color: inherit;
}
div > .flow-menu ul {
background-color: var(--bg-shade-5);
}
.flow-component .flow-list li:hover {
background-color: var(--bg-shade-4);
}
.flow-post-timestamp {
margin: 0 2em;
}
.flow-post-main > .flow-post-meta,
.flow-post-main > .flow-post-meta > .flow-post-meta-actions {
display: inline;
float: unset;
}
.flow-post-main > .flow-menu {
display: inline-block;
position: relative; /* Anchor for pop-up menu */
margin-top: -8px; /* Leave less dead space below post */
}
.flow-post-main > .flow-menu .flow-menu-js-drop {
display: inline;
position: relative;
}
.flow-post-main > .flow-menu .flow-menu-js-drop a {
position: relative;
top: 7px;
}
.flow-post-main .flow-list {
position: absolute;
z-index: 2;
/* top: 1.6em; */
bottom: 1.3em;
left: -3em;
width: max-content;
}
/* Input widgets: advanced search, logs, dates */
input {
/* TODO: This interferes with #searchInput. Is it necessary for some other input field with a more specific selector? */
/* background-color: var(--bg-shade-3); */
/* border: solid 1px var(--bg-shade-1) !important; */
/* border-radius: 2px; */
/* padding-left: 5px; */
color: var(--text-shade-3); /* TODO: check */
}
.oo-ui-textInputWidget > .oo-ui-labelElement-label {
line-height: 0.5em;
}
.oo-ui-labelElement-label {
/* text-shadow: 0 0 0 var(--bg-shade-0); */
/* text-shadow: 1px 2px var(--bg-shade-3); */
}
.oo-ui-draggableElement.oo-ui-labelElement .oo-ui-labelElement-label {
color: var(--text-shade-3);
}
.oo-ui-fieldsetLayout-header .oo-ui-labelElement-label,
.oo-ui-fieldLayout-header .oo-ui-labelElement-label {
color: var(--text-shade-1);
}
.mw-ui-input {
background-color: var(--bg-shade-3);
border-color: var(--bg-shade-6);
box-shadow: unset; /* Remove rule box-shadow: inset 0 0 0 0.1em #fff; */
margin-top: 3px;
margin-bottom: 1px;
}
.mw-ui-input,
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
.oo-ui-textInputWidget input,
.oo-ui-textInputWidget textarea,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled:active,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled:focus,
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled:hover,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled,
.mw-widget-dateInputWidget-handle {
background-color: var(--bg-shade-2);
color: var(--text-shade-2);
}
.oo-ui-dropdownWidget.oo-ui-widget-enabled.oo-ui-dropdownWidget-open .oo-ui-dropdownWidget-handle,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
/* background-color: var(--bg-shade-4); */
background-color: initial;
color: var(--text-shade-2);
}
.oo-ui-dropdownInputWidget.oo-ui-widget-enabled {
background-color: var(--bg-shade-2);
}
.mw-advancedSearch-fieldContainer .oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label,
.oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input {
color: var(--text-shade-2);
}
.mw-advancedSearch-namespace-selection,
.mw-advancedSearch-fieldContainer,
.mw-widget-dateInputWidget-calendar {
background-image: unset;
background-color: var(--bg-shade-3);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined,
.mw-advancedSearch-fieldContainer .oo-ui-labelElement > .oo-ui-fieldsetLayout-header > .oo-ui-labelElement-label,
.mw-advancedSearch-expandablePane-button.oo-ui-widget-enabled.oo-ui-buttonWidget > .oo-ui-buttonElement-button:active,
.mw-advancedSearch-expandablePane-button.oo-ui-widget-enabled.oo-ui-buttonWidget > .oo-ui-buttonElement-button:focus,
.mw-advancedSearch-expandablePane-button.oo-ui-widget-enabled.oo-ui-buttonWidget > .oo-ui-buttonElement-button:hover {
background-color: var(--bg-shade-3);
color: unset;
}
.mw-prefs-buttons {
/* Settings, Save button area */
background-color: var(--bg-shade-3);
}
/* Recent changes */
div.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
background: var(--bg-shade-3a);
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget {
color: var(--text-shade-2);
}
.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-menuOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected {
background-color: initial;
color: var(--text-shade-2);
}
.oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-selected.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-pressed.oo-ui-optionWidget-highlighted {
color: var(--text-shade-1);
}
.mw-widget-calendarWidget-day {
color: var(--text-shade-2);
}
.mw-widget-calendarWidget-day-additional {
color: var(--text-shade-3); /* TODO: check */
}
/* Dropdown menu background */
.oo-ui-menuSelectWidget {
background-color: var(--bg-shade-3);
color: var(--text-shade-3); /* Probably overridden by all subelements */
}
.mw-ui-checkbox:not(#noop) [type='checkbox'] + label::before {
background-color: var(--bg-shade-4);
}
.mw-body .mw-rcfilters-ui-changesListWrapperWidget .mw-changeslist-legend,
.mw-changeslist-legend,
.mw-body .mw-search-profile-tabs,
.mw-body fieldset#mw-searchoptions,
.wikitable,
.mw-datatable {
background: var(--bg-shade-5);
}
.oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted.oo-ui-widget-enabled,
.oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-selected,
.oo-ui-menuOptionWidget.oo-ui-menuOptionWidget.oo-ui-optionWidget-highlighted.oo-ui-optionWidget-pressed {
background-color: var(--bg-shade-5);
}
.mw-ui-button {
background-color: var(--bg-shade-5);
color: var(--text-shade-1);
}
.mw-ui-button:hover {
background-color: var(--bg-shade-6);
color: var(--text-shade-1);
}
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled,
.oo-ui-tagItemWidget.oo-ui-widget-enabled:not(.oo-ui-tagItemWidget-fixed) {
background-color: var(--bg-shade-5);
/* border-color: var(--bg-shade-1); */
border: unset;
}
.oo-ui-tagItemWidget.oo-ui-widget-enabled:focus {
box-shadow: inset 0 0 0 1px var(--bg-shade-6);
box-shadow: inset 0 0 0 1px var(--focus-border-color);
}
.oo-ui-tagItemWidget {
margin-bottom: none;
}
/* Input field border */
#searchInput, /* Vector skin search */
body.skin-timeless #simpleSearch, /* Timeless skin search */
div.mw-rcfilters-ui-filterTagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle,
div.mw-rcfilters-ui-filterTagMultiselectWidget-views-select-widget.oo-ui-widget,
.mw-advancedSearch-fieldContainer,
.mw-advancedSearch-namespace-selection,
.mw-advancedSearch-fieldContainer fieldset,
.mw-ui-input,
.mw-widget-dateInputWidget-handle,
.oo-ui-dropdownWidget-handle,
.oo-ui-tagMultiselectWidget-handle,
.oo-ui-textInputWidget .oo-ui-inputWidget-input,
fieldset {
/* background-color: var(--bg-shade-3) !important; */
/* border: 1px solid var(--bg-shade-1); */
border-color: var(--bg-shade-4);
}
/* Input field border when hovered */
#searchInput:hover, /* Vector skin search */
body.skin-timeless #simpleSearch:hover, /* Timeless skin search */
.mw-ui-input:hover,
div.mw-widget-dateInputWidget.oo-ui-widget-enabled .mw-widget-dateInputWidget-handle:hover,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined:hover .oo-ui-tagMultiselectWidget-handle,
.oo-ui-textInputWidget.oo-ui-widget-enabled:hover .oo-ui-inputWidget-input,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:active {
border-color: var(--bg-shade-6);
}
#searchInput, /* Vector skin search */
body.skin-timeless #simpleSearch, /* Timeless skin search */
.mw-ui-input,
div.mw-widget-dateInputWidget.oo-ui-widget-enabled .mw-widget-dateInputWidget-handle,
.oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined .oo-ui-tagMultiselectWidget-handle,
.oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle {
transition: border-color 0.25s, box-shadow 0.25s; /* from Timeless: only .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input has transition */
}
/* Button border when focused */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus {
box-shadow: unset;
border-color: var(--bg-shade-6);
border-color: var(--focus-border-color);
}
/* .editButtons .oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button { */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled:not(.oo-ui-buttonElement-active) > .oo-ui-buttonElement-button:hover,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
/* Input form dropdowns */
.oo-ui-buttonWidget.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active,
.oo-ui-buttonWidget.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active:focus,
.oo-ui-buttonWidget.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:focus,
.oo-ui-buttonWidget.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
/* Input form dropdowns :hover, :focus and :active (pushed) */
/* background-color: var(--bg-shade-4); */
background-color: unset;
/* color: var(--text-shade-2); */
color: unset;
border-color: var(--bg-shade-5);
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
.oo-ui-labelElement .oo-ui-labelElement-label { /* Flow "Cancel" and "Publish changes" buttons */
color: unset;
}
/* Editor */
.mw-editfont-monospace,
.mw-editfont-sans-serif,
.mw-editfont-serif {
font-size: unset;
}
.ace_editor,
.wikiEditor-ui .ace_editor,
.mw-editfont-monospace {
font-family: var(--font-mono);
}
.mw-editfont-sans,
.mw-editfont-sans-serif {
font-family: var(--font-sans);
}
.mw-editfont-serif {
font-family: var(--font-serif);
}
.oo-ui-windowManager-modal > .oo-ui-dialog {
background-color: var(--bg-overlay-0);
}
.ve-ui-mwSaveDialog-options {
background-color: initial;
border: unset;
}
.oo-ui-windowManager-modal > .oo-ui-dialog > .oo-ui-window-frame {
background-color: var(--bg-shade-4);
}
.codeEditor-status,
.wikiEditor-ui-toolbar,
.oo-ui-toolbar-bar {
background-image: unset;
background-color: var(--bg-shade-4);
/* background-color: var(--bg-shade-5); */
color: var(--text-shade-2);
}
/* textarea[style*="background"], */
#mw-content-text textarea, /* View source */
.wikiEditor-ui textarea {
/* Editor, code editor (), maybe other editors */
background-color: var(--bg-shade-2) !important;
color: var(--text-shade-1);
}
.wikiEditor-ui .wikiEditor-ui-view {
border: 1px solid var(--bg-shade-0);
}
.wikiEditor-ui .wikiEditor-ui-top {
border-bottom: 1px solid var(--bg-shade-0);
}
.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement:hover,
.tool-button.tool-active,
.tool.tool-active.oo-ui-buttonElement-frameless.oo-ui-iconElement {
background-color: var(--bg-shade-5);
box-shadow: unset;
outline: 0;
}
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-enabled-tools .oo-ui-tool.oo-ui-widget-disabled.oo-ui-flaggedElement-primary > .oo-ui-tool-link,
.oo-ui-barToolGroup-tools.oo-ui-toolGroup-disabled-tools .oo-ui-tool.oo-ui-flaggedElement-primary > .oo-ui-tool-link {
background-color: var(--bg-shade-6);
}
label.oo-ui-messageDialog-title { color: var(--text-shade-1); }
label.oo-ui-messageDialog-message { color: var(--text-shade-2); }
/* Code editor */
.ace-tm {
/* Ace editor might be loaded later -> !important necessary to override */
background-color: var(--bg-shade-1) !important;
color: var(--text-shade-2) !important;
}
.ace-tm .ace_gutter {
background-color: var(--bg-shade-4) !important;
color: var(--text-shade-2) !important;
}
.ace_scrollbar::-webkit-scrollbar-track {
background-color: var(--bg-shade-3) !important;
}
.ace_scrollbar::-webkit-scrollbar-thumb {
background-color: var(--bg-shade-5) !important;
}
.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement:active,
.tool.oo-ui-buttonElement-frameless.oo-ui-iconElement:hover,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:active,
.oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover,
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-pressed > .oo-ui-buttonElement-button,
.oo-ui-processDialog-actions-safe .oo-ui-widget-enabled.oo-ui-iconElement:not(.oo-ui-labelElement) > .oo-ui-buttonElement-button:hover,
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected,
.oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted,
.oo-ui-popupToolGroup.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle,
.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:hover,
.oo-ui-listToolGroup-tools .oo-ui-tool.oo-ui-widget-enabled:hover,
.oo-ui-menuToolGroup-tools .oo-ui-tool.oo-ui-tool-active,
.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:active, .oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:active:focus,
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-tool-active > .oo-ui-tool-link,
.oo-ui-tool.oo-ui-widget-enabled.oo-ui-popupToolGroup-active > .oo-ui-tool-link,
.oo-ui-tool.oo-ui-widget-enabled > .oo-ui-tool-link:hover {
background-color: var(--bg-shade-5);
color: var(--text-shade-2);
/* TODO: test for all -- changed for .oo-ui-dropdownWidget.oo-ui-widget-enabled .oo-ui-dropdownWidget-handle:hover */
background-color: unset;
color: unset;
}
.oo-ui-toolbar-tools .oo-ui-labelElement-label {
/* color: var(--text-shade-2); */
color: var(--bg-shade-0);
}
.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
border-bottom: 1px solid var(--bg-shade-2);
/* border-bottom: unset; */
/* box-shadow: 0 2px 2px 0 rgba(0,0,0,0.1); */
}
.oo-ui-toolGroup {
border-right: 1px solid var(--bg-shade-3);
}
.oo-ui-toolbar-actions .oo-ui-toolGroup {
border-left: 1px solid var(--bg-shade-3);
}
.oo-ui-popupToolGroup-tools {
background-color: var(--bg-shade-4);
color: var(--text-shade-2);
}
.oo-ui-popupToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title,
.oo-ui-listToolGroup-tools .oo-ui-tool-active.oo-ui-widget-enabled .oo-ui-tool-link .oo-ui-tool-title {
color: var(--text-shade-3);
}
.oo-ui-processDialog-actions-primary .oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
color: white;
}
/* Visual Editor */
.oo-ui-toolbar-position-top {
transition: unset;
background: red;
margin: 0;
height: 47px;
margin-top: -5px;
}
.oo-ui-windowManager-modal-active .oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
margin-right: 17px; /* Subtract the width of the hidden scrollbar */
}
.oo-ui-toolbar-position-top > .oo-ui-toolbar-bar {
position: fixed;
top: 3em;
left: 14em !important; /* Override javascript generated inline style */
right: 16em !important;
z-index: 1;
border: unset;
box-shadow: 0 6px 14px -5px var(--bg-shade-2);
box-shadow: 0 11px 14px -10px var(--bg-shadow-1);
}
.oo-ui-toolbar-bar .oo-ui-toolbar-bar .oo-ui-toolbar-tools {
float: right;
}
.ve-ce-branchNode.ve-ce-documentNode.ve-ce-attachedRootNode.ve-ce-rootNode.mw-content-ltr.mw-parser-output {
background-color: var(--bg-shade-5);
padding: 4px 6px;
margin: 0 2em;
box-shadow: inset 0 0 8px 2px var(--bg-shadow-1);
}
/* Various unidentified oo-ui rules */
.oo-ui-flaggedElement-destructive {
background-color: var(--bg-shade-2);
border: 1px solid var(--bg-shade-1);
color: var(--link-shade-3);
/* padding-left: 15px !important; */
/* padding-right: 15px !important; */
}
.oo-ui-flaggedElement-destructive:hover {
background-color: var(--bg-shade-5);
}
/* Difference view "Visual"/"Wikitext" */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
/* background-color: var(--bg-shade-6); */
/* color: var(--text-shade-1); */
/* border-color: var(--bg-shade-6); */
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
background-color: initial;
}
.oo-ui-buttonElement.oo-ui-labelElement > input.oo-ui-buttonElement-button,
.oo-ui-buttonElement.oo-ui-labelElement > .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
text-shadow: 0 0 0 var(--bg-shade-0) !important; /* Makes text bolder without distinctly visible shadow */
/* text-shadow: unset !important; */
}
.oo-ui-panelLayout-expanded {
background-color: var(--bg-shade-2);
}
.oo-ui-messageDialog-message {
/* color: #999; */
}
.oo-ui-buttonElement-frameless.oo-ui-widget-enabled > .oo-ui-buttonElement-button {
/* color: #999; */
}
.oo-ui-messageDialog-actions-horizontal .oo-ui-actionWidget {
border-right: 1px solid var(--bg-shade-1);
}
.oo-ui-dialog-content > .oo-ui-window-body {
outline: 1px solid var(--bg-shade-1);
}
.oo-ui-messageDialog-content > .oo-ui-window-foot {
outline: 1px solid var(--bg-shade-1);
}
/* Various unidentified rules */
#f-list {
text-align: center;
font-size: 14px;
}
.mw-charinsert-buttons {
border: unset;
}
.postedit-container {
position: absolute;
left: 0;
right: 0;
margin-left: auto;
margin-right: auto;
padding: 0;
padding: 15px 0 15px 15px;
text-align: right;
}
.postedit-icon {
margin: auto;
padding: 0;
}
.color-middle-container {
padding: 0;
}
#iframeframe {
height: 700px;
}
#wpSave {
text-shadow: 2px 2px 2px var(--bg-shade-0) !important;
}
input[type='submit'] {
border: solid 1px var(--bg-shade-1);
background-color: var(--bg-shade-4);
padding: 0.3em 0.6em;
color: var(--link-shade-1);
/* color: var(--text-shade-1); */
}
.mw-ui-button.mw-ui-progressive, .mw-ui-button.mw-ui-progressive:active, .mw-ui-button.mw-ui-progressive.mw-ui-checked, input[type='button'], button {
padding: 0.3em 0.6em;
border: solid 1px var(--bg-shade-1);
background-color: var(--bg-shade-5);
color: var(--text-shade-3);
text-shadow: 0 0 0 var(--bg-shade-0);
}
/* TODO: necessary for input[type='submit'], ? */
.mw-ui-button.mw-ui-progressive, .mw-ui-button.mw-ui-progressive:active, .mw-ui-button.mw-ui-progressive.mw-ui-checked, input[type='button'] {
border: solid 1px var(--bg-shade-1) !important;
text-shadow: 0 0 0 var(--bg-shade-0) !important;
}
#pagehistory li.selected {
background-color: var(--bg-shade-5);
}
.mw-plusminus-neg {
color: #FF0000;
}