Dark Quora [papo] by papo

/* ==UserStyle==
@name           Dark Quora [papo]
@namespace      github.com/paponius/userstyles
@version        1.1.0
@description    Updated: 2025-03 [m] Notes and feedback: https://github.com/paponius/userstyles/. Only article pages. Main 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)"
@var range    p-size-primary-text  "Text Primary size"         [18, 10, 30, 1, "px"]
@var range    p-size-primary-line  "Text Primary line height"  [26, 12, 35, 1, "px"]
# --- END: common block ---


@advanced color s-tint-real-answers "Real answers tint" rgba(0,0,255,.5)
@advanced color s-tint-similar      "Similar question answers tint" rgba(40, 0, 255, 1)
@advanced color s-tint-related      "Related (not always) tint" rgba(255, 0, 12, 0.74)
@advanced color s-tint-bot          "Bot tint" rgba(255,0,0,1)
@var select xxx 'or to just remove unwanted answers altogether, and do other stuff, get my "DeAnnoy Quora [papo]" UserStyle. https://userstyles.world/style/20881/deannoy-quora-papo' {
  '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
}

==/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("quora.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]]*/;
	--p-size-primary-text: /*[[p-size-primary-text]]*/;
	--p-size-primary-line: /*[[p-size-primary-line]]*/;
	
	--s-tint-real-answers: /*[[s-tint-real-answers]]*/;
	--s-tint-similar: /*[[s-tint-similar]]*/;
	--s-tint-related: /*[[s-tint-related]]*/;
	--s-tint-bot: /*[[s-tint-bot]]*/;
}
/* prefixing with --p- to avoid collisions with site's styles, or another UserCSS. And to easily see them in the Inspector. */


/* --- masthead --- */


/* --- hero section --- */

/* -- headline -- */
#mainContent .puppeteer_test_question_title span {
	color: var(--p-color-headline);
}
/* -- heading -- */
/* -- caption -- */
/* -- link -- */
/* -- author box -- */


/* --- features --- */

/* -- ADs -- */
ADs {
	/*[[prop-BG-ADs]]*/
}



/* --- more-on --- */
/* -- sidebar -- */



/* === HP === */



/* === common === */



/* web */
#mainContent,
/* [m] */
.puppeteer_test_question_main:not(:has(#mainContent)) {
	> div:not([class]) {
/* all answers */
		
		> TODO.qu-bg--raised {
			
		}

		> div.q-box[class*="dom_annotate_question_answer_item_"].qu-bg--raised[style*="box-sizing: border-box;"],
		> div > div.q-box[class*="dom_annotate_question_answer_item_"].qu-bg--raised[style*="box-sizing: border-box;"] {
/* == card == */


			background: var(--p-background);
			/* --was-background-color: #262626; */
			box-shadow: 0 0 10px 1px #000000eb;
			font-size: var(--p-size-primary-text);
			line-height: var(--p-size-primary-line);

/* -- Answer to OP -- */
			&:not(:has(.spacing_log_originally_answered_banner)):not(:has(.puppeteer_test_question_title)) {
				background-color: var(--s-tint-real-answers);	
				background-blend-mode: darken;			
			}
/* -- answer to similar -- */
/* has: "Originally Answered:" */
			&:has(.spacing_log_originally_answered_banner) {
				background-color: var(--s-tint-similar);
				background-blend-mode: darken;			
			}

/* -- "Related" answer -- */
			&:has(.puppeteer_test_question_title) {
				background-color: var(--s-tint-related);
				background-blend-mode: darken;
			}

/* bot */
			&:has(img[src*="multibot_app_icon"]),
			&:has(img[alt="Profile photo for Assistant"]) {
				background-color: var(--s-tint-bot);
				background-blend-mode: darken;
			}

		}
	}
}


#mainContent {
	[class*="dom_annotate_question_answer_item_"] {
		~ div:has(div > a > div > div > div > div) {
			background: rgba(0, 0, 0, .3);

			.qu-hover--bg--darken:hover {
				background: rgba(0, 0, 0, .3) !important;
			}
		}
	}
}
.dom_annotate_related_questions:not(.salt) {
	background: rgba(0, 0, 0, .3);

	.qu-hover--bg--darken:hover {
		background: rgba(0, 0, 0, .3) !important;
/* 		background: black !important; */
	}
}


body {
	background: var(--p-background-base) !important;
	/* --was-inline-background-color: rgb(24, 24, 24); */
	/*[[bg-options]]*/
}

}