See @description in the Source Code.
Dark Politico [papo] by papo
Details
Authorpapo
LicenseSee @licence in the Source Code.
Categorypolitico
Created
Updated
Size15 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 Politico [papo]
@namespace github.com/paponius/userstyles
@version 1.0.7
@description Updated: 2024-04. Notes and feedback: https://github.com/paponius/userstyles/. EU version complete, US version only article pages. US 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-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: 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
# --- END: optional common block ---
@advanced dropdown social-box "Hide share buttons" {
a "Keep showing" <<<EOT block EOT;
b "Hide" <<<EOT none EOT;
}
==/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
*/
/* Politico
This site does have completely different DOM structure for .eu and .com sites.
This userstyle is covering both individually.
*/
@-moz-document domain("politico.eu"), domain("politico.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]]*/;
/* Legacy */
--p-color-caption: var(--p-color-headline);
--p-color-caption-sec: var(--p-color-heading);
--p-color-sub: var(--p-color-deck);
--p-color-by: var(--p-color-byline);
--gl-text-primary: var(--p-color-primary);
--gl-text-sec: var(--p-color-secondary);
--gl-text-caption: var(--p-color-caption);
--gl-text-caption-sec: var(--p-color-caption-sec);
--gl-text-sub: var(--p-color-sub);
--gl-link-visited: var(--p-color-link-visited);
--gl-background: var(--p-background);
--s-color-politico-red: #DC0228;
/* --orig--color-text-red: var(--wp--custom--color--red--500,inherit); */
}
/* prefixing with --p- to avoid collisions with site's styles, or another UserCSS. And to easily see them in the Inspector. */
}
@-moz-document domain("politico.eu") {
/* using site's variables */
/* politico does not use :root, but body element for CSS variables */
/* :root { */
body {
--color-text-primary: var(--p-color-primary);
/* e.g. text in cards */
--color-text-secondary: var(--p-color-secondary);
/* --color-text-disabled: var(--p-color-secondary); */
/* used as "background" for masthead, but was used in body as "background-color" */
--color-background-default: var(--p-background);
/* --orig-button-background-color: #0D0F16; */
/* as a background-color for some buttons: "LOG IN", "SHARE", ...? */
--color-background-secondary: hsl(0, 0%, 3%);
/* --was-color-background-secondary: #F7F7F7; */
}
/* -- masthead -- */
/* -- hero section -- */
/* - breadcrumb - */
/* - headline - */
.hero .hero__title {
color: var(--p-color-caption);
background: var(--p-background);
box-shadow: 0 0 10px 1px #000000eb;
padding-left: 7px;
padding-right: 7px;
}
.hero .hero__title + .hero__excerpt {
background-color: rgba(0, 0, 0, .3);
margin-top: 0;
/* --was-margin-top: var(--wp--custom--spacing--6); */
padding-top: 16px;
/* margin-left: 7px; */
padding-left: 7px;
padding-right: 7px;
}
/* - deck - dek - */
/* - byline - */
.article-meta {
color: var(--p-color-by);
/* --was-color: var(--color-text-tertiary); */
}
#huhu
/* , .article-meta .authors */
/* , .article-meta .article-meta__authors */
/* , .article-meta .authors a */
, .article-meta .article-meta__authors a
{
color: var(--p-color-by);
}
/* adding .date-time__date to orig selector, to not target "X mins read" text */
/* todo: I don't know what .card__label does, where it is, and I did not see .card__authors yet */
.article-card .card__authors, .article-card .card__date-time .date-time__date, .article-card .card__label {
color: var(--p-color-by);
/* --was-color: var(--color-text-tertiary); */
}
/* - lead - lede - */
/* -- article -- */
/* - heading - */
/* - caption - */
figure figcaption {
/* it does not seem right to change the variable "disabled", who knows where it is or will be used */
color: var(--p-color-secondary);
/* --was-color: var(--color-text-disabled); */
background-color: rgba(0, 0, 0, .3);
padding: 3px;
/* padding-left: 7px; */
/* padding-right: 7px; */
margin-top: 0;
/* --was-margin-top: .333em; */
}
/* - link - */
/* - author box - */
/* -- features -- */
/* -- more-on -- */
.content-header-new__title {
color: var(--p-color-caption-sec);
}
/* HP */
.most-read-articles__illustration svg > path {
fill: hsl(227, 26%, 93%);
/* --was-fill: #0D0F16; */
}
.newsletter-listing-block__image {
filter: invert(1);
}
.content-header-new {
border-top: var(--wp--custom--stroke--medium) solid hsl(227, 26%, 93%);
/* --was-border-top: var(--wp--custom--stroke--medium) solid var(--color-border-black); (#0D0F16) */
}
.article-card {
background: var(--p-background);
box-shadow: 0 0 10px 1px #000000eb;
padding: 5px;
/* padding-left: 5px; */
/* padding-right: 5px; */
}
.content-listing__content {
background-color: rgba(0, 0, 0, .3);
padding: 10px;
}
article.article .article__content {
background: var(--p-background);
box-shadow: 0 0 10px 1px #000000eb;
padding-left: 5px;
padding-right: 5px;
}
/* === common === */
body {
background: var(--p-background-base);
/*[[bg-options]]*/
/* can't be unset, or when --p-background-base is a color (not an image), this unset will unset it.
can't be left alone, or the --color-background-default will override background, when --p-background-base is a simple color
use --p-background-base. When --p-background-base is a shorthand with an image, this property will fail, but it must be done. */
background-color: var(--p-background-base) !important;
/* background-color: unset !important; */
/* --was-background-color: var(--color-background-default) !important; */
/* --orig-color: var(--color-text-primary); */
/* font-size: var(--wp--custom--type-sca...