Dark Wikipedia [papo] by papo

/* ==UserStyle==
@name           Dark Wikipedia [papo]
@namespace      github.com/paponius/userstyles
@version        1.6.1
@description    Updated: 2024-11. 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 ---


@var color  s-color-linkNew      "Link to a new page (not existing yet)"     #d73333

@var select s-color-controls 'Color of control buttons/"links"' {
  'lightwhite:Light White (default)': '#ccc',
  'original:Blue (as in original)': '#36c',
  'custom:Custom': 'var(--s-color-controls-custom, #ccc)'
}
@var color  s-color-controls-custom "Custom color controls" #ccc

@advanced dropdown styleTitle "Article headline background" {
  b "More prominent" <<<EOT background: var(--p-background); box-shadow: 0 0 10px 1px #000000eb; EOT;
  a "Less prominent" <<<EOT background: rgba(0, 0, 0, .3); box-shadow: 0 0 10px 1px #000000eb; EOT;
  t "No background" <<<EOT  EOT;
}

@var color  s-color-BG-gray      "Boxes background color"     #333
@var color  s-color-BG-selector  "Selector background color"    gray
@var color  s-color-border       "Border color"                 gray
@var color  s-color-BG-tbl-base  "Table base Background color"  #181818
@var color  s-color-BG-tbl-head  "Table headers Background color"  hsl(220, 17%, 15%)


#var select debug-test1 "debug1" {
  normal: "color: var(--p-color-primary);",
  debug: ""
}

# --- 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
 */

/* 
todo: article preview popup pic BG placeholder is white

todo pages:
  https://en.wikipedia.org/wiki/Help:Wikipedia:_The_Missing_Manual/Formatting_and_illustrating_articles/Creating_lists_and_tables#Editing_and_creating_tables
  https://en.wikipedia.org/wiki/Module_talk:Political_party
 */
@-moz-document domain("wikipedia.org"), domain("mediawiki.org") {
/* removed: domain("wikidata.org"), domain("wiktionary.org"),  */

/* these I use in all my Styles */
: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]]*/;

	/* these are specific to this Style */
	--s-color-border: /*[[s-color-border]]*/;
	--s-color-BG-gray: /*[[s-color-BG-gray]]*/;
	--s-color-BG-selector: /*[[s-color-BG-selector]]*/;
	--s-color-BG-tbl-base: /*[[s-color-BG-tbl-base]]*/;
	--s-color-BG-tbl-head: /*[[s-color-BG-tbl-head]]*/;
	--s-color-linkNew: /*[[s-color-linkNew]]*/;
	--s-color-controls: /*[[s-color-controls]]*/;
	--s-color-controls-custom: /*[[s-color-controls-custom]]*/;
}


/* --- masthead --- */
/* -- top bar -- */
@media screen {
	.vector-header-container .mw-header, .vector-header-container .vector-sticky-header {
		background: var(--p-background);
		box-shadow: 0 0 10px 1px #000000eb;
		/* --was-background-color: #ffffff; */
	}
	/* links - "buttons" */
	.vector-user-links span {
		color: var(--s-color-controls);
	}


/* wiki logo, menu icon (must be in @media) */
	.vector-icon.mw-ui-icon-wikimedia-menu
	, .mw-logo-wordmark
	, .mw-logo-tagline
	, .vector-icon.mw-ui-icon-wikimedia-ellipsis
	, .vector-icon.mw-ui-icon-wikimedia-listBullet
	/* chevrons in Contents sidebar, 2406 BG color is set by --color-base as white, this invert is undesired */
/* 	, .vector-icon.mw-ui-icon-wikimedia-expand */
	{
		filter: invert(1);
	}
	  /* on home page */
	.svg-Wikipedia_wordmark {
		filter: invert(80%);
	}
}

/* - only for logged-in user - */
/* .vector-icon.mw-ui-icon-wikimedia-bell,
.vector-icon.mw-ui-icon-wikimedia-tray,
.vector-icon.mw-ui-icon-wikimedia-watchlist,
.vector-icon.mw-ui-icon-wikimedia-userAvatar,
.vector-icon.mw-ui-icon-wikimedia-userTalk,
.vector-icon.mw-ui-icon-wikimedia-sandbox,
.vector-icon.mw-ui-icon-wikimedia-settings,
.vector-icon.mw-ui-icon-wikimedia-labFlask,
.vector-icon.mw-ui-icon-wikimedia-userContributions,
#cx-language .vector-icon */
/* 2410 disabled. see 20 lines below
.vector-user-links .vector-icon,
.vector-user-menu-logged-in .vector-dropdown-label::after {
	filter: invert(1);
} */
/* popup "Alerts" */
.mw-echo-ui-placeholderItemWidget {
	background-color: rgba(0, 0, 0, .1);
	/* --was-background-color: #eaecf0; */
}
/* "loading" bar shown for a sec when opened */
.oo-ui-pendingElement-pending {
	background-color: hsl(220, 17%, 14%);
	/* --was-background-color: #eaecf0; */
	background-image: linear-gradient(135deg,black 25%,transparent 25%,transparent 50%,black 50%,black 75%,transparent 75%,transparent);
	/* --was-background-image: linear-gradient(135deg,#fff 25%,transparent 25%,transparent 50%,#fff 50%,#fff 75%,transparent 75%,transparent); */
}
/* buttons are styled in section: "=== page: edit ===" below */
/* popup window icons */
.mw-echo-ui-notificationBadgeButtonPopupWidget-popup .oo-ui-iconElement-icon {
	filter: invert(1);
}
/* hover */
.oo-ui-buttonElement-framed.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover {
	background-color: var(--s-color-BG-selector);
	/* --was-background-color: #fff; */
	color: black;
	/* --was-color: #404244; */
/* 	border-color: #a2a9b1; */
}

/* - logged-in, sticky toolbar - */

/* 2410 BG is now defined using css var --color-base, but we changed that var for mobile version. Maybe will undo and let --color-base be. */
/* .vector-icon.mw-ui-icon-wikimedia-search { */
/* #vector-sticky-header .vector-icon {
	filter: invert(1);
} */
@media screen {
  .vector-icon {
    background-color: var(--s-color-controls);
	/* --was-background-color: var(--color-base,#202122); */
  }
/* chevron user dropdown */
  @supports (-webkit-mask-image:none) or (mask-image:none) {
    .vector-user-menu-logged-in .vector-dropdown-label::after {
	    background-color: var(--s-color-controls);
		/* --was-background-color: var(--color-bas...