Dark Forbes [papo] by papo

/* ==UserStyle==
@name           Dark Forbes [papo]
@namespace      github.com/paponius/userstyles
@version        1.0.1
@description    Updated: 2024-02. Notes and feedback: https://github.com/paponius/userstyles/
@author         Papo
@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 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.2 24-02 */

@-moz-document domain("forbes.com") {
: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. */
:root {
	--p-color-border: gray;
	--p-color-BG-gray: #333;
/* 	--p-color-BG-selector: gray; */
}

/* using site's variables */
:root {
	--something: var(--p-background-base);
}

/* masthead */
/* breaking (home page) */
.happening-now {
	background-color: rgba(0, 0, 0, .3);
	/* --was-background-color: #fff; */
}
.happening__title {
	color: var(--p-color-secondary);
	/* --was-color: #333; */
}
.happening__date {
	color: var(--p-color-by);
	/* --was-color: #737373; */
}
.channel--editors-picks .channel__header {
/* 	color: var(--p-color-primary); */
	/* --was-color: #737373; */
}
/* gradient overflow */
.happening-now__carousel .fbs-slider__slides-wrapper::after {
	background: transparent;
	/* --was-background: linear-gradient(90deg,#fff0,#fff); */
}

/* - headline - */
/* caption */
.fs-headline {
	color: var(--p-color-caption);
	/* --was-color: #333; */
	background-color: rgba(0, 0, 0, .3);
	padding-left: 4px;
	padding-right: 4px;
}
.contrib-container {
	background-color: rgba(0, 0, 0, .3);
	padding-left: 4px;
	padding-right: 4px;
}
.article-wrapper .fs-headline.fs-headline__standard {
	margin-top: 0;
	/* --was-margin: 8px 0 0; */
	padding-top: 8px;
}

/* breadcrumb */
.y-rKzEDT {
	color: var(--p-color-caption-sec);
	/* --was-color: #737373; */
}
/* breadcrumb (home page) */
.edition-dropdown__button {
	color: var(--p-color-caption-sec);
	/* --was-color: #737373; */
}
/* "BREAKING" */
.dot, .normal-badge {
	color: var(--p-color-caption-sec);
	/* --was-color: #737373; */
}
.top-label-wrapper .normal-badge:hover {
	color: var(--p-color-link-hover);
	/* --was-color: #242424; */
}

/* byline */
.contrib-byline .contrib-link--name {
	color: var(--p-color-by);
	/* --was-color: #333; */
}
.contrib-byline .not-premium-contrib-link--name:hover {
	color: var(--p-color-link-hover);
	/* --was-color: #242424; */
}
.contrib-byline-type {
	color: var(--p-color-by);
	/* --was-color: #737373; */
}
.fs-author-name svg.fs-icon--info > path[fill="#010101"] {
	fill: var(--p-color-by);
}
.short-bio {
/* 	color: var(--p-color-dark); */
	/* --was-color: #737373; */
}
.metrics-channel {
	color: var(--p-color-by);
	/* --was-color: #737373; */
}
.topline-updated-timestamp {
	color: var(--p-color-by);
	/* --was-color: #737373; */
}
/* on (home page) */
.data-viz__timestamp {
	color: var(--p-color-by);
	/* --was-color: #737373; */
}
/* on (home page) */
.byline__author-name, .byline__publication {
	color: var(--p-color-by);
	/* --was-color: #333; */
}
.byline__author-type {
	color: var(--p-color-by);
	/* --was-color: #737373; */
}
/* "By" (home page) */
.byline__by {
	color: var(--p-color-by);
}
/* author box */
.bottom-contrib-block .author-name {
	color: var(--p-color-by);
	/* --was-color: #333; */
}
.bottom-contrib-block {
	background-color: rgba(0, 0, 0, .3);
	border: 1px solid var(--p-color-border);
	padding-left: 4px;
	padding-right: 4px;
	margin-top: 10px;
}

/* - article - */
.fs-article a {
	color: var(--p-color-link);
	/* --was-color: #003891; */
}
.fs-article a:visited {
	color: var(--p-color-link-visited);
}
.recirc-link h3.recirc-headline {
	color: var(--p-color-caption-sec);
	/* --was-color: #333; */
}
.fs-article:not(.fs-premium) h2 {
	color: var(--p-color-caption-sec);
	/* --was-color: #333; */
}
/* on home page */
.card__description {
	color: var(--p-color-primary);
	/* --was-color: #333; */
}
/* on home page */
.featured__slide-link--title {
	color: var(--p-color-caption-sec);
	/* --was-color: #333; */
}
.channel__header {
	color: var(--p-color-caption-sec);
	/* --was-color: #333; */
}

/* decription under pic - gallery */
.fs-article .image-embed figcaption, .fs-article .wp-caption figcaption {
	color: var(--p-color-secondary);
	/* --was-color: #737373; */
	background-color: rgba(0, 0, 0, .3);
	margin-top: 0;
	/* --was-margin-top: .5em; */
}

/* features - inside an article */
.save-article-wrapper {
	background-color: var(--p-color-BG-gray);
	/* --was-background-color: #fcfcfc; */
}
.open-web_anchor--desktop {
	background-color: var(--p-color-BG-gray);
	/* --was-background-color: #fcfcfc; */
}

/* more-on */
/* "more from" */
.recirc-module-title {
	color: var(--p-color-caption-sec);
	/* --was-color: #333; */
}
.recirc-link h3.recirc-headline-no-margin {
	color: var(--p-color-caption-sec);
	/* --was-color: #333; */
}
.recirc-module {
	background-color: rgba(0, 0, 0, .3);
}
/* "more from forbes" */
.fs-article .link-embed {
	color: var(--p-color-caption-sec);
	/* --was-color: #333; */
}
/* "Latest" (home page) */
.pop-picks__nav-btn--active {
	color: var(--p-color-caption-sec);
	/* --was-color: #333; */
}

/* footer */
footer {
	color: var(--p-color-secondary);
	/* --was-color: #181716; */
	background-color: rgba(0, 0, 0, .3);
	/* --was-background: #f0f0f0; */
}
.fs-icon--forbes-logo {
	fill: var(--p-color-secondary);
}
.footer__nav {
	border-bottom-color: var(--p-color-secondary);
	/* --was-border-bottom: 2px solid #181716; */
}

body, html {
	color: var(--p-color-primary);
	/* --was-color: #333; */
}
/* exclusive? premium? */
.content_65d8c850ec42ac1d3c4812af .color-body {
/* .color-body { */
	color: var(--p-color-primary);
	/* --was-color: #333333; */
}
/* first letter */
.content_65d8c850ec42ac1d3c4812af .color-accent {
	color: var(--p-color-secondary);
	/* --was-color: #181716; */
}
.content_65d8c850ec42ac1d3c4812af .subhead-embed.color-accent, .content_65d8c850ec42ac1d3c4812af .subhead-embed .color-accent {
	color: var(--p-color-secondary);
	/* --was-color: #181716; */
}
.content_65d8c850ec42ac1d3c4812af .subhead4-embed.color-body, .content_65d8c850ec42ac1d3c4812af .subhead4-embed .color-body {
	color: var(--p-color-secondary);
	/* --was-color: #181716; */
}
.content_65d8c850ec42ac1d3c4812af .metrics-text {
	color: var(--p-color-by);
}

.xxxDISABLEDxxx-content_65d8c850ec42ac1d3c4812af .bg-base {
	background: var(--p-background-base);
	/* --was-background-color: #ffffff; */
	/*[[bg-options]]*/
}

.content_65d8c850ec42ac1d3c4812af .quote-embed.color-base, .content_65d8c850ec42ac1d3c4812af .quote-embed .color-base {
	color: var(--p-color-primary);
	/* --was-color: #181716; */
}
.content_65d8c850ec42ac1d3c4812af .quote-embed.bg-accent, .content_65d8c850ec42ac1d3c4812af .quote-embed .bg-accent {
	background-color: rgba(0, 0, 0, .3);
	/* --was-background-color: #fff; */
}

.main-content--universal-header {
	background: var(--p-background-base);
	/* --was-background-color: #fcfcfc; */
	/*[[bg-options]]*/
}...