Dark Google search results page [papo] by papo

/* ==UserStyle==
@name           Dark Google search results page [papo]
@namespace      github.com/paponius/userstyles
@version        1.1.15
@description    Updated: 2025-04 For both Dark/Light browser/device themes. But Dark is primary as I use it and can see problems more often. 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


# --- mod from common block
@advanced color color-primary "Text Primary" #dadce0
@advanced color color-secondary "Text Secondary" #9e9e9e
# --- END mod from common block


@advanced color color-headline "Headline" #c3e9ff
@advanced color color-heading "Headings" #678CB1


# --- mod from common block
@advanced color color-link-visited "Visited link color" #c58af9
# orig google #c58af9;
# --- END mod from common block


@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 ---


@advanced dropdown bg-group "Group of results background" {
  dft "Stripes" <<<EOT #000 url(data:image/gif;base64,R0lGODlhBQAFAIAAAB0dHRERESH5BAAAAAAALAAAAAAFAAUAAAIHjAOXtqgXCgA7) EOT;
  cst "Background Group Custom" <<<EOT var(--s-bg-group-custom, none) EOT;
  nbg "None" <<<EOT none EOT;
}
@advanced text bg-group-custom "Group of results background Custom" "url(data:image/png;base64,ADD_YOUR_DATA_HERE)"
@var select    bg-group-tint   "Group of results background tint color"   {
  "rb:Rich black (FOGRA29)": "#010B13",
  "violet:Violetish": "rgba(255, 0, 255, 0.4)",
  "cyan:Cyanish*": "rgba(0, 255, 255, 0.3)",
  "custom:Custom": "var(--s-bg-group-tint-custom, none)",
  "none:None (as other results)": ""
}
@var color     bg-group-tint-custom "Group of results background tint color Custom"   rgba(255, 0, 255, 0.4)

@var color     bg-lucky-tint "Lucky result tint color (to disable: set alpha to 0)"    rgba(0, 0, 255, .3)
#@var color     s-bg-news-tint "News results tint color (to disable: set alpha to 0) (not sure if I'll be able to maintain this distinction)"    rgba(255, 0, 0, .3)

@var range    p-size-primary-text  "Text Primary size"         [14, 10, 30, 1, "px"]
@var range    p-size-primary-line  "Text Primary line height"  [22, 12, 35, 1, "px"]

@advanced color s-color-result-source "result source" #006621

@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;"
}

==/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 url-prefix("https://www.google.com/search") {
/* domain("google.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; */
	/* keeping the orig from Google, it's similar, but brighter */
	--p-color-link: #99c3ff;
	--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]]*/;
	
	--s-bg-group: /*[[bg-group]]*/;
	--s-bg-group-custom: /*[[bg-group-custom]]*/;
	--s-bg-group-tint: /*[[bg-group-tint]]*/;
	--s-bg-group-tint-custom: /*[[bg-group-tint-custom]]*/;
	--s-bg-lucky-tint: /*[[bg-lucky-tint]]*/;
/*	--s-bg-news-tint: /*x[[s-bg-news-tint]]*/;
	--s-color-result-source: /*[[s-color-result-source]]*/;
}
/* 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 {
	/* it's also redefined in some children in orig, for  e.g. headings */
	--XYLNNHc: var(--p-color-primary);
	/* Description text on multiple cards: "People also ask", "Excerpt", "About" ... */
	/* #bfbfbf is orig Dark */
	/* 	todo maybe make this tertiary color settable in options */
	--bbQxAb: #bfbfbf;
	/* orig in Dark is #99c3ff, used for some links. external? also for "see more" */
	--JKqx2: #99c3ff;
	/* Heading for Google's Search Tips, or lucky,
	   disabled 250125 now also text inside "People also ask",... */
/* 	--YLNNHc: var(--p-color-heading); */
	/* also as the body color, orig Dark default e8e8e8
	   used e.g. on News cards ("Top stories") for source
	 */
	--COEmY: var(--p-color-primary);
}

/* specific colors used here are taken from orig styling from the other Dark/Light respectfully theme
e.g. #e8eaed
 */

/* Explanations:
   horific selectors used here
		It seems classnames Google use are pretty stable. I tracked few 8 years back.
		But when random classnames are used, reason and experience dictate not to trust they won't change.
		Sometimes both of them are used here. Sometimes only one. For less important or too dificult targets, only the random classname.
		btw. Google, don't be evil. Also, what about green data, with the useless mess on this top used/loaded page.
 */


@media (prefers-color-scheme: dark) { body { --p-note: 'Dark'; } }
@media (prefers-color-scheme: light) { body { --p-note: 'Light'; } }


/* --- masthead --- */
/* -- header: first, with search form -- */
#searchform { /* it's the whole header, not only the form */
	/* keeping the top strip for now. This is the top strip W/O BG, despite DevTools showing it elsewhere */
	/* 	margin-top: 6px; */
	> div:first-of-type {
 		background: rgba(0, 0, 0, .3);
/* 		background: red; */
/* 		background: green; */
	}
	/* top left logo with color. for Dark theme. svg taken from Light theme. */
	@media (prefers-color-scheme: dark) {
		#logo > svg {
			background: url('https://raw.githubusercontent.com/paponius/userstyles/refs/heads/main/Dark%20Google/assets/colorful%20logo.svg');
			path {
				display: none;
			}
		}
	}
/* - form - */
	.logo + [jsname] {
 		background: rgba(0, 0, 0, .3);
		/* it's on Light Theme. I like it. reset back to none for sticky (below) */
		@media (prefers-color-scheme: dark) {
			box-shadow: 0px 2px 8px 0px rgba(60, 64, 67, 0.25);
		}
		/* "X" */
		.ExCKkf
		, [role="button"] > span:has(> svg)
		{
			color: #e8eaed;
		}
		/* line after "X" */
		.ACRAdd
		/* alt perma */
		, [role="button"] ~ span:empty
		{
			border-left: 1px solid rgba(248, 249, 250, 0.25);
		}
	}
	@media (prefers-color-scheme: light) {
		textarea {
			color: #e8eaed;
		}

/* - predictions - */
		/* text color */
		/* also needs ul */
		.wM6W7d, .logo ~ [id] ul li div:has(> span:not(:empty)) {
		/* 2105 needed fix: predictions started to show black on black
		   probably when Google created black theme
		   classname was: .aypzV, .wM6W7d
		   .wM6W7d is still valid in 2501
		   color was #212121, same as Light Theme 2501
		 */
			color: #e8eaed;
			/* --was-light-color: #212121; */
			/* --was-dark-color: #e8eaed; */
		}
		/* JS will add sbhl classname. */
		.sbhl
		/* alt perm */
		, .logo ~ [id] ul li:hover
		{
			background: #3c4043;
			/* --was-background: #f3f5f6; */
		}
	}
	.aajZCb, .logo ~ [id] > div > div:has([data-attrid="AutocompletePrediction"]) {
		background: var(--p-background);
		box-shadow: 0 0 10px 1px #000000eb;
		@media (prefers-colo...