4chan.user.styl

/* ==UserStyle==
@name           4chan
@namespace      github.com/openstyles/stylus
@version        1.4.0
@description    A new userstyle
@author         Me

@preprocessor stylus

@var checkbox board-title-image     "Board title image"            1
@var text     board-title-font-size "Board title font size"        18pt
@var text     board-title-pad       "Board title padding multiply" 4

@var checkbox post-full-width       "Full width posts"             1
@var text     thread-margin         "Thread margin"                0
@var checkbox thread-colorful       "Colorful thread borders"      1

@var checkbox image-right-side      "Images on right side"         1
@var checkbox image-popup-filename  "Image filename on hover"      0

@var checkbox boards-hover          "Header boards on hover"       0
@var checkbox color-unread          "Colored thread status"        1

@var checkbox sidebar               "Header -> sidebar"            1
@var checkbox sidebar-fixed         "Fixed elements"               1
@var checkbox sidebar-hover         "Show content on hover"        1
@var number   sidebar-items         "Sidebar items"                4
@var select   sidebar-pos           "Sidebar position" {
	'Left':  'left',
	'Right': 'right'
}
==/UserStyle== */

// Variables
vendors = official;
$small-screen = 768px;
$select-shadow = inset 0 1px 2px rgba(0, 0, 0, 0.1);
$select-size = 16px;
$i = !important;

// Stylus
svar(var) {
	s('var(--%s)', var);
}

cond(n, yes, no) {
	(n == 0 ? no : yes) $i;
}

sel-cond(sel, pos) {
	pos ? s('%s-%s', sel, pos) : sel;
}

color-a(n, bright = true) {
	s = bright ? -2 : null;
	n = n > 6 ? n - 8 : n;

	s('hsla(var(--color%s-h),	var(--color-s%s),	var(--color-l%s), var(--bg-opacity))', n, s, s);
}

// Appearance
bg(n =) {
	background-color: s('var(--bg%s)', n) $i;

	if (n == -tr || n == -tr2 || n == -tr3) {
		backdrop-filter: var(--popup-filter) $i;
	}
}

fg(n =) {
	color: s('var(--fg%s)', n) $i;
}

bgc(n1 =, n2 =) {
	bg(n1);
	fg(n2);
}

hl() {
	background-color: var(--hl) $i;
	color: var(--hl-fg) $i;
}

accent() {
	background-color: var(--accent) $i;
	color: var(--accent-fg) $i;
}

clr(n) {
	color: s('var(--color%s)', n) $i;
}

lnh() {
	line-height: var(--line-height) $i;
}

pad(pos =, n = 1) {
	{sel-cond(padding, pos)}: \
		(n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
}

mar(pos =, n = 1) {
	{sel-cond(margin, pos)}: \
		(n == 0 ? 0 : pos == 0 ? 0 : var(--pad)) $i;
}

shd(n) {
	box-shadow: cond(n, s('var(--shadow-%s)', n), none);
}

rad(n = 1) {
	border-radius: cond(n, var(--border-radius), 0);
}

brd(pos =, color = border) {
	if (color) {
		color = svar(color);
	}

	{sel-cond(border, pos)}: \
		(color == 0 ? none : pos == 0 ? none : var(--border-width) solid color) $i;
	if (!pos) {
		rad(pos);
	}
}

// Position
box(w, h = w) {
	width: w $i;
	height: h $i;
}

flex(display = flex, alignment = center, justification =) {
	display: display $i;
	align-items: alignment $i;
	justify-content: justification $i;
}

// Animation
anim(name =, func = ) {
	@media (prefers-reduced-motion: no-preference) {
		{name ? animation : transition}: name var(--trans-dur) func $i;
	}
}

dropfade() {
	anim(dropfade, cubic-bezier(0.2, 0.9, 0.6, 1));
}

// Focus
focus(p = focus) {
	anim();

	&:{p} {
		border-color: var(--hl) $i;
		box-shadow: var(--shadow-ins) var(--hl) $i;
		outline: none $i;
	}
}

header-focus(class = page-focus) {
	.{class} & {
		--bg2: var(--accent);
		--fg: var(--accent-fg);
		--border: var(--accent-border);
	}

	// Stylus is unable to recognise :where()
	:root:not(:-moz-window-inactive) & {
		--bg2: var(--accent);
		--fg: var(--accent-fg);
		--border: var(--accent-border);
	}
}

// Text
// TODO: replace this
replace-text(content =, text-color = fg, pos = after) {
	color: transparent $i;
	font-size: 0 $i;

	if (content) { // Replace
		&::{pos} {
			content: content $i;
			font-size: var(--font-size) $i;
			color: svar(text-color) $i;
		}
	} else { // Hide
		* {
			font-size: var(--font-size) $i;
			color: svar(text-color) $i;
		}
	}
}

hide-chars(amount, pos, bg =) {
	margin-{pos}: s('-%sch', amount) $i;
	position: relative $i;

	element = pos == left ? before : after;
	&::{element} {
		content: '' $i;
		position: absolute $i;
		inset: 0;
		box(s('%sch', amount), calc(1em * var(--line-height)));
		bg(bg);
	}
}

// Normalisation
disabled() {
	&:disabled {
		opacity: 0.5 $i;
		cursor: not-allowed $i;
	}
}

normalise-select() {
	appearance: none $i;
	bgc(2);
	lnh();
	background-image:
		linear-gradient(55deg, var(--bg2) 43%, transparent 45%),
		linear-gradient(125deg, transparent 53%, var(--bg2) 55%),
		linear-gradient(180deg, var(--bg2) 30%, var(--fg) 30%) $i;
	background-size: 20px 20px $i;
	background-repeat: no-repeat $i;
	background-position: right 50% $i;
	pad();
	padding-right: calc(var(--pad) + 20px) $i;
	brd();
	focus();
	disabled();
}

normalise-input() {
	bgc(2);
	lnh();
	pad();
	brd();
	focus();
	disabled();

	&::placeholder {
		fg(2);
	}
}

normalise-button() {
	bgc(2);
	lnh();
	background-image: none $i;
	padding: var(--pad) calc(var(--pad) * 2) $i;
	brd();
	cursor: pointer $i;
	focus();
	disabled();
}

normalise-color() {
	bg(2);
	pad(0);
	brd();
	box($select-size);
	focus();
	disabled();

	&::-webkit-color-swatch {
		brd(0);
		// Prevent from making it look like a radio input
		border-radius: calc(var(--border-radius) * 0.33) $i;

		&-wrapper {
			pad(0);
		}
	}
}

normalise-range() {
	appearance: none $i;
	outline: none $i;
	bg(2);
	brd();
	border-radius: 100px $i;
	height: ($select-size / 2) $i;
	focus();
	disabled();

	range-track() {
		margin: 0 calc(var(--border-width) * -2) $i;
	}
	range-thumb() {
		appearance: none $i;
		bg(2);
		brd();
		border-radius: 100px $i;
		box-shadow: $select-shadow $i;
		box($select-size);
		focus(active);
	}

	&::-webkit-slider {
		&-container {
			range-track();
		}
		&-thumb {
			range-thumb();
		}
	}

	&::-moz-range {
		&-track {
			range-track();
		}
		&-thumb {
			range-thumb();
		}
	}
}

normalise-checkbox(label = true) {
	if (label) {
		/label {
			lnh();
			flex();
			gap: 1ch $i;
		}
	}

	appearance: none $i;
	bg(2);
	brd();
	// Prevent from making it look like a radio input
	border-radius: calc(var(--border-radius) * 0.33) $i;
	box-shadow: $select-shadow $i;
	mar(0);
	position: relative $i;
	box($select-size);
	min-width: $select-size $i;
	focus();

	&::before,
	&::after {
		content: '';
		position: absolute $i;
		inset: 0;
		background-color: var(--hl) $i;
		transform-origin: 0 0 $i;
	}
	&:disabled {
		&::before,
		&::after {
			background-color: var(--fg2) $i;
		}
	}

	&::before {
		transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0) $i;
	}
	&:indeterminate::before {
		transform: rotate(0) translateY(37.5%) translateX(10%) scaleX(0.8) scaleY(0.25) $i;
		transition-duration: 33.3ms $i;
	}
	&::after {
		transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(0) $i;
	}

	&:checked {
		&::before {
			transform: rotate(-45deg) translateY(45%) translateX(-30%) scaleX(0.25) scaleY(0.4) $i;
			transition-duration: 33.3ms $i;
		}
		&::after {
			transform: rotate(225deg) translateY(-30%) translateX(-95%) scaleX(0.25) scaleY(1.2) $i;
			transition-delay: 33.3ms $i;
			anim();
		}
	}
}

