From 7ec0e4c6f18cb7e4d8d069ca828a9582f7457898 Mon Sep 17 00:00:00 2001
From: kakkokari-gtyih <daisho7308+f@gmail.com>
Date: Sun, 23 Jul 2023 15:53:37 +0900
Subject: [PATCH] (fix) mfm: rainbow fallback

---
 .../src/components/global/MkMisskeyFlavoredMarkdown.ts     | 7 ++++++-
 packages/frontend/src/style.scss                           | 7 +++++++
 2 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
index 1c417991e0..67fa6fc2b8 100644
--- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
+++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
@@ -170,8 +170,13 @@ export default function(props: {
 						}, genEl(token.children, scale));
 					}
 					case 'rainbow': {
+						if (!useAnim) {
+							return h('span', {
+								class: '_mfm_rainbow_fallback_',
+							}, genEl(token.children, scale));
+						}
 						const speed = validTime(token.props.args.speed) ?? '1s';
-						style = useAnim ? `animation: mfm-rainbow ${speed} linear infinite;` : '';
+						style = `animation: mfm-rainbow ${speed} linear infinite;`;
 						break;
 					}
 					case 'sparkle': {
diff --git a/packages/frontend/src/style.scss b/packages/frontend/src/style.scss
index bd74db7c85..40eddc2da0 100644
--- a/packages/frontend/src/style.scss
+++ b/packages/frontend/src/style.scss
@@ -518,6 +518,13 @@ hr {
 	}
 }
 
+._mfm_rainbow_fallback_ {
+	background-image: linear-gradient(to right, rgb(255, 0, 0) 0%, rgb(255, 165, 0) 17%, rgb(255, 255, 0) 33%, rgb(0, 255, 0) 50%, rgb(0, 255, 255) 67%, rgb(0, 0, 255) 83%, rgb(255, 0, 255) 100%);
+	-webkit-background-clip: text;
+	background-clip: text;
+	color: transparent;
+}
+
 @keyframes mfm-spin {
 	0% { transform: rotate(0deg); }
 	100% { transform: rotate(360deg); }