diff options
| author | Johann150 <johann.galle@protonmail.com> | 2022-05-19 13:38:14 +0200 |
|---|---|---|
| committer | GitHub <noreply@github.com> | 2022-05-19 20:38:14 +0900 |
| commit | 60fd793bc325303668028150930cbcde8fd9fb1a (patch) | |
| tree | 038eef762c0dd86bbbb957eccfff53bac98e2d61 /packages/client/src/components | |
| parent | fix: ノート詳細ページの新しいノートを表示する機能の動... (diff) | |
| download | misskey-60fd793bc325303668028150930cbcde8fd9fb1a.tar.gz misskey-60fd793bc325303668028150930cbcde8fd9fb1a.tar.bz2 misskey-60fd793bc325303668028150930cbcde8fd9fb1a.zip | |
enhance(MFM): limit large MFM (#8540)
* add CSS classes for zoom MFM
* limit nesting of x2, x3, x4 MFM
* simplify CSS calculation
Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
Co-authored-by: Acid Chicken (硫酸鶏) <root@acid-chicken.com>
Diffstat (limited to 'packages/client/src/components')
| -rw-r--r-- | packages/client/src/components/global/misskey-flavored-markdown.vue | 26 | ||||
| -rw-r--r-- | packages/client/src/components/mfm.ts | 15 |
2 files changed, 35 insertions, 6 deletions
diff --git a/packages/client/src/components/global/misskey-flavored-markdown.vue b/packages/client/src/components/global/misskey-flavored-markdown.vue index 243d8614ba..70d0108e9f 100644 --- a/packages/client/src/components/global/misskey-flavored-markdown.vue +++ b/packages/client/src/components/global/misskey-flavored-markdown.vue @@ -31,6 +31,32 @@ const props = withDefaults(defineProps<{ } } +.mfm-x2 { + --mfm-zoom-size: 200%; +} + +.mfm-x3 { + --mfm-zoom-size: 400%; +} + +.mfm-x4 { + --mfm-zoom-size: 600%; +} + +.mfm-x2, .mfm-x3, .mfm-x4 { + font-size: var(--mfm-zoom-size); + + .mfm-x2, .mfm-x3, .mfm-x4 { + /* only half effective */ + font-size: calc(var(--mfm-zoom-size) / 2 + 50%); + + .mfm-x2, .mfm-x3, .mfm-x4 { + /* disabled */ + font-size: 100%; + } + } +} + @keyframes mfm-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } diff --git a/packages/client/src/components/mfm.ts b/packages/client/src/components/mfm.ts index 6ac410762d..4556a82d55 100644 --- a/packages/client/src/components/mfm.ts +++ b/packages/client/src/components/mfm.ts @@ -142,16 +142,19 @@ export default defineComponent({ break; } case 'x2': { - style = `font-size: 200%;`; - break; + return h('span', { + class: 'mfm-x2', + }, genEl(token.children)); } case 'x3': { - style = `font-size: 400%;`; - break; + return h('span', { + class: 'mfm-x3', + }, genEl(token.children)); } case 'x4': { - style = `font-size: 600%;`; - break; + return h('span', { + class: 'mfm-x4', + }, genEl(token.children)); } case 'font': { const family = |