From e0afa3cf33e8db97cfd785068f07650caa22e604 Mon Sep 17 00:00:00 2001 From: Jean-Luc Tibaux Date: Sat, 23 Jul 2022 19:02:34 +0000 Subject: [PATCH 1/3] fix dark theme of Korean 'Main_Page' (#46, #76) --- src/utils.js | 2 +- static/styles_fr.css | 2 +- static/styles_ko.css | 2 +- static/wikipedia_styles_dark_fr.css | 21 +++++++++++++++ static/wikipedia_styles_dark_ko.css | 38 ++++++++++++++++++++++++++++ static/wikipedia_styles_light_fr.css | 4 +-- static/wikipedia_styles_light_ko.css | 6 ++--- 7 files changed, 67 insertions(+), 8 deletions(-) create mode 100644 static/wikipedia_styles_dark_fr.css create mode 100644 static/wikipedia_styles_dark_ko.css diff --git a/src/utils.js b/src/utils.js index f856cdd..ceb255e 100644 --- a/src/utils.js +++ b/src/utils.js @@ -87,7 +87,7 @@ module.exports = function(redis) { } else if(theme === 'dark') { // if the user has chosen the dark theme from the preferences data = data.replace('', ` - `) + `) } else { // default, auto theme data = data.replace('', ``) diff --git a/static/styles_fr.css b/static/styles_fr.css index 8269879..74f31dd 100644 --- a/static/styles_fr.css +++ b/static/styles_fr.css @@ -1,2 +1,2 @@ @import "wikipedia_styles_light_fr.css"; -@import "wikipedia_styles_dark.css" (prefers-color-scheme: dark); +@import "wikipedia_styles_dark_fr.css" (prefers-color-scheme: dark); diff --git a/static/styles_ko.css b/static/styles_ko.css index 2598a6c..49c9e47 100644 --- a/static/styles_ko.css +++ b/static/styles_ko.css @@ -1,2 +1,2 @@ @import "wikipedia_styles_light_ko.css"; -@import "wikipedia_styles_dark.css" (prefers-color-scheme: dark); +@import "wikipedia_styles_dark_ko.css" (prefers-color-scheme: dark); diff --git a/static/wikipedia_styles_dark_fr.css b/static/wikipedia_styles_dark_fr.css new file mode 100644 index 0000000..33252f0 --- /dev/null +++ b/static/wikipedia_styles_dark_fr.css @@ -0,0 +1,21 @@ +@import "wikipedia_styles_dark.css"; + +/* the logo section at the left side at the top of the French page header */ +img.mw-logo-wordmark, img.mw-logo-tagline { + filter: invert(90%); +} + +/* main content of French 'Main_Page' */ +#accueil_2017_en-tete { + background: transparent !important; + border: 1px solid var(--gray-5); +} +#mw-content-text h2 { + background: transparent !important; +} + +div.accueil_2017_cadre { + box-shadow: none; + border: 1px solid var(--gray-5); +} + diff --git a/static/wikipedia_styles_dark_ko.css b/static/wikipedia_styles_dark_ko.css new file mode 100644 index 0000000..e985e89 --- /dev/null +++ b/static/wikipedia_styles_dark_ko.css @@ -0,0 +1,38 @@ +@import "wikipedia_styles_dark.css"; + +/* the logo section at the left side at the top of the Korean page header */ +img.mw-logo-wordmark, img.mw-logo-tagline { + filter: invert(90%); +} + +.mw-ui-icon-wikimedia-logIn::before { + filter:invert(1); +} + +#p-personal .vector-menu-content, +.vector-user-menu-create-account, +.vector-user-menu-login, +.vector-user-menu-anon-editor, +.vector-menu-content-item, .vector-menu-content-item:hover, +.vector-menu-content-list #pt-anontalk, .vector-menu-content-list #pt-anontalk a, .vector-menu-content-list #pt-anontalk a:hover, +.vector-menu-content-list #pt-anoncontribs a { + background-color: var(--black_8)!important; + color: var(--white) !important; +} + + +/* fix white background of boxes on Korean landing page */ +.mw-parser-output .main-top, +.mw-parser-output .main-top-left, +.mw-parser-output .main-top-left p, +.mw-parser-output .main-box { + background: transparent!important; + color: var(--white) !important; +} + +/* svg icons on middle-left 'main-boxes' of Korean landing page + -> svg styling is not possible here -> using css filter +*/ +.main-shortcut-item img { + filter: invert(90%); +} \ No newline at end of file diff --git a/static/wikipedia_styles_light_fr.css b/static/wikipedia_styles_light_fr.css index 0990f1e..753723d 100644 --- a/static/wikipedia_styles_light_fr.css +++ b/static/wikipedia_styles_light_fr.css @@ -2776,9 +2776,9 @@ a.mw-ui-button:focus { } /* END WIKILESS OVERRIDES */ .mw-ui-icon-wikimedia-logIn:before { - background-image: url(/w/load.php?modules=skins.vector.icons&image=logIn&format=rasterized&lang=fr&skin=vector&version=3vgeg); + background-image: 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 log in %3C/title%3E%3Cpath d=%22M1 11v6c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v6h8V5l4.75 5L9 15v-4H1z%22/%3E%3C/svg%3E"); background-image: linear-gradient(transparent, transparent), - url(/w/load.php?modules=skins.vector.icons&image=logIn&format=original&lang=fr&skin=vector&version=3vgeg); + 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 log in %3C/title%3E%3Cpath d=%22M1 11v6c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v6h8V5l4.75 5L9 15v-4H1z%22/%3E%3C/svg%3E"); } .mw-ui-icon-wikimedia-logIn-progressive:before { background-image: url(/w/load.php?modules=skins.vector.icons&image=logIn&variant=progressive&format=rasterized&lang=fr&skin=vector&version=3vgeg); diff --git a/static/wikipedia_styles_light_ko.css b/static/wikipedia_styles_light_ko.css index a580f0b..713303f 100644 --- a/static/wikipedia_styles_light_ko.css +++ b/static/wikipedia_styles_light_ko.css @@ -2776,9 +2776,9 @@ a.mw-ui-button:focus { } /* END WIKILESS OVERRIDES */ .mw-ui-icon-wikimedia-logIn:before { - background-image: url(/w/load.php?modules=skins.vector.icons&image=logIn&format=rasterized&lang=fr&skin=vector&version=3vgeg); + background-image: 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 log in %3C/title%3E%3Cpath d=%22M1 11v6c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v6h8V5l4.75 5L9 15v-4H1z%22/%3E%3C/svg%3E"); background-image: linear-gradient(transparent, transparent), - url(/w/load.php?modules=skins.vector.icons&image=logIn&format=original&lang=fr&skin=vector&version=3vgeg); + 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 log in %3C/title%3E%3Cpath d=%22M1 11v6c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V3c0-1.1-.9-2-2-2H3c-1.1 0-2 .9-2 2v6h8V5l4.75 5L9 15v-4H1z%22/%3E%3C/svg%3E"); } .mw-ui-icon-wikimedia-logIn-progressive:before { background-image: url(/w/load.php?modules=skins.vector.icons&image=logIn&variant=progressive&format=rasterized&lang=fr&skin=vector&version=3vgeg); @@ -5730,4 +5730,4 @@ div.after-portlet-lang:after { } .infobox { float: right; -} +} \ No newline at end of file From 865cf4422f9def6d72219e6db5944a698c7bb6eb Mon Sep 17 00:00:00 2001 From: Jean-Luc Tibaux Date: Sat, 23 Jul 2022 19:06:12 +0000 Subject: [PATCH 2/3] fix of dark theme of top-right dropdown of French 'Main_Page' (#46) --- static/wikipedia_styles_dark_fr.css | 17 +++++++++++++++++ static/wikipedia_styles_dark_ko.css | 2 ++ 2 files changed, 19 insertions(+) diff --git a/static/wikipedia_styles_dark_fr.css b/static/wikipedia_styles_dark_fr.css index 33252f0..85d1b0d 100644 --- a/static/wikipedia_styles_dark_fr.css +++ b/static/wikipedia_styles_dark_fr.css @@ -5,6 +5,23 @@ img.mw-logo-wordmark, img.mw-logo-tagline { filter: invert(90%); } +/* icon in first row of top-right dropdown */ +.mw-ui-icon-wikimedia-logIn::before { + filter:invert(1); +} + +/* overwriting messy styling of top-right dropdown */ +#p-personal .vector-menu-content, +.vector-user-menu-create-account, +.vector-user-menu-login, +.vector-user-menu-anon-editor, +.vector-menu-content-item, .vector-menu-content-item:hover, +.vector-menu-content-list #pt-anontalk, .vector-menu-content-list #pt-anontalk a, .vector-menu-content-list #pt-anontalk a:hover, +.vector-menu-content-list #pt-anoncontribs a { + background-color: var(--black_8)!important; + color: var(--white) !important; +} + /* main content of French 'Main_Page' */ #accueil_2017_en-tete { background: transparent !important; diff --git a/static/wikipedia_styles_dark_ko.css b/static/wikipedia_styles_dark_ko.css index e985e89..b7e6b9c 100644 --- a/static/wikipedia_styles_dark_ko.css +++ b/static/wikipedia_styles_dark_ko.css @@ -5,10 +5,12 @@ img.mw-logo-wordmark, img.mw-logo-tagline { filter: invert(90%); } +/* icon in first row of top-right dropdown */ .mw-ui-icon-wikimedia-logIn::before { filter:invert(1); } +/* overwriting messy styling of top-right dropdown */ #p-personal .vector-menu-content, .vector-user-menu-create-account, .vector-user-menu-login, From 949b180bc2575c44dab52bf4467f2ae479bf15c1 Mon Sep 17 00:00:00 2001 From: Jean-Luc Tibaux Date: Sat, 23 Jul 2022 19:19:08 +0000 Subject: [PATCH 3/3] fix of dark theme of 'content-boxes' on German 'Main_Page' (#46) --- src/utils.js | 2 +- static/styles_de.css | 2 ++ static/wikipedia_styles_dark_de.css | 12 ++++++++++++ static/wikipedia_styles_light_de.css | 2 ++ 4 files changed, 17 insertions(+), 1 deletion(-) create mode 100644 static/styles_de.css create mode 100644 static/wikipedia_styles_dark_de.css create mode 100644 static/wikipedia_styles_light_de.css diff --git a/src/utils.js b/src/utils.js index ceb255e..c118773 100644 --- a/src/utils.js +++ b/src/utils.js @@ -75,7 +75,7 @@ module.exports = function(redis) { // load custom language specific languages let lang_suffix = '' - let load_custom_styles = ['fr', 'ko'] + let load_custom_styles = ['de', 'fr', 'ko'] if(load_custom_styles.includes(lang)) { lang_suffix = '_' + lang diff --git a/static/styles_de.css b/static/styles_de.css new file mode 100644 index 0000000..8737d31 --- /dev/null +++ b/static/styles_de.css @@ -0,0 +1,2 @@ +@import "wikipedia_styles_light.css"; +@import "wikipedia_styles_dark_de.css" (prefers-color-scheme: dark); diff --git a/static/wikipedia_styles_dark_de.css b/static/wikipedia_styles_dark_de.css new file mode 100644 index 0000000..4910319 --- /dev/null +++ b/static/wikipedia_styles_dark_de.css @@ -0,0 +1,12 @@ +@import "wikipedia_styles_dark.css"; + +/* slightly increasing readability of top-left wikipedia logo */ +#p-logo .mw-wiki-logo { + filter: invert(1); +} + +/* big white boxes on German landing page */ +.mw-parser-output .hauptseite-box-content, +.mw-parser-output .hauptseite-preview-wikidata { + background-color: transparent!important; +} diff --git a/static/wikipedia_styles_light_de.css b/static/wikipedia_styles_light_de.css new file mode 100644 index 0000000..34705e3 --- /dev/null +++ b/static/wikipedia_styles_light_de.css @@ -0,0 +1,2 @@ +@import "wikipedia_styles_light.css"; +