No OneTemporary
Actions

Authored By

Unknown

Size

78 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.scss b/src/App.scss
	index 78a3494c7b..be6929f695 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,1094 +1,1094 @@
	// stylelint-disable rscss/class-format
	/* stylelint-disable no-descending-specificity */
	@use "panel";

	@import '@fortawesome/fontawesome-svg-core/styles.css';
	@import '@kazvmoe-infra/pinch-zoom-element/dist/pinch-zoom.css';

	:root {
	--status-margin: 0.75em;
	--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;

	// Fallback for when stuff is loading
	--background: var(--bg);
	}

	html {
	font-size: var(--textSize, 14px);

	--navbar-height: var(--navbarSize, 3.5rem);
	--emoji-size: var(--emojiSize, 32px);
	--panel-header-height: var(--panelHeaderSize, 3.2rem);
	// overflow-x: clip causes my browser's tab to crash with SIGILL lul
	}

	body {
	font-family: sans-serif;
	font-family: var(--font);
	margin: 0;
	padding: 0;
	color: var(--text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overscroll-behavior-y: none;
	overflow: clip 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);
	font-size: calc(var(--navbar-height) / 3.5);
	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: 1rem;
	--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;
	place-content: flex-start center;
	flex-wrap: wrap;
	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: hidden auto;
	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;
	cursor: pointer;
	background-color: var(--background);
	box-shadow: var(--shadow);
	font-size: 1em;
	font-family: sans-serif;
	font-family: var(--font);

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

	&:disabled {
	cursor: not-allowed;
	}

	&:active {
	transform: translate(1px, 1px);
	}
	}

	.menu-item {
	line-height: var(--__line-height);
	font-family: inherit;
	font-weight: 400;
	font-size: 100%;
	cursor: pointer;

	a,
	button:not(.button-default) {
	color: var(--text);
	font-size: 100%;
	}

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

	.list-item {
	border-color: var(--border);
	border-style: solid;
	border-width: 0;
	border-top-width: 1px;

	&.-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;
	}

	&: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;
	}
	}

	.menu-item,
	.list-item {
	display: block;
	box-sizing: border-box;
	border: none;
	outline: none;
	text-align: initial;
	color: inherit;
	clear: both;
	position: relative;
	white-space: nowrap;
	width: 100%;
	padding: var(--__vertical-gap) var(--__horizontal-gap);
	background: transparent;

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

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

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

	.button-unstyled {
	border: none;
	outline: none;
	display: inline;
	text-align: initial;
	font-size: 100%;
	font-family: inherit;
	box-shadow: var(--shadow);
	background-color: transparent;
	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;
	}

	&::placeholder {
	color: var(--textFaint)
	}

	--_padding: 0.5em;

	border: none;
	background-color: var(--background);
	color: var(--text);
	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;
	}
	}

	.input,
	.button-default {
	--_roundness-left: var(--roundness);
	--_roundness-right: var(--roundness);

	border-top-left-radius: var(--_roundness-left);
	border-bottom-left-radius: var(--_roundness-left);
	border-top-right-radius: var(--_roundness-right);
	border-bottom-right-radius: var(--_roundness-right);
	}

	// 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-group {
	position: relative;
	display: inline-flex;
	vertical-align: middle;

	> *,
	> * .button-default {
	--_roundness-left: 0;
	--_roundness-right: 0;

	position: relative;
	flex: 1 1 auto;
	}

	> *:first-child,
	> *:first-child .button-default {
	--_roundness-left: var(--roundness);
	}

	> *:last-child,
	> *:last-child .button-default {
	--_roundness-right: var(--roundness);
	}
	}

	.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;
	+ min-height: 0.6em;
	+ max-height: 0.6em;
	+ min-width: 0.6em;
	+ max-width: 0.6em;
	padding: 0;
	line-height: 0;
	font-size: 0;
	- left: calc(50% - 4px);
	- top: calc(50% - 4px);
	- margin-left: 6px;
	- margin-top: -6px;
	+ left: calc(50% - 0.6em);
	+ top: calc(50% - 0.6em);
	+ margin-left: 0.4em;
	+ margin-top: -0.4em;
	}

	&.-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);
	}

	.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 (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 (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;
	}

	*::selection {
	color: var(--selectionText);
	background-color: var(--selectionBackground);
	}

	#splash {
	pointer-events: none;
	// transition: opacity 0.5s;

	#status {
	&.css-ok {
	&::before {
	display: inline-block;
	content: "CSS OK";
	}
	}

	.initial-text {
	display: none;
	}
	}

	#throbber {
	animation-duration: 3s;
	animation-name: bounce;
	animation-iteration-count: infinite;
	animation-direction: normal;
	transform-origin: bottom center;

	&.dead {
	animation-name: dead;
	animation-duration: 0.5s;
	animation-iteration-count: 1;
	transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
	}

	@keyframes dead {
	0% {
	transform: rotateX(0) rotateY(0) rotateZ(0);
	}

	5% {
	transform: rotateX(0) rotateY(0) rotateZ(1deg);
	}

	10% {
	transform: rotateX(0) rotateY(0) rotateZ(-2deg);
	}

	15% {
	transform: rotateX(0) rotateY(0) rotateZ(3deg);
	}

	20% {
	transform: rotateX(0) rotateY(0) rotateZ(0);
	}

	25% {
	transform: rotateX(0) rotateY(0) rotateZ(0);
	}

	30% {
	transform: rotateX(10deg) rotateY(0) rotateZ(0);
	}

	35% {
	transform: rotateX(-10deg) rotateY(0) rotateZ(0);
	}

	40% {
	transform: rotateX(10deg) rotateY(0) rotateZ(0);
	}

	45% {
	transform: rotateX(-10deg) rotateY(0) rotateZ(0);
	}

	50% {
	transform: rotateX(10deg) rotateY(0) rotateZ(0);
	}

	100% {
	transform: rotateX(90deg) rotateY(0) rotateZ(-45deg);
	transition-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06); /* easeInQuint */
	}
	}

	@keyframes bounce {
	0% {
	scale: 1 1;
	translate: 0 0;
	animation-timing-function: ease-out;
	}

	10% {
	scale: 1.2 0.8;
	translate: 0 0;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-out;
	}

	30% {
	scale: 0.9 1.1;
	translate: 0 -40%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in;
	}

	40% {
	scale: 1.1 0.9;
	translate: 0 -50%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in;
	}

	45% {
	scale: 0.9 1.1;
	translate: 0 -45%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in;
	}

	50% {
	scale: 1.05 0.95;
	translate: 0 -40%;
	animation-timing-function: ease-in;
	}

	55% {
	scale: 0.985 1.025;
	translate: 0 -35%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in;
	}

	60% {
	scale: 1.0125 0.9985;
	translate: 0 -30%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in;
	}

	80% {
	scale: 1.0063 0.9938;
	translate: 0 -10%;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-in-out;
	}

	90% {
	scale: 1.2 0.8;
	translate: 0 0;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-out;
	}

	100% {
	scale: 1 1;
	translate: 0 0;
	transform: rotateZ(var(--defaultZ));
	animation-timing-function: ease-out;
	}
	}
	}
	}

	@property --shadow {
	syntax: "*";
	inherits: false;
	}
	diff --git a/src/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
	index 16346c97c8..97515eb32c 100644
	--- a/src/components/attachment/attachment.scss
	+++ b/src/components/attachment/attachment.scss
	@@ -1,267 +1,267 @@
	.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);
	+ font-size: 4.5em;
	+ top: calc(50% - 2.25rem);
	+ left: calc(50% - 2.25rem);
	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: var(--roundness);
	text-align: center;
	width: 2em;
	height: 2em;
	margin-left: 0.5em;
	font-size: 1.25em;
	}
	}

	&.-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;
	overflow-wrap: break-word;
	text-wrap: pretty;

	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: 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/gallery/gallery.vue b/src/components/gallery/gallery.vue
	index 7209e91447..eb1054df60 100644
	--- a/src/components/gallery/gallery.vue
	+++ b/src/components/gallery/gallery.vue
	@@ -1,193 +1,193 @@
	<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)"
	@set-media="onMedia"
	@natural-size-load="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">
	.Gallery {
	.gallery-rows {
	display: flex;
	flex-direction: column;
	}

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

	.gallery-row-inner {
	position: absolute;
	inset: 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;
	+ height: 15em;
	}
	}
	}

	&.-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 */
	/* stylelint-disable mask-composite */
	/* stylelint-disable declaration-property-value-no-unknown */
	/* stylelint-disable scss/declaration-property-value-no-unknown */

	/* TODO check if this is still needed */
	mask-composite: xor;
	/* stylelint-enable scss/declaration-property-value-no-unknown */
	/* stylelint-enable declaration-property-value-no-unknown */
	/* stylelint-enable mask-composite */
	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/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue
	index 5cc8c50a38..7f625755c1 100644
	--- a/src/components/media_modal/media_modal.vue
	+++ b/src/components/media_modal/media_modal.vue
	@@ -1,294 +1,294 @@
	<template>
	<Modal
	v-if="showing"
	class="media-modal-view"
	@backdrop-clicked="hideIfNotSwiped"
	>
	<SwipeClick
	v-if="type === 'image'"
	ref="swipeClick"
	class="modal-image-container"
	:direction="swipeDirection"
	:threshold="swipeThreshold"
	:disable-click-threshold="swipeDisableClickThreshold"
	@preview-requested="handleSwipePreview"
	@swipe-finished="handleSwipeEnd"
	@swipeless-clicked="hide"
	>
	<PinchZoom
	ref="pinchZoom"
	class="modal-image-container-inner"
	selector=".modal-image"
	reach-min-scale-strategy="reset"
	stop-propagate-handled="stop-propgate-handled"
	:allow-pan-min-scale="pinchZoomMinScale"
	:min-scale="pinchZoomMinScale"
	:reset-to-min-scale-limit="pinchZoomScaleResetLimit"
	>
	<img
	:class="{ loading }"
	class="modal-image"
	:src="currentMedia.url"
	:alt="currentMedia.description"
	:title="currentMedia.description"
	@load="onImageLoaded"
	>
	</PinchZoom>
	</SwipeClick>
	<VideoAttachment
	v-if="type === 'video'"
	class="modal-image"
	:attachment="currentMedia"
	:controls="true"
	/>
	<audio
	v-if="type === 'audio'"
	class="modal-image"
	:src="currentMedia.url"
	:alt="currentMedia.description"
	:title="currentMedia.description"
	controls
	/>
	<Flash
	v-if="type === 'flash'"
	class="modal-image"
	:src="currentMedia.url"
	:alt="currentMedia.description"
	:title="currentMedia.description"
	/>
	<button
	v-if="canNavigate"
	:title="$t('media_modal.previous')"
	class="modal-view-button modal-view-button-arrow modal-view-button-arrow--prev"
	@click.stop.prevent="goPrev"
	>
	<FAIcon
	class="button-icon arrow-icon"
	icon="chevron-left"
	/>
	</button>
	<button
	v-if="canNavigate"
	:title="$t('media_modal.next')"
	class="modal-view-button modal-view-button-arrow modal-view-button-arrow--next"
	@click.stop.prevent="goNext"
	>
	<FAIcon
	class="button-icon arrow-icon"
	icon="chevron-right"
	/>
	</button>
	<button
	class="modal-view-button modal-view-button-hide"
	:title="$t('media_modal.hide')"
	@click.stop.prevent="hide"
	>
	<FAIcon
	class="button-icon"
	icon="times"
	/>
	</button>

	<span
	v-if="description"
	class="description"
	>
	{{ description }}
	</span>
	<span
	class="counter"
	>
	{{ $t('media_modal.counter', { current: currentIndex + 1, total: media.length }, currentIndex + 1) }}
	</span>
	<span
	v-if="loading"
	class="loading-spinner"
	>
	<FAIcon
	spin
	icon="circle-notch"
	size="5x"
	/>
	</span>
	</Modal>
	</template>

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

	<style lang="scss">
	$modal-view-button-icon-height: 3em;
	$modal-view-button-icon-half-height: calc(#{$modal-view-button-icon-height} / 2);
	$modal-view-button-icon-width: 3em;
	$modal-view-button-icon-margin: 0.5em;

	.media-modal-view {
	@keyframes media-fadein {
	from {
	opacity: 0;
	}

	to {
	opacity: 1;
	}
	}

	.modal-image-container {
	display: flex;
	overflow: hidden;
	align-items: center;
	flex-direction: column;
	max-width: 100%;
	max-height: 100%;
	width: 100%;
	height: 100%;
	flex-grow: 1;
	justify-content: center;

	&-inner {
	width: 100%;
	height: 100%;
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	}
	}

	.description,
	.counter {
	/* Hardcoded since background is also hardcoded */
	color: white;
	margin-top: 1em;
	text-shadow: 0 0 10px black, 0 0 10px black;
	padding: 0.2em 2em;
	}

	.description {
	flex: 0 0 auto;
	overflow-y: auto;
	min-height: 1em;
	- max-width: 500px;
	+ max-width: 35.8em;
	max-height: 9.5em;
	overflow-wrap: break-word;
	text-wrap: pretty;
	}

	.modal-image {
	max-width: 100%;
	max-height: 100%;
	image-orientation: from-image; // NOTE: only FF supports this
	animation: 0.1s cubic-bezier(0.7, 0, 1, 0.6) media-fadein;

	&.loading {
	opacity: 0.5;
	}
	}

	.loading-spinner {
	width: 100%;
	height: 100%;
	position: absolute;
	pointer-events: none;
	display: flex;
	justify-content: center;
	align-items: center;

	svg {
	color: white;
	}
	}

	.modal-view-button {
	border: 0;
	padding: 0;
	opacity: 0;
	box-shadow: none;
	background: none;
	appearance: none;
	overflow: visible;
	cursor: pointer;
	transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1);
	height: $modal-view-button-icon-height;
	width: $modal-view-button-icon-width;

	.button-icon {
	position: absolute;
	height: $modal-view-button-icon-height;
	width: $modal-view-button-icon-width;
	font-size: 1rem;
	line-height: $modal-view-button-icon-height;
	color: #fff;
	text-align: center;
	background-color: rgb(0 0 0 / 30%);
	}
	}

	.modal-view-button-arrow {
	position: absolute;
	display: block;
	top: 50%;
	margin-top: $modal-view-button-icon-half-height;
	width: $modal-view-button-icon-width;
	height: $modal-view-button-icon-height;

	.arrow-icon {
	position: absolute;
	top: 0;
	line-height: $modal-view-button-icon-height;
	color: #fff;
	text-align: center;
	background-color: rgb(0 0 0 / 30%);
	}

	&--prev {
	left: 0;

	.arrow-icon {
	left: $modal-view-button-icon-margin;
	}
	}

	&--next {
	right: 0;

	.arrow-icon {
	right: $modal-view-button-icon-margin;
	}
	}
	}

	.modal-view-button-hide {
	position: absolute;
	top: 0;
	right: 0;

	.button-icon {
	top: $modal-view-button-icon-margin;
	right: $modal-view-button-icon-margin;
	}
	}
	}

	.modal-view.media-modal-view {
	z-index: var(--ZI_media_modal);
	flex-direction: column;

	.modal-view-button-arrow,
	.modal-view-button-hide {
	opacity: 0.75;

	&:focus,
	&:hover {
	outline: none;
	box-shadow: none;
	}

	&:hover {
	opacity: 1;
	}
	}

	overflow: hidden;
	}
	</style>
	diff --git a/src/components/mention_link/mention_link.scss b/src/components/mention_link/mention_link.scss
	index c3261e17d5..3aa7816be3 100644
	--- a/src/components/mention_link/mention_link.scss
	+++ b/src/components/mention_link/mention_link.scss
	@@ -1,111 +1,110 @@
	.MentionLink {
	position: relative;
	white-space: normal;
	display: inline;
	word-break: normal;

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

	.mention-avatar {
	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%;
	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(--selectionText);
	--link: 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(--linkFaint);
	}
	}

	.mention-link-popover {
	max-width: 70ch;
	max-height: 20rem;
	overflow: hidden;
	}
	diff --git a/src/components/mrf_transparency_panel/mrf_transparency_panel.scss b/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
	index a262ed1c58..8e2fa553a7 100644
	--- a/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
	+++ b/src/components/mrf_transparency_panel/mrf_transparency_panel.scss
	@@ -1,23 +1,23 @@
	.mrf-section {
	margin: 1em;

	table {
	width: 100%;
	text-align: left;
	- padding-left: 10px;
	- padding-bottom: 20px;
	+ padding-left: 0.5em;
	+ padding-bottom: 1.1em;

	th,
	td {
	- width: 180px;
	- max-width: 360px;
	+ width: 11em;
	+ max-width: 25em;
	overflow: hidden;
	vertical-align: text-top;
	}

	th + th,
	td + td {
	width: auto;
	}
	}
	}
	diff --git a/src/components/settings_modal/helpers/emoji_editing_popover.vue b/src/components/settings_modal/helpers/emoji_editing_popover.vue
	index 1cca45fbf9..33c52da4de 100644
	--- a/src/components/settings_modal/helpers/emoji_editing_popover.vue
	+++ b/src/components/settings_modal/helpers/emoji_editing_popover.vue
	@@ -1,236 +1,236 @@
	<template>
	<Popover
	ref="emojiPopover"
	trigger="click"
	:placement="placement"
	bound-to-selector=".emoji-list"
	popover-class="emoji-tab-edit-popover popover-default"
	:bound-to="{ x: 'container' }"
	:offset="{ y: 5 }"
	:disabled="disabled"
	:class="{'emoji-unsaved': isEdited}"
	>
	<template #trigger>
	<slot name="trigger" />
	</template>
	<template #content>
	<h3>
	{{ title }}
	</h3>

	<StillImage
	v-if="emojiPreview"
	class="emoji"
	:src="emojiPreview"
	/>
	<div
	v-else
	class="emoji"
	/>

	<div
	v-if="newUpload"
	class="emoji-tab-popover-input"
	>
	<input
	type="file"
	accept="image/*"
	class="emoji-tab-popover-file input"
	@change="uploadFile = $event.target.files"
	>
	</div>
	<div>
	<div class="emoji-tab-popover-input">
	<label>
	{{ $t('admin_dash.emoji.shortcode') }}
	<input
	v-model="editedShortcode"
	class="emoji-data-input input"
	:placeholder="$t('admin_dash.emoji.new_shortcode')"
	>
	</label>
	</div>

	<div class="emoji-tab-popover-input">
	<label>
	{{ $t('admin_dash.emoji.filename') }}

	<input
	v-model="editedFile"
	class="emoji-data-input input"
	:placeholder="$t('admin_dash.emoji.new_filename')"
	>
	</label>
	</div>

	<button
	class="button button-default btn"
	type="button"
	:disabled="newUpload ? uploadFile.length == 0 : !isEdited"
	@click="newUpload ? uploadEmoji() : saveEditedEmoji()"
	>
	{{ $t('admin_dash.emoji.save') }}
	</button>

	<template v-if="!newUpload">
	<button
	class="button button-default btn emoji-tab-popover-button"
	type="button"
	@click="deleteModalVisible = true"
	>
	{{ $t('admin_dash.emoji.delete') }}
	</button>
	<button
	class="button button-default btn emoji-tab-popover-button"
	type="button"
	@click="revertEmoji"
	>
	{{ $t('admin_dash.emoji.revert') }}
	</button>
	<ConfirmModal
	v-if="deleteModalVisible"
	:title="$t('admin_dash.emoji.delete_title')"
	:cancel-text="$t('status.delete_confirm_cancel_button')"
	:confirm-text="$t('status.delete_confirm_accept_button')"
	@cancelled="deleteModalVisible = false"
	@accepted="deleteEmoji"
	>
	{{ $t('admin_dash.emoji.delete_confirm', [shortcode]) }}
	</ConfirmModal>
	</template>
	</div>
	</template>
	</Popover>
	</template>

	<script>
	import Popover from 'components/popover/popover.vue'
	import ConfirmModal from 'components/confirm_modal/confirm_modal.vue'
	import StillImage from 'components/still-image/still-image.vue'

	export default {
	components: { Popover, ConfirmModal, StillImage },
	inject: ['emojiAddr'],
	props: {
	placement: {
	type: String,
	required: true
	},
	disabled: {
	type: Boolean,
	default: false
	},

	newUpload: Boolean,

	title: {
	type: String,
	required: true
	},
	packName: {
	type: String,
	required: true
	},
	shortcode: {
	type: String,
	// Only exists when this is not a new upload
	default: ''
	},
	file: {
	type: String,
	// Only exists when this is not a new upload
	default: ''
	}
	},
	emits: ['updatePackFiles', 'displayError'],
	data () {
	return {
	uploadFile: [],
	editedShortcode: this.shortcode,
	editedFile: this.file,
	deleteModalVisible: false
	}
	},
	computed: {
	emojiPreview () {
	if (this.newUpload && this.uploadFile.length > 0) {
	return URL.createObjectURL(this.uploadFile[0])
	} else if (!this.newUpload) {
	return this.emojiAddr(this.file)
	}

	return null
	},
	isEdited () {
	return !this.newUpload && (this.editedShortcode !== this.shortcode \|\| this.editedFile !== this.file)
	}
	},
	methods: {
	saveEditedEmoji () {
	if (!this.isEdited) return

	this.$store.state.api.backendInteractor.updateEmojiFile(
	{ packName: this.packName, shortcode: this.shortcode, newShortcode: this.editedShortcode, newFilename: this.editedFile, force: false }
	).then(resp => {
	if (resp.error !== undefined) {
	this.$emit('displayError', resp.error)
	return Promise.reject(resp.error)
	}

	return resp.json()
	}).then(resp => this.$emit('updatePackFiles', resp))
	},
	uploadEmoji () {
	this.$store.state.api.backendInteractor.addNewEmojiFile({
	packName: this.packName,
	file: this.uploadFile[0],
	shortcode: this.editedShortcode,
	filename: this.editedFile
	}).then(resp => resp.json()).then(resp => {
	if (resp.error !== undefined) {
	this.$emit('displayError', resp.error)
	return
	}

	this.$emit('updatePackFiles', resp)
	this.$refs.emojiPopover.hidePopover()

	this.editedFile = ''
	this.editedShortcode = ''
	this.uploadFile = []
	})
	},
	revertEmoji () {
	this.editedFile = this.file
	this.editedShortcode = this.shortcode
	},
	deleteEmoji () {
	this.deleteModalVisible = false

	this.$store.state.api.backendInteractor.deleteEmojiFile(
	{ packName: this.packName, shortcode: this.shortcode }
	).then(resp => resp.json()).then(resp => {
	if (resp.error !== undefined) {
	this.$emit('displayError', resp.error)
	return
	}

	this.$emit('updatePackFiles', resp)
	})
	}
	}
	}
	</script>

	<style lang="scss">
	.emoji-tab-edit-popover {
	padding-left: 0.5em;
	padding-right: 0.5em;
	padding-bottom: 0.5em;

	.emoji {
	- width: 32px;
	- height: 32px;
	+ width: 2.3em;
	+ height: 2.3em;
	}
	}
	</style>
	diff --git a/src/components/settings_modal/tabs/security_tab/mfa.vue b/src/components/settings_modal/tabs/security_tab/mfa.vue
	index 9421b16ee9..7e825062f4 100644
	--- a/src/components/settings_modal/tabs/security_tab/mfa.vue
	+++ b/src/components/settings_modal/tabs/security_tab/mfa.vue
	@@ -1,175 +1,181 @@
	<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">
	.mfa-settings {
	.mfa-heading,
	.method-item {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: baseline;
	}

	.warning {
	color: var(--cOrange);
	}

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

	.qr-code {
	flex: 1;
	- padding-right: 10px;
	+ padding-right: 0.7em;
	+ }
	+
	+ .verify {
	+ flex: 1;
	+ }
	+
	+ .error {
	+ margin: 0.3em 0 0;
	}
	- .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/theme_tab/theme_preview.vue b/src/components/settings_modal/tabs/theme_tab/theme_preview.vue
	index e8ac0d8a34..016d84c49a 100644
	--- a/src/components/settings_modal/tabs/theme_tab/theme_preview.vue
	+++ b/src/components/settings_modal/tabs/theme_tab/theme_preview.vue
	@@ -1,247 +1,249 @@
	<template>
	<div class="theme-preview-container">
	<div class="underlay underlay-preview" />
	<div class="panel dummy">
	<div class="panel-heading">
	<h1 class="title">
	{{ $t('settings.style.preview.header') }}
	<span class="badge -notification">
	99
	</span>
	</h1>
	<span class="faint">
	{{ $t('settings.style.preview.header_faint') }}
	</span>
	<span class="alert error">
	{{ $t('settings.style.preview.error') }}
	</span>
	<button class="btn button-default">
	{{ $t('settings.style.preview.button') }}
	</button>
	</div>
	<div class="panel-body theme-preview-content">
	<div class="post">
	- <div class="avatar still-image">
	+ <div class="avatar still-image" aria-hidden="true">
	( ͡° ͜ʖ ͡°)
	</div>
	<div class="content">
	<h4>
	{{ $t('settings.style.preview.content') }}
	</h4>

	<i18n-t
	scope="global"
	keypath="settings.style.preview.text"
	>
	<code style="font-family: var(--postCodeFont);">
	{{ $t('settings.style.preview.mono') }}
	</code>
	<a style="color: var(--link);">
	{{ $t('settings.style.preview.link') }}
	</a>
	</i18n-t>

	<div class="icons">
	<FAIcon
	fixed-width
	style="color: var(--cBlue);"
	class="fa-scale-110 fa-old-padding"
	icon="reply"
	/>
	<FAIcon
	fixed-width
	style="color: var(--cGreen);"
	class="fa-scale-110 fa-old-padding"
	icon="retweet"
	/>
	<FAIcon
	fixed-width
	style="color: var(--cOrange);"
	class="fa-scale-110 fa-old-padding"
	icon="star"
	/>
	<FAIcon
	fixed-width
	style="color: var(--cRed);"
	class="fa-scale-110 fa-old-padding"
	icon="times"
	/>
	</div>
	</div>
	</div>

	<div class="after-post">
	- <div class="avatar-alt">
	+ <div class="avatar-alt" aria-hidden="true">
	:^)
	</div>
	<div class="content">
	<i18n-t
	keypath="settings.style.preview.fine_print"
	tag="span"
	class="faint"
	scope="global"
	>
	<a style="color: var(--linkFaint);">
	{{ $t('settings.style.preview.faint_link') }}
	</a>
	</i18n-t>
	</div>
	</div>
	<div class="separator" />

	<span class="alert error">
	{{ $t('settings.style.preview.error') }}
	</span>
	<input
	:value="$t('settings.style.preview.input')"
	type="text"
	class="input"
	>

	<div class="actions">
	<Checkbox>
	{{ $t('settings.style.preview.checkbox') }}
	</Checkbox>
	<button class="btn button-default">
	{{ $t('settings.style.preview.button') }}
	</button>
	</div>
	</div>
	</div>
	</div>
	</template>

	<script>
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faTimes,
	faStar,
	faRetweet,
	faReply
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faTimes,
	faStar,
	faRetweet,
	faReply
	)

	export default {
	components: {
	Checkbox
	}
	}
	</script>

	<style lang="scss">
	.theme-preview-container {
	position: relative;
	border-top: 1px dashed;
	border-bottom: 1px dashed;
	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%;

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

	.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;
	+ margin-left: 2em;
	+ font-size: 0.85em;
	+ min-width: 2.2rem;
	+ min-height: 2.2rem;
	+ line-height: 1.5em;
	+ align-content: center;
	}

	.avatar {
	flex: 0 auto;
	- width: 48px;
	- height: 48px;
	- font-size: 14px;
	- line-height: 48px;
	+ width: 3.5em;
	+ height: 3.5em;
	+ font-size: 1rem;
	+ line-height: 3.5em;
	+ justify-content: center;
	}

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

	.checkbox {
	margin-right: 1em;
	flex: 1;
	}
	}

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

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

	.underlay-preview {
	position: absolute;
	- inset: 0 10px;
	+ inset: 0 0.9em;
	}
	}
	</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 d83beffa06..ae2364dccf 100644
	--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	@@ -1,257 +1,257 @@
	.theme-tab {
	min-width: var(--themeEditorMinWidth, fit-content);

	.deprecation-warning {
	padding: 0.5em;
	margin: 2em;
	}

	padding-bottom: 2em;

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

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

	.btn-group .btn {
	margin: 0;
	}

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

	.label {
	margin-right: 1em;
	flex: 1;
	line-height: 2;
	}

	.opt {
	margin: 0.5em;
	}

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

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

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

	&.-small {
	min-width: 5em;
	}
	}

	&[type="range"] {
	flex: 1;
	min-width: 9em;
	align-self: center;
	margin: 0 0.5em;
	}

	&[type="checkbox"] + i {
	height: 1.1em;
	align-self: center;
	}
	}
	}

	.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;
	+ min-height: 2.1em;
	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%;
	}
	}

	.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(--textFaint);
	align-self: stretch;
	}

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

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

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

	.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 1b2b591c20..184fe81e0b 100644
	--- a/src/components/shout_panel/shout_panel.vue
	+++ b/src/components/shout_panel/shout_panel.vue
	@@ -1,151 +1,151 @@
	<template>
	<div
	v-if="!collapsed \|\| !floating"
	class="shout-panel"
	>
	<div class="panel panel-default">
	<div
	class="panel-heading"
	:class="{ 'shout-heading': floating }"
	@click.stop.prevent="togglePanel"
	>
	<h1 class="title">
	{{ $t('shoutbox.title') }}
	<FAIcon
	v-if="floating"
	icon="times"
	class="close-icon"
	/>
	</h1>
	</div>
	<div class="panel-body 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="panel-body shout-input">
	<textarea
	v-model="currentMessage"
	class="shout-input-textarea input"
	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">
	.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: var(--text);
	margin-right: 0.5em;
	}

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

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

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

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

	.shout-avatar {
	img {
	- height: 24px;
	- width: 24px;
	+ height: 0.6em;
	+ width: 0.6em;
	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/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss
	index 60413c5f43..b7274d86d6 100644
	--- a/src/components/tab_switcher/tab_switcher.scss
	+++ b/src/components/tab_switcher/tab_switcher.scss
	@@ -1,250 +1,250 @@
	/* 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: auto hidden;
	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: calc(6px - 99px);
	}
	}

	.contents.scrollable-tabs {
	flex-basis: 0;
	}
	}

	&.side-tabs {
	flex-direction: row;

	@media all and (width <= 800px) {
	overflow-x: auto;
	}

	> .contents {
	flex: 1 1 auto;
	}

	> .tabs {
	flex: 0 0 auto;
	overflow: hidden auto;
	flex-direction: column;

	&::after,
	&::before {
	flex-shrink: 0;
	flex-basis: 0.5em;
	content: "";
	border-right: 1px solid;
	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 (width <= 800px) {
	min-width: 4em;
	}

	&:not(.active)::after {
	top: 0;
	right: 0;
	bottom: 0;
	border-right: 1px solid;
	border-right-color: var(--border);
	}

	&::before {
	flex: 0 0 6px;
	content: "";
	border-right: 1px solid;
	border-right-color: var(--border);
	}

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

	.tab {
	flex: 1;
	box-sizing: content-box;
	max-width: 9em;
	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;

	&:not(.active) {
	margin-top: 0;
	margin-left: 1.5em;
	}

	@media all and (width <= 800px) {
	padding-left: 0.25em;
	padding-right: calc(0.25em + 200px);
	margin-right: calc(0.25em - 200px);
	margin-left: 0.25em;

	&:not(.active) {
	margin-top: 0;
	margin-left: 0.5em;
	}

	.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);
	background-color: var(--background);
	position: relative;
	white-space: nowrap;
	padding: 6px 1em;

	&:not(.active) {
	z-index: 4;
	margin-top: 0.25em;

	&:hover {
	z-index: 6;
	}
	}

	&.active {
	background: transparent;
	z-index: 5;
	}

	img {
	- max-height: 26px;
	+ max-height: 1.9em;
	vertical-align: top;
	- margin-top: -5px;
	+ margin-top: -0.3em;
	}
	}

	.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);

	@media all and (width >= 800px) {
	display: none;
	}
	}
	}
	/* stylelint-enable no-descending-specificity */
	diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue
	index 0e93824b72..dbd7e7e564 100644
	--- a/src/components/user_reporting_modal/user_reporting_modal.vue
	+++ b/src/components/user_reporting_modal/user_reporting_modal.vue
	@@ -1,170 +1,174 @@
	<template>
	<Modal
	v-if="isOpen"
	@backdrop-clicked="closeModal"
	>
	<div class="user-reporting-panel panel">
	<div class="panel-heading">
	<i18n-t
	tag="h1"
	keypath="user_reporting.title"
	class="title"
	>
	- <UserLink :user="user" />
	+ <UserLink class="user-link" :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">
	.user-reporting-panel {
	width: 90vw;
	- max-width: 700px;
	+ max-width: 50rem;
	min-height: 20vh;
	max-height: 80vh;

	+ .user-link {
	+ display: inline
	+ }
	+
	.panel-body {
	display: flex;
	flex-direction: column-reverse;
	border-top: 1px solid;
	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;
	+ line-height: 1.1;
	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 (width >= 801px) {
	.panel-body {
	flex-direction: row;
	}

	&-left {
	width: 50%;
	max-width: 320px;
	border-right: 1px solid;
	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 524e4012f3..6b007ac2e1 100644
	--- a/src/hocs/with_load_more/with_load_more.scss
	+++ b/src/hocs/with_load_more/with_load_more.scss
	@@ -1,16 +1,16 @@
	.with-load-more {
	&-footer {
	- padding: 10px;
	+ padding: 0.9em;
	text-align: center;
	border-top: 1px solid;
	border-top-color: var(--border);

	.error {
	font-size: 1rem;
	}

	a {
	cursor: pointer;
	}
	}
	}
	diff --git a/src/hocs/with_subscription/with_subscription.scss b/src/hocs/with_subscription/with_subscription.scss
	index 996045b439..8c0af336c6 100644
	--- a/src/hocs/with_subscription/with_subscription.scss
	+++ b/src/hocs/with_subscription/with_subscription.scss
	@@ -1,10 +1,10 @@
	.with-subscription {
	&-loading {
	- padding: 10px;
	+ padding: 0.7em;
	text-align: center;

	.error {
	font-size: 1rem;
	}
	}
	}

File Metadata

Mime Type: text/x-diff
Expires: Sun, Nov 1, 2:39 AM (18 h, 2 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1802264
Default Alt Text: (78 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions