No OneTemporary
Actions

Authored By

Unknown

Size

104 KB

Referenced Files

None

Subscribers

None

View Options

	diff --git a/src/App.scss b/src/App.scss
	index ef68ac50b5..8e9f3171a0 100644
	--- a/src/App.scss
	+++ b/src/App.scss
	@@ -1,916 +1,912 @@
	// stylelint-disable rscss/class-format
	/* stylelint-disable no-descending-specificity */
	@import "./variables";
	@import "./panel";

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

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

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

	&.hidden {
	display: none;
	}
	}

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

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

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

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

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

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

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

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

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

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

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

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

	h4 {
	margin: 0;
	}

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

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

	.button-unstyled:hover,
	a:hover {
	> i[class*="icon-"],
	> .svg-inline--fa,
	> .iconLetter {
	color: var(--text);
	}
	}

	nav {
	z-index: var(--ZI_navbar);
	background-color: $fallback--fg;
	background-color: var(--topBar, $fallback--fg);
	color: $fallback--faint;
	color: var(--faint, $fallback--faint);
	box-shadow: 0 0 4px rgb(0 0 0 / 60%);
	box-shadow: var(--topBarShadow);
	box-sizing: border-box;
	height: var(--navbar-height);
	position: fixed;
	}

	#sidebar {
	grid-area: sidebar;
	}

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

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

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

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

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

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

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

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

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

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

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

	&:hover {
	z-index: 2;
	}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.button-default {
	user-select: none;
	color: $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: 1em;
	font-family: sans-serif;
	font-family: var(--interfaceFont, sans-serif);

	&.-sublime {
	background: transparent;
	}

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

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

	&:hover {
	box-shadow: 0 0 4px rgb(255 255 255 / 30%);
	box-shadow: var(--buttonHoverShadow);
	}

	&:active {
	box-shadow:
	0 0 4px 0 rgb(255 255 255 / 30%),
	0 1px 0 0 rgb(0 0 0 / 20%) inset,
	0 -1px 0 0 rgb(255 255 255 / 20%) 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:
	0 0 4px 0 rgb(255 255 255 / 30%),
	0 1px 0 0 rgb(0 0 0 / 20%) inset,
	0 -1px 0 0 rgb(255 255 255 / 20%) 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,
	.input {
	&.unstyled {
	border-radius: 0;
	background: none;
	box-shadow: none;
	height: unset;
	}

	--_padding: 0.5em;

	border: none;
	border-radius: $fallback--inputRadius;
	border-radius: var(--inputRadius, $fallback--inputRadius);
	box-shadow:
	0 1px 0 0 rgb(0 0 0 / 20%) inset,
	0 -1px 0 0 rgb(255 255 255 / 20%) inset,
	0 0 2px 0 rgb(0 0 0 / 100%) 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: 1em;
	margin: 0;
	box-sizing: border-box;
	display: inline-block;
	position: relative;
	line-height: 2;
	hyphens: none;
	padding: 0 var(--_padding);

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

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

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

	&:checked + label::before {
	box-shadow: 0 0 2px black inset, 0 0 0 4px $fallback--fg inset;
	box-shadow: var(--inputShadow), 0 0 0 4px var(--fg, $fallback--fg) inset;
	background-color: var(--accent, $fallback--link);
	}

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

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

	&[type="checkbox"] {
	&:checked + label::before {
	color: $fallback--text;
	color: var(--inputText, $fallback--text);
	}

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

	+ label::before {
	flex-shrink: 0;
	display: inline-block;
	content: "✓";
	transition: color 200ms;
	width: 1.1em;
	height: 1.1em;
	border-radius: $fallback--checkboxRadius;
	border-radius: var(--checkboxRadius, $fallback--checkboxRadius);
	box-shadow: 0 0 2px black inset;
	box-shadow: var(--inputShadow);
	margin-right: 0.5em;
	background-color: $fallback--fg;
	background-color: var(--input, $fallback--fg);
	vertical-align: top;
	text-align: center;
	line-height: 1.1;
	font-size: 1.1em;
	box-sizing: border-box;
	color: transparent;
	overflow: hidden;
	}
	}

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

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

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

	.hide-number-spinner {
	appearance: textfield;

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

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

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

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

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

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

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

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

	.fa {
	color: grey;
	}

	.mobile-shown {
	display: none;
	}

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

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

	.alert {
	margin: 0 0.35em;
	padding: 0 0.25em;
	border-radius: $fallback--tooltipRadius;
	border-radius: var(--tooltipRadius, $fallback--tooltipRadius);

	&.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);
	+ --text: var(--textFaint);
	+ --textGreentext: var(--textGreentextFaint);
	+ --link: var(--linkFaint);

	- &:hover {
	- text-decoration: underline;
	- }
	+ color: var(--text);
	}

	.visibility-notice {
	padding: 0.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: 0.5em;
	color: inherit;
	}
	}

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

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

	.veryfaint {
	opacity: 0.25;
	}

	+.timeago {
	+ --link: var(--text);
	+ --linkFaint: var(--textFaint);
	+}
	+
	.login-hint {
	text-align: center;

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

	.visible-for-screenreader-only {
	display: block;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	visibility: visible;
	clip: rect(0 0 0 0);
	padding: 0;
	position: absolute;
	}
	diff --git a/src/components/icon.style.js b/src/components/icon.style.js
	index 732cf16f09..adc72fc59c 100644
	--- a/src/components/icon.style.js
	+++ b/src/components/icon.style.js
	@@ -1,4 +1,15 @@
	export default {
	name: 'Icon',
	- selector: '.icon'
	+ virtual: true,
	+ selector: '.svg-inline--fa',
	+ defaultRules: [
	+ {
	+ component: 'Icon',
	+ directives: {
	+ textColor: '--text',
	+ textOpacity: 0.5,
	+ textOpacityMode: 'mixrgb'
	+ }
	+ }
	+ ]
	}
	diff --git a/src/components/link.style.js b/src/components/link.style.js
	new file mode 100644
	index 0000000000..0128fd91ac
	--- /dev/null
	+++ b/src/components/link.style.js
	@@ -0,0 +1,25 @@
	+export default {
	+ name: 'Link',
	+ selector: 'a',
	+ virtual: true,
	+ states: {
	+ faint: '.faint'
	+ },
	+ defaultRules: [
	+ {
	+ component: 'Link',
	+ directives: {
	+ textColor: '--link'
	+ }
	+ },
	+ {
	+ component: 'Link',
	+ state: ['faint'],
	+ directives: {
	+ textColor: '--link',
	+ textOpacity: 0.5,
	+ textOpacityMode: 'fake'
	+ }
	+ }
	+ ]
	+}
	diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue
	index a8eceab0b1..5c425200ba 100644
	--- a/src/components/notification/notification.vue
	+++ b/src/components/notification/notification.vue
	@@ -1,283 +1,283 @@
	<template>
	<article
	v-if="notification.type === 'mention'"
	>
	<Status
	class="Notification"
	:compact="true"
	:statusoid="notification.status"
	@interacted="interacted"
	/>
	</article>
	<article v-else>
	<div
	v-if="needMute && !unmuted"
	class="Notification container -muted"
	>
	<small>
	<user-link
	:user="notification.from_profile"
	:at="false"
	/>
	</small>
	<button
	class="button-unstyled unmute"
	@click.prevent="toggleMute"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="eye-slash"
	/>
	</button>
	</div>
	<div
	v-else
	class="Notification non-mention"
	:class="[userClass, { highlighted: userStyle }, '-type--' + notification.type]"
	:style="[ userStyle ]"
	>
	<a
	class="avatar-container"
	:href="$router.resolve(userProfileLink).href"
	@click.prevent
	>
	<UserPopover
	:user-id="notification.from_profile.id"
	:overlay-centers="true"
	>
	<UserAvatar
	class="post-avatar"
	:bot="botIndicator"
	:compact="true"
	:better-shadow="betterShadow"
	:user="notification.from_profile"
	/>
	</UserPopover>
	</a>
	<div class="notification-right">
	<span class="notification-details">
	<div class="name-and-action">
	<!-- eslint-disable vue/no-v-html -->
	<bdi v-if="!!notification.from_profile.name_html">
	<RichContent
	class="username"
	:title="'@'+notification.from_profile.screen_name_ui"
	:html="notification.from_profile.name_html"
	:emoji="notification.from_profile.emoji"
	/>
	</bdi>
	<!-- eslint-enable vue/no-v-html -->
	<span
	v-else
	class="username"
	:title="'@'+notification.from_profile.screen_name_ui"
	>
	{{ notification.from_profile.name }}
	</span>
	{{ ' ' }}
	<span v-if="notification.type === 'like'">
	<FAIcon
	class="type-icon"
	icon="star"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.favorited_you') }}</small>
	</span>
	<span v-if="notification.type === 'repeat'">
	<FAIcon
	class="type-icon"
	icon="retweet"
	:title="$t('tool_tip.repeat')"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.repeated_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow'">
	<FAIcon
	class="type-icon"
	icon="user-plus"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.followed_you') }}</small>
	</span>
	<span v-if="notification.type === 'follow_request'">
	<FAIcon
	class="type-icon"
	icon="user"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.follow_request') }}</small>
	</span>
	<span v-if="notification.type === 'move'">
	<FAIcon
	class="type-icon"
	icon="suitcase-rolling"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.migrated_to') }}</small>
	</span>
	<span v-if="notification.type === 'pleroma:emoji_reaction'">
	<small>
	<i18n-t
	scope="global"
	keypath="notifications.reacted_with"
	>
	<img
	v-if="notification.emoji_url"
	class="emoji-reaction-emoji emoji-reaction-emoji-image"
	:src="notification.emoji_url"
	:alt="notification.emoji"
	:title="notification.emoji"
	>
	<span
	v-else
	class="emoji-reaction-emoji"
	>{{ notification.emoji }}</span>
	</i18n-t>
	</small>
	</span>
	<span v-if="notification.type === 'pleroma:report'">
	<small>{{ $t('notifications.submitted_report') }}</small>
	</span>
	<span v-if="notification.type === 'poll'">
	<FAIcon
	class="type-icon"
	icon="poll-h"
	/>
	{{ ' ' }}
	<small>{{ $t('notifications.poll_ended') }}</small>
	</span>
	</div>
	<div
	v-if="isStatusNotification"
	class="timeago"
	>
	<router-link
	v-if="notification.status"
	:to="{ name: 'conversation', params: { id: notification.status.id } }"
	- class="timeago-link faint-link"
	+ class="timeago-link faint"
	>
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</router-link>
	<button
	class="button-unstyled expand-icon"
	:title="$t('tool_tip.toggle_expand')"
	:aria-expanded="statusExpanded"
	@click.prevent="toggleStatusExpanded"
	>
	<FAIcon
	class="fa-scale-110"
	fixed-width
	:icon="statusExpanded ? 'compress-alt' : 'expand-alt'"
	/>
	</button>
	</div>
	<div
	v-else
	class="timeago"
	>
	<span class="faint">
	<Timeago
	:time="notification.created_at"
	:auto-update="240"
	/>
	</span>
	</div>
	<button
	v-if="needMute"
	class="button-unstyled"
	:title="$t('tool_tip.toggle_mute')"
	:aria-expanded="!unmuted"
	@click.prevent="toggleMute"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="eye-slash"
	/>
	</button>
	</span>
	<div
	v-if="notification.type === 'follow' \|\| notification.type === 'follow_request'"
	class="follow-text"
	>
	<user-link
	class="follow-name"
	:user="notification.from_profile"
	/>
	<div
	v-if="notification.type === 'follow_request'"
	style="white-space: nowrap;"
	>
	<button
	class="button-unstyled"
	:title="$t('tool_tip.accept_follow_request')"
	@click="approveUser()"
	>
	<FAIcon
	icon="check"
	class="fa-scale-110 fa-old-padding follow-request-accept"
	/>
	</button>
	<button
	class="button-unstyled"
	:title="$t('tool_tip.reject_follow_request')"
	@click="denyUser()"
	>
	<FAIcon
	icon="times"
	class="fa-scale-110 fa-old-padding follow-request-reject"
	/>
	</button>
	</div>
	</div>
	<div
	v-else-if="notification.type === 'move'"
	class="move-text"
	>
	<user-link
	:user="notification.target"
	/>
	</div>
	<Report
	v-else-if="notification.type === 'pleroma:report'"
	:report-id="notification.report.id"
	/>
	<template v-else>
	<StatusContent
	:class="{ faint: !statusExpanded }"
	:compact="!statusExpanded"
	:status="notification.status"
	/>
	</template>
	</div>
	</div>
	<teleport to="#modal">
	<confirm-modal
	v-if="showingApproveConfirmDialog"
	:title="$t('user_card.approve_confirm_title')"
	:confirm-text="$t('user_card.approve_confirm_accept_button')"
	:cancel-text="$t('user_card.approve_confirm_cancel_button')"
	@accepted="doApprove"
	@cancelled="hideApproveConfirmDialog"
	>
	{{ $t('user_card.approve_confirm', { user: user.screen_name_ui }) }}
	</confirm-modal>
	<confirm-modal
	v-if="showingDenyConfirmDialog"
	:title="$t('user_card.deny_confirm_title')"
	:confirm-text="$t('user_card.deny_confirm_accept_button')"
	:cancel-text="$t('user_card.deny_confirm_cancel_button')"
	@accepted="doDeny"
	@cancelled="hideDenyConfirmDialog"
	>
	{{ $t('user_card.deny_confirm', { user: user.screen_name_ui }) }}
	</confirm-modal>
	</teleport>
	</article>
	</template>

	<script src="./notification.js"></script>
	<style src="./notification.scss" lang="scss"></style>
	diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss
	index 5749e4302a..708d111b8d 100644
	--- a/src/components/notifications/notifications.scss
	+++ b/src/components/notifications/notifications.scss
	@@ -1,194 +1,186 @@
	@import "../../variables";

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

	.notification {
	position: relative;

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

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

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

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

	img {
	visibility: visible;
	}
	}

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

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

	.avatar-container {
	width: 32px;
	height: 32px;
	}
	-
	- .faint {
	- --link: var(--faintLink);
	- --text: var(--faint);
	- }
	}

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

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

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

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

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

	time {
	white-space: nowrap;
	}

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

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

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

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

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

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

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

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

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

	.timeago {
	margin-right: 0.2em;
	}

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

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

	small {
	font-weight: lighter;
	}
	}

	p {
	margin: 0;
	margin-top: 0;
	margin-bottom: 0.3em;
	}
	}
	}
	diff --git a/src/components/panel.style.js b/src/components/panel.style.js
	index e3da4d1a02..870f5099a7 100644
	--- a/src/components/panel.style.js
	+++ b/src/components/panel.style.js
	@@ -1,10 +1,11 @@
	export default {
	name: 'Panel',
	selector: '.panel',
	validInnerComponents: [
	'Text',
	+ 'Link',
	'Icon',
	'Button',
	'PanelHeader'
	]
	}
	diff --git a/src/components/panel_header.style.js b/src/components/panel_header.style.js
	index aaa8bea9ff..e83e1f15c7 100644
	--- a/src/components/panel_header.style.js
	+++ b/src/components/panel_header.style.js
	@@ -1,9 +1,10 @@
	export default {
	name: 'PanelHeader',
	selector: '.panel-heading',
	validInnerComponents: [
	'Text',
	+ 'Link',
	'Icon',
	'Button'
	]
	}
	diff --git a/src/components/status/status.vue b/src/components/status/status.vue
	index fa9d6f0b93..7c56430f29 100644
	--- a/src/components/status/status.vue
	+++ b/src/components/status/status.vue
	@@ -1,597 +1,597 @@
	<template>
	<div
	v-if="!hideStatus"
	ref="root"
	class="Status"
	:class="[{ '-focused': isFocused }, { '-conversation': inlineExpanded }]"
	>
	<div
	v-if="error"
	class="alert error"
	>
	{{ error }}
	<span
	class="fa-scale-110 fa-old-padding"
	@click="clearError"
	>
	<FAIcon icon="times" />
	</span>
	</div>
	<template v-if="muted && !isPreview">
	<div class="status-container muted">
	<small class="status-username">
	<FAIcon
	v-if="muted && retweet"
	class="fa-scale-110 fa-old-padding repeat-icon"
	icon="retweet"
	/>
	<user-link
	:user="status.user"
	:at="false"
	/>
	</small>
	<small
	v-if="showReasonMutedThread"
	class="mute-thread"
	>
	{{ $t('status.thread_muted') }}
	</small>
	<small
	v-if="showReasonMutedThread && muteWordHits.length > 0"
	class="mute-thread"
	>
	{{ $t('status.thread_muted_and_words') }}
	</small>
	<small
	class="mute-words"
	:title="muteWordHits.join(', ')"
	>
	{{ muteWordHits.join(', ') }}
	</small>
	<button
	class="unmute button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	icon="eye-slash"
	class="fa-scale-110 fa-old-padding"
	/>
	</button>
	</div>
	</template>
	<template v-else>
	<div
	v-if="showPinned"
	class="pin"
	>
	<FAIcon
	icon="thumbtack"
	class="faint"
	/>
	<span class="faint">{{ $t('status.pinned') }}</span>
	</div>
	<div
	v-if="retweet && !noHeading && !inConversation"
	:class="[repeaterClass, { highlighted: repeaterStyle }]"
	:style="[repeaterStyle]"
	class="status-container repeat-info"
	>
	<UserAvatar
	v-if="retweet"
	class="left-side repeater-avatar"
	:bot="rtBotIndicator"
	:better-shadow="betterShadow"
	:user="statusoid.user"
	/>
	<div class="right-side faint">
	<bdi
	class="status-username repeater-name"
	:title="retweeter"
	>
	<router-link
	v-if="retweeterHtml"
	:to="retweeterProfileLink"
	>
	<RichContent
	:html="retweeterHtml"
	:emoji="retweeterUser.emoji"
	/>
	</router-link>
	<router-link
	v-else
	:to="retweeterProfileLink"
	>{{ retweeter }}</router-link>
	</bdi>
	{{ ' ' }}
	<FAIcon
	icon="retweet"
	class="repeat-icon"
	:title="$t('tool_tip.repeat')"
	/>
	{{ $t('timeline.repeated') }}
	</div>
	</div>

	<div
	v-if="!deleted"
	:class="[userClass, { highlighted: userStyle, '-repeat': retweet && !inConversation }]"
	:style="[ userStyle ]"
	class="status-container"
	:data-tags="tags"
	>
	<div
	v-if="!noHeading"
	class="left-side"
	>
	<a
	:href="$router.resolve(userProfileLink).href"
	@click.prevent
	>
	<UserPopover
	:user-id="status.user.id"
	:overlay-centers="true"
	>
	<UserAvatar
	class="post-avatar"
	:bot="botIndicator"
	:compact="compact"
	:better-shadow="betterShadow"
	:user="status.user"
	/>
	</UserPopover>
	</a>
	</div>
	<div class="right-side">
	<div
	v-if="!noHeading"
	class="status-heading"
	>
	<div class="heading-name-row">
	<div class="heading-left">
	<h4
	v-if="status.user.name_html"
	class="status-username"
	:title="status.user.name"
	>
	<RichContent
	:html="status.user.name"
	:emoji="status.user.emoji"
	/>
	</h4>
	<h4
	v-else
	class="status-username"
	:title="status.user.name"
	>
	{{ status.user.name }}
	</h4>
	<user-link
	class="account-name"
	:title="status.user.screen_name_ui"
	:user="status.user"
	:at="false"
	/>
	<img
	v-if="!!(status.user && status.user.favicon)"
	class="status-favicon"
	:src="status.user.favicon"
	>
	</div>

	<span class="heading-right">
	<router-link
	- class="timeago faint-link"
	+ class="timeago faint"
	:to="{ name: 'conversation', params: { id: status.id } }"
	>
	<Timeago
	:time="status.created_at"
	:auto-update="60"
	/>
	</router-link>
	<span
	v-if="status.visibility"
	class="visibility-icon"
	:title="visibilityLocalized"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="visibilityIcon(status.visibility)"
	/>
	</span>
	<button
	v-if="expandable && !isPreview"
	class="button-unstyled"
	:title="$t('status.expand')"
	@click.prevent="toggleExpanded"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	icon="plus-square"
	/>
	</button>
	<button
	v-if="unmuted"
	class="button-unstyled"
	@click.prevent="toggleMute"
	>
	<FAIcon
	fixed-width
	icon="eye-slash"
	class="fa-scale-110"
	/>
	</button>
	<button
	v-if="inThreadForest && replies && replies.length && !simpleTree"
	class="button-unstyled"
	:title="threadShowing ? $t('status.thread_hide') : $t('status.thread_show')"
	:aria-expanded="threadShowing ? 'true' : 'false'"
	@click.prevent="toggleThreadDisplay"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="threadShowing ? 'chevron-up' : 'chevron-down'"
	/>
	</button>
	<button
	v-if="dive && !simpleTree"
	class="button-unstyled"
	:title="$t('status.show_only_conversation_under_this')"
	@click.prevent="dive"
	>
	<FAIcon
	fixed-width
	class="fa-scale-110"
	:icon="'angle-double-right'"
	/>
	</button>
	</span>
	</div>
	<div
	v-if="scrobblePresent"
	class="status-rich-presence"
	>
	<a
	v-if="scrobble.externalLink"
	:href="scrobble.externalLink"
	target="_blank"
	>
	{{ scrobble.artist }} — {{ scrobble.title }}
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="play"
	/>
	<span class="status-rich-presence-time">
	<Timeago
	template-key="time.in_past"
	:time="scrobble.created_at"
	:auto-update="60"
	/>
	</span>
	</a>
	<span v-if="!scrobble.externalLink">
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="music"
	/>
	{{ scrobble.artist }} — {{ scrobble.title }}
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="play"
	/>
	<span class="status-rich-presence-time">
	<Timeago
	template-key="time.in_past"
	:time="scrobble.created_at"
	:auto-update="60"
	/>
	</span>
	</span>
	</div>
	<div
	v-if="isReply \|\| hasMentionsLine"
	class="heading-reply-row"
	>
	<span
	v-if="isReply"
	class="glued-label reply-glued-label"
	>
	<StatusPopover
	v-if="!isPreview"
	:status-id="status.parent_visible && status.in_reply_to_status_id"
	class="reply-to-popover"
	style="min-width: 0;"
	:class="{ '-strikethrough': !status.parent_visible }"
	>
	<button
	class="button-unstyled reply-to"
	:aria-label="$t('tool_tip.reply')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<FAIcon
	class="fa-scale-110 fa-old-padding"
	icon="reply"
	flip="horizontal"
	/>
	{{ ' ' }}
	<span
	class="reply-to-text"
	>
	{{ $t('status.reply_to') }}
	</span>
	</button>
	</StatusPopover>

	<span
	v-else
	class="reply-to-no-popover"
	>
	<span class="reply-to-text">{{ $t('status.reply_to') }}</span>
	</span>
	<MentionLink
	:content="replyToName"
	:url="replyProfileLink"
	:user-id="status.in_reply_to_user_id"
	:user-screen-name="status.in_reply_to_screen_name"
	/>
	</span>

	<!-- This little wrapper is made for sole purpose of "gluing" -->
	<!-- "Mentions" label to the first mention -->
	<span
	v-if="hasMentionsLine"
	class="glued-label"
	>
	<span
	class="mentions"
	:aria-label="$t('tool_tip.mentions')"
	@click.prevent="gotoOriginal(status.in_reply_to_status_id)"
	>
	<span
	class="mentions-text"
	>
	{{ $t('status.mentions') }}
	</span>
	</span>
	<MentionsLine
	v-if="hasMentionsLine"
	:mentions="mentionsLine.slice(0, 1)"
	class="mentions-line-first"
	/>
	</span>
	{{ ' ' }}
	<MentionsLine
	v-if="hasMentionsLine"
	:mentions="mentionsLine.slice(1)"
	class="mentions-line"
	/>
	</div>
	<div
	v-if="isEdited && editingAvailable && !isPreview"
	class="heading-edited-row"
	>
	<i18n-t
	keypath="status.edited_at"
	tag="span"
	>
	<template #time>
	<Timeago
	template-key="time.in_past"
	:time="status.edited_at"
	:auto-update="60"
	:long-format="true"
	/>
	</template>
	</i18n-t>
	</div>
	</div>

	<StatusContent
	ref="content"
	:status="status"
	:no-heading="noHeading"
	:highlight="highlight"
	:focused="isFocused"
	:controlled-showing-tall="controlledShowingTall"
	:controlled-expanding-subject="controlledExpandingSubject"
	:controlled-showing-long-subject="controlledShowingLongSubject"
	:controlled-toggle-showing-tall="controlledToggleShowingTall"
	:controlled-toggle-expanding-subject="controlledToggleExpandingSubject"
	:controlled-toggle-showing-long-subject="controlledToggleShowingLongSubject"
	@mediaplay="addMediaPlaying($event)"
	@mediapause="removeMediaPlaying($event)"
	@parseReady="setHeadTailLinks"
	/>

	<article
	v-if="hasVisibleQuote"
	class="quoted-status"
	>
	<button
	class="button-unstyled -link display-quoted-status-button"
	:aria-expanded="shouldDisplayQuote"
	@click="toggleDisplayQuote"
	>
	{{ shouldDisplayQuote ? $t('status.hide_quote') : $t('status.display_quote') }}
	<FAIcon
	class="display-quoted-status-button-icon"
	:icon="shouldDisplayQuote ? 'chevron-up' : 'chevron-down'"
	/>
	</button>
	<Status
	v-if="shouldDisplayQuote"
	:statusoid="quotedStatus"
	:in-quote="true"
	/>
	</article>
	<p
	v-else-if="hasInvisibleQuote"
	class="quoted-status -unavailable-prompt"
	>
	<i18n-t keypath="status.invisible_quote">
	<template #link>
	<bdi>
	<a
	:href="status.quote_url"
	target="_blank"
	>
	{{ status.quote_url }}
	</a>
	</bdi>
	</template>
	</i18n-t>
	</p>

	<div
	v-if="inConversation && !isPreview && replies && replies.length"
	class="replies"
	>
	<button
	v-if="showOtherRepliesAsButton && replies.length > 1"
	class="button-unstyled -link faint"
	:title="$tc('status.ancestor_follow', replies.length - 1, { numReplies: replies.length - 1 })"
	@click.prevent="dive"
	>
	{{ $tc('status.replies_list_with_others', replies.length - 1, { numReplies: replies.length - 1 }) }}
	</button>
	<span
	v-else
	class="faint"
	>
	{{ $t('status.replies_list') }}
	</span>
	<StatusPopover
	v-for="reply in replies"
	:key="reply.id"
	:status-id="reply.id"
	>
	<button
	class="button-unstyled -link reply-link"
	@click.prevent="gotoOriginal(reply.id)"
	>
	{{ reply.name }}
	</button>
	</StatusPopover>
	</div>

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

	<EmojiReactions
	v-if="(mergedConfig.emojiReactionsOnTimeline \|\| isFocused) && (!noHeading && !isPreview)"
	:status="status"
	/>

	<div
	v-if="!noHeading && !isPreview"
	class="status-actions"
	>
	<reply-button
	:replying="replying"
	:status="status"
	@toggle="toggleReplying"
	/>
	<retweet-button
	:visibility="status.visibility"
	:logged-in="loggedIn"
	:status="status"
	@click="$emit('interacted')"
	/>
	<favorite-button
	:logged-in="loggedIn"
	:status="status"
	@click="$emit('interacted')"
	/>
	<ReactButton
	v-if="loggedIn"
	:status="status"
	@click="$emit('interacted')"
	/>
	<extra-buttons
	:status="status"
	@onError="showError"
	@onSuccess="clearError"
	/>
	</div>
	</div>
	</div>
	<div
	v-else
	class="gravestone"
	>
	<div class="left-side">
	<UserAvatar
	class="post-avatar"
	:compact="compact"
	:bot="botIndicator"
	/>
	</div>
	<div class="right-side">
	<div class="deleted-text">
	{{ $t('status.status_deleted') }}
	</div>
	<reply-button
	v-if="replying"
	:replying="replying"
	:status="status"
	@toggle="toggleReplying"
	/>
	</div>
	</div>
	<div
	v-if="replying"
	class="status-container reply-form"
	>
	<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>
	</template>

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

	<style src="./status.scss" lang="scss"></style>
	diff --git a/src/components/status_body/status_body.scss b/src/components/status_body/status_body.scss
	index 8fd60afc38..a887874598 100644
	--- a/src/components/status_body/status_body.scss
	+++ b/src/components/status_body/status_body.scss
	@@ -1,173 +1,172 @@
	@import "../../variables";

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

	.emoji {
	--_still_image-label-scale: 0.5;
	}

	.attachments {
	margin-top: 0.5em;
	}

	& .text,
	& .summary {
	font-family: var(--postFont, sans-serif);
	white-space: pre-wrap;
	overflow-wrap: break-word;
	word-wrap: break-word;
	word-break: break-word;
	line-height: var(--post-line-height);
	}

	.summary {
	display: block;
	font-style: italic;
	padding-bottom: 0.5em;
	}

	.text {
	&.-single-line {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	height: 1.4em;
	}
	}

	.summary-wrapper {
	margin-bottom: 0.5em;
	border-style: solid;
	border-width: 0 0 1px;
	border-color: var(--border, $fallback--border);
	flex-grow: 0;

	&.-tall {
	position: relative;

	.summary {
	max-height: 2em;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	}
	}
	}

	.text-wrapper {
	display: flex;
	flex-flow: column nowrap;

	&.-tall-status {
	position: relative;
	height: 220px;
	overflow-x: hidden;
	overflow-y: hidden;
	z-index: 1;

	.media-body {
	min-height: 0;
	mask:
	linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat,
	linear-gradient(to top, white, white);

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

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

	.tall-status-hider {
	position: absolute;
	height: 70px;
	margin-top: 150px;
	line-height: 110px;
	z-index: 2;
	}

	.tall-subject-hider {
	// position: absolute;
	padding-bottom: 0.5em;
	}

	& .status-unhider,
	& .cw-status-hider {
	word-break: break-all;

	svg {
	color: inherit;
	}
	}

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

	.cyantext {
	- color: var(--postCyantext, $fallback--cBlue);
	+ color: var(--textCyantext);
	}

	&.-compact {
	align-items: top;
	flex-direction: row;

	--emoji-size: 16px;

	& .body,
	& .attachments {
	max-height: 3.25em;
	}

	.body {
	overflow: hidden;
	white-space: normal;
	min-width: 5em;
	flex: 5 1 auto;
	mask-size: auto 3.5em, auto auto;
	mask-position: 0 0, 0 0;
	mask-repeat: repeat-x, repeat;
	mask-image: linear-gradient(to bottom, white 2em, transparent 3em);

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

	.attachments {
	margin-top: 0;
	flex: 1 1 0;
	min-width: 5em;
	height: 100%;
	margin-left: 0.5em;
	}

	.summary-wrapper {
	.summary::after {
	content: ": ";
	}

	line-height: inherit;
	margin: 0;
	border: none;
	display: inline-block;
	}

	.text-wrapper {
	display: inline-block;
	}
	}
	}
	diff --git a/src/components/text.style.js b/src/components/text.style.js
	index 050194cbe3..e52b6f68de 100644
	--- a/src/components/text.style.js
	+++ b/src/components/text.style.js
	@@ -1,7 +1,43 @@
	export default {
	name: 'Text',
	selector: '/text/',
	+ virtual: true,
	+ variants: {
	+ greentext: '.greentext'
	+ },
	states: {
	faint: '.faint'
	- }
	+ },
	+ defaultRules: [
	+ {
	+ component: 'Text',
	+ directives: {
	+ textColor: '--text'
	+ }
	+ },
	+ {
	+ component: 'Text',
	+ state: ['faint'],
	+ directives: {
	+ textColor: '--text',
	+ textOpacity: 0.5
	+ }
	+ },
	+ {
	+ component: 'Text',
	+ variant: 'greentext',
	+ directives: {
	+ textColor: '--cGreen'
	+ }
	+ },
	+ {
	+ component: 'Text',
	+ variant: 'greentext',
	+ state: ['faint'],
	+ directives: {
	+ textColor: '--cGreen',
	+ textOpacity: 0.5
	+ }
	+ }
	+ ]
	}
	diff --git a/src/components/underlay.style.js b/src/components/underlay.style.js
	index be1ecc56ba..c35fbada9d 100644
	--- a/src/components/underlay.style.js
	+++ b/src/components/underlay.style.js
	@@ -1,7 +1,8 @@
	export default {
	name: 'Underlay',
	- selector: '#app',
	+ selector: '#content',
	+ outOfTreeSelector: '.underlay',
	validInnerComponents: [
	'Panel'
	]
	}
	diff --git a/src/panel.scss b/src/panel.scss
	index 9471da113b..d6816937b1 100644
	--- a/src/panel.scss
	+++ b/src/panel.scss
	@@ -1,242 +1,231 @@
	/* stylelint-disable no-descending-specificity */
	.panel {
	position: relative;
	display: flex;
	flex-direction: column;
	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;
	z-index: 5;
	box-shadow: 1px 1px 4px rgb(0 0 0 / 60%);
	box-shadow: var(--panelShadow);
	pointer-events: none;
	}
	}

	.panel-body {
	padding: var(--panel-body-padding, 0);

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

	> p {
	line-height: 1.3;
	padding: 1em;
	margin: 0;
	}
	}

	.panel-heading,
	.panel-footer {
	--panel-heading-height-padding: 0.6em;
	--__panel-heading-gap: 0.5em;
	--__panel-heading-height: 3.2em;
	--__panel-heading-height-inner: calc(var(--__panel-heading-height) - 2 * var(--panel-heading-height-padding, 0));

	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-auto-flow: column;
	grid-template-columns: minmax(50%, 1fr);
	grid-auto-columns: auto;
	grid-column-gap: var(--__panel-heading-gap);
	flex: none;
	background-size: cover;
	padding: var(--panel-heading-height-padding);
	height: var(--__panel-heading-height);
	line-height: var(--__panel-heading-height-inner);
	z-index: 4;

	&.-flexible-height {
	--__panel-heading-height: auto;

	&::after,
	&::before {
	display: none;
	}
	}

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

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

	&::after,
	&::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 0;
	pointer-events: none;
	}

	.title {
	font-size: 1.3em;
	}

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

	&:not(.-flexible-height) {
	> .button-default,
	> .alert {
	height: var(--__panel-heading-height-inner);
	min-height: 0;
	box-sizing: border-box;
	margin: 0;
	min-width: 1px;
	padding-top: 0;
	padding-bottom: 0;
	align-self: stretch;
	}
	}
	}

	// TODO Should refactor panels into separate component and utilize slots

	.panel-heading {
	border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
	border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
	border-width: 0 0 1px;
	align-items: start;
	// panel theme
	color: var(--panelText);
	background-color: $fallback--bg;
	background-color: var(--bg, $fallback--bg);

	&::after {
	background-color: $fallback--fg;
	background-color: var(--panel, $fallback--fg);
	z-index: -2;
	border-radius: $fallback--panelRadius $fallback--panelRadius 0 0;
	border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0;
	box-shadow: var(--panelHeaderShadow);
	}

	- a,
	- .-link {
	- color: $fallback--link;
	- color: var(--panelLink, $fallback--link);
	- }
	-
	.button-unstyled:hover,
	a:hover {
	i[class*="icon-"],
	.svg-inline--fa,
	.iconLetter {
	color: var(--panelText);
	}
	}

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

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

	.rightside-button {
	align-self: stretch;
	text-align: center;
	width: var(--__panel-heading-height);
	height: var(--__panel-heading-height);
	margin: calc(-1 * var(--panel-heading-height-padding)) 0;
	margin-right: calc(-1 * var(--__panel-heading-gap));

	> button {
	box-sizing: border-box;
	padding: calc(1 * var(--panel-heading-height-padding)) 0;
	height: 100%;
	width: 100%;
	text-align: center;

	svg {
	font-size: 1.2em;
	}
	}
	}

	.rightside-icon {
	align-self: stretch;
	text-align: center;
	width: var(--__panel-heading-height);
	margin-right: calc(-1 * var(--__panel-heading-gap));

	svg {
	font-size: 1.2em;
	}
	}
	}

	.panel-footer {
	border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius;
	border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius);
	align-items: center;
	border-width: 1px 0 0;
	border-style: solid;
	border-color: var(--border, $fallback--border);
	}
	/* stylelint-enable no-descending-specificity */
	diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js
	index 23e4ca6111..d92bbbe05c 100644
	--- a/src/services/color_convert/color_convert.js
	+++ b/src/services/color_convert/color_convert.js
	@@ -1,225 +1,224 @@
	import { invertLightness, contrastRatio } from 'chromatism'

	// useful for visualizing color when debugging
	export const consoleColor = (color) => console.log('%c##########', 'background: ' + color + '; color: ' + color)

	/**
	* Convert r, g, b values into hex notation. All components are [0-255]
	*
	* @param {Number\|String\|Object} r - Either red component, {r,g,b} object, or hex string
	* @param {Number} [g] - Green component
	* @param {Number} [b] - Blue component
	*/
	export const rgb2hex = (r, g, b) => {
	if (r === null \|\| typeof r === 'undefined') {
	return undefined
	}
	// TODO: clean up this mess
	if (r[0] === '#' \|\| r === 'transparent') {
	return r
	}
	if (typeof r === 'object') {
	({ r, g, b } = r)
	}
	[r, g, b] = [r, g, b].map(val => {
	val = Math.ceil(val)
	val = val < 0 ? 0 : val
	val = val > 255 ? 255 : val
	return val
	})
	return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
	}

	/**
	* Converts 8-bit RGB component into linear component
	* https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
	* https://www.w3.org/TR/2008/REC-WCAG20-20081211/relative-luminance.xml
	* https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation
	*
	* @param {Number} bit - color component [0..255]
	* @returns {Number} linear component [0..1]
	*/
	const c2linear = (bit) => {
	// W3C gives 0.03928 while wikipedia states 0.04045
	// what those magical numbers mean - I don't know.
	// something about gamma-correction, i suppose.
	// Sticking with W3C example.
	const c = bit / 255
	if (c < 0.03928) {
	return c / 12.92
	} else {
	return Math.pow((c + 0.055) / 1.055, 2.4)
	}
	}

	/**
	* Converts sRGB into linear RGB
	* @param {Object} srgb - sRGB color
	* @returns {Object} linear rgb color
	*/
	const srgbToLinear = (srgb) => {
	return 'rgb'.split('').reduce((acc, c) => { acc[c] = c2linear(srgb[c]); return acc }, {})
	}

	/**
	* Calculates relative luminance for given color
	* https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
	* https://www.w3.org/TR/2008/REC-WCAG20-20081211/relative-luminance.xml
	*
	* @param {Object} srgb - sRGB color
	* @returns {Number} relative luminance
	*/
	export const relativeLuminance = (srgb) => {
	const { r, g, b } = srgbToLinear(srgb)
	return 0.2126 * r + 0.7152 * g + 0.0722 * b
	}

	/**
	* Generates color ratio between two colors. Order is unimporant
	* https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
	*
	* @param {Object} a - sRGB color
	* @param {Object} b - sRGB color
	* @returns {Number} color ratio
	*/
	export const getContrastRatio = (a, b) => {
	const la = relativeLuminance(a)
	const lb = relativeLuminance(b)
	const [l1, l2] = la > lb ? [la, lb] : [lb, la]

	return (l1 + 0.05) / (l2 + 0.05)
	}

	/**
	* Same as `getContrastRatio` but for multiple layers in-between
	*
	* @param {Object} text - text color (topmost layer)
	* @param {[Object, Number]} layers[] - layers between text and bedrock
	* @param {Object} bedrock - layer at the very bottom
	*/
	export const getContrastRatioLayers = (text, layers, bedrock) => {
	return getContrastRatio(alphaBlendLayers(bedrock, layers), text)
	}

	/**
	* This performs alpha blending between solid background and semi-transparent foreground
	*
	* @param {Object} fg - top layer color
	* @param {Number} fga - top layer's alpha
	* @param {Object} bg - bottom layer color
	* @returns {Object} sRGB of resulting color
	*/
	export const alphaBlend = (fg, fga, bg) => {
	if (fga === 1 \|\| typeof fga === 'undefined') return fg
	return 'rgb'.split('').reduce((acc, c) => {
	// Simplified https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending
	// for opaque bg and transparent fg
	acc[c] = (fg[c] * fga + bg[c] * (1 - fga))
	return acc
	}, {})
	}

	/**
	* Same as `alphaBlend` but for multiple layers in-between
	*
	* @param {Object} bedrock - layer at the very bottom
	* @param {[Object, Number]} layers[] - layers between text and bedrock
	*/
	export const alphaBlendLayers = (bedrock, layers) => layers.reduce((acc, [color, opacity]) => {
	return alphaBlend(color, opacity, acc)
	}, bedrock)

	export const invert = (rgb) => {
	return 'rgb'.split('').reduce((acc, c) => {
	acc[c] = 255 - rgb[c]
	return acc
	}, {})
	}

	/**
	* Converts #rrggbb hex notation into an {r, g, b} object
	*
	* @param {String} hex - #rrggbb string
	* @returns {Object} rgb representation of the color, values are 0-255
	*/
	export const hex2rgb = (hex) => {
	const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
	return result
	? {
	r: parseInt(result[1], 16),
	g: parseInt(result[2], 16),
	b: parseInt(result[3], 16)
	}
	: null
	}

	/**
	* Old somewhat weird function for mixing two colors together
	*
	* @param {Object} a - one color (rgb)
	* @param {Object} b - other color (rgb)
	* @returns {Object} result
	*/
	export const mixrgb = (a, b) => {
	return 'rgb'.split('').reduce((acc, k) => {
	acc[k] = (a[k] + b[k]) / 2
	return acc
	}, {})
	}
	/**
	* Converts rgb object into a CSS rgba() color
	*
	* @param {Object} color - rgb
	* @returns {String} CSS rgba() color
	*/
	export const rgba2css = function (rgba) {
	- return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, ${rgba.a})`
	+ return `rgba(${Math.floor(rgba.r)}, ${Math.floor(rgba.g)}, ${Math.floor(rgba.b)}, ${rgba.a ?? 1})`
	}

	/**
	* Get text color for given background color and intended text color
	* This checks if text and background don't have enough color and inverts
	* text color's lightness if needed. If text color is still not enough it
	* will fall back to black or white
	*
	* @param {Object} bg - background color
	* @param {Object} text - intended text color
	* @param {Boolean} preserve - try to preserve intended text color's hue/saturation (i.e. no BW)
	*/
	export const getTextColor = function (bg, text, preserve) {
	const contrast = getContrastRatio(bg, text)
	- console.log(contrast)

	if (contrast < 4.5) {
	const base = typeof text.a !== 'undefined' ? { a: text.a } : {}
	const result = Object.assign(base, invertLightness(text).rgb)
	if (!preserve && getContrastRatio(bg, result) < 4.5) {
	// B&W
	return contrastRatio(bg, text).rgb
	}
	// Inverted color
	return result
	}
	return text
	}

	/**
	* Converts color to CSS Color value
	*
	* @param {Object\|String} input - color
	* @param {Number} [a] - alpha value
	* @returns {String} a CSS Color value
	*/
	export const getCssColor = (input, a) => {
	let rgb = {}
	if (typeof input === 'object') {
	rgb = input
	} else if (typeof input === 'string') {
	if (input.startsWith('#')) {
	rgb = hex2rgb(input)
	} else {
	return input
	}
	}
	return rgba2css({ ...rgb, a })
	}
	diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js
	index 43fe3c7305..ba98c4d960 100644
	--- a/src/services/style_setter/style_setter.js
	+++ b/src/services/style_setter/style_setter.js
	@@ -1,452 +1,463 @@
	import { convert } from 'chromatism'
	import { rgb2hex, hex2rgb, rgba2css, getCssColor, relativeLuminance } from '../color_convert/color_convert.js'
	import { getColors, computeDynamicColor, getOpacitySlot } from '../theme_data/theme_data.service.js'
	+import { init } from '../theme_data/theme_data_3.service.js'
	+import {
	+ sampleRules
	+} from 'src/services/theme_data/pleromafe.t3.js'
	import { defaultState } from '../../modules/config.js'

	export const applyTheme = (input) => {
	- const { rules } = generatePreset(input)
	+ const { rules, t3b } = generatePreset(input)
	+ const themes3 = init(sampleRules, t3b)
	const head = document.head
	const body = document.body
	body.classList.add('hidden')

	const styleEl = document.createElement('style')
	head.appendChild(styleEl)
	const styleSheet = styleEl.sheet

	styleSheet.toString()
	styleSheet.insertRule(`:root { ${rules.radii} }`, 'index-max')
	styleSheet.insertRule(`:root { ${rules.colors} }`, 'index-max')
	styleSheet.insertRule(`:root { ${rules.shadows} }`, 'index-max')
	styleSheet.insertRule(`:root { ${rules.fonts} }`, 'index-max')
	+ themes3.css.forEach(rule => {
	+ console.log(rule)
	+ styleSheet.insertRule(rule, 'index-max')
	+ })
	body.classList.remove('hidden')
	}

	const configColumns = ({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale }) =>
	({ sidebarColumnWidth, contentColumnWidth, notifsColumnWidth, emojiReactionsScale })

	const defaultConfigColumns = configColumns(defaultState)

	export const applyConfig = (config) => {
	const columns = configColumns(config)

	if (columns === defaultConfigColumns) {
	return
	}

	const head = document.head
	const body = document.body
	body.classList.add('hidden')

	const rules = Object
	.entries(columns)
	.filter(([k, v]) => v)
	.map(([k, v]) => `--${k}: ${v}`).join(';')

	const styleEl = document.createElement('style')
	head.appendChild(styleEl)
	const styleSheet = styleEl.sheet

	styleSheet.toString()
	styleSheet.insertRule(`:root { ${rules} }`, 'index-max')
	body.classList.remove('hidden')
	}

	export const getCssShadow = (input, usesDropShadow) => {
	if (input.length === 0) {
	return 'none'
	}

	return input
	.filter(_ => usesDropShadow ? _.inset : _)
	.map((shad) => [
	shad.x,
	shad.y,
	shad.blur,
	shad.spread
	].map(_ => _ + 'px').concat([
	getCssColor(shad.color, shad.alpha),
	shad.inset ? 'inset' : ''
	]).join(' ')).join(', ')
	}

	const getCssShadowFilter = (input) => {
	if (input.length === 0) {
	return 'none'
	}

	return input
	// drop-shadow doesn't support inset or spread
	.filter((shad) => !shad.inset && Number(shad.spread) === 0)
	.map((shad) => [
	shad.x,
	shad.y,
	// drop-shadow's blur is twice as strong compared to box-shadow
	shad.blur / 2
	].map(_ => _ + 'px').concat([
	getCssColor(shad.color, shad.alpha)
	]).join(' '))
	.map(_ => `drop-shadow(${_})`)
	.join(' ')
	}

	export const generateColors = (themeData) => {
	const sourceColors = !themeData.themeEngineVersion
	? colors2to3(themeData.colors \|\| themeData)
	: themeData.colors \|\| themeData

	const { colors, opacity } = getColors(sourceColors, themeData.opacity \|\| {})

	const htmlColors = Object.entries(colors)
	.reduce((acc, [k, v]) => {
	if (!v) return acc
	acc.solid[k] = rgb2hex(v)
	acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgba2css(v)
	return acc
	}, { complete: {}, solid: {} })
	return {
	rules: {
	colors: Object.entries(htmlColors.complete)
	.filter(([k, v]) => v)
	.map(([k, v]) => `--${k}: ${v}`)
	.join(';')
	},
	theme: {
	colors: htmlColors.solid,
	opacity
	}
	}
	}

	export const generateRadii = (input) => {
	let inputRadii = input.radii \|\| {}
	// v1 -> v2
	if (typeof input.btnRadius !== 'undefined') {
	inputRadii = Object
	.entries(input)
	.filter(([k, v]) => k.endsWith('Radius'))
	.reduce((acc, e) => { acc[e[0].split('Radius')[0]] = e[1]; return acc }, {})
	}
	const radii = Object.entries(inputRadii).filter(([k, v]) => v).reduce((acc, [k, v]) => {
	acc[k] = v
	return acc
	}, {
	btn: 4,
	input: 4,
	checkbox: 2,
	panel: 10,
	avatar: 5,
	avatarAlt: 50,
	tooltip: 2,
	attachment: 5,
	chatMessage: inputRadii.panel
	})

	return {
	rules: {
	radii: Object.entries(radii).filter(([k, v]) => v).map(([k, v]) => `--${k}Radius: ${v}px`).join(';')
	},
	theme: {
	radii
	}
	}
	}

	export const generateFonts = (input) => {
	const fonts = Object.entries(input.fonts \|\| {}).filter(([k, v]) => v).reduce((acc, [k, v]) => {
	acc[k] = Object.entries(v).filter(([k, v]) => v).reduce((acc, [k, v]) => {
	acc[k] = v
	return acc
	}, acc[k])
	return acc
	}, {
	interface: {
	family: 'sans-serif'
	},
	input: {
	family: 'inherit'
	},
	post: {
	family: 'inherit'
	},
	postCode: {
	family: 'monospace'
	}
	})

	return {
	rules: {
	fonts: Object
	.entries(fonts)
	.filter(([k, v]) => v)
	.map(([k, v]) => `--${k}Font: ${v.family}`).join(';')
	},
	theme: {
	fonts
	}
	}
	}

	const border = (top, shadow) => ({
	x: 0,
	y: top ? 1 : -1,
	blur: 0,
	spread: 0,
	color: shadow ? '#000000' : '#FFFFFF',
	alpha: 0.2,
	inset: true
	})
	const buttonInsetFakeBorders = [border(true, false), border(false, true)]
	const inputInsetFakeBorders = [border(true, true), border(false, false)]
	const hoverGlow = {
	x: 0,
	y: 0,
	blur: 4,
	spread: 0,
	color: '--faint',
	alpha: 1
	}

	export const DEFAULT_SHADOWS = {
	panel: [{
	x: 1,
	y: 1,
	blur: 4,
	spread: 0,
	color: '#000000',
	alpha: 0.6
	}],
	topBar: [{
	x: 0,
	y: 0,
	blur: 4,
	spread: 0,
	color: '#000000',
	alpha: 0.6
	}],
	popup: [{
	x: 2,
	y: 2,
	blur: 3,
	spread: 0,
	color: '#000000',
	alpha: 0.5
	}],
	avatar: [{
	x: 0,
	y: 1,
	blur: 8,
	spread: 0,
	color: '#000000',
	alpha: 0.7
	}],
	avatarStatus: [],
	panelHeader: [],
	button: [{
	x: 0,
	y: 0,
	blur: 2,
	spread: 0,
	color: '#000000',
	alpha: 1
	}, ...buttonInsetFakeBorders],
	buttonHover: [hoverGlow, ...buttonInsetFakeBorders],
	buttonPressed: [hoverGlow, ...inputInsetFakeBorders],
	input: [...inputInsetFakeBorders, {
	x: 0,
	y: 0,
	blur: 2,
	inset: true,
	spread: 0,
	color: '#000000',
	alpha: 1
	}]
	}
	export const generateShadows = (input, colors) => {
	// TODO this is a small hack for `mod` to work with shadows
	// this is used to get the "context" of shadow, i.e. for `mod` properly depend on background color of element
	const hackContextDict = {
	button: 'btn',
	panel: 'bg',
	top: 'topBar',
	popup: 'popover',
	avatar: 'bg',
	panelHeader: 'panel',
	input: 'input'
	}

	const cleanInputShadows = Object.fromEntries(
	Object.entries(input.shadows \|\| {})
	.map(([name, shadowSlot]) => [
	name,
	// defaulting color to black to avoid potential problems
	shadowSlot.map(shadowDef => ({ color: '#000000', ...shadowDef }))
	])
	)
	const inputShadows = cleanInputShadows && !input.themeEngineVersion
	? shadows2to3(cleanInputShadows, input.opacity)
	: cleanInputShadows \|\| {}
	const shadows = Object.entries({
	...DEFAULT_SHADOWS,
	...inputShadows
	}).reduce((shadowsAcc, [slotName, shadowDefs]) => {
	const slotFirstWord = slotName.replace(/[A-Z].*$/, '')
	const colorSlotName = hackContextDict[slotFirstWord]
	const isLightOnDark = relativeLuminance(convert(colors[colorSlotName]).rgb) < 0.5
	const mod = isLightOnDark ? 1 : -1
	const newShadow = shadowDefs.reduce((shadowAcc, def) => [
	...shadowAcc,
	{
	...def,
	color: rgb2hex(computeDynamicColor(
	def.color,
	(variableSlot) => convert(colors[variableSlot]).rgb,
	mod
	))
	}
	], [])
	return { ...shadowsAcc, [slotName]: newShadow }
	}, {})

	return {
	rules: {
	shadows: Object
	.entries(shadows)
	// TODO for v2.2: if shadow doesn't have non-inset shadows with spread > 0 - optionally
	// convert all non-inset shadows into filter: drop-shadow() to boost performance
	.map(([k, v]) => [
	`--${k}Shadow: ${getCssShadow(v)}`,
	`--${k}ShadowFilter: ${getCssShadowFilter(v)}`,
	`--${k}ShadowInset: ${getCssShadow(v, true)}`
	].join(';'))
	.join(';')
	},
	theme: {
	shadows
	}
	}
	}

	-export const composePreset = (colors, radii, shadows, fonts) => {
	+export const composePreset = (colors, radii, shadows, fonts, t3b) => {
	return {
	rules: {
	...shadows.rules,
	...colors.rules,
	...radii.rules,
	...fonts.rules
	},
	theme: {
	...shadows.theme,
	...colors.theme,
	...radii.theme,
	...fonts.theme
	- }
	+ },
	+ t3b
	}
	}

	export const generatePreset = (input) => {
	const colors = generateColors(input)
	return composePreset(
	colors,
	generateRadii(input),
	generateShadows(input, colors.theme.colors, colors.mod),
	- generateFonts(input)
	+ generateFonts(input),
	+ colors.theme.colors
	)
	}

	export const getThemes = () => {
	const cache = 'no-store'

	return window.fetch('/static/styles.json', { cache })
	.then((data) => data.json())
	.then((themes) => {
	return Object.entries(themes).map(([k, v]) => {
	let promise = null
	if (typeof v === 'object') {
	promise = Promise.resolve(v)
	} else if (typeof v === 'string') {
	promise = window.fetch(v, { cache })
	.then((data) => data.json())
	.catch((e) => {
	console.error(e)
	return null
	})
	}
	return [k, promise]
	})
	})
	.then((promises) => {
	return promises
	.reduce((acc, [k, v]) => {
	acc[k] = v
	return acc
	}, {})
	})
	}
	export const colors2to3 = (colors) => {
	return Object.entries(colors).reduce((acc, [slotName, color]) => {
	const btnPositions = ['', 'Panel', 'TopBar']
	switch (slotName) {
	case 'lightBg':
	return { ...acc, highlight: color }
	case 'btnText':
	return {
	...acc,
	...btnPositions
	.reduce(
	(statePositionAcc, position) =>
	({ ...statePositionAcc, ['btn' + position + 'Text']: color })
	, {}
	)
	}
	default:
	return { ...acc, [slotName]: color }
	}
	}, {})
	}

	/**
	* This handles compatibility issues when importing v2 theme's shadows to current format
	*
	* Back in v2 shadows allowed you to use dynamic colors however those used pure CSS3 variables
	*/
	export const shadows2to3 = (shadows, opacity) => {
	return Object.entries(shadows).reduce((shadowsAcc, [slotName, shadowDefs]) => {
	const isDynamic = ({ color = '#000000' }) => color.startsWith('--')
	const getOpacity = ({ color }) => opacity[getOpacitySlot(color.substring(2).split(',')[0])]
	const newShadow = shadowDefs.reduce((shadowAcc, def) => [
	...shadowAcc,
	{
	...def,
	alpha: isDynamic(def) ? getOpacity(def) \|\| 1 : def.alpha
	}
	], [])
	return { ...shadowsAcc, [slotName]: newShadow }
	}, {})
	}

	export const getPreset = (val) => {
	return getThemes()
	.then((themes) => themes[val] ? themes[val] : themes['pleroma-dark'])
	.then((theme) => {
	const isV1 = Array.isArray(theme)
	const data = isV1 ? {} : theme.theme

	if (isV1) {
	const bg = hex2rgb(theme[1])
	const fg = hex2rgb(theme[2])
	const text = hex2rgb(theme[3])
	const link = hex2rgb(theme[4])

	const cRed = hex2rgb(theme[5] \|\| '#FF0000')
	const cGreen = hex2rgb(theme[6] \|\| '#00FF00')
	const cBlue = hex2rgb(theme[7] \|\| '#0000FF')
	const cOrange = hex2rgb(theme[8] \|\| '#E3FF00')

	data.colors = { bg, fg, text, link, cRed, cBlue, cGreen, cOrange }
	}

	return { theme: data, source: theme.source }
	})
	}

	export const setPreset = (val) => getPreset(val).then(data => applyTheme(data.theme))
	diff --git a/src/services/theme_data/pleromafe.t3.js b/src/services/theme_data/pleromafe.t3.js
	index 8d8e19cd3e..9fadf0eea0 100644
	--- a/src/services/theme_data/pleromafe.t3.js
	+++ b/src/services/theme_data/pleromafe.t3.js
	@@ -1,40 +1,40 @@
	export const sampleRules = [
	{
	component: 'Underlay',
	// variant: 'normal',
	// state: 'normal'
	directives: {
	background: '#000000',
	opacity: 0.2
	}
	},
	{
	component: 'Panel',
	directives: {
	- background: '#FFFFFF',
	- opacity: 0.9
	+ background: '--fg'
	+ // opacity: 0.9
	}
	},
	{
	component: 'PanelHeader',
	directives: {
	- background: '#000000',
	- opacity: 0.9
	+ background: '--fg'
	+ // opacity: 0.9
	}
	},
	{
	component: 'Button',
	directives: {
	- background: '#000000',
	- opacity: 0.8
	+ background: '--fg'
	+ // opacity: 0.8
	}
	},
	{
	component: 'Button',
	state: ['hover'],
	directives: {
	- background: '#FF00FF',
	- opacity: 0.9
	+ background: '#FFFFFF'
	+ // opacity: 0.9
	}
	}
	]
	diff --git a/src/services/theme_data/theme_data_3.service.js b/src/services/theme_data/theme_data_3.service.js
	index 2ef5e17fd2..c9468d07b1 100644
	--- a/src/services/theme_data/theme_data_3.service.js
	+++ b/src/services/theme_data/theme_data_3.service.js
	@@ -1,202 +1,358 @@
	import { convert } from 'chromatism'
	-import { alphaBlend, getTextColor, rgba2css } from '../color_convert/color_convert.js'
	+import { alphaBlend, getTextColor, rgba2css, mixrgb } from '../color_convert/color_convert.js'

	import Underlay from 'src/components/underlay.style.js'
	import Panel from 'src/components/panel.style.js'
	import PanelHeader from 'src/components/panel_header.style.js'
	import Button from 'src/components/button.style.js'
	import Text from 'src/components/text.style.js'
	+import Link from 'src/components/link.style.js'
	import Icon from 'src/components/icon.style.js'

	const root = Underlay
	const components = {
	Underlay,
	Panel,
	PanelHeader,
	Button,
	Text,
	+ Link,
	Icon
	}

	// This gives you an array of arrays of all possible unique (i.e. order-insensitive) combinations
	export const getAllPossibleCombinations = (array) => {
	const combos = [array.map(x => [x])]
	for (let comboSize = 2; comboSize <= array.length; comboSize++) {
	const previous = combos[combos.length - 1]
	const selfSet = new Set()
	const newCombos = previous.map(self => {
	self.forEach(x => selfSet.add(x))
	const nonSelf = array.filter(x => !selfSet.has(x))
	return nonSelf.map(x => [...self, x])
	})
	const flatCombos = newCombos.reduce((acc, x) => [...acc, ...x], [])
	combos.push(flatCombos)
	}
	return combos.reduce((acc, x) => [...acc, ...x], [])
	}

	-export const ruleToSelector = (rule) => {
	+export const ruleToSelector = (rule, isParent) => {
	const component = components[rule.component]
	- const { states, variants, selector } = component
	+ const { states, variants, selector, outOfTreeSelector } = component

	const applicableStates = ((rule.state \|\| []).filter(x => x !== 'normal')).map(state => states[state])

	const applicableVariantName = (rule.variant \|\| 'normal')
	let applicableVariant = ''
	if (applicableVariantName !== 'normal') {
	applicableVariant = variants[applicableVariantName]
	}

	- const selectors = [selector, applicableVariant, ...applicableStates]
	+ let realSelector
	+ if (isParent) {
	+ realSelector = selector
	+ } else {
	+ if (outOfTreeSelector) realSelector = outOfTreeSelector
	+ else realSelector = selector
	+ }
	+
	+ const selectors = [realSelector, applicableVariant, ...applicableStates]
	.toSorted((a, b) => {
	if (a.startsWith(':')) return 1
	- else return -1
	+ if (!a.startsWith('.')) return -1
	+ else return 0
	})
	.join('')

	if (rule.parent) {
	- return ruleToSelector(rule.parent) + ' ' + selectors
	+ return ruleToSelector(rule.parent, true) + ' ' + selectors
	}
	return selectors
	}

	-export const init = (ruleset) => {
	+export const init = (extraRuleset, palette) => {
	const rootName = root.name
	const rules = []
	const rulesByComponent = {}

	+ const ruleset = [
	+ ...Object.values(components).map(c => c.defaultRules \|\| []).reduce((acc, arr) => [...acc, ...arr], []),
	+ ...extraRuleset
	+ ]
	+
	const addRule = (rule) => {
	rules.push(rule)
	rulesByComponent[rule.component] = rulesByComponent[rule.component] \|\| []
	rulesByComponent[rule.component].push(rule)
	}

	- const findRules = (combination) => rule => {
	- if (combination.component !== rule.component) return false
	- if (Object.prototype.hasOwnProperty.call(rule, 'variant')) {
	- if (combination.variant !== rule.variant) return false
	- } else {
	- if (combination.variant !== 'normal') return false
	+ const findRules = (combination, parent) => rule => {
	+ // inexact search
	+ const doesCombinationMatch = () => {
	+ if (combination.component !== rule.component) return false
	+ if (Object.prototype.hasOwnProperty.call(rule, 'variant')) {
	+ if (combination.variant !== rule.variant) return false
	+ } else {
	+ if (combination.variant !== 'normal') return false
	+ }
	+
	+ if (Object.prototype.hasOwnProperty.call(rule, 'state')) {
	+ const ruleStatesSet = new Set(['normal', ...(rule.state \|\| [])])
	+ const combinationSet = new Set(['normal', ...combination.state])
	+ const setsAreEqual = combination.state.every(state => ruleStatesSet.has(state)) &&
	+ [...ruleStatesSet].every(state => combinationSet.has(state))
	+ return setsAreEqual
	+ } else {
	+ if (combination.state.length !== 1 \|\| combination.state[0] !== 'normal') return false
	+ return true
	+ }
	}
	+ const combinationMatches = doesCombinationMatch()
	+ if (!parent \|\| !combinationMatches) return combinationMatches

	- if (Object.prototype.hasOwnProperty.call(rule, 'state')) {
	- const ruleStatesSet = new Set(['normal', ...(rule.state \|\| [])])
	- const combinationSet = new Set(['normal', ...combination.state])
	- const setsAreEqual = combination.state.every(state => ruleStatesSet.has(state)) &&
	- [...ruleStatesSet].every(state => combinationSet.has(state))
	- return setsAreEqual
	- } else {
	- if (combination.state.length !== 1 \|\| combination.state[0] !== 'normal') return false
	- return true
	+ // exact search
	+
	+ // unroll parents into array
	+ const unroll = (item) => {
	+ const out = []
	+ let currentParent = item.parent
	+ while (currentParent) {
	+ const { parent: newParent, ...rest } = currentParent
	+ out.push(rest)
	+ currentParent = newParent
	+ }
	+ return out
	}
	+ const { parent: _, ...rest } = parent
	+ const pathSearch = [rest, ...unroll(parent)]
	+ const pathRule = unroll(rule)
	+ if (pathSearch.length !== pathRule.length) return false
	+ const pathsMatch = pathSearch.every((searchRule, i) => {
	+ const existingRule = pathRule[i]
	+ if (existingRule.component !== searchRule.component) return false
	+ if (existingRule.variant !== searchRule.variant) return false
	+ const existingRuleStatesSet = new Set(['normal', ...(existingRule.state \|\| [])])
	+ const searchStatesSet = new Set(['normal', ...(searchRule.state \|\| [])])
	+ const setsAreEqual = existingRule.state.every(state => searchStatesSet.has(state)) &&
	+ [...searchStatesSet].every(state => existingRuleStatesSet.has(state))
	+ return setsAreEqual
	+ })
	+ return pathsMatch
	}

	const findLowerLevelRule = (parent, filter = () => true) => {
	let lowerLevelComponent = null
	let currentParent = parent
	while (currentParent) {
	- const rulesParent = ruleset.filter(findRules(currentParent, true))
	- rulesParent > 1 && console.log('OOPS')
	+ const rulesParent = ruleset.filter(findRules(currentParent))
	+ rulesParent > 1 && console.warn('OOPS')
	lowerLevelComponent = rulesParent[rulesParent.length - 1]
	currentParent = currentParent.parent
	if (lowerLevelComponent && filter(lowerLevelComponent)) currentParent = null
	}
	return filter(lowerLevelComponent) ? lowerLevelComponent : null
	}

	+ const findColor = (color) => {
	+ if (typeof color === 'string' && color.startsWith('--')) {
	+ const name = color.substring(2)
	+ return palette[name]
	+ }
	+ return color
	+ }
	+
	+ const getTextColorAlpha = (rule, lowerRule, value) => {
	+ const opacity = rule.directives.textOpacity
	+ const textColor = convert(findColor(value)).rgb
	+ if (opacity === null \|\| opacity === undefined \|\| opacity >= 1) {
	+ return convert(textColor).hex
	+ }
	+ const backgroundColor = convert(lowerRule.cache.background).rgb
	+ if (opacity === 0) {
	+ return convert(backgroundColor).hex
	+ }
	+ const opacityMode = rule.directives.textOpacityMode
	+ switch (opacityMode) {
	+ case 'fake':
	+ return convert(alphaBlend(textColor, opacity, backgroundColor)).hex
	+ case 'mixrgb':
	+ return convert(mixrgb(backgroundColor, textColor)).hex
	+ default:
	+ return rgba2css({ a: opacity, ...textColor })
	+ }
	+ }
	+
	const processInnerComponent = (component, parent) => {
	const {
	validInnerComponents = [],
	states: originalStates = {},
	variants: originalVariants = {},
	name
	} = component

	const states = { normal: '', ...originalStates }
	const variants = { normal: '', ...originalVariants }
	const innerComponents = validInnerComponents.map(name => components[name])

	const stateCombinations = getAllPossibleCombinations(Object.keys(states))
	const stateVariantCombination = Object.keys(variants).map(variant => {
	return stateCombinations.map(state => ({ variant, state }))
	}).reduce((acc, x) => [...acc, ...x], [])

	const VIRTUAL_COMPONENTS = new Set(['Text', 'Link', 'Icon'])

	stateVariantCombination.forEach(combination => {
	- const existingRules = ruleset.filter(findRules({ component: component.name, ...combination }))
	- const lastRule = existingRules[existingRules.length - 1]
	+ let needRuleAdd = false

	- if (existingRules.length !== 0) {
	- const { directives } = lastRule
	- const rgb = convert(directives.background).rgb
	+ if (VIRTUAL_COMPONENTS.has(component.name)) {
	+ const selector = component.name + ruleToSelector({ component: component.name, ...combination })
	+ const virtualName = [
	+ '--',
	+ component.name.toLowerCase(),
	+ combination.variant === 'normal'
	+ ? ''
	+ : combination.variant[0].toUpperCase() + combination.variant.slice(1).toLowerCase(),
	+ ...combination.state.filter(x => x !== 'normal').toSorted().map(state => state[0].toUpperCase() + state.slice(1).toLowerCase())
	+ ].join('')

	- // TODO: DEFAULT TEXT COLOR
	- const bg = findLowerLevelRule(parent)?.cache.background \|\| convert('#FFFFFF').rgb
	+ const lowerLevel = findLowerLevelRule(parent, (r) => {
	+ if (components[r.component].validInnerComponents.indexOf(component.name) < 0) return false
	+ if (r.cache.background === undefined) return false
	+ if (r.cache.textDefined) {
	+ return !r.cache.textDefined[selector]
	+ }
	+ return true
	+ })

	- if (!lastRule.cache?.background) {
	- const blend = directives.opacity < 1 ? alphaBlend(rgb, directives.opacity, bg) : rgb
	- lastRule.cache = lastRule.cache \|\| {}
	- lastRule.cache.background = blend
	+ if (!lowerLevel) return
	+
	+ let inheritedTextColorRule
	+ const inheritedTextColorRules = findLowerLevelRule(parent, (r) => {
	+ return r.cache?.textDefined?.[selector]
	+ })
	+
	+ if (!inheritedTextColorRule) {
	+ const generalTextColorRules = ruleset.filter(findRules({ component: component.name, ...combination }, null, true))
	+ inheritedTextColorRule = generalTextColorRules[generalTextColorRules.length - 1]
	+ } else {
	+ inheritedTextColorRule = inheritedTextColorRules[inheritedTextColorRules.length - 1]
	+ }

	- addRule(lastRule)
	+ let inheritedTextColor
	+ let inheritedTextOpacity = {}
	+ if (inheritedTextColorRule) {
	+ inheritedTextColor = findColor(inheritedTextColorRule.directives.textColor)
	+ // also inherit opacity settings
	+ const { textOpacity, textOpacityMode } = inheritedTextColorRule.directives
	+ inheritedTextOpacity = { textOpacity, textOpacityMode }
	+ } else {
	+ // Emergency fallback
	+ inheritedTextColor = '#000000'
	}
	+
	+ const textColor = getTextColor(
	+ convert(lowerLevel.cache.background).rgb,
	+ convert(inheritedTextColor).rgb,
	+ component.name === 'Link' // make it configurable?
	+ )
	+
	+ lowerLevel.cache.textDefined = lowerLevel.cache.textDefined \|\| {}
	+ lowerLevel.cache.textDefined[selector] = textColor
	+ lowerLevel.virtualDirectives = lowerLevel.virtualDirectives \|\| {}
	+ lowerLevel.virtualDirectives[virtualName] = getTextColorAlpha(inheritedTextColorRule, lowerLevel, textColor)
	+
	+ const directives = {
	+ textColor,
	+ ...inheritedTextOpacity
	+ }
	+
	+ // Debug: lets you see what it think background color should be
	+ directives.background = convert(lowerLevel.cache.background).hex
	+
	+ addRule({
	+ parent,
	+ virtual: true,
	+ component: component.name,
	+ ...combination,
	+ cache: { background: lowerLevel.cache.background },
	+ directives
	+ })
	} else {
	- if (VIRTUAL_COMPONENTS.has(component.name)) {
	- const selector = component.name + ruleToSelector({ component: component.name, ...combination })
	-
	- const lowerLevel = findLowerLevelRule(parent, (r) => {
	- if (components[r.component].validInnerComponents.indexOf(component.name) < 0) return false
	- if (r.cache?.background === undefined) return false
	- if (r.cache.textDefined) {
	- return !r.cache.textDefined[selector]
	- }
	- return true
	- })
	- if (!lowerLevel) return
	- lowerLevel.cache.textDefined = lowerLevel.cache.textDefined \|\| {}
	- lowerLevel.cache.textDefined[selector] = true
	- addRule({
	- parent,
	- component: component.name,
	- ...combination,
	- directives: {
	- // TODO: DEFAULT TEXT COLOR
	- textColor: getTextColor(convert(lowerLevel.cache.background).rgb, convert('#FFFFFF').rgb, component.name === 'Link'),
	- // Debug: lets you see what it think background color should be
	- background: convert(lowerLevel.cache.background).hex
	+ const existingGlobalRules = ruleset.filter(findRules({ component: component.name, ...combination }, null))
	+ const existingRules = ruleset.filter(findRules({ component: component.name, ...combination }, parent))
	+
	+ // Global (general) rules
	+ if (existingGlobalRules.length !== 0) {
	+ const lastRule = existingGlobalRules[existingGlobalRules.length - 1]
	+ const { directives } = lastRule
	+ lastRule.cache = lastRule.cache \|\| {}
	+
	+ if (directives.background) {
	+ const rgb = convert(findColor(directives.background)).rgb
	+
	+ // TODO: DEFAULT TEXT COLOR
	+ const bg = findLowerLevelRule(parent)?.cache.background \|\| convert('#FFFFFF').rgb
	+
	+ if (!lastRule.cache.background) {
	+ const blend = directives.opacity < 1 ? alphaBlend(rgb, directives.opacity, bg) : rgb
	+ lastRule.cache.background = blend
	+
	+ needRuleAdd = true
	}
	- })
	+ }
	+
	+ if (needRuleAdd) {
	+ addRule(lastRule)
	+ }
	}
	- }

	+ if (existingRules.length !== 0) {
	+ console.warn('MORE EXISTING RULES', existingRules)
	+ }
	+ }
	innerComponents.forEach(innerComponent => processInnerComponent(innerComponent, { parent, component: name, ...combination }))
	})
	}

	processInnerComponent(components[rootName])

	- // console.info(rules.map(x => [
	- // (parent?.component \|\| 'root') + ' -> ' + x.component,
	- // // 'Cached background:' + convert(bg).hex,
	- // // 'Color: ' + convert(x.directives.background).hex + ' A:' + x.directives.opacity,
	- // JSON.stringify(x.directives)
	- // // '=> Blend: ' + convert(x.cache.background).hex
	- // ].join(' ')))
	-
	return {
	raw: rules,
	css: rules.map(rule => {
	- const header = ruleToSelector(rule) + ' {'
	+ if (rule.virtual) return ''
	+
	+ let selector = ruleToSelector(rule).replace(/\/\.\*\//g, '')
	+ if (!selector) {
	+ selector = 'body'
	+ }
	+ const header = selector + ' {'
	const footer = '}'
	+
	+ const virtualDirectives = Object.entries(rule.virtualDirectives \|\| {}).map(([k, v]) => {
	+ return ' ' + k + ': ' + v
	+ }).join(';\n')
	+
	const directives = Object.entries(rule.directives).map(([k, v]) => {
	switch (k) {
	- case 'background': return 'background-color: ' + rgba2css({ ...convert(v).rgb, a: rule.directives.opacity ?? 1 })
	- case 'textColor': return 'color: ' + rgba2css({ ...convert(v).rgb, a: rule.directives.opacity ?? 1 })
	+ case 'background': {
	+ return 'background-color: ' + rgba2css({ ...convert(findColor(v)).rgb, a: rule.directives.opacity ?? 1 })
	+ }
	+ case 'textColor': {
	+ return 'color: ' + v
	+ }
	default: return ''
	}
	}).filter(x => x).map(x => ' ' + x).join(';\n')
	- return [header, directives, footer].join('\n')
	- })
	+
	+ return [
	+ header,
	+ directives + ';',
	+ ' color: var(--text);',
	+ '',
	+ virtualDirectives,
	+ footer
	+ ].join('\n')
	+ }).filter(x => x)
	}
	}
	diff --git a/test/unit/specs/services/theme_data/theme_data3.spec.js b/test/unit/specs/services/theme_data/theme_data3.spec.js
	index 915bb5ce14..0d5870cc42 100644
	--- a/test/unit/specs/services/theme_data/theme_data3.spec.js
	+++ b/test/unit/specs/services/theme_data/theme_data3.spec.js
	@@ -1,25 +1,25 @@
	// import { topoSort } from 'src/services/theme_data/theme_data.service.js'
	import {
	getAllPossibleCombinations,
	init
	} from 'src/services/theme_data/theme_data_3.service.js'
	import {
	sampleRules
	} from 'src/services/theme_data/pleromafe.t3.js'

	describe.only('Theme Data 3', () => {
	describe('getAllPossibleCombinations', () => {
	it('test simple case', () => {
	const out = getAllPossibleCombinations([1, 2, 3]).map(x => x.sort((a, b) => a - b))
	expect(out).to.eql([[1], [2], [3], [1, 2], [1, 3], [2, 3], [1, 2, 3]])
	})
	})

	describe('init', () => {
	it('test simple case', () => {
	- const out = init(sampleRules)
	+ const out = init(sampleRules, palette)
	// console.log(JSON.stringify(out, null, 2))
	console.log('\n' + out.css.join('\n') + '\n')
	})
	})
	})

File Metadata

Mime Type: text/x-diff
Expires: Fri, Oct 30, 3:10 PM (19 h, 27 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 1800236
Default Alt Text: (104 KB)

No OneTemporaryActions

View Options

File Metadata

Event Timeline

No OneTemporary
Actions