Dark+DeAnnoy Bazos by papo

/* ==UserStyle==
@name           Dark + DeAnnoy Bazos [papo]
@namespace      github.com/paponius/userstyles
@version        1.0.6
@description    Updated: 2024-05. 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: common block ---

#! disabled some options above


@var select colorVisited "Show already viewed ADs in different color" {
	'1:yes': 'color: var(--p-color-link-visited);',
	'0:no': ''
}

                                       [default, min, max, step, units] All items but the default value are optional. Use null to skip.
@var range    textW     "New AD text area size width"    [860, 350, 1080, 10, "px"]
@var range    textH     "New AD text area size height"   [330, 110, 480, 10, "px"]
# original was: width: 350px; height: 110px; 
# alt, to change also new msg "Text area. For adding new AD, or sending a message. Height."

@var select alwaysVisibleLinks "Action buttons visibility" {
	"Only on hover (site default)": "",
	"Show always*": "visibility: unset;"
}

@var select showLinksAsLinks "Links style on site" {
	"As a regular text (site default)": "",
	"In standard blue color*": "color: var(--p-color-link);",
	"Underline": "text-decoration: underline;",
	"Underline and blue": "color: var(--p-color-link); text-decoration: underline;"
}

#not finished: var select buttonStyle "buttons" {
	"blue nice": `
	display: flex;
  flex-direction: column;
  align-items: center;
  padding: 6px 14px !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Roboto', sans-serif;
  border-radius: 6px;
  border: none;
  color: #fff;
  background: linear-gradient(180deg, #4B91F7 0%, #367AF6 100%) !important;
    background-origin: padding-box !important;
  background-origin: border-box !important;
  box-shadow: 0px 0.5px 1.5px rgba(54, 122, 246, 0.25), inset 0px 0.8px 0px -0.25px rgba(255, 255, 255, 0.2);
  user-select: none !important;
  -webkit-user-select: none;
  touch-action: manipulation;`
}
# todo: on small screen width, height of the toolbar will change and other elements can be covered,
# it's possible to add margin-top to parent with @media for each resolution.

@advanced dropdown search-toolbar "Search bar always visible" {
  s   "Scrolls with a page (Default)" <<<EOT  EOT;
  f   "Stays on top of a page" <<<EOT
	body:not(:has(.maincontent > .fliobal)) form#formt {
		justify-content: center;
		display: flex;
	}
	body:not(:has(.maincontent > .fliobal)) form#formt .listah {
		position: fixed;
		top: 0;
		padding-top: 0;
		margin-top: 0;
		z-index: 1;
	} EOT;
}

@var checkbox xxx "Hide Add button (top right corner), while editing an AD, to avoid clicking on it and loosing the AD by a mistake. (This Option is always enabled, regardless of the toggle)" 1


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

# --- END: optional common block ---


==/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.1 2024-04
 */
@-moz-document domain("bazos.pl"), domain("bazos.cz"), domain("bazos.sk"), domain("bazos.at") {
: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]]*/;
}
/* prefixing with --p- to avoid collisions with site's styles, or another UserCSS. And to easily see them in the Inspector. */


:root {
	--s-color-lbr: hsl(42, 100%, 6%);
	/* background-color: #FFECBF;
	background-color: hsl(42, 100%, 87%); */

	--s-color-dbr: hsl(24, 100%, 6%);
/* 	background-color: #FFD9BF;
	background-color: hsl(24, 100%, 87%); */
	
	/* 	background-color: #FF6600 = hsl(24, 100%, 50%); */

	--s-color-head: hsl(24, 100%, 15%);
}


/* -- masthead -- */
.listah {
  background-color: var(--s-color-head);
}
/* logo */
.listalogol {
	overflow: hidden;
/*   filter: invert(1); */
}
.listalogol img {
	background: url(https://www.bazos.sk/obrazky/bazosdark.svg) no-repeat;
/* 	background-position-x: 100%; */
/* 	background-size: cover; */
	padding-left: 100%;
/* 	width: 100%; */
/* 	height: 100%; */
}

/* Add new AD button */
.pridati {
	background-color: var(--s-color-dbr);
	/* --was-background-color: #FFD9BF; */
}
/* tweak: hide "Add" button, while editing an AD. Clicking Add by mistake will open another page. The Ad, that is being edited is lost.  */
body:has(.maincontent #formpridani) .listalogop a:has(span.pridati) {
	display: none;
}


/* -- toolbar: Search -- */
/*[[search-toolbar]]*/

/* hints */
.tablenas
,.tablenaspsc
{
	background: var(--p-background);
/* 	box-shadow: 0 0 10px 1px #000000eb; */
/* 	background-color: rgba(0, 0, 0, .3); */
	/* --was-background: #ffffff; */
	color: var(--p-color-primary);
	/* --was-color: #000000; */
	/* --was-border: 1px solid #999; */
}

/* e.g. search box hint, bottom - categories */
.act a {
	color: var(--p-color-link);
	/* --was-color: #000000; */
}


/* breadcrumb */
.drobky a {
	color: var(--p-color-breadcrumb);
}


/* -- sidebar -- */
/* heading */

.nadpismenu {
	background-color: var(--s-color-head);
/* 	background-color: hsl(24, 100%, 50%); */
	/* --was-background-color: #FF6600; */
}
.barvalmenu {
	background-color: var(--s-color-lbr);
	/* --was-background-color: #FFECBF; */
}
.barvaleva a {
	color: var(--p-color-secondary);
}


/* -- results -- */
.inzeraty {
	background: var(--p-background);
	box-shadow: 0 0 10px 1px #000000eb;
/* 	background-blend-mode: darken; */
}
.inzeraty:hover {
/*   background-color: #FBF3E1;
  background-color: hsl(42, 76%, 93%); */
	background-color: hsl(42, 76%, 7%);
	/* --was-background-color: #FBF3E1; */
	background-blend-mode: lighten;
}
.inzeratysmazane {
/* 	background-color: #212121; */
	/* --was-background-color: #dddddd; */
	background: var(--p-background);
	box-shadow: 0 0 10px 1...