nitter.user.styl

/* ==UserStyle==
@name           Nitter
@namespace      github.com/openstyles/stylus
@version        1.2.0
@description    A new userstyle
@author         Me

@preprocessor stylus
==/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
replace-text(content =, text-color = fg, pos = after) {
	color: transparent $i;
	letter-spacing: -9999px $i;

	if (content) { // Replace
		&::{pos} {
			content: content $i;
			letter-spacing: 0 $i;
			color: svar(text-color) $i;
		}
	} else { // Hide
		* {
			letter-spacing: 0 $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-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;
	}
}

@-moz-document \
	domain("nitter.net"),
	domain("nitter.unixfox.eu"),
	domain("nitter.namazso.eu")
{
	/**
	 * Variables
	**/
	:root {
		--accent_bg: var(--accent);
	}
	body {
		--bg_color: var(--bg);
		--bg_panel: var(--bg2);
		--bg_elements: var(--bg2);
		--bg_overlays: var(--bg2);
		--bg_hover: var(--bg2);

		--accent: var(--accent_bg);
		--accent_light: var(--accent);
		--accent_dark: var(--accent);
		--accent_border: var(--accent-border);

		--fg_color: var(--fg);
		--fg_faded: var(--fg2);
		--fg_dark: var(--fg2);
		--fg_nav: var(--fg2);
		--more_replies_dots: var(--fg2);
		--error_red: var(--color9);
		--verified_blue: var(--color12);
		--icon_text: var(--fg);
		--tab: var(--fg2);
		--tab_selected: var(--accent);
		--profile_stat: var(--fg);

		--grey: var(--fg2);
		--dark_grey: var(--bg);
		--border_grey: var(--border);
		--play_button: var(--fg2);
		--play_button_hover: var(--fg);

		--reserve-fg: var(--fg);

		lnh();
	}

	/**
	 * Global
	**/
	* {
		box-sizing: border-box $i;
	}
	a {
		color: var(--fg-link);
	}
	input,
	select {
		position: unset $i;
		height: unset $i;
	}
	input {
		&[type="text"],
		&[type="date"] {
			normalise-input();
			box(unset);
		}
	}
	.pref {
		&-group {
			mar(0);
			margin-bottom: calc(var(--pad) / 2) $i;
			flex(,,space-between);
		}
		&-input {
			height: unset $i;
		}
	}
	.checkbox {
		display: none;

		&-container {
			flex-direction: row-reverse;
			justify-content: start $i;

			input {
				normalise-checkbox();
				opacity: 1;
			}
		}
	}
	button {
		normalise-button();
	}
	select {
		normalise-select();
	}

	/**
	 * Hide elements
	**/
	[href="https://liberapay.com/zedeus"],
	.date-range .icon-container,
	.inner-nav > a,
	.top-ref
	{
		display: none;
	}

	/**
	 * Header
	**/
	nav {
		bg(2);
		brd(bottom);
		header-focus();
		shd(0);
		height: unset $i;
	}
	.inner-nav {
		pad();
		height: unset $i;
		flex-grow: 1 $i;
		flex-basis: unset $i;
	}
	.nav-item {
		lnh();
		height: unset $i;

		&.right a {
			pad(0);
			margin-left: 1ch $i;
		}
		a {
			fg(2);

			&:hover {
				--fg2: var(--accent-fg);
			}
		}
	}

	/**
	 * Content
	**/
	// Global
	.container {
		padding-top: var(--header-h);
	}
	.conversation,
	.overlay-panel {
		margin: var(--body-pad) $i;
		max-width: unset $i;
	}
	.tab {
		brd(bottom);
		mar(0);

		&-item {
			&.active a {
				hl();
				border-color: transparent;
			}
			&:not(.active) a:hover {
				fg();
			}
			a {
				pad();
			}
		}
	}

	// Profile
	.timeline {
		background-color: transparent $i;
		margin: var(--body-pad);

		&-container {
			max-width: unset;
		}
		&-header {
			pad();
			brd(bottom);
			mar(0);
		}
		&-item {
			bg(2);
			pad();
			brd();
			mar(bottom);
		}
		/.profile-tabs &-container {
			width: calc(100% - var(--sidebar-width)) $i;
		}
	}
	.quote {
		bg();
		brd();
		mar(top);

		&-text {
			pad(0);
			pad(left);
			pad(right);
		}

		.tweet-name-row {
			pad();
		}
		.card-container {
			brd(0);
			brd(top);
		}
	}
	.show-more {
		background-color: transparent $i;
		pad(0);
		brd(0);

		a {
			normalise-button();
			text-decoration: none $i;
			box(unset);
		}
	}
	.pinned,
	.retweet-header {
		lnh();
		mar(0);
		mar(bottom);
	}
	.username {
		margin-left: 1ch;
	}
	.attachments {
		border-radius: var(--border-radius);
		mar(top);
	}
	.profile {
		&-banner {
			brd(bottom);
			margin-left: var(--sidebar-width);
			mar(bottom, 0);
		}
		&-tab {
			pad(0);
			brd(right);
			width: var(--sidebar-width);
			max-width: unset;
			overflow: scroll;
			position: fixed $i;
			top: var(--header-h);
			bottom: 0;

			&s {
				width: 100%;
				max-width: unset;
			}
		}
		&-card {
			white-space: nowrap $i;
			pad();
			display: block $i;
			height: 100%;

			&-avatar {
				mar(0);
			}
			&-extra {
				&,
				&-links {
					mar(top);
				}
			}
		}
		&-bio {
			margin: var(--pad) 0 $i;
		}
		&-joindate {
			mar(0);
		}
	}
	.photo-rail {
		&-card {
			pad();
			brd(0);
			mar(0);
		}
		&-header {
			normalise-header();

			& > a {
				fg();
			}
		}
		&-grid {
			grid-gap: calc(var(--pad) / 2);
			pad(0);

			& > a,
			img {
				border-radius: var(--border-radius);
			}
		}
	}
	.tweet {
		/.more-replies-text,
		/.unavailable-box,
		&-body {
			margin-left: calc(48px + var(--pad));
		}
		/.replying-to,
		&-header {
			mar(0);
			mar(bottom);
		}
		&-avatar img {
			margin-left: calc(-48px - var(--pad));
			margin-top: calc(1px * var(--line-height));
		}
		&-date {
			margin-left: 1ch;
		}
		&-content {
			lnh();
		}
		&-published {
			mar(top);
		}
		&-stat {
			pad(0);
			mar(top);
			margin-right: 1ch $i;

			&s {
				lnh();
				mar(0);
			}
		}
	}
	.card {
		margin: var(--pad) 0;

		&-container {
			bg();
			brd();
		}
		&-title {
			normalise-header();
		}
		&-content {
			pad();
		}
		&-description {
			mar(0);
		}
	}

	// Search
	.search {
		&-field {
			& > .pref-input {
				mar(0);
				mar(right);
			}
			& > label {
				@extend button;
				--bg2: var(--bg);
				mar(0);
			}
			input {
				--bg2: var(--bg);

				&[type="text"] {
					flex-grow: 1 $i;
				}
			}
			button {
				--bg2: var(--bg);
				mar(right);
				height: unset $i;
			}
		}
		&-title {
			normalise-header(false);
			width: 100% $i;
			max-height: unset $i;
		}
		&-row {
			.pref-input {
				pad(0);
			}
		}
		&-panel {
			& > div {
				lnh();
			}
		}
		&-field #search-panel-toggle:checked ~ &-panel {
			max-height: unset $i;
		}
		&-toggles {
			column-gap: var(--pad) $i;
		}
	}

	// Tweet
	.thread-line {
		.timeline-item,
		.more-replies {
			&::before {
				mar(left, 0);
				width: 3px;
				left: 24px;
			}
		}
	}
	.reply,
	.main-thread {
		background-color: transparent;
		mar(0);
	}
	.unavailable-box {
		bg(2);
		pad(0);
		brd(0);

		/.more-replies-text,
		& {
			pad(top);
			pad(bottom);
		}
	}

	// Settings / about
	.overlay-panel {
		background-color: transparent $i;
		pad(0);
		margin-top: calc(var(--body-pad) - var(--pad) * 2) $i;

		h1,
		h2 {
			normalise-header(false);
			display: block $i;
		}
	}
	fieldset {
		mar(0);
	}
	legend {
		normalise-header(false);
	}
	.note {
		padding: var(--pad) 0 $i;
		brd(top);
		brd(bottom);
		margin: var(--pad) 0 $i;

		&::before {
			content: 'NOTE: ';
		}
	}
	.preferences {
		label {
			pad(0);
		}
		button {
			mar(0);
		}
	}
}