normalise-radio() {
	appearance: none $i;
	bg(2);
	brd();
	border-radius: 50% $i;
	box-shadow: $select-shadow $i;
	mar(0);
	position: relative $i;
	box($select-size);
	focus();

	&::before {
		content: '';
		position: absolute $i;
		inset: $select-size / 5;
		background-color: var(--hl) $i;
		border-radius: 50% $i;
		transition: transform var(--trans-dur) linear $i;
		transform: scale(0) $i;
	}
	&:disabled::before {
		background-color: var(--fg2) $i;
	}
	&:checked::before {
		transition-timing-function: cubic-bezier(0, 0, 0.3, 1.5) $i;
		transform: scale(1) $i;
		anim();
	}
}

normalise-header(first = true) {
	fg();
	lnh();
	text-transform: uppercase $i;
	letter-spacing: 1px $i;
	pad(0);
	pad(bottom);
	brd(bottom);
	mar(0);
	mar(bottom);
	if (!first) {
		margin-top: calc(var(--pad) * 2) $i;
	}
}

// Userstyle-specific functions
fa(char) {
	font-size: 0 $i;

	&::before {
		content: char;
		font: var(--font-size) FontAwesome $i;
	}
}

normal-colors() {
	// Don't get me affected by header-focus()
	--bg2: var(--reserve-bg2) $i;
	--fg: var(--reserve-fg) $i;
	--fg2: var(--reserve-fg2) $i;
	--border: var(--reserve-border) $i;
}

