adrianroselli.com - dim (dark) by myfonj

/* ==UserStyle==
@name           adrianroselli.com, ericwbailey.website and and heydonworks.com - dim (dark)
@namespace      myfonj
@version        1.10.0
@description    Decrease background/text contrast at given pages to ease reading with overly sensitive eyes (or monitors with excessive contrast).
@author         myf
@license        CC0
==/UserStyle== */
/*
1.10.0 (2024-10-01) frontendmasters.com wirhout background-image
1.9.0 (2024-08-15) add daringfireball.net (darker background for more contrast - first site in this style to *increase* contrast.)
1.8.0 (2024-08-12) add danluu.com
1.7.2 (2024-07-03) every-layout.dev better links distinctionarizations
1.7.0 (2024-07-02) added every-layout.dev (sorry again, Heydon!)
1.6.0 (2024-06-05) added Cory LaViska (only text-color dimming)
1.5.1 (2024-03-18) niky fixed hover
1.5.0 (2024-03-18) addded tonsky.me/blog/ that dimms the "light" and makes "dark" worg without a flashlight. Also removes cursor flies.
1.4.1 (2024-03-04) heydon: code like pre, so it pops out more in paragraphs
1.4.0 (2024-02-29) Added heydonworks.com
1.3.1 (2023-10-17) More opaque fill for Aardrians headings
reason: at https://adrianroselli.com/2022/05/under-engineered-multi-selects.html
 narrow line-heights collide asc/descenders (En*g* / Mu*l*)
1.3.0 (2023-05-11) added ericwbailey.website
*/

