See @description in the Source Code.
Dark CNN [papo] by papo
Details
Authorpapo
LicenseCC BY-NC-SA 4.0
Categorycnn
Created
Updated
Size32 kB
Statistics
Learn how we calculate statistics in the FAQ.
Failed to fetch stats.
Description
Notes
Userstyle doesn't have notes.Source code
Source code has over 10K characters, so we truncated it. You can inspect the full source code on install link./* ==UserStyle==
@name Dark CNN [papo]
@namespace github.com/paponius/userstyles
@version 1.0.3
@description Updated: 2024-04. 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)"
# --- 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.0 2024-04
*/
@-moz-document url-prefix("https://edition.cnn.com/20"), url-prefix("https://edition.cnn.com/politics/live-news/"), domain("edition.cnn.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-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]]*/;
/* 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 {
--theme-headline__text-color: var(--p-color-caption);
/* --was-theme-headline__text-color: #0c0c0c; */
--theme-paragraph__link-color: var(--p-color-link);
/* --was-theme-paragraph__link-color: #0c0c0c; */
--social-sharing-facebook-fill: var(--p-color-dark);
--social-sharing-twitter-fill: var(--p-color-dark);
--social-sharing-email-fill: var(--p-color-dark);
--social-sharing-link-fill: var(--p-color-dark);
/* --was-social-sharing-*-fill: #0c0c0c; */
--theme-container-color--hover: white;
/* --was-theme-container-color--hover: #0c0c0c; */
--theme-link-color-hover: var(--p-color-link-hover);
--theme-color-link: var(--p-color-link);
/* --- /politics/, masthead, menu text */
--theme-copy-accent: var(--p-color-primary);
--theme-icon-color: var(--p-color-primary);
/* masthead and footer */
--theme-background: #333;
/* headlines footer */
--theme-copy-follow: var(--p-color-caption-sec);
}
/* masthead */
/* - headline - */
/* breadcrumb */
.breadcrumb {
color: var(--p-color-caption-sec);
/* --was-color: #0c0c0c; */
}
.breadcrumb__link {
color: var(--p-color-caption-sec);
/* --was-color: #0c0c0c; */
}
/* in live feed */
.headline > h1 {
color: var(--p-color-caption);
}
/* on home page */
.container__title {
color: var(--p-color-caption);
background-color: rgba(0, 0, 0, .3);
}
.subheader, .subheader a, .subheader__link {
color: var(--p-color-caption-sec);
/* --was-color: #0c0c0c; */
}
/* h2 on home page */
.zone__title {
color: var(--p-color-caption-sec);
/* --was-color: #0c0c0c; */
}
/* .headline */
/* , */
.headline--has-lowertext
{
background-color: rgba(0, 0, 0, .3);
padding: 5px 5px 0
}
/* sub title, e.g. on https://edition.cnn.com/politics/president-donald-trump-45 */
body:not(.layout-homepage-mobile.kiln-edit-mode):not(.layout-homepage-mobile-app.kiln-edit-mode) .headline_section-banner__description-text {
color: var(--p-color-secondary);
/* --was-color: #404040; */
}
/* - byline - */
.byline__link, .byline__names,
.timestamp,
.headline__sub-description {
color: var(--p-color-by);
/* --was-color: #6e6e6e; */
}
/* in live feed */
.fKJYAI {
color: var(--p-color-by);
/* --was-color: rgb(140, 140, 140); */
}
/* == main article == */
/* picture background. not sure if and when this is visible */
.container.lazy .image__container, .container.lazy .image_sponsorship__container {
background: rgba(0, 0, 0, .3);
/* --was-background: #e6e6e6; */
}
/* picture placeholder. shows while loading */
.image__dam-img--loading {
background-color: rgba(0, 0, 0, .3);
/* --was-background-color: #e6e6e6; */
}
/* -- masthead -- */
/* -- hero section -- */
/* - breadcrumb - */
/* - headline - */
/* - deck - */
/* - byline - */
/* -- article -- */
/* - heading - */
/* - caption - */
/* placeholder - blank subst, when pic is not laoded */
/* this does not work as intended */
/* .image__picture source[srcset="/media/sites/cnn/cnn-fallback-image.jpg"] {
filter: invert(1);
}
*/
/* selectors as in original */
.article__main .article__content > [data-component-name="image"] .image-slider__caption, .article__main .article__content > [data-component-name="image"] .image__caption, .article__main .article__content > [data-component-name="image"] .image_expandable__caption, .article__main .article__content > [data-component-name="image"] .image_inline-full__caption, .article__main .article__content > [data-component-name="image"] .image_inline-small__caption, .article__main .article__content > [data-component-name="image"] .image_large__caption, .article__main .article__content > [data-component-name="image"] .image_medium__caption, .article__main .article__content > [data-component-name="image"] .interactive-video__caption, .article__main .article__lede-wrapper > [data-component-name="image"] .image-slider__caption, .article__main .article__lede-wrapper > [data-component-name="image"] .image__caption, .article__main .article__lede-wrapper > [data-component-name="image"] .image_expandable__caption, .article__main .article__lede-wrapper > [data-component-name="image"] .image_inline-full__caption, .article__main .article__lede-wrapper > [data-component-name="image"] .image_inline-small__caption, .article__main .article__lede-wrapper > [data-component-name="image"] .image_large__caption, .article__main .article__lede-wrapper > [data-component-name="image"] .image_medium__caption, .article__main .article__lede-wrapper > [data-component-name="image"] .interactive-video__caption {
color: var(--p-color-secondary);
/* --was-color: #0c0c0c; */
}
/* selectors as in original */
.article__main .article__content > [data-component-name="image"] .image-slider__metadata, .article__main .article__content > [data-component-name="image"] .image__metadata, .arti...