No OneTemporary
Actions

Size

81 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.scss b/src/App.scss
	index 8efa132829..e4cfb561d9 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,828 +1,831 @@
	// 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(--interfaceFont, sans-serif);
	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(--btn) transparent;

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

	&::-webkit-scrollbar-button,
	&::-webkit-scrollbar-thumb {
	background-color: var(--btn);
	box-shadow: var(--buttonShadow);
	border-radius: var(--btnRadius);
	}

	// 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(--btnText);
	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(--btnText) 50%, transparent 51%),
	linear-gradient(-45deg, transparent 50%, var(--btnText) 51%);
	background-position: top var(--___bgPadding) left 50%, right 50% bottom var(--___bgPadding);
	}

	&:decrement {
	background-image:
	linear-gradient(45deg, transparent 50%, var(--btnText) 51%),
	linear-gradient(-45deg, var(--btnText) 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(--btnText) 51%),
	linear-gradient(45deg, transparent 50%, var(--btnText) 51%);
	background-position: right var(--___bgPadding) top 50%, left var(--___bgPadding) top 50%;
	}

	&:decrement {
	background-image:
	linear-gradient(-45deg, var(--btnText) 50%, transparent 51%),
	linear-gradient(45deg, var(--btnText) 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(--selectedMenu) 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);
	background-color: $fallback--fg;
	background-color: var(--topBar, $fallback--fg);
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	box-shadow: 0 0 4px rgb(0 0 0 / 60%);
	box-shadow: var(--topBarShadow);
	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(--interfaceFont, sans-serif);

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

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

	.menu-item {
	border: none;
	outline: none;
	text-align: initial;
	font-size: inherit;
	font-family: inherit;
	cursor: pointer;
	color: inherit;
	+ position: relative;
	+ border-bottom: 1px solid;
	+ border-color: var(--border);

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

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

	.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 {
	color: var(--link);
	}

	&.-fullwidth {
	width: 100%;
	}
	}

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

	.input {
	&.unstyled {
	border-radius: 0;
	background: none;
	box-shadow: none;
	height: unset;
	}

	--_padding: 0.5em;

	border: none;
	border-radius: var(--roundness);
	box-shadow: var(--shadow);
	font-family: sans-serif;
	font-family: var(--inputFont, sans-serif);
	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: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset;
	box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset;
	background-color: var(--accent, $fallback--link);
	}

	&: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: 0 0 2px black inset;
	box-shadow: var(--inputShadow);
	margin-right: 0.5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	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 {
	padding: var(--_padding);
	line-height: var(--post-line-height);
	}

	option {
	color: var(--text);
	background-color: var(--bg, $fallback--bg);
	}

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

	&.badge-notification {
	background-color: $fallback--cRed;
	background-color: var(--badgeNotification, $fallback--cRed);
	color: white;
	color: var(--badgeNotificationText, white);
	}
	}

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

	&.error {
	background-color: $fallback--alertError;
	background-color: var(--alertError, $fallback--alertError);
	color: $fallback--text;
	color: var(--alertErrorText, $fallback--text);

	.panel-heading & {
	color: $fallback--text;
	color: var(--alertErrorPanelText, $fallback--text);
	}
	}

	&.warning {
	background-color: $fallback--alertWarning;
	background-color: var(--alertWarning, $fallback--alertWarning);
	color: $fallback--text;
	color: var(--alertWarningText, $fallback--text);

	.panel-heading & {
	color: $fallback--text;
	color: var(--alertWarningPanelText, $fallback--text);
	}
	}

	&.success {
	background-color: var(--alertSuccess, $fallback--alertWarning);
	color: var(--alertSuccessText, $fallback--text);

	.panel-heading & {
	color: var(--alertSuccessPanelText, $fallback--text);
	}
	}
	}

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

	color: var(--text);
	}

	.visibility-notice {
	padding: 0.5em;
	border: 1px solid $fallback--faint;
	border: 1px solid var(--faint, $fallback--faint);
	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;
	}
	}

	.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/components/attachment/attachment.scss b/src/components/attachment/attachment.scss
	index 681bab291a..b1a3fa5ee5 100644
	--- a/src/components/attachment/attachment.scss
	+++ b/src/components/attachment/attachment.scss
	@@ -1,275 +1,273 @@
	@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: $fallback--attachmentRadius;
	- border-radius: var(--attachmentRadius, $fallback--attachmentRadius);
	- border-color: $fallback--border;
	- border-color: var(--border, $fallback--border);
	+ 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;
	}
	}

	.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);
	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);
	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/chat_list_item/chat_list_item.scss b/src/components/chat_list_item/chat_list_item.scss
	index 3a84672bd4..af28e1c01d 100644
	--- a/src/components/chat_list_item/chat_list_item.scss
	+++ b/src/components/chat_list_item/chat_list_item.scss
	@@ -1,90 +1,85 @@
	.chat-list-item {
	display: flex;
	flex-direction: row;
	padding: 0.75em;
	height: 5em;
	overflow: hidden;
	box-sizing: border-box;
	cursor: pointer;

	:focus {
	outline: none;
	}

	&:hover {
	background-color: var(--selectedPost, $fallback--lightBg);
	box-shadow: 0 0 3px 1px rgb(0 0 0 / 10%);
	}

	.chat-list-item-left {
	margin-right: 1em;
	}

	.chat-list-item-center {
	width: 100%;
	box-sizing: border-box;
	overflow: hidden;
	word-wrap: break-word;
	}

	.heading {
	width: 100%;
	display: inline-flex;
	justify-content: space-between;
	line-height: 1em;
	}

	.heading-right {
	white-space: nowrap;
	}

	.name-and-account-name {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
	flex-shrink: 1;
	line-height: var(--post-line-height);
	}

	.chat-preview {
	display: inline-flex;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	margin: 0.35em 0;
	color: $fallback--text;
	color: var(--faint, $fallback--text);
	width: 100%;
	}

	a {
	color: var(--faintLink, $fallback--link);
	text-decoration: none;
	pointer-events: none;
	}

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

	img {
	visibility: visible;
	}
	}

	- .Avatar {
	- border-radius: $fallback--avatarAltRadius;
	- border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	- }
	-
	.chat-preview-body {
	--emoji-size: 1.4em;

	padding-right: 1em;
	}

	.time-wrapper {
	line-height: var(--post-line-height);
	}
	}
	diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue
	index 7577129e24..aa5d041c72 100644
	--- a/src/components/conversation/conversation.vue
	+++ b/src/components/conversation/conversation.vue
	@@ -1,289 +1,289 @@
	<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 panel-body">
	<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 panel-body"

	: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 panel-body"

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

	.thread-ancestor.-faded .StatusContent {
	--link: var(--faintLink);
	--text: var(--faint);

	color: var(--text);
	}

	.thread-ancestor-dive-box {
	padding-left: var(--status-margin, $status-margin);
	border-bottom: 1px solid var(--border, $fallback--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);
	}

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

	.thread-ancestor-has-other-replies .conversation-status,
	&:last-child .conversation-status,
	.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);
	}

	/* expanded conversation in timeline */
	&.status-fadein.-expanded .thread-body {
	- border-left: 4px solid $fallback--cRed;
	- border-left-color: var(--cRed, $fallback--cRed);
	- border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	- border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	- border-bottom: 1px solid var(--border, $fallback--border);
	+ 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 {
	margin: calc(var(--status-margin, $status-margin) / 2);
	}
	}
	</style>
	diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue
	index a07a8795d3..074d9f83ff 100644
	--- a/src/components/nav_panel/nav_panel.vue
	+++ b/src/components/nav_panel/nav_panel.vue
	@@ -1,169 +1,146 @@
	<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"
	: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"
	:class="{ expanded: showTimelines }"
	>
	<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;
	}

	- li {
	- position: relative;
	- border-bottom: 1px solid;
	- border-color: $fallback--border;
	- border-color: var(--border, $fallback--border);
	- }
	-
	- > li {
	- &:first-child.menu-item {
	- border-top-right-radius: var(--roundness);
	- border-top-left-radius: var(--roundness);
	- }
	-
	- &:last-child.menu-item {
	- border-bottom-right-radius: var(--roundness);
	- border-bottom-left-radius: var(--roundness);
	- }
	- }
	-
	- li:last-child {
	- border: none;
	- }
	-
	.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;
	}

	.timelines-background.expanded + .NavigationEntry {
	border-top: 1px solid;
	border-color: var(--border);
	}

	.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/poll/poll.vue b/src/components/poll/poll.vue
	index 1d01f941e5..087822e1f9 100644
	--- a/src/components/poll/poll.vue
	+++ b/src/components/poll/poll.vue
	@@ -1,181 +1,176 @@
	<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)"
	>
	<!-- TODO: USE CHECKBOX -->
	<input
	v-if="poll.multiple"
	type="checkbox"
	class="input poll-checkbox"
	:disabled="loading"
	:value="index"
	>
	<input
	v-else
	type="radio"
	:disabled="loading"
	:value="index"
	class="input"
	>
	<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);
	}

	.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;
	- color: $fallback--text;
	- color: var(--pollText, $fallback--text);
	- background-color: $fallback--lightBg;
	- background-color: var(--poll, $fallback--lightBg);
	- border-radius: $fallback--panelRadius;
	- border-radius: var(--panelRadius, $fallback--panelRadius);
	+ 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/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
	index a53000839b..1ece3c4251 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,623 +1,622 @@
	<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="form-post-subject"
	+ 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="form-post-body"
	+ 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);
	}

	.preview-status {
	border: 1px solid $fallback--border;
	border: 1px solid var(--border, $fallback--border);
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	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);
	}
	}

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

	- .form-post-body {
	+ .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;
	- text: inherit;
	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);
	}
	}

	@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);
	}
	}
	</style>
	diff --git a/src/components/report/report.scss b/src/components/report/report.scss
	index 9762400b15..1fe11fd907 100644
	--- a/src/components/report/report.scss
	+++ b/src/components/report/report.scss
	@@ -1,43 +1,39 @@
	@import "../../variables";

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

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

	.reported-status {
	- border: 1px solid $fallback--faint;
	- border-color: var(--faint, $fallback--faint);
	- border-radius: $fallback--inputRadius;
	- border-radius: var(--inputRadius, $fallback--inputRadius);
	- color: $fallback--text;
	- color: var(--text, $fallback--text);
	+ 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/settings_modal/tabs/profile_tab.scss b/src/components/settings_modal/tabs/profile_tab.scss
	index efc5233526..52ae6c8baf 100644
	--- a/src/components/settings_modal/tabs/profile_tab.scss
	+++ b/src/components/settings_modal/tabs/profile_tab.scss
	@@ -1,136 +1,135 @@
	@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: $fallback--tooltipRadius;
	- border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	+ 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/theme_tab/theme_tab.scss b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	index 9935c2e769..246f9a1310 100644
	--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.scss
	@@ -1,352 +1,350 @@
	@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);
	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;
	- border-radius: $fallback--avatarAltRadius;
	- border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	}

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

	.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);
	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/timeline_menu/timeline_menu.vue b/src/components/timeline_menu/timeline_menu.vue
	index 5f1da1f775..9173921655 100644
	--- a/src/components/timeline_menu/timeline_menu.vue
	+++ b/src/components/timeline_menu/timeline_menu.vue
	@@ -1,171 +1,110 @@
	<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;
	}
	-
	- a {
	- display: block;
	- padding: 0 0.65em;
	- height: 3.5em;
	- line-height: 3.5em;
	-
	- &:hover {
	- background-color: $fallback--lightBg;
	- background-color: var(--selectedMenu, $fallback--lightBg);
	- color: $fallback--link;
	- color: var(--selectedMenuText, $fallback--link);
	-
	- --faint: var(--selectedMenuFaintText, $fallback--faint);
	- --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
	- --lightText: var(--selectedMenuLightText, $fallback--lightText);
	- --icon: var(--selectedMenuIcon, $fallback--icon);
	- }
	-
	- &.router-link-active {
	- font-weight: bolder;
	- background-color: $fallback--lightBg;
	- background-color: var(--selectedMenu, $fallback--lightBg);
	- color: $fallback--text;
	- color: var(--selectedMenuText, $fallback--text);
	-
	- --faint: var(--selectedMenuFaintText, $fallback--faint);
	- --faintLink: var(--selectedMenuFaintLink, $fallback--faint);
	- --lightText: var(--selectedMenuLightText, $fallback--lightText);
	- --icon: var(--selectedMenuIcon, $fallback--icon);
	-
	- &:hover {
	- text-decoration: underline;
	- }
	- }
	-
	- svg {
	- margin-right: 0.4em;
	- margin-left: -0.2em;
	- }
	- }
	-
	- li {
	- border-bottom: 1px solid;
	- border-color: $fallback--border;
	- border-color: var(--border, $fallback--border);
	- padding: 0;
	-
	- &:last-child a {
	- border-bottom-right-radius: $fallback--panelRadius;
	- border-bottom-right-radius: var(--panelRadius, $fallback--panelRadius);
	- border-bottom-left-radius: $fallback--panelRadius;
	- border-bottom-left-radius: var(--panelRadius, $fallback--panelRadius);
	- }
	-
	- &:last-child {
	- border: none;
	- }
	- }
	}

	.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 {
	- color: $fallback--text;
	- color: var(--panelText, $fallback--text);
	transform: rotate(180deg);
	}

	.panel {
	box-shadow: var(--popoverShadow);
	}
	}
	</style>
	diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue
	index c63a303cdb..46aef99037 100644
	--- a/src/components/user_profile/user_profile.vue
	+++ b/src/components/user_profile/user_profile.vue
	@@ -1,231 +1,230 @@
	<template>
	<div>
	<div
	v-if="user"
	class="user-profile panel panel-default"
	>
	<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>
	<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">
	<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">
	<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="isUs"
	key="favorites"
	:label="$t('user_card.favorites')"
	:disabled="!favorites.visibleStatuses.length"
	:embedded="true"
	:title="$t('user_card.favorites')"
	timeline-name="favorites"
	:timeline="favorites"
	: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 class="panel-body">
	<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;

	.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, $fallback--border);
	- border-radius: $fallback--inputRadius;
	- border-radius: var(--inputRadius, $fallback--inputRadius);
	+ 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, $fallback--border);
	+ 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>

File Metadata

Mime Type: text/x-diff
Expires: Mon, Oct 12, 1:17 PM (1 d, 14 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1786237
Default Alt Text: (81 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions