diff options
| author | syuilo <Syuilotan@yahoo.co.jp> | 2021-08-05 21:55:41 +0900 |
|---|---|---|
| committer | syuilo <Syuilotan@yahoo.co.jp> | 2021-08-05 21:55:41 +0900 |
| commit | 62ccb53c243bf252f000cee2b832f6f3db1b74e8 (patch) | |
| tree | 3ae8b55c117b38aa9d0b6f64715fc1e270cd52c1 /src | |
| parent | Update misskey.md (diff) | |
| download | sharkey-62ccb53c243bf252f000cee2b832f6f3db1b74e8.tar.gz sharkey-62ccb53c243bf252f000cee2b832f6f3db1b74e8.tar.bz2 sharkey-62ccb53c243bf252f000cee2b832f6f3db1b74e8.zip | |
Add rainbow function for MFM
Diffstat (limited to 'src')
| -rw-r--r-- | src/client/components/global/misskey-flavored-markdown.vue | 5 | ||||
| -rw-r--r-- | src/client/components/mfm.ts | 4 | ||||
| -rw-r--r-- | src/client/pages/mfm-cheat-sheet.vue | 13 |
3 files changed, 22 insertions, 0 deletions
diff --git a/src/client/components/global/misskey-flavored-markdown.vue b/src/client/components/global/misskey-flavored-markdown.vue index 988cf9cf47..c4f75bee93 100644 --- a/src/client/components/global/misskey-flavored-markdown.vue +++ b/src/client/components/global/misskey-flavored-markdown.vue @@ -117,6 +117,11 @@ export default defineComponent({ 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%); } +} </style> <style lang="scss" scoped> diff --git a/src/client/components/mfm.ts b/src/client/components/mfm.ts index 3b08c83c7f..c248f934df 100644 --- a/src/client/components/mfm.ts +++ b/src/client/components/mfm.ts @@ -165,6 +165,10 @@ export default defineComponent({ class: '_mfm_blur_', }, genEl(token.children)); } + case 'rainbow': { + style = this.$store.state.animatedMfm ? 'animation: mfm-rainbow 1s linear infinite;' : ''; + break; + } } if (style == null) { return h('span', {}, ['[', token.props.name, ...genEl(token.children), ']']); diff --git a/src/client/pages/mfm-cheat-sheet.vue b/src/client/pages/mfm-cheat-sheet.vue index 5227855236..75bbfce7e8 100644 --- a/src/client/pages/mfm-cheat-sheet.vue +++ b/src/client/pages/mfm-cheat-sheet.vue @@ -261,6 +261,16 @@ </div> </div> </div> + <div class="section _block"> + <div class="title">{{ $ts._mfm.rainbow }}</div> + <div class="content"> + <p>{{ $ts._mfm.rainbowDescription }}</p> + <div class="preview"> + <Mfm :text="preview_rainbow"/> + <MkTextarea v-model:value="preview_rainbow"><span>MFM</span></MkTextarea> + </div> + </div> + </div> </div> </template> @@ -306,6 +316,7 @@ export default defineComponent({ preview_x3: `$[x3 🍮]`, preview_x4: `$[x4 🍮]`, preview_blur: `$[blur ${this.$ts._mfm.dummy}]`, + preview_rainbow: `$[rainbow 🍮]`, } }, }); @@ -313,6 +324,8 @@ export default defineComponent({ <style lang="scss" scoped> .mwysmxbg { + background: var(--bg); + > .section { > .title { position: sticky; |