Dark Telegraph (applies just to Articles) by papo

/* ==UserStyle==
@name           Dark Telegraph (applies just to Articles for now)
@namespace      github.com/paponius/userstyles
@version        1.0.4
@description    Updated: 2024-02. Notes and feedback: https://github.com/paponius/userstyles/. Only article pages. Main home page is not yet styled.
@license        CC-BY-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 image" {
  dft "Default" <<<EOT 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;
  cst "Custom" <<<EOT var(--p-background-base-custom, none) EOT;
  nbg "None" <<<EOT none EOT;
}
@advanced text background-base-custom "Custom Background" "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" {
  Scroll "Scroll" <<<EOT scroll EOT;
  Fixed "Fixed" <<<EOT fixed EOT;
}
@advanced dropdown background "Background2 for text" {
  dft "Default" <<<EOT url(data:image/gif;base64,R0lGODlhBQAFAIAAAB0dHRERESH5BAAAAAAALAAAAAAFAAUAAAIHjAOXtqgXCgA7) EOT;
  cst "Custom" <<<EOT var(--p-background-custom, none) EOT;
  nbg "None" <<<EOT none EOT;
}
@advanced text background-custom "Custom Background2 for text image" "url(data:image/png;base64,ADD_YOUR_DATA_HERE)"
--- end of common block ---

==/UserStyle== */
/* Used background-base and bg-options from: https://github.com/StylishThemes */
/* This preprocesor header and global variables are common part used in many of my styles. Version: 1.1 24-02 */
@-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/us/politics/20"), url-prefix("https://www.telegraph.co.uk/us/news/20"), url-prefix("https://www.telegraph.co.uk/us/comment/20") {

: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: #000 /*[[background-base]]*/ /*[[bg-attachment]]*/;
	--p-background: #000 /*[[background]]*/;
	--p-background-base-custom: /*[[background-base-custom]]*/;
	--p-background-custom: /*[[background-custom]]*/;
}
/* 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);
}


@media only screen and (min-width: 768px) {
	.advert--header.is-sticky {
		/* --was-background-color: #fff; */
		background-color: unset;
	}
}


/* masthead */
.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; */
}
.e-site-logo__image {
	fill: currentColor;
	/* --was-fill: #333; */
}
.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; */
}
/* 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-site-logo__award {
	color: gray;
	/* --was-color: #7d0000; */
}
/* 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;
}
.e-site-header-button__link {
	color: gray; /* "Log in" */
	/* --was-color: #222; */
	background-color: rgba(0, 0, 0, .17);
	/* --was-background-color: #fff; */
	border-left-color: #333;
	/* --was-border-left: #ddd; */
}


/* -- Article -- */
/* op-ed - called "Comment" on telegraph */
.article-comment::before {
	background-color: hsla(198.3, 78.3%, 9%, 0.3);
	/* --was-background-color: #f9f6f2; */
}
/* headline */
.e-headline {
	color: var(--p-color-caption);
	/* --was-color: #333; */
}
.u-heading-style-normal {
	color: var(--p-color-caption-sec);
	/* --was-color: #333; */
}
.e-standfirst {
	color: var(--p-color-secondary);
	/* --was-color: #494949; */
}


/* byline */
@media only screen {
	.tpl-article__byline-date {
		background-color: rgba(0, 0, 0, .25);
		/* 	background-blend-mode: darken; */
		padding-bottom: 11px;
		margin-top: 11px;
		padding-left: 7px;
		/* --was-padding-top: 0; */
		color: var(--p-color-by);
	}
}
.e-byline {
	color: unset;
	/* --was-color: #222; */
}
.e-byline__job-title, .e-byline__location {
	color: unset;
	/* --was-color: #767676; */
}
.u-meta, .u-meta-small {
	color: unset;
	/* --was-color: #767676; */
}

.article-body-text a {
	color: var(--p-color-link);
	/* --was-color: #333; */
}
.article-body-text a:active, .article-body-text a:focus, .article-body-text a:hover {
	background-color: unset;
	/* --was-background-color: #333; */
	color: var(--p-color-link-hover);
	/* --was-color: #fff; */
}
/* main.container a:visited { */
/* div[data-js="article-body"] */
/* #main-content a:visited { */
.article-body-text a:visited {
	color: var(--p-color-link-visited);
}

/* decription under pic - gallery */
@media only screen and (min-width: 768px) {
	.e-caption.e-caption--has-separator {
		background-color: rgba(0, 0, 0, .25);
		/* --was-background-color: inherit; */
		padding: 6px;
	}
}

/* features - inside an article */
/* social icons */
.e-social-share__icon-foreground {
	fill: #999;
	/* --was-fill: #222; */
}
/* social circles */
.e-social-share__link {
	border-color: #999;
	/* --was-border: 1px solid #222; */
}
/* save icon */
.e-save-article .ribbon--outline {
	fill: #999;
	/* --was-fill: #222; */
}
.e-save-article {
	border-color: #999;
	/* --was-border: 1px solid #222; */
}

/* paywall */
/* gradient */
.martech-paywall__blur::after {
	background: none;
	/* --was-background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.7) 31%, #ffffff 100%); */
}
.martech-paywall {
	background: unset;
	/* --was-background-color: #fff4b0; */
	position: static;
	/* --was-position: sticky; */
}
.martech-paywall__content {
	background-color: rgba(255, 255, 255, .1);
	/* --was-background-color: #fff; */
}
.martech-paywall__footer-text {
	color: var(--p-color-secondary);
	/* --was-color: #494949; */
}
.martech-paywall__link {
	color: var(--p-color-primary);
	/* --was-color: #222; */
}

/* more-on */

.cta .cmp-teaser__content .cmp-teaser__title {
	/* --was-color: #222; */
	color: var(--p-color-caption-sec);
}
.cta .cmp-teaser__content .cmp-teaser__action-container .cta__button, .cta .cmp-teaser__content .cmp-teaser__action-container .cta__link {
	color: var(--p-color-primary);
	/* --was-color: #222; */
}

.article-list .card {
	background-color: rgba(0, 0, 0, .25);
	box-shadow: 0 0 10px 1px #000000eb;
	padding-left: 7px;
	padding-right: 7px;
}
/* more spam */
/* inside shadow-root, not possible to style for now. There is black text, not much visible, can make lighter box, nothing else
.ob-feed-idx-0-11984-83708.FMS_CP_1.ob-grid-layout .ob-rec-text:hover {
	color: #333;
	--was-color: black;
}
.ob-feed-idx-0-11984-83708.FMS_CP_1.ob-grid-layout .ob-rec-text {
	color: var(--p-color-secondary) !important;
	--was-color: black;
}
 */
.ob-smartfeed-wrapper .OUTBRAIN {
	background-color: rgba(255, 255, 255, .08);
}

/* comments */
.comment__policy {
	color: var(--p-color-dark);
	/* --was-color: #494949; */
}
/* color: general, used by e.g. "show more replies" */
.viafoura .vf3-comments[data-v-e7f40b20] {
--background-color: var( --default-color, #ffffff );
--light-text-on-background-color: var( --light-text-on-default-color, rgba(0, 0, 0, 0.6) );
--dark-text-on-background-color: var( --dark-text-on-default-color, #000000 );
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
	/* --was-background-color: #fff; */
	/* --was-background-color: va...