diff options
| author | かっこかり <67428053+kakkokari-gtyih@users.noreply.github.com> | 2023-08-21 20:24:18 +0900 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2023-08-21 20:24:18 +0900 |
| commit | 1f7a4b092d4b3ad3c1f68470d5847a7706b7fb9f (patch) | |
| tree | e6e1b86156c187bad13e4788300b6c37be46d39f /packages | |
| parent | プロフィールにその人が作ったPlayの一覧出せるように (#1... (diff) | |
| download | misskey-1f7a4b092d4b3ad3c1f68470d5847a7706b7fb9f.tar.gz misskey-1f7a4b092d4b3ad3c1f68470d5847a7706b7fb9f.tar.bz2 misskey-1f7a4b092d4b3ad3c1f68470d5847a7706b7fb9f.zip | |
fix(frontend): 動きのあるMFM無効時にレインボー文字が出ない問題を修正 (#11361)
* (fix) mfm: rainbow fallback
* Update changelog
* Update CHANGELOG.md (カレンダーリリース対応)
---------
Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts | 7 | ||||
| -rw-r--r-- | packages/frontend/src/style.scss | 7 |
2 files changed, 13 insertions, 1 deletions
diff --git a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts index 567508d220..f9e502dc44 100644 --- a/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts +++ b/packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts @@ -175,8 +175,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 dbfb8d0dbf..948d27536c 100644 --- a/packages/frontend/src/style.scss +++ b/packages/frontend/src/style.scss @@ -527,6 +527,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); } |