See @description in the Source Code.
Dark Economist [papo] by papo
Details
Authorpapo
LicenseSee @license in the Source Code.
Categoryeconomist
Created
Updated
Size8.6 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name Dark Economist [papo]
@namespace github.com/paponius/userstyles
@version 1.0.3
@description Updated: 2024-04. Notes and feedback: https://github.com/paponius/userstyles/
@author Papo
@homepageURL https://github.com/paponius/userstyles/
@supportURL https://github.com/paponius/userstyles/
@license CC BY-NC-SA 4.0
@preprocessor uso
@advanced color color-primary "Text Primary" white
@advanced color color-secondary "Text Secondary" #ccc
@advanced color color-caption "Caption text Primary" #c3e9ff
@advanced color color-caption-sec "Caption text Secondary" #678CB1
@advanced color color-link-visited "Visited link color" #B62EF0
@advanced dropdown background-base "Background" {
dft "Tiles" <<<EOT #000 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGQAAABkAgMAAAANjH3HAAAACVBMVEUaGhohISElJSUh9lebAAAB20lEQVRIx4XWuZXDMAwE0C0SAQtggIIYoAAEU+aKOHhYojTrYP2+QfOW/5QIJOih/q8HwF/pb3EX+UPIveYcQGgEHiu9hI+ihEc5Jz5KBIlRRRaJ1JtoSAl5Hw96hLB1/up1tnIXOck5jZQy+3iU2hAOKSH1JvwxHsp+5TLF5MOl1/MQXsVs1miXc+KDbYydyMeUgpPQreZ7fWidbNhkXNJSeAhc6qHmHD8AYovunYyEACWEbyIhNeB9fRrH3hFi0bGPLuEW7xCNaohw1vAlS805nfsrTspclB/hVdoqusg53eH7FWot+wjYpOViX8KbFFKTwlnzvj65P9H/vD0/hibYBGhPwlPO8TmxRsaxsNnrUmUXpNhirlJMPr6Hqq9k5Xn/8iYQHYIuQsWFC6Z87IOxLxHphSY4SpuiU87xJnJr5axfeRd+lnMExXpEWPpuZ1v7qZdNBOjiHzDREHX5fs5Zz9p6X0vVKbKKchlSl5rv+3p//FJ/PYvoKryI8vs+2G9lzRmnEKkh+BU8yDk515jDj/HAswu7CCz6U/Mxb/PnC9N41ndpU4hUU7JGk/C9PmP/M2xZYdvBW2PObyf1IUiIzoHmHW9yTncliYs9A9tVNppdShfgQaTLMf+j3X723tLeHgAAAABJRU5ErkJggg==) EOT;
rb "Rich black (FOGRA29)" <<<EOT #010B13 EOT;
dc "Dark charcoal" <<<EOT #333 EOT;
cst "Custom" <<<EOT var(--p-background-base-custom, none) EOT;
nbg "None" <<<EOT none EOT;
}
@advanced text background-base-custom "Custom Background" "#000 url(data:image/png;base64,ADD_YOUR_DATA_HERE)"
@advanced dropdown bg-options "Background image type" {
Tiled "Tiled" <<<EOT
background-repeat: repeat !important;
background-size: auto !important;
background-position: left top !important; EOT;
Fit "Fit Window" <<<EOT
background-repeat: no-repeat !important;
background-size: cover !important;
background-position: center top !important; EOT;
}
@advanced dropdown bg-attachment "Background image attachment" {
s "Scroll" <<<EOT EOT;
f "Fixed" <<<EOT fixed EOT;
}
@advanced dropdown background "Text Background" {
dft "Stripes" <<<EOT #000 url(data:image/gif;base64,R0lGODlhBQAFAIAAAB0dHRERESH5BAAAAAAALAAAAAAFAAUAAAIHjAOXtqgXCgA7) EOT;
rb "Rich black (FOGRA29)" <<<EOT #010B13 EOT;
cst "Custom" <<<EOT var(--p-background-custom, none) EOT;
nbg "None" <<<EOT none EOT;
}
@advanced text background-custom "Custom Text Background" "#000 url(data:image/png;base64,ADD_YOUR_DATA_HERE)"
# --- end of common block ---
# --- optional common block ---
#advanced dropdown color-BG-ADs "ADs background color" {
a "Transparent" <<<EOT background-color: unset !important; EOT;
b "Black" <<<EOT background-color: black !important; EOT;
c "as custom text background" <<<EOT background: var(--p-background, none) !important; EOT;
d "Original" <<<EOT EOT;
}
#var select xxx 'Get my "DeAnnoy XXX [papo]" Style to fix the annoying head bar and navi bar. https://userstyles.world/style/XXX/XXX' {
'You need to copy the text on the left with a mouse, right click and choose open in tab. This is not a setting.': 0
}
#var select debug-test "debug" {
0:Normal: "",
"1:debug. It just shows testing elements in yellow. No useful purpose for daily use.": "color: yellow !important; background: violet !important;"
}
==/UserStyle== */
/* Do NOT edit this file.
It will disable updates, instead create another style to override desired rules. Or CSS variables.
I don't use !important where not required to allow that. You need to check injection order in Stylus.
Used background-base and bg-options from: https://github.com/StylishThemes
This preprocesor header and global variables are common part used in most of my styles. Version: 1.3.1 2024-04
*/
@-moz-document domain("economist.com") {
:root {
--p-color-primary: /*[[color-primary]]*/;
--p-color-secondary: /*[[color-secondary]]*/;
--p-color-dark: #6e6e6e;
--p-color-caption: /*[[color-caption]]*/;
--p-color-caption-sec: /*[[color-caption-sec]]*/;
--p-color-sub: #ffdede;
--p-color-by: #C56E6E;
/* --p-color-link: #00ADEE; */
--p-color-link: #82C1FF;
--p-color-link-visited: /*[[color-link-visited]]*/;
--p-color-link-hover: hsl(210, 100%, 85%);
--p-background-base: /*[[background-base]]*/ /*[[bg-attachment]]*/;
--p-background: /*[[background]]*/;
--p-background-base-custom: /*[[background-base-custom]]*/;
--p-background-custom: /*[[background-custom]]*/;
/* Legacy */
--gl-text-primary: var(--p-color-primary);
--gl-text-sec: var(--p-color-secondary);
--gl-text-caption: var(--p-color-caption);
--gl-text-caption-sec: var(--p-color-caption-sec);
--gl-link-visited: var(--p-color-link-visited);
--gl-link-hover: var(--p-color-link-hover);
--gl-background: var(--p-background);
}
/* prefixing with --p- to avoid collisions with site's styles, or another UserCSS. And to easily see them in the Inspector. */
/* using site's variables */
:root {
--header-headline-color: var(--gl-text-caption);
--header-fly-color: var(--gl-text-caption);
--header-rubric-color: var(--gl-text-caption-sec);
--ds-color-london-5: var(--gl-text-primary);
--ds-color-london-10: var(--gl-text-primary);
--ds-color-london-20: var(--gl-text-sec);
--ds-color-london-100: var(--gl-background);
--ds-color-chicago-30: var(--gl-link-hover);
--ds-color-chicago-95: #000; /* link background on :focus */
/* figcap */
--ds-color-london-35: var(--p-color-secondary);
}
/* -- masthead -- */
.ds-menu-disclosure .path-foreground, /* icon - menu */
.ds-navigation-disclosure .path-foreground { /* arrow down next to Search */
fill: var(--gl-text-primary);
}
/* icon - search */
.ds-navigation-disclosure--icon.ds-navigation-disclosure--icon-search::before {
filter: invert(100%);
}
/* -- hero section -- */
/* headline */
/* breadcrumb */
/* -- byline -- */
article time:not(.huhu) {
color: var(--p-color-by);
}
/* -- article -- */
/* -- decription under pic, gallery -- */
/* author box */
/* -- features -- */
/* AD BG */
.adComponent_advert__kPVUI {
background: rgba(0, 0, 0, .3);
/* --was-background: hsla(0,0%,95%,.35); */
}
/* -- more-on -- */
.ds-section-headline,
.ds-section-headline-link {
color: var(--p-color-caption-sec);
/* --was-color: var(--ds-color-london-5); */
}
/* 24-04: first is common for cards */
.eis2tu50,
.css-1b409a9,
.css-wb96fl {
background: var(--p-background);
box-shadow: 0 0 10px 1px #000000eb;
padding-left: 5px;
padding-right: 5px;
}
/* There is a variable with background color for this DIV,
background-color: var(--ds-color-london-100);
but we want to define background, not background-color */
.styled-masthead {
background: var(--gl-background);
}
/* 24-04: <section data-body-id="cp2" class="css-k2wbwk e1jbofm21"> */
article section {
background: var(--p-background);
box-shadow: 0 0 10px 1px #000000eb;
padding-left: 5px;
padding-right: 5px;
}
/* There is a background-color define,\
but 1. it's the same variable as for text, and 2. we want "bckground" */
.ds-footer {
background: var(--gl-background);
}
/* --- a --- */
/* there is no :visited defined on this site */
article section a:visited {
color: var(--gl-link-visited);
}
/* on home page */
section#new-relic-top-stories a:visited {
color: var(--gl-link-visited);
}
/* Modded using variables
.css-1nh4cha a:hover, .css-1nh4cha a:hover {
color: var(--ds-color-chicago-30);
}
.css-1nh4cha a:focus, .css-1nh4cha a:focus {
background-color: var(--ds-color-chicago-95);
}
*/
/* Site's home page
not complete page style, only top news */
/* might not be stable: .css-1mpoj98 */
section#new-relic-top-stories div:has(> ._content)
{
background: var(--gl-background);
/* or mod the global var: background-color: var(--ds-color-los-angeles-95); */
}
:root {
--ds-color-los-angeles-95: var(--gl-background);
}
body {
background: var(--p-background-base);
/*[[bg-options]]*/
}
/* for darker
background-color: rgba(0, 0, 0, .3);
background-blend-mode: darken;
opacity: .5;
filter: invert(1);
filter: contrast(30%);
filter: hue-rotate(243deg);
*/
}