No OneTemporary
Actions

Size

97 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue
	index 94eae56065..e9ac09c348 100644
	--- a/src/components/emoji_input/emoji_input.vue
	+++ b/src/components/emoji_input/emoji_input.vue
	@@ -1,178 +1,180 @@
	<template>
	<div
	v-click-outside="onClickOutside"
	class="emoji-input"
	:class="{ 'with-picker': !hideEmojiButton }"
	>
	<slot />
	<template v-if="enableEmojiPicker">
	<div
	v-if="!hideEmojiButton"
	class="emoji-picker-icon"
	@click.prevent="togglePicker"
	>
	<i class="icon-smile" />
	</div>
	<EmojiPicker
	v-if="enableEmojiPicker"
	ref="picker"
	:class="{ hide: !showPicker }"
	:enable-sticker-picker="enableStickerPicker"
	class="emoji-picker-panel"
	@emoji="insert"
	@sticker-uploaded="onStickerUploaded"
	@sticker-upload-failed="onStickerUploadFailed"
	/>
	</template>
	<div
	ref="panel"
	class="autocomplete-panel"
	:class="{ hide: !showSuggestions }"
	>
	<div class="autocomplete-panel-body">
	<div
	v-for="(suggestion, index) in suggestions"
	:key="index"
	class="autocomplete-item"
	:class="{ highlighted: suggestion.highlighted }"
	@click.stop.prevent="onClick($event, suggestion)"
	>
	<span class="image">
	<img
	v-if="suggestion.img"
	:src="suggestion.img"
	>
	<span v-else>{{ suggestion.replacement }}</span>
	</span>
	<div class="label">
	<span class="displayText">{{ suggestion.displayText }}</span>
	<span class="detailText">{{ suggestion.detailText }}</span>
	</div>
	</div>
	</div>
	</div>
	</div>
	</template>

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

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

	.emoji-input {
	display: flex;
	flex-direction: column;
	position: relative;

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

	.emoji-picker-icon {
	position: absolute;
	top: 0;
	right: 0;
	margin: .2em .25em;
	font-size: 16px;
	cursor: pointer;
	line-height: 24px;

	&:hover i {
	color: $fallback--text;
	color: var(--text, $fallback--text);
	}
	}
	.emoji-picker-panel {
	position: absolute;
	z-index: 20;
	margin-top: 2px;

	&.hide {
	display: none
	}
	}

	.autocomplete {
	&-panel {
	position: absolute;
	z-index: 20;
	margin-top: 2px;

	&.hide {
	display: none
	}

	&-body {
	margin: 0 0.5em 0 0.5em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);
	box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
	box-shadow: var(--popupShadow);
	min-width: 75%;
	background-color: $fallback--bg;
	background-color: var(--popover, $fallback--bg);
	color: $fallback--link;
	color: var(--popoverText, $fallback--link);
	--faint: var(--popoverFaintText, $fallback--faint);
	--faintLink: var(--popoverFaintLink, $fallback--faint);
	--lightText: var(--popoverLightText, $fallback--lightText);
	+ --postLink: var(--popoverPostLink, $fallback--link);
	+ --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
	--icon: var(--popoverIcon, $fallback--icon);
	}
	}

	&-item {
	display: flex;
	cursor: pointer;
	padding: 0.2em 0.4em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	height: 32px;

	.image {
	width: 32px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-size: 32px;

	margin-right: 4px;

	img {
	width: 32px;
	height: 32px;
	object-fit: contain;
	}
	}

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

	.displayText {
	line-height: 1.5;
	}

	.detailText {
	font-size: 9px;
	line-height: 9px;
	}
	}

	&.highlighted {
	background-color: $fallback--fg;
	background-color: var(--selectedMenuPopover, $fallback--fg);
	color: var(--selectedMenuPopoverText, $fallback--text);
	--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
	--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
	}
	}
	}

	input, textarea {
	flex: 1 0 auto;
	}
	}
	</style>
	diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
	index 71876b1451..ca76243222 100644
	--- a/src/components/notifications/notifications.scss
	+++ b/src/components/notifications/notifications.scss
	@@ -1,176 +1,179 @@
	@import '../../_variables.scss';

	.notifications {
	&:not(.minimal) {
	// a bit of a hack to allow scrolling below notifications
	padding-bottom: 15em;
	}

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

	.notification {
	position: relative;

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

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

	.notification {
	box-sizing: border-box;
	border-bottom: 1px solid;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);

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

	.muted {
	padding: .25em .6em;
	}

	.non-mention {
	display: flex;
	flex: 1;
	flex-wrap: nowrap;
	padding: 0.6em;
	min-width: 0;
	.avatar-container {
	width: 32px;
	height: 32px;
	}
	.status-el {
	.status {
	padding: 0.25em 0;
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	a {
	color: var(--faintLink);
	}
	+ .status-content a {
	+ color: var(--postFaintLink);
	+ }
	}
	padding: 0;
	.media-body {
	margin: 0;
	}
	}
	}

	.follow-text {
	padding: 0.5em 0;
	}

	.status-el {
	flex: 1;
	}

	time {
	white-space: nowrap;
	}

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

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

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

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

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

	.timeago {
	margin-right: .2em;
	}

	.icon-retweet.lit {
	color: $fallback--cGreen;
	color: var(--cGreen, $fallback--cGreen);
	}

	.icon-user-plus.lit {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.icon-reply.lit {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}

	.icon-star.lit {
	color: orange;
	color: $fallback--cOrange;
	color: var(--cOrange, $fallback--cOrange);
	}

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

	h1 {
	word-break: break-all;
	margin: 0 0 0.3em;
	padding: 0;
	font-size: 1em;
	line-height:20px;
	small {
	font-weight: lighter;
	}
	}

	p {
	margin: 0;
	margin-top: 0;
	margin-bottom: 0.3em;
	}
	}
	}
	diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss
	index 341416c1e3..8e2dcd55fa 100644
	--- a/src/components/popper/popper.scss
	+++ b/src/components/popper/popper.scss
	@@ -1,160 +1,162 @@
	@import '../../_variables.scss';

	.tooltip.popover {
	z-index: 8;

	.popover-inner {
	box-shadow: 1px 1px 4px rgba(0,0,0,.6);
	box-shadow: var(--panelShadow);
	border-radius: $fallback--btnRadius;
	border-radius: var(--btnRadius, $fallback--btnRadius);
	background-color: $fallback--bg;
	background-color: var(--popover, $fallback--bg);
	color: $fallback--text;
	color: var(--popoverText, $fallback--text);
	--faint: var(--popoverFaintText, $fallback--faint);
	--faintLink: var(--popoverFaintLink, $fallback--faint);
	--lightText: var(--popoverLightText, $fallback--lightText);
	+ --postLink: var(--popoverPostLink, $fallback--link);
	+ --postFaintLink: var(--popoverPostFaintLink, $fallback--link);
	--icon: var(--popoverIcon, $fallback--icon);
	}

	.popover-arrow {
	width: 0;
	height: 0;
	border-style: solid;
	position: absolute;
	margin: 5px;
	border-color: $fallback--bg;
	border-color: var(--bg, $fallback--bg);
	}

	&[x-placement^="top"] {
	margin-bottom: 5px;

	.popover-arrow {
	border-width: 5px 5px 0 5px;
	border-left-color: transparent !important;
	border-right-color: transparent !important;
	border-bottom-color: transparent !important;
	bottom: -4px;
	left: calc(50% - 5px);
	margin-top: 0;
	margin-bottom: 0;
	}
	}

	&[x-placement^="bottom"] {
	margin-top: 5px;

	.popover-arrow {
	border-width: 0 5px 5px 5px;
	border-left-color: transparent !important;
	border-right-color: transparent !important;
	border-top-color: transparent !important;
	top: -4px;
	left: calc(50% - 5px);
	margin-top: 0;
	margin-bottom: 0;
	}
	}

	&[x-placement^="right"] {
	margin-left: 5px;

	.popover-arrow {
	border-width: 5px 5px 5px 0;
	border-left-color: transparent !important;
	border-top-color: transparent !important;
	border-bottom-color: transparent !important;
	left: -4px;
	top: calc(50% - 5px);
	margin-left: 0;
	margin-right: 0;
	}
	}

	&[x-placement^="left"] {
	margin-right: 5px;

	.popover-arrow {
	border-width: 5px 0 5px 5px;
	border-top-color: transparent !important;
	border-right-color: transparent !important;
	border-bottom-color: transparent !important;
	right: -4px;
	top: calc(50% - 5px);
	margin-left: 0;
	margin-right: 0;
	}
	}

	&[aria-hidden='true'] {
	visibility: hidden;
	opacity: 0;
	transition: opacity .15s, visibility .15s;
	}

	&[aria-hidden='false'] {
	visibility: visible;
	opacity: 1;
	transition: opacity .15s;
	}
	}

	.dropdown-menu {
	display: block;
	padding: .5rem 0;
	font-size: 1rem;
	text-align: left;
	list-style: none;
	max-width: 100vw;
	z-index: 10;

	.dropdown-divider {
	height: 0;
	margin: .5rem 0;
	overflow: hidden;
	border-top: 1px solid $fallback--border;
	border-top: 1px solid var(--border, $fallback--border);
	}

	.dropdown-item {
	line-height: 21px;
	margin-right: 5px;
	overflow: auto;
	display: block;
	padding: .25rem 1.0rem .25rem 1.5rem;
	clear: both;
	font-weight: 400;
	text-align: inherit;
	white-space: normal;
	border: none;
	border-radius: 0px;
	background-color: transparent;
	box-shadow: none;
	width: 100%;
	height: 100%;

	&-icon {
	padding-left: 0.5rem;

	i {
	margin-right: 0.25rem;
	}
	}

	&:active, &:hover {
	background-color: $fallback--lightBg;
	background-color: var(--selectedMenuPopover, $fallback--lightBg);
	color: $fallback--link;
	color: var(--selectedMenuPopoverText, $fallback--link);
	--faint: var(--selectedMenuPopoverFaintText, $fallback--faint);
	--faintLink: var(--selectedMenuPopoverFaintLink, $fallback--faint);
	--lightText: var(--selectedMenuPopoverLightText, $fallback--lightText);
	--icon: var(--selectedMenuPopoverIcon, $fallback--icon);
	i {
	color: var(--selectedMenuPopoverIcon, $fallback--icon);
	}
	}
	}
	}
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index 1997e18739..b1048832c8 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,909 +1,916 @@
	<template>
	<!-- eslint-disable vue/no-v-html -->
	<div
	v-if="!hideStatus"
	class="status-el"
	:class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]"
	>
	<div
	v-if="error"
	class="alert error"
	>
	{{ error }}
	<i
	class="button-icon icon-cancel"
	@click="clearError"
	/>
	</div>
	<template v-if="muted && !isPreview">
	<div class="media status container muted">
	<small>
	<router-link :to="userProfileLink">
	{{ status.user.screen_name }}
	</router-link>
	</small>
	<small class="muteWords">{{ muteWordHits.join(', ') }}</small>
	<a
	href="#"
	class="unmute"
	@click.prevent="toggleMute"
	><i class="button-icon icon-eye-off" /></a>
	</div>
	</template>
	<template v-else>
	<div
	v-if="showPinned"
	class="status-pin"
	>
	<i class="fa icon-pin faint" />
	<span class="faint">{{ $t('status.pinned') }}</span>
	</div>
	<div
	v-if="retweet && !noHeading && !inConversation"
	:class="[repeaterClass, { highlighted: repeaterStyle }]"
	:style="[repeaterStyle]"
	class="media container retweet-info"
	>
	<UserAvatar
	v-if="retweet"
	class="media-left"
	:better-shadow="betterShadow"
	:user="statusoid.user"
	/>
	<div class="media-body faint">
	<span class="user-name">
	<router-link
	v-if="retweeterHtml"
	:to="retweeterProfileLink"
	v-html="retweeterHtml"
	/>
	<router-link
	v-else
	:to="retweeterProfileLink"
	>{{ retweeter }}</router-link>
	</span>
	<i
	class="fa icon-retweet retweeted"
	:title="$t('tool_tip.repeat')"
	/>
	{{ $t('timeline.repeated') }}
	</div>
	</div>

	<div
	:class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]"
	:style="[ userStyle ]"
	class="media status"
	:data-tags="tags"
	>
	<div
	v-if="!noHeading"
	class="media-left"
	>
	<router-link
	:to="userProfileLink"
	@click.stop.prevent.capture.native="toggleUserExpanded"
	>
	<UserAvatar
	:compact="compact"
	:better-shadow="betterShadow"
	:user="status.user"
	/>
	</router-link>
	</div>
	<div class="status-body">
	<UserCard
	v-if="userExpanded"
	:user="status.user"
	:rounded="true"
	:bordered="true"
	class="status-usercard"
	/>
	<div
	v-if="!noHeading"
	class="media-heading"
	>
	<div class="heading-name-row">
	<div class="name-and-account-name">
	<h4
	v-if="status.user.name_html"
	class="user-name"
	v-html="status.user.name_html"
	/>
	<h4
	v-else
	class="user-name"
	>
	{{ status.user.name }}
	</h4>
	<router-link
	class="account-name"
	:to="userProfileLink"
	>
	{{ status.user.screen_name }}
	</router-link>
	</div>

	<span class="heading-right">
	<router-link
	class="timeago faint-link"
	:to="{ name: 'conversation', params: { id: status.id } }"
	>
	<Timeago
	:time="status.created_at"
	:auto-update="60"
	/>
	</router-link>
	<div
	v-if="status.visibility"
	class="button-icon visibility-icon"
	>
	<i
	:class="visibilityIcon(status.visibility)"
	:title="status.visibility \| capitalize"
	/>
	</div>
	<a
	v-if="!status.is_local && !isPreview"
	:href="status.external_url"
	target="_blank"
	class="source_url"
	title="Source"
	>
	<i class="button-icon icon-link-ext-alt" />
	</a>
	<template v-if="expandable && !isPreview">
	<a
	href="#"
	title="Expand"
	@click.prevent="toggleExpanded"
	>
	<i class="button-icon icon-plus-squared" />
	</a>
	</template>
	<a
	v-if="unmuted"
	href="#"
	@click.prevent="toggleMute"
	><i class="button-icon icon-eye-off" /></a>
	</span>
	</div>

	<div class="heading-reply-row">
	<div
	v-if="isReply"
	class="reply-to-and-accountname"
	>
	<StatusPopover
	v-if="!isPreview"
	:status-id="status.in_reply_to_status_id"
	>
	<a
	class="reply-to"
	href="#"
	:aria-label="$t('tool_tip.reply')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<i class="button-icon icon-reply" />
	<span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span>
	</a>
	</StatusPopover>
	<span
	v-else
	class="reply-to"
	>
	<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
	</span>
	<router-link :to="replyProfileLink">
	{{ replyToName }}
	</router-link>
	<span
	v-if="replies && replies.length"
	class="faint replies-separator"
	>
	-
	</span>
	</div>
	<div
	v-if="inConversation && !isPreview && replies && replies.length"
	class="replies"
	>
	<span class="faint">{{ $t('status.replies_list') }}</span>
	<StatusPopover
	v-for="reply in replies"
	:key="reply.id"
	:status-id="reply.id"
	>
	<a
	href="#"
	class="reply-link"
	@click.prevent="gotoOriginal(reply.id)"
	>{{ reply.name }}</a>
	</StatusPopover>
	</div>
	</div>
	</div>

	<div
	v-if="longSubject"
	class="status-content-wrapper"
	:class="{ 'tall-status': !showingLongSubject }"
	>
	<a
	v-if="!showingLongSubject"
	class="tall-status-hider"
	:class="{ 'tall-status-hider_focused': isFocused }"
	href="#"
	@click.prevent="showingLongSubject=true"
	>{{ $t("general.show_more") }}</a>
	<div
	class="status-content media-body"
	@click.prevent="linkClicked"
	v-html="contentHtml"
	/>
	<a
	v-if="showingLongSubject"
	href="#"
	class="status-unhider"
	@click.prevent="showingLongSubject=false"
	>{{ $t("general.show_less") }}</a>
	</div>
	<div
	v-else
	:class="{'tall-status': hideTallStatus}"
	class="status-content-wrapper"
	>
	<a
	v-if="hideTallStatus"
	class="tall-status-hider"
	:class="{ 'tall-status-hider_focused': isFocused }"
	href="#"
	@click.prevent="toggleShowMore"
	>{{ $t("general.show_more") }}</a>
	<div
	v-if="!hideSubjectStatus"
	class="status-content media-body"
	@click.prevent="linkClicked"
	v-html="contentHtml"
	/>
	<div
	v-else
	class="status-content media-body"
	@click.prevent="linkClicked"
	v-html="status.summary_html"
	/>
	<a
	v-if="hideSubjectStatus"
	href="#"
	class="cw-status-hider"
	@click.prevent="toggleShowMore"
	>{{ $t("general.show_more") }}</a>
	<a
	v-if="showingMore"
	href="#"
	class="status-unhider"
	@click.prevent="toggleShowMore"
	>{{ $t("general.show_less") }}</a>
	</div>

	<div v-if="status.poll && status.poll.options">
	<poll :base-poll="status.poll" />
	</div>

	<div
	v-if="status.attachments && (!hideSubjectStatus \|\| showingLongSubject)"
	class="attachments media-body"
	>
	<attachment
	v-for="attachment in nonGalleryAttachments"
	:key="attachment.id"
	class="non-gallery"
	:size="attachmentSize"
	:nsfw="nsfwClickthrough"
	:attachment="attachment"
	:allow-play="true"
	:set-media="setMedia()"
	/>
	<gallery
	v-if="galleryAttachments.length > 0"
	:nsfw="nsfwClickthrough"
	:attachments="galleryAttachments"
	:set-media="setMedia()"
	/>
	</div>

	<div
	v-if="status.card && !hideSubjectStatus && !noHeading"
	class="link-preview media-body"
	>
	<link-preview
	:card="status.card"
	:size="attachmentSize"
	:nsfw="nsfwClickthrough"
	/>
	</div>

	<transition name="fade">
	<div
	v-if="!hidePostStats && isFocused && combinedFavsAndRepeatsUsers.length > 0"
	class="favs-repeated-users"
	>
	<div class="stats">
	<div
	v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0"
	class="stat-count"
	>
	<a class="stat-title">{{ $t('status.repeats') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.rebloggedBy.length }}
	</div>
	</div>
	<div
	v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0"
	class="stat-count"
	>
	<a class="stat-title">{{ $t('status.favorites') }}</a>
	<div class="stat-number">
	{{ statusFromGlobalRepository.favoritedBy.length }}
	</div>
	</div>
	<div class="avatar-row">
	<AvatarList :users="combinedFavsAndRepeatsUsers" />
	</div>
	</div>
	</div>
	</transition>

	<div
	v-if="!noHeading && !isPreview"
	class="status-actions media-body"
	>
	<div>
	<i
	v-if="loggedIn"
	class="button-icon icon-reply"
	:title="$t('tool_tip.reply')"
	:class="{'button-icon-active': replying}"
	@click.prevent="toggleReplying"
	/>
	<i
	v-else
	class="button-icon button-icon-disabled icon-reply"
	:title="$t('tool_tip.reply')"
	/>
	<span v-if="status.replies_count > 0">{{ status.replies_count }}</span>
	</div>
	<retweet-button
	:visibility="status.visibility"
	:logged-in="loggedIn"
	:status="status"
	/>
	<favorite-button
	:logged-in="loggedIn"
	:status="status"
	/>
	<extra-buttons
	:status="status"
	@onError="showError"
	@onSuccess="clearError"
	/>
	</div>
	</div>
	</div>
	<div
	v-if="replying"
	class="container"
	>
	<PostStatusForm
	class="reply-body"
	:reply-to="status.id"
	:attentions="status.attentions"
	:replied-user="status.user"
	:copy-message-scope="status.visibility"
	:subject="replySubject"
	@posted="toggleReplying"
	/>
	</div>
	</template>
	</div>
	<!-- eslint-enable vue/no-v-html -->
	</template>

	<script src="./status.js" ></script>
	<style lang="scss">
	@import '../../_variables.scss';

	$status-margin: 0.75em;

	.status-body {
	flex: 1;
	min-width: 0;
	}

	.status-pin {
	padding: $status-margin $status-margin 0;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	}

	.media-left {
	margin-right: $status-margin;
	}

	.status-el {
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	border-left-width: 0px;
	min-width: 0;
	border-color: $fallback--border;
	border-color: var(--border, $fallback--border);

	border-left: 4px $fallback--cRed;
	border-left: 4px var(--cRed, $fallback--cRed);

	&_focused {
	background-color: $fallback--lightBg;
	background-color: var(--selectedPost, $fallback--lightBg);
	color: $fallback--text;
	color: var(--selectedPostText, $fallback--text);
	--lightText: var(--selectedPostLightText, $fallback--light);
	--faint: var(--selectedPostFaintText, $fallback--faint);
	--faintLink: var(--selectedPostFaintLink, $fallback--faint);
	+ --postLink: var(--selectedPostPostLink, $fallback--faint);
	+ --postFaintLink: var(--selectedPostFaintPostLink, $fallback--faint);
	--icon: var(--selectedPostIcon, $fallback--icon);
	}

	.timeline & {
	border-bottom-width: 1px;
	border-bottom-style: solid;
	}

	.media-body {
	flex: 1;
	padding: 0;
	}

	.status-usercard {
	margin-bottom: $status-margin;
	}

	.user-name {
	white-space: nowrap;
	font-size: 14px;
	overflow: hidden;
	flex-shrink: 0;
	max-width: 85%;
	font-weight: bold;

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

	.media-heading {
	padding: 0;
	vertical-align: bottom;
	flex-basis: 100%;
	margin-bottom: 0.5em;

	small {
	font-weight: lighter;
	}

	.heading-name-row {
	padding: 0;
	display: flex;
	justify-content: space-between;
	line-height: 18px;

	a {
	display: inline-block;
	word-break: break-all;
	}

	.name-and-account-name {
	display: flex;
	min-width: 0;
	}

	.user-name {
	flex-shrink: 1;
	margin-right: 0.4em;
	overflow: hidden;
	text-overflow: ellipsis;
	}

	.account-name {
	min-width: 1.6em;
	margin-right: 0.4em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1 1 0;
	}
	}

	.heading-right {
	display: flex;
	flex-shrink: 0;
	}

	.timeago {
	margin-right: 0.2em;
	}

	.heading-reply-row {
	position: relative;
	align-content: baseline;
	font-size: 12px;
	line-height: 18px;
	max-width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;

	> .reply-to-and-accountname > a {
	max-width: 100%;
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
	word-break: break-all;
	}
	}

	.reply-to-and-accountname {
	display: flex;
	height: 18px;
	margin-right: 0.5em;
	overflow: hidden;
	max-width: 100%;
	.icon-reply {
	transform: scaleX(-1);
	}
	}

	.reply-info {
	display: flex;
	}

	.reply-to {
	display: flex;
	}

	.reply-to-text {
	overflow: hidden;
	text-overflow: ellipsis;
	margin: 0 0.4em 0 0.2em;
	}

	.replies-separator {
	margin-left: 0.4em;
	}

	.replies {
	line-height: 18px;
	font-size: 12px;
	display: flex;
	flex-wrap: wrap;
	& > * {
	margin-right: 0.4em;
	}
	}

	.reply-link {
	height: 17px;
	}
	}

	.tall-status {
	position: relative;
	height: 220px;
	overflow-x: hidden;
	overflow-y: hidden;
	z-index: 1;
	.status-content {
	height: 100%;
	mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
	linear-gradient(to top, white, white);
	/* Autoprefixed seem to ignore this one, and also syntax is different */
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	}
	}

	.tall-status-hider {
	display: inline-block;
	word-break: break-all;
	position: absolute;
	height: 70px;
	margin-top: 150px;
	width: 100%;
	text-align: center;
	line-height: 110px;
	z-index: 2;
	}

	.status-unhider, .cw-status-hider {
	width: 100%;
	text-align: center;
	display: inline-block;
	word-break: break-all;
	}

	.status-content {
	font-family: var(--postFont, sans-serif);
	line-height: 1.4em;
	white-space: pre-wrap;

	+ a {
	+ color: $fallback--link;
	+ color: var(--postLink, $fallback--link);
	+ }
	+
	img, video {
	max-width: 100%;
	max-height: 400px;
	vertical-align: middle;
	object-fit: contain;

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

	blockquote {
	margin: 0.2em 0 0.2em 2em;
	font-style: italic;
	}

	pre {
	overflow: auto;
	}

	code, samp, kbd, var, pre {
	font-family: var(--postCodeFont, monospace);
	}

	p {
	margin: 0 0 1em 0;
	}

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

	h1 {
	font-size: 1.1em;
	line-height: 1.2em;
	margin: 1.4em 0;
	}

	h2 {
	font-size: 1.1em;
	margin: 1.0em 0;
	}

	h3 {
	font-size: 1em;
	margin: 1.2em 0;
	}

	h4 {
	margin: 1.1em 0;
	}
	}

	.retweet-info {
	padding: 0.4em $status-margin;
	margin: 0;

	.avatar.still-image {
	border-radius: $fallback--avatarAltRadius;
	border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
	margin-left: 28px;
	width: 20px;
	height: 20px;
	}

	.media-body {
	font-size: 1em;
	line-height: 22px;

	display: flex;
	align-content: center;
	flex-wrap: wrap;

	.user-name {
	font-weight: bold;
	overflow: hidden;
	text-overflow: ellipsis;

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

	i {
	padding: 0 0.2em;
	}

	a {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	}
	}
	}
	}

	.status-fadein {
	animation-duration: 0.4s;
	animation-name: fadein;
	}

	@keyframes fadein {
	from {
	opacity: 0;
	}
	to {
	opacity: 1;
	}
	}

	.greentext {
	color: $fallback--cGreen;
	color: var(--cGreen, $fallback--cGreen);
	}

	.status-conversation {
	border-left-style: solid;
	}

	.status-actions {
	position: relative;
	width: 100%;
	display: flex;
	margin-top: $status-margin;

	> * {
	max-width: 4em;
	flex: 1;
	}
	}

	.button-icon.icon-reply {
	&:not(.button-icon-disabled):hover,
	&.button-icon-active {
	color: $fallback--cBlue;
	color: var(--cBlue, $fallback--cBlue);
	}
	}

	.button-icon.icon-reply {
	&:not(.button-icon-disabled) {
	cursor: pointer;
	}
	}

	.status:hover .animated.avatar {
	canvas {
	display: none;
	}
	img {
	visibility: visible;
	}
	}

	.status {
	display: flex;
	padding: $status-margin;
	&.is-retweet {
	padding-top: 0;
	}
	}

	.status-conversation:last-child {
	border-bottom: none;
	}

	.muted {
	padding: 0.25em 0.5em;
	button {
	margin-left: auto;
	}

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

	a.unmute {
	display: block;
	margin-left: auto;
	}

	.reply-body {
	flex: 1;
	}

	.timeline :not(.panel-disabled) > {
	.status-el:last-child {
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	border-bottom: none;
	}
	}

	.favs-repeated-users {
	margin-top: $status-margin;

	.stats {
	width: 100%;
	display: flex;
	line-height: 1em;

	.stat-count {
	margin-right: $status-margin;

	.stat-title {
	color: var(--faint, $fallback--faint);
	font-size: 12px;
	text-transform: uppercase;
	position: relative;
	}

	.stat-number {
	font-weight: bolder;
	font-size: 16px;
	line-height: 1em;
	}
	}

	.avatar-row {
	flex: 1;
	overflow: hidden;
	position: relative;
	display: flex;
	align-items: center;

	&::before {
	content: '';
	position: absolute;
	height: 100%;
	width: 1px;
	left: 0;
	background-color: var(--faint, $fallback--faint);
	}
	}
	}
	}

	@media all and (max-width: 800px) {
	.status-el {
	.retweet-info {
	.avatar.still-image {
	margin-left: 20px;
	}
	}
	}
	.status {
	max-width: 100%;
	}

	.status .avatar.still-image {
	width: 40px;
	height: 40px;

	&.avatar-compact {
	width: 32px;
	height: 32px;
	}
	}
	}

	</style>
	diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue
	index 6e38bd8ed4..0b3b0fbfd9 100644
	--- a/src/components/style_switcher/style_switcher.vue
	+++ b/src/components/style_switcher/style_switcher.vue
	@@ -1,862 +1,879 @@
	<template>
	<div class="style-switcher">
	<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"
	@click="forceLoad"
	>
	{{ $t('settings.style.switcher.use_source') }}
	</button>
	<button
	class="btn"
	@click="forceSnapshot"
	>
	{{ $t('settings.style.switcher.use_snapshot') }}
	</button>
	</template>
	<template v-else-if="themeWarning.noActionsPossible">
	<button
	class="btn"
	@click="dismissWarning"
	>
	{{ $t('general.dismiss') }}
	</button>
	</template>
	<template v-else>
	<button
	class="btn"
	@click="forceLoad"
	>
	{{ $t('settings.style.switcher.load_theme') }}
	</button>
	<button
	class="btn"
	@click="dismissWarning"
	>
	{{ $t('settings.style.switcher.keep_as_is') }}
	</button>
	</template>
	</div>
	</div>
	<ExportImport
	:export-object="exportedTheme"
	:export-label="$t("settings.export_theme")"
	:import-label="$t("settings.import_theme")"
	:import-failed-text="$t("settings.invalid_theme_imported")"
	:on-import="onImport"
	:validator="importValidator"
	>
	<template slot="before">
	<div class="presets">
	{{ $t('settings.presets') }}
	<label
	for="preset-switcher"
	class="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>
	<i class="icon-down-open" />
	</label>
	</div>
	</template>
	</ExportImport>
	</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>

	<div class="preview-container">
	<preview :style="previewRules" />
	</div>

	<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>
	<button
	class="btn"
	@click="clearOpacity"
	>
	{{ $t('settings.style.switcher.clear_opacity') }}
	</button>
	<button
	class="btn"
	@click="clearV1"
	>
	{{ $t('settings.style.switcher.clear_all') }}
	</button>
	</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"
	@click="clearOpacity"
	>
	{{ $t('settings.style.switcher.clear_opacity') }}
	</button>
	<button
	class="btn"
	@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')"
	+ :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
	+ />
	+ <ContrastRatio :contrast="previewContrast.bgPostLink" />
	+ <ColorInput
	+ v-model="iconColorLocal"
	+ name="iconColor"
	+ :fallback="previewTheme.colors.accent"
	+ :label="$t('settings.links')"
	+ :show-optional-tickbox="typeof accentColorLocal !== 'undefined'"
	+ />
	+ <ContrastRatio :contrast="previewContrast.bgIcon" />
	<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="true"
	/>
	<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="true"
	/>
	</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="true"
	/>
	</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="true"
	/>
	<ColorInput
	v-model="panelLinkColorLocal"
	name="panelLinkColor"
	:fallback="previewTheme.colors.panelLink"
	:label="$t('settings.links')"
	/>
	<ContrastRatio
	:contrast="previewContrast.panelLink"
	large="true"
	/>
	</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" />
	<h4>{{ $t('settings.style.advanced_colors.pressed') }}</h4>
	<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" />
	<h4>{{ $t('settings.style.advanced_colors.disabled') }}</h4>
	<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')"
	/>
	<ContrastRatio :contrast="previewContrast.btnDisabledText" />
	</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.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>

	<div
	:label="$t('settings.style.radii._tab_label')"
	class="radius-container"
	>
	<div class="tab-header">
	<p>{{ $t('settings.radii_help') }}</p>
	<button
	class="btn"
	@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"
	/>
	</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"
	>
	<option
	v-for="shadow in shadowsAvailable"
	:key="shadow"
	:value="shadow"
	>
	{{ $t('settings.style.shadows.components.' + shadow) }}
	</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</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"
	@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"
	@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 submit"
	:disabled="!themeValid"
	@click="setCustomTheme"
	>
	{{ $t('general.apply') }}
	</button>
	<button
	class="btn"
	@click="clearAll"
	>
	{{ $t('settings.style.switcher.reset') }}
	</button>
	</div>
	</div>
	</template>

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

	<style src="./style_switcher.scss" lang="scss"></style>
	diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue
	index e286ceeaad..72656435df 100644
	--- a/src/components/user_card/user_card.vue
	+++ b/src/components/user_card/user_card.vue
	@@ -1,570 +1,575 @@
	<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">
	<i class="button-icon icon-zoom-in" />
	</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>
	<router-link
	v-if="!isOtherUser"
	:to="{ name: 'user-settings' }"
	>
	<i
	class="button-icon icon-wrench usersettings"
	:title="$t('tool_tip.user_settings')"
	/>
	</router-link>
	<a
	v-if="isOtherUser && !user.is_local"
	:href="user.statusnet_profile_url"
	target="_blank"
	>
	<i class="icon-link-ext usersettings" />
	</a>
	<AccountActions
	v-if="isOtherUser && loggedIn"
	:user="user"
	/>
	</div>
	<div class="bottom-line">
	<router-link
	class="user-screen-name"
	:to="userProfileLink(user)"
	>
	@{{ user.screen_name }}
	</router-link>
	<span
	v-if="!hideBio && !!visibleRole"
	class="alert staff"
	>{{ visibleRole }}</span>
	<span v-if="user.locked"><i class="icon icon-lock" /></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="user.follows_you && 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="style-switcher"
	class="userHighlightSel select"
	>
	<select
	:id="'userHighlightSel'+user.id"
	v-model="userHighlightType"
	class="userHighlightSel"
	>
	<option value="disabled">No highlight</option>
	<option value="solid">Solid bg</option>
	<option value="striped">Striped bg</option>
	<option value="side">Side stripe</option>
	</select>
	<i class="icon-down-open" />
	</label>
	</div>
	</div>
	<div
	v-if="loggedIn && isOtherUser"
	class="user-interactions"
	>
	<div class="btn-group">
	<FollowButton :user="user" />
	<template v-if="user.following">
	<ProgressButton
	v-if="!user.subscribed"
	class="btn btn-default"
	:click="subscribeUser"
	:title="$t('user_card.subscribe')"
	>
	<i class="icon-bell-alt" />
	</ProgressButton>
	<ProgressButton
	v-else
	class="btn btn-default toggled"
	:click="unsubscribeUser"
	:title="$t('user_card.unsubscribe')"
	>
	<i class="icon-bell-ringing-o" />
	</ProgressButton>
	</template>
	</div>
	<div>
	<button
	v-if="user.muted"
	class="btn btn-default btn-block toggled"
	@click="unmuteUser"
	>
	{{ $t('user_card.muted') }}
	</button>
	<button
	v-else
	class="btn btn-default btn-block"
	@click="muteUser"
	>
	{{ $t('user_card.mute') }}
	</button>
	</div>
	<div>
	<button
	class="btn btn-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;

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

	&.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 {
	flex: 1 0 100%;
	width: 56px;
	height: 56px;
	box-shadow: 0px 1px 8px rgba(0,0,0,0.75);
	box-shadow: var(--avatarShadow);
	object-fit: cover;
	}
	}

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

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

	i {
	color: #FFF;
	}
	}

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

	.usersettings {
	color: $fallback--lightText;
	color: var(--lightText, $fallback--lightText);
	opacity: .8;
	}

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

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

	// TODO use proper colors
	.staff {
	flex: none;
	text-transform: capitalize;
	color: $fallback--text;
	color: var(--btnText, $fallback--text);
	background-color: $fallback--fg;
	background-color: var(--btn, $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 {
	padding-top: 0;
	padding-bottom: 0;
	flex: 1 0 auto;
	}
	.userHighlightSel.select i {
	line-height: 22px;
	}

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

	.userHighlightCl,
	.userHighlightText,
	.userHighlightSel,
	.userHighlightSel.select {
	height: 22px;
	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>
	diff --git a/src/services/theme_data/pleromafe.js b/src/services/theme_data/pleromafe.js
	index a40d08a662..74e6fc1cc9 100644
	--- a/src/services/theme_data/pleromafe.js
	+++ b/src/services/theme_data/pleromafe.js
	@@ -1,550 +1,584 @@
	import { brightness } from 'chromatism'
	import { alphaBlend, mixrgb } from '../color_convert/color_convert.js'
	/* This is a definition of all layer combinations
	* each key is a topmost layer, each value represents layer underneath
	* this is essentially a simplified tree
	*/
	export const LAYERS = {
	undelay: null, // root
	topBar: null, // no transparency support
	badge: null, // no transparency support
	fg: null,
	bg: 'underlay',
	highlight: 'bg',
	panel: 'bg',
	popover: 'bg',
	selectedMenu: 'popover',
	btn: 'bg',
	btnPanel: 'panel',
	btnTopBar: 'topBar',
	input: 'bg',
	inputPanel: 'panel',
	inputTopBar: 'topBar',
	alert: 'bg',
	alertPanel: 'panel',
	poll: 'bg'
	}

	/* By default opacity slots have 1 as default opacity
	* this allows redefining it to something else
	*/
	export const DEFAULT_OPACITY = {
	alert: 0.5,
	input: 0.5,
	faint: 0.5,
	underlay: 0.15
	}

	/** SUBJECT TO CHANGE IN THE FUTURE, this is all beta
	* Color and opacity slots definitions. Each key represents a slot.
	*
	* Short-hands:
	* String beginning with `--` - value after dashes treated as sole
	* dependency - i.e. `--value` equivalent to { depends: ['value']}
	* String beginning with `#` - value would be treated as solid color
	* defined in hexadecimal representation (i.e. #FFFFFF) and will be
	* used as default. `#FFFFFF` is equivalent to { default: '#FFFFFF'}
	*
	* Full definition:
	* @property {String[]} depends - color slot names this color depends ones.
	* cyclic dependencies are supported to some extent but not recommended.
	* @property {String} [opacity] - opacity slot used by this color slot.
	* opacity is inherited from parents. To break inheritance graph use null
	* @property {Number} [priority] - EXPERIMENTAL. used to pre-sort slots so
	* that slots with higher priority come earlier
	* @property {Function(mod, ...colors)} [color] - function that will be
	* used to determine the color. By default it just copies first color in
	* dependency list.
	* @argument {Number} mod - `1` (light-on-dark) or `-1` (dark-on-light)
	* depending on background color (for textColor)/given color.
	* @argument {...Object} deps - each argument after mod represents each
	* color from `depends` array. All colors take user customizations into
	* account and represented by { r, g, b } objects.
	* @returns {Object} resulting color, should be in { r, g, b } form
	*
	* @property {Boolean\|String} [textColor] - true to mark color slot as text
	* color. This enables automatic text color generation for the slot. Use
	* 'preserve' string if you don't want text color to fall back to
	* black/white. Use 'bw' to only ever use black or white. This also makes
	* following properties required:
	* @property {String} [layer] - which layer the text sit on top on - used
	* to account for transparency in text color calculation
	* layer is inherited from parents. To break inheritance graph use null
	* @property {String} [variant] - which color slot is background (same as
	* above, used to account for transparency)
	*/
	export const SLOT_INHERITANCE = {
	bg: {
	depends: [],
	opacity: 'bg',
	priority: 1
	},
	fg: {
	depends: [],
	priority: 1
	},
	text: {
	depends: [],
	priority: 1
	},
	underlay: {
	default: '#000000',
	opacity: 'underlay'
	},
	link: {
	depends: ['accent'],
	priority: 1
	},
	accent: {
	depends: ['link'],
	priority: 1
	},
	faint: {
	depends: ['text'],
	opacity: 'faint'
	},
	faintLink: {
	depends: ['link'],
	opacity: 'faint'
	},
	+ postFaintLink: {
	+ depends: ['postLink'],
	+ opacity: 'faint'
	+ },

	cBlue: '#0000ff',
	cRed: '#FF0000',
	cGreen: '#00FF00',
	cOrange: '#E3FF00',

	highlight: {
	depends: ['bg'],
	color: (mod, bg) => brightness(5 * mod, bg).rgb
	},
	highlightLightText: {
	depends: ['lightText'],
	layer: 'highlight',
	textColor: true
	},
	+ highlightPostLink: {
	+ depends: ['postLink'],
	+ layer: 'highlight',
	+ textColor: 'preserve'
	+ },
	highlightFaintText: {
	depends: ['faint'],
	layer: 'highlight',
	textColor: true
	},
	highlightFaintLink: {
	depends: ['faintLink'],
	layer: 'highlight',
	textColor: 'preserve'
	},
	+ highlightPostFaintLink: {
	+ depends: ['postFaintLink'],
	+ layer: 'highlight',
	+ textColor: 'preserve'
	+ },
	highlightText: {
	depends: ['text'],
	layer: 'highlight',
	textColor: true
	},
	highlightLink: {
	depends: ['link'],
	layer: 'highlight',
	textColor: 'preserve'
	},
	highlightIcon: {
	depends: ['highlight', 'highlightText'],
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	popover: {
	depends: ['bg'],
	opacity: 'popover'
	},
	popoverLightText: {
	depends: ['lightText'],
	layer: 'popover',
	textColor: true
	},
	+ popoverPostLink: {
	+ depends: ['postLink'],
	+ layer: 'popover',
	+ textColor: 'preserve'
	+ },
	popoverFaintText: {
	depends: ['faint'],
	layer: 'popover',
	textColor: true
	},
	popoverFaintLink: {
	depends: ['faintLink'],
	layer: 'popover',
	textColor: 'preserve'
	},
	+ popoverPostFaintLink: {
	+ depends: ['postFaintLink'],
	+ layer: 'popover',
	+ textColor: 'preserve'
	+ },
	popoverText: {
	depends: ['text'],
	layer: 'popover',
	textColor: true
	},
	popoverLink: {
	depends: ['link'],
	layer: 'popover',
	textColor: 'preserve'
	},
	popoverIcon: {
	depends: ['popover', 'popoverText'],
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	selectedPost: '--highlight',
	selectedPostFaintText: {
	depends: ['highlightFaintText'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: true
	},
	selectedPostLightText: {
	depends: ['highlightLightText'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: true
	},
	+ selectedPostPostLink: {
	+ depends: ['highlightPostLink'],
	+ layer: 'highlight',
	+ variant: 'selectedPost',
	+ textColor: 'preserve'
	+ },
	selectedPostFaintLink: {
	depends: ['highlightFaintLink'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: 'preserve'
	},
	selectedPostText: {
	depends: ['highlightText'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: true
	},
	selectedPostLink: {
	depends: ['highlightLink'],
	layer: 'highlight',
	variant: 'selectedPost',
	textColor: 'preserve'
	},
	selectedPostIcon: {
	depends: ['selectedPost', 'selectedPostText'],
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	selectedMenu: {
	depends: ['bg'],
	color: (mod, bg) => brightness(5 * mod, bg).rgb
	},
	selectedMenuLightText: {
	depends: ['highlightLightText'],
	layer: 'selectedMenu',
	variant: 'selectedMenu',
	textColor: true
	},
	selectedMenuFaintText: {
	depends: ['highlightFaintText'],
	layer: 'selectedMenu',
	variant: 'selectedMenu',
	textColor: true
	},
	selectedMenuFaintLink: {
	depends: ['highlightFaintLink'],
	layer: 'selectedMenu',
	variant: 'selectedMenu',
	textColor: 'preserve'
	},
	selectedMenuText: {
	depends: ['highlightText'],
	layer: 'selectedMenu',
	variant: 'selectedMenu',
	textColor: true
	},
	selectedMenuLink: {
	depends: ['highlightLink'],
	layer: 'selectedMenu',
	variant: 'selectedMenu',
	textColor: 'preserve'
	},
	selectedMenuIcon: {
	depends: ['selectedMenu', 'selectedMenuText'],
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	selectedMenuPopover: {
	depends: ['popover'],
	color: (mod, bg) => brightness(5 * mod, bg).rgb
	},
	selectedMenuPopoverLightText: {
	depends: ['selectedMenuLightText'],
	layer: 'selectedMenuPopover',
	variant: 'selectedMenuPopover',
	textColor: true
	},
	selectedMenuPopoverFaintText: {
	depends: ['selectedMenuFaintText'],
	layer: 'selectedMenuPopover',
	variant: 'selectedMenuPopover',
	textColor: true
	},
	selectedMenuPopoverFaintLink: {
	depends: ['selectedMenuFaintLink'],
	layer: 'selectedMenuPopover',
	variant: 'selectedMenuPopover',
	textColor: 'preserve'
	},
	selectedMenuPopoverText: {
	depends: ['selectedMenuText'],
	layer: 'selectedMenuPopover',
	variant: 'selectedMenuPopover',
	textColor: true
	},
	selectedMenuPopoverLink: {
	depends: ['selectedMenuLink'],
	layer: 'selectedMenuPopover',
	variant: 'selectedMenuPopover',
	textColor: 'preserve'
	},
	selectedMenuPopoverIcon: {
	depends: ['selectedMenuPopover', 'selectedMenuText'],
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	lightText: {
	depends: ['text'],
	color: (mod, text) => brightness(20 * mod, text).rgb
	},

	+ postLink: {
	+ depends: ['link']
	+ },
	+
	border: {
	depends: ['fg'],
	opacity: 'border',
	color: (mod, fg) => brightness(2 * mod, fg).rgb
	},

	poll: {
	depends: ['accent', 'bg'],
	copacity: 'poll',
	color: (mod, accent, bg) => alphaBlend(accent, 0.4, bg)
	},
	pollText: {
	depends: ['text'],
	layer: 'poll',
	textColor: true
	},

	icon: {
	depends: ['bg', 'text'],
	inheritsOpacity: false,
	color: (mod, bg, text) => mixrgb(bg, text)
	},

	// Foreground
	fgText: {
	depends: ['text'],
	layer: 'fg',
	textColor: true
	},
	fgLink: {
	depends: ['link'],
	layer: 'fg',
	textColor: 'preserve'
	},

	// Panel header
	panel: {
	depends: ['fg'],
	opacity: 'panel'
	},
	panelText: {
	depends: ['text'],
	layer: 'panel',
	textColor: true
	},
	panelFaint: {
	depends: ['fgText'],
	layer: 'panel',
	opacity: 'faint',
	textColor: true
	},
	panelLink: {
	depends: ['fgLink'],
	layer: 'panel',
	textColor: 'preserve'
	},

	// Top bar
	topBar: '--fg',
	topBarText: {
	depends: ['fgText'],
	layer: 'topBar',
	textColor: true
	},
	topBarLink: {
	depends: ['fgLink'],
	layer: 'topBar',
	textColor: 'preserve'
	},

	// Tabs
	tab: {
	depends: ['btn']
	},
	tabText: {
	depends: ['btnText'],
	layer: 'btn',
	textColor: true
	},
	tabActiveText: {
	depends: ['text'],
	layer: 'bg',
	textColor: true
	},

	// Buttons
	btn: {
	depends: ['fg'],
	opacity: 'btn'
	},
	btnText: {
	depends: ['fgText'],
	layer: 'btn',
	textColor: true
	},
	btnPanelText: {
	depends: ['panelText'],
	layer: 'btnPanel',
	variant: 'btn',
	textColor: true
	},
	btnTopBarText: {
	depends: ['topBarText'],
	layer: 'btnTopBar',
	variant: 'btn',
	textColor: true
	},

	// Buttons: pressed
	btnPressed: '--btn',
	btnPressedText: {
	depends: ['btnText'],
	layer: 'btn',
	variant: 'btnPressed',
	textColor: true
	},
	btnPressedPanel: {
	depends: ['btnPressed']
	},
	btnPressedPanelText: {
	depends: ['btnPanelText'],
	layer: 'btnPanel',
	variant: 'btnPressed',
	textColor: true
	},
	btnPressedTopBarText: {
	depends: ['btnTopBarText'],
	layer: 'btnTopBar',
	variant: 'btnPressed',
	textColor: true
	},

	// Buttons: toggled
	btnToggled: {
	depends: ['btn'],
	color: (mod, btn) => brightness(mod * 20, btn).rgb
	},
	btnToggledText: {
	depends: ['btnText'],
	layer: 'btn',
	variant: 'btnToggled',
	textColor: true
	},
	btnToggledPanelText: {
	depends: ['btnPanelText'],
	layer: 'btnPanel',
	variant: 'btnToggled',
	textColor: true
	},
	btnToggledTopBarText: {
	depends: ['btnTopBarText'],
	layer: 'btnTopBar',
	variant: 'btnToggled',
	textColor: true
	},

	// Buttons: disabled
	btnDisabled: {
	depends: ['btn', 'bg'],
	color: (mod, btn, bg) => alphaBlend(btn, 0.5, bg)
	},
	btnDisabledText: {
	depends: ['btnText'],
	layer: 'btn',
	variant: 'btnDisabled',
	textColor: true,
	color: (mod, text) => brightness(mod * -60, text).rgb
	},
	btnDisabledPanelText: {
	depends: ['btnPanelText'],
	layer: 'btnPanel',
	variant: 'btnDisabled',
	textColor: true,
	color: (mod, text) => brightness(mod * -60, text).rgb
	},
	btnDisabledTopBarText: {
	depends: ['btnTopBarText'],
	layer: 'btnTopBar',
	variant: 'btnDisabled',
	textColor: true,
	color: (mod, text) => brightness(mod * -60, text).rgb
	},

	// Input fields
	input: {
	depends: ['fg'],
	opacity: 'input'
	},
	inputText: {
	depends: ['text'],
	layer: 'input',
	textColor: true
	},
	inputPanelText: {
	depends: ['panelText'],
	layer: 'inputPanel',
	variant: 'input',
	textColor: true
	},
	inputTopbarText: {
	depends: ['topBarText'],
	layer: 'inputTopBar',
	variant: 'input',
	textColor: true
	},

	alertError: {
	depends: ['cRed'],
	opacity: 'alert'
	},
	alertErrorText: {
	depends: ['text'],
	layer: 'alert',
	variant: 'alertError',
	textColor: true
	},
	alertErrorPanelText: {
	depends: ['panelText'],
	layer: 'alertPanel',
	variant: 'alertError',
	textColor: true
	},

	alertWarning: {
	depends: ['cOrange'],
	opacity: 'alert'
	},
	alertWarningText: {
	depends: ['text'],
	layer: 'alert',
	variant: 'alertWarning',
	textColor: true
	},
	alertWarningPanelText: {
	depends: ['panelText'],
	layer: 'alertPanel',
	variant: 'alertWarning',
	textColor: true
	},

	badgeNotification: '--cRed',
	badgeNotificationText: {
	depends: ['text', 'badgeNotification'],
	layer: 'badge',
	variant: 'badgeNotification',
	textColor: 'bw'
	}
	}
	diff --git a/static/themes/kenomo.json b/static/themes/kenomo.json
	new file mode 100644
	index 0000000000..98ddf97436
	--- /dev/null
	+++ b/static/themes/kenomo.json
	@@ -0,0 +1,71 @@
	+{
	+ "_pleroma_theme_version": 2,
	+ "name": "Kenomo",
	+ "source": {
	+ "themeEngineVersion": 3,
	+ "fonts": {},
	+ "shadows": {
	+ "panel": [],
	+ "topBar": [],
	+ "button": [
	+ {
	+ "x": 0,
	+ "y": 1,
	+ "blur": 0,
	+ "spread": 0,
	+ "color": "#FFFFFF",
	+ "alpha": 0.2,
	+ "inset": true
	+ },
	+ {
	+ "x": 0,
	+ "y": -1,
	+ "blur": 0,
	+ "spread": 0,
	+ "color": "#000000",
	+ "alpha": 0.2,
	+ "inset": true
	+ }
	+ ],
	+ "input": [
	+ {
	+ "x": 0,
	+ "y": "0",
	+ "blur": 0,
	+ "spread": "1",
	+ "color": "#576574",
	+ "alpha": "1",
	+ "inset": true
	+ }
	+ ]
	+ },
	+ "opacity": {
	+ "underlay": "1",
	+ "border": "0"
	+ },
	+ "colors": {
	+ "bg": "#ffffff",
	+ "fg": "#f6f6f6",
	+ "text": "#494949",
	+ "underlay": "#ffffff",
	+ "link": "#818181",
	+ "accent": "#818181",
	+ "cBlue": "#2e86de",
	+ "cRed": "#c96248",
	+ "cGreen": "#0fa00f",
	+ "cOrange": "#aa7623",
	+ "postLink": "#2e86de",
	+ "border": "#ffffff",
	+ "icon": "#8a8a8a",
	+ "panel": "transparent",
	+ "topBarText": "#4b4b4b",
	+ "tab": "--btn,-30",
	+ "btn": "#576574"
	+ },
	+ "radii": {
	+ "panel": "0",
	+ "avatar": "6",
	+ "avatarAlt": "6"
	+ }
	+ }
	+}

File Metadata

Mime Type: text/x-diff
Expires: Sat, Sep 19, 1:03 AM (16 h, 10 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1766596
Default Alt Text: (97 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions