Skip to content

Dark Reuters [papo] by papo

Screenshot of Dark Reuters [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

See @description in the Source Code.

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 */...

Reviews

No reviews yet.