Dark Independent.co.uk [papo] by papo

/* ==UserStyle==
@name           Dark Independent.co.uk [papo]
@namespace      github.com/paponius/userstyles
@version        1.0.1
@description    Updated: 2024-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-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 ---

==/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.3.0 24-03 */
@-moz-document domain("independent.co.uk") {
: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]]*/;
}
/* 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 {
	--s-color-ired: #ec1a2e;
}

/* -- masthead -- */

/* #header */
.hlKgoo {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
	/* --was-background: #fff; */
}
/* buttons */
.jfvFoR {
	color: #fff;
	/* --was-color: #222; */
	border-color: #353533;
	/* --was-border-color: #d3d3d3; */
	background: #353533;
	/* --was-background: #fff; */
}
.jfvFoR:active, .jfvFoR:hover {
	color: #222;
	/* --was-color: #fff; */
	border-color: #d3d3d3;
	/* --was-border-color: #353533; */
	background: #fff;
	/* --was-background: #353533; */
}

/* menu above header */
.gkaCiI {
/* --was-border-bottom: 1px solid #d3d3d3; */
/* 	background: var(--p-background); */
/* 	background-blend-mode: lighten; */
	/* --was-background: #f7f7f7; */
	background-color: rgba(255, 255, 255, .1);
}

/* "Log in / register" */
.czfKjN .register-login-link {
	background: unset;
/*   background: #fff; */
	color: var(--p-color-secondary);
	/* --was-color: #222; */
}
.bbgVTS .register-login-link {
	background: unset;
	/* --was-background: 0; */ /* sic. yes "0" */
}
/* the same but on /tv/, different selector 2402 */
[data-component="RegisterLoginButton"] .jmHTHG {
	color: var(--p-color-secondary);
	/* --was-color: rgb(34, 34, 34); */
}
/* on home page 2403 */
[data-component="RegisterLoginButton"] .Uercj {
	color: var(--p-color-secondary);
	/* --was-color: rgb(34, 34, 34); */
}
/* on article page 2403 */
.haslwW .register-login-link {
	/* --was-background: #fff; */
	color: var(--p-color-secondary);
	/* --was-color: #222; */
}

/* menu below header <div class="sc-1od5y3b-0 duZjlm"> */
.duZjlm {
	background-color: rgba(255, 255, 255, .1);
}
/* menu below header, item */
.hrbVjw {
	color: var(--p-color-secondary);
	/* --was-color: #222; */
}
/* the same but on /tv/, different selector */
.gmSfuR {
	color: var(--p-color-secondary);
	/* --was-color: #222; */
}
/* menu below header, item "more" */
.joFOR {
	color: var(--p-color-secondary);
	/* --was-color: #222; */
}
#indytv-link > svg > path:nth-child(1) {
	fill: hsl(40, 6%, 90%);
	/* --was-inline-fill: #222; */
}
/* logo */
#standard-header-main svg.logo-text path {
	fill: hsl(40, 6%, 90%);
	/* --was-inline-hsl-fill: hsl(40, 6%, 10%) !important; */
	/* --was-inline-fill: #1C1B19; */
}
/* logo below masthead on "premium" pages */
 .edDQXa svg path[fill="#000"], .kRyvjl svg path[fill="#000"] {
	fill: hsl(40, 6%, 90%);
}
/* -- search google -- */
#searchBox0 input {
	background-color: black !important;
	/* --was-background-inline: rgb(255, 255, 255) url("https://www.google.com/cse/static/images/1x/en/branding.png") left center no-repeat; */
	color: white;
}
/* box border */
.dVTtsz table.gsc-input {
/* 	border-color: ; */
	/* --was-border: 1px solid #d3d3d3; */
}
.gsc-input-box {
	/* --was-border: 1px solid #bbb; */
	background-color: black;
	/* --was-background: #fff; */
}
/* completion drop-down */
.gsc-completion-container {
	background: black;
/* --was-background: white; */
}
.gsc-completion-selected {
	background: gray;
	/* --was-background: #eee; */
}


