Dark DailyMail [papo] by papo

/* ==UserStyle==
@name           Dark DailyMail [papo]
@namespace      github.com/paponius/userstyles
@version        1.0.5
@description    Updated: 2024-03. Notes and feedback: https://github.com/paponius/userstyles/. Also check my "Deannoy DailyMail [papo]" Style, which allows you to remove annoying elements from the site.
@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("dailymail.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]]*/;

	/* Legacy */
	--gl-text-primary: var(--p-color-primary);
	--gl-text-sec: var(--p-color-secondary);
    --gl-text-dark: var(--p-color-dark);
	--gl-text-caption: var(--p-color-caption);
    --gl-text-by: var(--p-color-by);
    --gl-link-visited: var(--p-color-link-visited);
    --gl-link-hover: var(--p-color-link-hover);
	--gl-background-base: var(--p-background-base);
	--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);
}


/* -- masthead -- */

/* logo */
/* Using: just .masthead {
   Inverting both logo and topic pictures in masthead, e.g. "MailOnline" and "News", or "health", ...
   would create some interesting graphics
   ghostly showbiz people: https://www.dailymail.co.uk/tvshowbiz/index.html
   Healthy violet leaves: https://www.dailymail.co.uk/health/index.html

   Only pictures on pages under "News" topic needs inverting ("News", "Site's most read",...),
   as they're not readable and are ugly on black background.
   But using: .masthead img#logo, .news .masthead {
   to only invert topic pic on .news .masthead, would also invert .masthead img#logo AGAIN. It's inverted twice back to original.
   That's why we need two mutually exclusive selectors, for .news, and :not(.news).
 */
:not(.news) > .masthead img#logo, .news .masthead {
	filter: invert(1);
	/* filter: contrast(30%); */
	/* filter: hue-rotate(243deg); */
}
.page-header > .news {
	background: var(--gl-background);
}


/* -- headline -- */
.article-text > h1
/* Article where Caption is below a video. The background-color is defined on three divs below in original. */
, [data-video-hero] .desktopApp--DmjwV, [data-video-hero] .videoLayout--Az7TN, .vjs-video-container, [data-video-hero] .footer--p5cdn
, div[itemprop="articleBody"]
, .article /* Only on Home and main pages */
, .video-lead-info /* on https://www.dailymail.co.uk/video/ */
{
	background: var(--gl-background);
	box-shadow: 0 0 10px 1px #000000eb;
}

.article-text h1
, [data-video-hero] .footer--p5cdn h1 /* more specific selector, to override original */
, [data-video-hero] div[class^="footer--"] h1 /* in case the classname will change */
{
	color: var(--gl-text-caption);
}

/* breadcrumb */


/* -- byline -- */
.article-text .byline-fancy a, .article-text .byline-plain a {
    color: var(--gl-text-by);
	/* --was-color: #004db3; */
}
.article-text .byline-fancy, .article-text .byline-plain { /* byline "By" word */
    color: var(--gl-text-by);
}
.article-text .byline-section { /* published date */
	/* --was-color: #666; */
    color: var(--gl-text-dark);
}

/* but this would apply to e.g. authors too */
.article-text :not(.byline-fancy):not(.byline-plain) > a:visited
, .article a:visited /* on main pages */
{
    color: var(--gl-link-visited);
}


/* == main article == */
/* -- article -- */
/* -- decription under pic, gallery -- */
/* author box */



/* -- features -- */
.mol-factbox[data-version="2"].femail {
	/* --was-background-color: #fbf6fa; */
/* 	background-color: hsl(312, 38%, 97%); */
	background-color: hsl(312, 38%, 3%);
}


/* -- more-on -- */


/* navi */
#page-container .page-header .nav-primary,
#page-container > #content > .footer .nav-primary,
#page-container > .footer .nav-primary,
#top > #content > .footer .nav-primary,
#top > .footer .nav-primary {
    background: black;
}
.gr6ox, .link-gr6ox a, .linkro-gr6ox a:hover {
	/* --was-color: #333; */
	color: var(--gl-text-dark);
}
/* temperature values were black */
.page-header .weather a {
    /* --was-color: #000; */
	color: unset;
}
/* top left: "Privacy Policy" and "Feedback" */
.page-header .supplements a {
	color: var(--gl-text-dark);
	/* --was-color: #000; */
}
/* divider line */
.page-footer a, .page-header .supplements a {
	border-right: 1px solid #787878;
}

/* round corners on selected section */
/* change sprite sheet icon */
.tr {
	background-position: -250px 0;
	/* --was-background-position: -10px 0; */
}
.tl {
	background-position: -240px 0;
	/* --was-background-position: 0 0; */
}
/* 2402: not used now */
.cnr5 .tl {
    /* --was-background-position: -20px 0; */
	background-position: -260px 0;
}
.cnr5 .tr {
    /* --was-background-position: -27px 0; */
	background-position: -267px 0;
}

/* side bar with naked people */
.bogr2, .link-bogr2 a, .linkro-bogr2 a:hover {
	color: var(--gl-text-sec);
	background: var(--gl-background);
	/* --was-color: #000; */
	/* --was-background-color: #e3e3e3; */
}
.puff a strong {
	color: var(--gl-text-sec);
	/* --was-color: #004db3; */
}

#content h3.social-links-title {
	color: var(--gl-text-dark);
	/* --was-color: #000; */
}
#reader-comments .rc-header h3 { /* word "Comments" */
	color: var(--gl-text-dark);
	/* --was-color: #000; */
}
/* top share bar */
#floating-share-bar-container {
	background: var(--gl-background-base);
	/* --was-background-color: #fff; */
}
/* read more */
.mol-factbox[data-version="2"].news {
	background: var(--gl-background-base);
	/* --was-background-color: #f1f8fa; */
}
.mol-factbox[data-version="2"].news h3 a {
	color: var(--gl-text-sec);
}
/* caption in article */
.mol-factbox[data-version="2"] .mol-factbox-title {
/* 	background: var(--gl-background); */
/* 	box-shadow: 0 0 10px 1px #000000eb; */
	background-color: rgba(0, 0, 0, .3);
/* 	background-blend-mode: darken; */
	/* --was-background-color: transparent; */
}
/* "Factbox" */
.mol-desktop .mol-factbox[data-version="2"] .mol-style-bold:not([class*="ccox"]) {
	color: var(--gl-text-primary);
	/* --was-color: #000; */
}
.mol-desktop .mol-factbox[data-version="2"] .mol-factbox-body {
	color: var(--gl-text-sec);
	/* --was-color: #666; */
}
.mol-factbox[data-version="2"].health {
	background: var(--gl-background);
	box-shadow: 0 0 10px 1px #000000eb;
	/* --was-background-color: #f7fdef; */
}

/* AD box */
.watermark, .billboard-watermark {
	background: var(--gl-background);
	box-shadow: 0 0 10px 1px #000000eb;
	/* --was-background-color: #f2f2f2; */
}
.molads_billboard_on #content .billboard-container.watermark .billboard {
	background: var(--gl-background);
	box-shadow: 0 0 10px...