See @description in the Source Code.
Dark CNBC (applies just to Articles for now) by papo
Details
Authorpapo
LicenseSee @licence in the Source Code.
Categorycnbc
Created
Updated
Size8.5 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
/* ==UserStyle==
@name Dark CNBS [papo] (applies just to Articles for now)
@namespace github.com/paponius/userstyles
@version 1.0.3
@description Updated: 2024-03. Notes and feedback: https://github.com/paponius/userstyles/. Only article pages. Main home page is not yet styled.
@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 url-prefix("https://www.cnbc.com/20") {
: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. */
:root {
/* brighter blue, from originally used color */
--x-color-blua-from: #002f6c;
--x-color-blua-from: hsl(214, 100%, 21%);
--s-color-blua: hsl(214, 100%, 40%);
}
/* -- masthead -- */
/* -- headline -- */
.ArticleHeader-headline
, .LiveBlogHeader-headline
{
color: var(--p-color-caption);
/* --was-color: #000; */
background: var(--p-background);
box-shadow: 0 0 10px 1px #000000eb;
padding-left: 7px;
padding-bottom: 7px;
}
.ArticleHeader-headline:focus, .ArticleHeader-headline:hover {
color: #fcb700; /* as in: a:hover */
/* --was-color: #000; */
}
.ArticleHeader-eyebrow {
color: var(--s-color-blua);
/* --was-color: #002f6c; */
}
.RenderKeyPoints-list li {
color: var(--p-color-secondary);
/* --was-color: #171717; */
}
.RenderKeyPoints-header {
color: var(--s-color-blua);
/* --was-color: #002f6c; */
}
.RenderKeyPoints-list li::before {
background: var(--s-color-blua);
/* --was-background: #002f6c; */
}
.RenderKeyPoints-wrapper {
background-color: rgba(0, 0, 0, .3);
padding-left: 7px;
}
/* breadcrumb */
/* -- byline -- */
.Author-authorName {
color: var(--p-color-by);
/* --was-color: #000; */
}
.Author-authorTwitter {
color: var(--p-color-by);
/* --was-color: #2077b6; */
}
.LiveBlogHeader-author a, .LiveBlogHeader-authorOverWrite a {
color: var(--p-color-by);
/* --was-color: #2077b6; */
}
.ArticleHeader-time, .ArticleHeader-timeHidden {
color: var(--p-color-by);
/* --was-color: #747474; */
}
/* -- decription under pic, gallery -- */
.InlineImage-imageEmbedCaption {
color: var(--p-color-secondary);
/* --was-color: #171717; */
}
.InlineImage-imageEmbedCredit {
color: var(--p-color-dark);
/* --was-color: #747474; */
}
.InlineImage-wrapper > div:has(> .InlineImage-imageEmbedCaption) {
background-color: rgba(0, 0, 0, .3);
padding: 7px;
padding-left: 7px;
padding-right: 7px;
}
/* to flush BG of pic desc with the pic */
.InlineImage-imagePlaceholder {
margin-bottom: 0;
/* --was-margin-bottom: 15px; */
}
/* -- article -- */
.FeaturedContent-articleBody p {
/* color: var(--p-color-primary); */
color: unset;
/* --was-color: #171717; */
}
.ArticleBody-guideSubtitle, .ArticleBody-smallSubtitle, .ArticleBody-subtitle {
color: var(--p-color-caption-sec);
/* --was-color: #171717; */
}
/* "In this article" */
.RelatedQuotes-relatedQuotes .RelatedQuotes-subtext, .RelatedQuotes-relatedQuotes .RelatedQuotes-text {
color: var(--p-color-secondary);
/* --was- #171717; */
}
/* -- more-on -- */
/* "trending now" */
.MostPopular-header {
color: var(--s-color-blua);
/* --was-color: #002f6c; */
}
.MostPopular-list a {
color: var(--p-color-secondary);
/* --was-color: #2e2e2e; */
}
.MostPopular-list a:hover {
color: #fcb700; /* as in: a:hover */
/* --was-color: #2e2e2e; */
}
.MostPopular-list li {
background: var(--p-background);
box-shadow: 0 0 10px 1px #000000eb;
}
.ArticleBody-articleBody div[class*="group"]
/* what should be the difference with "featured" */
, .FeaturedContent-articleBody div[class*="group"]
, .LiveBlogBody-articleBody div[class*="group"]
{
background: var(--p-background);
box-shadow: 0 0 10px 1px #000000eb;
padding-left: 7px;
}
.WatchLiveRightRail-container a {
color: var(--s-color-blua);
/* --was-color: #002f6c; */
}
.WatchLiveRightRail-container {
background-color: rgba(0, 0, 0, .3);
color: var(--s-color-blua);
/* --was-color: #002f6c; */
}
/* h2 */
.LiveBlogBody-subtitle {
color: var(--p-color-caption-sec);
/* --was-color: #171717; */
}
/* floating bar */
.nav-menu-navMenuArticleSticky, .nav-menu-navMenuArticleStickyAllAccess, .nav-menu-navMenuArticleStickyOneAccess {
background: transparent;
/* --was-background: #0000; */
}
.CNBCGlobalNav-globalNavigationSticky.CNBCGlobalNav-globalNavigationArticle, .CNBCGlobalNav-globalNavigationStickyAllAccess.CNBCGlobalNav-globalNavigationArticle, .CNBCGlobalNav-globalNavigationStickyIC.CNBCGlobalNav-globalNavigationArticle, .CNBCGlobalNav-globalNavigationStickyPro.CNBCGlobalNav-globalNavigationArticle {
background: var(--p-background);
/* --was-background: #fff; */
}
.nav-menu-navMenuArticleSticky, .nav-menu-navMenuArticleStickyAllAccess, .nav-menu-navMenuArticleStickyOneAccess {
color: var(--p-color-secondary);
/* --was-color: #000; */
}
body {
color: var(--p-color-primary);
background: var(--p-background-base);
/*[[bg-options]]*/
}
.ArticleHeader-wrapperHero {
background-color: unset;
/* --was-background-color: #fff; */
}
.ArticleHeader-wrapperHero::before {
background-color: unset;
/* --was-background-color: #fff; */
}
}