See @description in the Source Code.
Dark Reuters [papo] by papo
Details
Authorpapo
LicenseSee @licence in the Source Code.
Categoryreuters
Created
Updated
Size36 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Dark Reuters [papo]
@namespace github.com/paponius/userstyles
@version 1.3.15
@description Updated: 2024-12. [m] 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-headline "Headline" #c3e9ff
@advanced color color-heading "Headings" #678CB1
@advanced color color-link-visited "Visited link color" violet
# up to 24-04: #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: common block ---
@var range p-size-primary-text "Text Primary size" [16, 10, 30, 1, "px"]
@var range p-size-primary-line "Text Primary line height" [24, 12, 35, 1, "px"]
# bug in Firefox, where "break-after" is ignored by Firefox.
# Resulting in the second box, which should have been under the first big box, jumping to a new column, covering over a headline and a picture and being overflowed out of the viewport.
# This fix will restyle the misplaced box to a "right hand side" style. As it's not possible to fix it's location back where it should be.
@advanced dropdown fixFFHomepageColumnBreak "fix Column Break bug on Reuters home page on Firefox with width 1080 to 1400 px." {
f "Fixed" <<<EOT
@media (min-width: 1024px) and (max-width: 1439.9px) {
ul[class*="cluster__stories__"] > li[class*="cluster__column-left__"]:nth-of-type(2) {
margin-right: 0;
--was-margin-right: -17.0418006431vw;
margin-left: 17.0418006431vw;
}
}
@media (min-width: 1024px) and (max-width: 1439.9px) and (min-width: 1244px) {
ul[class*="cluster__stories__"] > li[class*="cluster__column-left__"]:nth-of-type(2) {
margin-right: 0;
--was-margin-right: -212px;
margin-left: 212px;
}
} EOT;
s "Original" <<<EOT EOT;
}
@advanced dropdown prop-BG-ADs "ADs background color" {
e "Shade" <<<EOT background: rgba(0, 0, 0, .3) !important; EOT;
a "Transparent" <<<EOT background: unset !important; EOT;
b "Black" <<<EOT background: 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 Reuters [papo]" Style to fix the annoying head bar and navi bar. https://userstyles.world/style/15409/deannoy-reuters-papo' {
'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 preprocessor header and global variables are common part used in most of my styles. Version: 1.4.3 2024-05
*/
@-moz-document domain("reuters.com") {
/* US first created: 2018-09-18 */
/* class names have 5-characters-long random part, which does change with time */
/* e.g. pre 24-05: .site-header__scroll-container__3xMex .site-header__inner-sticky__1fm3o { */
/* 24-05-08: .site-header__scroll-container__2fO27 .site-header__inner-sticky__T8nxT */
:root {
--p-color-primary: /*[[color-primary]]*/;
--p-color-secondary: /*[[color-secondary]]*/;
--p-color-dark: #6e6e6e;
--p-color-headline: /*[[color-headline]]*/;
--p-color-heading: /*[[color-heading]]*/;
--p-color-deck: #ffdede;
--p-color-lead: #ffdede;
--p-color-breadcrumb: hsl(140, 40%, 75%);
--p-color-byline: #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]]*/;
--p-size-primary-text: /*[[p-size-primary-text]]*/;
--p-size-primary-line: /*[[p-size-primary-line]]*/;
/* Legacy */
--p-color-caption-sec: var(--p-color-heading);
--gl-text-primary: var(--p-color-primary);
--gl-text-sec: var(--p-color-secondary);
--gl-text-caption: var(--p-color-headline);
--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 {
--something: var(--p-background-base);
} */
/*[[fixFFHomepageColumnBreak]]*/
/*
Classes are used by the site just to define a color. Elements which are supposed to be gray have this class added.
Changing here this class globally to --p-color-primary, then changing again those that shouldn't be --p-color-primary using more specific selector.
*/
.text__medium-grey__3A_RT {
color: var(--p-color-secondary);
/* --was-color: #666; */
}
.text__dark-grey__3Ml43 {
color: var(--p-color-primary);
}
/* -- masthead -- */
/* 24-02 site changed, 24-05 random chars changed */
header [class*="site-header__container__"] [class*="site-header__main-bar__"] {
background: unset;
/* --was-background: #fff; */
}
header div[class*="site-header__scroll-container__"] div[class*="site-header__inner__"] {
background: var(--p-background);
}
/* "Reuters" text as svg */
header [class*="site-header__logo__"] path[fill="#404040"]
/* 24-05 the color changed */
, header [class*="site-header__logo__"] path[fill="#212223"]
/* - header on: https://www.reuters.com/lseg/ - */
, header [class*="upsell-page__reuters-logo__"] path[fill="#212223"]
{
/* fill: #af9999; */
fill: white;
}
/* - [m] drop-down menu - */
header[class*="mobile-menu__header__"] path[fill="#212223"] {
fill: white;
}
/* header (must be darker, it's sticky) */
[class*="mobile-menu__header__"] {
background: rgba(0, 0, 0, .5);
/* --was-background: #fff; */
}
/* the rest (parent of header) */
[class*="mobile-menu__overlay__"] {
background: var(--p-background);
/* --was-background: #fff; */
}
/* 24-05 buttons are dark. don't know what styled them before. There was no rulke here, probably something like .text__dark-grey__3Ml43 */
header [class*="nav-bar__nav-button__"] > a
, header [class*="nav-bar__button__"]
, header [class*="nav-bar__button__"]
/* also on popup sub-header */
, header [class*="nav-myview__link__"]
{
color: white;
}
/* icons chevrons */
header [class*="nav-bar__nav-item__"] [class*="nav-bar__arrow__"]
/* icon "My View" */
, header [class*="nav-myview__icon__"]
, header [class*="nav-myview__chevron__"]
{
fill: var(--p-color-primary);
}
/* magnifier logo, next/prev (enabled) button on carousel, possible more */
[class*="button__flat__"] [class*="button__container__"] {
color: white;
}
[class*="button__flat__"]:not([class*="button__disabled__"]):hover [class*="button__container__"] {
color: #fa6400; /* already used originaly on another icon */
}
[class*="button__flat__"][class*="button__disabled__"] [class*="button__container__"] {
color: #424242;
}
[class*="button__flat__"] [class*="button__container__"] path {
fill: currentColor;
}
/* pop-up menu */
[class*="nav-dropdown__container__"] {
background: var(--p-background);
/* --was-background: #fff; */
}
/* pop-up "My View" */
[class*="site-header__button-group__"] [class*="site-header__my-view-dropdown__"] {
background: var(--p-background);
/* --was-background: #fff; */
}
[class*="nav-myview__dropdown__"] {
background: var(--p-background);
/* --was-background: #fff; */
}
/* remove doubled BG addeg in "home page" section below */...