Dark MDN developer.mozilla.org fully custom [papo] by papo

/* ==UserStyle==
@name           Dark MDN developer.mozilla.org fully customizable [papo]
@namespace      github.com/paponius/userstyles
@version        1.0.2
@description    Updated: 2025-02. Must switch to Dark Theme on site or in system! Notes and feedback: https://github.com/paponius/userstyles/MDN
@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" #cdcdcd
@advanced color color-headline "Headline" #c3e9ff
@advanced color color-heading "Headings" #678CB1
@advanced color color-link-visited "Visited link color" #ffadff
# 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 ---

@var range    p-size-primary-text    "Text Primary size"         [1, 0.2, 3, 0.1, "rem"]
@var range    p-size-primary-line    "Text Primary line height"  [1.75, 0.5, 2, 0.05, ""]

@var color    s-background-header    'Background: header'        rgba(24,112,240,0.06)
@var color    code-background-block  "Background: code block"    hsl(0,0%,6%)
#var color    s-background-codetry   'Background: code block "Try It"'    hsl(0,0%,6%)
  default: #343434
@var color    background-critical    'Background: negative ("critical")'             hsl(344, 100%, 5%)
@var color    code-background-inline "Background: inline code"   hsl(0,0%,6%)
  default: #343434
@var color    s-background-third     'Background: for some objects' rgba(0,0,0,.3)
@var color    s-background-stripes   'Background: table stripes' rgba(0,0,0,.2)
  default: #313131
  

@var range    main-column-size  "main-column-size"  [3.1, 0.5, 8, 0.05, ""]

==/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.4 2024-11
 */
@-moz-document domain("developer.mozilla.org") {

: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]]*/;
	--p-size-primary-text: /*[[p-size-primary-text]]*/;
	--p-size-primary-line: /*[[p-size-primary-line]]*/;

	
	--type-base-font-size-rem: /*[[p-size-primary-text]]*/;
	--font-content-line-height: /*[[p-size-primary-line]]*/;
	
	--s-background-header: /*[[s-background-header]]*/;
	--s-background-stripes: /*[[s-background-stripes]]*/;
	--s-background-third: /*[[s-background-third]]*/;
/* 	--s-background-codetry: /x*x[[s-background-codetry]]*x/; */
}

/* using site's variables */
@media (prefers-color-scheme: dark) {
/* when user selects "OS Default" */
/* orig: :root:not(.light):not(.dark) { */
:root:not(.light.light) {
/* =============  copy down from here  vvvvvv  ===================== */
	--text-primary: /*[[color-primary]]*/;
    --text-secondary: /*[[color-secondary]]*/;
/*     --text-active: #858585; */
/*     --text-inactive: #cdcdcda6; */
/*     --text-link: #8cb4ff; */
    --text-visited: /*[[color-link-visited]]*/;

/* 	--background-secondary: /x*[[background-secondary]]*x/; */

/* - for type: code-example - */
	--code-background-block: /*[[code-background-block]]*/; /* #343434; */
	--background-critical: /*[[background-critical]]*/; /* #d300381a; = hsla(344, 100%, 41%, .102) */

/* - inline - */
	--code-background-inline: /*[[code-background-inline]]*/;

/* (the whole block below is inside :root, this is not a mistake, sorry the missing indent) */

/* --- masthead --- */

/* -- breadcrumb -- */
.breadcrumbs-container li a:link, .breadcrumbs-container li a:visited {
  color: var(--p-color-breadcrumb);
}


/* -- main (middle) column - */
.main-page-content {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
/* 	font-size: var(--p-size-primary-text); */
/* 	line-height: var(--p-size-primary-line); */

	/* orig for now */
	padding: 3rem 1rem 1rem;

	/* repeat rulesets for all @media from orig */
	@media (min-width: 426px) {
		/* orig for now, not sure about this. why so thick? */
		padding: 3rem 3rem 0;
	}
	@media (min-width: 769px) {
		padding: 0 1rem 0;
		/* --was-padding: 0; */
		margin-bottom: 15px;
	}

/* -- headline -- */
	header h1 {
		color: var(--p-color-headline);
	}

/* -- heading -- */
	h2 a:link, h2 a:visited
	/* actually good to have h3 different color, as it's similar size to h2, which was confusing in orig */
/* 	, h3 a:link, h3 a:visited
	/* will see about these later */
	/* , h4 a:link, h4 a:visited, h5 a:link, h5 a:visited, h6 a:link, h6 a:visited */
	{
		color: var(--p-color-heading);
	}
}

/* - parent of columns - */
/* compensating for padding from above ruleset and bigger max in left column (first minmax) */
@media (min-width: 1200px) {
	.main-wrapper {
		grid-template-columns: minmax(0,1.14fr) minmax(0,/*[[main-column-size]]*/fr) minmax(0,15rem);
		/* --was-grid-template-columns: minmax(0,1fr) minmax(0,2.5fr) minmax(0,15rem); */
	}
}



/* === left column === */
.sidebar-inner-nav {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
	padding-left: 5px;
	padding-right: 5px;
}


/* === right side column === */
.document-toc-container {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
/* 	padding-left: 5px; */
/* 	padding-right: 5px; */

	.document-toc-heading {
		margin-left: 5px;
	}
}


/* === third BG === */
/* can't make all --background-secondary from orig customizable, it's used for variety of purposes. Header, footer, BG for right-top menus (search...) */
.article-actions-container,
.article-footer
{
	background: var(--s-background-third);
	/* --was-background-color: var(--background-secondary); */
}



/* === common === */

/* - code try-it - */
/* two types. one in an iframe for CSS, second for JS is in shadow-root, not possible for now to style */
/* .ͼo, */
/* .cm-editor { */
/*   color: rgb(171, 178, 191); */
/*   background-color: var(--s-background-codetry); */
	/* --was-background-color: rgb(40, 44, 52); */
/* } */


/* --- table and headers  --- */
/* 
orig is trying to style both horizontal and vertical table headers using the same styles.
<th> is alternating --background-secondary / --background-primary inside every second <tr>
<td> is alternating --background-secondary / unset inside every second <tr>
for vertical, even th is set to none with: table.properties th
--background-primary is set to the same color as <body>, so "unset" mostly (or always) means --background-primary
--background-secondary is also used for headers on other blocks (code block)

1. either will set --background-secondary to "header" BG color, then fix vertical tables
2. let --background-secondary be and style header using separate selectors

will try 2. now.
 */

/* - code block - */
.code-example .example-header {
	background: var(--s-background-header);
	/* --was-background-color: var(--background-secondary); */
}

/* - .standard-table - */
/* .standard-table thead th { */
/* vertical table does not have thead, maybe can afford to style all these: */
thead th:not(.little.more.salt) {
	background: var(--s-background-header);
}

/*...