/* -- headline -- */
.gGOekI .sc-22qwnu-0, .gGOekI .sc-22qwnu-0 a, .gGOekI .sc-qvufca-2 {
	color: var(--p-color-caption);
	/* --was-color: #fff; */
}
.gGOekI .sc-aeekvc-0 {
	color: var(--p-color-caption-sec);
	/* --was-color: #fff; */
}
/* only on live stream "liveblog" */
.edJUfC .sc-qvufca-2 {
	color: var(--p-color-caption);
	/* --was-color: #222; */
}
.kaMdQa { /* yellow banner */
	color: black;
}
/* there is aready a dark BG, but replace anyway to have the same feel */
/* just BG for h1 */
.gGOekI .sc-qvufca-2 {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
}
.gGOekI .sc-qvufca-0 {
	background-color: rgba(0, 0, 0, .25);
}
.gGOekI .sc-qvufca-0 > * {
	padding-left: 5px;
	padding-right: 5px;
}
.gGOekI .sc-qvufca-1 {
	background: unset;
	/* --was-background: #222; */
}
.gGOekI {
	background: unset;
	/* --was-background: #222; */
}

/* byline */
.eIFlFA {
	color: var(--p-color-by);
	/* --was-color: #ec1a2e; */
}
/* date */
.imBlKQ {
	color: var(--p-color-by);
	/* --was-color: #fff; */
}


/* sometimes the whole block with headline and by and date is white (above css is for case it's black) */
/* headline */
.fXCtYS .sc-qvufca-2 {
	color: var(--p-color-caption);
	/* --was-color: #222; */
}
/* h2 */
.eWgPMU {
	color: var(--p-color-caption-sec);
	/* --was-color: #646464; */
}
.hTLjLh {
/* 	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb; */
	background: unset;
	/* --was-background: #fff; */
}
/* navi "News > World" */
.kKZiDA a {
	color: var(--p-color-caption-sec);
	/* --was-color: #222; */
}
/* byline */
.gtfsVW {
	color: var(--p-color-by);
	/* --was-color: #646464; */
}


/* decription under pic - gallery */
.iRoKjT {
/* --was-padding: 6px 12px; */
	background-color: rgba(0, 0, 0, .25);
/* --was-background: #f7f7f7; */
	color: var(--p-color-secondary);
/* --was-color: #646464; */
}
/* under video */
.isUmEx, .isUmEx p {
	color: var(--p-color-secondary);
	/* --was-color: #646464; */
}
.isUmEx {
	/* --was-padding: 6px 8px; */
	background-color: rgba(0, 0, 0, .25);
	/* --was-background: #f7f7f7; */
}
/* under main video */
.gxDdDO {
	background-color: rgba(0, 0, 0, .25);
	padding: 5px 5px 5px 5px;
	color: var(--p-color-secondary);
	/* --was-padding: 6px 12px 16px; */
}


/* features - inside an article */
/* xxx */

/* newsletter subscribe box */
.dcZIrU {
	color: var(--p-color-secondary);
	/* --was-color: #222; */
}
.iirJrL {
	color: var(--p-color-secondary);
	/* --was-color: #646464; */
}
/* input */
.kwqiUS input, .kwqiUS input ~ label, .kwqiUS select, .kwqiUS select ~ label {
	color: var(--p-color-primary);
	/* --was-color: #222; */
}


/* -- more-on -- */
/* "Most Popular" */
.jYWauS {
	color: var(--p-color-secondary);
	/* --was-color: #222; */
}
/* "Most Popular" / "Popular videos" 2403 */
.dMKpkv {
	color: var(--p-color-caption-sec);
	/* --was-color: #646464; */
}
/* "recommended" */
.bDIhaL {
	color: var(--p-color-caption-sec);
	/* --was-color: #222; */
}
/* <div class="sc-1n1mfdd-1 sc-1n1mfdd-3 erOTRs gsIAoi related"> */
.gsIAoi {
	background-color: rgba(255, 255, 255, .1);
/* 	margin: 20px 0; */
/* 	bo...