@-moz-document domain("4chan.org"), domain("4channel.org") {
	/**
	 * Variables
	**/
	body {
		// Settings
		settings = \
			'board-title-font-size',
			'board-title-pad',
			'thread-margin',
			'sidebar-items'

		for i in settings {
			\-\-{i}: convert(i);
		}

		// Save variables for future use
		--reserve-bg2: var(--bg2);
		--reserve-fg: var(--fg);
		--reserve-fg2: var(--fg2);
		--reserve-border: var(--border);
		--reserve-pad: var(--pad);

		// Other
		--header-size: calc(
			var(--font-size) * var(--line-height) \
			+ var(--pad) * 2 + var(--border-width)
		);
		--header-top-pos: calc(
			var(--header-h) + var(--body-pad) \
			+ var(--board-title-height) + var(--pad)
		);
		--board-title-height: board-title-image \
			? calc(
				var(--board-title-font-size) * var(--line-height) \
				+ var(--pad) * var(--board-title-pad) * 2 + var(--pad)
			) \
			: var(--header-size);

		--thread-border: 1px;
		--gradient-size: 2ch;
	}

	.is_index {
		--header-top-pos: s(
			'calc(var(--header-h) + var(--body-pad) + var(--board-title-height) - var(--border-width) %s)',
			unquote(sidebar ? '+ var(--pad)' : '- var(--pad) / 2')
		);
	}

	/**
	 * Global
	**/
	* {
		box-sizing: border-box $i;
	}

	html,
	body {
		background: none var(--bg);
	}
	body {
		fg();
		lnh();
		pad(0);
		margin: var(--body-pad);
		margin-top: calc(var(--header-h) + var(--body-pad));
	}

	a {
		&,
		&:hover {
			color: var(--fg-link) $i;
		}
		&:hover {
			text-decoration: underline;
		}
	}

	input {
		&:not([type]),
		&[type="text"],
		&[type="number"],
		&[type="search"],
		/.field,
		/textarea {
			normalise-input();

			@media (prefers-reduced-motion: no-preference) {
				transition-property: border-color $i;
			}
		}
		&[type="submit"],
		&[type="button"],
		/button {
			normalise-button();
		}
		&[type="checkbox"] {
			normalise-checkbox();
		}
		&[type="range"] {
			normalise-range();
			shd(0);
		}
	}
	input,
	button {
		height: unset $i;
	}
	select {
		normalise-select();
	}

	.warning {
		clr(9);
	}
	.new {
		clr(10);
	}
	.subject {
		fg();
	}
	.current {
		hl();
	}
	.dead-thread,
	.disabled:not(.replies-quoting-you) {
		opacity: 1;
	}
	.brackets-wrap {
		&::before,
		&::after {
			display: none;
		}
	}

	.fa,
	.menu-button,
	.close {
		fg(2);
		box(unset);

		&::before {
			font-size: var(--font-size) $i;
		}

		&:not(.active):hover {
			text-decoration: none $i;

			&::before {
				fg();
			}
		}
	}
	.menu-button {
		fa('\f078');
		pad(0);

		&.active {
			color: var(--hl) $i;
		}

		.fa,
		#header-bar & > i {
			display: none;
		}
	}

	/**
	 * Hide elements
	**/
	// I. Top buttons
	.updatelink,
	[href="#top"],
	[href="#bottom"],
	[href$="#index"],
	.navLinks [href$="#catalog"],

	// II. Top
	#toggleMsgBtn, #globalMessage,
	#togglePostFormLink,
	#bannerCnt,
	.middlead,
	#blotter,

	// III. Bottom
	#boardNavDesktopFoot,
	.bottomCtrl,
	#absbot,

	// IV. Post
	.archivedIcon,
	.postInfo > input,

	// V. 404 page
	#hd,
	.boxbar,

	// VI. Unsorted
	#js-snowfield,
	#tooltip,
	hr,

	// VII. 4chan X
	#fourchanx-settings .reset,
	.qr-link-container,

	// VIII. Quick reply
	#qr > .move > label,
	#qr-oekaki-button,
	.closed ~ #qr,
	#shortcut-qr,
	#qr select,
	#t-help
	{
		display: none $i;
	}

	/**
	 * Header
	**/
	#header-bar {
		bgc(2);
		header-focus();
		pad();
		brd(0);
		brd(bottom);
		shd(0);
		flex(,,space-between);
	}
	#custom-board-list,
	#full-board-list {
		vertical-align: unset;
		display: flex;

		if (!sidebar) {
			margin: calc(var(--pad) * -1);

			& > a {
				pad();
			}
		}

		& > a {
			text-decoration: none $i;

			&:not(.current) {
				fg(2);
			}
			&:hover {
				fg();
			}
		}
	}
	if (boards-hover) {
		#custom-board-list {
			--hover-pos: var(--pad);
			position: absolute;
			left: -100%;
			top: 0;
			bottom: 0;
			height: 100%;
			bg(2);
			flex();
			anim();

			@media (max-width: $small-screen) {
				--hover-pos: 0;
				top: var(--header-h);
				flex-direction: column;
				height: min-content;
				pad();
				brd(bottom);
				brd(right);
				shd(big);
			}
			#header-bar:hover & {
				left: var(--hover-pos);
			}

			@media (min-width: $small-screen) {
				&::after {
					content: '';
					box(var(--gradient-size), 100%);
					margin-right: calc(var(--gradient-size) * -1);
					background-image: linear-gradient(
						90deg,
						var(--bg2),
						transparent
					);
				}
			}
		}
	}
	.shortcut {
		mar(left, 0);
		vertical-align: unset;

		& > a {
			fg(2);
			pad(0);
		}
	}
	#shortcut {
		&-updater,
		&-stats {
			&::after {
				content: var(--delim);
				display: unset;
			}
		}
		&s {
			flex(,,right);
			gap: 1ch;

			:root.shortcut-icons & .fa {
				font-size: 0 $i;

				&::before {
					top: 0 $i;
					font-size: var(--font-size) $i;
					mar(top, 0);
				}
			}
		}
	}
	#updater {
		min-width: 2ch $i;
	}
	if (!sidebar) {
		@media (min-width: $small-screen) {
			#yous {
				display: none;
			}

			#update-timer:not(.empty)::after {
				content: ' seconds';
			}
			#post-count::after {
				content: ' posts';
			}
			#file-count::after {
				content: ' files';
			}
			#ip-count::after {
				content: ' IPs';
			}
			#page-count::before {
				content: 'Page ';
			}
		}
	}

	// Notifications
	#notifications {
		top: calc(100% + var(--border-width)) $i;

		.message,
		.close {
			pad();
		}
	}
	.notification {
		backdrop-filter: var(--popup-filter);
		normal-colors();
		fg();
		text-shadow: none;
		brd();
		brd(top, 0);
		border-radius: 0 $i;
		margin: auto;
		shd(mid);
		flex();
		flex-direction: row-reverse;
		transition: none;

		&:last-child {
			border-radius: 0 0 var(--border-radius) var(--border-radius) $i;
		}

		colors = {
			error:   1,
			success: 2,
			warning: 3,
			info:    4
		}
		for k, v in colors {
			&.{k} {
				background-color: color-a(v);
				border-color: s('var(--color%s)', v + 8) $i;
			}
		}
	}

	/**
	 * Content
	**/
	.board {
		margin: 0 var(--thread-margin) $i;
		margin-top: calc(var(--header-size) + var(--pad) * 2) !important;

		if (board-title-image) {
			&Banner {
				background-image: url('https://i.imgur.com/BZIzz1k.jpg');
				background-position: center 50%;
				background-repeat: no-repeat;
				background-size: cover;

				images = {
					a:   'https://i.imgur.com/5zmzyc4.jpg',
					c:   'https://i.imgur.com/4c5m2KO.jpg',
					ck:  'https://i.imgur.com/hJ7lLp2.jpg',
					e:   'https://i.imgur.com/5pjIJyp.jpg',
					g:   'https://i.imgur.com/tpkZt1F.jpg',
					gif: 'https://i.imgur.com/8f3meO8.jpg',
					h:   'https://i.imgur.com/eHfO884.jpg',
					ic:  'https://i.imgur.com/Kx1Yf6j.jpg',
					jp:  'https://i.imgur.com/6S4B00D.jpg',
					toy: 'https://i.imgur.com/hJvjWm7.jpg',
					v:   'https://i.imgur.com/6FTuSYF.png',
					vg:  'https://i.imgur.com/W9t9RYg.jpg',
					vp:  'https://i.imgur.com/0vXqiaD.jpg',
					w:   'https://i.imgur.com/GNmXbof.jpg',
					wg:  'https://i.imgur.com/avTTwET.jpg',
					wsg: 'https://i.imgur.com/RNeZ7PR.jpg'
				}
				for k, v in images {
					~/_{k} & {
						background-image: url(v);
					}
				}
			}
			&Title {
				font-size: var(--board-title-font-size) $i;
				font-family: cursive $i;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #fff $i;
				text-shadow: 2px 2px #000;
				letter-spacing: 0 $i;
				padding: calc(var(--pad) * var(--board-title-pad)) var(--pad);

				&[contenteditable="true"] {
					outline: none;
					box-shadow: 0 0 0 2px var(--hl);
				}
			}
			&Subtitle {
				display: none;
			}
		} else {
			&Banner {
				flex(,,space-between);
				normalise-header();
			}
			&Title {
				letter-spacing: inherit $i;
			}
			&Subtitle {
				fg(2);
			}
		}
	}

	// Catalog
	.catalog {
		&-thread {
			brd(0);
			mar(0);
			mar(right);
			mar(bottom);
		}
		&-link {
			bg(2);
			height: 120px;
			overflow: hidden;
			flex(,,center);
		}
		&-thumb {
			brd(0);
			shd(0);
		}
		&-stats {
			pad();
			brd(top);
			flex(,,center);
			gap: 1ch;
		}
		&-icons:empty {
			display: none;
		}
	}
	.json-index {
		--header-size: 0px;

		&.board::before {
			content: 'Catalog';
			normalise-header();
			display: block;
			text-align: left;
		}

		.post {
			mar(0);

			&Info {
				pad(0);
				brd(0);
			}
			&Message {
				brd(top);

				&:empty {
					display: none;
				}
			}
		}
		.subject {
			pad();
			brd(top);

			&:empty::before {
				content: 'No subject';
			}

			.thread.filter-highlight ^[1..-1] {
				--fg2: var(--hl-fg);
				hl();
			}
			.watched ^[1..-1]::after {
				content: '\f006';
				font: var(--font-size) FontAwesome $i;
				fg(2);
				margin-left: 1ch;
			}
		}
	}

	// Top icons
	.navLinks {
		position: absolute;
		top: sidebar ? var(--top-icons-top-pos) : var(--header-top-pos);
		right: var(--body-pad);

		.is_index & {
			--top-icons-top-pos: calc(
				var(--body-pad) - var(--border-width) - var(--pad) * 2
			);
		}
		.is_thread & {
			--top-icons-top-pos: var(--pad);
		}

		// Catalog
		/#index-options,
		& {
			flex();
			gap: 1ch;
		}
		/#index-mode,
		/#hidden-label,
		/#index-search-clear,
 		&.json-index .brackets-wrap {
			display: none;
		}

		// Thread
		&Bot,
		&.desktop {
			replace-text();
		}

		a {
			text-decoration: none;
			position: absolute;
			top: sidebar ? calc(var(--body-pad) - var(--pad)) : 0;

			&:not(:hover) {
				fg(2);
			}
		}
		.qr-link {
			&-container-bottom {
				margin-left: unset;
				width: unset;
				left: unset;
			}
			&-bottom {
				fa('\f064');
				right: calc(var(--font-size) * 1.5);
			}
		}
		.threadnewlink > a {
			fa('\f021');
			right: calc(var(--font-size) * 3);
		}
	}
	#index-search {
		width: 150px $i;
	}
	.closed {
		bg();
		fa('\f02d');
		clr(9);
		pad(0);
		width: var(--font-size);
		position: absolute;
		right: calc(var(--body-pad) + var(--font-size) * 1.5);
		top: var(--header-top-pos);
		z-index: 1;
	}
	.watch-thread-link {
		fa('\f006');
		opacity: 1;
		background: none $i;
		fg(2);
		pad(0);
		box(var(--font-size));
		position: absolute;
		top: var(--header-top-pos);
		right: var(--body-pad);
		z-index: 1;

		&:hover {
			fg();
			text-decoration: none;
		}

		&.watched {
			fa('\f005');
		}
	}

	// Thread
	.thread {
		width: 100%;

		&Container {
			pad(left);
			// One reply threads look off with colorful threads
			border-left: var(--thread-border) solid var(--border);
			mar(left);
			mar(bottom);

			if (thread-colorful) {
				sel = ''

				for i in range(1, 3) {
					for i in range(1, 7) {
						sel = s('%s > %s', unquote(sel), unquote(selector()));

						{sel} {
							border-left-color: s('var(--color%s)', i);
						}
					}
				}
			}

			& &,
			~/ & {
				mar(left, 0);
			}
		}
	}
	.post {
		bg(3);
		pad(0);
		brd();

		/div.thread > div:nth-of-type(2) > div.reply,
		& { // wtf
			mar(0);
		}

		.board .deleted-post & {
			anim();

			&:not(:hover) {
				opacity: .5;
				anim();
			}
			.warning {
				display: none;
			}
		}
		.inline & {
			pad(0);
			mar(0);
			brd(0);

			.threadContainer & {
				mar(left, 0);
			}
		}
		.threadContainer & {
			@media (max-width: $small-screen) {
				width: calc(100% - var(--pad));
			}
		}

		if (post-full-width) {
			width: 100% $i;

			&:not(.catalog-post) .menu-button {
				position: absolute;
				right: var(--pad);
			}

			&.op > &Info > .menu-button {
				right: calc(var(--body-pad) + var(--border-width) + var(--pad));
			}
		}

		&:target {
			bg(3);
			focus(target);
		}

		&.op {
			overflow: hidden $i;

			if (!image-right-side) {
				.nameBlock {
					// TODO 250px
					margin-left: calc(-250px - var(--pad));
				}
			}

			// Make OP look the same as normal post
			.file {
				&Thumb {
					margin-top: calc(
						var(--font-size) * var(--line-height) * 2 \
						+ var(--pad) * 4 + var(--border-width)
					) $i;
				}
				&Text {
					position: absolute;
					top: calc(
						var(--font-size) * var(--line-height) \
						+ var(--pad) * 2 + var(--border-width)
					);
					{image-right-side ? right : left}: 0;
				}
			}
			& > .postMessage {
				margin-top: calc(
					var(--font-size) * var(--line-height) + var(--pad) * 2
				) $i;
			}
			& > .postInfo > .inline {
				margin-top: calc(
					var(--pad) * 3 + var(--font-size) * var(--line-height)
				) $i;
			}
		}
		.thread &Container {
			mar(bottom);
		}
		&Info {
			bg(2);
			pad();
			padding-right: calc(5ch + var(--pad) * 2) $i;
			brd(bottom);
			position: relative;
		}
		[title="Link to this post"] {
			replace-text('#', fg2);
		}
		div& div&Info span&Num a {
			fg(2);

			&:hover {
				fg();
			}
		}
		&Message {
			mar(0);
			pad();
		}
	}
	.show-reply-button {
		clr(4);
		margin-right: 1ch;

		&:hover {
			clr(12);
			text-decoration: none $i;
		}
	}
	// For "hide reply" button
	.replyContainer:not(.opContainer) {
		position: relative;
	}
	.container {
		margin-left: 1ch;

		.bottom-backlinks & {
			text-align: right;
			mar(left, 0);
			mar(right);
			mar(bottom);
		}
	}
	.quote {
		clr(2);
	}
	.backlink,
	.quotelink {
		clr(3);

		&:hover {
			clr(11);
		}

		&,
		&.deadlink:not(.forwardlink) {
			text-decoration: none $i;
		}
	}
	.filtered {
		opacity: .5;
	}
	.backlink {
		fa('\f075');
	}
	.forwardlink {
		&,
		&::before {
			hl();
		}
	}
	.name {
		clr(4);
	}
	.postertrip {
		clr(5);
	}
	.replacedSideArrows {
		position: absolute;
		top: var(--pad);
		right: calc(var(--pad) + 3ch);
		z-index: 1;

		& > a {
			opacity: 1 $i;
			pad(0);
			mar(0);
			float: unset;
			left: 0 $i;
		}
	}
	.file {
		position: relative;

		&Text {
			mar();
			mar(bottom, 0);
			max-width: unset $i;
		}
		&Thumb {
			mar();

			img {
				border-radius: var(--border-radius);
			}
		}

		if (image-right-side) {
			&Text {
				text-align: right;
			}
			&Thumb {
				float: right $i;
			}
		}

		if (image-popup-filename) {
			&Text {
				.post:not(.op) & {
					bg(-tr2);
					brd(bottom);
					max-width: unset;
					display: none;
					position: absolute;
					left: 0;
					right: 0;
					pad();
					mar(0);
					dropfade();
				}

				.postInfo:hover + .file > &,
				&:hover {
					display: unset;
				}
			}
		}

		a:not(:hover) {
			text-decoration: none;
		}
	}
	:root.fourchan-x.highlight-you {
		.yourPost {
			& > .reply,
			&.opContainer {
				brd(left, color5);
			}
		}
		.quotesYou > .reply {
			brd(left, color3);
		}
	}
	.inline {
		background-color: transparent $i;
		brd();
		mar(0);
		mar(top);
	}
	#qp {
		brd(0);

		.post {
			mar(0);
		}
	}
	.qphl {
		outline: none;
		border-color: var(--hl) $i;
	}
	#unread-line:not([hidden]) {
		text-align: center;
		brd(0);
		mar(bottom);
		display: block $i;
		position: relative;
		height: auto;

		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 50%;
			box(100%, var(--thread-border));
			background-color: var(--color1);
		}
		&::after {
			content: 'NEW POSTS';
			position: relative;
			display: inline-block;
			bg();
			clr(9);
			padding: 0 var(--pad);
		}
	}
	.op {
		.thread &Container {
			shd(0);

			.subject {
				normalise-header(true);
				position: absolute;
				left: var(--body-pad);
				right: var(--body-pad);
				top: var(--header-top-pos);

				&:empty::before {
					content: 'No subject';
				}
			}
		}
		& > .postInfo {
			position: unset;
		}
	}

	// Syntax highlighting
	.prettyprint {
		bg();
		font-family: var(--font-code) $i;
		white-space: pre-wrap;
		pad();
		brd();
		margin: var(--pad) 0;
		max-width: unset;
		display: block;

		&:last-child {
			mar(bottom, 0);
		}

		& + br {
			display: none;
		}
	}

	.pun,
	.com {
		fg(2);
	}
	.fun,
	.kwd {
		clr(9);
	}
	.str,
	.atv {
		clr(10);
	}
	.opn,
	.clo {
		clr(11);
	}
	.typ,
	.atn,
	.dec,
	.var {
		clr(12);
	}
	.tag,
	.lit {
		clr(13);
	}
	.pln {
		clr(14);
	}

	// 404
	.top-box {
		bg();
		pad(0);
		brd(0);
		mar(0);
	}
	.boxcontent {
		pad(0);
		margin-top: var(--body-pad);
	}
	#ft {
		brd(top);
	}

	/**
	 * Popups
	**/
	#overlay {
		background-color: transparent;
	}
	.dialog {
		bgc();
		pad(0);
		brd(,accent-border);
		shd(big);
		dropfade();

		.close {
			fa('\f00d');
			pad(0);
			position: unset $i;
		}
	}
	#qr,
	#thread-watcher {
		& > .move {
			accent();
			pad();
			brd(bottom, accent-border);
			border-radius: var(--border-radius) var(--border-radius) 0 0 $i;
			flex(,,center);
			replace-text(var(--window-name), accent-fg, before);

			&::before {
				text-align: center;
				mar(right);
				flex-grow: 1;
			}
		}
	}

	// Quick reply
	#qr {
		--window-name: 'Post';

		.is_index & {
			--window-name: 'New Thread';
		}

		& > form {
			pad();
			display: flex;
			flex-direction: column;
			gap: var(--pad);
		}
		.persona,
		.textarea {
			gap: var(--pad);
		}
		textarea {
			min-width: 322px;
		}
		/#sjis-toggle,
		&.sjis-preview textarea {
			font: 16px 'IPAMonaPGothic', 'Mona', 'MS PGothic', monospace $i;
		}
		input[type="checkbox"] {
			opacity: 1 $i;
			bg(2);
			top: 0 $i;
		}
		.checkbox-letter {
			display: none;
		}

		&-filename {
			&:focus {
				shd(0);
			}

			&-container {
				gap: 1ch;
				focus(focus-within);

				& > label,
				& > a {
					mar(0);
				}
				& > a {
					opacity: 1;
				}
			}
		}
		&-filename-container > a,
		&-filename,
		&-no-file {
			pad(0);
			mar(0);
		}
		&-no-file {
			replace-text('None', fg2);
		}
	}
	#t {
		&-load {
			replace-text('Get');
			mar(right);
			width: unset $i;
		}
		&-resp {
			font-family: var(--font-code) $i;
			text-transform: unset $i;
			width: calc(6ch + var(--pad) * 2 + var(--border-width) * 2) $i;

			&::placeholder {
				color: transparent $i;
			}
		}
		&-cnt {
			mar(top);
			mar(bottom);
		}
	}
	:root.ua-blink #qr .captcha-container > div > div:first-of-type {
		overflow: auto;
	}
	input[type="submit"] {
		position: absolute;
		right: var(--pad);
		margin-top: s(
			'calc(-80px - var(--header-h) - var(--pad) * 4 - %s + var(--border-width) * 3)',
			$select-size
		);
	}
	#file-n-submit {
		height: unset;
		mar(0);
		gap: var(--pad);

		& > input {
			width: unset $i;
		}
		&:not(.has-file) #qr-spoiler-label {
			display: none $i;
		}
	}
	#char-count {
		bgc();
		brd(left);
		brd(top);
		border-radius: var(--border-radius) 0 var(--border-radius) 0;
	}

	// Thread watcher
	#thread-watcher {
		--window-name: 'Threads';

		.menu-button,
		.close {
			&::before {
				margin-left: 1ch;
			}
		}
		.refresh {
			pad(0);
		}
	}
	#watched-threads {
		max-width: 300px;

		& > div {
			pad(0);
			flex(,,space-between);
			flex-direction: row-reverse;
			gap: 1ch;
		}
		a {
			pad();
		}
		.current a {
			&,
			&:hover::before {
				color: var(--hl-fg) $i;
			}
		}
		.watcher-link {
			pad(right, 0);
		}
		.fa-times {
			pad(left, 0);
		}
	}
	#watcher-status:not(:empty) {
		&::before {
			content: '(';
		}
		&::after {
			content: ')';
		}
	}
	.watcher {
		&-link {
			fg(2);
			gap: 1ch;
			width: 100%;
			overflow: auto;

			&:hover {
				fg();
			}
		}
		&-page,
		&-unread,
		&-title {
			mar(0);
		}

		if (color-unread) {
			&-page,
			&-unread {
				display: none;
			}
			.replies-unread:not(.current) &-title {
				clr(3);

				&:hover {
					clr(11);
				}
			}
			[data-page="9"]:not(.current) &-title,
			[data-page="10"]:not(.current) &-title {
				clr(1);

				&:hover {
					clr(9);
				}
			}
		}
	}

	// Menu
	#menu {
		&,
		.submenu {
			brd();
		}

		&[data-type="header"] {
			normal-colors();
		}

		input {
			--pad: calc(var(--reserve-pad) / 2);
		}

		// Icons
		/*
		 * No icons for submenus to align with Discord,
		 * as it doesn't have them.
		 */
		icons = {
			'thread watcher': {
				':nth-child(1)':                f122 // Open all threads
				':nth-child(2)':                f086 // Open unread threads 6e
				':nth-child(3)':                f02d // Open dead threads
				':nth-child(4)':                f1f8 // Prune dead threads
				':nth-child(5)':                f10e // Dismiss posts quoting you
			}

			'header': {
				'.watch-thread':                f006
				'.unwatch-thread':              f005
				':nth-child(2)':                f097 // Mark all unread

				// Gallery
				'.gallery-link': {
					':nth-child(6)':              f1de // Slide Delay
				}

				// Header
				':nth-child(6)': {
					':nth-child(9)':              f040 // Edit custom board navigation
				}

				// Updater
				':nth-child(7)': {
					':nth-child(8)':              f021 // Interval
				}
			}

			'post': {
				'.report-link':                 f024
				'.copy-text-link':              f0c5
				'.edit-link':                   f040
				'.download-link':               f019

				// Hide
				'[style="order: 20;"]': {
					':nth-child(1)':              f070 // Apply
				}

				// Delete
				'.delete-link': {
					':nth-child(1)':              f03a // Post
					':nth-child(2)':              f15b // File
				}

				// Filter
				'[style="order: 50;"]': {
					'[data-type="name"]':         f007
					'[data-type="uniqueID"]':     f292
					'[data-type="capcode"]':      f084
					'[data-type="subject"]':      f1dc
					'[data-type="comment"]':      f075
					'[data-type="filename"]':     f15b
					'[data-type="dimensions"]':   f03e
					'[data-type="filesize"]':     f047
					'[data-type="MD5"]':          f292
				}

				// Archive
				'[style="order: 60;"]': {
					// May not be a good idea to rely on this ...
					'[href*="/#"]':               f03a // Post
					'[href*="/search/username"]': f007 // Name
					'[href*="/search/capcode"]':  f084 // Capcode
					'[href*="/search/subject"]':  f1dc // Subject
					'[href*="/search/filename"]': f15b // Filename
					'[href*="/search/image"]':    f292 // Image MD5
				}
			}
		}
		menu-icon(icon) {
			&::before {
				content: s('"\%s"', icon);
			}
		}
		for i in icons {
			&{s('[data-type="%s"]', unquote(i))} {
				for element, icon in icons[i] {
					& > {element} {
						if (typeof(icon) == 'ident') {
							menu-icon(icon);
						} else {
							for element, icon in icon {
								& > .submenu > {element} {
									menu-icon(icon);
								}
							}
						}
					}
				}
			}
		}
	}
	.entry {
		fg();
		text-decoration: none $i;
		padding: var(--pad) s('calc(var(--pad) + 1ch + %s)', $select-size) $i;

		&::before {
			font: var(--font-size) FontAwesome $i;
			position: absolute;
			left: var(--pad);
			box(
				var(--font-size),
				calc(var(--font-size) * var(--line-height))
			);
			flex(,,center);
		}

		&:not(.disabled).focused {
			hl();
		}
		&.disabled {
			fg(2);
			pointer-events: none;
		}

		input[type="checkbox"] {
			margin-left: s('calc(%s - 1ch)', $select-size * -1) $i;
			top: 0;
		}
	}
	.submenu {
		margin-top: calc(var(--border-width) * -1);
	}
	.has-submenu::after {
		content: '\f054';
		font-family: FontAwesome $i;
		right: var(--pad);
		brd(0);
		mar(0);

		.left & {
			content: '\f053';
		}
	}
	@css {
		.catalog-thread {
			--watch-thread-icon: '\f006';

			&.watched {
				--watch-thread-icon: '\f005';
			}
		}

		#menu {
			&[data-type="header"] {
				& > :is(:nth-child(2), :nth-child(4), :nth-child(7)),
				& > :nth-child(5) > .submenu > :nth-child(4),
				& > :nth-child(6) > .submenu > :is(:nth-child(4), :nth-child(7)),
				& > :nth-child(7) > .submenu > :is(:nth-child(2), :nth-child(5)) {
					border-bottom: var(--border-width) solid var(--border);
				}
			}

			&[data-type="thread watcher"] {
				& > :nth-child(5) {
					border-bottom: var(--border-width) solid var(--border);
				}

				& > :is(:nth-child(11), :last-child) {
					border-top: var(--border-width) solid var(--border);
				}
			}

			&[data-type="post"] {
				.catalog-thread & > :first-child::before {
					content: var(--watch-thread-icon);
				}

				& > .copy-text-link,
				& > [style="order: 60;"] > .submenu > :is(
					:nth-child(2), /* Name */
					:nth-child(3), /* Subject */
				):nth-last-child(3),
				[data-type="comment"]:not(:last-child) {
					border-bottom: var(--border-width) solid var(--border);
				}

				& > .toggle-you,
				.reply & [data-type="comment"],
				[data-type="subject"] {
					border-top: var(--border-width) solid var(--border);
				}
			}
		}
	}

	// Settings
	#fourchanx-settings {
		padding-top: var(--header-h) $i;
		position: relative;
		box(100vh, 75vh);

		&::before {
			content: 'Options';
			position: absolute;
			inset: 0;
			height: calc(var(--font-size) * var(--line-height));
			accent();
			text-align: center;
			pad();
			padding-right: calc(var(--pad) * 2 + 2ch) $i;
			brd(bottom, accent-border);
			border-radius: var(--border-radius) var(--border-radius) 0 0;
		}

		& > nav {
			bg(2);
			brd(bottom);
			pad(0);
		}
		.close {
			position: absolute $i;
			top: 0;
			right: 0;
		}
		.section {
			&-container {
				bg();
				pad();
				border-radius: 0 0 var(--border-radius) var(--border-radius) $i;

				& > section {
					display: flex;
					flex-direction: column;
					gap: calc(var(--pad) * 2) $i;
				}
			}
			&-main div::before {
				border-color: var(--border) $i;
			}
			&-filter {
				height: 100% $i;

				/#sauce-doc,
				& > select {
					width: fit-content;
				}
				& > div {
					height: calc(100% - var(--pad) * 2) $i;
				}
				textarea {
					height: 100%;
					resize: none;
				}
			}
			&-advanced {
				a:not(:hover) {
					text-decoration: none;
				}
				label {
					display: inline-flex $i;
				}
			}
		}
		.sections-list,
		.credits {
			display: flex;
			replace-text();

			& > a {
				text-decoration: none;
				fg(2);
				pad();

				&:not(.tab-selected):hover {
					fg();
				}
			}
			& > .tab-selected {
				hl();
			}
		}

		label {
			text-decoration: none;
			margin-top: calc(var(--pad) / 2);
		}
		input[type="checkbox"] {
			z-index: 1;
		}
		.description {
			fg(2);
			hide-chars(1, left);
			margin-left: s('calc(%s - 1ch)', $select-size) $i;
		}
		.suboption-list {
			&::before {
				left: ($select-size / 2);
				top: calc(var(--font-size) * -2);
			}

			& > div {
				background-color: transparent $i;
				padding-left: $select-size + 1px;

				&::before {
					left: ($select-size / 2);
					width: ($select-size / 2);
				}
			}
		}
		code {
			bgc(2);
			brd();
		}
	}
	fieldset {
		pad(0);
		brd(0);
		mar(0);
	}
	legend {
		normalise-header();
		width: 100%;
	}
	li {
		pad(0);

		&::before {
			content: ' -\00a0';
		}
	}
	.note {
		font-style: normal $i;
		margin-left: 6ch $i;
		position: relative;

		&::before {
			content: 'NOTE:\00a0';
			position: absolute;
			left: -6ch;
		}
	}

	// Gallery
	.gal {
		for k, v in prev right next left {
			&-{k} {
				brd(v);

				&::after {
					{v}: 25%;
					border-{v}-color: var(--fg);
				}
			}
		}

		&-buttons,
		&-sauce:empty {
			display: none;
		}
		&-prev,
		&-next {
			opacity: 1;
			bg(2);
			flex: 0 0 calc(12px + var(--pad) * 2);

			&:hover::after {
				background-color: var(--hl);
				border-color: var(--hl-fg);
			}
		}
		&-thumbnails {
			bg();
			brd(left);
			flex: unset;
		}
		&-thumb {
			pad();
		}
		&-highlight {
			hl();
		}
		&-labels:not(&-hide-thumbnails) {
			--gallery-width: 157px;
		}
		:root&-fit-height:not(&-pdf) &-viewport &-labels {
			right: calc(
				var(--scrollbar-width) + var(--body-pad) + var(--gallery-width, 0px)
			) $i;
			bottom: var(--body-pad) $i;
		}
		&-name,
		&-count,
		&-sauce {
			bgc();
			pad();
			brd();
			mar(top);
		}
	}

	/**
	 * Sidebar
	**/
	if (!boards-hover && sidebar) {
		// Global
		body {
			mar(top, 0);
		}
		#-sidebar-separator {
			top: 0;

			if (sidebar-pos == right) {
				right: calc(
					var(--sidebar-width) - var(--sidebar-separator-width) / 2
				);
				left: auto;
			}
		}
		#header-bar {
			normal-colors();
			margin-top: calc(var(--header-h) * -1);
			z-index: 46 $i;
		}
		#notifications {
			position: fixed $i;
			{sidebar-pos}: var(--sidebar-width);
			top: 0 $i;
		}
		#a-gallery {
			z-index: 46;
		}
		#yous {
			position: absolute;
			{sidebar-pos}: var(--pad);
			top: calc(
				var(--header-h) + var(--pad) + 100vh \
				- var(--font-size) * var(--line-height) * 2 - var(--pad) * 4
			);
			width: calc(var(--sidebar-width) - var(--pad) * 2) $i;
			text-align: sidebar-pos == left ? right : left;

			#header-bar:not(:has(> #shortcuts:hover)) & {
				display: none $i;
			}
		}
		#board-list > span,
		#watched-threads {
			&::-webkit-scrollbar {
				&-button,
				&-track {
					--bg2: var(--bg);
				}
			}
		}
		#thread-watcher .close,
		#qr .close,
		.boardList > span,
		#shortcut-watcher {
			display: none $i;
		}

		// Banner
		.board {
			padding-{sidebar-pos}: var(--sidebar-width) $i;

			&::after {
				content: '';
				position: fixed;
				{sidebar-pos}: 0;
				top: 0;
				box(calc(var(--sidebar-width) - var(--border-width)), 100vh);
				bg(2);
				brd(sidebar-pos == left ? right : left);
			}

			&Banner {
				position: fixed;
				top: 0;
				{sidebar-pos}: 0;
				z-index: 1;
				width: var(--sidebar-width);
				bg(2);
				brd(sidebar-pos == left ? right : left);
			}

			if (!board-title-image) {
				/body {
					--board-title-height: calc(var(--header-size) + var(--pad));
				}
				&Banner {
					brd(sidebar-pos == left ? right : left, 0);
					mar();
					width: calc(var(--sidebar-width) - var(--pad) * 2);
				}
				&Title {
					mar(0);
				}
			}
		}

		// Boards
		#board-list {
			position: absolute;
			{sidebar-pos}: 0;
			top: 0;
			margin-top: calc(
				var(--threads-pos) + var(--pad) \
				+ var(--section-height) + var(--header-h)
			);
			box(var(--sidebar-width), var(--section-height));
			overflow: auto;
			z-index: 10;

			&::before {
				content: 'Boards';
				normalise-header();
				mar();
				mar(bottom, 0);
			}

			[title] {
				replace-text(attr(title), fg2, before);
				pad();

				&:not(.current):hover::before {
					fg();
				}
			}
			.current {
				color: transparent $i;

				&::before {
					hl();
				}
			}
		}
		#custom-board-list,
		#full-board-list {
			brd(sidebar-pos == left ? right : left);
			position: unset $i;

			&,
			/#board-list,
			/.boardList {
				display: flex;
				flex-direction: column;
			}
		}
		.show-board-list-button,
		.hide-board-list-button {
			position: absolute;
			top: var(--pad);
			right: var(--pad);
			height: calc(var(--font-size) * var(--line-height));
			flex();
		}
		.show-board-list-button {
			fa('\f055');
		}
		.hide-board-list-button {
			fa('\f056');
		}

		// Shortcuts
		#shortcut {
			&s {
				position: fixed;
				{sidebar-pos}: var(--pad);
				top: calc(
					var(--pad) + 100vh \
					- var(--font-size) * var(--line-height) - var(--pad) * 2
				);
				width: calc(var(--sidebar-width) - var(--pad) * 2) $i;
				mar(0);

				../-stats,
				&::after {
					z-index: -1;
				}

				&::before,
				&::after {
					content: '';
					position: absolute;
				}
				&::before {
					right: 8ch;
					box(var(--gradient-size), 100%);
					background-image: linear-gradient(
						90deg,
						transparent,
						var(--bg3)
					);
				}
				&::after {
					right: 0;
					box(8ch, 100%);
					bg(3);
				}
			}
			&-updater,
			&-stats {
				position: absolute;
			}
			&-updater {
				left: 0;
			}
			&-stats {
				left: 5ch;

				&::after {
					content: '';
				}
			}
			&-menu {
				.menu-button {
					fa('\f077');
				}
				#menu {
					{sidebar-pos}: var(--sidebar-width) $i;
					bottom: 0 $i;
				}
			}
		}
		#update {
			&-status {
				position: absolute;
				left: 0;
				bottom: calc(var(--pad) * 2 + var(--font-size) * var(--line-height));
				width: max-content;
			}
			&-timer {
				mar(0);
				width: 4ch;

				&.loading {
					replace-text('..');
				}
			}
		}
		#id_css::before {
			content: '';
			position: fixed;
			{sidebar-pos}: 0;
			z-index: 11;
			bottom: 0;
			box(
				calc(var(--sidebar-width) - var(--border-width)),
				calc(var(--font-size) * var(--line-height) + var(--pad) * 2)
			);
			bg(3);
			brd(top);
		}

		// Popups
		#qr,
		#thread-watcher {
			bg(2);
			brd(0);
			shd(0);
			width: var(--sidebar-width);
			min-width: unset;
			display: block $i;
			position: fixed;
			{sidebar-pos}: 0 $i;
			{sidebar-pos == left ? right : left}: unset $i;
			z-index: 10;

			&::after {
				content: '';
				position: absolute;
				top: 0;
				{sidebar-pos == left ? right : left}: 0;
				box(var(--border-width), 100%);
				background-color: var(--border);
			}

			/#header-bar,
			& {
				animation: none $i;
			}

			& > .move {
				normalise-header();
				bg(2);
				border-radius: 0 $i;
				mar();
				mar(bottom, 0);
				cursor: unset;

				&::before {
					fg();
					text-align: left $i;
				}
			}
		}
		#qr {
			&-filename-container,
			input,
			button,
			textarea {
				bg();
			}
			textarea {
				min-width: unset;
				width: 100% $i;
				resize: vertical;
			}
		}
		#thread-watcher {
			z-index: 11 $i;

			#menu {
				{sidebar-pos}: var(--sidebar-width) $i;
				top: 0 $i;
				bottom: unset $i;
				letter-spacing: 0;
				text-transform: initial;
			}
		}
		.centered-links .watcher-link {
			width: 100%;
			justify-content: center;
		}

		// Content
		.board {
			margin-top: calc(var(--header-size) + var(--body-pad)) $i;
		}
		.thread .opContainer .subject {
			{sidebar-pos}: calc(var(--sidebar-width) + var(--body-pad));

			&,
			/.closed,
			/.watch-thread-link {
				--header-top-pos: var(--body-pad);
			}
		}
		.watch-thread-link {
			right: sidebar-pos == right \
				? calc(var(--sidebar-width) + var(--body-pad)) \
				: var(--body-pad);
		}
		if (sidebar-pos == right) {
			.navLinks {
				right: calc(var(--sidebar-width) + var(--body-pad)) $i;
			}
			.post.op .menu-button {
				right: calc(
					var(--sidebar-width) + var(--body-pad) \
					+ var(--border-width) + var(--pad)
				);
			}
		}

		if (sidebar-fixed) {
			body {
				--additional-pad: board-title-image ? 0px : var(--pad);
				--section-content-height: calc(
					(var(--font-size) * var(--line-height) + var(--pad) * 2) \
					* var(--sidebar-items)
				);
				--section-height: calc(
					var(--header-size) + var(--section-content-height)
				);
				--threads-pos: board-title-image \
					? calc(var(--board-title-height) - var(--pad)) \
					: var(--board-title-height);
			}
			#custom-board-list,
			#full-board-list {
				overflow: auto;

				/#watched-threads,
				& {
					height: var(--section-content-height);
				}
			}
			#thread-watcher {
				top: var(--threads-pos) $i;
			}
			#qr {
				top: calc(
					var(--threads-pos) + var(--section-height) * 2 + var(--pad) * 2
				) $i;
			}

			if (sidebar-hover) {
				body {
					--section-content-height: 0px;
				}
				#watched-threads,
				#board-list,
				#board-list > span,
				#qr {
					anim();
				}
				#thread-watcher:hover {
					--section-content-height: calc(
						(var(--font-size) * var(--line-height) + var(--pad) * 2) \
						* var(--sidebar-items)
					);

					& ~ #header-bar,
					& ~ #qr {
						--section-content-height: calc(
							(var(--font-size) * var(--line-height) + var(--pad) * 2) \
							* var(--sidebar-items)
						);
						--section-height: calc(
							var(--header-size) + var(--section-content-height)
						);
					}
					& ~ #header-bar > #board-list {
						height: var(--header-size) $i;
					}
					& ~ #qr {
						top: calc(
							var(--threads-pos) + var(--section-height) + var(--pad) * 7
						) $i;
					}
				}
				#header-bar:has(> #board-list:hover) {
					--section-content-height: calc(
						(var(--font-size) * var(--line-height) + var(--pad) * 2) \
						* var(--sidebar-items)
					);
					--section-height: calc(
						var(--header-size) + var(--section-content-height)
					);

					& > #board-list {
						margin-top: calc(
							var(--board-title-height) + var(--header-size) \
							+ var(--additional-pad) + var(--header-h)
						);
					}

					& ~ #qr {
						--section-content-height: calc(
							(var(--font-size) * var(--line-height) + var(--pad) * 2) \
							* var(--sidebar-items)
						);
						--section-height: calc(
							var(--header-size) + var(--section-content-height)
						);
						top: calc(
							var(--threads-pos) + var(--section-height) \
							+ var(--header-size) + var(--pad) * 2
						) $i;
					}
				}
				#qr {
					overflow: hidden;
					height: var(--header-size);

					&:hover,
					&:has(:focus) {
						height: 100%;
					}
				}
			}
		}

		if (!sidebar-fixed || !sidebar-hover-move) {
			#qr,
			#board-list > span {
				&::before {
					content: '';
					position: absolute;
					inset: 0;
					right: var(--border-width) $i;
					background-image: linear-gradient(
						0deg,
						var(--bg2),
						transparent
					);
					height: var(--gradient-size);
					margin-top: calc(var(--gradient-size) * -1);
				}
			}
		}
	} else {
		#-sidebar-separator {
			display: none;
		}
	}
}