No OneTemporary
Actions

Size

193 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.scss b/src/App.scss
	index 7cb92fc9fe..45071ba2a4 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,930 +1,887 @@
	@import './_variables.scss';

	#app {
	min-height: 100vh;
	max-width: 100%;
	overflow: hidden;
	}

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

	i[class^='icon-'] {
	user-select: none;
	}

	h4 {
	margin: 0;
	}

	#content {
	box-sizing: border-box;
	padding-top: 60px;
	margin: auto;
	min-height: 100vh;
	max-width: 980px;
	align-content: flex-start;
	}

	.underlay {
	background-color: rgba(0,0,0,0.15);
	background-color: var(--underlay, rgba(0,0,0,0.15));
	}

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

	html {
	font-size: 14px;
	}

	body {
	overscroll-behavior-y: none;
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);
	margin: 0;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	max-width: 100vw;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;

	&.hidden {
	display: none;
	}
	}

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

	.button-default {
	user-select: none;
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btn, $fallback--fg);
	border: none;
	border-radius: $fallback--btnRadius;
	border-radius: var(--btnRadius, $fallback--btnRadius);
	cursor: pointer;
	box-shadow: $fallback--buttonShadow;
	box-shadow: var(--buttonShadow);
	font-size: 14px;
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);

	i[class*=icon-],
	.svg-inline--fa {
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	}

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

	&:hover {
	box-shadow: 0px 0px 4px rgba(255, 255, 255, 0.3);
	box-shadow: var(--buttonHoverShadow);
	}

	&:active {
	box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
	box-shadow: var(--buttonPressedShadow);
	color: $fallback--text;
	color: var(--btnPressedText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btnPressed, $fallback--fg);

	svg,
	i {
	color: $fallback--text;
	color: var(--btnPressedText, $fallback--text);
	}
	}

	&:disabled {
	cursor: not-allowed;
	color: $fallback--text;
	color: var(--btnDisabledText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btnDisabled, $fallback--fg);

	svg,
	i {
	color: $fallback--text;
	color: var(--btnDisabledText, $fallback--text);
	}
	}

	&.toggled {
	color: $fallback--text;
	color: var(--btnToggledText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btnToggled, $fallback--fg);
	box-shadow: 0px 0px 4px 0px rgba(255, 255, 255, 0.3), 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset;
	box-shadow: var(--buttonPressedShadow);

	svg,
	i {
	color: $fallback--text;
	color: var(--btnToggledText, $fallback--text);
	}
	}

	&.danger {
	// TODO: add better color variable
	color: $fallback--text;
	color: var(--alertErrorPanelText, $fallback--text);
	background-color: $fallback--alertError;
	background-color: var(--alertError, $fallback--alertError);
	}
	}

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

	&.-link {
	color: $fallback--link;
	color: var(--link, $fallback--link);
	}

	&.-fullwidth {
	width: 100%;
	}

	&.-hover-highlight {
	&:hover svg {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}
	}

	-input, textarea, .select, .input {
	+input, textarea, .input {

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

	border: none;
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2) inset, 0px -1px 0px 0px rgba(255, 255, 255, 0.2) inset, 0px 0px 2px 0px rgba(0, 0, 0, 1) inset;
	box-shadow: var(--inputShadow);
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	color: $fallback--lightText;
	color: var(--inputText, $fallback--lightText);
	font-family: sans-serif;
	font-family: var(--inputFont, sans-serif);
	font-size: 14px;
	margin: 0;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	height: 28px;
	line-height: 16px;
	hyphens: none;
	padding: 8px .5em;

	- &.select {
	- padding: 0;
	- }
	-
	- &:disabled, &[disabled=disabled] {
	+ &:disabled, &[disabled=disabled], &.disabled {
	cursor: not-allowed;
	opacity: 0.5;
	}

	- .select-down-icon {
	- position: absolute;
	- top: 0;
	- bottom: 0;
	- right: 5px;
	- height: 100%;
	- color: $fallback--text;
	- color: var(--inputText, $fallback--text);
	- line-height: 28px;
	- z-index: 0;
	- pointer-events: none;
	- }
	-
	- select {
	- -webkit-appearance: none;
	- -moz-appearance: none;
	- appearance: none;
	- background: transparent;
	- border: none;
	- color: $fallback--text;
	- color: var(--inputText, --text, $fallback--text);
	- margin: 0;
	- padding: 0 2em 0 .2em;
	- font-family: sans-serif;
	- font-family: var(--inputFont, sans-serif);
	- font-size: 14px;
	- width: 100%;
	- z-index: 1;
	- height: 28px;
	- line-height: 16px;
	- }
	-
	&[type=range] {
	background: none;
	border: none;
	margin: 0;
	box-shadow: none;
	flex: 1;
	}

	&[type=radio] {
	display: none;
	&:checked + label::before {
	box-shadow: 0px 0px 2px black inset, 0px 0px 0px 4px $fallback--fg inset;
	box-shadow: var(--inputShadow), 0px 0px 0px 4px var(--fg, $fallback--fg) inset;
	background-color: var(--accent, $fallback--link);
	}
	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: .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
	box-shadow: 0px 0px 2px black inset;
	box-shadow: var(--inputShadow);
	margin-right: .5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}
	}

	&[type=checkbox] {
	display: none;
	&:checked + label::before {
	color: $fallback--text;
	color: var(--inputText, $fallback--text);
	}
	&:disabled {
	&,
	& + label,
	& + label::before {
	opacity: .5;
	}
	}
	+ label::before {
	flex-shrink: 0;
	display: inline-block;
	content: '✓';
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: $fallback--checkboxRadius;
	border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
	box-shadow: 0px 0px 2px black inset;
	box-shadow: var(--inputShadow);
	margin-right: .5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	line-height: 1.1em;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	box-sizing: border-box;
	}
	}

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

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

	.hide-number-spinner {
	-moz-appearance: textfield;
	&[type=number]::-webkit-inner-spin-button,
	&[type=number]::-webkit-outer-spin-button {
	opacity: 0;
	display: none;
	}
	}

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

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

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

	button {
	position: relative;
	flex: 1 1 auto;

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

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

	.container {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0 10px 0 10px;
	}

	.auto-size {
	flex: 1
	}

	main-router {
	flex: 1;
	}

	.status.compact {
	color: rgba(0, 0, 0, 0.42);
	font-weight: 300;

	p {
	margin: 0;
	font-size: 0.8em
	}
	}

	/* Panel */

	.panel {
	display: flex;
	position: relative;

	flex-direction: column;
	margin: 0.5em;

	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);

	&::after, & {
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}

	&::after {
	content: '';
	position: absolute;

	top: 0;
	bottom: 0;
	left: 0;
	right: 0;

	pointer-events: none;

	box-shadow: 1px 1px 4px rgba(0,0,0,.6);
	box-shadow: var(--panelShadow);
	}
	}

	.panel-body:empty::before {
	content: "¯\\_(ツ)_/¯"; // Could use words but it'd require translations
	display: block;
	margin: 1em;
	text-align: center;
	}

	.panel-heading {
	display: flex;
	flex: none;
	border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
	border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
	background-size: cover;
	padding: .6em .6em;
	text-align: left;
	line-height: 28px;
	color: var(--panelText);
	background-color: $fallback--fg;
	background-color: var(--panel, $fallback--fg);
	align-items: baseline;
	box-shadow: var(--panelHeaderShadow);

	.title {
	flex: 1 0 auto;
	font-size: 1.3em;
	}

	.faint {
	background-color: transparent;
	color: $fallback--faint;
	color: var(--panelFaint, $fallback--faint);
	}

	.faint-link {
	color: $fallback--faint;
	color: var(--faintLink, $fallback--faint);
	}

	.alert {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow-x: hidden;
	}

	.button-default,
	.alert {
	// height: 100%;
	line-height: 21px;
	min-height: 0;
	box-sizing: border-box;
	margin: 0;
	margin-left: .5em;
	min-width: 1px;
	align-self: stretch;
	}

	.button-default {
	flex-shrink: 0;

	&,
	i[class*=icon-] {
	color: $fallback--text;
	color: var(--btnPanelText, $fallback--text);
	}

	&:active {
	background-color: $fallback--fg;
	background-color: var(--btnPressedPanel, $fallback--fg);
	color: $fallback--text;
	color: var(--btnPressedPanelText, $fallback--text);
	}

	&:disabled {
	color: $fallback--text;
	color: var(--btnDisabledPanelText, $fallback--text);
	}

	&.toggled {
	color: $fallback--text;
	color: var(--btnToggledPanelText, $fallback--text);
	}
	}

	a,
	.-link {
	color: $fallback--link;
	color: var(--panelLink, $fallback--link)
	}
	}

	.panel-heading.stub {
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}

	/* TODO Should remove timeline-footer from here when we refactor panels into
	* separate component and utilize slots
	*/
	.panel-footer, .timeline-footer {
	display: flex;
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	flex: none;
	padding: 0.6em 0.6em;
	text-align: left;
	line-height: 28px;
	align-items: baseline;
	border-width: 1px 0 0 0;
	border-style: solid;
	border-color: var(--border, $fallback--border);

	.faint {
	color: $fallback--faint;
	color: var(--panelFaint, $fallback--faint);
	}

	a,
	.-link {
	color: $fallback--link;
	color: var(--panelLink, $fallback--link);
	}
	}

	.panel-body > p {
	line-height: 18px;
	padding: 1em;
	margin: 0;
	}

	.container > * {
	min-width: 0px;
	}

	.fa {
	color: grey;
	}

	nav {
	z-index: 1000;
	color: var(--topBarText);
	background-color: $fallback--fg;
	background-color: var(--topBar, $fallback--fg);
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	box-shadow: 0px 0px 4px rgba(0,0,0,.6);
	box-shadow: var(--topBarShadow);
	box-sizing: border-box;
	}

	.fade-enter-active, .fade-leave-active {
	transition: opacity .2s
	}
	.fade-enter, .fade-leave-active {
	opacity: 0
	}

	.main {
	flex-basis: 50%;
	flex-grow: 1;
	flex-shrink: 1;
	}

	.sidebar-bounds {
	flex: 0;
	flex-basis: 35%;
	}

	.sidebar-flexer {
	flex: 1;
	flex-basis: 345px;
	width: 365px;
	}

	.mobile-shown {
	display: none;
	}

	@media all and (min-width: 800px) {
	body {
	overflow-y: scroll;
	}

	.sidebar-bounds {
	overflow: hidden;
	max-height: 100vh;
	width: 345px;
	position: fixed;
	margin-top: -10px;

	.sidebar-scroller {
	height: 96vh;
	width: 365px;
	padding-top: 10px;
	padding-right: 50px;
	overflow-x: hidden;
	overflow-y: scroll;
	}

	.sidebar {
	width: 345px;
	}
	}
	.sidebar-flexer {
	max-height: 96vh;
	flex-shrink: 0;
	flex-grow: 0;
	}
	}

	.badge {
	box-sizing: border-box;
	display: inline-block;
	border-radius: 99px;
	max-width: 10em;
	min-width: 1.7em;
	height: 1.3em;
	padding: 0.15em 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.35em;
	padding: 0.25em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	min-height: 28px;
	line-height: 28px;

	&.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 {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	}

	.faint-link {
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);

	&:hover {
	text-decoration: underline;
	}
	}

	.visibility-notice {
	padding: .5em;
	border: 1px solid $fallback--faint;
	border: 1px solid var(--faint, $fallback--faint);
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	}

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

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

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

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

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

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

	.panel-switcher {
	display: flex;
	}

	.container {
	padding: 0;
	}

	.panel {
	margin: 0.5em 0 0.5em 0;
	}

	.menu-button {
	display: block;
	margin-right: 0.8em;
	}

	.main {
	margin-bottom: 7em;
	}
	}

	-.select-multiple {
	- display: flex;
	- .option-list {
	- margin: 0;
	- padding-left: .5em;
	- }
	-}
	.setting-list,
	.option-list{
	list-style-type: none;
	padding-left: 2em;
	li {
	margin-bottom: 0.5em;
	}
	.suboptions {
	margin-top: 0.3em
	}
	}

	.login-hint {
	text-align: center;

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

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

	.btn.button-default {
	min-height: 28px;
	}

	.animate-spin {
	animation: spin 2s infinite linear;
	display: inline-block;
	}

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

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

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

	.chat-layout {
	// Needed for smoother chat navigation in the desktop Safari (otherwise the chat layout "jumps" as the chat opens).
	overflow: hidden;
	height: 100%;

	// Get rid of scrollbar on body as scrolling happens on different element
	body {
	overflow: hidden;
	}

	// Ensures the fixed position of the mobile browser bars on scroll up / down events.
	// Prevents the mobile browser bars from overlapping or hiding the message posting form.
	@media all and (max-width: 800px) {
	body {
	height: 100%;
	}

	#app {
	height: 100%;
	overflow: hidden;
	min-height: auto;
	}

	#app_bg_wrapper {
	overflow: hidden;
	}

	.main {
	overflow: hidden;
	height: 100%;
	}

	#content {
	padding-top: 0;
	height: 100%;
	overflow: visible;
	}
	}
	}
	diff --git a/src/components/font_control/font_control.js b/src/components/font_control/font_control.js
	index 6274780b86..137ef9c0ba 100644
	--- a/src/components/font_control/font_control.js
	+++ b/src/components/font_control/font_control.js
	@@ -1,66 +1,62 @@
	import { set } from 'vue'
	-import { library } from '@fortawesome/fontawesome-svg-core'
	-import {
	- faChevronDown
	-} from '@fortawesome/free-solid-svg-icons'
	-
	-library.add(
	- faChevronDown
	-)
	+import Select from '../select/select.vue'

	export default {
	+ components: {
	+ Select
	+ },
	props: [
	'name', 'label', 'value', 'fallback', 'options', 'no-inherit'
	],
	data () {
	return {
	lValue: this.value,
	availableOptions: [
	this.noInherit ? '' : 'inherit',
	'custom',
	...(this.options \|\| []),
	'serif',
	'monospace',
	'sans-serif'
	].filter(_ => _)
	}
	},
	beforeUpdate () {
	this.lValue = this.value
	},
	computed: {
	present () {
	return typeof this.lValue !== 'undefined'
	},
	dValue () {
	return this.lValue \|\| this.fallback \|\| {}
	},
	family: {
	get () {
	return this.dValue.family
	},
	set (v) {
	set(this.lValue, 'family', v)
	this.$emit('input', this.lValue)
	}
	},
	isCustom () {
	return this.preset === 'custom'
	},
	preset: {
	get () {
	if (this.family === 'serif' \|\|
	this.family === 'sans-serif' \|\|
	this.family === 'monospace' \|\|
	this.family === 'inherit') {
	return this.family
	} else {
	return 'custom'
	}
	},
	set (v) {
	this.family = v === 'custom' ? '' : v
	}
	}
	}
	}
	diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue
	index dd117ec03c..296050841b 100644
	--- a/src/components/font_control/font_control.vue
	+++ b/src/components/font_control/font_control.vue
	@@ -1,78 +1,69 @@
	<template>
	<div
	class="font-control style-control"
	:class="{ custom: isCustom }"
	>
	<label
	:for="preset === 'custom' ? name : name + '-font-switcher'"
	class="label"
	>
	{{ label }}
	</label>
	<input
	v-if="typeof fallback !== 'undefined'"
	:id="name + '-o'"
	class="opt exlcude-disabled"
	type="checkbox"
	:checked="present"
	@input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"
	>
	<label
	v-if="typeof fallback !== 'undefined'"
	class="opt-l"
	:for="name + '-o'"
	/>
	- <label
	- :for="name + '-font-switcher'"
	- class="select"
	+ <Select
	+ :id="name + '-font-switcher'"
	+ v-model="preset"
	:disabled="!present"
	+ class="font-switcher"
	>
	- <select
	- :id="name + '-font-switcher'"
	- v-model="preset"
	- :disabled="!present"
	- class="font-switcher"
	+ <option
	+ v-for="option in availableOptions"
	+ :key="option"
	+ :value="option"
	>
	- <option
	- v-for="option in availableOptions"
	- :key="option"
	- :value="option"
	- >
	- {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
	- </option>
	- </select>
	- <FAIcon
	- class="select-down-icon"
	- icon="chevron-down"
	- />
	- </label>
	+ {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }}
	+ </option>
	+ </Select>
	<input
	v-if="isCustom"
	:id="name"
	v-model="family"
	class="custom-font"
	type="text"
	>
	</div>
	</template>

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

	<style lang="scss">
	@import '../../_variables.scss';
	.font-control {
	input.custom-font {
	min-width: 10em;
	}
	&.custom {
	- .select {
	+ /* TODO Should make proper joiners... */
	+ .font-switcher {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
	}
	.custom-font {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
	}
	}
	}
	</style>
	diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue
	index dc3bd4088c..cf307a24e2 100644
	--- a/src/components/interface_language_switcher/interface_language_switcher.vue
	+++ b/src/components/interface_language_switcher/interface_language_switcher.vue
	@@ -1,71 +1,58 @@
	<template>
	<div>
	<label for="interface-language-switcher">
	{{ $t('settings.interfaceLanguage') }}
	</label>
	- <label
	- for="interface-language-switcher"
	- class="select"
	+ <Select
	+ id="interface-language-switcher"
	+ v-model="language"
	>
	- <select
	- id="interface-language-switcher"
	- v-model="language"
	+ <option
	+ v-for="lang in languages"
	+ :key="lang.code"
	+ :value="lang.code"
	>
	- <option
	- v-for="lang in languages"
	- :key="lang.code"
	- :value="lang.code"
	- >
	- {{ lang.name }}
	- </option>
	- </select>
	- <FAIcon
	- class="select-down-icon"
	- icon="chevron-down"
	- />
	- </label>
	+ {{ lang.name }}
	+ </option>
	+ </Select>
	</div>
	</template>

	<script>
	import languagesObject from '../../i18n/messages'
	import localeService from '../../services/locale/locale.service.js'
	import ISO6391 from 'iso-639-1'
	import _ from 'lodash'
	-import { library } from '@fortawesome/fontawesome-svg-core'
	-import {
	- faChevronDown
	-} from '@fortawesome/free-solid-svg-icons'
	-
	-library.add(
	- faChevronDown
	-)
	+import Select from '../select/select.vue'

	export default {
	+ components: {
	+ Select
	+ },
	computed: {
	languages () {
	return _.map(languagesObject.languages, (code) => ({ code: code, name: this.getLanguageName(code) })).sort((a, b) => a.name.localeCompare(b.name))
	},

	language: {
	get: function () { return this.$store.getters.mergedConfig.interfaceLanguage },
	set: function (val) {
	this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val })
	}
	}
	},

	methods: {
	getLanguageName (code) {
	const specialLanguageNames = {
	'ja_easy': 'やさしいにほんご',
	'zh': '简体中文',
	'zh_Hant': '繁體中文'
	}
	const languageName = specialLanguageNames[code] \|\| ISO6391.getNativeName(code)
	const browserLocale = localeService.internalToBrowserLocale(code)
	return languageName.charAt(0).toLocaleUpperCase(browserLocale) + languageName.slice(1)
	}
	}
	}
	</script>
	diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js
	index 1f8df3f94c..e30645c34e 100644
	--- a/src/components/poll/poll_form.js
	+++ b/src/components/poll/poll_form.js
	@@ -1,134 +1,136 @@
	import * as DateUtils from 'src/services/date_utils/date_utils.js'
	import { uniq } from 'lodash'
	import { library } from '@fortawesome/fontawesome-svg-core'
	+import Select from '../select/select.vue'
	import {
	faTimes,
	- faChevronDown,
	faPlus
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faTimes,
	- faChevronDown,
	faPlus
	)

	export default {
	+ components: {
	+ Select
	+ },
	name: 'PollForm',
	props: ['visible'],
	data: () => ({
	pollType: 'single',
	options: ['', ''],
	expiryAmount: 10,
	expiryUnit: 'minutes'
	}),
	computed: {
	pollLimits () {
	return this.$store.state.instance.pollLimits
	},
	maxOptions () {
	return this.pollLimits.max_options
	},
	maxLength () {
	return this.pollLimits.max_option_chars
	},
	expiryUnits () {
	const allUnits = ['minutes', 'hours', 'days']
	const expiry = this.convertExpiryFromUnit
	return allUnits.filter(
	unit => this.pollLimits.max_expiration >= expiry(unit, 1)
	)
	},
	minExpirationInCurrentUnit () {
	return Math.ceil(
	this.convertExpiryToUnit(
	this.expiryUnit,
	this.pollLimits.min_expiration
	)
	)
	},
	maxExpirationInCurrentUnit () {
	return Math.floor(
	this.convertExpiryToUnit(
	this.expiryUnit,
	this.pollLimits.max_expiration
	)
	)
	}
	},
	methods: {
	clear () {
	this.pollType = 'single'
	this.options = ['', '']
	this.expiryAmount = 10
	this.expiryUnit = 'minutes'
	},
	nextOption (index) {
	const element = this.$el.querySelector(`#poll-${index + 1}`)
	if (element) {
	element.focus()
	} else {
	// Try adding an option and try focusing on it
	const addedOption = this.addOption()
	if (addedOption) {
	this.$nextTick(function () {
	this.nextOption(index)
	})
	}
	}
	},
	addOption () {
	if (this.options.length < this.maxOptions) {
	this.options.push('')
	return true
	}
	return false
	},
	deleteOption (index, event) {
	if (this.options.length > 2) {
	this.options.splice(index, 1)
	this.updatePollToParent()
	}
	},
	convertExpiryToUnit (unit, amount) {
	// Note: we want seconds and not milliseconds
	switch (unit) {
	case 'minutes': return (1000 * amount) / DateUtils.MINUTE
	case 'hours': return (1000 * amount) / DateUtils.HOUR
	case 'days': return (1000 * amount) / DateUtils.DAY
	}
	},
	convertExpiryFromUnit (unit, amount) {
	// Note: we want seconds and not milliseconds
	switch (unit) {
	case 'minutes': return 0.001 * amount * DateUtils.MINUTE
	case 'hours': return 0.001 * amount * DateUtils.HOUR
	case 'days': return 0.001 * amount * DateUtils.DAY
	}
	},
	expiryAmountChange () {
	this.expiryAmount =
	Math.max(this.minExpirationInCurrentUnit, this.expiryAmount)
	this.expiryAmount =
	Math.min(this.maxExpirationInCurrentUnit, this.expiryAmount)
	this.updatePollToParent()
	},
	updatePollToParent () {
	const expiresIn = this.convertExpiryFromUnit(
	this.expiryUnit,
	this.expiryAmount
	)

	const options = uniq(this.options.filter(option => option !== ''))
	if (options.length < 2) {
	this.$emit('update-poll', { error: this.$t('polls.not_enough_options') })
	return
	}
	this.$emit('update-poll', {
	options,
	multiple: this.pollType === 'multiple',
	expiresIn
	})
	}
	}
	}
	diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue
	index c440321052..3620075ab9 100644
	--- a/src/components/poll/poll_form.vue
	+++ b/src/components/poll/poll_form.vue
	@@ -1,173 +1,157 @@
	<template>
	<div
	v-if="visible"
	class="poll-form"
	>
	<div
	v-for="(option, index) in options"
	:key="index"
	class="poll-option"
	>
	<div class="input-container">
	<input
	:id="`poll-${index}`"
	v-model="options[index]"
	size="1"
	class="poll-option-input"
	type="text"
	:placeholder="$t('polls.option')"
	:maxlength="maxLength"
	@change="updatePollToParent"
	@keydown.enter.stop.prevent="nextOption(index)"
	>
	</div>
	<button
	v-if="options.length > 2"
	class="delete-option button-unstyled -hover-highlight"
	@click="deleteOption(index)"
	>
	<FAIcon icon="times" />
	</button>
	</div>
	<button
	v-if="options.length < maxOptions"
	class="add-option faint button-unstyled -hover-highlight"
	@click="addOption"
	>
	<FAIcon
	icon="plus"
	size="sm"
	/>

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

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

	<style lang="scss">
	@import '../../_variables.scss';

	.poll-form {
	display: flex;
	flex-direction: column;
	padding: 0 0.5em 0.5em;

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

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

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

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

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

	.poll-type {
	margin-right: 0.75em;
	flex: 1 1 60%;
	- .select {
	- border: none;
	- box-shadow: none;
	- background-color: transparent;
	+
	+ .poll-type-select {
	padding-right: 0.75em;
	}
	}

	.poll-expiry {
	display: flex;

	.expiry-amount {
	width: 3em;
	text-align: right;
	}
	-
	- .expiry-unit {
	- border: none;
	- box-shadow: none;
	- background-color: transparent;
	- }
	}
	}
	</style>
	diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js
	index e540654be3..5342894fdb 100644
	--- a/src/components/post_status_form/post_status_form.js
	+++ b/src/components/post_status_form/post_status_form.js
	@@ -1,588 +1,588 @@
	import statusPoster from '../../services/status_poster/status_poster.service.js'
	import MediaUpload from '../media_upload/media_upload.vue'
	import ScopeSelector from '../scope_selector/scope_selector.vue'
	import EmojiInput from '../emoji_input/emoji_input.vue'
	import PollForm from '../poll/poll_form.vue'
	import Attachment from '../attachment/attachment.vue'
	import StatusContent from '../status_content/status_content.vue'
	import fileTypeService from '../../services/file_type/file_type.service.js'
	import { findOffset } from '../../services/offset_finder/offset_finder.service.js'
	import { reject, map, uniqBy, debounce } from 'lodash'
	import suggestor from '../emoji_input/suggestor.js'
	import { mapGetters, mapState } from 'vuex'
	import Checkbox from '../checkbox/checkbox.vue'
	+import Select from '../select/select.vue'

	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	- faChevronDown,
	faSmileBeam,
	faPollH,
	faUpload,
	faBan,
	faTimes,
	faCircleNotch
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	- faChevronDown,
	faSmileBeam,
	faPollH,
	faUpload,
	faBan,
	faTimes,
	faCircleNotch
	)

	const buildMentionsString = ({ user, attentions = [] }, currentUser) => {
	let allAttentions = [...attentions]

	allAttentions.unshift(user)

	allAttentions = uniqBy(allAttentions, 'id')
	allAttentions = reject(allAttentions, { id: currentUser.id })

	let mentions = map(allAttentions, (attention) => {
	return `@${attention.screen_name}`
	})

	return mentions.length > 0 ? mentions.join(' ') + ' ' : ''
	}

	// Converts a string with px to a number like '2px' -> 2
	const pxStringToNumber = (str) => {
	return Number(str.substring(0, str.length - 2))
	}

	const PostStatusForm = {
	props: [
	'replyTo',
	'repliedUser',
	'attentions',
	'copyMessageScope',
	'subject',
	'disableSubject',
	'disableScopeSelector',
	'disableNotice',
	'disableLockWarning',
	'disablePolls',
	'disableSensitivityCheckbox',
	'disableSubmit',
	'disablePreview',
	'placeholder',
	'maxHeight',
	'postHandler',
	'preserveFocus',
	'autoFocus',
	'fileLimit',
	'submitOnEnter',
	'emojiPickerPlacement',
	'optimisticPosting'
	],
	components: {
	MediaUpload,
	EmojiInput,
	PollForm,
	ScopeSelector,
	Checkbox,
	+ Select,
	Attachment,
	StatusContent
	},
	mounted () {
	this.updateIdempotencyKey()
	this.resize(this.$refs.textarea)

	if (this.replyTo) {
	const textLength = this.$refs.textarea.value.length
	this.$refs.textarea.setSelectionRange(textLength, textLength)
	}

	if (this.replyTo \|\| this.autoFocus) {
	this.$refs.textarea.focus()
	}
	},
	data () {
	const preset = this.$route.query.message
	let statusText = preset \|\| ''

	const { scopeCopy } = this.$store.getters.mergedConfig

	if (this.replyTo) {
	const currentUser = this.$store.state.users.currentUser
	statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser)
	}

	const scope = ((this.copyMessageScope && scopeCopy) \|\| this.copyMessageScope === 'direct')
	? this.copyMessageScope
	: this.$store.state.users.currentUser.default_scope

	const { postContentType: contentType, sensitiveByDefault } = this.$store.getters.mergedConfig

	return {
	dropFiles: [],
	uploadingFiles: false,
	error: null,
	posting: false,
	highlighted: 0,
	newStatus: {
	spoilerText: this.subject \|\| '',
	status: statusText,
	nsfw: !!sensitiveByDefault,
	files: [],
	poll: {},
	mediaDescriptions: {},
	visibility: scope,
	contentType
	},
	caret: 0,
	pollFormVisible: false,
	showDropIcon: 'hide',
	dropStopTimeout: null,
	preview: null,
	previewLoading: false,
	emojiInputShown: false,
	idempotencyKey: ''
	}
	},
	computed: {
	users () {
	return this.$store.state.users.users
	},
	userDefaultScope () {
	return this.$store.state.users.currentUser.default_scope
	},
	showAllScopes () {
	return !this.mergedConfig.minimalScopesMode
	},
	emojiUserSuggestor () {
	return suggestor({
	emoji: [
	...this.$store.state.instance.emoji,
	...this.$store.state.instance.customEmoji
	],
	store: this.$store
	})
	},
	emojiSuggestor () {
	return suggestor({
	emoji: [
	...this.$store.state.instance.emoji,
	...this.$store.state.instance.customEmoji
	]
	})
	},
	emoji () {
	return this.$store.state.instance.emoji \|\| []
	},
	customEmoji () {
	return this.$store.state.instance.customEmoji \|\| []
	},
	statusLength () {
	return this.newStatus.status.length
	},
	spoilerTextLength () {
	return this.newStatus.spoilerText.length
	},
	statusLengthLimit () {
	return this.$store.state.instance.textlimit
	},
	hasStatusLengthLimit () {
	return this.statusLengthLimit > 0
	},
	charactersLeft () {
	return this.statusLengthLimit - (this.statusLength + this.spoilerTextLength)
	},
	isOverLengthLimit () {
	return this.hasStatusLengthLimit && (this.charactersLeft < 0)
	},
	minimalScopesMode () {
	return this.$store.state.instance.minimalScopesMode
	},
	alwaysShowSubject () {
	return this.mergedConfig.alwaysShowSubjectInput
	},
	postFormats () {
	return this.$store.state.instance.postFormats \|\| []
	},
	safeDMEnabled () {
	return this.$store.state.instance.safeDM
	},
	pollsAvailable () {
	return this.$store.state.instance.pollsAvailable &&
	this.$store.state.instance.pollLimits.max_options >= 2 &&
	this.disablePolls !== true
	},
	hideScopeNotice () {
	return this.disableNotice \|\| this.$store.getters.mergedConfig.hideScopeNotice
	},
	pollContentError () {
	return this.pollFormVisible &&
	this.newStatus.poll &&
	this.newStatus.poll.error
	},
	showPreview () {
	return !this.disablePreview && (!!this.preview \|\| this.previewLoading)
	},
	emptyStatus () {
	return this.newStatus.status.trim() === '' && this.newStatus.files.length === 0
	},
	uploadFileLimitReached () {
	return this.newStatus.files.length >= this.fileLimit
	},
	...mapGetters(['mergedConfig']),
	...mapState({
	mobileLayout: state => state.interface.mobileLayout
	})
	},
	watch: {
	'newStatus': {
	deep: true,
	handler () {
	this.statusChanged()
	}
	}
	},
	methods: {
	statusChanged () {
	this.autoPreview()
	this.updateIdempotencyKey()
	},
	clearStatus () {
	const newStatus = this.newStatus
	this.newStatus = {
	status: '',
	spoilerText: '',
	files: [],
	visibility: newStatus.visibility,
	contentType: newStatus.contentType,
	poll: {},
	mediaDescriptions: {}
	}
	this.pollFormVisible = false
	this.$refs.mediaUpload && this.$refs.mediaUpload.clearFile()
	this.clearPollForm()
	if (this.preserveFocus) {
	this.$nextTick(() => {
	this.$refs.textarea.focus()
	})
	}
	let el = this.$el.querySelector('textarea')
	el.style.height = 'auto'
	el.style.height = undefined
	this.error = null
	if (this.preview) this.previewStatus()
	},
	async postStatus (event, newStatus, opts = {}) {
	if (this.posting && !this.optimisticPosting) { return }
	if (this.disableSubmit) { return }
	if (this.emojiInputShown) { return }
	if (this.submitOnEnter) {
	event.stopPropagation()
	event.preventDefault()
	}

	if (this.optimisticPosting && (this.emptyStatus \|\| this.isOverLengthLimit)) { return }

	if (this.emptyStatus) {
	this.error = this.$t('post_status.empty_status_error')
	return
	}

	const poll = this.pollFormVisible ? this.newStatus.poll : {}
	if (this.pollContentError) {
	this.error = this.pollContentError
	return
	}

	this.posting = true

	try {
	await this.setAllMediaDescriptions()
	} catch (e) {
	this.error = this.$t('post_status.media_description_error')
	this.posting = false
	return
	}

	const postingOptions = {
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: newStatus.files,
	store: this.$store,
	inReplyToStatusId: this.replyTo,
	contentType: newStatus.contentType,
	poll,
	idempotencyKey: this.idempotencyKey
	}

	const postHandler = this.postHandler ? this.postHandler : statusPoster.postStatus

	postHandler(postingOptions).then((data) => {
	if (!data.error) {
	this.clearStatus()
	this.$emit('posted', data)
	} else {
	this.error = data.error
	}
	this.posting = false
	})
	},
	previewStatus () {
	if (this.emptyStatus && this.newStatus.spoilerText.trim() === '') {
	this.preview = { error: this.$t('post_status.preview_empty') }
	this.previewLoading = false
	return
	}
	const newStatus = this.newStatus
	this.previewLoading = true
	statusPoster.postStatus({
	status: newStatus.status,
	spoilerText: newStatus.spoilerText \|\| null,
	visibility: newStatus.visibility,
	sensitive: newStatus.nsfw,
	media: [],
	store: this.$store,
	inReplyToStatusId: this.replyTo,
	contentType: newStatus.contentType,
	poll: {},
	preview: true
	}).then((data) => {
	// Don't apply preview if not loading, because it means
	// user has closed the preview manually.
	if (!this.previewLoading) return
	if (!data.error) {
	this.preview = data
	} else {
	this.preview = { error: data.error }
	}
	}).catch((error) => {
	this.preview = { error }
	}).finally(() => {
	this.previewLoading = false
	})
	},
	debouncePreviewStatus: debounce(function () { this.previewStatus() }, 500),
	autoPreview () {
	if (!this.preview) return
	this.previewLoading = true
	this.debouncePreviewStatus()
	},
	closePreview () {
	this.preview = null
	this.previewLoading = false
	},
	togglePreview () {
	if (this.showPreview) {
	this.closePreview()
	} else {
	this.previewStatus()
	}
	},
	addMediaFile (fileInfo) {
	this.newStatus.files.push(fileInfo)
	this.$emit('resize', { delayed: true })
	},
	removeMediaFile (fileInfo) {
	let index = this.newStatus.files.indexOf(fileInfo)
	this.newStatus.files.splice(index, 1)
	this.$emit('resize')
	},
	uploadFailed (errString, templateArgs) {
	templateArgs = templateArgs \|\| {}
	this.error = this.$t('upload.error.base') + ' ' + this.$t('upload.error.' + errString, templateArgs)
	},
	startedUploadingFiles () {
	this.uploadingFiles = true
	},
	finishedUploadingFiles () {
	this.$emit('resize')
	this.uploadingFiles = false
	},
	type (fileInfo) {
	return fileTypeService.fileType(fileInfo.mimetype)
	},
	paste (e) {
	this.autoPreview()
	this.resize(e)
	if (e.clipboardData.files.length > 0) {
	// prevent pasting of file as text
	e.preventDefault()
	// Strangely, files property gets emptied after event propagation
	// Trying to wrap it in array doesn't work. Plus I doubt it's possible
	// to hold more than one file in clipboard.
	this.dropFiles = [e.clipboardData.files[0]]
	}
	},
	fileDrop (e) {
	if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
	e.preventDefault() // allow dropping text like before
	this.dropFiles = e.dataTransfer.files
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'hide'
	}
	},
	fileDragStop (e) {
	// The false-setting is done with delay because just using leave-events
	// directly caused unwanted flickering, this is not perfect either but
	// much less noticable.
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'fade'
	this.dropStopTimeout = setTimeout(() => (this.showDropIcon = 'hide'), 500)
	},
	fileDrag (e) {
	e.dataTransfer.dropEffect = this.uploadFileLimitReached ? 'none' : 'copy'
	if (e.dataTransfer && e.dataTransfer.types.includes('Files')) {
	clearTimeout(this.dropStopTimeout)
	this.showDropIcon = 'show'
	}
	},
	onEmojiInputInput (e) {
	this.$nextTick(() => {
	this.resize(this.$refs['textarea'])
	})
	},
	resize (e) {
	const target = e.target \|\| e
	if (!(target instanceof window.Element)) { return }

	// Reset to default height for empty form, nothing else to do here.
	if (target.value === '') {
	target.style.height = null
	this.$emit('resize')
	this.$refs['emoji-input'].resize()
	return
	}

	const formRef = this.$refs['form']
	const bottomRef = this.$refs['bottom']
	/* Scroller is either `window` (replies in TL), sidebar (main post form,
	* replies in notifs) or mobile post form. Note that getting and setting
	* scroll is different for `Window` and `Element`s
	*/
	const bottomBottomPaddingStr = window.getComputedStyle(bottomRef)['padding-bottom']
	const bottomBottomPadding = pxStringToNumber(bottomBottomPaddingStr)

	const scrollerRef = this.$el.closest('.sidebar-scroller') \|\|
	this.$el.closest('.post-form-modal-view') \|\|
	window

	// Getting info about padding we have to account for, removing 'px' part
	const topPaddingStr = window.getComputedStyle(target)['padding-top']
	const bottomPaddingStr = window.getComputedStyle(target)['padding-bottom']
	const topPadding = pxStringToNumber(topPaddingStr)
	const bottomPadding = pxStringToNumber(bottomPaddingStr)
	const vertPadding = topPadding + bottomPadding

	const oldHeight = pxStringToNumber(target.style.height)

	/* Explanation:
	*
	* https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight
	* scrollHeight returns element's scrollable content height, i.e. visible
	* element + overscrolled parts of it. We use it to determine when text
	* inside the textarea exceeded its height, so we can set height to prevent
	* overscroll, i.e. make textarea grow with the text. HOWEVER, since we
	* explicitly set new height, scrollHeight won't go below that, so we can't
	* SHRINK the textarea when there's extra space. To workaround that we set
	* height to 'auto' which makes textarea tiny again, so that scrollHeight
	* will match text height again. HOWEVER, shrinking textarea can screw with
	* the scroll since there might be not enough padding around form-bottom to even
	* warrant a scroll, so it will jump to 0 and refuse to move anywhere,
	* so we check current scroll position before shrinking and then restore it
	* with needed delta.
	*/

	// this part has to be BEFORE the content size update
	const currentScroll = scrollerRef === window
	? scrollerRef.scrollY
	: scrollerRef.scrollTop
	const scrollerHeight = scrollerRef === window
	? scrollerRef.innerHeight
	: scrollerRef.offsetHeight
	const scrollerBottomBorder = currentScroll + scrollerHeight

	// BEGIN content size update
	target.style.height = 'auto'
	const heightWithoutPadding = Math.floor(target.scrollHeight - vertPadding)
	let newHeight = this.maxHeight ? Math.min(heightWithoutPadding, this.maxHeight) : heightWithoutPadding
	// This is a bit of a hack to combat target.scrollHeight being different on every other input
	// on some browsers for whatever reason. Don't change the height if difference is 1px or less.
	if (Math.abs(newHeight - oldHeight) <= 1) {
	newHeight = oldHeight
	}
	target.style.height = `${newHeight}px`
	this.$emit('resize', newHeight)
	// END content size update

	// We check where the bottom border of form-bottom element is, this uses findOffset
	// to find offset relative to scrollable container (scroller)
	const bottomBottomBorder = bottomRef.offsetHeight + findOffset(bottomRef, scrollerRef).top + bottomBottomPadding

	const isBottomObstructed = scrollerBottomBorder < bottomBottomBorder
	const isFormBiggerThanScroller = scrollerHeight < formRef.offsetHeight
	const bottomChangeDelta = bottomBottomBorder - scrollerBottomBorder
	// The intention is basically this;
	// Keep form-bottom always visible so that submit button is in view EXCEPT
	// if form element bigger than scroller and caret isn't at the end, so that
	// if you scroll up and edit middle of text you won't get scrolled back to bottom
	const shouldScrollToBottom = isBottomObstructed &&
	!(isFormBiggerThanScroller &&
	this.$refs.textarea.selectionStart !== this.$refs.textarea.value.length)
	const totalDelta = shouldScrollToBottom ? bottomChangeDelta : 0
	const targetScroll = Math.round(currentScroll + totalDelta)

	if (scrollerRef === window) {
	scrollerRef.scroll(0, targetScroll)
	} else {
	scrollerRef.scrollTop = targetScroll
	}

	this.$refs['emoji-input'].resize()
	},
	showEmojiPicker () {
	this.$refs['textarea'].focus()
	this.$refs['emoji-input'].triggerShowPicker()
	},
	clearError () {
	this.error = null
	},
	changeVis (visibility) {
	this.newStatus.visibility = visibility
	},
	togglePollForm () {
	this.pollFormVisible = !this.pollFormVisible
	},
	setPoll (poll) {
	this.newStatus.poll = poll
	},
	clearPollForm () {
	if (this.$refs.pollForm) {
	this.$refs.pollForm.clear()
	}
	},
	dismissScopeNotice () {
	this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
	},
	setMediaDescription (id) {
	const description = this.newStatus.mediaDescriptions[id]
	if (!description \|\| description.trim() === '') return
	return statusPoster.setMediaDescription({ store: this.$store, id, description })
	},
	setAllMediaDescriptions () {
	const ids = this.newStatus.files.map(file => file.id)
	return Promise.all(ids.map(id => this.setMediaDescription(id)))
	},
	handleEmojiInputShow (value) {
	this.emojiInputShown = value
	},
	updateIdempotencyKey () {
	this.idempotencyKey = Date.now().toString()
	},
	openProfileTab () {
	this.$store.dispatch('openSettingsModalTab', 'profile')
	}
	}
	}

	export default PostStatusForm
	diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue
	index 6b490aeef8..fbda41d647 100644
	--- a/src/components/post_status_form/post_status_form.vue
	+++ b/src/components/post_status_form/post_status_form.vue
	@@ -1,635 +1,626 @@
	<template>
	<div
	ref="form"
	class="post-status-form"
	>
	<form
	autocomplete="off"
	@submit.prevent
	@dragover.prevent="fileDrag"
	>
	<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 class="form-group">
	<i18n
	v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private' && !disableLockWarning"
	path="post_status.account_not_locked_warning"
	tag="p"
	class="visibility-notice"
	>
	<button
	class="button-unstyled -link"
	@click="openProfileTab"
	>
	{{ $t('post_status.account_not_locked_warning_link') }}
	</button>
	</i18n>
	<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"
	@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"
	@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"
	@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="!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>
	<EmojiInput
	v-if="!disableSubject && (newStatus.spoilerText \|\| alwaysShowSubject)"
	v-model="newStatus.spoilerText"
	enable-emoji-picker
	:suggest="emojiSuggestor"
	class="form-control"
	>
	<input
	v-model="newStatus.spoilerText"
	type="text"
	:placeholder="$t('post_status.content_warning')"
	:disabled="posting && !optimisticPosting"
	size="1"
	class="form-post-subject"
	>
	</EmojiInput>
	<EmojiInput
	ref="emoji-input"
	v-model="newStatus.status"
	:suggest="emojiUserSuggestor"
	:placement="emojiPickerPlacement"
	class="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"
	>
	<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="{ 'scrollable-form': !!maxHeight }"
	@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>
	</EmojiInput>
	<div
	v-if="!disableScopeSelector"
	class="visibility-tray"
	>
	<scope-selector
	: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"
	>
	- <label
	- for="post-content-type"
	- class="select"
	+ <Select
	+ id="post-content-type"
	+ v-model="newStatus.contentType"
	+ class="form-control"
	>
	- <select
	- id="post-content-type"
	- v-model="newStatus.contentType"
	- class="form-control"
	+ <option
	+ v-for="postFormat in postFormats"
	+ :key="postFormat"
	+ :value="postFormat"
	>
	- <option
	- v-for="postFormat in postFormats"
	- :key="postFormat"
	- :value="postFormat"
	- >
	- {{ $t(`post_status.content_type["${postFormat}"]`) }}
	- </option>
	- </select>
	- <FAIcon
	- class="select-down-icon"
	- icon="chevron-down"
	- />
	- </label>
	+ {{ $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>
	<!-- touchstart is used to keep the OSK at the same position after a message send -->
	<button
	v-else
	:disabled="uploadingFiles \|\| disableSubmit"
	class="btn button-default"
	@touchstart.stop.prevent="postStatus($event, newStatus)"
	@click.stop.prevent="postStatus($event, newStatus)"
	>
	{{ $t('post_status.post') }}
	</button>
	</div>
	<div
	v-if="error"
	class="alert error"
	>
	Error: {{ error }}
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="times"
	@click="clearError"
	/>
	</div>
	<div class="attachments">
	<div
	v-for="file in newStatus.files"
	:key="file.url"
	class="media-upload-wrapper"
	>
	<button
	class="button-unstyled hider"
	@click="removeMediaFile(file)"
	>
	<FAIcon icon="times" />
	</button>
	<attachment
	:attachment="file"
	:set-media="() => $store.dispatch('setMedia', newStatus.files)"
	size="small"
	allow-play="false"
	/>
	<input
	v-model="newStatus.mediaDescriptions[file.id]"
	type="text"
	:placeholder="$t('post_status.media_description')"
	@keydown.enter.prevent=""
	>
	</div>
	</div>
	<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.scss';

	.tribute-container {
	ul {
	padding: 0px;
	li {
	display: flex;
	align-items: center;
	}
	}
	img {
	padding: 3px;
	width: 16px;
	height: 16px;
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	}
	}

	.post-status-form {
	position: relative;

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

	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;
	line-height: 1.4em;
	}

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

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

	.media-upload-icon, .poll-icon, .emoji-icon {
	font-size: 26px;
	line-height: 1.1;
	flex: 1;
	padding: 0 0.1em;

	&.selected, &:hover {
	// needs to be specific to override icon default color
	svg, i, label {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}

	&.disabled {
	svg, i {
	cursor: not-allowed;
	color: $fallback--icon;
	color: var(--btnDisabledText, $fallback--icon);

	&:hover {
	color: $fallback--icon;
	color: var(--btnDisabledText, $fallback--icon);
	}
	}
	}
	}

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

	.emoji-icon {
	order: 2;
	text-align: center;
	}

	.poll-icon {
	order: 3;
	text-align: right;
	}

	.poll-icon {
	cursor: pointer;
	}

	.error {
	text-align: center;
	}

	.media-upload-wrapper {
	margin-right: .2em;
	margin-bottom: .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;
	}

	.attachments .media-upload-wrapper {
	position: relative;

	.attachment {
	margin: 0;
	padding: 0;
	}
	}

	.btn {
	cursor: pointer;
	}

	.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:24px;
	}

	form textarea.form-cw {
	line-height:16px;
	resize: none;
	overflow: hidden;
	transition: min-height 200ms 100ms;
	min-height: 1px;
	}

	.form-post-body {
	height: 16px; // Only affects the empty-height
	line-height: 16px;
	resize: none;
	overflow: hidden;
	transition: min-height 200ms 100ms;
	padding-bottom: 1.75em;
	min-height: 1px;
	box-sizing: content-box;

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

	.btn {
	cursor: pointer;
	}

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

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

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

	.drop-indicator {
	position: absolute;
	z-index: 1;
	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);
	}
	}

	// todo: unify with attachment.vue (otherwise the uploaded images are not minified unless a status with an attachment was displayed before)
	img.media-upload, .media-upload-container > video {
	line-height: 0;
	max-height: 200px;
	max-width: 100%;
	}
	</style>
	diff --git a/src/components/select/select.js b/src/components/select/select.js
	new file mode 100644
	index 0000000000..49535d0799
	--- /dev/null
	+++ b/src/components/select/select.js
	@@ -0,0 +1,21 @@
	+import { library } from '@fortawesome/fontawesome-svg-core'
	+import {
	+ faChevronDown
	+} from '@fortawesome/free-solid-svg-icons'
	+
	+library.add(
	+ faChevronDown
	+)
	+
	+export default {
	+ model: {
	+ prop: 'value',
	+ event: 'change'
	+ },
	+ props: [
	+ 'value',
	+ 'disabled',
	+ 'unstyled',
	+ 'kind'
	+ ]
	+}
	diff --git a/src/components/select/select.vue b/src/components/select/select.vue
	new file mode 100644
	index 0000000000..5ade1fa644
	--- /dev/null
	+++ b/src/components/select/select.vue
	@@ -0,0 +1,62 @@
	+
	+<template>
	+ <label
	+ class="Select input"
	+ :class="{ disabled, unstyled }"
	+ >
	+ <select
	+ :disabled="disabled"
	+ :value="value"
	+ @change="$emit('change', $event.target.value)"
	+ >
	+ <slot />
	+ </select>
	+ <FAIcon
	+ class="select-down-icon"
	+ icon="chevron-down"
	+ />
	+ </label>
	+</template>
	+
	+<script src="./select.js"> </script>
	+
	+<style lang="scss">
	+@import '../../_variables.scss';
	+
	+.Select {
	+ padding: 0;
	+
	+ select {
	+ -webkit-appearance: none;
	+ -moz-appearance: none;
	+ appearance: none;
	+ background: transparent;
	+ border: none;
	+ color: $fallback--text;
	+ color: var(--inputText, --text, $fallback--text);
	+ margin: 0;
	+ padding: 0 2em 0 .2em;
	+ font-family: sans-serif;
	+ font-family: var(--inputFont, sans-serif);
	+ font-size: 14px;
	+ width: 100%;
	+ z-index: 1;
	+ height: 28px;
	+ line-height: 16px;
	+ }
	+
	+ .select-down-icon {
	+ position: absolute;
	+ top: 0;
	+ bottom: 0;
	+ right: 5px;
	+ height: 100%;
	+ color: $fallback--text;
	+ color: var(--inputText, $fallback--text);
	+ line-height: 28px;
	+ z-index: 0;
	+ pointer-events: none;
	+ }
	+
	+}
	+</style>
	diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.js
	similarity index 62%
	copy from src/components/settings_modal/helpers/boolean_setting.vue
	copy to src/components/settings_modal/helpers/boolean_setting.js
	index 146ad6c125..1dda49f2f0 100644
	--- a/src/components/settings_modal/helpers/boolean_setting.vue
	+++ b/src/components/settings_modal/helpers/boolean_setting.js
	@@ -1,57 +1,30 @@
	-<template>
	- <label
	- class="BooleanSetting"
	- >
	- <Checkbox
	- :checked="state"
	- :disabled="disabled"
	- @change="update"
	- >
	- <span
	- v-if="!!$slots.default"
	- class="label"
	- >
	- <slot />
	- </span>
	- <ModifiedIndicator :changed="isChanged" />
	- </Checkbox>
	- </label>
	-</template>
	-
	-<script>
	import { get, set } from 'lodash'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	import ModifiedIndicator from './modified_indicator.vue'
	export default {
	components: {
	Checkbox,
	ModifiedIndicator
	},
	props: [
	'path',
	'disabled'
	],
	computed: {
	pathDefault () {
	const [firstSegment, ...rest] = this.path.split('.')
	return [firstSegment + 'DefaultValue', ...rest].join('.')
	},
	state () {
	return get(this.$parent, this.path)
	},
	isChanged () {
	return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
	}
	},
	methods: {
	update (e) {
	set(this.$parent, this.path, e)
	}
	}
	}
	-</script>
	-
	-<style lang="scss">
	-.BooleanSetting {
	-}
	-</style>
	diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/boolean_setting.vue
	index 146ad6c125..c3ee6583f6 100644
	--- a/src/components/settings_modal/helpers/boolean_setting.vue
	+++ b/src/components/settings_modal/helpers/boolean_setting.vue
	@@ -1,57 +1,21 @@
	<template>
	<label
	class="BooleanSetting"
	>
	<Checkbox
	:checked="state"
	:disabled="disabled"
	@change="update"
	>
	<span
	v-if="!!$slots.default"
	class="label"
	>
	<slot />
	</span>
	<ModifiedIndicator :changed="isChanged" />
	</Checkbox>
	</label>
	</template>

	-<script>
	-import { get, set } from 'lodash'
	-import Checkbox from 'src/components/checkbox/checkbox.vue'
	-import ModifiedIndicator from './modified_indicator.vue'
	-export default {
	- components: {
	- Checkbox,
	- ModifiedIndicator
	- },
	- props: [
	- 'path',
	- 'disabled'
	- ],
	- computed: {
	- pathDefault () {
	- const [firstSegment, ...rest] = this.path.split('.')
	- return [firstSegment + 'DefaultValue', ...rest].join('.')
	- },
	- state () {
	- return get(this.$parent, this.path)
	- },
	- isChanged () {
	- return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
	- }
	- },
	- methods: {
	- update (e) {
	- set(this.$parent, this.path, e)
	- }
	- }
	-}
	-</script>
	-
	-<style lang="scss">
	-.BooleanSetting {
	-}
	-</style>
	+<script src="./boolean_setting.js"></script>
	diff --git a/src/components/settings_modal/helpers/boolean_setting.vue b/src/components/settings_modal/helpers/choice_setting.js
	similarity index 54%
	copy from src/components/settings_modal/helpers/boolean_setting.vue
	copy to src/components/settings_modal/helpers/choice_setting.js
	index 146ad6c125..042e810643 100644
	--- a/src/components/settings_modal/helpers/boolean_setting.vue
	+++ b/src/components/settings_modal/helpers/choice_setting.js
	@@ -1,57 +1,34 @@
	-<template>
	- <label
	- class="BooleanSetting"
	- >
	- <Checkbox
	- :checked="state"
	- :disabled="disabled"
	- @change="update"
	- >
	- <span
	- v-if="!!$slots.default"
	- class="label"
	- >
	- <slot />
	- </span>
	- <ModifiedIndicator :changed="isChanged" />
	- </Checkbox>
	- </label>
	-</template>
	-
	-<script>
	import { get, set } from 'lodash'
	-import Checkbox from 'src/components/checkbox/checkbox.vue'
	+import Select from 'src/components/select/select.vue'
	import ModifiedIndicator from './modified_indicator.vue'
	export default {
	components: {
	- Checkbox,
	+ Select,
	ModifiedIndicator
	},
	props: [
	'path',
	- 'disabled'
	+ 'disabled',
	+ 'options'
	],
	computed: {
	pathDefault () {
	const [firstSegment, ...rest] = this.path.split('.')
	return [firstSegment + 'DefaultValue', ...rest].join('.')
	},
	state () {
	return get(this.$parent, this.path)
	},
	+ defaultState () {
	+ return get(this.$parent, this.pathDefault)
	+ },
	isChanged () {
	return get(this.$parent, this.path) !== get(this.$parent, this.pathDefault)
	}
	},
	methods: {
	update (e) {
	set(this.$parent, this.path, e)
	}
	}
	}
	-</script>
	-
	-<style lang="scss">
	-.BooleanSetting {
	-}
	-</style>
	diff --git a/src/components/settings_modal/helpers/choice_setting.vue b/src/components/settings_modal/helpers/choice_setting.vue
	new file mode 100644
	index 0000000000..fa17661bdd
	--- /dev/null
	+++ b/src/components/settings_modal/helpers/choice_setting.vue
	@@ -0,0 +1,29 @@
	+<template>
	+ <label
	+ class="ChoiceSetting"
	+ >
	+ <slot />
	+ <Select
	+ :value="state"
	+ :disabled="disabled"
	+ @change="update"
	+ >
	+ <option
	+ v-for="option in options"
	+ :key="option.key"
	+ :value="option.value"
	+ >
	+ {{ option.label }}
	+ {{ option.value === defaultState ? $t('settings.instance_default_simple') : '' }}
	+ </option>
	+ </Select>
	+ <ModifiedIndicator :changed="isChanged" />
	+ </label>
	+</template>
	+
	+<script src="./choice_setting.js"></script>
	+
	+<style lang="scss">
	+.ChoiceSetting {
	+}
	+</style>
	diff --git a/src/components/settings_modal/settings_modal_content.scss b/src/components/settings_modal/settings_modal_content.scss
	index f066234c84..81ab434b6b 100644
	--- a/src/components/settings_modal/settings_modal_content.scss
	+++ b/src/components/settings_modal/settings_modal_content.scss
	@@ -1,43 +1,54 @@
	@import 'src/_variables.scss';
	.settings_tab-switcher {
	height: 100%;

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

	- > div {
	+ > div,
	+ > label {
	+ display: block;
	margin-bottom: .5em;
	&:last-child {
	margin-bottom: 0;
	}
	}

	+ .select-multiple {
	+ display: flex;
	+
	+ .option-list {
	+ margin: 0;
	+ padding-left: .5em;
	+ }
	+ }
	+
	&:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 1em;
	}

	select {
	min-width: 10em;
	}

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

	.unavailable,
	.unavailable svg {
	color: var(--cRed, $fallback--cRed);
	color: $fallback--cRed;
	}

	.number-input {
	max-width: 6em;
	}
	}
	}
	diff --git a/src/components/settings_modal/tabs/filtering_tab.js b/src/components/settings_modal/tabs/filtering_tab.js
	index 6e95f7afa8..4eaf4217f2 100644
	--- a/src/components/settings_modal/tabs/filtering_tab.js
	+++ b/src/components/settings_modal/tabs/filtering_tab.js
	@@ -1,55 +1,54 @@
	import { filter, trim } from 'lodash'
	import BooleanSetting from '../helpers/boolean_setting.vue'
	+import ChoiceSetting from '../helpers/choice_setting.vue'

	import SharedComputedObject from '../helpers/shared_computed_object.js'
	-import { library } from '@fortawesome/fontawesome-svg-core'
	-import {
	- faChevronDown
	-} from '@fortawesome/free-solid-svg-icons'
	-
	-library.add(
	- faChevronDown
	-)

	const FilteringTab = {
	data () {
	return {
	- muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n')
	+ muteWordsStringLocal: this.$store.getters.mergedConfig.muteWords.join('\n'),
	+ replyVisibilityOptions: ['all', 'following', 'self'].map(mode => ({
	+ key: mode,
	+ value: mode,
	+ label: this.$t(`settings.reply_visibility_${mode}`)
	+ }))
	}
	},
	components: {
	- BooleanSetting
	+ BooleanSetting,
	+ ChoiceSetting
	},
	computed: {
	...SharedComputedObject(),
	muteWordsString: {
	get () {
	return this.muteWordsStringLocal
	},
	set (value) {
	this.muteWordsStringLocal = value
	this.$store.dispatch('setOption', {
	name: 'muteWords',
	value: filter(value.split('\n'), (word) => trim(word).length > 0)
	})
	}
	}
	},
	// Updating nested properties
	watch: {
	notificationVisibility: {
	handler (value) {
	this.$store.dispatch('setOption', {
	name: 'notificationVisibility',
	value: this.$store.getters.mergedConfig.notificationVisibility
	})
	},
	deep: true
	},
	replyVisibility () {
	this.$store.dispatch('queueFlushAll')
	}
	}
	}

	export default FilteringTab
	diff --git a/src/components/settings_modal/tabs/filtering_tab.vue b/src/components/settings_modal/tabs/filtering_tab.vue
	index 402c2a4aa6..6fc9ceaac9 100644
	--- a/src/components/settings_modal/tabs/filtering_tab.vue
	+++ b/src/components/settings_modal/tabs/filtering_tab.vue
	@@ -1,90 +1,74 @@
	<template>
	<div :label="$t('settings.filtering')">
	<div class="setting-item">
	<div class="select-multiple">
	<span class="label">{{ $t('settings.notification_visibility') }}</span>
	<ul class="option-list">
	<li>
	<BooleanSetting path="notificationVisibility.likes">
	{{ $t('settings.notification_visibility_likes') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="notificationVisibility.repeats">
	{{ $t('settings.notification_visibility_repeats') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="notificationVisibility.follows">
	{{ $t('settings.notification_visibility_follows') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="notificationVisibility.mentions">
	{{ $t('settings.notification_visibility_mentions') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="notificationVisibility.moves">
	{{ $t('settings.notification_visibility_moves') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="notificationVisibility.emojiReactions">
	{{ $t('settings.notification_visibility_emoji_reactions') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>
	- <div>
	+ <ChoiceSetting
	+ id="replyVisibility"
	+ path="replyVisibility"
	+ :options="replyVisibilityOptions"
	+ >
	{{ $t('settings.replies_in_timeline') }}
	- <label
	- for="replyVisibility"
	- class="select"
	- >
	- <select
	- id="replyVisibility"
	- v-model="replyVisibility"
	- >
	- <option
	- value="all"
	- selected
	- >{{ $t('settings.reply_visibility_all') }}</option>
	- <option value="following">{{ $t('settings.reply_visibility_following') }}</option>
	- <option value="self">{{ $t('settings.reply_visibility_self') }}</option>
	- </select>
	- <FAIcon
	- class="select-down-icon"
	- icon="chevron-down"
	- />
	- </label>
	- </div>
	+ </ChoiceSetting>
	<div>
	<BooleanSetting path="hidePostStats">
	{{ $t('settings.hide_post_stats') }}
	</BooleanSetting>
	</div>
	<div>
	<BooleanSetting path="hideUserStats">
	{{ $t('settings.hide_user_stats') }}
	</BooleanSetting>
	</div>
	</div>
	<div class="setting-item">
	<div>
	<p>{{ $t('settings.filtering_explanation') }}</p>
	<textarea
	id="muteWords"
	v-model="muteWordsString"
	class="resize-height"
	/>
	</div>
	<div>
	<BooleanSetting path="hideFilteredStatuses">
	{{ $t('settings.hide_filtered_statuses') }}
	</BooleanSetting>
	</div>
	</div>
	</div>
	</template>
	<script src="./filtering_tab.js"></script>
	diff --git a/src/components/settings_modal/tabs/general_tab.js b/src/components/settings_modal/tabs/general_tab.js
	index 2db523be86..07fccf57cf 100644
	--- a/src/components/settings_modal/tabs/general_tab.js
	+++ b/src/components/settings_modal/tabs/general_tab.js
	@@ -1,45 +1,57 @@
	import BooleanSetting from '../helpers/boolean_setting.vue'
	+import ChoiceSetting from '../helpers/choice_setting.vue'
	import InterfaceLanguageSwitcher from 'src/components/interface_language_switcher/interface_language_switcher.vue'

	import SharedComputedObject from '../helpers/shared_computed_object.js'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	- faChevronDown,
	faGlobe
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	- faChevronDown,
	faGlobe
	)

	const GeneralTab = {
	data () {
	return {
	+ subjectLineOptions: ['email', 'noop', 'masto'].map(mode => ({
	+ key: mode,
	+ value: mode,
	+ label: this.$t(`settings.subject_line_${mode === 'masto' ? 'mastodon' : mode}`)
	+ })),
	loopSilentAvailable:
	// Firefox
	Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') \|\|
	// Chrome-likes
	Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') \|\|
	// Future spec, still not supported in Nightly 63 as of 08/2018
	Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks')
	}
	},
	components: {
	BooleanSetting,
	+ ChoiceSetting,
	InterfaceLanguageSwitcher
	},
	computed: {
	postFormats () {
	return this.$store.state.instance.postFormats \|\| []
	},
	+ postContentOptions () {
	+ return this.postFormats.map(format => ({
	+ key: format,
	+ value: format,
	+ label: this.$t(`post_status.content_type["${format}"]`)
	+ }))
	+ },
	instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel },
	instanceWallpaperUsed () {
	return this.$store.state.instance.background &&
	!this.$store.state.users.currentUser.background_image
	},
	...SharedComputedObject()
	}
	}

	export default GeneralTab
	diff --git a/src/components/settings_modal/tabs/general_tab.vue b/src/components/settings_modal/tabs/general_tab.vue
	index 7bae4a32c7..bdb29edf0f 100644
	--- a/src/components/settings_modal/tabs/general_tab.vue
	+++ b/src/components/settings_modal/tabs/general_tab.vue
	@@ -1,288 +1,248 @@
	<template>
	<div :label="$t('settings.general')">
	<div class="setting-item">
	<h2>{{ $t('settings.interface') }}</h2>
	<ul class="setting-list">
	<li>
	<interface-language-switcher />
	</li>
	<li v-if="instanceSpecificPanelPresent">
	<BooleanSetting path="hideISP">
	{{ $t('settings.hide_isp') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="sidebarRight">
	{{ $t('settings.right_sidebar') }}
	</BooleanSetting>
	</li>
	<li v-if="instanceWallpaperUsed">
	<BooleanSetting path="hideInstanceWallpaper">
	{{ $t('settings.hide_wallpaper') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>
	<div class="setting-item">
	<h2>{{ $t('nav.timeline') }}</h2>
	<ul class="setting-list">
	<li>
	<BooleanSetting path="hideMutedPosts">
	{{ $t('settings.hide_muted_posts') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="collapseMessageWithSubject">
	{{ $t('settings.collapse_subject') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="streaming">
	{{ $t('settings.streaming') }}
	</BooleanSetting>
	<ul
	class="setting-list suboptions"
	:class="[{disabled: !streaming}]"
	>
	<li>
	<BooleanSetting
	path="pauseOnUnfocused"
	:disabled="!streaming"
	>
	{{ $t('settings.pause_on_unfocused') }}
	</BooleanSetting>
	</li>
	</ul>
	</li>
	<li>
	<BooleanSetting path="useStreamingApi">
	{{ $t('settings.useStreamingApi') }}
	<br>
	<small>
	{{ $t('settings.useStreamingApiWarning') }}
	</small>
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="emojiReactionsOnTimeline">
	{{ $t('settings.emoji_reactions_on_timeline') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="virtualScrolling">
	{{ $t('settings.virtual_scrolling') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{ $t('settings.composing') }}</h2>
	<ul class="setting-list">
	<li>
	<BooleanSetting path="scopeCopy">
	{{ $t('settings.scope_copy') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="alwaysShowSubjectInput">
	{{ $t('settings.subject_input_always_show') }}
	</BooleanSetting>
	</li>
	<li>
	- <div>
	+ <ChoiceSetting
	+ id="subjectLineBehavior"
	+ path="subjectLineBehavior"
	+ :options="subjectLineOptions"
	+ >
	{{ $t('settings.subject_line_behavior') }}
	- <label
	- for="subjectLineBehavior"
	- class="select"
	- >
	- <select
	- id="subjectLineBehavior"
	- v-model="subjectLineBehavior"
	- >
	- <option value="email">
	- {{ $t('settings.subject_line_email') }}
	- {{ subjectLineBehaviorDefaultValue == 'email' ? $t('settings.instance_default_simple') : '' }}
	- </option>
	- <option value="masto">
	- {{ $t('settings.subject_line_mastodon') }}
	- {{ subjectLineBehaviorDefaultValue == 'mastodon' ? $t('settings.instance_default_simple') : '' }}
	- </option>
	- <option value="noop">
	- {{ $t('settings.subject_line_noop') }}
	- {{ subjectLineBehaviorDefaultValue == 'noop' ? $t('settings.instance_default_simple') : '' }}
	- </option>
	- </select>
	- <FAIcon
	- class="select-down-icon"
	- icon="chevron-down"
	- />
	- </label>
	- </div>
	+ </ChoiceSetting>
	</li>
	<li v-if="postFormats.length > 0">
	- <div>
	+ <ChoiceSetting
	+ id="postContentType"
	+ path="postContentType"
	+ :options="postContentOptions"
	+ >
	{{ $t('settings.post_status_content_type') }}
	- <label
	- for="postContentType"
	- class="select"
	- >
	- <select
	- id="postContentType"
	- v-model="postContentType"
	- >
	- <option
	- v-for="postFormat in postFormats"
	- :key="postFormat"
	- :value="postFormat"
	- >
	- {{ $t(`post_status.content_type["${postFormat}"]`) }}
	- {{ postContentTypeDefaultValue === postFormat ? $t('settings.instance_default_simple') : '' }}
	- </option>
	- </select>
	- <FAIcon
	- class="select-down-icon"
	- icon="chevron-down"
	- />
	- </label>
	- </div>
	+ </ChoiceSetting>
	</li>
	<li>
	<BooleanSetting path="minimalScopesMode">
	{{ $t('settings.minimal_scopes_mode') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="sensitiveByDefault">
	{{ $t('settings.sensitive_by_default') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="autohideFloatingPostButton">
	{{ $t('settings.autohide_floating_post_button') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="padEmoji">
	{{ $t('settings.pad_emoji') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{ $t('settings.attachments') }}</h2>
	<ul class="setting-list">
	<li>
	<BooleanSetting path="hideAttachments">
	{{ $t('settings.hide_attachments_in_tl') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="hideAttachmentsInConv">
	{{ $t('settings.hide_attachments_in_convo') }}
	</BooleanSetting>
	</li>
	<li>
	<label for="maxThumbnails">
	{{ $t('settings.max_thumbnails') }}
	</label>
	<input
	id="maxThumbnails"
	path.number="maxThumbnails"
	class="number-input"
	type="number"
	min="0"
	step="1"
	>
	</li>
	<li>
	<BooleanSetting path="hideNsfw">
	{{ $t('settings.nsfw_clickthrough') }}
	</BooleanSetting>
	</li>
	<ul class="setting-list suboptions">
	<li>
	<BooleanSetting
	path="preloadImage"
	:disabled="!hideNsfw"
	>
	{{ $t('settings.preload_images') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting
	path="useOneClickNsfw"
	:disabled="!hideNsfw"
	>
	{{ $t('settings.use_one_click_nsfw') }}
	</BooleanSetting>
	</li>
	</ul>
	<li>
	<BooleanSetting path="stopGifs">
	{{ $t('settings.stop_gifs') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="loopVideo">
	{{ $t('settings.loop_video') }}
	</BooleanSetting>
	<ul
	class="setting-list suboptions"
	:class="[{disabled: !streaming}]"
	>
	<li>
	<BooleanSetting
	path="loopVideoSilentOnly"
	:disabled="!loopVideo \|\| !loopSilentAvailable"
	>
	{{ $t('settings.loop_video_silent_only') }}
	</BooleanSetting>
	<div
	v-if="!loopSilentAvailable"
	class="unavailable"
	>
	<FAIcon icon="globe" />! {{ $t('settings.limited_availability') }}
	</div>
	</li>
	</ul>
	</li>
	<li>
	<BooleanSetting path="playVideosInModal">
	{{ $t('settings.play_videos_in_modal') }}
	</BooleanSetting>
	</li>
	<li>
	<BooleanSetting path="useContainFit">
	{{ $t('settings.use_contain_fit') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{ $t('settings.notifications') }}</h2>
	<ul class="setting-list">
	<li>
	<BooleanSetting path="webPushNotifications">
	{{ $t('settings.enable_web_push_notifications') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>

	<div class="setting-item">
	<h2>{{ $t('settings.fun') }}</h2>
	<ul class="setting-list">
	<li>
	<BooleanSetting path="greentext">
	{{ $t('settings.greentext') }}
	</BooleanSetting>
	</li>
	</ul>
	</div>
	</div>
	</template>

	<script src="./general_tab.js"></script>
	diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.js b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
	index 8960c56651..1388f74b02 100644
	--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.js
	+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.js
	@@ -1,785 +1,779 @@
	import { set, delete as del } from 'vue'
	import {
	rgb2hex,
	hex2rgb,
	getContrastRatioLayers
	} from 'src/services/color_convert/color_convert.js'
	import {
	DEFAULT_SHADOWS,
	generateColors,
	generateShadows,
	generateRadii,
	generateFonts,
	composePreset,
	getThemes,
	shadows2to3,
	colors2to3
	} from 'src/services/style_setter/style_setter.js'
	import {
	newImporter,
	newExporter
	} from 'src/services/export_import/export_import.js'
	import {
	SLOT_INHERITANCE
	} from 'src/services/theme_data/pleromafe.js'
	import {
	CURRENT_VERSION,
	OPACITIES,
	getLayers,
	getOpacitySlot
	} from 'src/services/theme_data/theme_data.service.js'
	import ColorInput from 'src/components/color_input/color_input.vue'
	import RangeInput from 'src/components/range_input/range_input.vue'
	import OpacityInput from 'src/components/opacity_input/opacity_input.vue'
	import ShadowControl from 'src/components/shadow_control/shadow_control.vue'
	import FontControl from 'src/components/font_control/font_control.vue'
	import ContrastRatio from 'src/components/contrast_ratio/contrast_ratio.vue'
	import TabSwitcher from 'src/components/tab_switcher/tab_switcher.js'
	import Checkbox from 'src/components/checkbox/checkbox.vue'
	+import Select from 'src/components/select/select.vue'

	import Preview from './preview.vue'
	-import { library } from '@fortawesome/fontawesome-svg-core'
	-import {
	- faChevronDown
	-} from '@fortawesome/free-solid-svg-icons'
	-
	-library.add(
	- faChevronDown
	-)

	// List of color values used in v1
	const v1OnlyNames = [
	'bg',
	'fg',
	'text',
	'link',
	'cRed',
	'cGreen',
	'cBlue',
	'cOrange'
	].map(_ => _ + 'ColorLocal')

	const colorConvert = (color) => {
	if (color.startsWith('--') \|\| color === 'transparent') {
	return color
	} else {
	return hex2rgb(color)
	}
	}

	export default {
	data () {
	return {
	themeImporter: newImporter({
	validator: this.importValidator,
	onImport: this.onImport,
	onImportFailure: this.onImportFailure
	}),
	themeExporter: newExporter({
	filename: 'pleroma_theme',
	getExportedObject: () => this.exportedTheme
	}),
	availableStyles: [],
	selected: this.$store.getters.mergedConfig.theme,
	themeWarning: undefined,
	tempImportFile: undefined,
	engineVersion: 0,

	previewShadows: {},
	previewColors: {},
	previewRadii: {},
	previewFonts: {},

	shadowsInvalid: true,
	colorsInvalid: true,
	radiiInvalid: true,

	keepColor: false,
	keepShadows: false,
	keepOpacity: false,
	keepRoundness: false,
	keepFonts: false,

	...Object.keys(SLOT_INHERITANCE)
	.map(key => [key, ''])
	.reduce((acc, [key, val]) => ({ ...acc, [ key + 'ColorLocal' ]: val }), {}),

	...Object.keys(OPACITIES)
	.map(key => [key, ''])
	.reduce((acc, [key, val]) => ({ ...acc, [ key + 'OpacityLocal' ]: val }), {}),

	shadowSelected: undefined,
	shadowsLocal: {},
	fontsLocal: {},

	btnRadiusLocal: '',
	inputRadiusLocal: '',
	checkboxRadiusLocal: '',
	panelRadiusLocal: '',
	avatarRadiusLocal: '',
	avatarAltRadiusLocal: '',
	attachmentRadiusLocal: '',
	tooltipRadiusLocal: '',
	chatMessageRadiusLocal: ''
	}
	},
	created () {
	const self = this

	getThemes()
	.then((promises) => {
	return Promise.all(
	Object.entries(promises)
	.map(([k, v]) => v.then(res => [k, res]))
	)
	})
	.then(themes => themes.reduce((acc, [k, v]) => {
	if (v) {
	return {
	...acc,
	[k]: v
	}
	} else {
	return acc
	}
	}, {}))
	.then((themesComplete) => {
	self.availableStyles = themesComplete
	})
	},
	mounted () {
	this.loadThemeFromLocalStorage()
	if (typeof this.shadowSelected === 'undefined') {
	this.shadowSelected = this.shadowsAvailable[0]
	}
	},
	computed: {
	themeWarningHelp () {
	if (!this.themeWarning) return
	const t = this.$t
	const pre = 'settings.style.switcher.help.'
	const {
	origin,
	themeEngineVersion,
	type,
	noActionsPossible
	} = this.themeWarning
	if (origin === 'file') {
	// Loaded v2 theme from file
	if (themeEngineVersion === 2 && type === 'wrong_version') {
	return t(pre + 'v2_imported')
	}
	if (themeEngineVersion > CURRENT_VERSION) {
	return t(pre + 'future_version_imported') + ' ' +
	(
	noActionsPossible
	? t(pre + 'snapshot_missing')
	: t(pre + 'snapshot_present')
	)
	}
	if (themeEngineVersion < CURRENT_VERSION) {
	return t(pre + 'future_version_imported') + ' ' +
	(
	noActionsPossible
	? t(pre + 'snapshot_missing')
	: t(pre + 'snapshot_present')
	)
	}
	} else if (origin === 'localStorage') {
	if (type === 'snapshot_source_mismatch') {
	return t(pre + 'snapshot_source_mismatch')
	}
	// FE upgraded from v2
	if (themeEngineVersion === 2) {
	return t(pre + 'upgraded_from_v2')
	}
	// Admin downgraded FE
	if (themeEngineVersion > CURRENT_VERSION) {
	return t(pre + 'fe_downgraded') + ' ' +
	(
	noActionsPossible
	? t(pre + 'migration_snapshot_ok')
	: t(pre + 'migration_snapshot_gone')
	)
	}
	// Admin upgraded FE
	if (themeEngineVersion < CURRENT_VERSION) {
	return t(pre + 'fe_upgraded') + ' ' +
	(
	noActionsPossible
	? t(pre + 'migration_snapshot_ok')
	: t(pre + 'migration_snapshot_gone')
	)
	}
	}
	},
	selectedVersion () {
	return Array.isArray(this.selected) ? 1 : 2
	},
	currentColors () {
	return Object.keys(SLOT_INHERITANCE)
	.map(key => [key, this[key + 'ColorLocal']])
	.reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
	},
	currentOpacity () {
	return Object.keys(OPACITIES)
	.map(key => [key, this[key + 'OpacityLocal']])
	.reduce((acc, [key, val]) => ({ ...acc, [ key ]: val }), {})
	},
	currentRadii () {
	return {
	btn: this.btnRadiusLocal,
	input: this.inputRadiusLocal,
	checkbox: this.checkboxRadiusLocal,
	panel: this.panelRadiusLocal,
	avatar: this.avatarRadiusLocal,
	avatarAlt: this.avatarAltRadiusLocal,
	tooltip: this.tooltipRadiusLocal,
	attachment: this.attachmentRadiusLocal,
	chatMessage: this.chatMessageRadiusLocal
	}
	},
	preview () {
	return composePreset(this.previewColors, this.previewRadii, this.previewShadows, this.previewFonts)
	},
	previewTheme () {
	if (!this.preview.theme.colors) return { colors: {}, opacity: {}, radii: {}, shadows: {}, fonts: {} }
	return this.preview.theme
	},
	// This needs optimization maybe
	previewContrast () {
	try {
	if (!this.previewTheme.colors.bg) return {}
	const colors = this.previewTheme.colors
	const opacity = this.previewTheme.opacity
	if (!colors.bg) return {}
	const hints = (ratio) => ({
	text: ratio.toPrecision(3) + ':1',
	// AA level, AAA level
	aa: ratio >= 4.5,
	aaa: ratio >= 7,
	// same but for 18pt+ texts
	laa: ratio >= 3,
	laaa: ratio >= 4.5
	})
	const colorsConverted = Object.entries(colors).reduce((acc, [key, value]) => ({ ...acc, [key]: colorConvert(value) }), {})

	const ratios = Object.entries(SLOT_INHERITANCE).reduce((acc, [key, value]) => {
	const slotIsBaseText = key === 'text' \|\| key === 'link'
	const slotIsText = slotIsBaseText \|\| (
	typeof value === 'object' && value !== null && value.textColor
	)
	if (!slotIsText) return acc
	const { layer, variant } = slotIsBaseText ? { layer: 'bg' } : value
	const background = variant \|\| layer
	const opacitySlot = getOpacitySlot(background)
	const textColors = [
	key,
	...(background === 'bg' ? ['cRed', 'cGreen', 'cBlue', 'cOrange'] : [])
	]

	const layers = getLayers(
	layer,
	variant \|\| layer,
	opacitySlot,
	colorsConverted,
	opacity
	)

	return {
	...acc,
	...textColors.reduce((acc, textColorKey) => {
	const newKey = slotIsBaseText
	? 'bg' + textColorKey[0].toUpperCase() + textColorKey.slice(1)
	: textColorKey
	return {
	...acc,
	[newKey]: getContrastRatioLayers(
	colorsConverted[textColorKey],
	layers,
	colorsConverted[textColorKey]
	)
	}
	}, {})
	}
	}, {})

	return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
	} catch (e) {
	console.warn('Failure computing contrasts', e)
	}
	},
	previewRules () {
	if (!this.preview.rules) return ''
	return [
	...Object.values(this.preview.rules),
	'color: var(--text)',
	'font-family: var(--interfaceFont, sans-serif)'
	].join(';')
	},
	shadowsAvailable () {
	return Object.keys(DEFAULT_SHADOWS).sort()
	},
	currentShadowOverriden: {
	get () {
	return !!this.currentShadow
	},
	set (val) {
	if (val) {
	set(this.shadowsLocal, this.shadowSelected, this.currentShadowFallback.map(_ => Object.assign({}, _)))
	} else {
	del(this.shadowsLocal, this.shadowSelected)
	}
	}
	},
	currentShadowFallback () {
	return (this.previewTheme.shadows \|\| {})[this.shadowSelected]
	},
	currentShadow: {
	get () {
	return this.shadowsLocal[this.shadowSelected]
	},
	set (v) {
	set(this.shadowsLocal, this.shadowSelected, v)
	}
	},
	themeValid () {
	return !this.shadowsInvalid && !this.colorsInvalid && !this.radiiInvalid
	},
	exportedTheme () {
	const saveEverything = (
	!this.keepFonts &&
	!this.keepShadows &&
	!this.keepOpacity &&
	!this.keepRoundness &&
	!this.keepColor
	)

	const source = {
	themeEngineVersion: CURRENT_VERSION
	}

	if (this.keepFonts \|\| saveEverything) {
	source.fonts = this.fontsLocal
	}
	if (this.keepShadows \|\| saveEverything) {
	source.shadows = this.shadowsLocal
	}
	if (this.keepOpacity \|\| saveEverything) {
	source.opacity = this.currentOpacity
	}
	if (this.keepColor \|\| saveEverything) {
	source.colors = this.currentColors
	}
	if (this.keepRoundness \|\| saveEverything) {
	source.radii = this.currentRadii
	}

	const theme = {
	themeEngineVersion: CURRENT_VERSION,
	...this.previewTheme
	}

	return {
	// To separate from other random JSON files and possible future source formats
	_pleroma_theme_version: 2, theme, source
	}
	}
	},
	components: {
	ColorInput,
	OpacityInput,
	RangeInput,
	ContrastRatio,
	ShadowControl,
	FontControl,
	TabSwitcher,
	Preview,
	- Checkbox
	+ Checkbox,
	+ Select
	},
	methods: {
	loadTheme (
	{
	theme,
	source,
	_pleroma_theme_version: fileVersion
	},
	origin,
	forceUseSource = false
	) {
	this.dismissWarning()
	if (!source && !theme) {
	throw new Error('Can\'t load theme: empty')
	}
	const version = (origin === 'localStorage' && !theme.colors)
	? 'l1'
	: fileVersion
	const snapshotEngineVersion = (theme \|\| {}).themeEngineVersion
	const themeEngineVersion = (source \|\| {}).themeEngineVersion \|\| 2
	const versionsMatch = themeEngineVersion === CURRENT_VERSION
	const sourceSnapshotMismatch = (
	theme !== undefined &&
	source !== undefined &&
	themeEngineVersion !== snapshotEngineVersion
	)
	// Force loading of source if user requested it or if snapshot
	// is unavailable
	const forcedSourceLoad = (source && forceUseSource) \|\| !theme
	if (!(versionsMatch && !sourceSnapshotMismatch) &&
	!forcedSourceLoad &&
	version !== 'l1' &&
	origin !== 'defaults'
	) {
	if (sourceSnapshotMismatch && origin === 'localStorage') {
	this.themeWarning = {
	origin,
	themeEngineVersion,
	type: 'snapshot_source_mismatch'
	}
	} else if (!theme) {
	this.themeWarning = {
	origin,
	noActionsPossible: true,
	themeEngineVersion,
	type: 'no_snapshot_old_version'
	}
	} else if (!versionsMatch) {
	this.themeWarning = {
	origin,
	noActionsPossible: !source,
	themeEngineVersion,
	type: 'wrong_version'
	}
	}
	}
	this.normalizeLocalState(theme, version, source, forcedSourceLoad)
	},
	forceLoadLocalStorage () {
	this.loadThemeFromLocalStorage(true)
	},
	dismissWarning () {
	this.themeWarning = undefined
	this.tempImportFile = undefined
	},
	forceLoad () {
	const { origin } = this.themeWarning
	switch (origin) {
	case 'localStorage':
	this.loadThemeFromLocalStorage(true)
	break
	case 'file':
	this.onImport(this.tempImportFile, true)
	break
	}
	this.dismissWarning()
	},
	forceSnapshot () {
	const { origin } = this.themeWarning
	switch (origin) {
	case 'localStorage':
	this.loadThemeFromLocalStorage(false, true)
	break
	case 'file':
	console.err('Forcing snapshout from file is not supported yet')
	break
	}
	this.dismissWarning()
	},
	loadThemeFromLocalStorage (confirmLoadSource = false, forceSnapshot = false) {
	const {
	customTheme: theme,
	customThemeSource: source
	} = this.$store.getters.mergedConfig
	if (!theme && !source) {
	// Anon user or never touched themes
	this.loadTheme(
	this.$store.state.instance.themeData,
	'defaults',
	confirmLoadSource
	)
	} else {
	this.loadTheme(
	{
	theme,
	source: forceSnapshot ? theme : source
	},
	'localStorage',
	confirmLoadSource
	)
	}
	},
	setCustomTheme () {
	this.$store.dispatch('setOption', {
	name: 'customTheme',
	value: {
	themeEngineVersion: CURRENT_VERSION,
	...this.previewTheme
	}
	})
	this.$store.dispatch('setOption', {
	name: 'customThemeSource',
	value: {
	themeEngineVersion: CURRENT_VERSION,
	shadows: this.shadowsLocal,
	fonts: this.fontsLocal,
	opacity: this.currentOpacity,
	colors: this.currentColors,
	radii: this.currentRadii
	}
	})
	},
	updatePreviewColorsAndShadows () {
	this.previewColors = generateColors({
	opacity: this.currentOpacity,
	colors: this.currentColors
	})
	this.previewShadows = generateShadows(
	{ shadows: this.shadowsLocal, opacity: this.previewTheme.opacity, themeEngineVersion: this.engineVersion },
	this.previewColors.theme.colors,
	this.previewColors.mod
	)
	},
	importTheme () { this.themeImporter.importData() },
	exportTheme () { this.themeExporter.exportData() },
	onImport (parsed, forceSource = false) {
	this.tempImportFile = parsed
	this.loadTheme(parsed, 'file', forceSource)
	},
	onImportFailure (result) {
	this.$store.dispatch('pushGlobalNotice', { messageKey: 'settings.invalid_theme_imported', level: 'error' })
	},
	importValidator (parsed) {
	const version = parsed._pleroma_theme_version
	return version >= 1 \|\| version <= 2
	},
	clearAll () {
	this.loadThemeFromLocalStorage()
	},

	// Clears all the extra stuff when loading V1 theme
	clearV1 () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('ColorLocal') \|\| _.endsWith('OpacityLocal'))
	.filter(_ => !v1OnlyNames.includes(_))
	.forEach(key => {
	set(this.$data, key, undefined)
	})
	},

	clearRoundness () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('RadiusLocal'))
	.forEach(key => {
	set(this.$data, key, undefined)
	})
	},

	clearOpacity () {
	Object.keys(this.$data)
	.filter(_ => _.endsWith('OpacityLocal'))
	.forEach(key => {
	set(this.$data, key, undefined)
	})
	},

	clearShadows () {
	this.shadowsLocal = {}
	},

	clearFonts () {
	this.fontsLocal = {}
	},

	/**
	* This applies stored theme data onto form. Supports three versions of data:
	* v3 (version >= 3) - newest version of themes which supports snapshots for better compatiblity
	* v2 (version = 2) - newer version of themes.
	* v1 (version = 1) - older version of themes (import from file)
	* v1l (version = l1) - older version of theme (load from local storage)
	* v1 and v1l differ because of way themes were stored/exported.
	* @param {Object} theme - theme data (snapshot)
	* @param {Number} version - version of data. 0 means try to guess based on data. "l1" means v1, locastorage type
	* @param {Object} source - theme source - this will be used if compatible
	* @param {Boolean} source - by default source won't be used if version doesn't match since it might render differently
	* this allows importing source anyway
	*/
	normalizeLocalState (theme, version = 0, source, forceSource = false) {
	let input
	if (typeof source !== 'undefined') {
	if (forceSource \|\| source.themeEngineVersion === CURRENT_VERSION) {
	input = source
	version = source.themeEngineVersion
	} else {
	input = theme
	}
	} else {
	input = theme
	}

	const radii = input.radii \|\| input
	const opacity = input.opacity
	const shadows = input.shadows \|\| {}
	const fonts = input.fonts \|\| {}
	const colors = !input.themeEngineVersion
	? colors2to3(input.colors \|\| input)
	: input.colors \|\| input

	if (version === 0) {
	if (input.version) version = input.version
	// Old v1 naming: fg is text, btn is foreground
	if (typeof colors.text === 'undefined' && typeof colors.fg !== 'undefined') {
	version = 1
	}
	// New v2 naming: text is text, fg is foreground
	if (typeof colors.text !== 'undefined' && typeof colors.fg !== 'undefined') {
	version = 2
	}
	}

	this.engineVersion = version

	// Stuff that differs between V1 and V2
	if (version === 1) {
	this.fgColorLocal = rgb2hex(colors.btn)
	this.textColorLocal = rgb2hex(colors.fg)
	}

	if (!this.keepColor) {
	this.clearV1()
	const keys = new Set(version !== 1 ? Object.keys(SLOT_INHERITANCE) : [])
	if (version === 1 \|\| version === 'l1') {
	keys
	.add('bg')
	.add('link')
	.add('cRed')
	.add('cBlue')
	.add('cGreen')
	.add('cOrange')
	}

	keys.forEach(key => {
	const color = colors[key]
	const hex = rgb2hex(colors[key])
	this[key + 'ColorLocal'] = hex === '#aN' ? color : hex
	})
	}

	if (opacity && !this.keepOpacity) {
	this.clearOpacity()
	Object.entries(opacity).forEach(([k, v]) => {
	if (typeof v === 'undefined' \|\| v === null \|\| Number.isNaN(v)) return
	this[k + 'OpacityLocal'] = v
	})
	}

	if (!this.keepRoundness) {
	this.clearRoundness()
	Object.entries(radii).forEach(([k, v]) => {
	// 'Radius' is kept mostly for v1->v2 localstorage transition
	const key = k.endsWith('Radius') ? k.split('Radius')[0] : k
	this[key + 'RadiusLocal'] = v
	})
	}

	if (!this.keepShadows) {
	this.clearShadows()
	if (version === 2) {
	this.shadowsLocal = shadows2to3(shadows, this.previewTheme.opacity)
	} else {
	this.shadowsLocal = shadows
	}
	this.shadowSelected = this.shadowsAvailable[0]
	}

	if (!this.keepFonts) {
	this.clearFonts()
	this.fontsLocal = fonts
	}
	}
	},
	watch: {
	currentRadii () {
	try {
	this.previewRadii = generateRadii({ radii: this.currentRadii })
	this.radiiInvalid = false
	} catch (e) {
	this.radiiInvalid = true
	console.warn(e)
	}
	},
	shadowsLocal: {
	handler () {
	if (Object.getOwnPropertyNames(this.previewColors).length === 1) return
	try {
	this.updatePreviewColorsAndShadows()
	this.shadowsInvalid = false
	} catch (e) {
	this.shadowsInvalid = true
	console.warn(e)
	}
	},
	deep: true
	},
	fontsLocal: {
	handler () {
	try {
	this.previewFonts = generateFonts({ fonts: this.fontsLocal })
	this.fontsInvalid = false
	} catch (e) {
	this.fontsInvalid = true
	console.warn(e)
	}
	},
	deep: true
	},
	currentColors () {
	try {
	this.updatePreviewColorsAndShadows()
	this.colorsInvalid = false
	this.shadowsInvalid = false
	} catch (e) {
	this.colorsInvalid = true
	this.shadowsInvalid = true
	console.warn(e)
	}
	},
	currentOpacity () {
	try {
	this.updatePreviewColorsAndShadows()
	} catch (e) {
	console.warn(e)
	}
	},
	selected () {
	this.dismissWarning()
	if (this.selectedVersion === 1) {
	if (!this.keepRoundness) {
	this.clearRoundness()
	}

	if (!this.keepShadows) {
	this.clearShadows()
	}

	if (!this.keepOpacity) {
	this.clearOpacity()
	}

	if (!this.keepColor) {
	this.clearV1()

	this.bgColorLocal = this.selected[1]
	this.fgColorLocal = this.selected[2]
	this.textColorLocal = this.selected[3]
	this.linkColorLocal = this.selected[4]
	this.cRedColorLocal = this.selected[5]
	this.cGreenColorLocal = this.selected[6]
	this.cBlueColorLocal = this.selected[7]
	this.cOrangeColorLocal = this.selected[8]
	}
	} else if (this.selectedVersion >= 2) {
	this.normalizeLocalState(this.selected.theme, 2, this.selected.source)
	}
	}
	}
	}
	diff --git a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
	index 6237886708..548dc85233 100644
	--- a/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
	+++ b/src/components/settings_modal/tabs/theme_tab/theme_tab.vue
	@@ -1,1052 +1,1039 @@
	<template>
	<div class="theme-tab">
	<div class="presets-container">
	<div class="save-load">
	<div
	v-if="themeWarning"
	class="theme-warning"
	>
	<div class="alert warning">
	{{ themeWarningHelp }}
	</div>
	<div class="buttons">
	<template v-if="themeWarning.type === 'snapshot_source_mismatch'">
	<button
	class="btn button-default"
	@click="forceLoad"
	>
	{{ $t('settings.style.switcher.use_source') }}
	</button>
	<button
	class="btn button-default"
	@click="forceSnapshot"
	>
	{{ $t('settings.style.switcher.use_snapshot') }}
	</button>
	</template>
	<template v-else-if="themeWarning.noActionsPossible">
	<button
	class="btn button-default"
	@click="dismissWarning"
	>
	{{ $t('general.dismiss') }}
	</button>
	</template>
	<template v-else>
	<button
	class="btn button-default"
	@click="forceLoad"
	>
	{{ $t('settings.style.switcher.load_theme') }}
	</button>
	<button
	class="btn button-default"
	@click="dismissWarning"
	>
	{{ $t('settings.style.switcher.keep_as_is') }}
	</button>
	</template>
	</div>
	</div>
	<div class="top">
	<div class="presets">
	{{ $t('settings.presets') }}
	<label
	for="preset-switcher"
	class="select"
	>
	- <select
	+ <Select
	id="preset-switcher"
	v-model="selected"
	class="preset-switcher"
	>
	<option
	v-for="style in availableStyles"
	:key="style.name"
	:value="style"
	:style="{
	backgroundColor: style[1] \|\| (style.theme \|\| style.source).colors.bg,
	color: style[3] \|\| (style.theme \|\| style.source).colors.text
	}"
	>
	{{ style[0] \|\| style.name }}
	</option>
	- </select>
	- <FAIcon
	- class="select-down-icon"
	- icon="chevron-down"
	- />
	+ </Select>
	</label>
	</div>
	<div class="export-import">
	<button
	class="btn button-default"
	@click="importTheme"
	>
	{{ $t("settings.import_theme") }}
	</button>
	<button
	class="btn button-default"
	@click="exportTheme"
	>
	{{ $t("settings.export_theme") }}
	</button>
	</div>
	</div>
	</div>
	<div class="save-load-options">
	<span class="keep-option">
	<Checkbox v-model="keepColor">
	{{ $t('settings.style.switcher.keep_color') }}
	</Checkbox>
	</span>
	<span class="keep-option">
	<Checkbox v-model="keepShadows">
	{{ $t('settings.style.switcher.keep_shadows') }}
	</Checkbox>
	</span>
	<span class="keep-option">
	<Checkbox v-model="keepOpacity">
	{{ $t('settings.style.switcher.keep_opacity') }}
	</Checkbox>
	</span>
	<span class="keep-option">
	<Checkbox v-model="keepRoundness">
	{{ $t('settings.style.switcher.keep_roundness') }}
	</Checkbox>
	</span>
	<span class="keep-option">
	<Checkbox v-model="keepFonts">
	{{ $t('settings.style.switcher.keep_fonts') }}
	</Checkbox>
	</span>
	<p>{{ $t('settings.style.switcher.save_load_hint') }}</p>
	</div>
	</div>

	<preview :style="previewRules" />

	<keep-alive>
	<tab-switcher key="style-tweak">
	<div
	:label="$t('settings.style.common_colors._tab_label')"
	class="color-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.theme_help') }}</p>
	<div class="tab-header-buttons">
	<button
	class="btn button-default"
	@click="clearOpacity"
	>
	{{ $t('settings.style.switcher.clear_opacity') }}
	</button>
	<button
	class="btn button-default"
	@click="clearV1"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	</div>
	<p>{{ $t('settings.theme_help_v2_1') }}</p>
	<h4>{{ $t('settings.style.common_colors.main') }}</h4>
	<div class="color-item">
	<ColorInput
	v-model="bgColorLocal"
	name="bgColor"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="bgOpacityLocal"
	name="bgOpacity"
	:fallback="previewTheme.opacity.bg"
	/>
	<ColorInput
	v-model="textColorLocal"
	name="textColor"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.bgText" />
	<ColorInput
	v-model="accentColorLocal"
	name="accentColor"
	:fallback="previewTheme.colors.link"
	:label="$t('settings.accent')"
	:show-optional-tickbox="typeof linkColorLocal !== 'undefined'"
	/>
	<ColorInput
	v-model="linkColorLocal"
	name="linkColor"
	:fallback="previewTheme.colors.accent"
	:label="$t('settings.links')"
	:show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
	/>
	<ContrastRatio :contrast="previewContrast.bgLink" />
	</div>
	<div class="color-item">
	<ColorInput
	v-model="fgColorLocal"
	name="fgColor"
	:label="$t('settings.foreground')"
	/>
	<ColorInput
	v-model="fgTextColorLocal"
	name="fgTextColor"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.fgText"
	/>
	<ColorInput
	v-model="fgLinkColorLocal"
	name="fgLinkColor"
	:label="$t('settings.links')"
	:fallback="previewTheme.colors.fgLink"
	/>
	<p>{{ $t('settings.style.common_colors.foreground_hint') }}</p>
	</div>
	<h4>{{ $t('settings.style.common_colors.rgbo') }}</h4>
	<div class="color-item">
	<ColorInput
	v-model="cRedColorLocal"
	name="cRedColor"
	:label="$t('settings.cRed')"
	/>
	<ContrastRatio :contrast="previewContrast.bgCRed" />
	<ColorInput
	v-model="cBlueColorLocal"
	name="cBlueColor"
	:label="$t('settings.cBlue')"
	/>
	<ContrastRatio :contrast="previewContrast.bgCBlue" />
	</div>
	<div class="color-item">
	<ColorInput
	v-model="cGreenColorLocal"
	name="cGreenColor"
	:label="$t('settings.cGreen')"
	/>
	<ContrastRatio :contrast="previewContrast.bgCGreen" />
	<ColorInput
	v-model="cOrangeColorLocal"
	name="cOrangeColor"
	:label="$t('settings.cOrange')"
	/>
	<ContrastRatio :contrast="previewContrast.bgCOrange" />
	</div>
	<p>{{ $t('settings.theme_help_v2_2') }}</p>
	</div>

	<div
	:label="$t('settings.style.advanced_colors._tab_label')"
	class="color-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.theme_help') }}</p>
	<button
	class="btn button-default"
	@click="clearOpacity"
	>
	{{ $t('settings.style.switcher.clear_opacity') }}
	</button>
	<button
	class="btn button-default"
	@click="clearV1"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.post') }}</h4>
	<ColorInput
	v-model="postLinkColorLocal"
	name="postLinkColor"
	:fallback="previewTheme.colors.accent"
	:label="$t('settings.links')"
	/>
	<ContrastRatio :contrast="previewContrast.postLink" />
	<ColorInput
	v-model="postGreentextColorLocal"
	name="postGreentextColor"
	:fallback="previewTheme.colors.cGreen"
	:label="$t('settings.greentext')"
	/>
	<ContrastRatio :contrast="previewContrast.postGreentext" />
	<h4>{{ $t('settings.style.advanced_colors.alert') }}</h4>
	<ColorInput
	v-model="alertErrorColorLocal"
	name="alertError"
	:label="$t('settings.style.advanced_colors.alert_error')"
	:fallback="previewTheme.colors.alertError"
	/>
	<ColorInput
	v-model="alertErrorTextColorLocal"
	name="alertErrorText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.alertErrorText"
	/>
	<ContrastRatio
	:contrast="previewContrast.alertErrorText"
	large
	/>
	<ColorInput
	v-model="alertWarningColorLocal"
	name="alertWarning"
	:label="$t('settings.style.advanced_colors.alert_warning')"
	:fallback="previewTheme.colors.alertWarning"
	/>
	<ColorInput
	v-model="alertWarningTextColorLocal"
	name="alertWarningText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.alertWarningText"
	/>
	<ContrastRatio
	:contrast="previewContrast.alertWarningText"
	large
	/>
	<ColorInput
	v-model="alertNeutralColorLocal"
	name="alertNeutral"
	:label="$t('settings.style.advanced_colors.alert_neutral')"
	:fallback="previewTheme.colors.alertNeutral"
	/>
	<ColorInput
	v-model="alertNeutralTextColorLocal"
	name="alertNeutralText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.alertNeutralText"
	/>
	<ContrastRatio
	:contrast="previewContrast.alertNeutralText"
	large
	/>
	<OpacityInput
	v-model="alertOpacityLocal"
	name="alertOpacity"
	:fallback="previewTheme.opacity.alert"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.badge') }}</h4>
	<ColorInput
	v-model="badgeNotificationColorLocal"
	name="badgeNotification"
	:label="$t('settings.style.advanced_colors.badge_notification')"
	:fallback="previewTheme.colors.badgeNotification"
	/>
	<ColorInput
	v-model="badgeNotificationTextColorLocal"
	name="badgeNotificationText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.badgeNotificationText"
	/>
	<ContrastRatio
	:contrast="previewContrast.badgeNotificationText"
	large
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4>
	<ColorInput
	v-model="panelColorLocal"
	name="panelColor"
	:fallback="previewTheme.colors.panel"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="panelOpacityLocal"
	name="panelOpacity"
	:fallback="previewTheme.opacity.panel"
	:disabled="panelColorLocal === 'transparent'"
	/>
	<ColorInput
	v-model="panelTextColorLocal"
	name="panelTextColor"
	:fallback="previewTheme.colors.panelText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio
	:contrast="previewContrast.panelText"
	large
	/>
	<ColorInput
	v-model="panelLinkColorLocal"
	name="panelLinkColor"
	:fallback="previewTheme.colors.panelLink"
	:label="$t('settings.links')"
	/>
	<ContrastRatio
	:contrast="previewContrast.panelLink"
	large
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4>
	<ColorInput
	v-model="topBarColorLocal"
	name="topBarColor"
	:fallback="previewTheme.colors.topBar"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="topBarTextColorLocal"
	name="topBarTextColor"
	:fallback="previewTheme.colors.topBarText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.topBarText" />
	<ColorInput
	v-model="topBarLinkColorLocal"
	name="topBarLinkColor"
	:fallback="previewTheme.colors.topBarLink"
	:label="$t('settings.links')"
	/>
	<ContrastRatio :contrast="previewContrast.topBarLink" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4>
	<ColorInput
	v-model="inputColorLocal"
	name="inputColor"
	:fallback="previewTheme.colors.input"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="inputOpacityLocal"
	name="inputOpacity"
	:fallback="previewTheme.opacity.input"
	:disabled="inputColorLocal === 'transparent'"
	/>
	<ColorInput
	v-model="inputTextColorLocal"
	name="inputTextColor"
	:fallback="previewTheme.colors.inputText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.inputText" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4>
	<ColorInput
	v-model="btnColorLocal"
	name="btnColor"
	:fallback="previewTheme.colors.btn"
	:label="$t('settings.background')"
	/>
	<OpacityInput
	v-model="btnOpacityLocal"
	name="btnOpacity"
	:fallback="previewTheme.opacity.btn"
	:disabled="btnColorLocal === 'transparent'"
	/>
	<ColorInput
	v-model="btnTextColorLocal"
	name="btnTextColor"
	:fallback="previewTheme.colors.btnText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.btnText" />
	<ColorInput
	v-model="btnPanelTextColorLocal"
	name="btnPanelTextColor"
	:fallback="previewTheme.colors.btnPanelText"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	<ContrastRatio :contrast="previewContrast.btnPanelText" />
	<ColorInput
	v-model="btnTopBarTextColorLocal"
	name="btnTopBarTextColor"
	:fallback="previewTheme.colors.btnTopBarText"
	:label="$t('settings.style.advanced_colors.top_bar')"
	/>
	<ContrastRatio :contrast="previewContrast.btnTopBarText" />
	<h5>{{ $t('settings.style.advanced_colors.pressed') }}</h5>
	<ColorInput
	v-model="btnPressedColorLocal"
	name="btnPressedColor"
	:fallback="previewTheme.colors.btnPressed"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="btnPressedTextColorLocal"
	name="btnPressedTextColor"
	:fallback="previewTheme.colors.btnPressedText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.btnPressedText" />
	<ColorInput
	v-model="btnPressedPanelTextColorLocal"
	name="btnPressedPanelTextColor"
	:fallback="previewTheme.colors.btnPressedPanelText"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	<ContrastRatio :contrast="previewContrast.btnPressedPanelText" />
	<ColorInput
	v-model="btnPressedTopBarTextColorLocal"
	name="btnPressedTopBarTextColor"
	:fallback="previewTheme.colors.btnPressedTopBarText"
	:label="$t('settings.style.advanced_colors.top_bar')"
	/>
	<ContrastRatio :contrast="previewContrast.btnPressedTopBarText" />
	<h5>{{ $t('settings.style.advanced_colors.disabled') }}</h5>
	<ColorInput
	v-model="btnDisabledColorLocal"
	name="btnDisabledColor"
	:fallback="previewTheme.colors.btnDisabled"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="btnDisabledTextColorLocal"
	name="btnDisabledTextColor"
	:fallback="previewTheme.colors.btnDisabledText"
	:label="$t('settings.text')"
	/>
	<ColorInput
	v-model="btnDisabledPanelTextColorLocal"
	name="btnDisabledPanelTextColor"
	:fallback="previewTheme.colors.btnDisabledPanelText"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	<ColorInput
	v-model="btnDisabledTopBarTextColorLocal"
	name="btnDisabledTopBarTextColor"
	:fallback="previewTheme.colors.btnDisabledTopBarText"
	:label="$t('settings.style.advanced_colors.top_bar')"
	/>
	<h5>{{ $t('settings.style.advanced_colors.toggled') }}</h5>
	<ColorInput
	v-model="btnToggledColorLocal"
	name="btnToggledColor"
	:fallback="previewTheme.colors.btnToggled"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="btnToggledTextColorLocal"
	name="btnToggledTextColor"
	:fallback="previewTheme.colors.btnToggledText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.btnToggledText" />
	<ColorInput
	v-model="btnToggledPanelTextColorLocal"
	name="btnToggledPanelTextColor"
	:fallback="previewTheme.colors.btnToggledPanelText"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	<ContrastRatio :contrast="previewContrast.btnToggledPanelText" />
	<ColorInput
	v-model="btnToggledTopBarTextColorLocal"
	name="btnToggledTopBarTextColor"
	:fallback="previewTheme.colors.btnToggledTopBarText"
	:label="$t('settings.style.advanced_colors.top_bar')"
	/>
	<ContrastRatio :contrast="previewContrast.btnToggledTopBarText" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.tabs') }}</h4>
	<ColorInput
	v-model="tabColorLocal"
	name="tabColor"
	:fallback="previewTheme.colors.tab"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="tabTextColorLocal"
	name="tabTextColor"
	:fallback="previewTheme.colors.tabText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.tabText" />
	<ColorInput
	v-model="tabActiveTextColorLocal"
	name="tabActiveTextColor"
	:fallback="previewTheme.colors.tabActiveText"
	:label="$t('settings.text')"
	/>
	<ContrastRatio :contrast="previewContrast.tabActiveText" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.borders') }}</h4>
	<ColorInput
	v-model="borderColorLocal"
	name="borderColor"
	:fallback="previewTheme.colors.border"
	:label="$t('settings.style.common.color')"
	/>
	<OpacityInput
	v-model="borderOpacityLocal"
	name="borderOpacity"
	:fallback="previewTheme.opacity.border"
	:disabled="borderColorLocal === 'transparent'"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4>
	<ColorInput
	v-model="faintColorLocal"
	name="faintColor"
	:fallback="previewTheme.colors.faint"
	:label="$t('settings.text')"
	/>
	<ColorInput
	v-model="faintLinkColorLocal"
	name="faintLinkColor"
	:fallback="previewTheme.colors.faintLink"
	:label="$t('settings.links')"
	/>
	<ColorInput
	v-model="panelFaintColorLocal"
	name="panelFaintColor"
	:fallback="previewTheme.colors.panelFaint"
	:label="$t('settings.style.advanced_colors.panel_header')"
	/>
	<OpacityInput
	v-model="faintOpacityLocal"
	name="faintOpacity"
	:fallback="previewTheme.opacity.faint"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.underlay') }}</h4>
	<ColorInput
	v-model="underlayColorLocal"
	name="underlay"
	:label="$t('settings.style.advanced_colors.underlay')"
	:fallback="previewTheme.colors.underlay"
	/>
	<OpacityInput
	v-model="underlayOpacityLocal"
	name="underlayOpacity"
	:fallback="previewTheme.opacity.underlay"
	:disabled="underlayOpacityLocal === 'transparent'"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.wallpaper') }}</h4>
	<ColorInput
	v-model="wallpaperColorLocal"
	name="wallpaper"
	:label="$t('settings.style.advanced_colors.wallpaper')"
	:fallback="previewTheme.colors.wallpaper"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.poll') }}</h4>
	<ColorInput
	v-model="pollColorLocal"
	name="poll"
	:label="$t('settings.background')"
	:fallback="previewTheme.colors.poll"
	/>
	<ColorInput
	v-model="pollTextColorLocal"
	name="pollText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.pollText"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.icons') }}</h4>
	<ColorInput
	v-model="iconColorLocal"
	name="icon"
	:label="$t('settings.style.advanced_colors.icons')"
	:fallback="previewTheme.colors.icon"
	/>
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.highlight') }}</h4>
	<ColorInput
	v-model="highlightColorLocal"
	name="highlight"
	:label="$t('settings.background')"
	:fallback="previewTheme.colors.highlight"
	/>
	<ColorInput
	v-model="highlightTextColorLocal"
	name="highlightText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.highlightText"
	/>
	<ContrastRatio :contrast="previewContrast.highlightText" />
	<ColorInput
	v-model="highlightLinkColorLocal"
	name="highlightLink"
	:label="$t('settings.links')"
	:fallback="previewTheme.colors.highlightLink"
	/>
	<ContrastRatio :contrast="previewContrast.highlightLink" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.popover') }}</h4>
	<ColorInput
	v-model="popoverColorLocal"
	name="popover"
	:label="$t('settings.background')"
	:fallback="previewTheme.colors.popover"
	/>
	<OpacityInput
	v-model="popoverOpacityLocal"
	name="popoverOpacity"
	:fallback="previewTheme.opacity.popover"
	:disabled="popoverOpacityLocal === 'transparent'"
	/>
	<ColorInput
	v-model="popoverTextColorLocal"
	name="popoverText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.popoverText"
	/>
	<ContrastRatio :contrast="previewContrast.popoverText" />
	<ColorInput
	v-model="popoverLinkColorLocal"
	name="popoverLink"
	:label="$t('settings.links')"
	:fallback="previewTheme.colors.popoverLink"
	/>
	<ContrastRatio :contrast="previewContrast.popoverLink" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.selectedPost') }}</h4>
	<ColorInput
	v-model="selectedPostColorLocal"
	name="selectedPost"
	:label="$t('settings.background')"
	:fallback="previewTheme.colors.selectedPost"
	/>
	<ColorInput
	v-model="selectedPostTextColorLocal"
	name="selectedPostText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.selectedPostText"
	/>
	<ContrastRatio :contrast="previewContrast.selectedPostText" />
	<ColorInput
	v-model="selectedPostLinkColorLocal"
	name="selectedPostLink"
	:label="$t('settings.links')"
	:fallback="previewTheme.colors.selectedPostLink"
	/>
	<ContrastRatio :contrast="previewContrast.selectedPostLink" />
	</div>
	<div class="color-item">
	<h4>{{ $t('settings.style.advanced_colors.selectedMenu') }}</h4>
	<ColorInput
	v-model="selectedMenuColorLocal"
	name="selectedMenu"
	:label="$t('settings.background')"
	:fallback="previewTheme.colors.selectedMenu"
	/>
	<ColorInput
	v-model="selectedMenuTextColorLocal"
	name="selectedMenuText"
	:label="$t('settings.text')"
	:fallback="previewTheme.colors.selectedMenuText"
	/>
	<ContrastRatio :contrast="previewContrast.selectedMenuText" />
	<ColorInput
	v-model="selectedMenuLinkColorLocal"
	name="selectedMenuLink"
	:label="$t('settings.links')"
	:fallback="previewTheme.colors.selectedMenuLink"
	/>
	<ContrastRatio :contrast="previewContrast.selectedMenuLink" />
	</div>
	<div class="color-item">
	<h4>{{ $t('chats.chats') }}</h4>
	<ColorInput
	v-model="chatBgColorLocal"
	name="chatBgColor"
	:fallback="previewTheme.colors.bg"
	:label="$t('settings.background')"
	/>
	<h5>{{ $t('settings.style.advanced_colors.chat.incoming') }}</h5>
	<ColorInput
	v-model="chatMessageIncomingBgColorLocal"
	name="chatMessageIncomingBgColor"
	:fallback="previewTheme.colors.bg"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="chatMessageIncomingTextColorLocal"
	name="chatMessageIncomingTextColor"
	:fallback="previewTheme.colors.text"
	:label="$t('settings.text')"
	/>
	<ColorInput
	v-model="chatMessageIncomingLinkColorLocal"
	name="chatMessageIncomingLinkColor"
	:fallback="previewTheme.colors.link"
	:label="$t('settings.links')"
	/>
	<ColorInput
	v-model="chatMessageIncomingBorderColorLocal"
	name="chatMessageIncomingBorderLinkColor"
	:fallback="previewTheme.colors.fg"
	:label="$t('settings.style.advanced_colors.chat.border')"
	/>
	<h5>{{ $t('settings.style.advanced_colors.chat.outgoing') }}</h5>
	<ColorInput
	v-model="chatMessageOutgoingBgColorLocal"
	name="chatMessageOutgoingBgColor"
	:fallback="previewTheme.colors.bg"
	:label="$t('settings.background')"
	/>
	<ColorInput
	v-model="chatMessageOutgoingTextColorLocal"
	name="chatMessageOutgoingTextColor"
	:fallback="previewTheme.colors.text"
	:label="$t('settings.text')"
	/>
	<ColorInput
	v-model="chatMessageOutgoingLinkColorLocal"
	name="chatMessageOutgoingLinkColor"
	:fallback="previewTheme.colors.link"
	:label="$t('settings.links')"
	/>
	<ColorInput
	v-model="chatMessageOutgoingBorderColorLocal"
	name="chatMessageOutgoingBorderLinkColor"
	:fallback="previewTheme.colors.bg"
	:label="$t('settings.style.advanced_colors.chat.border')"
	/>
	</div>
	</div>

	<div
	:label="$t('settings.style.radii._tab_label')"
	class="radius-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.radii_help') }}</p>
	<button
	class="btn button-default"
	@click="clearRoundness"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<RangeInput
	v-model="btnRadiusLocal"
	name="btnRadius"
	:label="$t('settings.btnRadius')"
	:fallback="previewTheme.radii.btn"
	max="16"
	hard-min="0"
	/>
	<RangeInput
	v-model="inputRadiusLocal"
	name="inputRadius"
	:label="$t('settings.inputRadius')"
	:fallback="previewTheme.radii.input"
	max="9"
	hard-min="0"
	/>
	<RangeInput
	v-model="checkboxRadiusLocal"
	name="checkboxRadius"
	:label="$t('settings.checkboxRadius')"
	:fallback="previewTheme.radii.checkbox"
	max="16"
	hard-min="0"
	/>
	<RangeInput
	v-model="panelRadiusLocal"
	name="panelRadius"
	:label="$t('settings.panelRadius')"
	:fallback="previewTheme.radii.panel"
	max="50"
	hard-min="0"
	/>
	<RangeInput
	v-model="avatarRadiusLocal"
	name="avatarRadius"
	:label="$t('settings.avatarRadius')"
	:fallback="previewTheme.radii.avatar"
	max="28"
	hard-min="0"
	/>
	<RangeInput
	v-model="avatarAltRadiusLocal"
	name="avatarAltRadius"
	:label="$t('settings.avatarAltRadius')"
	:fallback="previewTheme.radii.avatarAlt"
	max="28"
	hard-min="0"
	/>
	<RangeInput
	v-model="attachmentRadiusLocal"
	name="attachmentRadius"
	:label="$t('settings.attachmentRadius')"
	:fallback="previewTheme.radii.attachment"
	max="50"
	hard-min="0"
	/>
	<RangeInput
	v-model="tooltipRadiusLocal"
	name="tooltipRadius"
	:label="$t('settings.tooltipRadius')"
	:fallback="previewTheme.radii.tooltip"
	max="50"
	hard-min="0"
	/>
	<RangeInput
	v-model="chatMessageRadiusLocal"
	name="chatMessageRadius"
	:label="$t('settings.chatMessageRadius')"
	:fallback="previewTheme.radii.chatMessage \|\| 2"
	max="50"
	hard-min="0"
	/>
	</div>

	<div
	:label="$t('settings.style.shadows._tab_label')"
	class="shadow-container"
	>
	<div class="tab-header shadow-selector">
	<div class="select-container">
	{{ $t('settings.style.shadows.component') }}
	- <label
	- for="shadow-switcher"
	- class="select"
	+ <Select
	+ id="shadow-switcher"
	+ v-model="shadowSelected"
	+ class="shadow-switcher"
	>
	- <select
	- id="shadow-switcher"
	- v-model="shadowSelected"
	- class="shadow-switcher"
	+ <option
	+ v-for="shadow in shadowsAvailable"
	+ :key="shadow"
	+ :value="shadow"
	>
	- <option
	- v-for="shadow in shadowsAvailable"
	- :key="shadow"
	- :value="shadow"
	- >
	- {{ $t('settings.style.shadows.components.' + shadow) }}
	- </option>
	- </select>
	- <FAIcon
	- class="select-down-icon"
	- icon="chevron-down"
	- />
	- </label>
	+ {{ $t('settings.style.shadows.components.' + shadow) }}
	+ </option>
	+ </Select>
	</div>
	<div class="override">
	<label
	for="override"
	class="label"
	>
	{{ $t('settings.style.shadows.override') }}
	</label>
	<input
	id="override"
	v-model="currentShadowOverriden"
	name="override"
	class="input-override"
	type="checkbox"
	>
	<label
	class="checkbox-label"
	for="override"
	/>
	</div>
	<button
	class="btn button-default"
	@click="clearShadows"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<ShadowControl
	v-model="currentShadow"
	:ready="!!currentShadowFallback"
	:fallback="currentShadowFallback"
	/>
	<div v-if="shadowSelected === 'avatar' \|\| shadowSelected === 'avatarStatus'">
	<i18n
	path="settings.style.shadows.filter_hint.always_drop_shadow"
	tag="p"
	>
	<code>filter: drop-shadow()</code>
	</i18n>
	<p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p>
	<i18n
	path="settings.style.shadows.filter_hint.drop_shadow_syntax"
	tag="p"
	>
	<code>drop-shadow</code>
	<code>spread-radius</code>
	<code>inset</code>
	</i18n>
	<i18n
	path="settings.style.shadows.filter_hint.inset_classic"
	tag="p"
	>
	<code>box-shadow</code>
	</i18n>
	<p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p>
	</div>
	</div>

	<div
	:label="$t('settings.style.fonts._tab_label')"
	class="fonts-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.style.fonts.help') }}</p>
	<button
	class="btn button-default"
	@click="clearFonts"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</div>
	<FontControl
	v-model="fontsLocal.interface"
	name="ui"
	:label="$t('settings.style.fonts.components.interface')"
	:fallback="previewTheme.fonts.interface"
	no-inherit="1"
	/>
	<FontControl
	v-model="fontsLocal.input"
	name="input"
	:label="$t('settings.style.fonts.components.input')"
	:fallback="previewTheme.fonts.input"
	/>
	<FontControl
	v-model="fontsLocal.post"
	name="post"
	:label="$t('settings.style.fonts.components.post')"
	:fallback="previewTheme.fonts.post"
	/>
	<FontControl
	v-model="fontsLocal.postCode"
	name="postCode"
	:label="$t('settings.style.fonts.components.postCode')"
	:fallback="previewTheme.fonts.postCode"
	/>
	</div>
	</tab-switcher>
	</keep-alive>

	<div class="apply-container">
	<button
	class="btn button-default submit"
	:disabled="!themeValid"
	@click="setCustomTheme"
	>
	{{ $t('general.apply') }}
	</button>
	<button
	class="btn button-default"
	@click="clearAll"
	>
	{{ $t('settings.style.switcher.reset') }}
	</button>
	</div>
	</div>
	</template>

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

	<style src="./theme_tab.scss" lang="scss"></style>
	diff --git a/src/components/shadow_control/shadow_control.js b/src/components/shadow_control/shadow_control.js
	index 800c39d51b..2d5d6eb165 100644
	--- a/src/components/shadow_control/shadow_control.js
	+++ b/src/components/shadow_control/shadow_control.js
	@@ -1,117 +1,119 @@
	import ColorInput from '../color_input/color_input.vue'
	import OpacityInput from '../opacity_input/opacity_input.vue'
	+import Select from '../select/select.vue'
	import { getCssShadow } from '../../services/style_setter/style_setter.js'
	import { hex2rgb } from '../../services/color_convert/color_convert.js'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faTimes,
	faChevronDown,
	faChevronUp,
	faPlus
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faChevronDown,
	faChevronUp,
	faTimes,
	faPlus
	)

	const toModel = (object = {}) => ({
	x: 0,
	y: 0,
	blur: 0,
	spread: 0,
	inset: false,
	color: '#000000',
	alpha: 1,
	...object
	})

	export default {
	// 'Value' and 'Fallback' can be undefined, but if they are
	// initially vue won't detect it when they become something else
	// therefore i'm using "ready" which should be passed as true when
	// data becomes available
	props: [
	'value', 'fallback', 'ready'
	],
	data () {
	return {
	selectedId: 0,
	// TODO there are some bugs regarding display of array (it's not getting updated when deleting for some reason)
	cValue: (this.value \|\| this.fallback \|\| []).map(toModel)
	}
	},
	components: {
	ColorInput,
	- OpacityInput
	+ OpacityInput,
	+ Select
	},
	methods: {
	add () {
	this.cValue.push(toModel(this.selected))
	this.selectedId = this.cValue.length - 1
	},
	del () {
	this.cValue.splice(this.selectedId, 1)
	this.selectedId = this.cValue.length === 0 ? undefined : Math.max(this.selectedId - 1, 0)
	},
	moveUp () {
	const movable = this.cValue.splice(this.selectedId, 1)[0]
	this.cValue.splice(this.selectedId - 1, 0, movable)
	this.selectedId -= 1
	},
	moveDn () {
	const movable = this.cValue.splice(this.selectedId, 1)[0]
	this.cValue.splice(this.selectedId + 1, 0, movable)
	this.selectedId += 1
	}
	},
	beforeUpdate () {
	this.cValue = this.value \|\| this.fallback
	},
	computed: {
	anyShadows () {
	return this.cValue.length > 0
	},
	anyShadowsFallback () {
	return this.fallback.length > 0
	},
	selected () {
	if (this.ready && this.anyShadows) {
	return this.cValue[this.selectedId]
	} else {
	return toModel({})
	}
	},
	currentFallback () {
	if (this.ready && this.anyShadowsFallback) {
	return this.fallback[this.selectedId]
	} else {
	return toModel({})
	}
	},
	moveUpValid () {
	return this.ready && this.selectedId > 0
	},
	moveDnValid () {
	return this.ready && this.selectedId < this.cValue.length - 1
	},
	present () {
	return this.ready &&
	typeof this.cValue[this.selectedId] !== 'undefined' &&
	!this.usingFallback
	},
	usingFallback () {
	return typeof this.value === 'undefined'
	},
	rgb () {
	return hex2rgb(this.selected.color)
	},
	style () {
	return this.ready ? {
	boxShadow: getCssShadow(this.fallback)
	} : {}
	}
	}
	}
	diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue
	index 37d491f046..511e07f3f1 100644
	--- a/src/components/shadow_control/shadow_control.vue
	+++ b/src/components/shadow_control/shadow_control.vue
	@@ -1,336 +1,326 @@
	<template>
	<div
	class="shadow-control"
	:class="{ disabled: !present }"
	>
	<div class="shadow-preview-container">
	<div
	:disabled="!present"
	class="y-shift-control"
	>
	<input
	v-model="selected.y"
	:disabled="!present"
	class="input-number"
	type="number"
	>
	<div class="wrap">
	<input
	v-model="selected.y"
	:disabled="!present"
	class="input-range"
	type="range"
	max="20"
	min="-20"
	>
	</div>
	</div>
	<div class="preview-window">
	<div
	class="preview-block"
	:style="style"
	/>
	</div>
	<div
	:disabled="!present"
	class="x-shift-control"
	>
	<input
	v-model="selected.x"
	:disabled="!present"
	class="input-number"
	type="number"
	>
	<div class="wrap">
	<input
	v-model="selected.x"
	:disabled="!present"
	class="input-range"
	type="range"
	max="20"
	min="-20"
	>
	</div>
	</div>
	</div>

	<div class="shadow-tweak">
	<div
	:disabled="usingFallback"
	class="id-control style-control"
	>
	- <label
	- for="shadow-switcher"
	- class="select"
	+ <Select
	+ id="shadow-switcher"
	+ v-model="selectedId"
	+ class="shadow-switcher"
	:disabled="!ready \|\| usingFallback"
	>
	- <select
	- id="shadow-switcher"
	- v-model="selectedId"
	- class="shadow-switcher"
	- :disabled="!ready \|\| usingFallback"
	+ <option
	+ v-for="(shadow, index) in cValue"
	+ :key="index"
	+ :value="index"
	>
	- <option
	- v-for="(shadow, index) in cValue"
	- :key="index"
	- :value="index"
	- >
	- {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
	- </option>
	- </select>
	- <FAIcon
	- icon="chevron-down"
	- class="select-down-icon"
	- />
	- </label>
	+ {{ $t('settings.style.shadows.shadow_id', { value: index }) }}
	+ </option>
	+ </Select>
	<button
	class="btn button-default"
	:disabled="!ready \|\| !present"
	@click="del"
	>
	<FAIcon
	fixed-width
	icon="times"
	/>
	</button>
	<button
	class="btn button-default"
	:disabled="!moveUpValid"
	@click="moveUp"
	>
	<FAIcon
	fixed-width
	icon="chevron-up"
	/>
	</button>
	<button
	class="btn button-default"
	:disabled="!moveDnValid"
	@click="moveDn"
	>
	<FAIcon
	fixed-width
	icon="chevron-down"
	/>
	</button>
	<button
	class="btn button-default"
	:disabled="usingFallback"
	@click="add"
	>
	<FAIcon
	fixed-width
	icon="plus"
	/>
	</button>
	</div>
	<div
	:disabled="!present"
	class="inset-control style-control"
	>
	<label
	for="inset"
	class="label"
	>
	{{ $t('settings.style.shadows.inset') }}
	</label>
	<input
	id="inset"
	v-model="selected.inset"
	:disabled="!present"
	name="inset"
	class="input-inset"
	type="checkbox"
	>
	<label
	class="checkbox-label"
	for="inset"
	/>
	</div>
	<div
	:disabled="!present"
	class="blur-control style-control"
	>
	<label
	for="spread"
	class="label"
	>
	{{ $t('settings.style.shadows.blur') }}
	</label>
	<input
	id="blur"
	v-model="selected.blur"
	:disabled="!present"
	name="blur"
	class="input-range"
	type="range"
	max="20"
	min="0"
	>
	<input
	v-model="selected.blur"
	:disabled="!present"
	class="input-number"
	type="number"
	min="0"
	>
	</div>
	<div
	:disabled="!present"
	class="spread-control style-control"
	>
	<label
	for="spread"
	class="label"
	>
	{{ $t('settings.style.shadows.spread') }}
	</label>
	<input
	id="spread"
	v-model="selected.spread"
	:disabled="!present"
	name="spread"
	class="input-range"
	type="range"
	max="20"
	min="-20"
	>
	<input
	v-model="selected.spread"
	:disabled="!present"
	class="input-number"
	type="number"
	>
	</div>
	<ColorInput
	v-model="selected.color"
	:disabled="!present"
	:label="$t('settings.style.common.color')"
	:fallback="currentFallback.color"
	:show-optional-tickbox="false"
	name="shadow"
	/>
	<OpacityInput
	v-model="selected.alpha"
	:disabled="!present"
	/>
	<i18n
	path="settings.style.shadows.hintV3"
	tag="p"
	>
	<code>--variable,mod</code>
	</i18n>
	</div>
	</div>
	</template>

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

	<style lang="scss">
	@import '../../_variables.scss';
	.shadow-control {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 1em;

	.shadow-preview-container,
	.shadow-tweak {
	margin: 5px 6px 0 0;
	}
	.shadow-preview-container {
	flex: 0;
	display: flex;
	flex-wrap: wrap;

	$side: 15em;

	input[type=number] {
	width: 5em;
	min-width: 2em;
	}
	.x-shift-control,
	.y-shift-control {
	display: flex;
	flex: 0;

	&[disabled=disabled] *{
	opacity: .5
	}

	}

	.x-shift-control {
	align-items: flex-start;
	}

	.x-shift-control .wrap,
	input[type=range] {
	margin: 0;
	width: $side;
	height: 2em;
	}
	.y-shift-control {
	flex-direction: column;
	align-items: flex-end;
	.wrap {
	width: 2em;
	height: $side;
	}
	input[type=range] {
	transform-origin: 1em 1em;
	transform: rotate(90deg);
	}
	}
	.preview-window {
	flex: 1;
	background-color: #999999;
	display: flex;
	align-items: center;
	justify-content: center;
	background-image:
	linear-gradient(45deg, #666666 25%, transparent 25%),
	linear-gradient(-45deg, #666666 25%, transparent 25%),
	linear-gradient(45deg, transparent 75%, #666666 75%),
	linear-gradient(-45deg, transparent 75%, #666666 75%);
	background-size: 20px 20px;
	background-position:0 0, 0 10px, 10px -10px, -10px 0;

	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);

	.preview-block {
	width: 33%;
	height: 33%;
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}
	}
	}

	.shadow-tweak {
	flex: 1;
	min-width: 280px;

	.id-control {
	align-items: stretch;
	- .select, .btn {
	+
	+ .shadow-switcher {
	+ flex: 1;
	+ }
	+
	+ .shadow-switcher, .btn {
	min-width: 1px;
	margin-right: 5px;
	}
	+
	.btn {
	padding: 0 .4em;
	margin: 0 .1em;
	}
	- .select {
	- flex: 1;
	- select {
	- align-self: initial;
	- }
	- }
	}
	}
	}
	</style>
	diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js
	index 3a8efafc91..d9fb64d154 100644
	--- a/src/components/user_card/user_card.js
	+++ b/src/components/user_card/user_card.js
	@@ -1,168 +1,168 @@
	import UserAvatar from '../user_avatar/user_avatar.vue'
	import RemoteFollow from '../remote_follow/remote_follow.vue'
	import ProgressButton from '../progress_button/progress_button.vue'
	import FollowButton from '../follow_button/follow_button.vue'
	import ModerationTools from '../moderation_tools/moderation_tools.vue'
	import AccountActions from '../account_actions/account_actions.vue'
	+import Select from '../select/select.vue'
	import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
	import { mapGetters } from 'vuex'
	import { library } from '@fortawesome/fontawesome-svg-core'
	import {
	faBell,
	faRss,
	- faChevronDown,
	faSearchPlus,
	faExternalLinkAlt
	} from '@fortawesome/free-solid-svg-icons'

	library.add(
	faRss,
	faBell,
	- faChevronDown,
	faSearchPlus,
	faExternalLinkAlt
	)

	export default {
	props: [
	'userId', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar'
	],
	data () {
	return {
	followRequestInProgress: false,
	betterShadow: this.$store.state.interface.browserSupport.cssFilter
	}
	},
	created () {
	this.$store.dispatch('fetchUserRelationship', this.user.id)
	},
	computed: {
	user () {
	return this.$store.getters.findUser(this.userId)
	},
	relationship () {
	return this.$store.getters.relationship(this.userId)
	},
	classes () {
	return [{
	'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius
	'user-card-rounded': this.rounded === true, // set border-radius for all sides
	'user-card-bordered': this.bordered === true // set border for all sides
	}]
	},
	style () {
	return {
	backgroundImage: [
	`linear-gradient(to bottom, var(--profileTint), var(--profileTint))`,
	`url(${this.user.cover_photo})`
	].join(', ')
	}
	},
	isOtherUser () {
	return this.user.id !== this.$store.state.users.currentUser.id
	},
	subscribeUrl () {
	// eslint-disable-next-line no-undef
	const serverUrl = new URL(this.user.statusnet_profile_url)
	return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus`
	},
	loggedIn () {
	return this.$store.state.users.currentUser
	},
	dailyAvg () {
	const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
	return Math.round(this.user.statuses_count / days)
	},
	userHighlightType: {
	get () {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return (data && data.type) \|\| 'disabled'
	},
	set (type) {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	if (type !== 'disabled') {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) \|\| '#FFFFFF', type })
	} else {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined })
	}
	},
	...mapGetters(['mergedConfig'])
	},
	userHighlightColor: {
	get () {
	const data = this.$store.getters.mergedConfig.highlight[this.user.screen_name]
	return data && data.color
	},
	set (color) {
	this.$store.dispatch('setHighlight', { user: this.user.screen_name, color })
	}
	},
	visibleRole () {
	const rights = this.user.rights
	if (!rights) { return }
	const validRole = rights.admin \|\| rights.moderator
	const roleTitle = rights.admin ? 'admin' : 'moderator'
	return validRole && roleTitle
	},
	hideFollowsCount () {
	return this.isOtherUser && this.user.hide_follows_count
	},
	hideFollowersCount () {
	return this.isOtherUser && this.user.hide_followers_count
	},
	...mapGetters(['mergedConfig'])
	},
	components: {
	UserAvatar,
	RemoteFollow,
	ModerationTools,
	AccountActions,
	ProgressButton,
	- FollowButton
	+ FollowButton,
	+ Select
	},
	methods: {
	muteUser () {
	this.$store.dispatch('muteUser', this.user.id)
	},
	unmuteUser () {
	this.$store.dispatch('unmuteUser', this.user.id)
	},
	subscribeUser () {
	return this.$store.dispatch('subscribeUser', this.user.id)
	},
	unsubscribeUser () {
	return this.$store.dispatch('unsubscribeUser', this.user.id)
	},
	setProfileView (v) {
	if (this.switcher) {
	const store = this.$store
	store.commit('setProfileView', { v })
	}
	},
	linkClicked ({ target }) {
	if (target.tagName === 'SPAN') {
	target = target.parentNode
	}
	if (target.tagName === 'A') {
	window.open(target.href, '_blank')
	}
	},
	userProfileLink (user) {
	return generateProfileLink(
	user.id, user.screen_name,
	this.$store.state.instance.restrictedNicknames
	)
	},
	zoomAvatar () {
	const attachment = {
	url: this.user.profile_image_url_original,
	mimetype: 'image'
	}
	this.$store.dispatch('setMedia', [attachment])
	this.$store.dispatch('setCurrent', attachment)
	},
	mentionUser () {
	this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user })
	}
	}
	}
	diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
	index 4b7ee7d5a2..53b55c019b 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,613 +1,606 @@
	<template>
	<div
	class="user-card"
	:class="classes"
	>
	<div
	:class="{ 'hide-bio': hideBio }"
	:style="style"
	class="background-image"
	/>
	<div class="panel-heading">
	<div class="user-info">
	<div class="container">
	<a
	v-if="allowZoomingAvatar"
	class="user-info-avatar-link"
	@click="zoomAvatar"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	<div class="user-info-avatar-link-overlay">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="search-plus"
	/>
	</div>
	</a>
	<router-link
	v-else
	:to="userProfileLink(user)"
	>
	<UserAvatar
	:better-shadow="betterShadow"
	:user="user"
	/>
	</router-link>
	<div class="user-summary">
	<div class="top-line">
	<!-- eslint-disable vue/no-v-html -->
	<div
	v-if="user.name_html"
	:title="user.name"
	class="user-name"
	v-html="user.name_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<div
	v-else
	:title="user.name"
	class="user-name"
	>
	{{ user.name }}
	</div>
	<a
	v-if="isOtherUser && !user.is_local"
	:href="user.statusnet_profile_url"
	target="_blank"
	class="external-link-button"
	>
	<FAIcon
	class="icon"
	icon="external-link-alt"
	/>
	</a>
	<AccountActions
	v-if="isOtherUser && loggedIn"
	:user="user"
	:relationship="relationship"
	/>
	</div>
	<div class="bottom-line">
	<router-link
	class="user-screen-name"
	:title="user.screen_name_ui"
	:to="userProfileLink(user)"
	>
	@{{ user.screen_name_ui }}
	</router-link>
	<template v-if="!hideBio">
	<span
	v-if="!!visibleRole"
	class="alert user-role"
	>
	{{ $t(`general.role.${visibleRole}`) }}
	</span>
	<span
	v-if="user.bot"
	class="alert user-role"
	>
	{{ $t('user_card.bot') }}
	</span>
	</template>
	<span v-if="user.locked">
	<FAIcon
	class="lock-icon"
	icon="lock"
	size="sm"
	/>
	</span>
	<span
	v-if="!mergedConfig.hideUserStats && !hideBio"
	class="dailyAvg"
	>{{ dailyAvg }} {{ $t('user_card.per_day') }}</span>
	</div>
	</div>
	</div>
	<div class="user-meta">
	<div
	v-if="relationship.followed_by && loggedIn && isOtherUser"
	class="following"
	>
	{{ $t('user_card.follows_you') }}
	</div>
	<div
	v-if="isOtherUser && (loggedIn \|\| !switcher)"
	class="highlighter"
	>
	<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColorTx'+user.id"
	v-model="userHighlightColor"
	class="userHighlightText"
	type="text"
	>
	<input
	v-if="userHighlightType !== 'disabled'"
	:id="'userHighlightColor'+user.id"
	v-model="userHighlightColor"
	class="userHighlightCl"
	type="color"
	>
	- <label
	- for="theme_tab"
	- class="userHighlightSel select"
	+ <Select
	+ :id="'userHighlightSel'+user.id"
	+ v-model="userHighlightType"
	+ class="userHighlightSel"
	>
	- <select
	- :id="'userHighlightSel'+user.id"
	- v-model="userHighlightType"
	- class="userHighlightSel"
	- >
	- <option value="disabled">{{ $t('user_card.highlight.disabled') }}</option>
	- <option value="solid">{{ $t('user_card.highlight.solid') }}</option>
	- <option value="striped">{{ $t('user_card.highlight.striped') }}</option>
	- <option value="side">{{ $t('user_card.highlight.side') }}</option>
	- </select>
	- <FAIcon
	- class="select-down-icon"
	- icon="chevron-down"
	- />
	- </label>
	+ <option value="disabled">
	+ {{ $t('user_card.highlight.disabled') }}
	+ </option>
	+ <option value="solid">
	+ {{ $t('user_card.highlight.solid') }}
	+ </option>
	+ <option value="striped">
	+ {{ $t('user_card.highlight.striped') }}
	+ </option>
	+ <option value="side">
	+ {{ $t('user_card.highlight.side') }}
	+ </option>
	+ </Select>
	</div>
	</div>
	<div
	v-if="loggedIn && isOtherUser"
	class="user-interactions"
	>
	<div class="btn-group">
	<FollowButton :relationship="relationship" />
	<template v-if="relationship.following">
	<ProgressButton
	v-if="!relationship.subscribing"
	class="btn button-default"
	:click="subscribeUser"
	:title="$t('user_card.subscribe')"
	>
	<FAIcon icon="bell" />
	</ProgressButton>
	<ProgressButton
	v-else
	class="btn button-default toggled"
	:click="unsubscribeUser"
	:title="$t('user_card.unsubscribe')"
	>
	<FALayers>
	<FAIcon
	icon="rss"
	transform="left-5 shrink-6 up-3 rotate-20"
	flip="horizontal"
	/>
	<FAIcon
	icon="rss"
	transform="right-5 shrink-6 up-3 rotate-20"
	/>
	<FAIcon icon="bell" />
	</FALayers>
	</ProgressButton>
	</template>
	</div>
	<div>
	<button
	v-if="relationship.muting"
	class="btn button-default btn-block toggled"
	@click="unmuteUser"
	>
	{{ $t('user_card.muted') }}
	</button>
	<button
	v-else
	class="btn button-default btn-block"
	@click="muteUser"
	>
	{{ $t('user_card.mute') }}
	</button>
	</div>
	<div>
	<button
	class="btn button-default btn-block"
	@click="mentionUser"
	>
	{{ $t('user_card.mention') }}
	</button>
	</div>
	<ModerationTools
	v-if="loggedIn.role === "admin""
	:user="user"
	/>
	</div>
	<div
	v-if="!loggedIn && user.is_local"
	class="user-interactions"
	>
	<RemoteFollow :user="user" />
	</div>
	</div>
	</div>
	<div
	v-if="!hideBio"
	class="panel-body"
	>
	<div
	v-if="!mergedConfig.hideUserStats && switcher"
	class="user-counts"
	>
	<div
	class="user-count"
	@click.prevent="setProfileView('statuses')"
	>
	<h5>{{ $t('user_card.statuses') }}</h5>
	<span>{{ user.statuses_count }} <br></span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('friends')"
	>
	<h5>{{ $t('user_card.followees') }}</h5>
	<span>{{ hideFollowsCount ? $t('user_card.hidden') : user.friends_count }}</span>
	</div>
	<div
	class="user-count"
	@click.prevent="setProfileView('followers')"
	>
	<h5>{{ $t('user_card.followers') }}</h5>
	<span>{{ hideFollowersCount ? $t('user_card.hidden') : user.followers_count }}</span>
	</div>
	</div>
	<!-- eslint-disable vue/no-v-html -->
	<p
	v-if="!hideBio && user.description_html"
	class="user-card-bio"
	@click.prevent="linkClicked"
	v-html="user.description_html"
	/>
	<!-- eslint-enable vue/no-v-html -->
	<p
	v-else-if="!hideBio"
	class="user-card-bio"
	>
	{{ user.description }}
	</p>
	</div>
	</div>
	</template>

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

	<style lang="scss">
	@import '../../_variables.scss';

	.user-card {
	position: relative;

	&:hover .Avatar {
	--_still-image-img-visibility: visible;
	--_still-image-canvas-visibility: hidden;
	}

	.panel-heading {
	padding: .5em 0;
	text-align: center;
	box-shadow: none;
	background: transparent;
	flex-direction: column;
	align-items: stretch;
	// create new stacking context
	position: relative;
	}

	.panel-body {
	word-wrap: break-word;
	border-bottom-right-radius: inherit;
	border-bottom-left-radius: inherit;
	// create new stacking context
	position: relative;
	}

	.background-image {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	mask: linear-gradient(to top, white, transparent) bottom no-repeat,
	linear-gradient(to top, white, white);
	// Autoprefixed seem to ignore this one, and also syntax is different
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	background-size: cover;
	mask-size: 100% 60%;
	border-top-left-radius: calc(var(--panelRadius) - 1px);
	border-top-right-radius: calc(var(--panelRadius) - 1px);
	background-color: var(--profileBg);

	&.hide-bio {
	mask-size: 100% 40px;
	}
	}

	p {
	margin-bottom: 0;
	}

	&-bio {
	text-align: center;

	a {
	color: $fallback--link;
	color: var(--postLink, $fallback--link);
	}

	img {
	object-fit: contain;
	vertical-align: middle;
	max-width: 100%;
	max-height: 400px;

	&.emoji {
	width: 32px;
	height: 32px;
	}
	}
	}

	// Modifiers

	&-rounded-t {
	border-top-left-radius: $fallback--panelRadius;
	border-top-left-radius: var(--panelRadius, $fallback--panelRadius);
	border-top-right-radius: $fallback--panelRadius;
	border-top-right-radius: var(--panelRadius, $fallback--panelRadius);
	}

	&-rounded {
	border-radius: $fallback--panelRadius;
	border-radius: var(--panelRadius, $fallback--panelRadius);
	}

	&-bordered {
	border-width: 1px;
	border-style: solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);
	}
	}

	.user-info {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	padding: 0 26px;

	.container {
	padding: 16px 0 6px;
	display: flex;
	align-items: flex-start;
	max-height: 56px;

	.Avatar {
	--_avatarShadowBox: var(--avatarShadow);
	--_avatarShadowFilter: var(--avatarShadowFilter);
	--_avatarShadowInset: var(--avatarShadowInset);

	flex: 1 0 100%;
	width: 56px;
	height: 56px;
	object-fit: cover;
	}
	}

	&-avatar-link {
	position: relative;
	cursor: pointer;

	&-overlay {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.3);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: $fallback--avatarRadius;
	border-radius: var(--avatarRadius, $fallback--avatarRadius);
	opacity: 0;
	transition: opacity .2s ease;

	svg {
	color: #FFF;
	}
	}

	&:hover &-overlay {
	opacity: 1;
	}
	}

	.external-link-button {
	cursor: pointer;
	width: 2.5em;
	text-align: center;
	margin: -0.5em 0;
	padding: 0.5em 0;

	&:not(:hover) .icon {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}
	}

	.user-summary {
	display: block;
	margin-left: 0.6em;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
	flex: 1 1 0;
	// This is so that text doesn't get overlapped by avatar's shadow if it has
	// big one
	z-index: 1;

	img {
	width: 26px;
	height: 26px;
	vertical-align: middle;
	object-fit: contain
	}

	.top-line {
	display: flex;
	}
	}

	.user-name {
	text-overflow: ellipsis;
	overflow: hidden;
	flex: 1 1 auto;
	margin-right: 1em;
	font-size: 15px;

	img {
	object-fit: contain;
	height: 16px;
	width: 16px;
	vertical-align: middle;
	}
	}

	.bottom-line {
	display: flex;
	font-weight: light;
	font-size: 15px;

	.lock-icon {
	margin-left: 0.5em;
	}

	.user-screen-name {
	min-width: 1px;
	flex: 0 1 auto;
	text-overflow: ellipsis;
	overflow: hidden;
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	}

	.dailyAvg {
	min-width: 1px;
	flex: 0 0 auto;
	margin-left: 1em;
	font-size: 0.7em;
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}

	.user-role {
	flex: none;
	color: $fallback--text;
	color: var(--alertNeutralText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--alertNeutral, $fallback--fg);
	}
	}

	.user-meta {
	margin-bottom: .15em;
	display: flex;
	align-items: baseline;
	font-size: 14px;
	line-height: 22px;
	flex-wrap: wrap;

	.following {
	flex: 1 0 auto;
	margin: 0;
	margin-bottom: .25em;
	text-align: left;
	}

	.highlighter {
	flex: 0 1 auto;
	display: flex;
	flex-wrap: wrap;
	margin-right: -.5em;
	align-self: start;

	.userHighlightCl {
	padding: 2px 10px;
	flex: 1 0 auto;
	}

	- .userHighlightSel,
	- .userHighlightSel.select {
	+ .userHighlightSel {
	padding-top: 0;
	padding-bottom: 0;
	flex: 1 0 auto;
	}
	- .userHighlightSel.select svg {
	- line-height: 22px;
	- }

	.userHighlightText {
	width: 70px;
	flex: 1 0 auto;
	}

	.userHighlightCl,
	.userHighlightText,
	- .userHighlightSel,
	- .userHighlightSel.select {
	- height: 22px;
	+ .userHighlightSel {
	vertical-align: top;
	margin-right: .5em;
	margin-bottom: .25em;
	}
	}
	}
	.user-interactions {
	position: relative;
	display: flex;
	flex-flow: row wrap;
	margin-right: -.75em;

	> * {
	margin: 0 .75em .6em 0;
	white-space: nowrap;
	min-width: 95px;
	}

	button {
	margin: 0;
	}
	}
	}

	.user-counts {
	display: flex;
	line-height:16px;
	padding: .5em 1.5em 0em 1.5em;
	text-align: center;
	justify-content: space-between;
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	flex-wrap: wrap;
	}

	.user-count {
	flex: 1 0 auto;
	padding: .5em 0 .5em 0;
	margin: 0 .5em;

	h5 {
	font-size:1em;
	font-weight: bolder;
	margin: 0 0 0.25em;
	}
	a {
	text-decoration: none;
	}
	}
	</style>

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 9, 2:28 PM (1 d, 17 h)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1784758
Default Alt Text: (193 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions