From b22e627089e589b720f42a6b99e671f1bab8c643 Mon Sep 17 00:00:00 2001
From: Johann150 <johann.galle@protonmail.com>
Date: Sun, 12 Feb 2023 13:46:58 +0100
Subject: [PATCH] add MFM style sheet

---
 packages/client/src/init.ts  |   1 +
 packages/client/src/mfm.scss | 224 +++++++++++++++++++++++++++++++++++
 2 files changed, 225 insertions(+)
 create mode 100644 packages/client/src/mfm.scss

diff --git a/packages/client/src/init.ts b/packages/client/src/init.ts
index eae153878..b2d573d43 100644
--- a/packages/client/src/init.ts
+++ b/packages/client/src/init.ts
@@ -3,6 +3,7 @@
  */
 
 import '@/style.scss';
+import '@/mfm.scss';
 
 //#region account indexedDB migration
 import { set } from '@/scripts/idb-proxy';
diff --git a/packages/client/src/mfm.scss b/packages/client/src/mfm.scss
new file mode 100644
index 000000000..2198b1438
--- /dev/null
+++ b/packages/client/src/mfm.scss
@@ -0,0 +1,224 @@
+.mfm-center {
+	display: block;
+	text-align: center;
+}
+
+.mfm-jelly {
+	animation: mfm-rubberBand var(--mfm-speed, 1s) linear infinte both;	
+}
+
+.mfm-twitch {
+	animation: mfm-twitch var(--mfm-speed, .5s) ease infinite;
+}
+
+.mfm-shake {
+	animation: mfm-shake var(--mfm-speed, .5s) ease infinite;
+}
+
+.mfm-spin {
+	animation: mfm-spin var(--mfm-speed, 1.5s) linear infinite;
+}
+.mfm-spin[data-mfm-y] {
+	animation-name: mfm-spinY;
+}
+.mfm-spin[data-mfm-x] {
+	animation-name: mfm-spinX;
+}
+.mfm-spin[data-mfm-alternate] {
+	animation-direction: alternate;
+}
+.mfm-spin[data-mfm-left] {
+	animation-direction: reverse;
+}
+
+.mfm-jump {
+	animation: mfm-jump var(--mfm-speed, .75s) linear infinite;
+}
+
+.mfm-bounce {
+	animation: mfm-bounce var(--mfm-speed, .75s) linear infinite;
+	transform-origin: center bottom;
+}
+
+.mfm-flip {
+	transform: scaleX(-1);
+}
+.mfm-flip[data-mfm-v] {
+	transform: scaleY(-1);
+}
+.mfm-flip[data-mfm-v][data-mfm-h] {
+	transform: scale(-1, -1);
+}
+
+.mfm-font[data-mfm-serif] {
+	font-family: serif;
+}
+.mfm-font[data-mfm-monospace] {
+	font-family: monospace;
+}
+.mfm-font[data-mfm-cursive] {
+	font-family: cursive;
+}
+.mfm-font[data-mfm-fantasy] {
+	font-family: fantasy;
+}
+.mfm-font[data-mfm-emoji] {
+	font-family: emoji;
+}
+.mfm-font[data-mfm-math] {
+	font-family: math;
+}
+
+.mfm-rainbow {
+	animation: mfm-rainbow var(--mfm-speed, 1s) linear infinite;
+}
+
+.mfm-rotate {
+	transform: rotate(calc(var(--mfm-deg, 90) * 1deg));
+	transform-origin: center center;
+}
+
+.mfm-blur {
+	filter: blur(6px);
+	transition: filter 0.3s;
+
+	&:hover {
+		filter: blur(0px);
+	}
+}
+
+.mfm-tada {
+	animation: mfm-tada var(--mfm-speed, 1s) linear infinite both;
+	--mfm-zoom-size: 150%;
+}
+.mfm-x2 {
+	--mfm-zoom-size: 200%;
+}
+.mfm-x3 {
+	--mfm-zoom-size: 400%;
+}
+.mfm-x4 {
+	--mfm-zoom-size: 600%;
+}
+.mfm-x2, .mfm-x3, .mfm-x4, .mfm-tada {
+	font-size: var(--mfm-zoom-size);
+
+	.mfm-x2, .mfm-x3, .mfm-x4, .mfm-tada {
+		/* only half effective */
+		font-size: calc(var(--mfm-zoom-size) / 2 + 50%);
+
+		.mfm-x2, .mfm-x3, .mfm-x4, .mfm-tada {
+			/* disabled */
+			font-size: 100%;
+		}
+	}
+}
+
+/* animation keyframes */
+
+@keyframes mfm-spin {
+	0% { transform: rotate(0deg); }
+	100% { transform: rotate(360deg); }
+}
+
+@keyframes mfm-spinX {
+	0% { transform: perspective(128px) rotateX(0deg); }
+	100% { transform: perspective(128px) rotateX(360deg); }
+}
+
+@keyframes mfm-spinY {
+	0% { transform: perspective(128px) rotateY(0deg); }
+	100% { transform: perspective(128px) rotateY(360deg); }
+}
+
+@keyframes mfm-jump {
+	0% { transform: translateY(0); }
+	25% { transform: translateY(-16px); }
+	50% { transform: translateY(0); }
+	75% { transform: translateY(-8px); }
+	100% { transform: translateY(0); }
+}
+
+@keyframes mfm-bounce {
+	0% { transform: translateY(0) scale(1, 1); }
+	25% { transform: translateY(-16px) scale(1, 1); }
+	50% { transform: translateY(0) scale(1, 1); }
+	75% { transform: translateY(0) scale(1.5, 0.75); }
+	100% { transform: translateY(0) scale(1, 1); }
+}
+
+// const val = () => `translate(${Math.floor(Math.random() * 20) - 10}px, ${Math.floor(Math.random() * 20) - 10}px)`;
+// let css = '';
+// for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
+@keyframes mfm-twitch {
+	0% { transform: translate(7px, -2px) }
+	5% { transform: translate(-3px, 1px) }
+	10% { transform: translate(-7px, -1px) }
+	15% { transform: translate(0px, -1px) }
+	20% { transform: translate(-8px, 6px) }
+	25% { transform: translate(-4px, -3px) }
+	30% { transform: translate(-4px, -6px) }
+	35% { transform: translate(-8px, -8px) }
+	40% { transform: translate(4px, 6px) }
+	45% { transform: translate(-3px, 1px) }
+	50% { transform: translate(2px, -10px) }
+	55% { transform: translate(-7px, 0px) }
+	60% { transform: translate(-2px, 4px) }
+	65% { transform: translate(3px, -8px) }
+	70% { transform: translate(6px, 7px) }
+	75% { transform: translate(-7px, -2px) }
+	80% { transform: translate(-7px, -8px) }
+	85% { transform: translate(9px, 3px) }
+	90% { transform: translate(-3px, -2px) }
+	95% { transform: translate(-10px, 2px) }
+	100% { transform: translate(-2px, -6px) }
+}
+
+// const val = () => `translate(${Math.floor(Math.random() * 6) - 3}px, ${Math.floor(Math.random() * 6) - 3}px) rotate(${Math.floor(Math.random() * 24) - 12}deg)`;
+// let css = '';
+// for (let i = 0; i <= 100; i += 5) { css += `${i}% { transform: ${val()} }\n`; }
+@keyframes mfm-shake {
+	0% { transform: translate(-3px, -1px) rotate(-8deg) }
+	5% { transform: translate(0px, -1px) rotate(-10deg) }
+	10% { transform: translate(1px, -3px) rotate(0deg) }
+	15% { transform: translate(1px, 1px) rotate(11deg) }
+	20% { transform: translate(-2px, 1px) rotate(1deg) }
+	25% { transform: translate(-1px, -2px) rotate(-2deg) }
+	30% { transform: translate(-1px, 2px) rotate(-3deg) }
+	35% { transform: translate(2px, 1px) rotate(6deg) }
+	40% { transform: translate(-2px, -3px) rotate(-9deg) }
+	45% { transform: translate(0px, -1px) rotate(-12deg) }
+	50% { transform: translate(1px, 2px) rotate(10deg) }
+	55% { transform: translate(0px, -3px) rotate(8deg) }
+	60% { transform: translate(1px, -1px) rotate(8deg) }
+	65% { transform: translate(0px, -1px) rotate(-7deg) }
+	70% { transform: translate(-1px, -3px) rotate(6deg) }
+	75% { transform: translate(0px, -2px) rotate(4deg) }
+	80% { transform: translate(-2px, -1px) rotate(3deg) }
+	85% { transform: translate(1px, -3px) rotate(-10deg) }
+	90% { transform: translate(1px, 0px) rotate(3deg) }
+	95% { transform: translate(-2px, 0px) rotate(-3deg) }
+	100% { transform: translate(2px, 1px) rotate(2deg) }
+}
+
+@keyframes mfm-rubberBand {
+	from { transform: scale3d(1, 1, 1); }
+	30% { transform: scale3d(1.25, 0.75, 1); }
+	40% { transform: scale3d(0.75, 1.25, 1); }
+	50% { transform: scale3d(1.15, 0.85, 1); }
+	65% { transform: scale3d(0.95, 1.05, 1); }
+	75% { transform: scale3d(1.05, 0.95, 1); }
+	to { transform: scale3d(1, 1, 1); }
+}
+
+@keyframes mfm-rainbow {
+	0% { filter: hue-rotate(0deg) contrast(150%) saturate(150%); }
+	100% { filter: hue-rotate(360deg) contrast(150%) saturate(150%); }
+}
+
+@keyframes mfm-tada {
+	0%, 100% { transform: scale3d(1, 1, 1); }
+	10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg); }
+	30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg); }
+	40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg); }
+}