Dark Lifewire [papo] by papo

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


# --- optional common block ---
#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 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 domain("lifewire.com") {
: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);
	--p-color-by: var(--p-color-byline);
}
/* 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 --- */
.header {
	border-bottom: .1875rem solid #fff500;
	box-shadow: .25rem .25rem .25rem rgba(0,0,0,.1);

	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
	/* --was-background: #fff; */
}
.header-nav__list-item > a {
	color: var(--p-color-secondary);
	/* --was-color: #222; */
}
.header-nav-spotlight__link {
	color: var(--p-color-secondary);
}
.header .icon-logo use {
	fill: var(--p-color-secondary);
	/* --was-fill: #000; */
}
/* Search icon. the SVG on site is in a closed shadow-root (can't be styled). And it's of black color.
   This will completely hide all svg versions; big, small, hover. The original hover SVG from site is exported and converted to base64.
   Hover is red, so in non-hover state filter will remove color and add brightness.
   The result is the icon inverted, so it can be used on dark background. It's also on a purpose a bit bigger.
 */
.search-icon .icon,
.general-search .search-icon:hover .icon-search-hover {
	display: none;
}
.search-icon::after {
	content: '';
	display: block;
	width: 26px;
	height: 30px;
	background-image: url("data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjMgMjYiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGNpcmNsZSBjeD0iOC41NiIgY3k9IjkuNDc2IiByPSI3LjU2IiBzdHJva2U9IiNERTM2MDAiIHN0cm9rZS13aWR0aD0iMiI+PC9jaXJjbGU+PHBhdGggZmlsbD0iI0RFMzYwMCIgZD0iTTE0LjE4NzQgMTYuMzM5MUwxNC45MjI4IDE2LjQ4NjJDMTQuOTcyIDE2LjI0MDMgMTQuODk1IDE1Ljk4NjEgMTQuNzE3NyAxNS44MDg3TDE0LjE4NzQgMTYuMzM5MVpNMTMuNzc1MyAxOC4zOTk2TDEzLjAzOTkgMTguMjUyNUMxMi45OTQ0IDE4LjQ3OTkgMTMuMDU2NyAxOC43MTU1IDEzLjIwODUgMTguODkwOEwxMy43NzUzIDE4LjM5OTZaTTE5LjEzMjYgMjQuNTgxMUwxOC41NjU4IDI1LjA3MjNDMTguODM2MSAyNS4zODQxIDE5LjMwNzQgMjUuNDE5IDE5LjYyMDcgMjUuMTUwNUwxOS4xMzI2IDI0LjU4MTFaTTIyLjAxNzMgMjIuMTA4NUwyMi41MDU0IDIyLjY3NzlDMjIuNjU2NCAyMi41NDg1IDIyLjc0OTggMjIuMzY0MyAyMi43NjUxIDIyLjE2NkMyMi43ODA0IDIxLjk2NzcgMjIuNzE2MiAyMS43NzE0IDIyLjU4NjcgMjEuNjIwNEwyMi4wMTczIDIyLjEwODVaTTE3LjY0MTUgMTUuODUxQzE3LjM3MiAxNS41MzY1IDE2Ljg5ODUgMTUuNTAwMSAxNi41ODQgMTUuNzY5NkMxNi4yNjk1IDE2LjAzOTIgMTYuMjMzMSAxNi41MTI3IDE2LjUwMjcgMTYuODI3MkwxNy42NDE1IDE1Ljg1MVpNMTIuMDA4NyAxNS4yMjFMMTMuNjU3MSAxNi44Njk0TDE0LjcxNzcgMTUuODA4N0wxMy4wNjkzIDE0LjE2MDNMMTIuMDA4NyAxNS4yMjFaTTEzLjQ1MiAxNi4xOTJMMTMuMDM5OSAxOC4yNTI1TDE0LjUxMDcgMTguNTQ2N0wxNC45MjI4IDE2LjQ4NjJMMTMuNDUyIDE2LjE5MlpNMTMuMjA4NSAxOC44OTA4TDE4LjU2NTggMjUuMDcyM0wxOS42OTk0IDI0LjA4OTlMMTQuMzQyMSAxNy45MDg0TDEzLjIwODUgMTguODkwOFpNMTkuNjIwNyAyNS4xNTA1TDIyLjUwNTQgMjIuNjc3OUwyMS41MjkyIDIxLjUzOUwxOC42NDQ1IDI0LjAxMTZMMTkuNjIwNyAyNS4xNTA1Wk0yMi41ODY3IDIxLjYyMDRMMTcuNjQxNSAxNS44NTFMMTYuNTAyNyAxNi44MjcyTDIxLjQ0NzkgMjIuNTk2NkwyMi41ODY3IDIxLjYyMDRaIj48L3BhdGg+PC9zdmc+");
}
/* .general-search .search-icon::after:hover, */
.general-search .search-icon:hover {
	filter: unset;
/* 	background-color: #de36004f; */
/* 	background-blend-mode: color-burn; */
}
.general-search .search-icon {
	background: unset;
	/* --was-background: 0 0; */
	filter: saturate(0) brightness(250%);
}
.header .general-search {
	background: unset;
	/* --was-background: #fff; */
}

/* --- hero section --- */

/* -- breadcrumb -- */
.article-left-rail .breadcrumbs-list .breadcrumbs-list-title a {
	color: var(--p-color-link);
	/* --was-color: #000; */
}
.breadcrumbs-list-link {
	color: var(--p-color-link);
	/* --was-color: #000; */
}


/* -- headline -- */
.article-heading {
	color: var(--p-color-headline);
}


/* -- deck - dek -- */
/* h2 */
.article-subheading {
	color: var(--p-color-deck);
	/* --was-color: #677075; */
}


/* -- lead - lede - perex -- */
/* -- byline -- */
.mntl-dynamic-tooltip--trigger > .mntl-attribution__item-name, a.mntl-attribution__item-name {
	color: var(--p-color-by);
	/* --was-color: #000; */
}
.article-meta {
	color: var(--p-color-by);
}



/* --- article --- */
/* -- heading -- */
.article-content .mntl-sc-block-heading {
	color: var(--p-color-heading);
	/* --was-color: #000; */
}

/* -- caption -- */
/* -- link -- */
.article-content .mntl-sc-block-image a, .article-content a {
	color: var(--p-color-link);
	/* --was-color: #501445; */
}
.article-content .mntl-sc-block-image a:hover, .article-content a:hover {
	color: var(--p-color-link-hover);
}
.article-content .mntl-sc-block-image a:visited, .article-content a:visited {
	color: var(--p-color-link-visited);
}


/* -- author box -- */



/* --- features --- */
/* red frame (border). Will not show when a BG is set above it. why there was -1 z index? */
/* .mntl-sc-block-...