@-moz-document domain("daringfireball.net") {
 /*
 § John Gruber - darker background for more contrast
 */
 body {
  background-color: color-mix(in srgb, #4a525a, black);
 }
}

@-moz-document domain("every-layout.dev") {
 /*
 § Every layout (Heydon Pickering & Andy Bell) softer contrast
 */
 @media (prefers-color-scheme: dark) {
  :root {
   color-scheme: dark light;
   --color-dark: #ccc;
   --color-darkish: highlight;
   --color-lightish: mark;
   --color-light: #333;
   --color-mid: red;
  }
  em, strong, i, b, p code {
   color: #fff;
  }
  p code {
   font-weight: bolder;
   font-size: 1em;
   line-height: 1;
  }
  img {
   filter: invert(1);
   background-image: none !important;
   background-color: transparent !important;
   opacity: .7;
  }
  pre code span {
   color: var(--color-dark);
  }
  pre code {
   background-color: #222;
   color: var(--color-dark);
  }
  .docs-note--warning {
   border-image: repeating-linear-gradient(
   -25deg,
   transparent,
   transparent .35rem,
   var(--color-dark) .4rem,
   var(--color-dark) .6rem,
   transparent .65rem
   ) 25 !important;
  }
  }
  :any-link {
   text-decoration: underline !important;
   text-decoration-color: color-mix(in srgb, currentcolor, transparent 80%) !important;
  }
  :visited {
    color: color-mix(in srgb, currentcolor, visitedtext 30%);
  }
  :link {
    color: color-mix(in srgb, currentcolor, linktext 30%);
  }
  h2 + [href^="#"][aria-label]:not(:hover) {
   opacity: .1;
  }
}
@-moz-document domain("www.abeautifulsite.net") {
 /*
 § Cory LaViska
 */
 @media (prefers-color-scheme: dark) {
  :root {
    --abs-blue: #479ce1;
    --abs-green: #16a34a;
    --abs-beige: #4e390d;

    --body-background-color: #1a1d20;

    --text-color: #e8ecf2;
    --text-color-muted: #858b99;
    --inline-code-background-color: #292e32;

    --border-color: #3d464c80;

    --callout-background-color: var(--code-background-color);
    --callout-text-color: var(--code-text-color);

    --search-overlay: #ffffff1c;
    --search-background-color: #292b30;
    --search-text-color: var(--text-color);
    /* changes*/
    --text-color: #e8ecf2CC;

  }
 } 
}

@-moz-document domain("bkardell.com") {
 /* 
 § Brian Kardell: non-stencil font for body text
 */
 :is(h1, h2, h3, h4, h5, h6) {
  font-weight: 800 !important;
  /* It does not do anything anyway, since Brian has only single font face loaded.
  */
  article > *:not(&) {
   font-family: Tahoma, sans-serif;
   font-weight: 100;
  }
 }
 body {
  background-color: #c7cccc;
  --grad-r: linear-gradient(to right, #c7cccc, #dde0e8);
  --grad-l: linear-gradient(to left, #c7cccc, #dde0e8);
 }
 main {
  --grad-dir: left;
  background-image: var(--grad-l);
 }
 details {
  background-image: var(--grad-r);
 }
}

@-moz-document domain("utf9k.net") {
 /*
 § Marcus Crane: larger default font size
 */
 body {
  font-size: 18px;
 }
}

@-moz-document domain("meiert.com") {
 /*
 § Jens Meiert: serif, and larger default font size
 */
 html {
  font-family: georgia, serif;
  font-size: 1.2rem;
 }
 /* Jens could also use some better dark mode, instead of current invert&hue-rotate. */
}

@-moz-document domain("heydonworks.com") {@media (prefers-color-scheme:dark){
 /*
 § Heydon Pickering: dark mode dimmer
 (I know using non-black here  him is a HERESY.)
 (Maybe he will not find this.)
 */
	:root {
		--color-light:#333;
		--color-dark:#CCC;
	}
 em, strong {
  color: #fff;
 }
 pre, code {
 	background-color: #222;
 	color: #bbb;
 }
 mark {
  background-color: #000 !important;
  filter: contrast(3);
 }
 :link, :visited {
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-color: color-mix(in srgb, currentcolor 50%, transparent) !important;
 }
}}

@-moz-document regexp("https://ericwbailey.website/.+") {
 /*
 § Eric Bailey: dark mode dimmer,
 */
 @media screen and (prefers-color-scheme: dark) {
  body {
   color: #999
  }
  h1, h2, h3, h4, h5, h6 {
   color: #666;
  }
  .banner h2 {
   color: #444;
  }
  .banner {
   background-color: #000;
   color: #555;
  }
  figcaption {
   color: #666;
  }
  :is(video, img):not(:hover) {
   opacity: .5;
  }
 }
}

@-moz-document domain("adrianroselli.com") {
 /*
 § Adrian Roselli: dimmer dark mode and minor tweaks
 */
 @media screen and (prefers-color-scheme: dark) {
  :root {
   --text-color: #A0A0A0;
   /* A0A0A0 on 111 has AAA contrast rating */
   --page-bg: #111;
   --detail-color: #cfc;
   --visited-color: #6f6;
   --mark-color: #ff9;
   --mark-bg: #220;
  }
  footer,
  :is(nav, footer) a {
   color: currentcolor !important;
  }
  /* better outline */
  h1 {
   text-shadow: none;
   color: currentcolor;
   opacity: .6;
   -webkit-text-fill-color: #0009;
   -webkit-text-stroke-width: 3px;
   -webkit-text-stroke-color: var(--detail-color);
  }
  mark {
   color: var(--mark-color);
   background-color: var(--mark-bg);
  }
  main a:link,
  main a:visited,
  main a:hover,
  main a:focus {
   text-decoration: underline;
   text-decoration-color: currentcolor;
   text-decoration-thickness: auto;
   text-decoration-skip-ink: initial;
   text-decoration-thickness: 1px;
   text-underline-offset: 2px;
   color: var(--detail-color);
  }
  main a:hover,
  main a:focus {
   color: var(--mark-color);
   opacity: 1;
  }
  main a:visited:not(#\0) {
   color: var(--visited-color);
  }
  form:not(:focus-within):not(:hover) {
   opacity: .5;
  }
  [id]:not(:hover) > a.noprint:not(:focus) {
   opacity: .2;
  }
 }
}

@-moz-document url-prefix("https://tonsky.me/blog/") {
 /*
 § Nikita Prokopov: darkened mode, fewer distractions
 */
 body {
  background-color: #320;
  --text: #999;
  --gray-text: #777;
 }
 img {
  background-color: #fff;
  opacity: .5;
 }
 img:hover {
  opacity: 1;
  background-color: #fff6;
 }
 a:not(:hover) { 
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentcolor 50%, transparent);
  border-bottom: none;
 }
 a:hover {
  color: #fff !important;
  border-bottom-color: color-mix(in srgb, currentcolor 50%, transparent) !important;
 }
 /* nice idea, but really annoying after a while */
 body:hover .pointers { display: none !important; }
 /* dtto the "flashlight" */
 body.dark {
  background-image: none !important;
  img { filter: invert(1) hue-rotate(180deg); }
 }
}

@-moz-document domain("danluu.com") {
 /*
 § Dan Luu
 */
 body {
  max-width: 60ch;
  font-size: 1.2rem;
  line-height: 1.5;
  margin: auto;
  color: color-mix(in srgb, canvastext, transparent 30%);
 }
 header {
  font-size: 1.5rem
 }
}

/*
 §§ Sites that are perfectly OK, or need only super-cosmetic adjustments:
*/
@-moz-document domain("scottohara.me") {
 /* § Scott O'Hara */
 blockquote pre {
  font-style: normal;
 }
}

@-moz-document domain("piccalil.li") {
 /* § Andy Bell */
 :root {
  --ribbon-border-block-start: black;
  --hero-bg: black;
  --hero-text: white;
  --hero-mark: transparent;
 }
 * {
  scrollbar-color: revert !important;
 }
}
@-moz-document domain("crockford.com") {
 /* § Douglas Crockford */
 :any-link {
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentcolor 20%, transparent);
 }
}
@-moz-document domain("frontendmasters.com") {
 /*
 § Frontend masters: no background-image
 */
 html {
  background-image: none !important;
 }
}