Add rainbow function for MFM

This commit is contained in:
syuilo 2021-08-05 21:55:41 +09:00
parent e410e22980
commit 62ccb53c24
4 changed files with 24 additions and 0 deletions

View File

@ -878,6 +878,8 @@ _mfm:
blurDescription: "内容をぼかすことができます。ポインターを上に乗せるとはっきり見えるようになります。" blurDescription: "内容をぼかすことができます。ポインターを上に乗せるとはっきり見えるようになります。"
font: "フォント" font: "フォント"
fontDescription: "内容のフォントを指定することができます。" fontDescription: "内容のフォントを指定することができます。"
rainbow: "レインボー"
rainbowDescription: "内容をレインボーにします。"
_reversi: _reversi:
reversi: "リバーシ" reversi: "リバーシ"

View File

@ -117,6 +117,11 @@ export default defineComponent({
75% { transform: scale3d(1.05, 0.95, 1); } 75% { transform: scale3d(1.05, 0.95, 1); }
to { transform: scale3d(1, 1, 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>
<style lang="scss" scoped> <style lang="scss" scoped>

View File

@ -165,6 +165,10 @@ export default defineComponent({
class: '_mfm_blur_', class: '_mfm_blur_',
}, genEl(token.children)); }, genEl(token.children));
} }
case 'rainbow': {
style = this.$store.state.animatedMfm ? 'animation: mfm-rainbow 1s linear infinite;' : '';
break;
}
} }
if (style == null) { if (style == null) {
return h('span', {}, ['[', token.props.name, ...genEl(token.children), ']']); return h('span', {}, ['[', token.props.name, ...genEl(token.children), ']']);

View File

@ -261,6 +261,16 @@
</div> </div>
</div> </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> </div>
</template> </template>
@ -306,6 +316,7 @@ export default defineComponent({
preview_x3: `$[x3 🍮]`, preview_x3: `$[x3 🍮]`,
preview_x4: `$[x4 🍮]`, preview_x4: `$[x4 🍮]`,
preview_blur: `$[blur ${this.$ts._mfm.dummy}]`, preview_blur: `$[blur ${this.$ts._mfm.dummy}]`,
preview_rainbow: `$[rainbow 🍮]`,
} }
}, },
}); });
@ -313,6 +324,8 @@ export default defineComponent({
<style lang="scss" scoped> <style lang="scss" scoped>
.mwysmxbg { .mwysmxbg {
background: var(--bg);
> .section { > .section {
> .title { > .title {
position: sticky; position: sticky;