No OneTemporary
Actions

Authored By

Unknown

Size

299 KB

Referenced Files

None

Subscribers

None

View Options

This file is larger than 256 KB, so syntax highlighting was skipped.

	diff --git a/src/App.scss b/src/App.scss
	index 289add77e9..97d3f5161c 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,890 +1,889 @@
	// stylelint-disable rscss/class-format
	/* stylelint-disable no-descending-specificity */
	-@import "./variables";
	@import "./panel";

	:root {
	--navbar-height: 3.5rem;
	--post-line-height: 1.4;
	// Z-Index stuff
	--ZI_media_modal: 9000;
	--ZI_modals_popovers: 8500;
	--ZI_modals: 8000;
	--ZI_navbar_popovers: 7500;
	--ZI_navbar: 7000;
	--ZI_popovers: 6000;
	}

	html {
	font-size: 14px;
	// overflow-x: clip causes my browser's tab to crash with SIGILL lul
	}

	body {
	font-family: sans-serif;
	font-family: var(--font);
	margin: 0;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overscroll-behavior-y: none;
	overflow-x: clip;
	overflow-y: scroll;

	&.hidden {
	display: none;
	}
	}

	// ## Custom scrollbars
	// Only show custom scrollbars on devices which
	// have a cursor/pointer to operate them
	@media (any-pointer: fine) {
	* {
	scrollbar-color: var(--fg) transparent;

	&::-webkit-scrollbar {
	background: transparent;
	}

	&::-webkit-scrollbar-corner {
	background: transparent;
	}

	&::-webkit-resizer {
	/* stylelint-disable-next-line declaration-no-important */
	background-color: transparent !important;
	background-image:
	linear-gradient(
	135deg,
	transparent calc(50% - 1px),
	var(--textFaint) 50%,
	transparent calc(50% + 1px),
	transparent calc(75% - 1px),
	var(--textFaint) 75%,
	transparent calc(75% + 1px),
	);
	}

	&::-webkit-scrollbar-button,
	&::-webkit-scrollbar-thumb {
	box-shadow: var(--shadow);
	border-radius: var(--roundness);
	}

	// horizontal/vertical/increment/decrement are webkit-specific stuff
	// that indicates whether we're affecting vertical scrollbar, increase button etc
	// stylelint-disable selector-pseudo-class-no-unknown
	&::-webkit-scrollbar-button {
	--___bgPadding: 2px;

	color: var(--text);
	background-repeat: no-repeat, no-repeat;

	&:horizontal {
	background-size: 50% calc(50% - var(--___bgPadding)), 50% calc(50% - var(--___bgPadding));

	&:increment {
	background-image:
	linear-gradient(45deg, var(--text) 50%, transparent 51%),
	linear-gradient(-45deg, transparent 50%, var(--text) 51%);
	background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
	}

	&:decrement {
	background-image:
	linear-gradient(45deg, transparent 50%, var(--text) calc(50% + 1px)),
	linear-gradient(-45deg, var(--text) 50%, transparent 51%);
	background-position: bottom var(--___bgPadding) right 50%, left 50% top var(--___bgPadding);
	}
	}

	&:vertical {
	background-size: calc(50% - var(--___bgPadding)) 50%, calc(50% - var(--___bgPadding)) 50%;

	&:increment {
	background-image:
	linear-gradient(-45deg, transparent 50%, var(--text) 51%),
	linear-gradient(45deg, transparent 50%, var(--text) 51%);
	background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
	}

	&:decrement {
	background-image:
	linear-gradient(-45deg, var(--text) 50%, transparent 51%),
	linear-gradient(45deg, var(--text) 50%, transparent 51%);
	background-position: left var(--___bgPadding) top 50%, right var(--___bgPadding) top 50%;
	}
	}
	}
	// stylelint-enable selector-pseudo-class-no-unknown
	}
	// Body should have background to scrollbar otherwise it will use white (body color?)
	html {
	scrollbar-color: var(--fg) var(--wallpaper);
	background: var(--wallpaper);
	}
	}

	a {
	text-decoration: none;
	color: var(--link);
	}

	h4 {
	margin: 0;
	}

	.iconLetter {
	display: inline-block;
	text-align: center;
	font-weight: 1000;
	}

	i[class*="icon-"],
	.svg-inline--fa,
	.iconLetter {
	color: var(--icon);
	}

	nav {
	z-index: var(--ZI_navbar);
	box-shadow: var(--shadow);
	box-sizing: border-box;
	height: var(--navbar-height);
	position: fixed;
	}

	#sidebar {
	grid-area: sidebar;
	}

	#modal {
	position: absolute;
	z-index: var(--ZI_modals);
	}

	.column.-scrollable {
	top: var(--navbar-height);
	position: sticky;
	}

	#main-scroller {
	grid-area: content;
	position: relative;
	}

	#notifs-column {
	grid-area: notifs;
	}

	.app-bg-wrapper {
	position: fixed;
	height: 100%;
	top: var(--navbar-height);
	z-index: -1000;
	left: 0;
	right: -20px;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: var(--wallpaper);
	background-image: var(--body-background-image);
	background-position: 50%;
	}

	.underlay {
	grid-column: 1 / span 3;
	grid-row: 1 / 1;
	pointer-events: none;
	background-color: var(--underlay);
	z-index: -1000;
	}

	.app-layout {
	--miniColumn: 25rem;
	--maxiColumn: 45rem;
	--columnGap: 1em;
	--status-margin: 0.75em;
	--effectiveSidebarColumnWidth: minmax(var(--miniColumn), var(--sidebarColumnWidth, var(--miniColumn)));
	--effectiveNotifsColumnWidth: minmax(var(--miniColumn), var(--notifsColumnWidth, var(--miniColumn)));
	--effectiveContentColumnWidth: minmax(var(--miniColumn), var(--contentColumnWidth, var(--maxiColumn)));

	position: relative;
	display: grid;
	grid-template-columns:
	var(--effectiveSidebarColumnWidth)
	var(--effectiveContentColumnWidth);
	grid-template-areas: "sidebar content";
	grid-template-rows: 1fr;
	box-sizing: border-box;
	margin: 0 auto;
	align-content: flex-start;
	flex-wrap: wrap;
	justify-content: center;
	min-height: 100vh;
	overflow-x: clip;

	.column {
	--___columnMargin: var(--columnGap);

	display: grid;
	grid-template-columns: 100%;
	box-sizing: border-box;
	grid-row: 1 / 1;
	margin: 0 calc(var(--___columnMargin) / 2);
	padding: calc(var(--___columnMargin)) 0;
	row-gap: var(--___columnMargin);
	align-content: start;

	&:not(.-scrollable) {
	margin-top: var(--navbar-height);
	}

	&:hover {
	z-index: 2;
	}

	&.-full-height {
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	}

	&.-scrollable {
	--___paddingIncrease: calc(var(--columnGap) / 2);

	position: sticky;
	top: var(--navbar-height);
	max-height: calc(100vh - var(--navbar-height));
	overflow-y: auto;
	overflow-x: hidden;
	margin-left: calc(var(--___paddingIncrease) * -1);
	padding-left: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);

	// On browsers that don't support hiding scrollbars we enforce "show scrolbars" mode
	// might implement old style of hiding scrollbars later if there's demand
	@supports (scrollbar-width: none) or (-webkit-text-fill-color: initial) {
	&:not(.-show-scrollbar) {
	scrollbar-width: none;
	margin-right: calc(var(--___paddingIncrease) * -1);
	padding-right: calc(var(--___paddingIncrease) + var(--___columnMargin) / 2);

	&::-webkit-scrollbar {
	display: block;
	width: 0;
	}
	}
	}

	.panel-heading.-sticky {
	top: calc(var(--columnGap) / -1);
	}
	}
	}

	&.-has-new-post-button {
	.column {
	padding-bottom: 10rem;
	}
	}

	&.-no-sticky-headers {
	.column {
	.panel-heading.-sticky {
	position: relative;
	top: 0;
	}
	}
	}

	.column-inner {
	display: grid;
	grid-template-columns: 100%;
	box-sizing: border-box;
	row-gap: 1em;
	align-content: start;
	}

	&.-reverse:not(.-wide, .-mobile) {
	grid-template-columns:
	var(--effectiveContentColumnWidth)
	var(--effectiveSidebarColumnWidth);
	grid-template-areas: "content sidebar";
	}

	&.-wide {
	grid-template-columns:
	var(--effectiveSidebarColumnWidth)
	var(--effectiveContentColumnWidth)
	var(--effectiveNotifsColumnWidth);
	grid-template-areas: "sidebar content notifs";

	&.-reverse {
	grid-template-columns:
	var(--effectiveNotifsColumnWidth)
	var(--effectiveContentColumnWidth)
	var(--effectiveSidebarColumnWidth);
	grid-template-areas: "notifs content sidebar";
	}
	}

	&.-mobile {
	grid-template-columns: 100vw;
	grid-template-areas: "content";
	padding: 0;

	.column {
	padding-top: 0;
	margin: var(--navbar-height) 0 0 0;
	}

	.panel-heading,
	.panel-heading::after,
	.panel-heading::before,
	.panel,
	.panel::after {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	}

	#sidebar,
	#notifs-column {
	display: none;
	}
	}

	&.-normal {
	#notifs-column {
	display: none;
	}
	}
	}

	.text-center {
	text-align: center;
	}

	.button-default {
	user-select: none;
	color: var(--text);
	border: none;
	border-radius: var(--roundness);
	cursor: pointer;
	box-shadow: var(--shadow);
	font-size: 1em;
	font-family: sans-serif;
	font-family: var(--font);

	&::-moz-focus-inner {
	border: none;
	}

	&:disabled {
	cursor: not-allowed;
	}
	}

	.menu-item,
	.list-item {
	display: block;
	box-sizing: border-box;
	border: none;
	outline: none;
	text-align: initial;
	font-size: inherit;
	font-family: inherit;
	font-weight: 400;
	cursor: pointer;
	color: inherit;
	clear: both;
	position: relative;
	white-space: nowrap;
	border-color: var(--border);
	border-style: solid;
	border-width: 0;
	border-top-width: 1px;
	width: 100%;
	line-height: var(--__line-height);
	padding: var(--__vertical-gap) var(--__horizontal-gap);

	--__line-height: 1.5em;
	--__horizontal-gap: 0.75em;
	--__vertical-gap: 0.5em;

	&.-non-interactive {
	cursor: auto;
	}

	&.-active,
	&:hover {
	border-top-width: 1px;
	border-bottom-width: 1px;
	}

	&.-active + &,
	&:hover + & {
	border-top-width: 0;
	}

	&:hover + .menu-item-collapsible:not(.-expanded) + &,
	&.-active + .menu-item-collapsible:not(.-expanded) + & {
	border-top-width: 0;
	}

	&[aria-expanded="true"] {
	border-bottom-width: 1px;
	}

	a,
	button:not(.button-default) {
	text-align: initial;
	padding: 0;
	background: none;
	border: none;
	outline: none;
	display: inline;
	font-size: 100%;
	font-family: inherit;
	line-height: unset;
	color: var(--text);
	}

	&:first-child {
	border-top-right-radius: var(--roundness);
	border-top-left-radius: var(--roundness);
	border-top-width: 0;
	}

	&:last-child {
	border-bottom-right-radius: var(--roundness);
	border-bottom-left-radius: var(--roundness);
	border-bottom-width: 0;
	}
	}

	.button-unstyled {
	border: none;
	outline: none;
	display: inline;
	text-align: initial;
	font-size: 100%;
	font-family: inherit;
	box-shadow: var(--shadow);
	padding: 0;
	line-height: unset;
	cursor: pointer;
	box-sizing: content-box;
	color: inherit;

	&.-link {
	/* stylelint-disable-next-line declaration-no-important */
	color: var(--link) !important;
	}
	}

	input,
	textarea {
	border: none;
	display: inline-block;
	outline: none;
	}

	.input {
	&.unstyled {
	border-radius: 0;
	/* stylelint-disable-next-line declaration-no-important */
	background: none !important;
	box-shadow: none;
	height: unset;
	}

	--_padding: 0.5em;

	border: none;
	border-radius: var(--roundness);
	box-shadow: var(--shadow);
	font-family: var(--font);
	font-size: 1em;
	margin: 0;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	line-height: 2;
	hyphens: none;
	padding: 0 var(--_padding);

	&:disabled,
	&[disabled="disabled"],
	&.disabled {
	cursor: not-allowed;
	}

	&[type="range"] {
	background: none;
	border: none;
	margin: 0;
	box-shadow: none;
	flex: 1;
	}

	&[type="radio"] {
	display: none;

	&:checked + label::before {
	box-shadow: var(--shadow);
	background-color: var(--background);
	color: var(--text);
	}

	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: 0.5;
	}
	}

	+ label::before {
	flex-shrink: 0;
	display: inline-block;
	content: "•";
	transition: box-shadow 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: 100%; // Radio buttons should always be circle
	background-color: var(--background);
	box-shadow: var(--shadow);
	margin-right: 0.5em;
	vertical-align: top;
	text-align: center;
	line-height: 1.1;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	}
	}

	&[type="checkbox"] {
	&:checked + label::before {
	color: var(--text);
	background-color: var(--background);
	box-shadow: var(--shadow);
	}

	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: 0.5;
	}
	}

	+ label::before {
	flex-shrink: 0;
	display: inline-block;
	content: "✓";
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: var(--roundness);
	box-shadow: var(--shadow);
	margin-right: 0.5em;
	vertical-align: top;
	text-align: center;
	line-height: 1.1;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	}
	}

	&.resize-height {
	resize: vertical;
	}
	}

	// Textareas should have stock line-height + vertical padding instead of huge line-height
	textarea.input {
	padding: var(--_padding);
	line-height: var(--post-line-height);
	}

	option {
	color: var(--text);
	background-color: var(--background);
	}

	.hide-number-spinner {
	appearance: textfield;

	&[type="number"]::-webkit-inner-spin-button,
	&[type="number"]::-webkit-outer-spin-button {
	opacity: 0;
	display: none;
	}
	}

	.cards-list {
	list-style: none;
	display: grid;
	grid-auto-flow: row dense;
	grid-template-columns: 1fr 1fr;

	li {
	border: 1px solid var(--border);
	border-radius: var(--roundness);
	padding: 0.5em;
	margin: 0.25em;
	}
	}

	.btn-block {
	display: block;
	width: 100%;
	}

	.btn-group {
	position: relative;
	display: inline-flex;
	vertical-align: middle;

	button,
	.button-dropdown {
	position: relative;
	flex: 1 1 auto;

	&:not(:last-child),
	&:not(:last-child) .button-default {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	}

	&:not(:first-child),
	&:not(:first-child) .button-default {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	}
	}
	}

	.fa {
	color: grey;
	}

	.mobile-shown {
	display: none;
	}

	.badge {
	box-sizing: border-box;
	display: inline-block;
	border-radius: 99px;
	max-width: 10em;
	min-width: 1.7em;
	height: 1.3em;
	padding: 0.15em;
	vertical-align: middle;
	font-weight: normal;
	font-style: normal;
	font-size: 0.9em;
	line-height: 1;
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

	&.-dot,
	&.-counter {
	margin: 0;
	position: absolute;
	}

	&.-dot {
	min-height: 8px;
	max-height: 8px;
	min-width: 8px;
	max-width: 8px;
	padding: 0;
	line-height: 0;
	font-size: 0;
	left: calc(50% - 4px);
	top: calc(50% - 4px);
	margin-left: 6px;
	margin-top: -6px;
	}

	&.-counter {
	border-radius: var(--roundness);
	font-size: 0.75em;
	line-height: 1;
	text-align: right;
	padding: 0.2em;
	min-width: 0;
	left: calc(50% - 0.5em);
	top: calc(50% - 0.4em);
	margin-left: 0.7em;
	margin-top: -1em;
	}
	}

	.alert {
	margin: 0 0.35em;
	padding: 0 0.25em;
	border-radius: var(--roundness);
	border: 1px solid var(--border);
	}

	.faint {
	--text: var(--textFaint);
	--link: var(--linkFaint);

	color: var(--text);
	}

	.visibility-notice {
	padding: 0.5em;
	border: 1px solid var(--textFaint);
	border-radius: var(--roundness);
	}

	.notice-dismissible {
	padding-right: 4rem;
	position: relative;

	.dismiss {
	position: absolute;
	top: 0;
	right: 0;
	padding: 0.5em;
	color: inherit;
	}
	}

	.fa-scale-110 {
	&.svg-inline--fa,
	&.iconLetter {
	font-size: 1.1em;
	}

	&.svg-inline--fa {
	vertical-align: -0.15em;
	}
	}

	.fa-old-padding {
	&.iconLetter,
	&.svg-inline--fa,
	&-layer {
	padding: 0 0.3em;
	}
	}

	.veryfaint {
	opacity: 0.25;
	}

	.timeago {
	--link: var(--text);
	--linkFaint: var(--textFaint);
	}

	.login-hint {
	text-align: center;

	@media all and (min-width: 801px) {
	display: none;
	}

	a {
	display: inline-block;
	padding: 1em 0;
	width: 100%;
	}
	}

	.btn.button-default {
	min-height: 2em;
	}

	.new-status-notification {
	position: relative;
	font-size: 1.1em;
	z-index: 1;
	flex: 1;
	}

	@media all and (max-width: 800px) {
	.mobile-hidden {
	display: none;
	}
	}

	@keyframes spin {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(359deg);
	}
	}

	@keyframes shakeError {
	0% {
	transform: translateX(0);
	}

	15% {
	transform: translateX(0.375rem);
	}

	30% {
	transform: translateX(-0.375rem);
	}

	45% {
	transform: translateX(0.375rem);
	}

	60% {
	transform: translateX(-0.375rem);
	}

	75% {
	transform: translateX(0.375rem);
	}

	90% {
	transform: translateX(-0.375rem);
	}

	100% {
	transform: translateX(0);
	}
	}

	// Vue transitions
	.fade-enter-active,
	.fade-leave-active {
	transition: opacity 0.3s;
	}

	.fade-enter-from,
	.fade-leave-active {
	opacity: 0;
	}
	/* stylelint-enable no-descending-specificity */

	.visible-for-screenreader-only {
	display: block;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	visibility: visible;
	clip: rect(0 0 0 0);
	padding: 0;
	position: absolute;
	}
	diff --git a/src/_variables.scss b/src/_variables.scss
	deleted file mode 100644
	index 751fc9a467..0000000000
	--- a/src/_variables.scss
	+++ /dev/null
	@@ -1,36 +0,0 @@
	-$main-color: #f58d2c;
	-$main-background: white;
	-$darkened-background: whitesmoke;
	-
	-$fallback--bg: #121a24;
	-$fallback--fg: #182230;
	-$fallback--faint: rgb(185 185 186 / 50%);
	-$fallback--text: #b9b9ba;
	-$fallback--link: #d8a070;
	-$fallback--icon: #666;
	-$fallback--lightBg: rgb(21 30 42);
	-$fallback--lightText: #b9b9ba;
	-$fallback--border: #222;
	-$fallback--cRed: #f00;
	-$fallback--cBlue: #0095ff;
	-$fallback--cGreen: #0fa00f;
	-$fallback--cOrange: orange;
	-
	-$fallback--alertError: rgb(211 16 20 / 50%);
	-$fallback--alertWarning: rgb(111 111 20 / 50%);
	-
	-$fallback--panelRadius: 10px;
	-$fallback--checkboxRadius: 2px;
	-$fallback--btnRadius: 4px;
	-$fallback--inputRadius: 4px;
	-$fallback--tooltipRadius: 5px;
	-$fallback--avatarRadius: 4px;
	-$fallback--avatarAltRadius: 10px;
	-$fallback--attachmentRadius: 10px;
	-$fallback--chatMessageRadius: 10px;
	-
	-$fallback--buttonShadow: 0 0 2px 0 rgb(0 0 0 / 100%),
	- 0 1px 0 0 rgb(255 255 255 / 20%) inset,
	- 0 -1px 0 0 rgb(0 0 0 / 20%) inset;
	-
	-$status-margin: 0.75em;
	diff --git a/src/components/account_actions/account_actions.vue b/src/components/account_actions/account_actions.vue
	index cca7121cfe..9a7c6824a9 100644
	--- a/src/components/account_actions/account_actions.vue
	+++ b/src/components/account_actions/account_actions.vue
	@@ -1,135 +1,133 @@
	<template>
	<div class="AccountActions">
	<Popover
	trigger="click"
	placement="bottom"
	:bound-to="{ x: 'container' }"
	remove-padding
	>
	<template #content>
	<div class="dropdown-menu">
	<template v-if="relationship.following">
	<button
	v-if="relationship.showing_reblogs"
	class="dropdown-item menu-item"
	@click="hideRepeats"
	>
	{{ $t('user_card.hide_repeats') }}
	</button>
	<button
	v-if="!relationship.showing_reblogs"
	class="dropdown-item menu-item"
	@click="showRepeats"
	>
	{{ $t('user_card.show_repeats') }}
	</button>
	<div
	role="separator"
	class="dropdown-divider"
	/>
	</template>
	<UserListMenu :user="user" />
	<button
	v-if="relationship.followed_by"
	class="dropdown-item menu-item"
	@click="removeUserFromFollowers"
	>
	{{ $t('user_card.remove_follower') }}
	</button>
	<button
	v-if="relationship.blocking"
	class="dropdown-item menu-item"
	@click="unblockUser"
	>
	{{ $t('user_card.unblock') }}
	</button>
	<button
	v-else
	class="dropdown-item menu-item"
	@click="blockUser"
	>
	{{ $t('user_card.block') }}
	</button>
	<button
	class="dropdown-item menu-item"
	@click="reportUser"
	>
	{{ $t('user_card.report') }}
	</button>
	<button
	v-if="pleromaChatMessagesAvailable"
	class="dropdown-item menu-item"
	@click="openChat"
	>
	{{ $t('user_card.message') }}
	</button>
	</div>
	</template>
	<template #trigger>
	<button class="button-unstyled ellipsis-button">
	<FAIcon
	class="icon"
	icon="ellipsis-v"
	/>
	</button>
	</template>
	</Popover>
	<teleport to="#modal">
	<confirm-modal
	v-if="showingConfirmBlock"
	:title="$t('user_card.block_confirm_title')"
	:confirm-text="$t('user_card.block_confirm_accept_button')"
	:cancel-text="$t('user_card.block_confirm_cancel_button')"
	@accepted="doBlockUser"
	@cancelled="hideConfirmBlock"
	>
	<i18n-t
	keypath="user_card.block_confirm"
	tag="span"
	>
	<template #user>
	<span
	v-text="user.screen_name_ui"
	/>
	</template>
	</i18n-t>
	</confirm-modal>
	</teleport>
	<teleport to="#modal">
	<confirm-modal
	v-if="showingConfirmRemoveFollower"
	:title="$t('user_card.remove_follower_confirm_title')"
	:confirm-text="$t('user_card.remove_follower_confirm_accept_button')"
	:cancel-text="$t('user_card.remove_follower_confirm_cancel_button')"
	@accepted="doRemoveUserFromFollowers"
	@cancelled="hideConfirmRemoveUserFromFollowers"
	>
	<i18n-t
	keypath="user_card.remove_follower_confirm"
	tag="span"
	>
	<template #user>
	<span
	v-text="user.screen_name_ui"
	/>
	</template>
	</i18n-t>
	</confirm-modal>
	</teleport>
	</div>
	</template>

	<script src="./account_actions.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.AccountActions {
	.ellipsis-button {
	width: 2.5em;
	margin: -0.5em 0;
	padding: 0.5em 0;
	text-align: center;
	}
	}
	</style>
	diff --git a/src/components/announcement/announcement.vue b/src/components/announcement/announcement.vue
	index a1c5791e49..92880831fc 100644
	--- a/src/components/announcement/announcement.vue
	+++ b/src/components/announcement/announcement.vue
	@@ -1,136 +1,134 @@
	<template>
	<div class="announcement">
	<div class="heading">
	<h4>{{ $t('announcements.title') }}</h4>
	</div>
	<div class="body">
	<rich-content
	v-if="!editing"
	:html="content"
	:emoji="announcement.emojis"
	:handle-links="true"
	/>
	<announcement-editor
	v-else
	:announcement="editedAnnouncement"
	/>
	</div>
	<div class="footer">
	<div
	v-if="!editing"
	class="times"
	>
	<span v-if="publishedAt">
	{{ $t('announcements.published_time_display', { time: publishedAt }) }}
	</span>
	<span v-if="startsAt">
	{{ $t('announcements.start_time_display', { time: startsAt }) }}
	</span>
	<span v-if="endsAt">
	{{ $t('announcements.end_time_display', { time: endsAt }) }}
	</span>
	</div>
	<div
	v-if="!editing"
	class="actions"
	>
	<button
	v-if="currentUser"
	class="btn button-default"
	:class="{ toggled: isRead }"
	:disabled="inactive"
	:title="inactive ? $t('announcements.inactive_message') : ''"
	@click="markAsRead"
	>
	{{ $t('announcements.mark_as_read_action') }}
	</button>
	<button
	v-if="canEditAnnouncement"
	class="btn button-default"
	@click="enterEditMode"
	>
	{{ $t('announcements.edit_action') }}
	</button>
	<button
	v-if="canEditAnnouncement"
	class="btn button-default"
	@click="deleteAnnouncement"
	>
	{{ $t('announcements.delete_action') }}
	</button>
	</div>
	<div
	v-else
	class="actions"
	>
	<button
	class="btn button-default"
	@click="submitEdit"
	>
	{{ $t('announcements.submit_edit_action') }}
	</button>
	<button
	class="btn button-default"
	@click="cancelEdit"
	>
	{{ $t('announcements.cancel_edit_action') }}
	</button>
	<div
	v-if="editing && editError"
	class="alert error"
	>
	{{ $t('announcements.edit_error', { error }) }}
	<button
	class="button-unstyled"
	@click="clearError"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="times"
	:title="$t('announcements.close_error')"
	/>
	</button>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script src="./announcement.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.announcement {
	- border-bottom: 1px solid var(--border, $fallback--border);
	+ border-bottom: 1px solid var(--border);
	border-radius: 0;
	- padding: var(--status-margin, $status-margin);
	+ padding: var(--status-margin);

	.heading,
	.body {
	- margin-bottom: var(--status-margin, $status-margin);
	+ margin-bottom: var(--status-margin);
	}

	.footer {
	display: flex;
	flex-direction: column;

	.times {
	display: flex;
	flex-direction: column;
	}
	}

	.footer .actions {
	display: flex;
	flex-direction: row;
	justify-content: space-evenly;

	.btn {
	flex: 1;
	margin: 1em;
	max-width: 10em;
	}
	}
	}
	</style>
	diff --git a/src/components/announcements_page/announcements_page.vue b/src/components/announcements_page/announcements_page.vue
	index 78d3ecee08..25f830ffbb 100644
	--- a/src/components/announcements_page/announcements_page.vue
	+++ b/src/components/announcements_page/announcements_page.vue
	@@ -1,80 +1,78 @@
	<template>
	<div class="panel panel-default announcements-page">
	<div class="panel-heading">
	<span>
	{{ $t('announcements.page_header') }}
	</span>
	</div>
	<div class="panel-body">
	<section
	v-if="canPostAnnouncement"
	>
	<div class="post-form">
	<div class="heading">
	<h4>{{ $t('announcements.post_form_header') }}</h4>
	</div>
	<div class="body">
	<announcement-editor
	:announcement="newAnnouncement"
	:disabled="posting"
	/>
	</div>
	<div class="footer">
	<button
	class="btn button-default post-button"
	:disabled="posting"
	@click.prevent="postAnnouncement"
	>
	{{ $t('announcements.post_action') }}
	</button>
	<div
	v-if="error"
	class="alert error"
	>
	{{ $t('announcements.post_error', { error }) }}
	<button
	class="button-unstyled"
	@click="clearError"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="times"
	:title="$t('announcements.close_error')"
	/>
	</button>
	</div>
	</div>
	</div>
	</section>
	<section
	v-for="announcement in announcements"
	:key="announcement.id"
	>
	<announcement
	:announcement="announcement"
	/>
	</section>
	</div>
	</div>
	</template>

	<script src="./announcements_page.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.announcements-page {
	.post-form {
	- padding: var(--status-margin, $status-margin);
	+ padding: var(--status-margin);

	.heading,
	.body {
	- margin-bottom: var(--status-margin, $status-margin);
	+ margin-bottom: var(--status-margin);
	}

	.post-button {
	min-width: 10em;
	}
	}
	}
	</style>
	diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
	index 47660bf688..13afbe6416 100644
	--- a/src/components/attachment/attachment.scss
	+++ b/src/components/attachment/attachment.scss
	@@ -1,280 +1,266 @@
	-@import "../../variables";
	-
	.Attachment {
	display: inline-flex;
	flex-direction: column;
	position: relative;
	align-self: flex-start;
	line-height: 0;
	height: 100%;
	border-style: solid;
	border-width: 1px;
	border-radius: var(--roundness);
	border-color: var(--border);

	.attachment-wrapper {
	flex: 1 1 auto;
	height: 100%;
	position: relative;
	overflow: hidden;
	}

	.description-container {
	flex: 0 1 0;
	display: flex;
	padding-top: 0.5em;
	z-index: 1;

	p {
	flex: 1;
	text-align: center;
	line-height: 1.5;
	padding: 0.5em;
	margin: 0;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	}

	&.-static {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding-top: 0;
	background: var(--popover);
	box-shadow: var(--popupShadow);
	}
	}

	.description-field {
	flex: 1;
	min-width: 0;
	}

	& .placeholder-container,
	& .image-container,
	& .audio-container,
	& .video-container,
	& .flash-container,
	& .oembed-container {
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	}

	.image-container {
	.image {
	width: 100%;
	height: 100%;
	}
	}

	& .flash-container,
	& .video-container {
	& .flash,
	& video {
	width: 100%;
	height: 100%;
	object-fit: contain;
	align-self: center;
	}
	}

	.video-container {
	border: none;
	outline: none;
	color: inherit;
	background: transparent;
	}

	.audio-container {
	display: flex;
	align-items: flex-end;

	audio {
	width: 100%;
	height: 100%;
	}
	}

	.placeholder-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding-top: 0.5em;
	}

	.play-icon {
	position: absolute;
	font-size: 64px;
	top: calc(50% - 32px);
	left: calc(50% - 32px);
	color: rgb(255 255 255 / 75%);
	text-shadow: 0 0 2px rgb(0 0 0 / 40%);

	&::before {
	margin: 0;
	}
	}

	.attachment-buttons {
	display: flex;
	position: absolute;
	right: 0;
	top: 0;
	margin-top: 0.5em;
	margin-right: 0.5em;
	z-index: 1;

	.attachment-button {
	padding: 0;
	- border-radius: $fallback--tooltipRadius;
	- border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	+ border-radius: var(--roundness);
	text-align: center;
	width: 2em;
	height: 2em;
	margin-left: 0.5em;
	font-size: 1.25em;
	- // TODO: theming? hard to theme with unknown background image color
	- background: rgb(230 230 230 / 70%);
	-
	- .svg-inline--fa {
	- color: rgb(0 0 0 / 60%);
	- }
	-
	- &:hover .svg-inline--fa {
	- color: rgb(0 0 0 / 90%);
	- }
	}
	}

	&.-contain-fit {
	img,
	canvas {
	object-fit: contain;
	}
	}

	&.-cover-fit {
	img,
	canvas {
	object-fit: cover;
	}
	}

	.oembed-container {
	line-height: 1.2em;
	flex: 1 0 100%;
	width: 100%;
	margin-right: 15px;
	display: flex;

	img {
	width: 100%;
	}

	.image {
	flex: 1;

	img {
	border: 0;
	border-radius: 5px;
	height: 100%;
	object-fit: cover;
	}
	}

	.text {
	flex: 2;
	margin: 8px;
	word-break: break-all;

	h1 {
	font-size: 1rem;
	margin: 0;
	}
	}
	}

	&.-size-small {
	.play-icon {
	zoom: 0.5;
	opacity: 0.7;
	}

	.attachment-buttons {
	zoom: 0.7;
	opacity: 0.5;
	}
	}

	&.-editable {
	padding: 0.5em;

	& .description-container,
	& .attachment-buttons {
	margin: 0;
	}
	}

	&.-placeholder {
	display: inline-block;
	- color: $fallback--link;
	- color: var(--postLink, $fallback--link);
	+ color: var(--link);
	overflow: hidden;
	white-space: nowrap;
	height: auto;
	line-height: 1.5;

	&:not(.-editable) {
	border: none;
	}

	&.-editable {
	display: flex;
	flex-direction: row;
	align-items: baseline;

	& .description-container,
	& .attachment-buttons {
	margin: 0;
	padding: 0;
	position: relative;
	}

	.description-container {
	flex: 1;
	padding-left: 0.5em;
	}

	.attachment-buttons {
	order: 99;
	align-self: center;
	}
	}

	a {
	display: inline-block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	svg {
	color: inherit;
	}
	}

	&.-loading {
	cursor: progress;
	}

	&.-compact {
	.placeholder-container {
	padding-bottom: 0.5em;
	}
	}
	}
	diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue
	index 7912db9463..04f4180132 100644
	--- a/src/components/autosuggest/autosuggest.vue
	+++ b/src/components/autosuggest/autosuggest.vue
	@@ -1,59 +1,55 @@
	<!-- FIXME THIS NEEDS TO BE REFACTORED TO USE POPOVER -->
	<template>
	<div
	v-click-outside="onClickOutside"
	class="autosuggest"
	>
	<input
	v-model="term"
	:placeholder="placeholder"
	class="input autosuggest-input"
	@click="onInputClick"
	>
	<div
	v-if="resultsVisible && filtered.length > 0"
	class="panel autosuggest-results"
	>
	<slot
	v-for="item in filtered"
	:item="item"
	/>
	</div>
	</div>
	</template>

	<script src="./autosuggest.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.autosuggest {
	position: relative;

	&-input {
	display: block;
	width: 100%;
	}

	&-results {
	position: absolute;
	left: 0;
	top: 100%;
	right: 0;
	max-height: 400px;
	- background-color: $fallback--bg;
	- background-color: var(--bg, $fallback--bg);
	+ background-color: var(--bg);
	border-style: solid;
	border-width: 1px;
	- border-color: $fallback--border;
	border-color: var(--border);
	border-radius: var(--roundness);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
	box-shadow: var(--shadow);
	overflow-y: auto;
	z-index: 1;
	}
	}
	</style>
	diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue
	index 2d00cb7b94..9252ba3246 100644
	--- a/src/components/avatar_list/avatar_list.vue
	+++ b/src/components/avatar_list/avatar_list.vue
	@@ -1,46 +1,43 @@
	<template>
	<div class="avatars">
	<router-link
	v-for="user in slicedUsers"
	:key="user.id"
	:to="userProfileLink(user)"
	class="avatars-item"
	>
	<UserAvatar
	:user="user"
	class="avatar-small"
	/>
	</router-link>
	</div>
	</template>

	<script src="./avatar_list.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.avatars {
	display: flex;
	margin: 0;
	padding: 0;

	// For hiding overflowing elements
	flex-wrap: wrap;
	height: 24px;

	.avatars-item {
	margin: 0 0 5px 5px;

	&:first-child {
	padding-left: 5px;
	}

	.avatar-small {
	- border-radius: $fallback--avatarAltRadius;
	- border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	+ border-radius: var(--roundness);
	height: 24px;
	width: 24px;
	}
	}
	}
	</style>
	diff --git a/src/components/chat/chat.vue b/src/components/chat/chat.vue
	index 65f89c7358..6efe576b88 100644
	--- a/src/components/chat/chat.vue
	+++ b/src/components/chat/chat.vue
	@@ -1,100 +1,99 @@
	<template>
	<div class="chat-view">
	<div class="chat-view-inner">
	<div
	ref="inner"
	class="panel-default panel chat-view-body"
	>
	<div
	ref="header"
	class="panel-heading -sticky chat-view-heading"
	>
	<button
	class="button-unstyled go-back-button"
	@click="goBack"
	>
	<FAIcon
	size="lg"
	icon="chevron-left"
	/>
	</button>
	<div class="title text-center">
	<ChatTitle
	:user="recipient"
	:with-avatar="true"
	/>
	</div>
	</div>
	<div
	class="chat-message-list message-list"
	:style="{ height: scrollableContainerHeight }"
	>
	<template v-if="!errorLoadingChat">
	<ChatMessage
	v-for="chatViewItem in chatViewItems"
	:key="chatViewItem.id"
	:author="recipient"
	:chat-view-item="chatViewItem"
	:hovered-message-chain="chatViewItem.messageChainId === hoveredMessageChainId"
	@hover="onMessageHover"
	/>
	</template>
	<div
	v-else
	class="chat-loading-error"
	>
	<div class="alert error">
	{{ $t('chats.error_loading_chat') }}
	</div>
	</div>
	</div>
	<div
	ref="footer"
	class="panel-body footer"
	>
	<div
	class="jump-to-bottom-button"
	:class="{ 'visible': jumpToBottomButtonVisible }"
	@click="scrollDown({ behavior: 'smooth' })"
	>
	<span>
	<FAIcon icon="chevron-down" />
	<div
	v-if="newMessageCount"
	class="badge -notification unread-chat-count unread-message-count"
	>
	{{ newMessageCount }}
	</div>
	</span>
	</div>
	<PostStatusForm
	:disable-subject="true"
	:disable-scope-selector="true"
	:disable-notice="true"
	:disable-lock-warning="true"
	:disable-polls="true"
	:disable-sensitivity-checkbox="true"
	:disable-submit="errorLoadingChat \|\| !currentChat"
	:disable-preview="true"
	:optimistic-posting="true"
	:post-handler="sendMessage"
	:submit-on-enter="!mobileLayout"
	:preserve-focus="!mobileLayout"
	:auto-focus="!mobileLayout"
	:placeholder="formPlaceholder"
	:file-limit="1"
	max-height="160"
	emoji-picker-placement="top"
	@resize="handleResize"
	/>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script src="./chat.js"></script>
	<style lang="scss">
	-@import "../../variables";
	@import "./chat";
	</style>
	diff --git a/src/components/chat_list/chat_list.vue b/src/components/chat_list/chat_list.vue
	index 27a475edff..b33ea67ec2 100644
	--- a/src/components/chat_list/chat_list.vue
	+++ b/src/components/chat_list/chat_list.vue
	@@ -1,64 +1,61 @@
	<template>
	<div v-if="isNew">
	<ChatNew @cancel="cancelNewChat" />
	</div>
	<div
	v-else
	class="chat-list panel panel-default"
	>
	<div class="panel-heading -sticky">
	<span class="title">
	{{ $t("chats.chats") }}
	</span>
	<button
	class="button-default"
	@click="newChat"
	>
	{{ $t("chats.new") }}
	</button>
	</div>
	<div class="panel-body">
	<div
	v-if="sortedChatList.length > 0"
	class="timeline"
	>
	<List :items="sortedChatList">
	<template #item="{item}">
	<ChatListItem
	:key="item.id"
	:compact="false"
	:chat="item"
	/>
	</template>
	</List>
	</div>
	<div
	v-else
	class="emtpy-chat-list-alert"
	>
	<span>{{ $t('chats.empty_chat_list_placeholder') }}</span>
	</div>
	</div>
	</div>
	</template>

	<script src="./chat_list.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.chat-list {
	min-height: 25em;
	margin-bottom: 0;
	}

	.emtpy-chat-list-alert {
	padding: 3em;
	font-size: 1.2em;
	display: flex;
	justify-content: center;
	- color: $fallback--text;
	- color: var(--faint, $fallback--text);
	+ color: var(--textFaint);
	}

	</style>
	diff --git a/src/components/chat_list_item/chat_list_item.vue b/src/components/chat_list_item/chat_list_item.vue
	index cbae2d11ad..0f9d5c5fa0 100644
	--- a/src/components/chat_list_item/chat_list_item.vue
	+++ b/src/components/chat_list_item/chat_list_item.vue
	@@ -1,53 +1,52 @@
	<template>
	<div
	class="chat-list-item"
	@click.capture.prevent="openChat"
	>
	<div class="chat-list-item-left">
	<UserAvatar
	:user="chat.account"
	height="48px"
	width="48px"
	/>
	</div>
	<div class="chat-list-item-center">
	<div class="heading">
	<span
	v-if="chat.account"
	class="name-and-account-name"
	>
	<ChatTitle
	:user="chat.account"
	/>
	</span>
	<span class="heading-right" />
	<div class="time-wrapper">
	<Timeago
	:time="chat.updated_at"
	:auto-update="60"
	/>
	</div>
	</div>
	<div class="chat-preview">
	<StatusBody
	class="chat-preview-body"
	:status="messageForStatusContent"
	:single-line="true"
	/>
	<div
	v-if="chat.unread > 0"
	class="badge -notification unread-chat-count"
	>
	{{ chat.unread }}
	</div>
	</div>
	</div>
	</div>
	</template>

	<script src="./chat_list_item.js"></script>

	<style lang="scss">
	-@import "../../variables";
	@import "./chat_list_item";
	</style>
	diff --git a/src/components/chat_new/chat_new.vue b/src/components/chat_new/chat_new.vue
	index 5a872b66d9..673ba56b6a 100644
	--- a/src/components/chat_new/chat_new.vue
	+++ b/src/components/chat_new/chat_new.vue
	@@ -1,53 +1,52 @@
	<template>
	<div
	class="panel-default panel chat-new"
	>
	<div
	ref="header"
	class="panel-heading"
	>
	<button
	class="button-unstyled go-back-button"
	@click="goBack"
	>
	<FAIcon
	size="lg"
	icon="chevron-left"
	/>
	</button>
	</div>
	<div class="panel-body">
	<div class="input-wrap">
	<div class="input-search">
	<FAIcon
	class="search-icon fa-scale-110 fa-old-padding"
	icon="search"
	/>
	</div>
	<input
	ref="search"
	v-model="query"
	class="input"
	placeholder="Search people"
	@input="onInput"
	>
	</div>
	<div class="member-list">
	<div
	v-for="user in availableUsers"
	:key="user.id"
	class="list-item"
	@click.capture.prevent="goToChat(user)"
	>
	<BasicUserCard :user="user" />
	</div>
	</div>
	</div>
	</div>
	</template>

	<script src="./chat_new.js"></script>
	<style lang="scss">
	-@import "../../variables";
	@import "./chat_new";
	</style>
	diff --git a/src/components/chat_title/chat_title.vue b/src/components/chat_title/chat_title.vue
	index 93db4fa7f1..68ee7a5aba 100644
	--- a/src/components/chat_title/chat_title.vue
	+++ b/src/components/chat_title/chat_title.vue
	@@ -1,65 +1,62 @@
	<template>
	<div
	class="chat-title"
	:title="title"
	>
	<UserPopover
	v-if="withAvatar && user"
	class="avatar-container"
	:user-id="user.id"
	>
	<UserAvatar
	class="titlebar-avatar"
	:user="user"
	/>
	</UserPopover>
	<RichContent
	v-if="user"
	class="username"
	:title="'@'+(user && user.screen_name_ui)"
	:html="htmlTitle"
	:emoji="user.emoji \|\| []"
	/>
	</div>
	</template>

	<script src="./chat_title.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.chat-title {
	display: flex;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;

	--emoji-size: 14px;

	.username {
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	display: inline;
	word-wrap: break-word;
	overflow: hidden;
	}

	.avatar-container {
	align-self: center;
	line-height: 1;
	}

	.titlebar-avatar {
	margin-right: 0.5em;
	height: 1.5em;
	width: 1.5em;
	- border-radius: $fallback--avatarAltRadius;
	- border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	+ border-radius: var(--roundness);

	&.animated::before {
	display: none;
	}
	}
	}
	</style>
	diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue
	index eac7919904..6261bf3a21 100644
	--- a/src/components/checkbox/checkbox.vue
	+++ b/src/components/checkbox/checkbox.vue
	@@ -1,129 +1,128 @@
	<template>
	<label
	class="checkbox"
	:class="{ disabled, indeterminate, 'indeterminate-fix': indeterminateTransitionFix }"
	>
	<input
	type="checkbox"
	class="visible-for-screenreader-only"
	:disabled="disabled"
	:checked="modelValue"
	:indeterminate="indeterminate"
	@change="$emit('update:modelValue', $event.target.checked)"
	>
	<i
	class="input -checkbox checkbox-indicator"
	:aria-hidden="true"
	@transitionend.capture="onTransitionEnd"
	/>
	<span
	v-if="!!$slots.default"
	class="label"
	>
	<slot />
	</span>
	</label>
	</template>

	<script>
	export default {
	props: [
	'modelValue',
	'indeterminate',
	'disabled'
	],
	emits: ['update:modelValue'],
	data: (vm) => ({
	indeterminateTransitionFix: vm.indeterminate
	}),
	watch: {
	indeterminate (e) {
	if (e) {
	this.indeterminateTransitionFix = true
	}
	}
	},
	methods: {
	onTransitionEnd (e) {
	if (!this.indeterminate) {
	this.indeterminateTransitionFix = false
	}
	}
	}
	}
	</script>

	<style lang="scss">
	-@import "../../variables";
	@import "../../mixins";

	.checkbox {
	position: relative;
	display: inline-block;
	min-height: 1.2em;

	& > &-indicator {
	/* Reset .input stuff */
	padding: 0;
	margin: 0;
	position: relative;
	line-height: inherit;
	display: inline;
	padding-left: 1.2em;
	box-shadow: none;
	}

	&-indicator::before {
	position: absolute;
	right: 0;
	top: 0;
	display: block;
	content: "✓";
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: var(--roundness);
	box-shadow: var(--shadow);
	background-color: var(--background);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}

	&.disabled {
	.checkbox-indicator::before,
	.label {
	opacity: 0.5;
	}

	.label {
	color: var(--text);
	}
	}

	input[type="checkbox"] {
	&:checked + .checkbox-indicator::before {
	color: var(--text);
	}

	&:indeterminate + .checkbox-indicator::before {
	content: "–";
	color: var(--text);
	}
	}

	&.indeterminate-fix {
	input[type="checkbox"] + .checkbox-indicator::before {
	content: "–";
	}
	}

	& > span {
	margin-left: 0.5em;
	}
	}
	</style>
	diff --git a/src/components/color_input/color_input.scss b/src/components/color_input/color_input.scss
	index ca46199a52..d446951c84 100644
	--- a/src/components/color_input/color_input.scss
	+++ b/src/components/color_input/color_input.scss
	@@ -1,73 +1,69 @@
	-@import "../../variables";
	-
	.color-input {
	display: inline-flex;

	&-field.input {
	display: inline-flex;
	flex: 0 0 0;
	max-width: 9em;
	align-items: stretch;
	padding: 0.2em 8px;

	input {
	background: none;
	- color: $fallback--lightText;
	- color: var(--inputText, $fallback--lightText);
	border: none;
	padding: 0;
	margin: 0;

	&.textColor {
	flex: 1 0 3em;
	min-width: 3em;
	padding: 0;
	}

	&.nativeColor {
	flex: 0 0 2em;
	min-width: 2em;
	align-self: stretch;
	min-height: 100%;
	}
	}

	.computedIndicator,
	.transparentIndicator {
	flex: 0 0 2em;
	min-width: 2em;
	align-self: stretch;
	min-height: 100%;
	}

	.transparentIndicator {
	// forgot to install counter-strike source, ooops
	background-color: #f0f;
	position: relative;

	&::before,
	&::after {
	display: block;
	content: "";
	background-color: #000;
	position: absolute;
	height: 50%;
	width: 50%;
	}

	&::after {
	top: 0;
	left: 0;
	}

	&::before {
	bottom: 0;
	right: 0;
	}
	}
	}

	.label {
	flex: 1 1 auto;
	}
	}
	diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
	index d3ebf791a9..3d2fed540f 100644
	--- a/src/components/conversation/conversation.vue
	+++ b/src/components/conversation/conversation.vue
	@@ -1,294 +1,294 @@
	<template>
	<div
	v-if="!hideStatus"
	:style="hiddenStyle"
	class="Conversation"
	:class="{ '-expanded' : isExpanded, 'panel' : isExpanded }"
	>
	<div
	v-if="isExpanded"
	class="panel-heading conversation-heading -sticky"
	>
	<span class="title"> {{ $t('timeline.conversation') }} </span>
	<button
	v-if="collapsable"
	class="button-unstyled -link"
	@click.prevent="toggleExpanded"
	>
	{{ $t('timeline.collapse') }}
	</button>
	<QuickFilterSettings
	v-if="!collapsable"
	:conversation="true"
	class="rightside-button"
	/>
	<QuickViewSettings
	v-if="!collapsable"
	:conversation="true"
	class="rightside-button"
	/>
	</div>
	<div
	class="conversation-body"
	:class="{ 'panel-body': isExpanded }"
	>
	<div
	v-if="isTreeView"
	class="thread-body"
	>
	<div
	v-if="shouldShowAllConversationButton"
	class="conversation-dive-to-top-level-box"
	>
	<i18n-t
	keypath="status.show_all_conversation_with_icon"
	tag="button"
	class="button-unstyled -link"
	scope="global"
	@click.prevent="diveToTopLevel"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-left"
	/>
	</template>
	<template #text>
	<span>
	{{ $tc('status.show_all_conversation', otherTopLevelCount, { numStatus: otherTopLevelCount }) }}
	</span>
	</template>
	</i18n-t>
	</div>
	<div
	v-if="shouldShowAncestors"
	class="thread-ancestors"
	>
	<article
	v-for="status in ancestorsOf(diveRoot)"
	:key="status.id"
	class="thread-ancestor"
	:class="{'thread-ancestor-has-other-replies': getReplies(status.id).length > 1, '-faded': shouldFadeAncestors}"
	>
	<status
	ref="statusComponent"
	:inline-expanded="collapsable && isExpanded"
	:statusoid="status"
	:expandable="!isExpanded"
	:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
	:focused="focused(status.id)"
	:in-conversation="isExpanded"
	:highlight="getHighlight()"
	:replies="getReplies(status.id)"
	:in-profile="inProfile"
	:profile-user-id="profileUserId"
	class="conversation-status status-fadein"

	:simple-tree="treeViewIsSimple"
	:toggle-thread-display="toggleThreadDisplay"
	:thread-display-status="threadDisplayStatus"
	:show-thread-recursively="showThreadRecursively"
	:total-reply-count="totalReplyCount"
	:total-reply-depth="totalReplyDepth"
	:show-other-replies-as-button="showOtherRepliesButtonInsideStatus"
	:dive="() => diveIntoStatus(status.id)"

	:controlled-showing-tall="statusContentProperties[status.id].showingTall"
	:controlled-expanding-subject="statusContentProperties[status.id].expandingSubject"
	:controlled-showing-long-subject="statusContentProperties[status.id].showingLongSubject"
	:controlled-replying="statusContentProperties[status.id].replying"
	:controlled-media-playing="statusContentProperties[status.id].mediaPlaying"
	:controlled-toggle-showing-tall="() => toggleStatusContentProperty(status.id, 'showingTall')"
	:controlled-toggle-expanding-subject="() => toggleStatusContentProperty(status.id, 'expandingSubject')"
	:controlled-toggle-showing-long-subject="() => toggleStatusContentProperty(status.id, 'showingLongSubject')"
	:controlled-toggle-replying="() => toggleStatusContentProperty(status.id, 'replying')"
	:controlled-set-media-playing="(newVal) => toggleStatusContentProperty(status.id, 'mediaPlaying', newVal)"

	@goto="setHighlight"
	@toggleExpanded="toggleExpanded"
	/>
	<div
	v-if="showOtherRepliesButtonBelowStatus && getReplies(status.id).length > 1"
	class="thread-ancestor-dive-box"
	>
	<div
	class="thread-ancestor-dive-box-inner"
	>
	<i18n-t
	tag="button"
	scope="global"
	keypath="status.ancestor_follow_with_icon"
	class="button-unstyled -link thread-tree-show-replies-button"
	@click.prevent="diveIntoStatus(status.id)"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-right"
	/>
	</template>
	<template #text>
	<span>
	{{ $tc('status.ancestor_follow', getReplies(status.id).length - 1, { numReplies: getReplies(status.id).length - 1 }) }}
	</span>
	</template>
	</i18n-t>
	</div>
	</div>
	</article>
	</div>
	<thread-tree
	v-for="status in showingTopLevel"
	:key="status.id"
	ref="statusComponent"
	:depth="0"

	:status="status"
	:in-profile="inProfile"
	:conversation="conversation"
	:collapsable="collapsable"
	:is-expanded="isExpanded"
	:pinned-status-ids-object="pinnedStatusIdsObject"
	:profile-user-id="profileUserId"

	:focused="focused"
	:get-replies="getReplies"
	:highlight="maybeHighlight"
	:set-highlight="setHighlight"
	:toggle-expanded="toggleExpanded"

	:simple="treeViewIsSimple"
	:toggle-thread-display="toggleThreadDisplay"
	:thread-display-status="threadDisplayStatus"
	:show-thread-recursively="showThreadRecursively"
	:total-reply-count="totalReplyCount"
	:total-reply-depth="totalReplyDepth"
	:status-content-properties="statusContentProperties"
	:set-status-content-property="setStatusContentProperty"
	:toggle-status-content-property="toggleStatusContentProperty"
	:dive="canDive ? diveIntoStatus : undefined"
	/>
	</div>
	<div
	v-if="isLinearView"
	class="thread-body"
	>
	<article>
	<status
	v-for="status in conversation"
	:key="status.id"
	ref="statusComponent"
	:inline-expanded="collapsable && isExpanded"
	:statusoid="status"
	:expandable="!isExpanded"
	:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
	:focused="focused(status.id)"
	:in-conversation="isExpanded"
	:highlight="getHighlight()"
	:replies="getReplies(status.id)"
	:in-profile="inProfile"
	:profile-user-id="profileUserId"
	class="conversation-status status-fadein"

	:toggle-thread-display="toggleThreadDisplay"
	:thread-display-status="threadDisplayStatus"
	:show-thread-recursively="showThreadRecursively"
	:total-reply-count="totalReplyCount"
	:total-reply-depth="totalReplyDepth"
	:status-content-properties="statusContentProperties"
	:set-status-content-property="setStatusContentProperty"
	:toggle-status-content-property="toggleStatusContentProperty"

	@goto="setHighlight"
	@toggleExpanded="toggleExpanded"
	/>
	</article>
	</div>
	</div>
	</div>
	<div
	v-else
	:style="hiddenStyle"
	/>
	</template>

	<script src="./conversation.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.Conversation {
	z-index: 1;

	.conversation-dive-to-top-level-box {
	- padding: var(--status-margin, $status-margin);
	- border-bottom: 1px solid var(--border, $fallback--border);
	+ padding: var(--status-margin);
	+ border-bottom: 1px solid var(--border);
	border-radius: 0;

	/* Make the button stretch along the whole row */
	display: flex;
	align-items: stretch;
	flex-direction: column;
	}

	.thread-ancestors {
	- margin-left: var(--status-margin, $status-margin);
	- border-left: 2px solid var(--border, $fallback--border);
	+ margin-left: var(--status-margin);
	+ border-left: 2px solid var(--border);
	}

	- .thread-ancestor.-faded .StatusContent {
	- --link: var(--faintLink);
	- --text: var(--faint);
	-
	- color: var(--text);
	+ .thread-ancestor.-faded .RichContent {
	+ /* stylelint-disable declaration-no-important */
	+ --text: var(--textFaint) !important;
	+ --link: var(--linkFaint) !important;
	+ --funtextGreentext: var(--funtextGreentextFaint) !important;
	+ --funtextCyantext: var(--funtextCyantextFaint) !important;
	+ /* stylelint-enable declaration-no-important */
	}

	.thread-ancestor-dive-box {
	- padding-left: var(--status-margin, $status-margin);
	- border-bottom: 1px solid var(--border, $fallback--border);
	+ padding-left: var(--status-margin);
	+ border-bottom: 1px solid var(--border);
	border-radius: 0;

	/* Make the button stretch along the whole row */
	&,
	&-inner {
	display: flex;
	align-items: stretch;
	flex-direction: column;
	}
	}

	.thread-ancestor-dive-box-inner {
	- padding: var(--status-margin, $status-margin);
	+ padding: var(--status-margin);
	}

	.conversation-status {
	- border-bottom: 1px solid var(--border, $fallback--border);
	+ border-bottom: 1px solid var(--border);
	border-radius: 0;
	}

	.thread-ancestor-has-other-replies .conversation-status,
	&:last-child:not(.-expanded) .conversation-status,
	&.-expanded .conversation-status:last-child,
	.thread-ancestor:last-child .conversation-status,
	.thread-ancestor:last-child .thread-ancestor-dive-box,
	&.-expanded .thread-tree .conversation-status {
	border-bottom: none;
	}

	.thread-ancestors + .thread-tree > .conversation-status {
	- border-top: 1px solid var(--border, $fallback--border);
	+ border-top: 1px solid var(--border);
	}

	/* expanded conversation in timeline */
	&.status-fadein.-expanded .thread-body {
	border-left: 4px solid var(--cRed);
	border-radius: var(--roundness);
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	border-bottom: 1px solid var(--border);
	}

	&.-expanded.status-fadein {
	background: var(--background);
	- padding: calc(var(--status-margin, $status-margin) / 2);
	+ padding: calc(var(--status-margin) / 2);
	}
	}
	</style>
	diff --git a/src/components/desktop_nav/desktop_nav.scss b/src/components/desktop_nav/desktop_nav.scss
	index 373cb2f2a5..61d2541ca2 100644
	--- a/src/components/desktop_nav/desktop_nav.scss
	+++ b/src/components/desktop_nav/desktop_nav.scss
	@@ -1,127 +1,125 @@
	-@import "../../variables";
	-
	.DesktopNav {
	width: 100%;
	z-index: var(--ZI_navbar);

	input {
	color: var(--inputTopbarText, var(--inputText));
	}

	a {
	color: var(--link);
	}

	.inner-nav {
	display: grid;
	grid-template-rows: var(--navbar-height);
	grid-template-columns: 2fr auto 2fr;
	grid-template-areas: "sitename logo actions";
	box-sizing: border-box;
	padding: 0 1.2em;
	margin: auto;
	max-width: 980px;
	}

	&.-column-stretch .inner-nav {
	--miniColumn: 25rem;
	--maxiColumn: 45rem;
	--columnGap: 1em;

	max-width:
	calc(
	var(--sidebarColumnWidth, var(--miniColumn)) +
	var(--contentColumnWidth, var(--maxiColumn)) +
	var(--columnGap)
	);
	}

	&.-logoLeft .inner-nav {
	grid-template-columns: auto 2fr 2fr;
	grid-template-areas: "logo sitename actions";
	}

	&.-column-stretch.-wide .inner-nav {
	max-width:
	calc(
	var(--sidebarColumnWidth, var(--miniColumn)) +
	var(--contentColumnWidth, var(--maxiColumn)) +
	var(--notifsColumnWidth, var(--miniColumn)) +
	var(--columnGap)
	);
	}

	.button-default {
	&,
	svg {
	color: var(--text);
	}
	}

	.logo {
	grid-area: logo;
	position: relative;
	transition: opacity;
	transition-timing-function: ease-out;
	transition-duration: 100ms;

	@media all and (min-width: 800px) {
	/* stylelint-disable-next-line declaration-no-important */
	opacity: 1 !important;
	}

	.mask {
	mask-repeat: no-repeat;
	mask-position: center;
	mask-size: contain;
	background-color: var(--text);
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	}

	img {
	display: inline-block;
	height: var(--navbar-height);
	}
	}

	.nav-icon {
	margin-left: 0.2em;
	width: 2em;
	height: 100%;
	text-align: center;

	.svg-inline--fa {
	color: var(--link);
	}
	}

	.sitename {
	grid-area: sitename;
	}

	.actions {
	grid-area: actions;
	}

	.item {
	flex: 1;
	line-height: var(--navbar-height);
	height: var(--navbar-height);
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;

	&.right {
	justify-content: flex-end;
	text-align: right;
	}
	}

	.spacer {
	width: 1em;
	}
	}
	diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue
	index 341cf1054b..b917c6371f 100644
	--- a/src/components/dialog_modal/dialog_modal.vue
	+++ b/src/components/dialog_modal/dialog_modal.vue
	@@ -1,91 +1,82 @@
	<template>
	<span
	:class="{ 'dark-overlay': darkOverlay }"
	@click.self.stop="onCancel()"
	>
	<div
	class="dialog-modal panel panel-default"
	@click.stop=""
	>
	<div class="panel-heading dialog-modal-heading">
	<div class="title">
	<slot name="header" />
	</div>
	</div>
	<div class="dialog-modal-content">
	<slot name="default" />
	</div>
	<div class="dialog-modal-footer user-interactions panel-footer">
	<slot name="footer" />
	</div>
	</div>
	</span>
	</template>

	<script src="./dialog_modal.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	// TODO: unify with other modals.
	.dark-overlay {
	&::before {
	bottom: 0;
	content: " ";
	display: block;
	cursor: default;
	left: 0;
	position: fixed;
	right: 0;
	top: 0;
	background: rgb(27 31 35 / 50%);
	z-index: 2000;
	}
	}

	.dialog-modal.panel {
	top: 0;
	left: 50%;
	max-height: 80vh;
	max-width: 90vw;
	margin: 15vh auto;
	position: fixed;
	transform: translateX(-50%);
	z-index: 2001;
	cursor: default;
	display: block;
	- background-color: $fallback--bg;
	- background-color: var(--bg, $fallback--bg);

	.dialog-modal-heading {
	.title {
	text-align: center;
	}
	}

	.dialog-modal-content {
	margin: 0;
	padding: 1rem;
	- background-color: $fallback--bg;
	- background-color: var(--bg, $fallback--bg);
	white-space: normal;
	}

	.dialog-modal-footer {
	margin: 0;
	padding: 0.5em;
	- background-color: $fallback--bg;
	- background-color: var(--bg, $fallback--bg);
	- border-top: 1px solid $fallback--border;
	- border-top: 1px solid var(--border, $fallback--border);
	+ border-top: 1px solid var(--border);
	display: flex;
	justify-content: flex-end;

	button {
	width: auto;
	margin-left: 0.5rem;
	}
	}
	}

	</style>
	diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
	index 7196922789..f313311ea5 100644
	--- a/src/components/emoji_input/emoji_input.vue
	+++ b/src/components/emoji_input/emoji_input.vue
	@@ -1,224 +1,222 @@
	<template>
	<div
	ref="root"
	class="input emoji-input"
	:class="{ 'with-picker': !hideEmojiButton }"
	>
	<slot
	:id="'textbox-' + randomSeed"
	:aria-owns="suggestionListId"
	aria-autocomplete="both"
	:aria-expanded="showSuggestions"
	:aria-activedescendant="(!showSuggestions \|\| highlighted === -1) ? '' : suggestionItemId(highlighted)"
	/>
	<!-- TODO: make the 'x' disappear if at the end maybe? -->
	<div
	ref="hiddenOverlay"
	class="hidden-overlay"
	:style="overlayStyle"
	:aria-hidden="true"
	>
	<span>{{ preText }}</span>
	<span
	ref="hiddenOverlayCaret"
	class="caret"
	>x</span>
	<span>{{ postText }}</span>
	</div>
	<screen-reader-notice
	ref="screenReaderNotice"
	aria-live="assertive"
	/>
	<template v-if="enableEmojiPicker">
	<button
	v-if="!hideEmojiButton"
	class="button-unstyled emoji-picker-icon"
	type="button"
	:title="$t('emoji.add_emoji')"
	@click.prevent="togglePicker"
	>
	<FAIcon :icon="['far', 'smile-beam']" />
	</button>
	<EmojiPicker
	v-if="enableEmojiPicker"
	ref="picker"
	:enable-sticker-picker="enableStickerPicker"
	class="emoji-picker-panel"
	@emoji="insert"
	@sticker-uploaded="onStickerUploaded"
	@sticker-upload-failed="onStickerUploadFailed"
	@show="onPickerShown"
	@close="onPickerClosed"
	/>
	</template>
	<Popover
	ref="suggestorPopover"
	class="autocomplete-panel"
	placement="bottom"
	:trigger-attrs="{ 'aria-hidden': true }"
	>
	<template #content>
	<div
	:id="suggestionListId"
	ref="panel-body"
	class="autocomplete-panel-body"
	role="listbox"
	>
	<div
	v-for="(suggestion, index) in suggestions"
	:id="suggestionItemId(index)"
	:key="index"
	class="menu-item autocomplete-item"
	role="option"
	:class="{ '-active': index === highlighted }"
	:aria-label="autoCompleteItemLabel(suggestion)"
	:aria-selected="index === highlighted"
	@click.stop.prevent="onClick($event, suggestion)"
	>
	<span class="image">
	<img
	v-if="suggestion.img"
	:src="suggestion.img"
	>
	<span v-else>{{ suggestion.replacement }}</span>
	</span>
	<div class="label">
	<span
	v-if="suggestion.user"
	class="displayText"
	>
	{{ suggestion.displayText }}<UnicodeDomainIndicator
	:user="suggestion.user"
	:at="false"
	/>
	</span>
	<span
	v-if="!suggestion.user"
	class="displayText"
	>
	{{ maybeLocalizedEmojiName(suggestion) }}
	</span>
	<span class="detailText">{{ suggestion.detailText }}</span>
	</div>
	</div>
	</div>
	</template>
	</Popover>
	</div>
	</template>

	<script src="./emoji_input.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.input.emoji-input {
	padding: 0;
	display: flex;
	flex-direction: column;
	position: relative;

	.emoji-picker-icon {
	position: absolute;
	top: 0;
	right: 0;
	margin: 0.2em 0.25em;
	font-size: 1.3em;
	cursor: pointer;
	line-height: 24px;

	&:hover i {
	color: var(--text);
	}
	}

	.emoji-picker-panel {
	position: absolute;
	z-index: 20;
	margin-top: 2px;

	&.hide {
	display: none;
	}
	}

	input,
	textarea {
	flex: 1 0 auto;
	color: inherit;
	// stylint-disable-next-line declaration-no-important
	background: none !important;
	box-shadow: none;
	border: none;
	outline: none;
	}

	&.with-picker input {
	padding-right: 30px;
	}

	.hidden-overlay {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	overflow: hidden;

	/* DEBUG STUFF */
	color: red;

	/* set opacity to non-zero to see the overlay */

	.caret {
	width: 0;
	margin-right: calc(-1ch - 1px);
	border: 1px solid red;
	}
	}
	}

	.autocomplete {
	&-panel {
	position: absolute;
	}

	&-item.menu-item {
	display: flex;
	padding-top: 0;
	padding-bottom: 0;

	.image {
	width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
	height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
	line-height: var(--__line-height);
	text-align: center;
	margin-right: var(--__horizontal-gap);

	img {
	width: calc(var(--__line-height) + var(--__vertical-gap) * 2);
	height: calc(var(--__line-height) + var(--__vertical-gap) * 2);
	object-fit: contain;
	}
	}

	.label {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin: 0 0.1em 0 0.2em;

	.displayText {
	line-height: 1.5;
	}

	.detailText {
	font-size: 9px;
	line-height: 9px;
	}
	}
	}
	}
	</style>
	diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss
	index 7d42fcfb42..5602a16b78 100644
	--- a/src/components/emoji_picker/emoji_picker.scss
	+++ b/src/components/emoji_picker/emoji_picker.scss
	@@ -1,208 +1,205 @@
	-@import "../../variables";
	-
	$emoji-picker-header-height: 36px;
	$emoji-picker-header-picture-width: 32px;
	$emoji-picker-header-picture-height: 32px;
	$emoji-picker-emoji-size: 32px;

	.emoji-picker {
	width: 25em;
	max-width: calc(100vw - 20px); // popover gives 10px margin from window edge
	display: flex;
	flex-direction: column;

	&-header-image {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: $emoji-picker-header-picture-width;
	max-width: $emoji-picker-header-picture-width;
	height: $emoji-picker-header-picture-height;
	max-height: $emoji-picker-header-picture-height;

	.still-image {
	max-width: 100%;
	max-height: 100%;
	height: 100%;
	width: 100%;
	object-fit: contain;
	}
	}

	.keep-open,
	.too-many-emoji,
	.hide-custom-emoji {
	padding: 7px;
	line-height: normal;
	}

	.hide-custom-emoji {
	padding-top: 0;
	}

	.too-many-emoji {
	display: flex;
	flex-direction: column;
	}

	.keep-open-label {
	padding: 0 7px;
	display: flex;
	}

	.heading {
	display: flex;
	padding: 10px 7px 5px;
	}

	.content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
	}

	.emoji-tabs {
	flex-grow: 1;
	display: flex;
	flex-flow: row nowrap;
	overflow-x: auto;
	}

	.additional-tabs {
	display: flex;
	border-left: 1px solid;
	- border-left-color: $fallback--icon;
	- border-left-color: var(--icon, $fallback--icon);
	+ border-left-color: var(--border);
	padding-left: 7px;
	flex: 0 0 auto;
	}

	.additional-tabs,
	.emoji-tabs {
	flex-basis: auto;
	display: flex;
	align-content: center;

	&-item {
	padding: 0 7px;
	cursor: pointer;
	font-size: 1.85em;
	width: $emoji-picker-header-picture-width;
	max-width: $emoji-picker-header-picture-width;
	height: $emoji-picker-header-picture-height;
	max-height: $emoji-picker-header-picture-height;
	display: flex;
	align-items: center;

	&.disabled {
	opacity: 0.5;
	pointer-events: none;
	}

	&.toggled {
	border-bottom: 4px solid;
	}
	}
	}

	.sticker-picker {
	flex: 1 1 auto;
	}

	.stickers,
	.emoji {
	&-content {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;

	&.hidden {
	opacity: 0;
	pointer-events: none;
	position: absolute;
	}
	}
	}

	.emoji {
	&-search {
	padding: 5px;
	flex: 0 0 auto;

	input {
	width: 100%;
	}
	}

	&-groups {
	height: 100%;
	min-height: 200px;
	flex: 1 1 1px;
	position: relative;
	overflow: auto;
	user-select: none;
	mask:
	linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
	linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
	linear-gradient(to top, white, white);
	transition: mask-size 150ms;
	mask-size: 100% 20px, 100% 20px, auto;
	// Autoprefixed seem to ignore this one, and also syntax is different
	mask-composite: xor;
	mask-composite: exclude;

	&.scrolled {
	&-top {
	mask-size: 100% 20px, 100% 0, auto;
	}

	&-bottom {
	mask-size: 100% 0, 100% 20px, auto;
	}
	}
	}

	&-group {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-left: 5px;
	justify-content: left;

	&-title {
	font-size: 0.85em;
	width: 100%;
	margin: 0;

	&.disabled {
	display: none;
	}
	}
	}

	&-item {
	width: $emoji-picker-emoji-size;
	height: $emoji-picker-emoji-size;
	box-sizing: border-box;
	display: flex;
	line-height: $emoji-picker-emoji-size;
	align-items: center;
	justify-content: center;
	margin: 4px;
	cursor: pointer;

	.emoji-picker-emoji.-custom {
	object-fit: contain;
	max-width: 100%;
	max-height: 100%;
	}

	.emoji-picker-emoji.-unicode {
	font-size: 24px;
	overflow: hidden;
	}
	}
	}
	}
	diff --git a/src/components/emoji_reactions/emoji_reactions.vue b/src/components/emoji_reactions/emoji_reactions.vue
	index c11b338ec1..a228af115b 100644
	--- a/src/components/emoji_reactions/emoji_reactions.vue
	+++ b/src/components/emoji_reactions/emoji_reactions.vue
	@@ -1,206 +1,200 @@
	<template>
	<div class="EmojiReactions">
	<span
	v-for="(reaction) in emojiReactions"
	:key="reaction.url \|\| reaction.name"
	class="emoji-reaction-container btn-group"
	>
	<component
	:is="loggedIn ? 'button' : 'a'"
	v-bind="!loggedIn ? { href: remoteInteractionLink } : {}"
	role="button"
	class="emoji-reaction btn button-default"
	:class="{ '-picked-reaction': reactedWith(reaction.name) }"
	:title="reaction.url ? reaction.name : undefined"
	:aria-pressed="reactedWith(reaction.name)"
	@click="emojiOnClick(reaction.name, $event)"
	>
	<span
	class="reaction-emoji"
	>
	<img
	v-if="reaction.url"
	:src="reaction.url"
	class="reaction-emoji-content"
	width="1em"
	>
	<span
	v-else
	class="reaction-emoji reaction-emoji-content"
	>{{ reaction.name }}</span>
	</span>
	<FALayers>
	<FAIcon
	v-if="reactedWith(reaction.name)"
	class="active-marker"
	transform="shrink-6 up-9"
	icon="check"
	/>
	<FAIcon
	v-if="!reactedWith(reaction.name)"
	class="focus-marker"
	transform="shrink-6 up-9"
	icon="plus"
	/>
	<FAIcon
	v-else
	class="focus-marker"
	transform="shrink-6 up-9"
	icon="minus"
	/>
	</FALayers>
	</component>
	<UserListPopover
	:users="accountsForEmoji[reaction.name]"
	class="emoji-reaction-popover"
	:trigger-attrs="counterTriggerAttrs(reaction)"
	@show="fetchEmojiReactionsByIfMissing()"
	>
	<span class="emoji-reaction-counts">{{ reaction.count }}</span>
	</UserListPopover>
	</span>
	<a
	v-if="tooManyReactions"
	class="emoji-reaction-expand faint"
	href="javascript:void(0)"
	@click="toggleShowAll"
	>
	{{ showAll ? $t('general.show_less') : showMoreString }}
	</a>
	</div>
	</template>

	<script src="./emoji_reactions.js"></script>
	<style lang="scss">
	-@import "../../variables";
	@import "../../mixins";

	.EmojiReactions {
	display: flex;
	margin-top: 0.25em;
	flex-wrap: wrap;

	--emoji-size: calc(1.25em * var(--emojiReactionsScale, 1));

	.emoji-reaction-container {
	display: flex;
	align-items: stretch;
	margin-top: 0.5em;
	margin-right: 0.5em;

	.emoji-reaction-popover {
	padding: 0;

	.emoji-reaction-count-button {
	background-color: var(--btn);
	margin: 0;
	height: 100%;
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	box-sizing: border-box;
	min-width: 2em;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	- color: $fallback--text;
	- color: var(--btnText, $fallback--text);

	&.-picked-reaction {
	- border: 1px solid var(--accent, $fallback--link);
	+ border: 1px solid var(--accent);
	margin-right: -1px;
	}
	}
	}
	}

	.emoji-reaction {
	padding-left: 0.5em;
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	margin: 0;

	.reaction-emoji {
	width: var(--emoji-size);
	height: var(--emoji-size);
	margin-right: 0.25em;
	line-height: var(--emoji-size);
	display: flex;
	justify-content: center;
	align-items: center;
	}

	.reaction-emoji-content {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	line-height: inherit;
	overflow: hidden;
	font-size: calc(var(--emoji-size) * 0.8);
	margin: 0;
	}

	&:focus {
	outline: none;
	}

	.svg-inline--fa {
	- color: $fallback--text;
	- color: var(--btnText, $fallback--text);
	+ color: var(--text);
	}

	&.-picked-reaction {
	- border: 1px solid var(--accent, $fallback--link);
	+ border: 1px solid var(--accent);
	margin-left: -1px; // offset the border, can't use inset shadows either
	margin-right: -1px;

	.svg-inline--fa {
	- color: $fallback--link;
	- color: var(--accent, $fallback--link);
	+ color: var(--accent);
	}
	}

	@include unfocused-style {
	.focus-marker {
	visibility: hidden;
	}

	.active-marker {
	visibility: visible;
	}
	}

	@include focused-style {
	.svg-inline--fa {
	- color: $fallback--link;
	- color: var(--accent, $fallback--link);
	+ color: var(--accent);
	}

	.focus-marker {
	visibility: visible;
	}

	.active-marker {
	visibility: hidden;
	}
	}
	}

	.emoji-reaction-expand {
	padding: 0 0.5em;
	margin-right: 0.5em;
	margin-top: 0.5em;
	display: flex;
	align-items: center;
	justify-content: center;

	&:hover {
	text-decoration: underline;
	}
	}
	}
	</style>
	diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
	index 48f45eb52c..7b38d9740d 100644
	--- a/src/components/extra_buttons/extra_buttons.vue
	+++ b/src/components/extra_buttons/extra_buttons.vue
	@@ -1,236 +1,234 @@
	<template>
	<Popover
	class="ExtraButtons"
	trigger="click"
	:trigger-attrs="triggerAttrs"
	placement="top"
	:offset="{ y: 5 }"
	:bound-to="{ x: 'container' }"
	remove-padding
	@show="onShow"
	@close="onClose"
	>
	<template #content="{close}">
	<div
	:id="`popup-menu-${randomSeed}`"
	class="dropdown-menu"
	role="menu"
	>
	<button
	v-if="canMute && !status.thread_muted"
	class="menu-item dropdown-item dropdown-item-icon"
	role="menuitem"
	@click.prevent="muteConversation"
	>
	<FAIcon
	fixed-width
	icon="eye-slash"
	/><span>{{ $t("status.mute_conversation") }}</span>
	</button>
	<button
	v-if="canMute && status.thread_muted"
	class="menu-item dropdown-item dropdown-item-icon"
	role="menuitem"
	@click.prevent="unmuteConversation"
	>
	<FAIcon
	fixed-width
	icon="eye-slash"
	/><span>{{ $t("status.unmute_conversation") }}</span>
	</button>
	<button
	v-if="!status.pinned && canPin"
	class="menu-item dropdown-item dropdown-item-icon"
	role="menuitem"
	@click.prevent="pinStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="thumbtack"
	/><span>{{ $t("status.pin") }}</span>
	</button>
	<button
	v-if="status.pinned && canPin"
	class="menu-item dropdown-item dropdown-item-icon"
	role="menuitem"
	@click.prevent="unpinStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="thumbtack"
	/><span>{{ $t("status.unpin") }}</span>
	</button>
	<template v-if="canBookmark">
	<button
	v-if="!status.bookmarked"
	class="menu-item dropdown-item dropdown-item-icon"
	role="menuitem"
	@click.prevent="bookmarkStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	:icon="['far', 'bookmark']"
	/><span>{{ $t("status.bookmark") }}</span>
	</button>
	<button
	v-if="status.bookmarked"
	class="menu-item dropdown-item dropdown-item-icon"
	role="menuitem"
	@click.prevent="unbookmarkStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="bookmark"
	/><span>{{ $t("status.unbookmark") }}</span>
	</button>
	</template>
	<button
	v-if="ownStatus && editingAvailable"
	class="menu-item dropdown-item dropdown-item-icon"
	role="menuitem"
	@click.prevent="editStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="pen"
	/><span>{{ $t("status.edit") }}</span>
	</button>
	<button
	v-if="isEdited && editingAvailable"
	class="menu-item dropdown-item dropdown-item-icon"
	role="menuitem"
	@click.prevent="showStatusHistory"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="history"
	/><span>{{ $t("status.status_history") }}</span>
	</button>
	<button
	v-if="canDelete"
	class="menu-item dropdown-item dropdown-item-icon"
	role="menuitem"
	@click.prevent="deleteStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="times"
	/><span>{{ $t("status.delete") }}</span>
	</button>
	<button
	class="menu-item dropdown-item dropdown-item-icon"
	role="menuitem"
	@click.prevent="copyLink"
	@click="close"
	>
	<FAIcon
	fixed-width
	icon="share-alt"
	/><span>{{ $t("status.copy_link") }}</span>
	</button>
	<a
	v-if="!status.is_local"
	class="menu-item dropdown-item dropdown-item-icon"
	role="menuitem"
	title="Source"
	:href="status.external_url"
	target="_blank"
	>
	<FAIcon
	fixed-width
	icon="external-link-alt"
	/><span>{{ $t("status.external_source") }}</span>
	</a>
	<button
	class="menu-item dropdown-item dropdown-item-icon"
	role="menuitem"
	@click.prevent="reportStatus"
	@click="close"
	>
	<FAIcon
	fixed-width
	:icon="['far', 'flag']"
	/><span>{{ $t("user_card.report") }}</span>
	</button>
	</div>
	</template>
	<template #trigger>
	<span class="button-unstyled popover-trigger">
	<FALayers class="fa-old-padding-layer">
	<FAIcon
	class="fa-scale-110 "
	icon="ellipsis-h"
	/>
	<FAIcon
	v-show="!expanded"
	class="focus-marker"
	transform="shrink-6 up-8 right-16"
	icon="plus"
	/>
	<FAIcon
	v-show="expanded"
	class="focus-marker"
	transform="shrink-6 up-8 right-16"
	icon="times"
	/>
	</FALayers>
	</span>
	<teleport to="#modal">
	<ConfirmModal
	v-if="showingDeleteDialog"
	:title="$t('status.delete_confirm_title')"
	:cancel-text="$t('status.delete_confirm_cancel_button')"
	:confirm-text="$t('status.delete_confirm_accept_button')"
	@cancelled="hideDeleteStatusConfirmDialog"
	@accepted="doDeleteStatus"
	>
	{{ $t('status.delete_confirm') }}
	</ConfirmModal>
	</teleport>
	</template>
	</Popover>
	</template>

	<script src="./extra_buttons.js"></script>

	<style lang="scss">
	-@import "../../variables";
	@import "../../mixins";

	.ExtraButtons {
	.popover-trigger {
	position: static;
	padding: 10px;
	margin: -10px;

	&:hover .svg-inline--fa {
	- color: $fallback--text;
	- color: var(--text, $fallback--text);
	+ color: var(--text);
	}
	}

	.popover-trigger-button {
	/* override of popover internal stuff */
	width: auto;

	@include unfocused-style {
	.focus-marker {
	visibility: hidden;
	}
	}

	@include focused-style {
	.focus-marker {
	visibility: visible;
	}
	}
	}
	}
	</style>
	diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue
	index 6e0456a5f4..600c99bbb5 100644
	--- a/src/components/extra_notifications/extra_notifications.vue
	+++ b/src/components/extra_notifications/extra_notifications.vue
	@@ -1,113 +1,110 @@
	<template>
	<div class="ExtraNotifications">
	<div
	v-if="shouldShowChats"
	class="notification unseen"
	>
	<div class="notification-overlay" />
	<router-link
	class="button-unstyled -link extra-notification"
	:to="{ name: 'chats', params: { username: currentUser.screen_name } }"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 icon"
	icon="comments"
	/>
	{{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }}
	</router-link>
	</div>
	<div
	v-if="shouldShowAnnouncements"
	class="notification unseen"
	>
	<div class="notification-overlay" />
	<router-link
	class="button-unstyled -link extra-notification"
	:to="{ name: 'announcements' }"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 icon"
	icon="bullhorn"
	/>
	{{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }}
	</router-link>
	</div>
	<div
	v-if="shouldShowFollowRequests"
	class="notification unseen"
	>
	<div class="notification-overlay" />
	<router-link
	class="button-unstyled -link extra-notification"
	:to="{ name: 'friend-requests' }"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 icon"
	icon="user-plus"
	/>
	{{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }}
	</router-link>
	</div>
	<i18n-t
	v-if="shouldShowCustomizationTip"
	tag="span"
	class="notification tip extra-notification"
	keypath="notifications.configuration_tip"
	>
	<template #theSettings>
	<button
	class="button-unstyled -link"
	@click="openNotificationSettings"
	>
	{{ $t('notifications.configuration_tip_settings') }}
	</button>
	</template>
	<template #dismiss>
	<button
	class="button-unstyled -link"
	@click="dismissConfigurationTip"
	>
	{{ $t('notifications.configuration_tip_dismiss') }}
	</button>
	</template>
	</i18n-t>
	</div>
	</template>

	<script src="./extra_notifications.js" />

	<style lang="scss">
	-@import "../../variables";
	-
	.ExtraNotifications {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: stretch;

	.notification {
	width: 100%;
	border-bottom: 1px solid;
	- border-color: $fallback--border;
	- border-color: var(--border, $fallback--border);
	+ border-color: var(--border);
	display: flex;
	flex-direction: column;
	align-items: stretch;
	}

	.extra-notification {
	padding: 1em;
	}

	.icon {
	margin-right: 0.5em;
	}

	.tip {
	display: inline;
	}
	}
	</style>
	diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue
	index 8c883c13f9..2e0dd04763 100644
	--- a/src/components/favorite_button/favorite_button.vue
	+++ b/src/components/favorite_button/favorite_button.vue
	@@ -1,116 +1,114 @@
	<template>
	<div class="FavoriteButton">
	<button
	v-if="loggedIn"
	class="button-unstyled interactive"
	:class="status.favorited && '-favorited'"
	:title="$t('tool_tip.favorite')"
	@click.prevent="favorite()"
	>
	<FALayers class="fa-scale-110 fa-old-padding-layer">
	<FAIcon
	class="fa-scale-110"
	:icon="[status.favorited ? 'fas' : 'far', 'star']"
	:spin="animated"
	/>
	<FAIcon
	v-if="status.favorited"
	class="active-marker"
	transform="shrink-6 up-9 right-12"
	icon="check"
	/>
	<FAIcon
	v-if="!status.favorited"
	class="focus-marker"
	transform="shrink-6 up-9 right-12"
	icon="plus"
	/>
	<FAIcon
	v-else
	class="focus-marker"
	transform="shrink-6 up-9 right-12"
	icon="minus"
	/>
	</FALayers>
	</button>
	<a
	v-else
	class="button-unstyled interactive"
	target="_blank"
	role="button"
	:title="$t('tool_tip.favorite')"
	:href="remoteInteractionLink"
	>
	<FALayers class="fa-scale-110 fa-old-padding-layer">
	<FAIcon
	class="fa-scale-110"
	:icon="['far', 'star']"
	/>
	<FAIcon
	class="focus-marker"
	transform="shrink-6 up-9 right-12"
	icon="plus"
	/>
	</FALayers>
	</a>
	<span
	v-if="!mergedConfig.hidePostStats && status.fave_num > 0"
	class="action-counter"
	>
	{{ status.fave_num }}
	</span>
	</div>
	</template>

	<script src="./favorite_button.js"></script>

	<style lang="scss">
	-@import "../../variables";
	@import "../../mixins";

	.FavoriteButton {
	display: flex;

	> :first-child {
	padding: 10px;
	margin: -10px -8px -10px -10px;
	}

	.action-counter {
	pointer-events: none;
	user-select: none;
	}

	.interactive {
	.svg-inline--fa {
	animation-duration: 0.6s;
	}

	&:hover .svg-inline--fa,
	&.-favorited .svg-inline--fa {
	- color: $fallback--cOrange;
	- color: var(--cOrange, $fallback--cOrange);
	+ color: var(--cOrange);
	}

	@include unfocused-style {
	.focus-marker {
	visibility: hidden;
	}

	.active-marker {
	visibility: visible;
	}
	}

	@include focused-style {
	.focus-marker {
	visibility: visible;
	}

	.active-marker {
	visibility: hidden;
	}
	}
	}
	}
	</style>
	diff --git a/src/components/flash/flash.vue b/src/components/flash/flash.vue
	index 9f58d314c9..c9fc730be2 100644
	--- a/src/components/flash/flash.vue
	+++ b/src/components/flash/flash.vue
	@@ -1,85 +1,83 @@
	<template>
	<div class="Flash">
	<div
	v-if="player === true \|\| player === 'hidden'"
	ref="container"
	class="player"
	:class="{ hidden: player === 'hidden' }"
	/>
	<button
	v-if="player !== true"
	class="button-unstyled placeholder"
	@click="openPlayer"
	>
	<span
	v-if="player === 'hidden'"
	class="label"
	>
	{{ $t('general.loading') }}
	</span>
	<span
	v-if="player === 'error'"
	class="label"
	>
	{{ $t('general.flash_fail') }}
	</span>
	<span
	v-else
	class="label"
	>
	<p>
	{{ $t('general.flash_content') }}
	</p>
	<p>
	<FAIcon icon="exclamation-triangle" />
	{{ $t('general.flash_security') }}
	</p>
	</span>
	</button>
	</div>
	</template>

	<script src="./flash.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.Flash {
	display: inline-block;
	width: 100%;
	height: 100%;
	position: relative;

	.player {
	height: 100%;
	width: 100%;
	}

	.placeholder {
	height: 100%;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--bg);
	color: var(--link);
	}

	.hider {
	top: 0;
	}

	.label {
	text-align: center;
	flex: 1 1 0;
	line-height: 1.2;
	white-space: normal;
	word-wrap: normal;
	}

	.hidden {
	display: none;
	visibility: "hidden";
	}
	}
	</style>
	diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
	index d5e6357897..d2d1b38845 100644
	--- a/src/components/font_control/font_control.vue
	+++ b/src/components/font_control/font_control.vue
	@@ -1,76 +1,74 @@
	<template>
	<div
	class="font-control style-control"
	:class="{ custom: isCustom }"
	>
	<label
	:id="name + '-label'"
	:for="preset === 'custom' ? name : name + '-font-switcher'"
	class="label"
	>
	{{ label }}
	</label>
	<input
	v-if="typeof fallback !== 'undefined'"
	:id="name + '-o'"
	:aria-labelledby="name + '-label'"
	class="input -checkbox opt exlcude-disabled visible-for-screenreader-only"
	type="checkbox"
	:checked="present"
	@change="$emit('update:modelValue', typeof modelValue === 'undefined' ? fallback : undefined)"
	>
	<label
	v-if="typeof fallback !== 'undefined'"
	class="opt-l"
	:for="name + '-o'"
	:aria-hidden="true"
	/>
	{{ ' ' }}
	<Select
	:id="name + '-font-switcher'"
	v-model="preset"
	:disabled="!present"
	class="font-switcher"
	>
	<option
	v-for="option in availableOptions"
	:key="option"
	:value="option"
	>
	{{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
	</option>
	</Select>
	<input
	v-if="isCustom"
	:id="name"
	v-model="family"
	class="input custom-font"
	type="text"
	>
	</div>
	</template>

	<script src="./font_control.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.font-control {
	input.custom-font {
	min-width: 10em;
	}

	&.custom {
	/* TODO Should make proper joiners... */
	.font-switcher {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	}

	.custom-font {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	}
	}
	}
	</style>
	diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue
	index 96b554e31c..40048285c6 100644
	--- a/src/components/gallery/gallery.vue
	+++ b/src/components/gallery/gallery.vue
	@@ -1,190 +1,188 @@
	<template>
	<div
	ref="galleryContainer"
	class="Gallery"
	:class="{ '-long': tooManyAttachments && hidingLong }"
	>
	<div class="gallery-rows">
	<div
	v-for="(row, rowIndex) in rows"
	:key="rowIndex"
	class="gallery-row"
	:style="rowStyle(row)"
	:class="{ '-audio': row.audio, '-minimal': row.minimal, '-grid': grid }"
	>
	<div
	class="gallery-row-inner"
	:class="{ '-grid': grid }"
	>
	<Attachment
	v-for="(attachment, attachmentIndex) in row.items"
	:key="attachment.id"
	class="gallery-item"
	:compact="compact"
	:nsfw="nsfw"
	:attachment="attachment"
	:size="size"
	:editable="editable"
	:remove="removeAttachment"
	:shift-up="!(attachmentIndex === 0 && rowIndex === 0) && shiftUpAttachment"
	:shift-dn="!(attachmentIndex === row.items.length - 1 && rowIndex === rows.length - 1) && shiftDnAttachment"
	:edit="editAttachment"
	:description="descriptions && descriptions[attachment.id]"
	:hide-description="size === 'small' \|\| tooManyAttachments && hidingLong"
	:style="itemStyle(attachment.id, row.items)"
	@setMedia="onMedia"
	@naturalSizeLoad="onNaturalSizeLoad"
	/>
	</div>
	</div>
	</div>
	<div
	v-if="tooManyAttachments"
	class="many-attachments"
	>
	<div class="many-attachments-text">
	{{ $t("status.many_attachments", { number: attachments.length }) }}
	</div>
	<div class="many-attachments-buttons">
	<span
	v-if="!hidingLong"
	class="many-attachments-button"
	>
	<button
	class="button-unstyled -link"
	@click="toggleHidingLong(true)"
	>
	{{ $t("status.collapse_attachments") }}
	</button>
	</span>
	<span
	v-if="hidingLong"
	class="many-attachments-button"
	>
	<button
	class="button-unstyled -link"
	@click="toggleHidingLong(false)"
	>
	{{ $t("status.show_all_attachments") }}
	</button>
	</span>
	<span
	v-if="hidingLong"
	class="many-attachments-button"
	>
	<button
	class="button-unstyled -link"
	@click="openGallery"
	>
	{{ $t("status.open_gallery") }}
	</button>
	</span>
	</div>
	</div>
	</div>
	</template>

	<script src='./gallery.js'></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.Gallery {
	.gallery-rows {
	display: flex;
	flex-direction: column;
	}

	.gallery-row {
	position: relative;
	height: 0;
	width: 100%;
	flex-grow: 1;

	.gallery-row-inner {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	flex-flow: row wrap;
	align-content: stretch;

	.gallery-item {
	margin: 0 0.5em 0 0;
	flex-grow: 1;
	height: 100%;
	box-sizing: border-box;
	// to make failed images a bit more noticeable on chromium
	min-width: 2em;

	&:last-child {
	margin: 0;
	}
	}

	&.-grid {
	width: 100%;
	height: auto;
	position: relative;
	display: grid;
	grid-gap: 0.5em;
	grid-template-columns: repeat(auto-fill, minmax(15em, 1fr));

	.gallery-item {
	margin: 0;
	height: 200px;
	}
	}
	}

	&.-grid,
	&.-minimal {
	height: auto;

	.gallery-row-inner {
	position: relative;
	}
	}

	&:not(:first-child) {
	margin-top: 0.5em;
	}
	}

	&.-long {
	.gallery-rows {
	max-height: 25em;
	overflow: hidden;
	mask:
	linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
	linear-gradient(to top, white, white);

	/* Autoprefixed seem to ignore this one, and also syntax is different */
	mask-composite: xor;
	mask-composite: exclude;
	}
	}

	.many-attachments-text {
	text-align: center;
	line-height: 2;
	}

	.many-attachments-buttons {
	display: flex;
	}

	.many-attachments-button {
	display: flex;
	flex: 1;
	justify-content: center;
	line-height: 2;

	button {
	padding: 0 2em;
	}
	}
	}
	</style>
	diff --git a/src/components/global_notice_list/global_notice_list.vue b/src/components/global_notice_list/global_notice_list.vue
	index 71e1bf302a..140d0d54a2 100644
	--- a/src/components/global_notice_list/global_notice_list.vue
	+++ b/src/components/global_notice_list/global_notice_list.vue
	@@ -1,59 +1,57 @@
	<template>
	<div class="global-notice-list">
	<div
	v-for="(notice, index) in notices"
	:key="index"
	class="alert global-notice"
	:class="{ [notice.level]: true }"
	>
	<div class="notice-message">
	{{ $t(notice.messageKey, notice.messageArgs) }}
	</div>
	<button
	class="button-unstyled close-notice"
	@click="closeNotice(notice)"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="times"
	/>
	</button>
	</div>
	</div>
	</template>

	<script src="./global_notice_list.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.global-notice-list {
	position: fixed;
	top: calc(var(--navbar-height) + 0.5em);
	width: 100%;
	pointer-events: none;
	z-index: var(--ZI_modals_popovers);
	display: flex;
	flex-direction: column;
	align-items: center;

	.global-notice {
	pointer-events: auto;
	text-align: center;
	width: 40em;
	max-width: calc(100% - 3em);
	display: flex;
	padding-left: 1.5em;
	line-height: 2;
	margin-bottom: 0.5em;

	.notice-message {
	flex: 1 1 100%;
	}
	}

	.close-notice {
	padding-right: 0.2em;
	}
	}
	</style>
	diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
	index 364791a159..f7d5ef7eab 100644
	--- a/src/components/interface_language_switcher/interface_language_switcher.vue
	+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
	@@ -1,114 +1,112 @@
	<template>
	<div class="interface-language-switcher">
	<label>
	{{ promptText }}
	</label>
	<ul class="setting-list">
	<li
	v-for="index of controlledLanguage.keys()"
	:key="index"
	>
	<label>
	{{ index === 0 ? $t('settings.primary_language') : $tc('settings.fallback_language', index, { index }) }}
	<Select
	class="language-select"
	:model-value="controlledLanguage[index]"
	@update:modelValue="val => setLanguageAt(index, val)"
	>
	<option
	v-for="lang in languages"
	:key="lang.code"
	:value="lang.code"
	>
	{{ lang.name }}
	</option>
	</Select>
	</label>
	<button
	v-if="controlledLanguage.length > 1 && index !== 0"
	class="button-default btn"
	@click="() => removeLanguageAt(index)"
	>
	{{ $t('settings.remove_language') }}
	</button>
	</li>
	<li>
	<button
	class="button-default btn"
	@click="addLanguage"
	>
	{{ $t('settings.add_language') }}
	</button>
	</li>
	</ul>
	</div>
	</template>

	<script>
	import localeService from '../../services/locale/locale.service.js'
	import Select from '../select/select.vue'

	export default {
	components: {
	// eslint-disable-next-line vue/no-reserved-component-names
	Select
	},
	props: {
	promptText: {
	type: String,
	required: true
	},
	language: {
	type: [Array, String],
	required: true
	},
	setLanguage: {
	type: Function,
	required: true
	}
	},
	computed: {
	languages () {
	return localeService.languages
	},

	controlledLanguage: {
	get: function () {
	return Array.isArray(this.language) ? this.language : [this.language]
	},
	set: function (val) {
	this.setLanguage(val)
	}
	}
	},

	methods: {
	getLanguageName (code) {
	return localeService.getLanguageName(code)
	},
	addLanguage () {
	this.controlledLanguage = [...this.controlledLanguage, '']
	},
	setLanguageAt (index, val) {
	const lang = [...this.controlledLanguage]
	lang[index] = val
	this.controlledLanguage = lang
	},
	removeLanguageAt (index) {
	const lang = [...this.controlledLanguage]
	lang.splice(index, 1)
	this.controlledLanguage = lang
	}
	}
	}
	</script>

	<style lang="scss">
	-@import "../../variables";
	-
	.interface-language-switcher {
	.language-select {
	margin-right: 1em;
	}
	}
	</style>
	diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue
	index 88b7fb92a9..695f0b1dca 100644
	--- a/src/components/link-preview/link-preview.vue
	+++ b/src/components/link-preview/link-preview.vue
	@@ -1,92 +1,87 @@
	<template>
	<div>
	<a
	class="link-preview-card"
	:href="card.url"
	target="_blank"
	rel="noopener"
	>
	<div
	v-if="useImage && imageLoaded"
	class="card-image"
	>
	<img :src="card.image">
	</div>
	<div class="card-content">
	<span class="card-host faint">
	<span
	v-if="censored"
	class="nsfw-alert alert warning"
	>{{ $t('status.nsfw') }}</span>
	{{ card.provider_name }}
	</span>
	<h4 class="card-title">{{ card.title }}</h4>
	<p
	v-if="useDescription"
	class="card-description"
	>{{ card.description }}</p>
	</div>
	</a>
	</div>
	</template>

	<script src="./link-preview.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.link-preview-card {
	display: flex;
	flex-direction: row;
	cursor: pointer;
	overflow: hidden;
	margin-top: 0.5em;

	.card-image {
	flex-shrink: 0;
	width: 120px;
	max-width: 25%;

	img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: var(--roundness);
	}
	}

	.card-content {
	max-height: 100%;
	margin: 0.5em;
	display: flex;
	flex-direction: column;
	}

	.card-host {
	font-size: 0.85em;
	}

	.card-description {
	margin: 0.5em 0 0;
	overflow: hidden;
	text-overflow: ellipsis;
	word-break: break-word;
	line-height: 1.2em;
	// cap description at 3 lines, the 1px is to clean up some stray pixels
	// TODO: fancier fade-out at the bottom to show off that it's too long?
	max-height: calc(1.2em * 3 - 1px);
	}

	.nsfw-alert {
	margin: 2em 0;
	}

	- color: $fallback--text;
	- color: var(--text, $fallback--text);
	border-style: solid;
	border-width: 1px;
	border-radius: var(--roundness);
	- border-color: $fallback--border;
	- border-color: var(--border, $fallback--border);
	+ border-color: var(--border);
	}
	</style>
	diff --git a/src/components/lists_edit/lists_edit.vue b/src/components/lists_edit/lists_edit.vue
	index 3c44579af3..3c2066f693 100644
	--- a/src/components/lists_edit/lists_edit.vue
	+++ b/src/components/lists_edit/lists_edit.vue
	@@ -1,229 +1,227 @@
	<template>
	<div class="panel-default panel ListEdit">
	<div
	ref="header"
	class="panel-heading list-edit-heading"
	>
	<button
	class="button-unstyled go-back-button"
	@click="$router.back"
	>
	<FAIcon
	size="lg"
	icon="chevron-left"
	/>
	</button>
	<div class="title">
	<i18n-t
	v-if="id"
	keypath="lists.editing_list"
	>
	<template #listTitle>
	{{ title }}
	</template>
	</i18n-t>
	<i18n-t
	v-else
	keypath="lists.creating_list"
	/>
	</div>
	</div>
	<div class="panel-body">
	<div class="input-wrap">
	<label for="list-edit-title">{{ $t('lists.title') }}</label>
	{{ ' ' }}
	<input
	id="list-edit-title"
	ref="title"
	v-model="titleDraft"
	class="input"
	>
	<button
	v-if="id"
	class="btn button-default follow-button"
	@click="updateListTitle"
	>
	{{ $t('lists.update_title') }}
	</button>
	</div>
	<tab-switcher
	class="list-member-management"
	:scrollable-tabs="true"
	>
	<div
	v-if="id \|\| addedUserIds.size > 0"
	:label="$t('lists.manage_members')"
	class="members-list"
	>
	<div class="users-list">
	<div
	v-for="user in membersUsers"
	:key="user.id"
	class="member"
	>
	<BasicUserCard
	:user="user"
	>
	<button
	class="btn button-default follow-button"
	@click="toggleRemoveMember(user)"
	>
	{{ isRemoved(user) ? $t('general.undo') : $t('lists.remove_from_list') }}
	</button>
	</BasicUserCard>
	</div>
	</div>
	</div>

	<div
	class="search-list"
	:label="$t('lists.add_members')"
	>
	<ListsUserSearch
	@results="onSearchResults"
	@loading="onSearchLoading"
	@loadingDone="onSearchLoadingDone"
	/>
	<div
	v-if="searchLoading"
	class="loading"
	>
	<PanelLoading />
	</div>
	<div
	v-else
	class="users-list"
	>
	<div
	v-for="user in searchUsers"
	:key="user.id"
	class="member"
	>
	<BasicUserCard
	:user="user"
	>
	<span
	v-if="membersUserIds.includes(user.id)"
	>
	{{ $t('lists.is_in_list') }}
	</span>
	<button
	v-if="!membersUserIds.includes(user.id)"
	class="btn button-default follow-button"
	@click="toggleAddFromSearch(user)"
	>
	{{ isAdded(user) ? $t('general.undo') : $t('lists.add_to_list') }}
	</button>
	<button
	v-else
	class="btn button-default follow-button"
	@click="toggleRemoveMember(user)"
	>
	{{ isRemoved(user) ? $t('general.undo') : $t('lists.remove_from_list') }}
	</button>
	</BasicUserCard>
	</div>
	</div>
	</div>
	</tab-switcher>
	</div>
	<div class="panel-footer">
	<span class="spacer" />
	<button
	v-if="!id"
	class="btn button-default footer-button"
	@click="createList"
	>
	{{ $t('lists.create') }}
	</button>
	<button
	v-else-if="!reallyDelete"
	class="btn button-default footer-button"
	@click="reallyDelete = true"
	>
	{{ $t('lists.delete') }}
	</button>
	<template v-else>
	{{ $t('lists.really_delete') }}
	<button
	class="btn button-default footer-button"
	@click="deleteList"
	>
	{{ $t('general.yes') }}
	</button>
	<button
	class="btn button-default footer-button"
	@click="reallyDelete = false"
	>
	{{ $t('general.no') }}
	</button>
	</template>
	</div>
	</div>
	</template>

	<script src="./lists_edit.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.ListEdit {
	--panel-body-padding: 0.5em;

	height: calc(100vh - var(--navbar-height));
	overflow: hidden;
	display: flex;
	flex-direction: column;

	.list-edit-heading {
	grid-template-columns: auto minmax(50%, 1fr);
	}

	.panel-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	overflow: hidden;
	}

	.list-member-management {
	flex: 1 0 auto;
	}

	.search-icon {
	margin-right: 0.3em;
	}

	.users-list {
	padding-bottom: 0.7rem;
	overflow-y: auto;
	}

	& .search-list,
	& .members-list {
	overflow: hidden;
	flex-direction: column;
	min-height: 0;
	}

	.go-back-button {
	text-align: center;
	line-height: 1;
	height: 100%;
	align-self: start;
	width: var(--__panel-heading-height-inner);
	}

	.btn {
	margin: 0 0.5em;
	}

	.panel-footer {
	grid-template-columns: minmax(10%, 1fr);

	.footer-button {
	min-width: 9em;
	}
	}
	}
	</style>
	diff --git a/src/components/lists_user_search/lists_user_search.vue b/src/components/lists_user_search/lists_user_search.vue
	index 3302c83a78..0f6ec125c8 100644
	--- a/src/components/lists_user_search/lists_user_search.vue
	+++ b/src/components/lists_user_search/lists_user_search.vue
	@@ -1,48 +1,46 @@
	<template>
	<div class="ListsUserSearch">
	<div class="input-wrap">
	<div class="input-search">
	<FAIcon
	class="search-icon fa-scale-110 fa-old-padding"
	icon="search"
	/>
	</div>
	<input
	ref="search"
	v-model="query"
	class="input"
	:placeholder="$t('lists.search')"
	@input="onInput"
	>
	</div>
	<div class="input-wrap">
	<Checkbox
	v-model="followingOnly"
	@change="onInput"
	>
	{{ $t('lists.following_only') }}
	</Checkbox>
	</div>
	</div>
	</template>

	<script src="./lists_user_search.js"></script>
	<style lang="scss">
	-@import "../../variables";
	-
	.ListsUserSearch {
	.input-wrap {
	display: flex;
	margin: 0.7em 0.5em;

	input {
	width: 100%;
	}
	}

	.search-icon {
	margin-right: 0.3em;
	}
	}

	</style>
	diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue
	index 4d0fc03e18..adc2dd5b42 100644
	--- a/src/components/login_form/login_form.vue
	+++ b/src/components/login_form/login_form.vue
	@@ -1,150 +1,148 @@
	<template>
	<div class="login panel panel-default">
	<!-- Default panel contents -->

	<div class="panel-heading">
	{{ $t('login.login') }}
	</div>

	<div class="panel-body">
	<form
	class="login-form"
	@submit.prevent="submit"
	>
	<template v-if="isPasswordAuth">
	<div class="form-group">
	<label for="username">{{ $t('login.username') }}</label>
	<input
	id="username"
	v-model="user.username"
	:disabled="loggingIn"
	class="input form-control"
	:placeholder="$t('login.placeholder')"
	>
	</div>
	<div class="form-group">
	<label for="password">{{ $t('login.password') }}</label>
	<input
	id="password"
	ref="passwordInput"
	v-model="user.password"
	:disabled="loggingIn"
	class="input form-control"
	type="password"
	>
	</div>
	<div class="form-group">
	<router-link :to="{name: 'password-reset'}">
	{{ $t('password_reset.forgot_password') }}
	</router-link>
	</div>
	</template>

	<div
	v-if="isTokenAuth"
	class="form-group"
	>
	<p>{{ $t('login.description') }}</p>
	</div>

	<div class="form-group">
	<div class="login-bottom">
	<div>
	<router-link
	v-if="registrationOpen"
	:to="{name: 'registration'}"
	class="register"
	>
	{{ $t('login.register') }}
	</router-link>
	</div>
	<button
	:disabled="loggingIn"
	type="submit"
	class="btn button-default"
	>
	{{ $t('login.login') }}
	</button>
	</div>
	</div>
	</form>
	</div>

	<div
	v-if="error"
	class="form-group"
	>
	<div class="alert error">
	{{ error }}
	<button
	class="button-unstyled"
	@click="clearError"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="times"
	/>
	</button>
	</div>
	</div>
	</div>
	</template>

	<script src="./login_form.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.login-form {
	display: flex;
	flex-direction: column;
	padding: 0.6em;

	.btn {
	min-height: 2em;
	width: 10em;
	}

	.register {
	flex: 1 1;
	}

	.login-bottom {
	margin-top: 1em;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	}

	.form-group {
	display: flex;
	flex-direction: column;
	padding: 0.3em 0.5em 0.6em;
	line-height: 24px;
	}

	.form-bottom {
	display: flex;
	padding: 0.5em;
	height: 32px;

	button {
	width: 10em;
	}

	p {
	margin: 0.35em;
	padding: 0.35em;
	display: flex;
	}
	}

	.error {
	text-align: center;
	animation-name: shakeError;
	animation-duration: 0.4s;
	animation-timing-function: ease-in-out;
	}
	}
	</style>
	diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue
	index 2ea5567a25..047e348339 100644
	--- a/src/components/media_upload/media_upload.vue
	+++ b/src/components/media_upload/media_upload.vue
	@@ -1,50 +1,48 @@
	<template>
	<button
	class="media-upload"
	:class="[normalButton ? 'button-default btn' : 'button-unstyled', { disabled }]"
	:title="$t('tool_tip.media_upload')"
	@click="onClick"
	>
	<FAIcon
	v-if="uploading"
	class="progress-icon"
	icon="circle-notch"
	spin
	/>
	<FAIcon
	v-if="!uploading"
	class="new-icon"
	icon="upload"
	/>
	<template v-if="normalButton">
	{{ ' ' }}
	{{ uploading ? $t('general.loading') : $t('tool_tip.media_upload') }}
	</template>
	<input
	v-if="uploadReady"
	ref="input"
	class="hidden-input-file"
	:disabled="disabled"
	type="file"
	multiple="true"
	:accept="acceptTypes"
	@change="change"
	>
	</button>
	</template>

	<script src="./media_upload.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.media-upload {
	.hidden-input-file {
	display: none;
	}
	}

	label.media-upload {
	cursor: pointer; // We use <label> for interactivity... i wonder if it's fine
	}
	</style>
	diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
	index 1b242bdf60..865b874620 100644
	--- a/src/components/mention_link/mention_link.scss
	+++ b/src/components/mention_link/mention_link.scss
	@@ -1,112 +1,110 @@
	-@import "../../variables";
	-
	.MentionLink {
	position: relative;
	white-space: normal;
	display: inline;
	word-break: normal;

	& .new,
	& .original {
	display: inline;
	border-radius: 2px;
	}

	.mention-avatar {
	- border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	+ border-radius: var(--roundness);
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	user-select: none;
	margin-right: 0.2em;
	}

	.full {
	position: absolute;
	display: inline-block;
	pointer-events: none;
	opacity: 0;
	top: 100%;
	left: 0;
	height: 100%;
	word-wrap: normal;
	white-space: nowrap;
	transition: opacity 0.2s ease;
	z-index: 1;
	margin-top: 0.25em;
	padding: 0.5em;
	user-select: all;
	}

	& .short.-with-tooltip,
	& .you {
	user-select: none;
	}

	& .short,
	& .full {
	white-space: nowrap;
	}

	.shortName {
	white-space: normal;
	}

	.new {
	&.-you {
	.shortName {
	font-weight: 600;
	}
	}

	&.-has-selection {
	- color: var(--alertNeutralText, $fallback--text);
	- background-color: var(--alertNeutral, $fallback--fg);
	+ color: var(--selectionText);
	+ background-color: var(--selectionBackground);
	}

	.at {
	color: var(--link);
	opacity: 0.8;
	display: inline-block;
	line-height: 1;
	padding: 0 0.1em;
	vertical-align: -25%;
	margin: 0;
	}

	&.-striped {
	& .shortName {
	background-image:
	repeating-linear-gradient(
	135deg,
	var(--____highlight-tintColor),
	var(--____highlight-tintColor) 5px,
	var(--____highlight-tintColor2) 5px,
	var(--____highlight-tintColor2) 10px
	);
	}
	}

	&.-solid {
	.shortName {
	background-image: linear-gradient(var(--____highlight-tintColor2), var(--____highlight-tintColor2));
	}
	}

	&.-side {
	.shortName {
	box-shadow: 0 -5px 3px -4px inset var(--____highlight-solidColor);
	}
	}
	}

	.serverName.-faded {
	- color: var(--faintLink, $fallback--link);
	+ color: var(--linkFaint);
	}
	}

	.mention-link-popover {
	max-width: 70ch;
	max-height: 20rem;
	overflow: hidden;
	}
	diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue
	index 00f86eed27..6e134ef2b4 100644
	--- a/src/components/mobile_nav/mobile_nav.vue
	+++ b/src/components/mobile_nav/mobile_nav.vue
	@@ -1,262 +1,256 @@
	<template>
	<div
	class="MobileNav"
	>
	<nav
	id="nav"
	class="mobile-nav"
	@click="scrollToTop()"
	>
	<div class="item">
	<button
	class="button-unstyled mobile-nav-button"
	:title="$t('nav.mobile_sidebar')"
	:aria-expanaded="$refs.sideDrawer && !$refs.sideDrawer.closed"
	@click.stop.prevent="toggleMobileSidebar()"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="bars"
	/>
	<div
	v-if="(unreadChatCount && !chatsPinned) \|\| unreadAnnouncementCount"
	class="badge -dot -notification"
	/>
	</button>
	<NavigationPins class="pins" />
	</div> <div class="item right">
	<button
	v-if="currentUser"
	class="button-unstyled mobile-nav-button"
	:title="unseenNotificationsCount ? $t('nav.mobile_notifications_unread_active') : $t('nav.mobile_notifications')"
	@click.stop.prevent="openMobileNotifications()"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="bell"
	/>
	<div
	v-if="unseenNotificationsCount"
	class="badge -dot -notification"
	/>
	</button>
	</div>
	</nav>
	<aside
	v-if="currentUser"
	class="mobile-notifications-drawer mobile-drawer"
	:class="{ '-closed': !notificationsOpen }"
	@touchstart.stop="notificationsTouchStart"
	@touchmove.stop="notificationsTouchMove"
	>
	<div class="panel-heading mobile-notifications-header">
	<span class="title">
	{{ $t('notifications.notifications') }}
	<span
	v-if="unseenCountBadgeText"
	class="badge -notification unseen-count"
	>{{ unseenCountBadgeText }}</span>
	</span>
	<span class="spacer" />
	<button
	v-if="notificationsAtTop"
	class="button-unstyled mobile-nav-button"
	:title="$t('general.scroll_to_top')"
	@click.stop.prevent="scrollMobileNotificationsToTop"
	>
	<FALayers class="fa-scale-110 fa-old-padding-layer">
	<FAIcon icon="arrow-up" />
	<FAIcon
	icon="minus"
	transform="up-7"
	/>
	</FALayers>
	</button>
	<button
	v-if="!closingDrawerMarksAsSeen"
	class="button-unstyled mobile-nav-button"
	:title="$t('nav.mobile_notifications_mark_as_seen')"
	@click.stop.prevent="markNotificationsAsSeen()"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="check-double"
	/>
	</button>
	<button
	class="button-unstyled mobile-nav-button"
	:title="$t('nav.mobile_notifications_close')"
	@click.stop.prevent="closeMobileNotifications(true)"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="times"
	/>
	</button>
	</div>
	<div
	id="mobile-notifications"
	ref="mobileNotifications"
	class="mobile-notifications"
	@scroll="onScroll"
	/>
	</aside>
	<SideDrawer
	ref="sideDrawer"
	:logout="logout"
	/>
	<teleport to="#modal">
	<confirm-modal
	v-if="showingConfirmLogout"
	:title="$t('login.logout_confirm_title')"
	:confirm-text="$t('login.logout_confirm_accept_button')"
	:cancel-text="$t('login.logout_confirm_cancel_button')"
	@accepted="doLogout"
	@cancelled="hideConfirmLogout"
	>
	{{ $t('login.logout_confirm') }}
	</confirm-modal>
	</teleport>
	</div>
	</template>

	<script src="./mobile_nav.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.MobileNav {
	z-index: var(--ZI_navbar);

	.mobile-nav {
	display: grid;
	line-height: var(--navbar-height);
	grid-template-rows: 50px;
	grid-template-columns: 2fr auto;
	width: 100%;
	box-sizing: border-box;

	a {
	color: var(--link);
	}
	}

	.mobile-inner-nav {
	width: 100%;
	display: flex;
	align-items: center;
	}

	.mobile-nav-button {
	display: inline-block;
	text-align: center;
	padding: 0 1em;
	position: relative;
	cursor: pointer;
	}

	.site-name {
	padding: 0 0.3em;
	display: inline-block;
	}

	.item {
	/* moslty just to get rid of extra whitespaces */
	display: flex;
	}

	.mobile-notifications-drawer {
	width: 100%;
	height: 100vh;
	overflow-x: hidden;
	position: fixed;
	top: 0;
	left: 0;
	box-shadow: var(--shadow);
	transition-property: transform;
	transition-duration: 0.25s;
	transform: translateX(0);
	z-index: var(--ZI_navbar);
	-webkit-overflow-scrolling: touch;
	background: var(--background);

	&.-closed {
	transform: translateX(100%);
	box-shadow: none;
	}
	}

	.mobile-notifications-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	z-index: calc(var(--ZI_navbar) + 100);
	width: 100%;
	height: 50px;
	line-height: 50px;
	position: absolute;
	- color: var(--topBarText);
	- background-color: $fallback--fg;
	- background-color: var(--topBar, $fallback--fg);
	- box-shadow: 0 0 4px rgb(0 0 0 / 60%);
	- box-shadow: var(--topBarShadow);
	+ box-shadow: var(--shadow);

	.spacer {
	flex: 1;
	}

	.title {
	font-size: 1.3em;
	margin-left: 0.6em;
	}
	}

	.pins {
	flex: 1;

	.pinned-item {
	flex-grow: 1;
	}
	}

	.mobile-notifications {
	margin-top: 50px;
	width: 100vw;
	height: calc(100vh - var(--navbar-height));
	overflow-x: hidden;
	overflow-y: scroll;

	.notifications {
	padding: 0;
	border-radius: 0;
	box-shadow: none;

	.panel {
	border-radius: 0;
	margin: 0;
	box-shadow: none;
	}

	.panel::after {
	border-radius: 0;
	}

	.panel .panel-heading {
	border-radius: 0;
	box-shadow: none;
	}
	}
	}

	.confirm-modal.dark-overlay {
	&::before {
	z-index: 3000;
	}

	.dialog-modal.panel {
	z-index: 3001;
	}
	}
	}

	</style>
	diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue
	index 41a6f0ba4b..ba77cb2d60 100644
	--- a/src/components/mobile_post_status_button/mobile_post_status_button.vue
	+++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue
	@@ -1,54 +1,51 @@
	<template>
	<button
	v-if="isLoggedIn"
	class="MobilePostButton button-default new-status-button"
	:class="{ 'hidden': isHidden, 'always-show': isPersistent }"
	:title="$t('post_status.new_status')"
	@click="openPostForm"
	>
	<FAIcon icon="pen" />
	</button>
	</template>

	<script src="./mobile_post_status_button.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.MobilePostButton {
	&.button-default {
	width: 5em;
	height: 5em;
	border-radius: 100%;
	position: fixed;
	bottom: 1.5em;
	right: 1.5em;
	// TODO: this needs its own color, it has to stand out enough and link color
	// is not very optimal for this particular use.
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: 0 2px 2px rgb(0 0 0 / 30%), 0 4px 6px rgb(0 0 0 / 30%);
	z-index: 10;
	transition: 0.35s transform;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	}

	&.hidden {
	transform: translateY(150%);
	}

	svg {
	font-size: 1.5em;
	- color: $fallback--text;
	- color: var(--text, $fallback--text);
	+ color: var(--text);
	}
	}

	@media all and (min-width: 801px) {
	.new-status-button:not(.always-show) {
	display: none;
	}
	}

	</style>
	diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue
	index 91d87b697d..df3bb655f7 100644
	--- a/src/components/moderation_tools/moderation_tools.vue
	+++ b/src/components/moderation_tools/moderation_tools.vue
	@@ -1,187 +1,185 @@
	<template>
	<div>
	<Popover
	trigger="click"
	class="moderation-tools-popover"
	placement="bottom"
	:offset="{ y: 5 }"
	@show="setToggled(true)"
	@close="setToggled(false)"
	>
	<template #content>
	<div class="dropdown-menu">
	<span v-if="canGrantRole">
	<button
	class="menu-item dropdown-item menu-item"
	@click="toggleRight("admin")"
	>
	{{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }}
	</button>
	<button
	class="menu-item dropdown-item menu-item"
	@click="toggleRight("moderator")"
	>
	{{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }}
	</button>
	<div
	v-if="canChangeActivationState \|\| canDeleteAccount"
	role="separator"
	class="dropdown-divider"
	/>
	</span>
	<button
	v-if="canChangeActivationState"
	class="menu-item dropdown-item menu-item"
	@click="toggleActivationStatus()"
	>
	{{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }}
	</button>
	<button
	v-if="canDeleteAccount"
	class="menu-item dropdown-item menu-item"
	@click="deleteUserDialog(true)"
	>
	{{ $t('user_card.admin_menu.delete_account') }}
	</button>
	<div
	v-if="canUseTagPolicy"
	role="separator"
	class="dropdown-divider"
	/>
	<span v-if="canUseTagPolicy">
	<button
	class="menu-item dropdown-item menu-item"
	@click="toggleTag(tags.FORCE_NSFW)"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }"
	/>
	{{ $t('user_card.admin_menu.force_nsfw') }}
	</button>
	<button
	class="menu-item dropdown-item menu-item"
	@click="toggleTag(tags.STRIP_MEDIA)"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }"
	/>
	{{ $t('user_card.admin_menu.strip_media') }}
	</button>
	<button
	class="menu-item dropdown-item menu-item"
	@click="toggleTag(tags.FORCE_UNLISTED)"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }"
	/>
	{{ $t('user_card.admin_menu.force_unlisted') }}
	</button>
	<button
	class="menu-item dropdown-item menu-item"
	@click="toggleTag(tags.SANDBOX)"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }"
	/>
	{{ $t('user_card.admin_menu.sandbox') }}
	</button>
	<button
	v-if="user.is_local"
	class="menu-item dropdown-item menu-item"
	@click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }"
	/>
	{{ $t('user_card.admin_menu.disable_remote_subscription') }}
	</button>
	<button
	v-if="user.is_local"
	class="menu-item dropdown-item menu-item"
	@click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }"
	/>
	{{ $t('user_card.admin_menu.disable_any_subscription') }}
	</button>
	<button
	v-if="user.is_local"
	class="menu-item dropdown-item menu-item"
	@click="toggleTag(tags.QUARANTINE)"
	>
	<span
	class="input menu-checkbox"
	:class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }"
	/>
	{{ $t('user_card.admin_menu.quarantine') }}
	</button>
	</span>
	</div>
	</template>
	<template #trigger>
	<button
	class="btn button-default btn-block moderation-tools-button"
	:class="{ toggled }"
	>
	{{ $t('user_card.admin_menu.moderation') }}
	<FAIcon icon="chevron-down" />
	</button>
	</template>
	</Popover>
	<teleport to="#modal">
	<DialogModal
	v-if="showDeleteUserDialog"
	:on-cancel="deleteUserDialog.bind(this, false)"
	>
	<template #header>
	{{ $t('user_card.admin_menu.delete_user') }}
	</template>
	<p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p>
	<template #footer>
	<button
	class="btn button-default"
	@click="deleteUserDialog(false)"
	>
	{{ $t('general.cancel') }}
	</button>
	<button
	class="btn button-default danger"
	@click="deleteUser()"
	>
	{{ $t('user_card.admin_menu.delete_user') }}
	</button>
	</template>
	</DialogModal>
	</teleport>
	</div>
	</template>

	<script src="./moderation_tools.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.moderation-tools-popover {
	height: 100%;

	.trigger {
	/* stylelint-disable-next-line declaration-no-important */
	display: flex !important;
	height: 100%;
	}
	}

	.moderation-tools-button {
	svg,
	i {
	font-size: 0.8em;
	}
	}
	</style>
	diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
	index 97af4787af..6dc86738e8 100644
	--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
	+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.vue
	@@ -1,232 +1,231 @@
	<template>
	<div
	v-if="federationPolicy"
	class="mrf-transparency-panel"
	>
	<div class="panel panel-default base01-background">
	<div class="panel-heading timeline-heading base02-background">
	<div class="title">
	{{ $t("about.mrf.federation") }}
	</div>
	</div>
	<div class="panel-body">
	<div class="mrf-section">
	<h2>{{ $t("about.mrf.mrf_policies") }}</h2>
	<p>{{ $t("about.mrf.mrf_policies_desc") }}</p>

	<ul>
	<li
	v-for="policy in mrfPolicies"
	:key="policy"
	v-text="policy"
	/>
	</ul>

	<h2 v-if="hasInstanceSpecificPolicies">
	{{ $t("about.mrf.simple.simple_policies") }}
	</h2>

	<div v-if="acceptInstances.length">
	<h4>{{ $t("about.mrf.simple.accept") }}</h4>

	<p>{{ $t("about.mrf.simple.accept_desc") }}</p>

	<table>
	<tr>
	<th>{{ $t("about.mrf.simple.instance") }}</th>
	<th>{{ $t("about.mrf.simple.reason") }}</th>
	</tr>
	<tr
	v-for="entry in acceptInstances"
	:key="entry.instance + '_accept'"
	>
	<td>{{ entry.instance }}</td>
	<td v-if="entry.reason === ''">
	{{ $t("about.mrf.simple.not_applicable") }}
	</td>
	<td v-else>
	{{ entry.reason }}
	</td>
	</tr>
	</table>
	</div>

	<div v-if="rejectInstances.length">
	<h4>{{ $t("about.mrf.simple.reject") }}</h4>

	<p>{{ $t("about.mrf.simple.reject_desc") }}</p>

	<table>
	<tr>
	<th>{{ $t("about.mrf.simple.instance") }}</th>
	<th>{{ $t("about.mrf.simple.reason") }}</th>
	</tr>
	<tr
	v-for="entry in rejectInstances"
	:key="entry.instance + '_reject'"
	>
	<td>{{ entry.instance }}</td>
	<td v-if="entry.reason === ''">
	{{ $t("about.mrf.simple.not_applicable") }}
	</td>
	<td v-else>
	{{ entry.reason }}
	</td>
	</tr>
	</table>
	</div>

	<div v-if="quarantineInstances.length">
	<h4>{{ $t("about.mrf.simple.quarantine") }}</h4>

	<p>{{ $t("about.mrf.simple.quarantine_desc") }}</p>

	<table>
	<tr>
	<th>{{ $t("about.mrf.simple.instance") }}</th>
	<th>{{ $t("about.mrf.simple.reason") }}</th>
	</tr>
	<tr
	v-for="entry in quarantineInstances"
	:key="entry.instance + '_quarantine'"
	>
	<td>{{ entry.instance }}</td>
	<td v-if="entry.reason === ''">
	{{ $t("about.mrf.simple.not_applicable") }}
	</td>
	<td v-else>
	{{ entry.reason }}
	</td>
	</tr>
	</table>
	</div>

	<div v-if="ftlRemovalInstances.length">
	<h4>{{ $t("about.mrf.simple.ftl_removal") }}</h4>

	<p>{{ $t("about.mrf.simple.ftl_removal_desc") }}</p>

	<table>
	<tr>
	<th>{{ $t("about.mrf.simple.instance") }}</th>
	<th>{{ $t("about.mrf.simple.reason") }}</th>
	</tr>
	<tr
	v-for="entry in ftlRemovalInstances"
	:key="entry.instance + '_ftl_removal'"
	>
	<td>{{ entry.instance }}</td>
	<td v-if="entry.reason === ''">
	{{ $t("about.mrf.simple.not_applicable") }}
	</td>
	<td v-else>
	{{ entry.reason }}
	</td>
	</tr>
	</table>
	</div>

	<div v-if="mediaNsfwInstances.length">
	<h4>{{ $t("about.mrf.simple.media_nsfw") }}</h4>

	<p>{{ $t("about.mrf.simple.media_nsfw_desc") }}</p>

	<table>
	<tr>
	<th>{{ $t("about.mrf.simple.instance") }}</th>
	<th>{{ $t("about.mrf.simple.reason") }}</th>
	</tr>
	<tr
	v-for="entry in mediaNsfwInstances"
	:key="entry.instance + '_media_nsfw'"
	>
	<td>{{ entry.instance }}</td>
	<td v-if="entry.reason === ''">
	{{ $t("about.mrf.simple.not_applicable") }}
	</td>
	<td v-else>
	{{ entry.reason }}
	</td>
	</tr>
	</table>
	</div>

	<div v-if="mediaRemovalInstances.length">
	<h4>{{ $t("about.mrf.simple.media_removal") }}</h4>

	<p>{{ $t("about.mrf.simple.media_removal_desc") }}</p>

	<table>
	<tr>
	<th>{{ $t("about.mrf.simple.instance") }}</th>
	<th>{{ $t("about.mrf.simple.reason") }}</th>
	</tr>
	<tr
	v-for="entry in mediaRemovalInstances"
	:key="entry.instance + '_media_removal'"
	>
	<td>{{ entry.instance }}</td>
	<td v-if="entry.reason === ''">
	{{ $t("about.mrf.simple.not_applicable") }}
	</td>
	<td v-else>
	{{ entry.reason }}
	</td>
	</tr>
	</table>
	</div>

	<h2 v-if="hasKeywordPolicies">
	{{ $t("about.mrf.keyword.keyword_policies") }}
	</h2>

	<div v-if="keywordsFtlRemoval.length">
	<h4>{{ $t("about.mrf.keyword.ftl_removal") }}</h4>

	<ul>
	<li
	v-for="keyword in keywordsFtlRemoval"
	:key="keyword"
	v-text="keyword"
	/>
	</ul>
	</div>

	<div v-if="keywordsReject.length">
	<h4>{{ $t("about.mrf.keyword.reject") }}</h4>

	<ul>
	<li
	v-for="keyword in keywordsReject"
	:key="keyword"
	v-text="keyword"
	/>
	</ul>
	</div>

	<div v-if="keywordsReplace.length">
	<h4>{{ $t("about.mrf.keyword.replace") }}</h4>

	<ul>
	<li
	v-for="keyword in keywordsReplace"
	:key="keyword"
	>
	{{ keyword.pattern }}
	{{ $t("about.mrf.keyword.is_replaced_by") }}
	{{ keyword.replacement }}
	</li>
	</ul>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script src="./mrf_transparency_panel.js"></script>

	<style lang="scss">
	-@import "../../variables";
	@import "./mrf_transparency_panel";
	</style>
	diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
	index 6380deac47..bf608936f5 100644
	--- a/src/components/nav_panel/nav_panel.vue
	+++ b/src/components/nav_panel/nav_panel.vue
	@@ -1,141 +1,139 @@
	<template>
	<div class="NavPanel">
	<div class="panel panel-default">
	<div
	v-if="!forceExpand"
	class="panel-heading nav-panel-heading"
	>
	<NavigationPins :limit="6" />
	<div class="spacer" />
	<button
	class="button-unstyled"
	@click="toggleCollapse"
	>
	<FAIcon
	class="navigation-chevron"
	fixed-width
	:icon="collapsed ? 'chevron-down' : 'chevron-up'"
	/>
	</button>
	</div>
	<ul
	v-if="!collapsed \|\| forceExpand"
	class="panel-body"
	>
	<NavigationEntry
	v-if="currentUser \|\| !privateMode"
	:show-pin="false"
	:item="{ icon: 'stream', label: 'nav.timelines' }"
	:aria-expanded="showTimelines ? 'true' : 'false'"
	@click="toggleTimelines"
	>
	<FAIcon
	class="timelines-chevron"
	fixed-width
	:icon="showTimelines ? 'chevron-up' : 'chevron-down'"
	/>
	</NavigationEntry>
	<div
	v-show="showTimelines"
	class="timelines-background menu-item-collapsible"
	:class="{ '-expanded': showTimelines }"
	>
	<div class="timelines">
	<NavigationEntry
	v-for="item in timelinesItems"
	:key="item.name"
	:show-pin="editMode \|\| forceEditMode"
	:item="item"
	/>
	</div>
	</div>
	<NavigationEntry
	v-if="currentUser"
	:show-pin="false"
	:item="{ icon: 'list', label: 'nav.lists' }"
	:aria-expanded="showLists ? 'true' : 'false'"
	@click="toggleLists"
	>
	<router-link
	:title="$t('lists.manage_lists')"
	class="button-unstyled extra-button"
	:to="{ name: 'lists' }"
	@click.stop
	>
	<FAIcon
	fixed-width
	icon="wrench"
	/>
	</router-link>
	<FAIcon
	class="timelines-chevron"
	fixed-width
	:icon="showLists ? 'chevron-up' : 'chevron-down'"
	/>
	</NavigationEntry>
	<div
	v-show="showLists"
	class="timelines-background menu-item-collapsible"
	:class="{ '-expanded': showLists }"
	>
	<ListsMenuContent
	:show-pin="editMode \|\| forceEditMode"
	class="timelines"
	/>
	</div>
	<NavigationEntry
	v-for="item in rootItems"
	:key="item.name"
	:show-pin="editMode \|\| forceEditMode"
	:item="item"
	/>
	<NavigationEntry
	v-if="!forceEditMode && currentUser"
	:show-pin="false"
	:item="{ label: editMode ? $t('nav.edit_finish') : $t('nav.edit_pinned'), icon: editMode ? 'check' : 'wrench' }"
	@click="toggleEditMode"
	/>
	</ul>
	</div>
	</div>
	</template>

	<script src="./nav_panel.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.NavPanel {
	.panel {
	overflow: hidden;
	box-shadow: var(--shadow);
	}

	ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}

	.navigation-chevron {
	margin-left: 0.8em;
	margin-right: 0.8em;
	font-size: 1.1em;
	}

	.timelines-chevron {
	margin-left: 0.8em;
	font-size: 1.1em;
	}

	.timelines-background {
	padding: 0 0 0 0.6em;
	}

	.nav-panel-heading {
	// breaks without a unit
	// stylelint-disable-next-line length-zero-no-unit
	--panel-heading-height-padding: 0px;
	}
	}
	</style>
	diff --git a/src/components/navigation/navigation_pins.vue b/src/components/navigation/navigation_pins.vue
	index 44b27c20a1..36eb1ebe22 100644
	--- a/src/components/navigation/navigation_pins.vue
	+++ b/src/components/navigation/navigation_pins.vue
	@@ -1,58 +1,56 @@
	<template>
	<span class="NavigationPins">
	<router-link
	v-for="item in pinnedList"
	:key="item.name"
	class="button-unstyled pinned-item"
	active-class="toggled"
	:to="getRouteTo(item)"
	:title="item.labelRaw \|\| $t(item.label)"
	>
	<FAIcon
	v-if="item.icon"
	fixed-width
	:icon="item.icon"
	/>
	<span
	v-if="item.iconLetter"
	class="iconLetter fa-scale-110 fa-old-padding"
	>{{ item.iconLetter }}</span>
	<div
	v-if="item.badgeGetter && getters[item.badgeGetter]"
	class="badge -dot -notification"
	/>
	</router-link>
	</span>
	</template>

	<script src="./navigation_pins.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.NavigationPins {
	display: flex;
	flex-wrap: wrap;
	overflow: hidden;
	height: 100%;

	.pinned-item {
	position: relative;
	flex: 1 0 3em;
	min-width: 2em;
	text-align: center;
	overflow: visible;
	box-sizing: border-box;
	height: 100%;

	& .svg-inline--fa,
	& .iconLetter {
	margin: 0;
	}

	&.toggled {
	border-bottom: 4px solid;
	}
	}
	}
	</style>
	diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
	index d749890d22..cfc1f3d675 100644
	--- a/src/components/notifications/notifications.scss
	+++ b/src/components/notifications/notifications.scss
	@@ -1,186 +1,184 @@
	-@import "../../variables";
	-
	.Notifications {
	&:not(.minimal) {
	// a bit of a hack to allow scrolling below notifications
	padding-bottom: 15em;
	}

	.loadmore-error {
	color: var(--text);
	}

	.notification {
	position: relative;

	.notification-overlay {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	pointer-events: none;
	}

	&.unseen {
	.notification-overlay {
	background-image: linear-gradient(135deg, var(--badgeNotification) 4px, transparent 10px);
	}
	}
	}
	}

	/* stylelint-disable-next-line no-descending-specificity */
	.notification {
	box-sizing: border-box;

	/* TODO cleanup this */
	.Status {
	flex: 1;
	}

	&:hover .animated.Avatar {
	canvas {
	display: none;
	}

	img {
	visibility: visible;
	}
	}

	&:last-child .Notification {
	border-bottom: none;
	}

	.non-mention {
	display: flex;
	flex: 1;
	flex-wrap: nowrap;
	padding: 0.6em;
	min-width: 0;

	.avatar-container {
	width: 32px;
	height: 32px;
	}
	}

	.follow-request-accept {
	&:hover {
	color: var(--text);
	}
	}

	.follow-request-reject {
	&:hover {
	color: var(--cRed);
	}
	}

	.follow-text,
	.move-text {
	padding: 0.5em 0;
	overflow-wrap: break-word;
	display: flex;
	justify-content: space-between;

	.follow-name {
	display: block;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}

	time {
	white-space: nowrap;
	}

	.notification-right {
	flex: 1;
	padding-left: 0.8em;
	min-width: 0;

	.timeago {
	min-width: 3em;
	text-align: right;
	}

	.timeago-link {
	margin-right: 0.2em;
	}

	.expand-icon {
	.svg-inline--fa {
	margin-left: 0.25em;
	}
	}
	}

	.emoji-reaction-emoji {
	font-size: 1.3em;
	max-width: 1.25em;
	height: 1.25em;
	width: auto;
	}

	.emoji-reaction-emoji-image {
	vertical-align: middle;
	object-fit: contain;
	}

	.notification-details {
	min-width: 0;
	word-wrap: break-word;
	line-height: var(--post-line-height);
	position: relative;
	overflow: hidden;
	width: 100%;
	flex: 1 1 0;
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;

	.name-and-action {
	flex: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.username {
	font-weight: bolder;
	max-width: 100%;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.timeago {
	margin-right: 0.2em;
	}

	.status-content {
	margin: 0;
	max-height: 300px;
	}

	h1 {
	word-break: break-all;
	margin: 0 0 0.3em;
	padding: 0;
	font-size: 1em;
	line-height: 1.5;

	small {
	font-weight: lighter;
	}
	}

	p {
	margin: 0;
	margin-top: 0;
	margin-bottom: 0.3em;
	}
	}
	}
	diff --git a/src/components/panel_loading/panel_loading.vue b/src/components/panel_loading/panel_loading.vue
	index 17458e49a5..7a8321220c 100644
	--- a/src/components/panel_loading/panel_loading.vue
	+++ b/src/components/panel_loading/panel_loading.vue
	@@ -1,44 +1,40 @@
	<template>
	<div class="panel-loading">
	<span class="loading-text">
	<FAIcon
	icon="circle-notch"
	spin
	size="3x"
	/>
	{{ $t('general.loading') }}
	</span>
	</div>
	</template>

	<script>
	import { library } from '@fortawesome/fontawesome-svg-core'
	import { faCircleNotch } from '@fortawesome/free-solid-svg-icons'

	library.add(
	faCircleNotch
	)

	export default {}
	</script>

	<style lang="scss">
	-@import "src/variables";
	-
	.panel-loading {
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	font-size: 2em;
	- color: $fallback--text;
	- color: var(--text, $fallback--text);
	+ color: var(--text);

	.loading-text svg {
	line-height: 0;
	vertical-align: middle;
	- color: $fallback--text;
	- color: var(--text, $fallback--text);
	+ color: var(--text);
	}
	}
	</style>
	diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue
	index 7ac6db748d..037b859e83 100644
	--- a/src/components/password_reset/password_reset.vue
	+++ b/src/components/password_reset/password_reset.vue
	@@ -1,134 +1,127 @@
	<template>
	<div class="settings panel panel-default">
	<div class="panel-heading">
	{{ $t('password_reset.password_reset') }}
	</div>
	<div class="panel-body">
	<form
	class="password-reset-form"
	@submit.prevent="submit"
	>
	<div class="container">
	<div v-if="!mailerEnabled">
	<p v-if="passwordResetRequested">
	{{ $t('password_reset.password_reset_required_but_mailer_is_disabled') }}
	</p>
	<p v-else>
	{{ $t('password_reset.password_reset_disabled') }}
	</p>
	</div>
	<div v-else-if="success \|\| throttled">
	<p v-if="success">
	{{ $t('password_reset.check_email') }}
	</p>
	<div class="form-group text-center">
	<router-link :to="{name: 'root'}">
	{{ $t('password_reset.return_home') }}
	</router-link>
	</div>
	</div>
	<div v-else>
	<p
	v-if="passwordResetRequested"
	- class="password-reset-required error"
	+ class="alert password-reset-required error"
	>
	{{ $t('password_reset.password_reset_required') }}
	</p>
	<p>
	{{ $t('password_reset.instruction') }}
	</p>
	<div class="form-group">
	<input
	ref="email"
	v-model="user.email"
	:disabled="isPending"
	:placeholder="$t('password_reset.placeholder')"
	class="input form-control"
	type="input"
	>
	</div>
	<div class="form-group">
	<button
	:disabled="isPending"
	type="submit"
	class="btn button-default btn-block"
	>
	{{ $t('settings.save') }}
	</button>
	</div>
	</div>
	<p
	v-if="error"
	class="alert error notice-dismissible"
	>
	<span>{{ error }}</span>
	<a
	class="fa-scale-110 fa-old-padding dismiss"
	@click.prevent="dismissError()"
	>
	<FAIcon icon="times" />
	</a>
	</p>
	</div>
	</form>
	</div>
	</div>
	</template>

	<script src="./password_reset.js"></script>
	<style lang="scss">
	-@import "../../variables";
	-
	.password-reset-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0.6em;

	.container {
	display: flex;
	flex: 1 0;
	flex-direction: column;
	margin-top: 0.6em;
	max-width: 18rem;

	> * {
	min-width: 0;
	}
	}

	.form-group {
	display: flex;
	flex-direction: column;
	margin-bottom: 1em;
	padding: 0.3em 0;
	line-height: 1.85em;
	}

	.error {
	text-align: center;
	animation-name: shakeError;
	animation-duration: 0.4s;
	animation-timing-function: ease-in-out;
	}

	.alert {
	padding: 0.5em;
	margin: 0.3em 0 1em;
	}

	- .password-reset-required {
	- background-color: var(--alertError, $fallback--alertError);
	- padding: 10px 0;
	- }
	-
	.notice-dismissible {
	padding-right: 2rem;
	}

	.dismiss {
	cursor: pointer;
	}
	}

	</style>
	diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue
	index 1e97b3cae5..5c743c0822 100644
	--- a/src/components/poll/poll.vue
	+++ b/src/components/poll/poll.vue
	@@ -1,177 +1,174 @@
	<template>
	<div
	class="poll"
	:class="containerClass"
	>
	<div
	:role="showResults ? 'section' : (poll.multiple ? 'group' : 'radiogroup')"
	>
	<div
	v-for="(option, index) in options"
	:key="index"
	class="poll-option"
	>
	<div
	v-if="showResults"
	:title="resultTitle(option)"
	class="option-result"
	>
	<div class="option-result-label">
	<span class="result-percentage">
	{{ percentageForOption(option.votes_count) }}%
	</span>
	<RichContent
	:html="option.title_html"
	:handle-links="false"
	:emoji="emoji"
	/>
	</div>
	<div
	class="result-fill"
	:style="{ 'width': `${percentageForOption(option.votes_count)}%` }"
	/>
	</div>
	<div
	v-else
	tabindex="0"
	:role="poll.multiple ? 'checkbox' : 'radio'"
	:aria-labelledby="`option-vote-${randomSeed}-${index}`"
	:aria-checked="choices[index]"
	@click="activateOption(index)"
	class="input unstyled"
	>
	<!-- TODO: USE CHECKBOX -->
	<input
	v-if="poll.multiple"
	type="checkbox"
	class="input -checkbox poll-checkbox"
	:disabled="loading"
	:value="index"
	>
	<input
	v-else
	type="radio"
	:disabled="loading"
	:value="index"
	class="input -radio"
	>
	<label class="option-vote">
	<RichContent
	:id="`option-vote-${randomSeed}-${index}`"
	:html="option.title_html"
	:handle-links="false"
	:emoji="emoji"
	/>
	</label>
	</div>
	</div>
	</div>
	<div class="footer faint">
	<button
	v-if="!showResults"
	class="btn button-default poll-vote-button"
	type="button"
	:disabled="isDisabled"
	@click="vote"
	>
	{{ $t('polls.vote') }}
	</button>
	<div class="total">
	<template v-if="typeof poll.voters_count === 'number'">
	{{ $tc("polls.people_voted_count", poll.voters_count, { count: poll.voters_count }) }} ·
	</template>
	<template v-else>
	{{ $tc("polls.votes_count", poll.votes_count, { count: poll.votes_count }) }} ·
	</template>
	</div>
	<span>
	<i18n-t
	scope="global"
	:keypath="expired ? 'polls.expired' : 'polls.expires_in'"
	>
	<Timeago
	:time="expiresAt"
	:auto-update="60"
	:now-threshold="0"
	/>
	</i18n-t>
	</span>
	</div>
	</div>
	</template>

	<script src="./poll.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.poll {
	.votes {
	display: flex;
	flex-direction: column;
	margin: 0 0 0.5em;
	}

	.poll-option {
	margin: 0.75em 0.5em;
	}

	.option-result {
	height: 100%;
	display: flex;
	flex-direction: row;
	position: relative;
	- color: $fallback--lightText;
	- color: var(--lightText, $fallback--lightText);
	+ color: var(--textLight);
	}

	.option-result-label {
	display: flex;
	align-items: center;
	padding: 0.1em 0.25em;
	z-index: 1;
	word-break: break-word;
	}

	.result-percentage {
	width: 3.5em;
	flex-shrink: 0;
	}

	.result-fill {
	height: 100%;
	position: absolute;
	border-radius: var(--roundness);
	top: 0;
	left: 0;
	transition: width 0.5s;
	}

	.option-vote {
	display: flex;
	align-items: center;
	}

	input {
	width: 3.5em;
	}

	.footer {
	display: flex;
	align-items: center;
	}

	&.loading * {
	cursor: progress;
	}

	.poll-vote-button {
	padding: 0 0.5em;
	margin-right: 0.5em;
	}

	.poll-checkbox {
	display: none;
	}
	}
	</style>
	diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
	index d79bf9cfa9..4eb9d594bc 100644
	--- a/src/components/poll/poll_form.vue
	+++ b/src/components/poll/poll_form.vue
	@@ -1,159 +1,157 @@
	<template>
	<div
	v-if="visible"
	class="poll-form"
	>
	<div
	v-for="(option, index) in options"
	:key="index"
	class="poll-option"
	>
	<div class="input-container">
	<input
	:id="`poll-${index}`"
	v-model="options[index]"
	size="1"
	class="input poll-option-input"
	type="text"
	:placeholder="$t('polls.option')"
	:maxlength="maxLength"
	@change="updatePollToParent"
	@keydown.enter.stop.prevent="nextOption(index)"
	>
	</div>
	<button
	v-if="options.length > 2"
	class="delete-option button-unstyled -hover-highlight"
	@click="deleteOption(index)"
	>
	<FAIcon icon="times" />
	</button>
	</div>
	<button
	v-if="options.length < maxOptions"
	class="add-option faint button-unstyled -hover-highlight"
	@click="addOption"
	>
	<FAIcon
	icon="plus"
	size="sm"
	/>

	{{ $t("polls.add_option") }}
	</button>
	<div class="poll-type-expiry">
	<div
	class="poll-type"
	:title="$t('polls.type')"
	>
	<Select
	v-model="pollType"
	class="poll-type-select"
	unstyled="true"
	@change="updatePollToParent"
	>
	<option value="single">
	{{ $t('polls.single_choice') }}
	</option>
	<option value="multiple">
	{{ $t('polls.multiple_choices') }}
	</option>
	</Select>
	</div>
	<div
	class="poll-expiry"
	:title="$t('polls.expiry')"
	>
	<input
	v-model="expiryAmount"
	type="number"
	class="input expiry-amount hide-number-spinner"
	:min="minExpirationInCurrentUnit"
	:max="maxExpirationInCurrentUnit"
	@change="expiryAmountChange"
	>
	{{ ' ' }}
	<Select
	v-model="expiryUnit"
	unstyled="true"
	class="expiry-unit"
	@change="expiryAmountChange"
	>
	<option
	v-for="unit in expiryUnits"
	:key="unit"
	:value="unit"
	>
	{{ $tc(`time.unit.${unit}_short`, expiryAmount, ['']) }}
	</option>
	</Select>
	</div>
	</div>
	</div>
	</template>

	<script src="./poll_form.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.poll-form {
	display: flex;
	flex-direction: column;
	padding: 0 0.5em 0.5em;

	.add-option {
	align-self: flex-start;
	padding-top: 0.25em;
	padding-left: 0.1em;
	}

	.poll-option {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	margin-bottom: 0.25em;
	}

	.input-container {
	width: 100%;

	input {
	// Hack: dodge the floating X icon
	padding-right: 2.5em;
	width: 100%;
	}
	}

	.delete-option {
	// Hack: Move the icon over the input box
	width: 1.5em;
	margin-left: -1.5em;
	z-index: 1;
	}

	.poll-type-expiry {
	margin-top: 0.5em;
	display: flex;
	width: 100%;
	}

	.poll-type {
	margin-right: 0.75em;
	flex: 1 1 60%;

	.poll-type-select {
	padding-right: 0.75em;
	}
	}

	.poll-expiry {
	display: flex;

	.expiry-amount {
	width: 3em;
	text-align: right;
	}
	}
	}
	</style>
	diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
	index 1ece3c4251..cf411ff181 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,622 +1,611 @@
	<template>
	<div
	ref="form"
	class="post-status-form"
	>
	<form
	autocomplete="off"
	@submit.prevent
	@dragover.prevent="fileDrag"
	>
	<div class="form-group">
	<i18n-t
	v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
	keypath="post_status.account_not_locked_warning"
	tag="p"
	class="visibility-notice"
	scope="global"
	>
	<button
	class="button-unstyled -link"
	@click="openProfileTab"
	>
	{{ $t('post_status.account_not_locked_warning_link') }}
	</button>
	</i18n-t>
	<p
	v-if="!hideScopeNotice && newStatus.visibility === 'public'"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.public') }}</span>
	<a
	class="fa-scale-110 fa-old-padding dismiss"
	:title="$t('post_status.scope_notice_dismiss')"
	role="button"
	tabindex="0"
	@click.prevent="dismissScopeNotice()"
	>
	<FAIcon icon="times" />
	</a>
	</p>
	<p
	v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.unlisted') }}</span>
	<a
	class="fa-scale-110 fa-old-padding dismiss"
	:title="$t('post_status.scope_notice_dismiss')"
	role="button"
	tabindex="0"
	@click.prevent="dismissScopeNotice()"
	>
	<FAIcon icon="times" />
	</a>
	</p>
	<p
	v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked"
	class="visibility-notice notice-dismissible"
	>
	<span>{{ $t('post_status.scope_notice.private') }}</span>
	<a
	class="fa-scale-110 fa-old-padding dismiss"
	:title="$t('post_status.scope_notice_dismiss')"
	role="button"
	tabindex="0"
	@click.prevent="dismissScopeNotice()"
	>
	<FAIcon icon="times" />
	</a>
	</p>
	<p
	v-else-if="newStatus.visibility === 'direct'"
	class="visibility-notice"
	>
	<span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span>
	<span v-else>{{ $t('post_status.direct_warning_to_all') }}</span>
	</p>
	<div
	v-if="isEdit"
	class="visibility-notice edit-warning"
	>
	<p>{{ $t('post_status.edit_remote_warning') }}</p>
	<p>{{ $t('post_status.edit_unsupported_warning') }}</p>
	</div>
	<div
	v-if="!disablePreview"
	class="preview-heading faint"
	>
	<a
	class="preview-toggle faint"
	@click.stop.prevent="togglePreview"
	>
	{{ $t('post_status.preview') }}
	<FAIcon :icon="showPreview ? 'chevron-left' : 'chevron-right'" />
	</a>
	<div
	v-show="previewLoading"
	class="preview-spinner"
	>
	<FAIcon
	class="fa-old-padding"
	spin
	icon="circle-notch"
	/>
	</div>
	</div>
	<div
	v-if="showPreview"
	class="preview-container"
	>
	<div
	v-if="!preview"
	class="preview-status"
	>
	{{ $t('general.loading') }}
	</div>
	<div
	v-else-if="preview.error"
	class="preview-status preview-error"
	>
	{{ preview.error }}
	</div>
	<StatusContent
	v-else
	:status="preview"
	class="preview-status"
	/>
	</div>
	<div
	v-if="quotable"
	role="radiogroup"
	class="btn-group reply-or-quote-selector"
	>
	<button
	:id="`reply-or-quote-option-${randomSeed}-reply`"
	class="btn button-default reply-or-quote-option"
	:class="{ toggled: !newStatus.quoting }"
	tabindex="0"
	role="radio"
	:aria-labelledby="`reply-or-quote-option-${randomSeed}-reply`"
	:aria-checked="!newStatus.quoting"
	@click="newStatus.quoting = false"
	>
	{{ $t('post_status.reply_option') }}
	</button>
	<button
	:id="`reply-or-quote-option-${randomSeed}-quote`"
	class="btn button-default reply-or-quote-option"
	:class="{ toggled: newStatus.quoting }"
	tabindex="0"
	role="radio"
	:aria-labelledby="`reply-or-quote-option-${randomSeed}-quote`"
	:aria-checked="newStatus.quoting"
	@click="newStatus.quoting = true"
	>
	{{ $t('post_status.quote_option') }}
	</button>
	</div>
	<EmojiInput
	v-if="!disableSubject && (newStatus.spoilerText \|\| alwaysShowSubject)"
	v-model="newStatus.spoilerText"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	class="input form-control"
	>
	<template #default="inputProps">
	<input
	v-model="newStatus.spoilerText"
	type="text"
	:placeholder="$t('post_status.content_warning')"
	:disabled="posting && !optimisticPosting"
	v-bind="propsToNative(inputProps)"
	size="1"
	class="input form-post-subject"
	>
	</template>
	</EmojiInput>
	<EmojiInput
	ref="emoji-input"
	v-model="newStatus.status"
	:suggest="emojiUserSuggestor"
	:placement="emojiPickerPlacement"
	class="input form-control main-input"
	enable-emoji-picker
	hide-emoji-button
	:newline-on-ctrl-enter="submitOnEnter"
	enable-sticker-picker
	@input="onEmojiInputInput"
	@sticker-uploaded="addMediaFile"
	@sticker-upload-failed="uploadFailed"
	@shown="handleEmojiInputShow"
	>
	<template #default="inputProps">
	<textarea
	ref="textarea"
	v-model="newStatus.status"
	:placeholder="placeholder \|\| $t('post_status.default')"
	rows="1"
	cols="1"
	:disabled="posting && !optimisticPosting"
	class="input form-post-body"
	:class="{ 'scrollable-form': !!maxHeight }"
	v-bind="propsToNative(inputProps)"
	@keydown.exact.enter="submitOnEnter && postStatus($event, newStatus)"
	@keydown.meta.enter="postStatus($event, newStatus)"
	@keydown.ctrl.enter="!submitOnEnter && postStatus($event, newStatus)"
	@input="resize"
	@compositionupdate="resize"
	@paste="paste"
	/>
	<p
	v-if="hasStatusLengthLimit"
	class="character-counter faint"
	:class="{ error: isOverLengthLimit }"
	>
	{{ charactersLeft }}
	</p>
	</template>
	</EmojiInput>
	<div
	v-if="!disableScopeSelector"
	class="visibility-tray"
	>
	<scope-selector
	v-if="!disableVisibilitySelector"
	:show-all="showAllScopes"
	:user-default="userDefaultScope"
	:original-scope="copyMessageScope"
	:initial-scope="newStatus.visibility"
	:on-scope-change="changeVis"
	/>

	<div
	v-if="postFormats.length > 1"
	class="text-format"
	>
	<Select
	id="post-content-type"
	v-model="newStatus.contentType"
	class="input form-control"
	:attrs="{ 'aria-label': $t('post_status.content_type_selection') }"
	>
	<option
	v-for="postFormat in postFormats"
	:key="postFormat"
	:value="postFormat"
	>
	{{ $t(`post_status.content_type["${postFormat}"]`) }}
	</option>
	</Select>
	</div>
	<div
	v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'"
	class="text-format"
	>
	<span class="only-format">
	{{ $t(`post_status.content_type["${postFormats[0]}"]`) }}
	</span>
	</div>
	</div>
	</div>
	<poll-form
	v-if="pollsAvailable"
	ref="pollForm"
	:visible="pollFormVisible"
	@update-poll="setPoll"
	/>
	<div
	ref="bottom"
	class="form-bottom"
	>
	<div class="form-bottom-left">
	<media-upload
	ref="mediaUpload"
	class="media-upload-icon"
	:drop-files="dropFiles"
	:disabled="uploadFileLimitReached"
	@uploading="startedUploadingFiles"
	@uploaded="addMediaFile"
	@upload-failed="uploadFailed"
	@all-uploaded="finishedUploadingFiles"
	/>
	<button
	class="emoji-icon button-unstyled"
	:title="$t('emoji.add_emoji')"
	@click="showEmojiPicker"
	>
	<FAIcon icon="smile-beam" />
	</button>
	<button
	v-if="pollsAvailable"
	class="poll-icon button-unstyled"
	:class="{ selected: pollFormVisible }"
	:title="$t('polls.add_poll')"
	@click="togglePollForm"
	>
	<FAIcon icon="poll-h" />
	</button>
	</div>
	<button
	v-if="posting"
	disabled
	class="btn button-default"
	>
	{{ $t('post_status.posting') }}
	</button>
	<button
	v-else-if="isOverLengthLimit"
	disabled
	class="btn button-default"
	>
	{{ $t('post_status.post') }}
	</button>
	<button
	v-else
	:disabled="uploadingFiles \|\| disableSubmit"
	class="btn button-default"
	@click.stop.prevent="postStatus($event, newStatus)"
	>
	{{ $t('post_status.post') }}
	</button>
	</div>
	<div
	v-show="showDropIcon !== 'hide'"
	:style="{ animation: showDropIcon === 'show' ? 'fade-in 0.25s' : 'fade-out 0.5s' }"
	class="drop-indicator"
	@dragleave="fileDragStop"
	@drop.stop="fileDrop"
	>
	<FAIcon :icon="uploadFileLimitReached ? 'ban' : 'upload'" />
	</div>
	<div
	v-if="error"
	class="alert error"
	>
	Error: {{ error }}
	<button
	class="button-unstyled"
	@click="clearError"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="times"
	/>
	</button>
	</div>
	<gallery
	v-if="newStatus.files && newStatus.files.length > 0"
	class="attachments"
	:grid="true"
	:nsfw="false"
	:attachments="newStatus.files"
	:descriptions="newStatus.mediaDescriptions"
	:set-media="() => $store.dispatch('setMedia', newStatus.files)"
	:editable="true"
	:edit-attachment="editAttachment"
	:remove-attachment="removeMediaFile"
	:shift-up-attachment="newStatus.files.length > 1 && shiftUpMediaFile"
	:shift-dn-attachment="newStatus.files.length > 1 && shiftDnMediaFile"
	@play="$emit('mediaplay', attachment.id)"
	@pause="$emit('mediapause', attachment.id)"
	/>
	<div
	v-if="newStatus.files.length > 0 && !disableSensitivityCheckbox"
	class="upload_settings"
	>
	<Checkbox v-model="newStatus.nsfw">
	{{ $t('post_status.attachments_sensitive') }}
	</Checkbox>
	</div>
	</form>
	</div>
	</template>

	<script src="./post_status_form.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.post-status-form {
	position: relative;

	.attachments {
	margin-bottom: 0.5em;
	}

	.form-bottom {
	display: flex;
	justify-content: space-between;
	padding: 0.5em;
	height: 2.5em;

	button {
	width: 10em;
	}

	p {
	margin: 0.35em;
	padding: 0.35em;
	display: flex;
	}
	}

	.form-bottom-left {
	display: flex;
	flex: 1;
	padding-right: 7px;
	margin-right: 7px;
	max-width: 10em;
	}

	.preview-heading {
	display: flex;
	padding-left: 0.5em;
	}

	.preview-toggle {
	flex: 1;
	cursor: pointer;
	user-select: none;

	&:hover {
	text-decoration: underline;
	}

	svg,
	i {
	margin-left: 0.2em;
	font-size: 0.8em;
	transform: rotate(90deg);
	}
	}

	.preview-container {
	margin-bottom: 1em;
	}

	.preview-error {
	font-style: italic;
	- color: $fallback--faint;
	- color: var(--faint, $fallback--faint);
	+ color: var(--textFaint);
	}

	.preview-status {
	- border: 1px solid $fallback--border;
	- border: 1px solid var(--border, $fallback--border);
	- border-radius: $fallback--tooltipRadius;
	- border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	+ border: 1px solid var(--border);
	+ border-radius: var(--roundness);
	padding: 0.5em;
	margin: 0;
	}

	.reply-or-quote-selector {
	margin-bottom: 0.5em;
	}

	.text-format {
	.only-format {
	- color: $fallback--faint;
	- color: var(--faint, $fallback--faint);
	+ color: var(--textFaint);
	}
	}

	.visibility-tray {
	display: flex;
	justify-content: space-between;
	padding-top: 5px;
	align-items: baseline;
	}

	.visibility-notice.edit-warning {
	> :first-child {
	margin-top: 0;
	}

	> :last-child {
	margin-bottom: 0;
	}
	}

	// Order is not necessary but a good indicator
	.media-upload-icon {
	order: 1;
	justify-content: left;
	}

	.emoji-icon {
	order: 2;
	justify-content: center;
	}

	.poll-icon {
	order: 3;
	justify-content: right;
	}

	.media-upload-icon,
	.poll-icon,
	.emoji-icon {
	font-size: 1.85em;
	line-height: 1.1;
	flex: 1;
	padding: 0 0.1em;
	display: flex;
	align-items: center;
	}

	.error {
	text-align: center;
	}

	.media-upload-wrapper {
	margin-right: 0.2em;
	margin-bottom: 0.5em;
	width: 18em;

	img,
	video {
	object-fit: contain;
	max-height: 10em;
	}

	.video {
	max-height: 10em;
	}

	input {
	flex: 1;
	width: 100%;
	}
	}

	.status-input-wrapper {
	display: flex;
	position: relative;
	width: 100%;
	flex-direction: column;
	}

	.btn[disabled] {
	cursor: not-allowed;
	}

	form {
	display: flex;
	flex-direction: column;
	margin: 0.6em;
	position: relative;
	}

	.form-group {
	display: flex;
	flex-direction: column;
	padding: 0.25em 0.5em 0.5em;
	line-height: 1.85;
	}

	.input.form-post-body {
	// TODO: make a resizable textarea component?
	box-sizing: content-box; // needed for easier computation of dynamic size
	overflow: hidden;
	transition: min-height 200ms 100ms;
	// stock padding + 1 line of text (for counter)
	padding-bottom: calc(var(--_padding) + var(--post-line-height) * 1em);
	// two lines of text
	height: calc(var(--post-line-height) * 1em);
	min-height: calc(var(--post-line-height) * 1em);
	resize: none;
	background: transparent;

	&.scrollable-form {
	overflow-y: auto;
	}
	}

	.main-input {
	position: relative;
	}

	.character-counter {
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 0;
	margin: 0 0.5em;

	&.error {
	- color: $fallback--cRed;
	- color: var(--cRed, $fallback--cRed);
	+ color: var(--cRed);
	}
	}

	@keyframes fade-in {
	from { opacity: 0; }
	to { opacity: 0.6; }
	}

	@keyframes fade-out {
	from { opacity: 0.6; }
	to { opacity: 0; }
	}

	.drop-indicator {
	position: absolute;
	width: 100%;
	height: 100%;
	font-size: 5em;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0.6;
	- color: $fallback--text;
	- color: var(--text, $fallback--text);
	- background-color: $fallback--bg;
	- background-color: var(--bg, $fallback--bg);
	- border-radius: $fallback--tooltipRadius;
	- border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	- border: 2px dashed $fallback--text;
	- border: 2px dashed var(--text, $fallback--text);
	+ color: var(--text);
	+ background-color: var(--bg);
	+ border-radius: var(--roundness);
	+ border: 2px dashed var(--text);
	}
	}
	</style>
	diff --git a/src/components/react_button/react_button.vue b/src/components/react_button/react_button.vue
	index 1b0674e6d0..e648e7e3b9 100644
	--- a/src/components/react_button/react_button.vue
	+++ b/src/components/react_button/react_button.vue
	@@ -1,121 +1,115 @@
	<template>
	<span class="ReactButton">
	<EmojiPicker
	ref="picker"
	:enable-sticker-picker="enableStickerPicker"
	:hide-custom-emoji="hideCustomEmoji"
	class="emoji-picker-panel"
	@emoji="addReaction"
	@show="onShow"
	@close="onClose"
	/>
	<span
	class="button-unstyled popover-trigger"
	role="button"
	:tabindex="0"
	:title="$t('tool_tip.add_reaction')"
	@click.stop.prevent="show"
	>
	<FALayers>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	:icon="['far', 'smile-beam']"
	/>
	<FAIcon
	v-show="!expanded"
	class="focus-marker"
	transform="shrink-6 up-9 right-17"
	icon="plus"
	/>
	<FAIcon
	v-show="expanded"
	class="focus-marker"
	transform="shrink-6 up-9 right-17"
	icon="times"
	/>
	</FALayers>
	</span>
	</span>
	</template>

	<script src="./react_button.js"></script>

	<style lang="scss">
	-@import "../../variables";
	@import "../../mixins";

	.ReactButton {
	.reaction-picker-filter {
	padding: 0.5em;
	display: flex;

	input {
	flex: 1;
	}
	}

	.reaction-picker-divider {
	height: 1px;
	width: 100%;
	margin: 0.5em;
	- background-color: var(--border, $fallback--border);
	+ background-color: var(--border);
	}

	.reaction-picker {
	width: 10em;
	height: 9em;
	font-size: 1.5em;
	overflow-y: scroll;
	display: flex;
	flex-wrap: wrap;
	padding: 0.5em;
	text-align: center;
	align-content: flex-start;
	user-select: none;
	mask:
	linear-gradient(to top, white 0, transparent 100%) bottom no-repeat,
	linear-gradient(to bottom, white 0, transparent 100%) top no-repeat,
	linear-gradient(to top, white, white);
	transition: mask-size 150ms;
	mask-size: 100% 20px, 100% 20px, auto;

	/* Autoprefixed seem to ignore this one, and also syntax is different */
	mask-composite: xor;
	mask-composite: exclude;

	.emoji-button {
	cursor: pointer;
	flex-basis: 20%;
	line-height: 1.5;
	align-content: center;

	&:hover {
	transform: scale(1.25);
	}
	}
	}

	.popover-trigger {
	padding: 10px;
	margin: -10px;

	- &:hover .svg-inline--fa {
	- color: $fallback--text;
	- color: var(--text, $fallback--text);
	- }
	-
	@include unfocused-style {
	.focus-marker {
	visibility: hidden;
	}
	}

	@include focused-style {
	.focus-marker {
	visibility: visible;
	}
	}
	}
	}

	</style>
	diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue
	index 046fba1f38..a2008d871f 100644
	--- a/src/components/registration/registration.vue
	+++ b/src/components/registration/registration.vue
	@@ -1,424 +1,420 @@
	<template>
	<div class="settings panel panel-default">
	<div class="panel-heading">
	{{ $t('registration.registration') }}
	</div>
	<div
	v-if="!hasSignUpNotice"
	class="panel-body"
	>
	<form
	class="registration-form"
	@submit.prevent="submit(user)"
	>
	<div class="container">
	<div class="text-fields">
	<div
	class="form-group"
	:class="{ 'form-group--error': v$.user.username.$error }"
	>
	<label
	class="form--label"
	for="sign-up-username"
	>{{ $t('login.username') }}</label>
	<input
	id="sign-up-username"
	v-model.trim="v$.user.username.$model"
	:disabled="isPending"
	class="input form-control"
	:aria-required="true"
	:placeholder="$t('registration.username_placeholder')"
	>
	</div>
	<div
	v-if="v$.user.username.$dirty"
	class="form-error"
	>
	<ul>
	<li v-if="!v$.user.username.required">
	<span>{{ $t('registration.validations.username_required') }}</span>
	</li>
	</ul>
	</div>

	<div
	class="form-group"
	:class="{ 'form-group--error': v$.user.fullname.$error }"
	>
	<label
	class="form--label"
	for="sign-up-fullname"
	>{{ $t('registration.fullname') }}</label>
	<input
	id="sign-up-fullname"
	v-model.trim="v$.user.fullname.$model"
	:disabled="isPending"
	class="input form-control"
	:aria-required="true"
	:placeholder="$t('registration.fullname_placeholder')"
	>
	</div>
	<div
	v-if="v$.user.fullname.$dirty"
	class="form-error"
	>
	<ul>
	<li v-if="!v$.user.fullname.required">
	<span>{{ $t('registration.validations.fullname_required') }}</span>
	</li>
	</ul>
	</div>

	<div
	class="form-group"
	:class="{ 'form-group--error': v$.user.email.$error }"
	>
	<label
	class="form--label"
	for="email"
	>{{ accountActivationRequired ? $t('registration.email') : $t('registration.email_optional') }}</label>
	<input
	id="email"
	v-model="v$.user.email.$model"
	:disabled="isPending"
	class="input form-control"
	type="email"
	:aria-required="accountActivationRequired"
	>
	</div>
	<div
	v-if="v$.user.email.$dirty"
	class="form-error"
	>
	<ul>
	<li v-if="!v$.user.email.required">
	<span>{{ $t('registration.validations.email_required') }}</span>
	</li>
	</ul>
	</div>

	<div class="form-group">
	<label
	class="form--label"
	for="bio"
	>{{ $t('registration.bio_optional') }}</label>
	<textarea
	id="bio"
	v-model="user.bio"
	:disabled="isPending"
	class="input form-control"
	:placeholder="bioPlaceholder"
	/>
	</div>

	<div
	class="form-group"
	:class="{ 'form-group--error': v$.user.password.$error }"
	>
	<label
	class="form--label"
	for="sign-up-password"
	>{{ $t('login.password') }}</label>
	<input
	id="sign-up-password"
	v-model="user.password"
	:disabled="isPending"
	class="input form-control"
	type="password"
	:aria-required="true"
	>
	</div>
	<div
	v-if="v$.user.password.$dirty"
	class="form-error"
	>
	<ul>
	<li v-if="!v$.user.password.required">
	<span>{{ $t('registration.validations.password_required') }}</span>
	</li>
	</ul>
	</div>

	<div
	class="form-group"
	:class="{ 'form-group--error': v$.user.confirm.$error }"
	>
	<label
	class="form--label"
	for="sign-up-password-confirmation"
	>{{ $t('registration.password_confirm') }}</label>
	<input
	id="sign-up-password-confirmation"
	v-model="user.confirm"
	:disabled="isPending"
	class="input form-control"
	type="password"
	:aria-required="true"
	>
	</div>
	<div
	v-if="v$.user.confirm.$dirty"
	class="form-error"
	>
	<ul>
	<li v-if="v$.user.confirm.required.$invalid">
	<span>{{ $t('registration.validations.password_confirmation_required') }}</span>
	</li>
	<li v-if="v$.user.confirm.sameAs.$invalid">
	<span>{{ $t('registration.validations.password_confirmation_match') }}</span>
	</li>
	</ul>
	</div>

	<div
	class="form-group"
	:class="{ 'form-group--error': v$.user.birthday.$error }"
	>
	<label
	class="form--label"
	for="sign-up-birthday"
	>
	{{ birthdayRequired ? $t('registration.birthday') : $t('registration.birthday_optional') }}
	</label>
	<input
	id="sign-up-birthday"
	v-model="user.birthday"
	:disabled="isPending"
	class="input form-control"
	type="date"
	:max="birthdayRequired ? birthdayMinAttr : undefined"
	:aria-required="birthdayRequired"
	>
	</div>
	<div
	v-if="v$.user.birthday.$dirty"
	class="form-error"
	>
	<ul>
	<li v-if="v$.user.birthday.required.$invalid">
	<span>{{ $t('registration.validations.birthday_required') }}</span>
	</li>
	<li v-if="v$.user.birthday.maxValue.$invalid">
	<span>{{ $tc('registration.validations.birthday_min_age', { date: birthdayMinFormatted }) }}</span>
	</li>
	</ul>
	</div>

	<div
	class="form-group"
	:class="{ 'form-group--error': v$.user.language.$error }"
	>
	<interface-language-switcher
	for="email-language"
	:prompt-text="$t('registration.email_language')"
	:language="v$.user.language.$model"
	:set-language="val => v$.user.language.$model = val"
	@click.stop.prevent
	/>
	</div>

	<div
	v-if="accountApprovalRequired"
	class="form-group"
	>
	<label
	class="form--label"
	for="reason"
	>{{ $t('registration.reason') }}</label>
	<textarea
	id="reason"
	v-model="user.reason"
	:disabled="isPending"
	class="input form-control"
	:placeholder="reasonPlaceholder"
	/>
	</div>

	<div
	v-if="captcha.type != 'none'"
	id="captcha-group"
	class="form-group"
	>
	<label
	class="form--label"
	for="captcha-label"
	>{{ $t('registration.captcha') }}</label>

	<template v-if="['kocaptcha', 'native'].includes(captcha.type)">
	<img
	:src="captcha.url"
	@click="setCaptcha"
	>

	<sub>{{ $t('registration.new_captcha') }}</sub>

	<input
	id="captcha-answer"
	v-model="captcha.solution"
	:disabled="isPending"
	class="input form-control"
	type="text"
	autocomplete="off"
	autocorrect="off"
	autocapitalize="off"
	spellcheck="false"
	>
	</template>
	</div>

	<div
	v-if="token"
	class="form-group"
	>
	<label for="token">{{ $t('registration.token') }}</label>
	<input
	id="token"
	v-model="token"
	disabled="true"
	class="input form-control"
	type="text"
	>
	</div>
	<div class="form-group">
	<button
	:disabled="isPending"
	type="submit"
	class="btn button-default"
	>
	{{ $t('registration.register') }}
	</button>
	</div>
	</div>

	<!-- eslint-disable vue/no-v-html -->
	<div
	class="terms-of-service"
	v-html="termsOfService"
	/>
	<!-- eslint-enable vue/no-v-html -->
	</div>
	<div
	v-if="serverValidationErrors.length"
	class="form-group"
	>
	<div class="alert error">
	<span
	v-for="error in serverValidationErrors"
	:key="error"
	>{{ error }}</span>
	</div>
	</div>
	</form>
	</div>
	<div v-else>
	<p class="registration-notice">
	{{ signUpNotice.message }}
	</p>
	</div>
	</div>
	</template>

	<script src="./registration.js"></script>
	<style lang="scss">
	-@import "../../variables";
	-$validations-cRed: #f04124;
	-
	.registration-form {
	display: flex;
	flex-direction: column;
	margin: 0.6em;

	.container {
	display: flex;
	flex-direction: row;

	> * {
	min-width: 0;
	}
	}

	.terms-of-service {
	flex: 0 1 50%;
	margin: 0.8em;
	}

	.text-fields {
	margin-top: 0.6em;
	flex: 1 0;
	display: flex;
	flex-direction: column;
	}

	textarea {
	min-height: 100px;
	resize: vertical;
	}

	.form-group {
	display: flex;
	flex-direction: column;
	padding: 0.3em 0;
	line-height: 2;
	margin-bottom: 1em;
	}

	.form-group--error {
	animation-name: shakeError;
	animation-duration: 0.6s;
	animation-timing-function: ease-in-out;
	}

	.form-group--error .form--label {
	- color: $validations-cRed;
	- color: var(--cRed, $validations-cRed);
	+ color: var(--cRed);
	}

	.form-error {
	margin-top: -0.7em;
	text-align: left;

	span {
	font-size: 0.85em;
	}
	}

	.form-error ul {
	list-style: none;
	padding: 0 0 0 5px;
	margin-top: 0;

	li::before {
	content: "• ";
	}
	}

	form textarea {
	line-height: 16px;
	resize: vertical;
	}

	.captcha {
	max-width: 350px;
	margin-bottom: 0.4em;
	}

	.btn {
	margin-top: 0.6em;
	height: 2em;
	}

	.error {
	text-align: center;
	}
	}

	.registration-notice {
	margin: 0.6em;
	}

	@media all and (max-width: 800px) {
	.registration-form .container {
	flex-direction: column-reverse;
	}
	}
	</style>
	diff --git a/src/components/reply_button/reply_button.vue b/src/components/reply_button/reply_button.vue
	index 60a40a0863..87c06e3917 100644
	--- a/src/components/reply_button/reply_button.vue
	+++ b/src/components/reply_button/reply_button.vue
	@@ -1,98 +1,96 @@
	<template>
	<div class="ReplyButton">
	<button
	v-if="loggedIn"
	class="button-unstyled interactive"
	:class="{'-active': replying}"
	:title="$t('tool_tip.reply')"
	@click.prevent="$emit('toggle')"
	>
	<FALayers class="fa-old-padding-layer">
	<FAIcon
	class="fa-scale-110"
	icon="reply"
	/>
	<FAIcon
	v-if="!replying"
	class="focus-marker"
	transform="shrink-6 up-8 right-11"
	icon="plus"
	/>
	<FAIcon
	v-else
	class="focus-marker"
	transform="shrink-6 up-8 right-11"
	icon="times"
	/>
	</FALayers>
	</button>
	<a
	v-else
	class="button-unstyled interactive"
	target="_blank"
	role="button"
	:href="remoteInteractionLink"
	:title="$t('tool_tip.reply')"
	>
	<FALayers class="fa-old-padding-layer">
	<FAIcon
	class="fa-scale-110"
	icon="reply"
	/>
	<FAIcon
	v-if="!replying"
	class="focus-marker"
	transform="shrink-6 up-8 right-16"
	icon="plus"
	/>
	</FALayers>
	</a>
	<span
	v-if="status.replies_count > 0"
	class="action-counter"
	>
	{{ status.replies_count }}
	</span>
	</div>
	</template>

	<script src="./reply_button.js"></script>

	<style lang="scss">
	-@import "../../variables";
	@import "../../mixins";

	.ReplyButton {
	display: flex;

	> :first-child {
	padding: 10px;
	margin: -10px -8px -10px -10px;
	}

	.action-counter {
	pointer-events: none;
	user-select: none;
	}

	.interactive {
	&:hover .svg-inline--fa,
	&.-active .svg-inline--fa {
	- color: $fallback--cBlue;
	- color: var(--cBlue, $fallback--cBlue);
	+ color: var(--cBlue);
	}

	@include unfocused-style {
	.focus-marker {
	visibility: hidden;
	}
	}

	@include focused-style {
	.focus-marker {
	visibility: visible;
	}
	}
	}
	}
	</style>
	diff --git a/src/components/report/report.scss b/src/components/report/report.scss
	index 1fe11fd907..4249b85056 100644
	--- a/src/components/report/report.scss
	+++ b/src/components/report/report.scss
	@@ -1,39 +1,37 @@
	-@import "../../variables";
	-
	.Report {
	.report-content {
	margin: 0.5em 0 1em;
	}

	.report-state {
	margin: 0.5em 0 1em;
	}

	.reported-status {
	border: 1px solid var(--border);
	border-radius: var(--roundness);
	display: block;
	padding: 0.5em;
	margin: 0.5em 0;

	.status-content {
	pointer-events: none;
	}

	.reported-status-heading {
	display: flex;
	width: 100%;
	justify-content: space-between;
	margin-bottom: 0.2em;
	}

	.reported-status-name {
	font-weight: bold;
	}
	}

	.note {
	width: 100%;
	margin-bottom: 0.5em;
	}
	}
	diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue
	index e1b6b153ec..adda9a429d 100644
	--- a/src/components/retweet_button/retweet_button.vue
	+++ b/src/components/retweet_button/retweet_button.vue
	@@ -1,135 +1,133 @@
	<template>
	<div class="RetweetButton">
	<button
	v-if="visibility !== 'private' && visibility !== 'direct' && loggedIn"
	class="button-unstyled interactive"
	:class="status.repeated && '-repeated'"
	:title="$t('tool_tip.repeat')"
	@click.prevent="retweet()"
	>
	<FALayers class="fa-old-padding-layer">
	<FAIcon
	class="fa-scale-110"
	icon="retweet"
	:spin="animated"
	/>
	<FAIcon
	v-if="status.repeated"
	class="active-marker"
	transform="shrink-6 up-9 right-12"
	icon="check"
	/>
	<FAIcon
	v-if="!status.repeated"
	class="focus-marker"
	transform="shrink-6 up-9 right-12"
	icon="plus"
	/>
	<FAIcon
	v-else
	class="focus-marker"
	transform="shrink-6 up-9 right-12"
	icon="minus"
	/>
	</FALayers>
	</button>
	<span v-else-if="loggedIn">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="lock"
	:title="$t('timeline.no_retweet_hint')"
	/>
	</span>
	<a
	v-else
	class="button-unstyled interactive"
	target="_blank"
	role="button"
	:title="$t('tool_tip.repeat')"
	:href="remoteInteractionLink"
	>
	<FALayers class="fa-old-padding-layer">
	<FAIcon
	class="fa-scale-110"
	icon="retweet"
	/>
	<FAIcon
	class="focus-marker"
	transform="shrink-6 up-9 right-12"
	icon="plus"
	/>
	</FALayers>
	</a>
	<span
	v-if="!mergedConfig.hidePostStats && status.repeat_num > 0"
	class="no-event"
	>
	{{ status.repeat_num }}
	</span>
	<teleport to="#modal">
	<confirm-modal
	v-if="showingConfirmDialog"
	:title="$t('status.repeat_confirm_title')"
	:confirm-text="$t('status.repeat_confirm_accept_button')"
	:cancel-text="$t('status.repeat_confirm_cancel_button')"
	@accepted="doRetweet"
	@cancelled="hideConfirmDialog"
	>
	{{ $t('status.repeat_confirm') }}
	</confirm-modal>
	</teleport>
	</div>
	</template>

	<script src="./retweet_button.js"></script>

	<style lang="scss">
	-@import "../../variables";
	@import "../../mixins";

	.RetweetButton {
	display: flex;

	> :first-child {
	padding: 10px;
	margin: -10px -8px -10px -10px;
	}

	.action-counter {
	pointer-events: none;
	user-select: none;
	}

	.interactive {
	.svg-inline--fa {
	animation-duration: 0.6s;
	}

	&:hover .svg-inline--fa,
	&.-repeated .svg-inline--fa {
	- color: $fallback--cGreen;
	- color: var(--cGreen, $fallback--cGreen);
	+ color: var(--cGreen);
	}

	@include unfocused-style {
	.focus-marker {
	visibility: hidden;
	}

	.active-marker {
	visibility: visible;
	}
	}

	@include focused-style {
	.focus-marker {
	visibility: visible;
	}

	.active-marker {
	visibility: hidden;
	}
	}
	}
	}
	</style>
	diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue
	index 1cb6cdf2c6..b90ae0205c 100644
	--- a/src/components/scope_selector/scope_selector.vue
	+++ b/src/components/scope_selector/scope_selector.vue
	@@ -1,78 +1,76 @@
	<template>
	<div
	v-if="!showNothing"
	class="ScopeSelector"
	>
	<button
	v-if="showDirect"
	class="button-unstyled scope"
	:class="css.direct"
	:title="$t('post_status.scope.direct')"
	type="button"
	@click="changeVis('direct')"
	>
	<FAIcon
	icon="envelope"
	class="fa-scale-110 fa-old-padding"
	/>
	</button>
	{{ ' ' }}
	<button
	v-if="showPrivate"
	class="button-unstyled scope"
	:class="css.private"
	:title="$t('post_status.scope.private')"
	type="button"
	@click="changeVis('private')"
	>
	<FAIcon
	icon="lock"
	class="fa-scale-110 fa-old-padding"
	/>
	</button>
	{{ ' ' }}
	<button
	v-if="showUnlisted"
	class="button-unstyled scope"
	:class="css.unlisted"
	:title="$t('post_status.scope.unlisted')"
	type="button"
	@click="changeVis('unlisted')"
	>
	<FAIcon
	icon="lock-open"
	class="fa-scale-110 fa-old-padding"
	/>
	</button>
	{{ ' ' }}
	<button
	v-if="showPublic"
	class="button-unstyled scope"
	:class="css.public"
	:title="$t('post_status.scope.public')"
	type="button"
	@click="changeVis('public')"
	>
	<FAIcon
	icon="globe"
	class="fa-scale-110 fa-old-padding"
	/>
	</button>
	</div>
	</template>

	<script src="./scope_selector.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.ScopeSelector {
	.scope {
	display: inline-block;
	cursor: pointer;
	min-width: 1.3em;
	min-height: 1.3em;
	text-align: center;
	}
	}
	</style>
	diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue
	index 1845dbe494..d06b4e77d5 100644
	--- a/src/components/search_bar/search_bar.vue
	+++ b/src/components/search_bar/search_bar.vue
	@@ -1,94 +1,91 @@
	<template>
	<div
	class="SearchBar"
	:class="{ '-expanded': !hidden }"
	>
	<button
	v-if="hidden"
	class="button-unstyled nav-icon"
	:title="$t('nav.search')"
	type="button"
	:aria-expanded="!hidden"
	@click.prevent.stop="toggleHidden"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="search"
	/>
	</button>
	<template v-else>
	<input
	id="search-bar-input"
	ref="searchInput"
	v-model="searchTerm"
	class="input search-bar-input"
	:placeholder="$t('nav.search')"
	type="text"
	@keyup.enter="find(searchTerm)"
	>
	<button
	class="button-default search-button"
	type="submit"
	:title="$t('nav.search')"
	@click="find(searchTerm)"
	>
	<FAIcon
	fixed-width
	icon="search"
	/>
	</button>
	<button
	class="button-unstyled cancel-search"
	type="button"
	:title="$t('nav.search_close')"
	:aria-expanded="!hidden"
	@click.prevent.stop="toggleHidden"
	>
	<FAIcon
	fixed-width
	icon="times"
	class="cancel-icon fa-scale-110 fa-old-padding"
	/>
	</button>
	<span class="spacer" />
	<span class="spacer" />
	</template>
	</div>
	</template>

	<script src="./search_bar.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.SearchBar {
	display: inline-flex;
	align-items: baseline;
	vertical-align: baseline;
	justify-content: flex-end;

	&.-expanded {
	width: 100%;
	}

	.search-bar-input,
	.search-button {
	height: 29px;
	}

	.search-bar-input {
	flex: 1 0 auto;
	}

	.cancel-search {
	height: 50px;
	}

	.cancel-icon {
	- color: $fallback--text;
	- color: var(--btnTopBarText, $fallback--text);
	+ color: var(--text);
	}
	}

	</style>
	diff --git a/src/components/select/select.vue b/src/components/select/select.vue
	index 30fd0bb0cb..3283212659 100644
	--- a/src/components/select/select.vue
	+++ b/src/components/select/select.vue
	@@ -1,60 +1,57 @@
	<template>
	<label
	class="Select input"
	:class="{ disabled, unstyled }"
	>
	<select
	:disabled="disabled"
	:value="modelValue"
	v-bind="attrs"
	@change="$emit('update:modelValue', $event.target.value)"
	>
	<slot />
	</select>
	{{ ' ' }}
	<FAIcon
	class="select-down-icon"
	icon="chevron-down"
	/>
	</label>
	</template>

	<script src="./select.js"> </script>

	<style lang="scss">
	-@import "../../variables";
	-
	/* TODO fix order of styles */
	label.Select {
	padding: 0;

	select {
	appearance: none;
	background: transparent;
	border: none;
	color: var(--text);
	margin: 0;
	padding: 0 2em 0 0.2em;
	font-family: var(--font);
	font-size: 1em;
	width: 100%;
	z-index: 1;
	height: 2em;
	line-height: 16px;
	}

	.select-down-icon {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 5px;
	height: 100%;
	width: 0.875em;
	- color: $fallback--text;
	font-family: var(--font);
	line-height: 2;
	z-index: 0;
	pointer-events: none;
	}
	}
	</style>
	diff --git a/src/components/settings_modal/settings_modal.scss b/src/components/settings_modal/settings_modal.scss
	index 6bc9459b7d..d01553db66 100644
	--- a/src/components/settings_modal/settings_modal.scss
	+++ b/src/components/settings_modal/settings_modal.scss
	@@ -1,102 +1,100 @@
	-@import "src/variables";
	-
	.settings-modal {
	overflow: hidden;

	h4 {
	margin-bottom: 0.5em;
	}

	.setting-list,
	.option-list {
	list-style-type: none;
	padding-left: 2em;

	li {
	margin-bottom: 0.5em;
	}

	.suboptions {
	margin-top: 0.3em;
	}

	&.two-column {
	column-count: 2;

	> li {
	break-inside: avoid;
	}
	}
	}

	.setting-description {
	margin-top: 0.2em;
	margin-bottom: 2em;
	font-size: 70%;
	}

	.settings-modal-panel {
	overflow: hidden;
	transition: transform;
	transition-timing-function: ease-in-out;
	transition-duration: 300ms;
	width: 1000px;
	max-width: 90vw;
	height: 90vh;

	@media all and (max-width: 800px) {
	max-width: 100vw;
	height: 100%;
	}

	>.panel-body {
	height: 100%;
	overflow-y: hidden;

	.btn {
	min-height: 2em;
	}

	.btn:not(.dropdown-button) {
	padding: 0 2em;
	}
	}
	}

	.settings-footer {
	display: flex;
	flex-wrap: wrap;
	line-height: 2;

	>* {
	margin-right: 0.5em;
	}

	.extra-content {
	display: flex;
	flex-grow: 1;
	}
	}

	&.peek {
	.settings-modal-panel {
	/* Explanation:
	* Modal is positioned vertically centered.
	* 100vh - 100% = Distance between modal's top+bottom boundaries and screen
	* (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
	* + 100% - we move modal completely off-screen, it's top boundary touches
	* bottom of the screen
	* - 50px - leaving tiny amount of space so that titlebar + tiny amount of modal is visible
	*/
	transform: translateY(calc(((100vh - 100%) / 2 + 100%) - 50px));

	@media all and (max-width: 800px) {
	/* For mobile, the modal takes 100% of the available screen.
	This ensures the minimized modal is always 50px above the browser bottom
	bar regardless of whether or not it is visible.
	*/
	transform: translateY(calc(100% - 50px));
	}
	}
	}
	}
	diff --git a/src/components/settings_modal/settings_modal_admin_content.scss b/src/components/settings_modal/settings_modal_admin_content.scss
	index c984d703ab..bd619d7fad 100644
	--- a/src/components/settings_modal/settings_modal_admin_content.scss
	+++ b/src/components/settings_modal/settings_modal_admin_content.scss
	@@ -1,52 +1,49 @@
	-@import "src/variables";
	-
	.settings_tab-switcher {
	height: 100%;

	.setting-item {
	- border-bottom: 2px solid var(--fg, $fallback--fg);
	+ border-bottom: 2px solid var(--border);
	margin: 1em 1em 1.4em;
	padding-bottom: 1.4em;

	> div,
	> label {
	display: block;
	margin-bottom: 0.5em;

	&:last-child {
	margin-bottom: 0;
	}
	}

	.select-multiple {
	display: flex;

	.option-list {
	margin: 0;
	padding-left: 0.5em;
	}
	}

	&:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 1em;
	}

	select {
	min-width: 10em;
	}

	textarea {
	width: 100%;
	max-width: 100%;
	height: 100px;
	}

	.unavailable,
	.unavailable svg {
	- color: var(--cRed, $fallback--cRed);
	- color: $fallback--cRed;
	+ color: var(--cRed);
	}
	}
	}
	diff --git a/src/components/settings_modal/settings_modal_user_content.scss b/src/components/settings_modal/settings_modal_user_content.scss
	index c984d703ab..bd619d7fad 100644
	--- a/src/components/settings_modal/settings_modal_user_content.scss
	+++ b/src/components/settings_modal/settings_modal_user_content.scss
	@@ -1,52 +1,49 @@
	-@import "src/variables";
	-
	.settings_tab-switcher {
	height: 100%;

	.setting-item {
	- border-bottom: 2px solid var(--fg, $fallback--fg);
	+ border-bottom: 2px solid var(--border);
	margin: 1em 1em 1.4em;
	padding-bottom: 1.4em;

	> div,
	> label {
	display: block;
	margin-bottom: 0.5em;

	&:last-child {
	margin-bottom: 0;
	}
	}

	.select-multiple {
	display: flex;

	.option-list {
	margin: 0;
	padding-left: 0.5em;
	}
	}

	&:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 1em;
	}

	select {
	min-width: 10em;
	}

	textarea {
	width: 100%;
	max-width: 100%;
	height: 100px;
	}

	.unavailable,
	.unavailable svg {
	- color: var(--cRed, $fallback--cRed);
	- color: $fallback--cRed;
	+ color: var(--cRed);
	}
	}
	}
	diff --git a/src/components/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
	index 52ae6c8baf..7eda943b7a 100644
	--- a/src/components/settings_modal/tabs/profile_tab.scss
	+++ b/src/components/settings_modal/tabs/profile_tab.scss
	@@ -1,135 +1,133 @@
	-@import "../../../variables";
	-
	.profile-tab {
	.bio {
	margin: 0;
	}

	.visibility-tray {
	padding-top: 5px;
	}

	input[type="file"] {
	padding: 5px;
	height: auto;
	}

	.banner-background-preview {
	max-width: 100%;
	width: 300px;
	position: relative;

	img {
	width: 100%;
	}
	}

	.uploading {
	font-size: 1.5em;
	margin: 0.25em;
	}

	.name-changer {
	width: 100%;
	}

	.current-avatar-container {
	position: relative;
	width: 150px;
	height: 150px;
	}

	.current-avatar {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: var(--roundness);
	}

	.reset-button {
	position: absolute;
	top: 0.2em;
	right: 0.2em;
	border-radius: var(--roundness);
	background-color: rgb(0 0 0 / 60%);
	opacity: 0.7;
	width: 1.5em;
	height: 1.5em;
	text-align: center;
	line-height: 1.5em;
	font-size: 1.5em;
	cursor: pointer;

	&:hover {
	opacity: 1;
	}

	svg {
	color: white;
	}
	}

	.oauth-tokens {
	width: 100%;

	th {
	text-align: left;
	}

	.actions {
	text-align: right;
	}
	}

	&-usersearch-wrapper {
	padding: 1em;
	}

	&-bulk-actions {
	text-align: right;
	padding: 0 1em;
	min-height: 2em;

	button {
	width: 10em;
	}
	}

	&-domain-mute-form {
	padding: 1em;
	display: flex;
	flex-direction: column;

	button {
	align-self: flex-end;
	margin-top: 1em;
	width: 10em;
	}
	}

	.setting-subitem {
	margin-left: 1.75em;
	}

	.profile-fields {
	display: flex;

	& > .emoji-input {
	flex: 1 1 auto;
	margin: 0 0.2em 0.5em;
	min-width: 0;
	}

	.delete-field {
	width: 20px;
	align-self: center;
	margin: 0 0.2em 0.5em;
	padding: 0 0.5em;
	}
	}

	.birthday-input {
	display: block;
	margin-bottom: 1em;
	}
	}
	diff --git a/src/components/settings_modal/tabs/security_tab/mfa.vue b/src/components/settings_modal/tabs/security_tab/mfa.vue
	index 8c65cfa8b9..9421b16ee9 100644
	--- a/src/components/settings_modal/tabs/security_tab/mfa.vue
	+++ b/src/components/settings_modal/tabs/security_tab/mfa.vue
	@@ -1,178 +1,175 @@
	<template>
	<div
	v-if="readyInit && settings.available"
	class="setting-item mfa-settings"
	>
	<div class="mfa-heading">
	<h2>{{ $t('settings.mfa.title') }}</h2>
	</div>

	<div>
	<div
	v-if="!setupInProgress"
	class="setting-item"
	>
	<!-- Enabled methods -->
	<h3>{{ $t('settings.mfa.authentication_methods') }}</h3>
	<totp-item
	:settings="settings"
	@deactivate="fetchSettings"
	@activate="activateOTP"
	/>
	<br>

	<div v-if="settings.enabled">
	<!-- backup codes block-->
	<recovery-codes
	v-if="!confirmNewBackupCodes"
	:backup-codes="backupCodes"
	/>
	<button
	v-if="!confirmNewBackupCodes"
	class="btn button-default"
	@click="getBackupCodes"
	>
	{{ $t('settings.mfa.generate_new_recovery_codes') }}
	</button>

	<div v-if="confirmNewBackupCodes">
	<confirm
	:disabled="backupCodes.inProgress"
	@confirm="confirmBackupCodes"
	@cancel="cancelBackupCodes"
	>
	<p class="warning">
	{{ $t('settings.mfa.warning_of_generate_new_codes') }}
	</p>
	</confirm>
	</div>
	</div>
	</div>

	<div v-if="setupInProgress">
	<!-- setup block-->

	<h3>{{ $t('settings.mfa.setup_otp') }}</h3>

	<recovery-codes
	v-if="!setupOTPInProgress"
	:backup-codes="backupCodes"
	/>

	<button
	v-if="canSetupOTP"
	class="btn button-default"
	@click="cancelSetup"
	>
	{{ $t('general.cancel') }}
	</button>

	<button
	v-if="canSetupOTP"
	class="btn button-default"
	@click="setupOTP"
	>
	{{ $t('settings.mfa.setup_otp') }}
	</button>

	<template v-if="setupOTPInProgress">
	<i v-if="prepareOTP">{{ $t('settings.mfa.wait_pre_setup_otp') }}</i>

	<div v-if="confirmOTP">
	<div class="setup-otp">
	<div class="qr-code">
	<h4>{{ $t('settings.mfa.scan.title') }}</h4>
	<p>{{ $t('settings.mfa.scan.desc') }}</p>
	<qrcode
	:value="otpSettings.provisioning_uri"
	:options="{ width: 200 }"
	/>
	<p>
	{{ $t('settings.mfa.scan.secret_code') }}:
	{{ otpSettings.key }}
	</p>
	</div>

	<div class="verify">
	<h4>{{ $t('general.verify') }}</h4>
	<p>{{ $t('settings.mfa.verify.desc') }}</p>
	<input
	v-model="otpConfirmToken"
	type="text"
	class="input"
	>

	<p>{{ $t('settings.enter_current_password_to_confirm') }}:</p>
	<input
	v-model="currentPassword"
	type="password"
	class="input"
	>
	<div class="confirm-otp-actions">
	<button
	class="btn button-default"
	@click="doConfirmOTP"
	>
	{{ $t('settings.mfa.confirm_and_enable') }}
	</button>
	<button
	class="btn button-default"
	@click="cancelSetup"
	>
	{{ $t('general.cancel') }}
	</button>
	</div>
	<div
	v-if="error"
	class="alert error"
	>
	{{ error }}
	</div>
	</div>
	</div>
	</div>
	</template>
	</div>
	</div>
	</div>
	</template>

	<script src="./mfa.js"></script>
	<style lang="scss">
	-@import "../../../../variables";
	-
	.mfa-settings {
	.mfa-heading,
	.method-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	}

	.warning {
	- color: $fallback--cOrange;
	- color: var(--cOrange, $fallback--cOrange);
	+ color: var(--cOrange);
	}

	.setup-otp {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;

	.qr-code {
	flex: 1;
	padding-right: 10px;
	}
	.verify { flex: 1; }
	.error { margin: 4px 0 0; }

	.confirm-otp-actions {
	button {
	width: 15em;
	margin-top: 5px;
	}
	}
	}
	}
	</style>
	diff --git a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
	index 002f1bb27e..32a8a759cb 100644
	--- a/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
	+++ b/src/components/settings_modal/tabs/security_tab/mfa_backup_codes.vue
	@@ -1,35 +1,33 @@
	<template>
	<div class="mfa-backup-codes">
	<h4 v-if="displayTitle">
	{{ $t('settings.mfa.recovery_codes') }}
	</h4>
	<i v-if="inProgress">{{ $t('settings.mfa.waiting_a_recovery_codes') }}</i>
	<template v-if="ready">
	<p class="alert warning">
	{{ $t('settings.mfa.recovery_codes_warning') }}
	</p>
	<ul class="backup-codes">
	<li
	v-for="code in backupCodes.codes"
	:key="code"
	>
	{{ code }}
	</li>
	</ul>
	</template>
	</div>
	</template>
	<script src="./mfa_backup_codes.js"></script>
	<style lang="scss">
	-@import "../../../../variables";
	-
	.mfa-backup-codes {
	.warning {
	color: var(--cOrange);
	}

	.backup-codes {
	font-family: var(--monoFont);
	}
	}
	</style>
	diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	index 246f9a1310..5e6331204c 100644
	--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	@@ -1,350 +1,346 @@
	-@import "src/variables";
	-
	.theme-tab {
	padding-bottom: 2em;

	.preset-switcher {
	margin-right: 1em;
	}

	.btn {
	margin-left: 0.25em;
	margin-right: 0.25em;
	}

	.style-control {
	display: flex;
	align-items: baseline;
	margin-bottom: 5px;

	.label {
	flex: 1;
	}

	.opt {
	margin: 0.5em;
	}

	.color-input {
	flex: 0 0 0;
	}

	input,
	select {
	min-width: 3em;
	margin: 0;
	flex: 0;

	&[type="number"] {
	min-width: 5em;
	}

	&[type="range"] {
	flex: 1;
	min-width: 3em;
	align-self: flex-start;
	}
	}

	&.disabled {
	input,
	select {
	opacity: 0.5;
	}
	}
	}

	.reset-container {
	flex-wrap: wrap;
	}

	.fonts-container,
	.reset-container,
	.apply-container,
	.radius-container,
	.color-container, {
	display: flex;
	}

	.fonts-container,
	.radius-container {
	flex-direction: column;
	}

	.color-container {
	> h4 {
	width: 99%;
	}

	flex-wrap: wrap;
	justify-content: space-between;
	}

	.fonts-container,
	.color-container,
	.shadow-container,
	.radius-container,
	.presets-container {
	margin: 1em 1em 0;
	}

	.tab-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	width: 100%;
	min-height: 30px;
	margin-bottom: 1em;

	p {
	flex: 1;
	margin: 0;
	margin-right: 0.5em;
	}
	}

	.tab-header-buttons {
	display: flex;
	flex-direction: column;

	.btn {
	min-width: 1px;
	flex: 0 auto;
	padding: 0 1em;
	margin-bottom: 0.5em;
	}
	}

	.shadow-selector {
	.override {
	flex: 1;
	margin-left: 0.5em;
	}

	.select-container {
	margin-top: -4px;
	margin-bottom: -3px;
	}
	}

	.save-load,
	.save-load-options {
	display: flex;
	justify-content: center;
	align-items: baseline;
	flex-wrap: wrap;

	.presets,
	.import-export {
	margin-bottom: 0.5em;
	}

	.import-export {
	display: flex;
	}

	.override {
	margin-left: 0.5em;
	}
	}

	.save-load-options {
	flex-wrap: wrap;
	margin-top: 0.5em;
	justify-content: center;

	.keep-option {
	margin: 0 0.5em 0.5em;
	min-width: 25%;
	}
	}

	.preview-container {
	border-top: 1px dashed;
	border-bottom: 1px dashed;
	- border-color: $fallback--border;
	- border-color: var(--border, $fallback--border);
	+ border-color: var(--border);
	margin: 1em 0;
	padding: 1em;
	background-color: var(--wallpaper);
	background-image: var(--body-background-image);
	background-size: cover;
	background-position: 50% 50%;

	.dummy {
	.post {
	font-family: var(--postFont);
	display: flex;

	.content {
	flex: 1;

	h4 {
	margin-bottom: 0.25em;
	}

	.icons {
	margin-top: 0.5em;
	display: flex;

	i {
	margin-right: 1em;
	}
	}
	}
	}

	.after-post {
	margin-top: 1em;
	display: flex;
	align-items: center;
	}

	.avatar,
	.avatar-alt {
	background:
	linear-gradient(
	135deg,
	#b8e1fc 0%,
	#a9d2f3 10%,
	#90bae4 25%,
	#90bcea 37%,
	#90bff0 50%,
	#6ba8e5 51%,
	#a2daf5 83%,
	#bdf3fd 100%
	);
	color: black;
	font-family: sans-serif;
	text-align: center;
	margin-right: 1em;
	}

	.avatar-alt {
	flex: 0 auto;
	margin-left: 28px;
	font-size: 12px;
	min-width: 20px;
	min-height: 20px;
	line-height: 20px;
	}

	.avatar {
	flex: 0 auto;
	width: 48px;
	height: 48px;
	font-size: 14px;
	line-height: 48px;
	}

	.actions {
	display: flex;
	align-items: baseline;

	.checkbox {
	display: inline-flex;
	align-items: baseline;
	margin-right: 1em;
	flex: 1;
	}
	}

	.separator {
	margin: 1em;
	border-bottom: 1px solid;
	- border-color: $fallback--border;
	- border-color: var(--border, $fallback--border);
	+ border-color: var(--border);
	}

	.btn {
	min-width: 3em;
	}
	}
	}

	.radius-item {
	flex-basis: auto;
	}

	.radius-item,
	.color-item {
	min-width: 20em;
	margin: 5px 6px 0 0;
	display: flex;
	flex-direction: column;
	flex: 1 1 0;

	&.wide {
	min-width: 60%;
	}

	&:not(.wide):nth-child(2n+1) {
	margin-right: 7px;
	}

	.color,
	.opacity {
	display: flex;
	align-items: baseline;
	}
	}

	.theme-radius-rn,
	.theme-color-cl {
	border: 0;
	box-shadow: none;
	background: transparent;
	- color: var(--faint, $fallback--faint);
	+ color: var(--textFaint);
	align-self: stretch;
	}

	.theme-color-cl,
	.theme-radius-in,
	.theme-color-in {
	margin-left: 4px;
	}

	.theme-radius-in {
	min-width: 1em;
	max-width: 7em;
	flex: 1;
	}

	.theme-radius-lb {
	max-width: 50em;
	}

	.theme-preview-content {
	padding: 20px;
	}

	.theme-warning {
	display: flex;
	align-items: baseline;
	margin-bottom: 0.5em;

	.buttons {
	.btn {
	margin-bottom: 0.5em;
	}
	}
	}
	}

	.extra-content {
	.apply-container {
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	flex-grow: 1;

	/* stylelint-disable-next-line no-descending-specificity */
	.btn {
	flex-grow: 1;
	min-height: 2em;
	min-width: 0;
	max-width: 10em;
	padding: 0;
	}
	}
	}
	diff --git a/src/components/shout_panel/shout_panel.vue b/src/components/shout_panel/shout_panel.vue
	index 9278c1415f..62cc9568a4 100644
	--- a/src/components/shout_panel/shout_panel.vue
	+++ b/src/components/shout_panel/shout_panel.vue
	@@ -1,155 +1,152 @@
	<template>
	<div
	v-if="!collapsed \|\| !floating"
	class="shout-panel"
	>
	<div class="panel panel-default">
	<div
	class="panel-heading timeline-heading"
	:class="{ 'shout-heading': floating }"
	@click.stop.prevent="togglePanel"
	>
	<div class="title">
	{{ $t('shoutbox.title') }}
	<FAIcon
	v-if="floating"
	icon="times"
	class="close-icon"
	/>
	</div>
	</div>
	<div class="shout-window">
	<div
	v-for="message in messages"
	:key="message.id"
	class="shout-message"
	>
	<span class="shout-avatar">
	<img :src="message.author.avatar">
	</span>
	<div class="shout-content">
	<router-link
	class="shout-name"
	:to="userProfileLink(message.author)"
	>
	{{ message.author.username }}
	</router-link>
	<br>
	<span class="shout-text">
	{{ message.text }}
	</span>
	</div>
	</div>
	</div>
	<div class="shout-input">
	<textarea
	v-model="currentMessage"
	class="shout-input-textarea"
	rows="1"
	@keyup.enter="submit(currentMessage)"
	/>
	</div>
	</div>
	</div>
	<div
	v-else
	class="shout-panel"
	>
	<div class="panel panel-default">
	<div
	class="panel-heading -stub timeline-heading shout-heading"
	@click.stop.prevent="togglePanel"
	>
	<div class="title">
	<FAIcon
	class="icon"
	icon="bullhorn"
	/>
	{{ $t('shoutbox.title') }}
	</div>
	</div>
	</div>
	</div>
	</template>

	<script src="./shout_panel.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.floating-shout {
	position: fixed;
	bottom: 0.5em;
	z-index: var(--ZI_popovers);
	max-width: 25em;

	&.-left {
	left: 0.5em;
	}

	&:not(.-left) {
	right: 0.5em;
	}
	}

	.shout-panel {
	.shout-heading {
	cursor: pointer;

	.icon {
	- color: $fallback--text;
	- color: var(--panelText, $fallback--text);
	+ color: var(--text);
	margin-right: 0.5em;
	}

	.title {
	display: flex;
	justify-content: space-between;
	align-items: center;
	}
	}

	.shout-window {
	overflow-y: auto;
	overflow-x: hidden;
	max-height: 20em;
	}

	.shout-window-container {
	height: 100%;
	}

	.shout-message {
	display: flex;
	padding: 0.2em 0.5em;
	}

	.shout-avatar {
	img {
	height: 24px;
	width: 24px;
	border-radius: var(--roundness);
	margin-right: 0.5em;
	margin-top: 0.25em;
	}
	}

	.shout-input {
	display: flex;

	textarea {
	flex: 1;
	margin: 0.6em;
	min-height: 3.5em;
	resize: none;
	}
	}

	.shout-panel {
	.title {
	display: flex;
	justify-content: space-between;
	}
	}
	}
	</style>
	diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue
	index 2e99897bb0..608b5608e2 100644
	--- a/src/components/side_drawer/side_drawer.vue
	+++ b/src/components/side_drawer/side_drawer.vue
	@@ -1,407 +1,405 @@
	<template>
	<div
	class="side-drawer-container mobile-drawer"
	:class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }"
	>
	<div
	class="side-drawer-darken"
	:class="{ 'side-drawer-darken-closed': closed}"
	/>
	<div
	class="side-drawer"
	:class="{'side-drawer-closed': closed}"
	@touchstart="touchStart"
	@touchmove="touchMove"
	>
	<div
	class="side-drawer-heading"
	@click="toggleDrawer"
	>
	<UserCard
	v-if="currentUser"
	:user-id="currentUser.id"
	:hide-bio="true"
	/>
	<div
	v-else
	class="side-drawer-logo-wrapper"
	>
	<img :src="logo">
	<span v-if="!hideSitename">{{ sitename }}</span>
	</div>
	</div>
	<ul>
	<li
	v-if="!currentUser"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'login' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="sign-in-alt"
	/> {{ $t("login.login") }}
	</router-link>
	</li>
	<li
	v-if="currentUser \|\| !privateMode"
	@click="toggleDrawer"
	>
	<router-link
	:to="timelinesRoute"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="home"
	/> {{ $t("nav.timelines") }}
	</router-link>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'lists' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="list"
	/> {{ $t("nav.lists") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && pleromaChatMessagesAvailable"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'chats', params: { username: currentUser.screen_name } }"
	style="position: relative;"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="comments"
	/> {{ $t("nav.chats") }}
	<span
	v-if="unreadChatCount"
	class="badge -notification"
	>
	{{ unreadChatCount }}
	</span>
	</router-link>
	</li>
	</ul>
	<ul v-if="currentUser">
	<li @click="toggleDrawer">
	<router-link
	:to="{ name: 'interactions', params: { username: currentUser.screen_name } }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="bell"
	/> {{ $t("nav.interactions") }}
	</router-link>
	</li>
	<li
	v-if="currentUser.locked"
	@click="toggleDrawer"
	>
	<router-link
	to="/friend-requests"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="user-plus"
	/> {{ $t("nav.friend_requests") }}
	<span
	v-if="followRequestCount > 0"
	class="badge -notification"
	>
	{{ followRequestCount }}
	</span>
	</router-link>
	</li>
	<li
	v-if="shout"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'shout-panel' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="bullhorn"
	/> {{ $t("shoutbox.title") }}
	</router-link>
	</li>
	</ul>
	<ul>
	<li
	v-if="currentUser \|\| !privateMode"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'search' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="search"
	/> {{ $t("nav.search") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && suggestionsEnabled"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'who-to-follow' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="user-plus"
	/> {{ $t("nav.who_to_follow") }}
	</router-link>
	</li>
	<li @click="toggleDrawer">
	<button
	class="menu-item"
	@click="openSettingsModal"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="cog"
	/> {{ $t("settings.settings") }}
	</button>
	</li>
	<li @click="toggleDrawer">
	<router-link
	:to="{ name: 'about'}"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="info-circle"
	/> {{ $t("nav.about") }}
	</router-link>
	</li>
	<li
	v-if="currentUser && currentUser.role === 'admin'"
	@click="toggleDrawer"
	>
	<button
	class="menu-item"
	@click.stop="openAdminModal"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="tachometer-alt"
	/> {{ $t("nav.administration") }}
	</button>
	</li>
	<li
	v-if="currentUser && supportsAnnouncements"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'announcements' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="bullhorn"
	/> {{ $t("nav.announcements") }}
	<span
	v-if="unreadAnnouncementCount"
	class="badge -notification"
	>
	{{ unreadAnnouncementCount }}
	</span>
	</router-link>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<router-link
	:to="{ name: 'edit-navigation' }"
	class="menu-item"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="compass"
	/> {{ $t("nav.edit_nav_mobile") }}
	</router-link>
	</li>
	<li
	v-if="currentUser"
	@click="toggleDrawer"
	>
	<button
	class="menu-item"
	@click="doLogout"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110 fa-old-padding"
	icon="sign-out-alt"
	/> {{ $t("login.logout") }}
	</button>
	</li>
	</ul>
	</div>
	<div
	class="side-drawer-click-outside"
	:class="{'side-drawer-click-outside-closed': closed}"
	@click.stop.prevent="toggleDrawer"
	/>
	</div>
	</template>

	<script src="./side_drawer.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.side-drawer-container {
	position: fixed;
	z-index: var(--ZI_navbar);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: stretch;
	transition-duration: 0s;
	transition-property: transform;
	}

	.side-drawer-container-open {
	transform: translate(0%);
	}

	.side-drawer-container-closed {
	transition-delay: 0.35s;
	transform: translate(-100%);
	}

	.side-drawer-darken {
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	position: fixed;
	z-index: -1;
	transition: 0.35s;
	transition-property: background-color;
	background-color: rgb(0 0 0 / 50%);
	}

	.side-drawer-darken-closed {
	background-color: rgb(0 0 0 / 0%);
	}

	.side-drawer-click-outside {
	flex: 1 1 100%;
	}

	.side-drawer {
	overflow-x: hidden;
	transition: 0.35s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 1);
	transition-property: transform;
	margin: 0 0 0 -100px;
	padding: 0 0 1em 100px;
	width: 80%;
	max-width: 20em;
	flex: 0 0 80%;
	box-shadow: var(--shadow);
	background-color: var(--background);

	.badge {
	margin-left: 10px;
	}
	}

	.side-drawer-logo-wrapper {
	display: flex;
	align-items: center;
	padding: 0.85em;

	img {
	flex: none;
	height: 50px;
	margin-right: 0.85em;
	}

	span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}

	.side-drawer-click-outside-closed {
	flex: 0 0 0;
	}

	.side-drawer-closed {
	transform: translate(-100%);
	}

	.side-drawer-heading {
	background: transparent;
	flex-direction: column;
	align-items: stretch;
	display: flex;
	padding: 0;
	margin: 0;
	}

	.side-drawer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	border-bottom: 1px solid;
	border-color: var(--border);
	}

	.side-drawer ul:last-child {
	border: 0;
	}

	.side-drawer li {
	padding: 0;

	a,
	button {
	box-sizing: border-box;
	display: block;
	height: 3em;
	line-height: 3em;
	padding: 0 0.7em;
	}
	}
	</style>
	diff --git a/src/components/status/status.scss b/src/components/status/status.scss
	index 600c98f70a..0281ab04a3 100644
	--- a/src/components/status/status.scss
	+++ b/src/components/status/status.scss
	@@ -1,437 +1,418 @@
	-@import "../../variables";
	-
	.Status {
	min-width: 0;
	white-space: normal;
	word-wrap: break-word;
	word-break: break-word;

	&:hover {
	--_still-image-img-visibility: visible;
	--_still-image-canvas-visibility: hidden;
	--_still-image-label-visibility: hidden;
	}

	- &.-focused {
	- background-color: $fallback--lightBg;
	- background-color: var(--selectedPost, $fallback--lightBg);
	- color: $fallback--text;
	- color: var(--selectedPostText, $fallback--text);
	-
	- --lightText: var(--selectedPostLightText, $fallback--light);
	- --faint: var(--selectedPostFaintText, $fallback--faint);
	- --faintLink: var(--selectedPostFaintLink, $fallback--faint);
	- --postLink: var(--selectedPostPostLink, $fallback--faint);
	- --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
	- --icon: var(--selectedPostIcon, $fallback--icon);
	- }
	-
	.gravestone {
	- padding: var(--status-margin, $status-margin);
	- color: $fallback--faint;
	- color: var(--faint, $fallback--faint);
	+ padding: var(--status-margin);
	display: flex;

	.deleted-text {
	margin: 0.5em 0;
	align-items: center;
	}
	}

	.status-container {
	display: flex;
	- padding: var(--status-margin, $status-margin);
	+ padding: var(--status-margin);

	> * {
	min-width: 0;
	}

	&.-repeat {
	padding-top: 0;
	}
	}

	.pin {
	- padding: var(--status-margin, $status-margin) var(--status-margin, $status-margin) 0;
	+ padding: var(--status-margin) var(--status-margin) 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	}

	._misclick-prevention & {
	pointer-events: none;

	.attachments {
	pointer-events: initial;
	cursor: initial;
	}
	}

	.left-side {
	- margin-right: var(--status-margin, $status-margin);
	+ margin-right: var(--status-margin);
	}

	.right-side {
	flex: 1;
	min-width: 0;
	}

	.usercard {
	- margin-bottom: var(--status-margin, $status-margin);
	+ margin-bottom: var(--status-margin);
	}

	.status-username {
	white-space: nowrap;
	overflow: hidden;
	max-width: 85%;
	font-weight: bold;
	flex-shrink: 1;
	margin-right: 0.4em;
	text-overflow: ellipsis;

	--_still_image-label-scale: 0.25;
	--emoji-size: 14px;
	}

	.status-favicon {
	height: 18px;
	width: 18px;
	margin-right: 0.4em;
	}

	.status-heading {
	margin-bottom: 0.5em;
	}

	.heading-name-row {
	display: flex;
	justify-content: space-between;
	line-height: 1.3;

	a {
	display: inline-block;
	word-break: break-all;
	}
	}

	.account-name {
	min-width: 1.6em;
	margin-right: 0.4em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1 1 0;
	}

	.heading-left {
	display: flex;
	min-width: 0;
	}

	.heading-right {
	display: flex;
	flex-shrink: 0;

	.button-unstyled {
	padding: 5px;
	margin: -5px;
	}

	.svg-inline--fa {
	margin-left: 0.25em;
	}
	}

	.glued-label {
	display: inline-flex;
	white-space: nowrap;
	}

	.timeago {
	margin-right: 0.2em;
	}

	& .heading-reply-row,
	& .heading-edited-row {
	position: relative;
	align-content: baseline;
	font-size: 0.85em;
	margin-top: 0.2em;
	line-height: 130%;
	max-width: 100%;
	align-items: stretch;
	}

	& .reply-to-popover,
	& .reply-to-no-popover,
	& .mentions {
	min-width: 0;
	margin-right: 0.4em;
	flex-shrink: 0;
	}

	.reply-glued-label {
	margin-right: 0.5em;
	}

	.reply-to-popover {
	.reply-to:hover::before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	width: 100%;
	border-bottom: 1px solid var(--faint);
	pointer-events: none;
	}

	.faint-link:hover {
	// override default
	text-decoration: none;
	}

	&.-strikethrough {
	.reply-to::after {
	content: "";
	display: block;
	position: absolute;
	top: 50%;
	width: 100%;
	border-bottom: 1px solid var(--faint);
	pointer-events: none;
	}
	}
	}

	& .mentions,
	& .reply-to {
	white-space: nowrap;
	position: relative;
	}

	& .mentions-text,
	& .reply-to-text {
	color: var(--faint);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	.mentions-line {
	display: inline;
	}

	.replies {
	margin-top: 0.25em;
	line-height: 1.3;
	font-size: 0.85em;
	display: flex;
	flex-wrap: wrap;

	& > * {
	margin-right: 0.4em;
	}
	}

	.reply-link {
	height: 17px;
	}

	.repeat-info {
	- padding: 0.4em var(--status-margin, $status-margin);
	+ padding: 0.4em var(--status-margin);

	.repeat-icon {
	- color: $fallback--cGreen;
	- color: var(--cGreen, $fallback--cGreen);
	+ color: var(--cGreen);
	}
	}

	.repeater-avatar {
	border-radius: var(--roundness);
	margin-left: 28px;
	width: 20px;
	height: 20px;
	}

	.repeater-name {
	text-overflow: ellipsis;
	margin-right: 0;

	.emoji {
	width: 14px;
	height: 14px;
	vertical-align: middle;
	object-fit: contain;
	}
	}

	.status-fadein {
	animation-duration: 0.4s;
	animation-name: fadein;
	}

	@keyframes fadein {
	from {
	opacity: 0;
	}

	to {
	opacity: 1;
	}
	}

	.status-actions {
	position: relative;
	width: 100%;
	display: flex;
	- margin-top: var(--status-margin, $status-margin);
	+ margin-top: var(--status-margin);

	> * {
	max-width: 4em;
	flex: 1;
	}
	}

	.muted {
	padding: 0.25em 0.6em;
	height: 1.2em;
	line-height: 1.2em;
	text-overflow: ellipsis;
	overflow: hidden;
	display: flex;
	flex-wrap: nowrap;

	& .status-username,
	& .mute-thread,
	& .mute-words {
	word-wrap: normal;
	word-break: normal;
	white-space: nowrap;
	}

	& .status-username,
	& .mute-words {
	text-overflow: ellipsis;
	overflow: hidden;
	}

	.status-username {
	font-weight: normal;
	flex: 0 1 auto;
	margin-right: 0.2em;
	font-size: smaller;
	}

	.mute-thread {
	flex: 0 0 auto;
	}

	.mute-words {
	flex: 1 0 5em;
	margin-left: 0.2em;

	&::before {
	content: " ";
	}
	}

	.unmute {
	flex: 0 0 auto;
	margin-left: auto;
	display: block;
	}
	}

	.reply-form {
	padding-top: 0;
	padding-bottom: 0;
	}

	.reply-body {
	flex: 1;
	}

	.favs-repeated-users {
	- margin-top: var(--status-margin, $status-margin);
	+ margin-top: var(--status-margin);
	}

	.stats {
	width: 100%;
	display: flex;
	line-height: 1em;
	}

	.avatar-row {
	flex: 1;
	position: relative;
	display: flex;
	align-items: center;

	&::before {
	content: "";
	position: absolute;
	height: 100%;
	width: 1px;
	left: 0;
	- background-color: var(--faint, $fallback--faint);
	+ background-color: var(--textFaint);
	}
	}

	.stat-count {
	- margin-right: var(--status-margin, $status-margin);
	+ margin-right: var(--status-margin);
	user-select: none;

	.stat-title {
	- color: var(--faint, $fallback--faint);
	+ color: var(--textFaint);
	font-size: 0.85em;
	text-transform: uppercase;
	position: relative;
	}

	.stat-number {
	font-weight: bolder;
	font-size: 1.1em;
	line-height: 1em;
	}

	&:hover .stat-title {
	text-decoration: underline;
	}
	}

	@media all and (max-width: 800px) {
	.repeater-avatar {
	margin-left: 20px;
	}

	.post-avatar {
	width: 40px;
	height: 40px;

	// TODO define those other way somehow?
	// stylelint-disable rscss/class-format
	&.-compact {
	width: 32px;
	height: 32px;
	}
	}
	}

	.quoted-status {
	margin-top: 0.5em;
	- border: 1px solid var(--border, $fallback--border);
	+ border: 1px solid var(--border);
	border-radius: var(--roundness);

	&.-unavailable-prompt {
	padding: 0.5em;
	}
	}

	.display-quoted-status-button {
	margin: 0.5em;

	&-icon {
	color: inherit;
	}
	}
	}
	diff --git a/src/components/status_popover/status_popover.vue b/src/components/status_popover/status_popover.vue
	index b3bd423fcb..839f82e906 100644
	--- a/src/components/status_popover/status_popover.vue
	+++ b/src/components/status_popover/status_popover.vue
	@@ -1,69 +1,67 @@
	<template>
	<Popover
	ref="popover"
	trigger="hover"
	:stay-on-click="true"
	popover-class="popover-default status-popover"
	:bound-to="{ x: 'container' }"
	@show="enter"
	>
	<template #trigger>
	<slot />
	</template>
	<template #content>
	<Status
	v-if="status"
	:is-preview="true"
	:statusoid="status"
	:compact="true"
	/>
	<div
	v-else-if="error"
	class="status-preview-no-content faint"
	>
	{{ $t('status.status_unavailable') }}
	</div>
	<div
	v-else
	class="status-preview-no-content"
	>
	<FAIcon
	icon="circle-notch"
	spin
	size="2x"
	/>
	</div>
	</template>
	</Popover>
	</template>

	<script src="./status_popover.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	/* popover styles load on-demand, so we need to override */
	.status-popover.popover {
	font-size: 1rem;
	min-width: 15em;
	max-width: 95%;
	border-color: var(--border);
	border-style: solid;
	border-width: 1px;

	/* TODO cleanup this */
	.Status.Status {
	border: none;
	}

	.status-preview-no-content {
	padding: 1em;
	text-align: center;

	i {
	font-size: 2em;
	}
	}
	}

	</style>
	diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue
	index 904853c0d0..6678132e91 100644
	--- a/src/components/sticker_picker/sticker_picker.vue
	+++ b/src/components/sticker_picker/sticker_picker.vue
	@@ -1,67 +1,65 @@
	<template>
	<div
	class="sticker-picker"
	>
	<tab-switcher
	class="tab-switcher"
	:render-only-focused="true"
	scrollable-tabs
	>
	<div
	v-for="stickerpack in pack"
	:key="stickerpack.path"
	:image-tooltip="stickerpack.meta.title"
	:image="stickerpack.path + stickerpack.meta.tabIcon"
	class="sticker-picker-content"
	>
	<div
	v-for="sticker in stickerpack.meta.stickers"
	:key="sticker"
	class="sticker"
	@click.stop.prevent="pick(stickerpack.path + sticker, stickerpack.meta.title)"
	>
	<img
	:src="stickerpack.path + sticker"
	>
	</div>
	</div>
	</tab-switcher>
	</div>
	</template>

	<script src="./sticker_picker.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.sticker-picker {
	width: 100%;

	.contents {
	min-height: 250px;

	.sticker-picker-content {
	display: flex;
	flex-wrap: wrap;
	padding: 0 4px;

	.sticker {
	display: flex;
	flex: 1 1 auto;
	margin: 4px;
	width: 56px;
	height: 56px;

	img {
	height: 100%;

	&:hover {
	- filter: drop-shadow(0 0 5px var(--accent, $fallback--link));
	+ filter: drop-shadow(0 0 5px var(--accent));
	}
	}
	}
	}
	}
	}

	</style>
	diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue
	index fc46fbe63d..57633827ed 100644
	--- a/src/components/still-image/still-image.vue
	+++ b/src/components/still-image/still-image.vue
	@@ -1,94 +1,91 @@
	<template>
	<div
	class="still-image"
	:class="{ animated: animated }"
	:style="style"
	>
	<canvas
	v-if="animated"
	ref="canvas"
	/>
	<!-- NOTE: key is required to force to re-render img tag when src is changed -->
	<img
	ref="src"
	:key="realSrc"
	:alt="alt"
	:title="alt"
	:data-src="dataSrc"
	:src="realSrc"
	:referrerpolicy="referrerpolicy"
	:loading="loading"
	@load="onLoad"
	@error="onError"
	>
	<slot />
	</div>
	</template>

	<script src="./still-image.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.still-image {
	position: relative;
	line-height: 0;
	overflow: hidden;
	display: inline-flex;
	align-items: center;

	canvas {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	visibility: var(--_still-image-canvas-visibility, visible);
	}

	img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	}

	&.animated {
	&::before {
	zoom: var(--_still_image-label-scale, 1);
	content: "gif";
	position: absolute;
	line-height: 1;
	font-size: 0.7em;
	top: 0.5em;
	left: 0.5em;
	background: rgb(127 127 127 / 50%);
	color: #fff;
	display: block;
	padding: 2px 4px;
	- border-radius: $fallback--tooltipRadius;
	- border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	+ border-radius: var(--roundness);
	z-index: 2;
	visibility: var(--_still-image-label-visibility, visible);
	}

	&:hover canvas {
	display: none;
	}

	&:hover::before {
	visibility: var(--_still-image-label-visibility, hidden);
	}

	img {
	visibility: var(--_still-image-img-visibility, hidden);
	}

	&:hover img {
	visibility: visible;
	}
	}
	}
	</style>
	diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
	index 489407cb2c..1efe1b04f8 100644
	--- a/src/components/tab_switcher/tab_switcher.scss
	+++ b/src/components/tab_switcher/tab_switcher.scss
	@@ -1,247 +1,240 @@
	-@import "../../variables";
	-
	/* stylelint-disable no-descending-specificity */
	.tab-switcher {
	display: flex;

	.tab-icon {
	margin: 0.2em auto;
	display: block;
	}

	&.top-tabs {
	flex-direction: column;

	> .tabs {
	width: 100%;
	overflow-y: hidden;
	overflow-x: auto;
	padding-top: 5px;
	flex-direction: row;
	flex: 0 0 auto;

	&::after,
	&::before {
	content: "";
	flex: 1 1 auto;
	border-bottom: 1px solid;
	border-bottom-color: var(--border);
	}

	.tab-wrapper {
	height: 2em;

	&:not(.active)::after {
	left: 0;
	right: 0;
	bottom: 0;
	border-bottom: 1px solid;
	border-bottom-color: var(--border);
	}
	}

	.tab {
	width: 100%;
	min-width: 1px;
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	padding-bottom: 99px;
	margin-bottom: 6px - 99px;
	}
	}

	.contents.scrollable-tabs {
	flex-basis: 0;
	}
	}

	&.side-tabs {
	flex-direction: row;

	@media all and (max-width: 800px) {
	overflow-x: auto;
	}

	> .contents {
	flex: 1 1 auto;
	}

	> .tabs {
	flex: 0 0 auto;
	overflow-y: auto;
	overflow-x: hidden;
	flex-direction: column;

	&::after,
	&::before {
	flex-shrink: 0;
	flex-basis: 0.5em;
	content: "";
	border-right: 1px solid;
	- border-right-color: $fallback--border;
	- border-right-color: var(--border, $fallback--border);
	+ border-right-color: var(--border);
	}

	&::after {
	flex-grow: 1;
	}

	&::before {
	flex-grow: 0;
	}

	.tab-wrapper {
	min-width: 10em;
	display: flex;
	flex-direction: column;

	@media all and (max-width: 800px) {
	min-width: 4em;
	}

	&:not(.active)::after {
	top: 0;
	right: 0;
	bottom: 0;
	border-right: 1px solid;
	- border-right-color: $fallback--border;
	- border-right-color: var(--border, $fallback--border);
	+ border-right-color: var(--border);
	}

	&::before {
	flex: 0 0 6px;
	content: "";
	border-right: 1px solid;
	- border-right-color: $fallback--border;
	- border-right-color: var(--border, $fallback--border);
	+ border-right-color: var(--border);
	}

	&:last-child .tab {
	margin-bottom: 0;
	}
	}

	.tab {
	flex: 1;
	box-sizing: content-box;
	min-width: 10em;
	min-width: 1px;
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	padding-left: 1em;
	padding-right: calc(1em + 200px);
	margin-right: -200px;
	margin-left: 1em;

	@media all and (max-width: 800px) {
	padding-left: 0.25em;
	padding-right: calc(0.25em + 200px);
	margin-right: calc(0.25em - 200px);
	margin-left: 0.25em;

	.text {
	display: none;
	}
	}
	}
	}
	}

	.contents {
	flex: 1 0 auto;
	min-height: 0;

	.hidden {
	display: none;
	}

	.full-height:not(.hidden) {
	height: 100%;
	display: flex;
	flex-direction: column;

	> *:not(.mobile-label) {
	flex: 1;
	}
	}

	&.scrollable-tabs {
	overflow-y: auto;
	}
	}

	.tab {
	user-select: none;
	color: var(--text);
	border: none;
	cursor: pointer;
	box-shadow: var(--shadow);
	font-size: 1em;
	font-family: var(--font);
	border-radius: var(--roundness);
	position: relative;
	white-space: nowrap;
	padding: 6px 1em;

	&:not(.active) {
	z-index: 4;

	&:hover {
	z-index: 6;
	}
	}

	&.active {
	background: transparent;
	z-index: 5;
	- color: $fallback--text;
	- color: var(--tabActiveText, $fallback--text);
	}

	img {
	max-height: 26px;
	vertical-align: top;
	margin-top: -5px;
	}
	}

	.tabs {
	display: flex;
	position: relative;
	box-sizing: border-box;

	&::after,
	&::before {
	display: block;
	flex: 1 1 auto;
	}
	}

	.tab-wrapper {
	position: relative;
	display: flex;
	flex: 0 0 auto;

	&:not(.active) {
	&::after {
	content: "";
	position: absolute;
	z-index: 7;
	}
	}
	}

	.mobile-label {
	padding-left: 0.3em;
	padding-bottom: 0.25em;
	margin-top: 0.5em;
	margin-left: 0.2em;
	margin-bottom: 0.25em;
	- border-bottom: 1px solid var(--border, $fallback--border);
	+ border-bottom: 1px solid var(--border);

	@media all and (min-width: 800px) {
	display: none;
	}
	}
	}
	/* stylelint-enable no-descending-specificity */
	diff --git a/src/components/thread_tree/thread_tree.vue b/src/components/thread_tree/thread_tree.vue
	index 047272784b..971b7001e0 100644
	--- a/src/components/thread_tree/thread_tree.vue
	+++ b/src/components/thread_tree/thread_tree.vue
	@@ -1,137 +1,135 @@
	<template>
	<article class="thread-tree">
	<status
	:key="status.id"
	ref="statusComponent"
	:inline-expanded="collapsable && isExpanded"
	:statusoid="status"
	:expandable="!isExpanded"
	:show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]"
	:focused="focused(status.id)"
	:in-conversation="isExpanded"
	:highlight="highlight"
	:replies="getReplies(status.id)"
	:in-profile="inProfile"
	:profile-user-id="profileUserId"
	class="conversation-status conversation-status-treeview status-fadein panel-body"

	:simple-tree="simple"
	:controlled-thread-display-status="threadDisplayStatus[status.id]"
	:controlled-toggle-thread-display="() => toggleThreadDisplay(status.id)"

	:controlled-showing-tall="currentProp.showingTall"
	:controlled-expanding-subject="currentProp.expandingSubject"
	:controlled-showing-long-subject="currentProp.showingLongSubject"
	:controlled-replying="currentProp.replying"
	:controlled-media-playing="currentProp.mediaPlaying"
	:controlled-toggle-showing-tall="() => toggleCurrentProp('showingTall')"
	:controlled-toggle-expanding-subject="() => toggleCurrentProp('expandingSubject')"
	:controlled-toggle-showing-long-subject="() => toggleCurrentProp('showingLongSubject')"
	:controlled-toggle-replying="() => toggleCurrentProp('replying')"
	:controlled-set-media-playing="(newVal) => setCurrentProp('mediaPlaying', newVal)"
	:dive="dive ? () => dive(status.id) : undefined"

	@goto="setHighlight"
	@toggleExpanded="toggleExpanded"
	/>
	<div
	v-if="currentReplies.length && threadShowing"
	class="thread-tree-replies"
	>
	<thread-tree
	v-for="replyStatus in currentReplies"
	:key="replyStatus.id"
	ref="childComponent"
	:depth="depth + 1"
	:status="replyStatus"

	:in-profile="inProfile"
	:conversation="conversation"
	:collapsable="collapsable"
	:is-expanded="isExpanded"
	:pinned-status-ids-object="pinnedStatusIdsObject"
	:profile-user-id="profileUserId"

	:focused="focused"
	:get-replies="getReplies"
	:highlight="highlight"
	:set-highlight="setHighlight"
	:toggle-expanded="toggleExpanded"

	:simple="simple"
	:toggle-thread-display="toggleThreadDisplay"
	:thread-display-status="threadDisplayStatus"
	:show-thread-recursively="showThreadRecursively"
	:total-reply-count="totalReplyCount"
	:total-reply-depth="totalReplyDepth"
	:status-content-properties="statusContentProperties"
	:set-status-content-property="setStatusContentProperty"
	:toggle-status-content-property="toggleStatusContentProperty"
	:dive="dive"
	/>
	</div>
	<div
	v-if="currentReplies.length && !threadShowing"
	class="thread-tree-replies thread-tree-replies-hidden"
	>
	<i18n-t
	v-if="simple"
	scope="global"
	tag="button"
	keypath="status.thread_follow_with_icon"
	class="button-unstyled -link thread-tree-show-replies-button"
	@click.prevent="dive(status.id)"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-right"
	/>
	</template>
	<template #text>
	<span>
	{{ $tc('status.thread_follow', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id] }) }}
	</span>
	</template>
	</i18n-t>
	<i18n-t
	v-else
	scope="global"
	tag="button"
	keypath="status.thread_show_full_with_icon"
	class="button-unstyled -link thread-tree-show-replies-button"
	@click.prevent="showThreadRecursively(status.id)"
	>
	<template #icon>
	<FAIcon
	icon="angle-double-down"
	/>
	</template>
	<template #text>
	<span>
	{{ $tc('status.thread_show_full', totalReplyCount[status.id], { numStatus: totalReplyCount[status.id], depth: totalReplyDepth[status.id] }) }}
	</span>
	</template>
	</i18n-t>
	</div>
	</article>
	</template>

	<script src="./thread_tree.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.thread-tree-replies {
	- margin-left: var(--status-margin, $status-margin);
	- border-left: 2px solid var(--border, $fallback--border);
	+ margin-left: var(--status-margin);
	+ border-left: 2px solid var(--border);
	}

	.thread-tree-replies-hidden {
	- padding: var(--status-margin, $status-margin);
	+ padding: var(--status-margin);

	/* Make the button stretch along the whole row */
	display: flex;
	align-items: stretch;
	flex-direction: column;
	}
	</style>
	diff --git a/src/components/timeline/timeline.scss b/src/components/timeline/timeline.scss
	index fccf28f472..cf621bbbde 100644
	--- a/src/components/timeline/timeline.scss
	+++ b/src/components/timeline/timeline.scss
	@@ -1,47 +1,45 @@
	-@import "../../variables";
	-
	.Timeline {
	.timeline-body {
	background: none;
	}

	.alert-badge {
	font-size: 0.75em;
	line-height: 1;
	text-align: right;
	border-radius: var(--roundness);
	position: absolute;
	left: calc(50% - 0.5em);
	top: calc(50% - 0.4em);
	padding: 0.2em;
	margin-left: 0.7em;
	margin-top: -1em;
	}

	.loadmore-button {
	position: relative;
	}

	&.-blocked {
	cursor: progress;
	}

	.conversation-heading {
	top: calc(var(--__panel-heading-height) * var(--currentPanelStack, 2));
	z-index: 2;
	}

	&.-nonpanel {
	.timeline-heading {
	text-align: center;
	line-height: 2.75em;
	padding: 0 0.5em;

	.button-default,
	.alert {
	line-height: 2em;
	width: 100%;
	}
	}
	}
	}
	diff --git a/src/components/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
	index 9173921655..d755b9ddff 100644
	--- a/src/components/timeline_menu/timeline_menu.vue
	+++ b/src/components/timeline_menu/timeline_menu.vue
	@@ -1,110 +1,108 @@
	<template>
	<Popover
	trigger="click"
	class="TimelineMenu"
	:class="{ 'open': isOpen }"
	:bound-to="{ x: 'container' }"
	bound-to-selector=".Timeline"
	popover-class="timeline-menu-popover popover-default"
	@show="openMenu"
	@close="() => isOpen = false"
	>
	<template #content>
	<ListsMenuContent
	v-if="useListsMenu"
	:show-pin="false"
	class="timelines"
	/>
	<ul v-else>
	<NavigationEntry
	v-for="item in timelinesList"
	:key="item.name"
	:show-pin="false"
	:item="item"
	/>
	</ul>
	</template>
	<template #trigger>
	<span class="button-unstyled title timeline-menu-title">
	<span class="timeline-title">{{ timelineName() }}</span>
	<span>
	<FAIcon
	size="sm"
	icon="chevron-down"
	/>
	</span>
	<span
	class="click-blocker"
	@click="blockOpen"
	/>
	</span>
	</template>
	</Popover>
	</template>

	<script src="./timeline_menu.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.timeline-menu-popover {
	min-width: 24rem;
	max-width: 100vw;
	margin-top: 0.6rem;
	font-size: 1rem;
	border-top-right-radius: 0;
	border-top-left-radius: 0;

	ul {
	list-style: none;
	margin: 0;
	padding: 0;
	}
	}

	.TimelineMenu {
	margin-right: auto;
	min-width: 0;

	.popover-trigger-button {
	vertical-align: bottom;
	}

	.panel::after {
	border-top-right-radius: 0;
	border-top-left-radius: 0;
	}

	.timeline-menu-title {
	margin: 0;
	cursor: pointer;
	user-select: none;
	width: 100%;
	display: flex;

	.timeline-menu-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}

	svg {
	margin-left: 0.6em;
	transition: transform 100ms;
	}

	.click-blocker {
	cursor: default;
	flex-grow: 1;
	}
	}

	&.open .timeline-menu-title svg {
	transform: rotate(180deg);
	}

	.panel {
	box-shadow: var(--popoverShadow);
	}
	}
	</style>
	diff --git a/src/components/update_notification/update_notification.scss b/src/components/update_notification/update_notification.scss
	index 4337acc4f0..fb2edaa4a2 100644
	--- a/src/components/update_notification/update_notification.scss
	+++ b/src/components/update_notification/update_notification.scss
	@@ -1,115 +1,113 @@
	-@import "src/variables";
	-
	.UpdateNotification {
	overflow: hidden;
	}

	.UpdateNotificationModal {
	--__top-fringe: 15em; // how much pleroma-tan should stick her head above
	--__bottom-fringe: 80em; // just reserving as much as we can, number is mostly irrelevant
	--__right-fringe: 8em;

	font-size: 15px;
	position: relative;
	transition: transform;
	transition-timing-function: ease-in-out;
	transition-duration: 500ms;

	.text {
	max-width: 40em;
	padding-left: 1em;
	}

	@media all and (max-width: 800px) {
	/* For mobile, the modal takes 100% of the available screen.
	This ensures the minimized modal is always 50px above the browser
	bottom bar regardless of whether or not it is visible.
	*/
	width: 100vw;
	}

	@media all and (max-height: 600px) {
	display: none;
	}

	.content {
	overflow: hidden;
	margin-top: calc(-1 * var(--__top-fringe));
	margin-bottom: calc(-1 * var(--__bottom-fringe));
	margin-right: calc(-1 * var(--__right-fringe));

	&.-noImage {
	.text {
	padding-right: var(--__right-fringe);
	}
	}
	}

	.panel-body {
	border-width: 0 0 1px;
	border-style: solid;
	- border-color: var(--border, $fallback--border);
	+ border-color: var(--border);
	}

	.panel-footer {
	z-index: 22;
	position: relative;
	border-width: 0;
	grid-template-columns: auto;
	}

	.pleroma-tan {
	object-fit: cover;
	object-position: top;
	transition: position, left, right, top, bottom, max-width, max-height;
	transition-timing-function: ease-in-out;
	transition-duration: 500ms;
	width: 25em;
	float: right;
	z-index: 20;
	position: relative;
	shape-margin: 0.5em;
	filter: drop-shadow(5px 5px 10px rgb(0 0 0 / 50%));
	pointer-events: none;
	}

	.spacer-top {
	min-height: var(--__top-fringe);
	}

	.spacer-bottom {
	min-height: var(--__bottom-fringe);
	}

	.extra-info-group {
	transition: max-height, padding, height;
	transition-timing-function: ease-in;
	transition-duration: 700ms;
	max-height: 70vh;
	mask:
	linear-gradient(to top, white, transparent) bottom/100% 2px no-repeat,
	linear-gradient(to top, white, white);
	}

	.art-credit {
	text-align: right;
	}

	&.-peek {
	/* Explanation:
	* 100vh - 100% = Distance between modal's top+bottom boundaries and screen
	* (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
	*/
	transform: translateY(calc(((100vh - 100%) / 2)));

	.pleroma-tan {
	float: right;
	z-index: 10;
	shape-image-threshold: 70%;
	}

	.extra-info-group {
	max-height: 0;
	}
	}
	}
	diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue
	index a71e6992b5..83608c5050 100644
	--- a/src/components/user_avatar/user_avatar.vue
	+++ b/src/components/user_avatar/user_avatar.vue
	@@ -1,94 +1,92 @@
	<template>
	<span
	class="Avatar"
	:class="{ '-compact': compact }"
	>
	<StillImage
	v-if="user"
	class="avatar"
	:alt="user.screen_name_ui"
	:title="user.screen_name_ui"
	:src="imgSrc(user.profile_image_url_original)"
	:image-load-error="imageLoadError"
	:class="{ '-compact': compact, '-better-shadow': betterShadow }"
	/>
	<div
	v-else
	class="avatar -placeholder"
	:class="{ '-compact': compact }"
	/>
	<FAIcon
	v-if="showActorTypeIndicator && user?.actor_type === 'Service'"
	icon="robot"
	class="actor-type-indicator"
	/>
	<FAIcon
	v-if="showActorTypeIndicator && user?.actor_type === 'Group'"
	icon="people-group"
	class="actor-type-indicator"
	/>
	</span>
	</template>

	<script src="./user_avatar.js"></script>
	<style lang="scss">
	-@import "../../variables";
	-
	.Avatar {
	--_avatarShadowBox: var(--shadow);
	--_avatarShadowFilter: var(--shadowFilter);
	--_avatarShadowInset: var(--shadowInset);
	--_still-image-label-visibility: hidden;

	display: inline-block;
	position: relative;
	width: 48px;
	height: 48px;

	&.-compact {
	width: 32px;
	height: 32px;
	border-radius: var(--roundness);
	}

	.avatar {
	width: 100%;
	height: 100%;
	box-shadow: var(--_avatarShadowBox);
	border-radius: var(--roundness);

	&.-better-shadow {
	box-shadow: var(--_avatarShadowInset);
	filter: var(--_avatarShadowFilter);
	}

	&.-animated::before {
	display: none;
	}

	&.-compact {
	border-radius: var(--roundness);
	}

	&.-placeholder {
	background-color: var(--background);
	}
	}

	img {
	width: 100%;
	height: 100%;
	}

	.actor-type-indicator {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: -0.2em;
	padding: 0.2em;
	background: rgb(127 127 127 / 50%);
	color: #fff;
	border-radius: var(--roundness);
	}
	}
	</style>
	diff --git a/src/components/user_card/user_card.scss b/src/components/user_card/user_card.scss
	index bf0ed5c236..90daaf7df3 100644
	--- a/src/components/user_card/user_card.scss
	+++ b/src/components/user_card/user_card.scss
	@@ -1,325 +1,323 @@
	-@import "../../variables";
	-
	.user-card {
	position: relative;
	z-index: 1;

	&:hover {
	--_still-image-img-visibility: visible;
	--_still-image-canvas-visibility: hidden;
	--_still-image-label-visibility: hidden;
	}

	.panel-heading {
	padding: 0.5em 0;
	text-align: center;
	box-shadow: none;
	background: transparent;
	flex-direction: column;
	align-items: stretch;
	// create new stacking context
	position: relative;
	}

	.background-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	mask:
	linear-gradient(to top, white, transparent) bottom no-repeat,
	linear-gradient(to top, white, white);
	// Autoprefixer seem to ignore this one, and also syntax is different
	mask-composite: xor;
	mask-composite: exclude;
	background-size: cover;
	mask-size: 100% 60%;
	border-top-left-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
	border-top-right-radius: calc(var(--__roundnessTop, --panelRadius) - 1px);
	border-bottom-left-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
	border-bottom-right-radius: calc(var(--__roundnessBottom, --panelRadius) - 1px);
	background-color: var(--profileBg);
	z-index: -2;

	&.hide-bio {
	mask-size: 100% 40px;
	}
	}

	&-bio {
	text-align: center;
	display: block;
	line-height: 1.3;
	padding: 1em;
	margin: 0;

	img {
	object-fit: contain;
	vertical-align: middle;
	max-width: 100%;
	max-height: 400px;
	}
	}

	&.-rounded-t {
	border-top-left-radius: var(--roundness);
	border-top-right-radius: var(--roundness);

	--__roundnessTop: var(--roundness);
	--__roundnessBottom: 0;
	}

	&.-rounded {
	border-radius: var(--roundness);

	--__roundnessTop: var(--roundness);
	--__roundnessBottom: var(--roundness);
	}

	&.-popover {
	border-radius: var(--roundness);

	--__roundnessTop: var(--roundness);
	--__roundnessBottom: var(--roundness);
	}

	&.-bordered {
	border-width: 1px;
	border-style: solid;
	border-color: var(--border);
	}
	}

	.user-info {
	padding: 0 26px;

	.container {
	min-width: 0;
	padding: 16px 0 6px;
	display: flex;
	align-items: flex-start;
	max-height: 56px;

	> * {
	min-width: 0;
	}

	> a {
	vertical-align: middle;
	display: flex;
	}

	.Avatar {
	--_avatarShadowBox: var(--avatarShadow);
	--_avatarShadowFilter: var(--avatarShadowFilter);
	--_avatarShadowInset: var(--avatarShadowInset);

	width: 56px;
	height: 56px;
	object-fit: cover;
	}
	}

	&-avatar {
	position: relative;
	cursor: pointer;

	&.-overlay {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgb(0 0 0 / 30%);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: var(--roundness);
	opacity: 0;
	transition: opacity 0.2s ease;

	svg {
	color: #fff;
	}
	}

	&:hover &.-overlay {
	opacity: 1;
	}
	}

	.external-link-button,
	.edit-profile-button {
	cursor: pointer;
	width: 2.5em;
	text-align: center;
	margin: -0.5em 0;
	padding: 0.5em 0;

	&:not(:hover) .icon {
	color: var(--lightText);
	}
	}

	.bottom-line {
	font-weight: light;
	font-size: 1.1em;
	align-items: baseline;

	.lock-icon {
	margin-left: 0.5em;
	}

	.user-screen-name {
	color: var(--text);
	min-width: 1px;
	flex: 0 1 auto;
	text-overflow: ellipsis;
	overflow: hidden;
	}

	.dailyAvg {
	min-width: 1px;
	flex: 0 0 auto;
	margin-left: 1em;
	font-size: 0.7em;
	color: var(--text);
	}

	.user-role {
	flex: none;
	}
	}

	.user-summary {
	display: block;
	margin-left: 0.6em;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 0;
	// This is so that text doesn't get overlapped by avatar's shadow if it has
	// big one
	z-index: 1;
	line-height: 2em;

	--emoji-size: 1.7em;

	.top-line,
	.bottom-line {
	display: flex;
	}
	}

	.user-name {
	text-overflow: ellipsis;
	overflow: hidden;
	flex: 1 1 auto;
	margin-right: 1em;
	font-size: 1.1em;
	}

	.user-meta {
	margin-bottom: 0.15em;
	display: flex;
	align-items: baseline;
	line-height: 22px;
	flex-wrap: wrap;

	.following {
	flex: 1 0 auto;
	margin: 0;
	margin-bottom: 0.25em;
	text-align: left;
	}

	.highlighter {
	flex: 0 1 auto;
	display: flex;
	flex-wrap: wrap;
	margin-right: -0.5em;
	align-self: start;

	.userHighlightCl {
	padding: 2px 10px;
	flex: 1 0 auto;
	}

	.userHighlightSel {
	padding-top: 0;
	padding-bottom: 0;
	flex: 1 0 auto;
	}

	.userHighlightText {
	width: 70px;
	flex: 1 0 auto;
	}

	.userHighlightCl,
	.userHighlightText,
	.userHighlightSel {
	vertical-align: top;
	margin-right: 0.5em;
	margin-bottom: 0.25em;
	}
	}
	}

	.user-interactions {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	margin-right: -0.75em;

	> * {
	margin: 0 0.75em 0.6em 0;
	white-space: nowrap;
	min-width: 95px;
	}

	button {
	margin: 0;
	}
	}

	.user-note {
	margin: 0 0.75em 0.6em 0;
	}
	}

	.sidebar .edit-profile-button {
	display: none;
	}

	.user-counts {
	display: flex;
	line-height: 16px;
	padding: 0.5em 1.5em 0;
	text-align: center;
	justify-content: space-between;
	flex-wrap: wrap;
	}

	.user-count {
	flex: 1 0 auto;
	padding: 0.5em 0;
	margin: 0 0.5em;

	h5 {
	font-size: 1em;
	font-weight: bolder;
	margin: 0 0 0.25em;
	}

	/* stylelint-disable-next-line no-descending-specificity */
	a {
	text-decoration: none;
	}
	}

	.mute-expiry {
	display: flex;
	flex-direction: row;
	}
	diff --git a/src/components/user_note/user_note.vue b/src/components/user_note/user_note.vue
	index 4290bf46db..e175ced007 100644
	--- a/src/components/user_note/user_note.vue
	+++ b/src/components/user_note/user_note.vue
	@@ -1,88 +1,86 @@
	<template>
	<div
	class="user-note"
	>
	<div class="heading">
	<span>{{ $t('user_card.note') }}</span>
	<div class="buttons">
	<button
	v-show="!editing && editable"
	class="button-default btn"
	@click="startEditing"
	>
	{{ $t('user_card.edit_note') }}
	</button>
	<button
	v-show="editing"
	class="button-default btn"
	:disabled="frozen"
	@click="finalizeEditing"
	>
	{{ $t('user_card.edit_note_apply') }}
	</button>
	<button
	v-show="editing"
	class="button-default btn"
	:disabled="frozen"
	@click="cancelEditing"
	>
	{{ $t('user_card.edit_note_cancel') }}
	</button>
	</div>
	</div>
	<textarea
	v-show="editing"
	v-model="localNote"
	class="input note-text"
	/>
	<span
	v-show="!editing"
	class="note-text"
	:class="{ '-blank': !relationship.note }"
	>
	{{ relationship.note \|\| $t('user_card.note_blank') }}
	</span>
	</div>
	</template>

	<script src="./user_note.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.user-note {
	display: flex;
	flex-direction: column;

	.heading {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.75em;

	.btn {
	min-width: 95px;
	}

	.buttons {
	display: flex;
	flex-direction: row;
	justify-content: right;

	.btn {
	margin-left: 0.5em;
	}
	}
	}

	.note-text {
	align-self: stretch;
	}

	.note-text.-blank {
	font-style: italic;
	- color: var(--faint, $fallback--faint);
	+ color: var(--textFaint);
	}
	}
	</style>
	diff --git a/src/components/user_popover/user_popover.vue b/src/components/user_popover/user_popover.vue
	index 3b2bbc452e..413b254ccb 100644
	--- a/src/components/user_popover/user_popover.vue
	+++ b/src/components/user_popover/user_popover.vue
	@@ -1,35 +1,33 @@
	<template>
	<Popover
	trigger="click"
	popover-class="popover-default user-popover"
	:overlay-centers-selector="overlayCentersSelector \|\| '.user-info .Avatar'"
	:overlay-centers="overlayCenters && userPopoverOverlay"
	:disabled="disabled"
	>
	<template #trigger>
	<slot />
	</template>
	<template #content="{close}">
	<UserCard
	class="user-popover"
	:user-id="userId"
	:hide-bio="true"
	:avatar-action="userPopoverAvatarAction == 'close' ? close : userPopoverAvatarAction"
	:on-close="close"
	/>
	</template>
	</Popover>
	</template>

	<script src="./user_popover.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	/* popover styles load on-demand, so we need to override */
	/* stylelint-disable block-no-empty */
	.user-popover.popover {
	}
	/* stylelint-enable block-no-empty */

	</style>
	diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
	index 2d8b33e763..514776ca56 100644
	--- a/src/components/user_profile/user_profile.vue
	+++ b/src/components/user_profile/user_profile.vue
	@@ -1,239 +1,237 @@
	<template>
	<div>
	<div
	v-if="user"
	class="user-profile panel panel-default"
	>
	<div class="panel-body">
	<UserCard
	:user-id="userId"
	:switcher="true"
	:selected="timeline.viewing"
	avatar-action="zoom"
	rounded="top"
	:has-note-editor="true"
	/>
	<span
	v-if="!!user.birthday"
	class="user-birthday"
	>
	<FAIcon
	class="fa-old-padding"
	icon="birthday-cake"
	/>
	{{ $t('user_card.birthday', { birthday: formattedBirthday }) }}
	</span>
	<div
	v-if="user.fields_html && user.fields_html.length > 0"
	class="user-profile-fields"
	>
	<dl
	v-for="(field, index) in user.fields_html"
	:key="index"
	class="user-profile-field"
	>
	<dt
	:title="user.fields_text[index].name"
	class="user-profile-field-name"
	>
	<RichContent
	:html="field.name"
	:emoji="user.emoji"
	/>
	</dt>
	<dd
	:title="user.fields_text[index].value"
	class="user-profile-field-value"
	>
	<RichContent
	:html="field.value"
	:emoji="user.emoji"
	/>
	</dd>
	</dl>
	</div>
	</div>
	<tab-switcher
	:active-tab="tab"
	:render-only-focused="true"
	:on-switch="onTabSwitch"
	>
	<Timeline
	key="statuses"
	:label="$t('user_card.statuses')"
	:count="user.statuses_count"
	:embedded="true"
	:title="$t('user_profile.timeline_title')"
	:timeline="timeline"
	timeline-name="user"
	:user-id="userId"
	:pinned-status-ids="user.pinnedStatusIds"
	:in-profile="true"
	:footer-slipgate="footerRef"
	/>
	<div
	v-if="followsTabVisible"
	key="followees"
	:label="$t('user_card.followees')"
	:disabled="!user.friends_count"
	>
	<FriendList :user-id="userId" :non-interactive="true">
	<template #item="{item}">
	<FollowCard :user="item" />
	</template>
	</FriendList>
	</div>
	<div
	v-if="followersTabVisible"
	key="followers"
	:label="$t('user_card.followers')"
	:disabled="!user.followers_count"
	>
	<FollowerList :user-id="userId" :non-interactive="true">
	<template #item="{item}">
	<FollowCard
	:user="item"
	:no-follows-you="isUs"
	/>
	</template>
	</FollowerList>
	</div>
	<Timeline
	key="media"
	:label="$t('user_card.media')"
	:disabled="!media.visibleStatuses.length"
	:embedded="true"
	:title="$t('user_card.media')"
	timeline-name="media"
	:timeline="media"
	:user-id="userId"
	:in-profile="true"
	:footer-slipgate="footerRef"
	/>
	<Timeline
	v-if="favoritesTabVisible"
	key="favorites"
	:label="$t('user_card.favorites')"
	:disabled="!favorites.visibleStatuses.length"
	:embedded="true"
	:title="$t('user_card.favorites')"
	timeline-name="favorites"
	:timeline="favorites"
	:user-id="userId"
	:in-profile="true"
	:footer-slipgate="footerRef"
	/>
	</tab-switcher>
	<div
	:ref="setFooterRef"
	class="panel-footer"
	/>
	</div>
	<div
	v-else
	class="panel user-profile-placeholder"
	>
	<div class="panel-heading">
	<div class="title">
	{{ $t('settings.profile_tab') }}
	</div>
	</div>
	<div>
	<span v-if="error">{{ error }}</span>
	<FAIcon
	v-else
	spin
	icon="circle-notch"
	/>
	</div>
	</div>
	</div>
	</template>

	<script src="./user_profile.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.user-profile {
	flex: 2;
	flex-basis: 500px;

	// No sticky header on user profile
	--currentPanelStack: 1;

	.tab-switcher .tabs {
	background: var(--__panel-background);
	backdrop-filter: var(--__panel-backdrop-filter);
	}

	.user-birthday {
	margin: 0 0.75em 0.5em;
	}

	.user-profile-fields {
	margin: 0 0.5em;

	img {
	object-fit: contain;
	vertical-align: middle;
	max-width: 100%;
	max-height: 400px;

	&.emoji {
	width: 18px;
	height: 18px;
	}
	}

	.user-profile-field {
	display: flex;
	margin: 0.25em;
	border: 1px solid var(--border);
	border-radius: var(--roundness);

	.user-profile-field-name {
	flex: 0 1 30%;
	font-weight: 500;
	text-align: right;
	color: var(--lightText);
	min-width: 120px;
	border-right: 1px solid var(--border);
	}

	.user-profile-field-value {
	flex: 1 1 70%;
	color: var(--text);
	margin: 0 0 0 0.25em;
	}

	.user-profile-field-name,
	.user-profile-field-value {
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	padding: 0.5em 1.5em;
	box-sizing: border-box;
	}
	}
	}

	.userlist-placeholder {
	display: flex;
	justify-content: center;
	align-items: middle;
	padding: 2em;
	}
	}

	.user-profile-placeholder {
	.panel-body {
	display: flex;
	justify-content: center;
	align-items: middle;
	padding: 7em;
	}
	}

	</style>
	diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
	index 4b37ff60a8..2bda509a48 100644
	--- a/src/components/user_reporting_modal/user_reporting_modal.vue
	+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
	@@ -1,174 +1,170 @@
	<template>
	<Modal
	v-if="isOpen"
	@backdropClicked="closeModal"
	>
	<div class="user-reporting-panel panel">
	<div class="panel-heading">
	<i18n-t
	tag="div"
	keypath="user_reporting.title"
	class="title"
	>
	<UserLink :user="user" />
	</i18n-t>
	</div>
	<div class="panel-body">
	<div class="user-reporting-panel-left">
	<div>
	<p>{{ $t('user_reporting.add_comment_description') }}</p>
	<textarea
	v-model="comment"
	class="input form-control"
	:placeholder="$t('user_reporting.additional_comments')"
	rows="1"
	@input="resize"
	/>
	</div>
	<div v-if="!user.is_local">
	<p>{{ $t('user_reporting.forward_description') }}</p>
	<Checkbox v-model="forward">
	{{ $t('user_reporting.forward_to', [remoteInstance]) }}
	</Checkbox>
	</div>
	<div>
	<button
	class="btn button-default"
	:disabled="processing"
	@click="reportUser"
	>
	{{ $t('user_reporting.submit') }}
	</button>
	<div
	v-if="error"
	class="alert error"
	>
	{{ $t('user_reporting.generic_error') }}
	</div>
	</div>
	</div>
	<div class="user-reporting-panel-right">
	<List :items="statuses">
	<template #item="{item}">
	<div class="status-fadein user-reporting-panel-sitem">
	<Status
	:in-conversation="false"
	:focused="false"
	:statusoid="item"
	/>
	<Checkbox
	:model-value="isChecked(item.id)"
	@update:model-value="checked => toggleStatus(checked, item.id)"
	/>
	</div>
	</template>
	</List>
	</div>
	</div>
	</div>
	</Modal>
	</template>

	<script src="./user_reporting_modal.js"></script>

	<style lang="scss">
	-@import "../../variables";
	-
	.user-reporting-panel {
	width: 90vw;
	max-width: 700px;
	min-height: 20vh;
	max-height: 80vh;

	.panel-body {
	display: flex;
	flex-direction: column-reverse;
	border-top: 1px solid;
	- border-color: $fallback--border;
	- border-color: var(--border, $fallback--border);
	+ border-color: var(--border);
	overflow: hidden;
	}

	&-left {
	padding: 1.1em 0.7em 0.7em;
	line-height: var(--post-line-height);
	box-sizing: border-box;

	> div {
	margin-bottom: 1em;

	&:last-child {
	margin-bottom: 0;
	}
	}

	p {
	margin-top: 0;
	}

	textarea.form-control {
	line-height: 16px;
	resize: none;
	overflow: hidden;
	transition: min-height 200ms 100ms;
	min-height: 44px;
	width: 100%;
	}

	.btn {
	min-width: 10em;
	padding: 0 2em;
	}

	.alert {
	margin: 1em 0 0;
	line-height: 1.3em;
	}
	}

	&-right {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
	}

	&-sitem {
	display: flex;
	justify-content: space-between;

	/* TODO cleanup this */
	> .Status {
	flex: 1;
	}

	> .checkbox {
	margin: 0.75em;
	}
	}

	@media all and (min-width: 801px) {
	.panel-body {
	flex-direction: row;
	}

	&-left {
	width: 50%;
	max-width: 320px;
	border-right: 1px solid;
	- border-color: $fallback--border;
	- border-color: var(--border, $fallback--border);
	+ border-color: var(--border);
	padding: 1.1em;

	> div {
	margin-bottom: 2em;
	}
	}

	&-right {
	width: 50%;
	flex: 1 1 auto;
	margin-bottom: 12px;
	}
	}
	}
	</style>
	diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss
	index bad852f4b6..524e4012f3 100644
	--- a/src/hocs/with_load_more/with_load_more.scss
	+++ b/src/hocs/with_load_more/with_load_more.scss
	@@ -1,19 +1,16 @@
	-@import "../../variables";
	-
	.with-load-more {
	&-footer {
	padding: 10px;
	text-align: center;
	border-top: 1px solid;
	- border-top-color: $fallback--border;
	- border-top-color: var(--border, $fallback--border);
	+ border-top-color: var(--border);

	.error {
	font-size: 1rem;
	}

	a {
	cursor: pointer;
	}
	}
	}

File Metadata

Mime Type: text/x-diff
Expires: Sun, Nov 1, 8:10 AM (11 h, 32 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1802858
Default Alt Text: (299 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions