Dark rferl [papo] Radio Free Europe Radio Liberty by papo

/* ==UserStyle==
@name           Dark rferl [papo] Radio Free Europe, Radio Liberty
@namespace      github.com/paponius/userstyles
@version        1.0.3
@description    Updated: 2024-04. Notes and feedback: https://github.com/paponius/userstyles/. Only article pages. Main home page not finished, but readable.
@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
@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 ---


# --- optional common block ---
#advanced dropdown color-BG-ADs "ADs background color" {
  e "Shade" <<<EOT background-color: rgba(0, 0, 0, .3); !important; EOT;
  a "Transparent" <<<EOT background-color: unset !important; EOT;
  b "Black" <<<EOT background-color: 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


==/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.1 2024-04
 */

/* todo: sticky header when scrolling up. in: pg-title pg-title--sticky-share */
@-moz-document domain("rferl.org"), domain("radiosvoboda.org") {
: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]]*/;
}
/* 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 -- */
.burger__label
,.hdr-trigger__ico
,.hdr-20__secondary-item, .hdr-20__secondary-item:visited
{
	color: hsl(200, 47%, 81%);
	/* --was-color: #1a3948; */
}
.hdr-20__category, .hdr-20__category:visited {
	color: var(--p-color-breadcrumb);
/* 	color: hsl(200, 47%, 81%); */
	/* --was-color: #48616d; */
}
.main-logo {
	filter: brightness(250%);
}

.hdr-20__inner {
	background: var(--p-background);
	/* --was-background: #fff; */
	box-shadow: 0 0 10px 1px #000000eb;
	/* --was--webkit-box-shadow: 0 0 20px rgba(0,0,0,0.1),0 -30px 0 #fff; */
	/* --was-box-shadow: 0 0 20px rgba(0,0,0,0.1),0 -30px 0 #fff; */
	border-bottom: 1px solid #fa5420;
	border-bottom-style: dotted;
}
/* only HP */
/* Not perfect, as it's two BG next to each other. A pattern is interrupted.
   Shadow and border from upper is covered with this lower. */
.hdr-20__inner::after {
	background: var(--p-background);
/* 	background: none; */
	/* --was-background: #fff; */
}
/* .hdr-20, .hdr-20--big, */

/* share */
.sticky-share-container {
	background: var(--p-background);
	/* --was-background: #fff; */
	box-shadow: 0 0 10px 1px #000000eb;
	border-bottom: 1px solid #fa5420;
	border-bottom-style: dotted;
}
.sticky-share-container #logo-sticky-share {
	filter: brightness(250%);
}
.sticky-share-container .pg-title {
	color: var(--p-color-headline);
	/* --was-color: #1a3948; */
}

/* - menu - */
.menu-pnl {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
	/* --was-background: #fff; */
 	background-color: rgba(255, 255, 255, .05);
	background-blend-mode: lighten;
/* 	background-blend-mode: color-burn; */
/* 	background-blend-mode: darken; */

}
.main-nav__ctrl:checked ~ .main-nav__item-name--label,
.main-nav__item-name--link,
.main-nav__item-name--link:visited,
.menu-pnl__item-link, .menu-pnl__item-link:visited {
	color: var(--p-color-primary);
	/* --was-color: #1a3948; */
}


/* -- hero section -- */
/* - breadcrumb - */
/* - headline - */
/* alt: .title */
.pg-title {
	color: var(--p-color-headline);
}
/* sometimes there are multiple, for no good reason https://www.rferl.org/a/ukraine-sniper-training-russia-war-ghillie-suits/32899926.html */
.col-title {
--x-xx: 0;
}
.col-title:first-child {
--x-xx: 1;
}
.col-title:first-of-type {
--x-xx: 2;
}
.col-title {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
}
.col-title ~ .col-title,
.col-title > #article-content {
	background: unset;
	box-shadow: unset;
}

/* - deck - dek - */
/* - byline - */
.publishing-details .published .date,
.publishing-details a,
.publishing-details li.links__item {
	color: var(--p-color-byline);
	/* --was-color: #678a9b; */
}
/* visited is left alone on purpose  .publishing-details a:visited */
.publishing-details a:hover {
	color: var(--p-color-byline);
	/* --was-color: #678a9b; */
	filter: contrast(200%);
}

/* - lead - lede - */


/* -- article -- */
/* - heading - */
/* - caption - */
.caption {
	color: var(--p-color-secondary);
	/* --was-color: #48616d; */
	/* --was-padding-top: 9px; */
}
.media-image figcaption {
 	background: rgba(0, 0, 0, .3);
	padding-left: 3px;
	padding-right: 3px;
}


/* - link - */
/* - author box - */
.c-author--hlight {
 	background: rgba(255, 255, 255, .05);
	/* --was-background: #dce4e8; */
}
.media-block__title--author a {
	color: var(--p-color-primary);
	/* --was-color: #233036; */
}
.media-block__title--author a:hover {
	color: var(--p-color-primary);
	/* --was-color: #fa5420; */
}
/* :visited is left out on purpose. To know I already checked the author before. */

/* -- features -- */
/* image placeholder */
.carousel, .thumb16_9, .thumb1_1, .thumb3_4 {
 	background: rgba(0, 0, 0, .3);
	/* --was-background-color: #edeff0; */
	/* --was-background-image: url(../../img/image-placeholder.svg?cb=0); */
}


/* -- more-on -- */
.media-block-wrap {
 	background: rgba(0, 0, 0, .3);
	padding-left: 5px;
	padding-right: 5px;

	padding-bottom: 0;
	margin-bottom: 18px;
	/* --was-padding-bottom: 18px; */
	padding-top: 0;
	margin-top: 9px;
	/* --was-padding-top: 9px; */
}
/* li:has(.media-block) {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
} */

.media-block__title
,.trends-wg__item
,.podcast-wg__title
,.podcast-wg__zone-title
{
	color: var(--p-color-headline);
	/* --was-color: #1a3948; */
}
a:hover .media-block__title
,.trends-wg__item:hover, .trends-wg__item:hover .trends-wg__item-number, .trends-wg__item:hover .trends-wg__item-views
{
	color: var(--p-color-headline);
	filter: contrast(140%);
	/* --was-color: #fb6739; */
}
a:visited .media-block__title
,.trends-wg__item:visited
{
	color: var(--p-color-link-visited);
	/* --was-color: #1a3948; */
}
/* "See also" blocks within ...