oscar-surf/misskey
oscar-surf/misskey
0
0
Fork 0
Code Issues Activity

fix(frontend): 動きのあるMFM無効時にレインボー文字が出ない問題を修正 (#11361)

Browse source 
* (fix) mfm: rainbow fallback

* Update changelog

* Update CHANGELOG.md (カレンダーリリース対応)

---------

Co-authored-by: syuilo <Syuilotan@yahoo.co.jp>
This commit is contained in:
かっこかり 2023-08-21 20:24:18 +09:00 • committed by GitHub
parent 70a7800927
commit 1f7a4b092d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 15 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

7
packages/frontend/src/components/global/MkMisskeyFlavoredMarkdown.ts
View file

@ -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': {

7
packages/frontend/src/style.scss
View file

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