Dark Telegraph [papo] by papo

/* ==UserStyle==
@name           Dark Telegraph [papo]
@namespace      github.com/paponius/userstyles
@version        1.3.7
@description    Updated: 2025-03 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)"
@var range    p-size-primary-text  "Text Primary size"         [18, 10, 30, 1, "px"]
@var range    p-size-primary-line  "Text Primary line height"  [26, 12, 35, 1, "px"]
# --- END: common block ---
@var range    p-size-primary-text  "Text Primary size"         [17, 10, 30, 1, "px"]



@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;
}

# --- optional common block ---
#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;"
}

#var color color-section "Section/Series" #C70000

# --- END: optional common block ---


==/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 url-prefix("https://www.telegraph.co.uk/world-news/20"), url-prefix("https://www.telegraph.co.uk/news/20"), url-prefix("https://www.telegraph.co.uk/politics/20"), url-prefix("https://www.telegraph.co.uk/us/politics/20"), url-prefix("https://www.telegraph.co.uk/us/news/20"), url-prefix("https://www.telegraph.co.uk/us/comment/20")
,domain("telegraph.co.uk")

/* sub main page */
/* https://www.telegraph.co.uk/news/0/us-presidential-election-2024-when-dates-candidates-voting/ */
{

: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: var(--p-color-headline);
	--p-color-caption-sec: var(--p-color-heading);
}
/* 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);
} */




/* - header 4th - */
.x-scroll::after {
	background: linear-gradient(270deg, black 0%, transparent 100%);
	/* --was-background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0) 100%); */
}

/* --- masthead --- */
/* -- header 1st, <1024px 1st & 2nd, HP: 1st & 2nd -- */
.site-header__primary-wrapper {
	/* darker color, as taken from 2nd site header #072a3a; */
	background-color: hsl(199, 78%, 9%);
/* 	background-color: #072a3a; */
/* 	background: var(--p-background); */
	/* --was-background-color: #fff; */
	/* --was-border-top-color: #ddd; */
}
/* logo */
.e-site-logo__image {
	fill: currentColor;
	/* --was-fill: #333; */
}
.e-site-logo__award {
	color: gray;
	/* --was-color: #7d0000; */
}

/* - widgets sometimes on the first header - */
.e-utility__link
, .e-utility__link:hover {
	color: hsl(199, 78%, 50%);
/* --was-color: #072a3a; */
}
.e-utility__description {
	color: #ccc;
	/* --was-color: #767676; */
}

/* - */
/* fix. orig wanted to save space, made hamburger right padding smaller than other buttons, as it's far right and orig BG white,
   padding of the whole button bar was compensatin for mis-centered hamburger. but with non-wihte BG it matters */
/* -8px */
.site-header__primary-content .site-header__buttons {
	padding-right: 0;
	/* --was-padding-right: 8px; */
	@media only screen and (min-width: 768px) {
		padding-right: 8px;
		/* --was-padding-right: 16px; */
	}
	@media only screen and (min-width: 1024px) {
		padding-right: 0;
		/* --was-padding-right: 0; */
	}
}
.e-site-header-button--menu .e-site-header-button__link {
	border-right: 1px solid;
/*   padding-left: 16px; */
	padding-right: 16px;
	/* --was-padding-right: 8px; */
	@media only screen and (min-width: 1440px) {
		/* padding-left: 24px; */
		padding-right: 24px;
	}
}
/* - */

/* - header menu, on 1st header, as 2nd header: <1024px, HP - */
/* .site-header__primary-navigation-wrapper */
/* why are these here, they are not visible in original */
.site-header__primary-navigation-wrapper::after, .site-header__primary-navigation-wrapper::before {
	background: linear-gradient(90deg,rgba(255,255,255,0),hsl(199, 78%, 9%) 80%);
	/* --was-background: linear-gradient(90deg,#fff,rgba(255,255,255,0)); */
	/* --was-background: linear-gradient(90deg,rgba(255,255,255,0),#fff 80%); */
}
.e-navigation-primary-item__link {
	color:white;
	/* --was-color: #222; */
}
.e-navigation-primary-item__link:active, .e-navigation-primary-item__link:focus, .e-navigation-primary-item__link:hover {
	/* 	from original "a:hover" */
	color: #04777b;
	/* --was-color: #222; */
}


/* - button bar (on 1st header, on HP on 2nd header) - right buttons - */
.e-site-header-button__icon {
	fill: gray;
	/* --was-fill: #222; */
}
/* menu - three lines */
.e-site-header-button--menu .e-site-header-button__icon {
	border-top-color: gray;
	border-bottom-color: gray;
	/* --was-border-bottom: 2px solid #222; */
	/* --was-border-top: 2px solid #222; */
}
.e-site-header-button--menu .e-site-header-button__icon::after {
	border-top-color: gray;
}
/* "Log in", hamburger - menu icon, search icon. but in orig also "Close menu", so adding .e-site-header-button--8 classname */
.e-site-header-button--search .e-site-header-button__link
, .e-site-header-button--sign-in .e-site-header-button__link
, .e-site-header-button--menu .e-site-header-button__link
{
	color: #aaa;
	/* --was-color: #222; */
	background-color: rgba(0, 0, 0, .17);
	/* --was-background-color: #fff; */
	border-color: #333;
	/* --was-border-left: #ddd; */
}
.e-site-header-button--sign-in .e-site-header-button__link:hover {
	color: #04777b;
	/* --was-color: #072a3a; */
}

/* - country selector, only HP - US/UK edition - */
.e-site-header-country-selector__name {
	color: #ccc;
	/* --was-color: #222; */
}
.e-site-header-country-selector__link {
	color: #ccc;
	/* --was-color: #222; */
}
.e-site-header-country-selector__link:hover {
	color: white;
	/* --was-color: #222; */
}
/* does...