mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-12-05 10:18:38 +09:00
Code

(fix) mfm: rainbow fallback

Browse Source
This commit is contained in:
kakkokari-gtyih 2023-07-23 15:53:37 +09:00
parent 7097d553e4
commit 7ec0e4c6f1
2 changed files with 13 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -170,8 +170,13 @@ export default function(props: {
}, genEl(token.children, scale)); }, genEl(token.children, scale));
} }
case 'rainbow': { case 'rainbow': {
if (!useAnim) {
return h('span', {
class: '_mfm_rainbow_fallback_',
}, genEl(token.children, scale));
}
const speed = validTime(token.props.args.speed) ?? '1s'; const speed = validTime(token.props.args.speed) ?? '1s';
style = useAnim ? `animation: mfm-rainbow ${speed} linear infinite;` : ''; style = `animation: mfm-rainbow ${speed} linear infinite;`;
break; break;
} }
case 'sparkle': { case 'sparkle': {

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

@ -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 { @keyframes mfm-spin {
0% { transform: rotate(0deg); } 0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } 100% { transform: rotate(360deg); }