Last active
January 25, 2023 23:52
-
-
Save Eklei/5fa02e0e2ec942baaad23292cb55e8f3 to your computer and use it in GitHub Desktop.
Deuglifies the new Wikipedia theme by fixing the colors (which are mostly blinding white by default)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* ==UserStyle== | |
| @name Wikipedia - The Goggles Do Nothing | |
| @version 2023.01.25 | |
| @description Deuglifies the new Wikipedia theme by fixing the colors (which are mostly blinding white by default) | |
| @namespace https://github.com/Eklei | |
| @author Eklei | |
| ==/UserStyle== */ | |
| @-moz-document domain("wikipedia.org") { | |
| :root { | |
| --cont-pad-x: 2.0em; | |
| --cont-pad-y: 0.5em; | |
| --cont-neg-x: calc(0px - var(--cont-pad-x)); | |
| --cont-neg-y: calc(0px - var(--cont-pad-y)); | |
| --font-color: #111; /*default #202122*/ | |
| --bgcolor-infobox: #F8F9FA; | |
| --bgcolor-light: #FBFBFB; | |
| --bgcolor-dark: #F0F0F0; | |
| --shadow-color: #00000011; | |
| --shadow-top: 0 0 55px 55px var(--shadow-color); | |
| --shadow-fore: 0 0 33px var(--shadow-color); | |
| } | |
| @media screen { | |
| .mw-page-container { | |
| background: transparent !important; | |
| } | |
| body, | |
| .mw-content-container { | |
| background: var(--bgcolor-light) !important; | |
| color: var(--font-color) !important; | |
| } | |
| .vector-menu-dropdown > .vector-menu-content, | |
| .vector-main-menu, .vector-toc { | |
| background: var(--bgcolor-infobox) !important; | |
| box-shadow: var(--shadow-fore) !important; | |
| } | |
| .vector-search-box-input { | |
| background: #FFF !important; | |
| } | |
| #mw-panel-toc { | |
| contain: none !important; | |
| } /*why...? this nonsense property set to 'paint' broke drop shadows for no reason*/ | |
| .vector-toc { | |
| margin-left: -1px; | |
| } /*fix new inaccuracy introduced on Jan-24 that's invisible when everything is white*/ | |
| } | |
| @media screen and (min-width: 1000px) { | |
| html body { | |
| background: var(--bgcolor-dark) !important; | |
| } | |
| html body::before { | |
| content: ''; display: block; position: absolute; z-index: -1; | |
| top: 0px; left: 0; right: 0; height: 0; | |
| box-shadow: var(--shadow-top) !important; | |
| } | |
| html .mw-content-container { | |
| position: relative !important; | |
| } | |
| html .mw-content-container::after { | |
| content: ''; position: absolute; z-index: -1; | |
| top: var(--cont-neg-y); right: var(--cont-neg-x); bottom: 0; left: var(--cont-neg-x); | |
| background: var(--bgcolor-light); box-shadow: var(--shadow-fore); | |
| } /*add shadow-casting padding without changing the position or size of the container*/ | |
| html .vector-toc-pinned #vector-toc-pinned-container { | |
| margin-top: 1.5em !important; | |
| padding-top: 1.5em !important; | |
| } | |
| html .vector-toc-pinned #vector-toc-pinned-container .vector-toc::after { | |
| background: linear-gradient(transparent,var(--bgcolor-infobox)) !important; | |
| background-repeat: no-repeat !important; | |
| background-position: -17px !important; | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
See fork here for easy Stylus install. Gists apparently don't have pull requests, but you can just make a new revision I guess.
https://gist.github.com/ggppjj/18fb137d8f16b4cacfa4250b6882d5dd