mirror of
https://activitypub.software/TransFem-org/Sharkey
synced 2024-11-25 23:45:13 +00:00
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>
This commit is contained in:
parent
0f33864df1
commit
60fd793bc3
2 changed files with 35 additions and 6 deletions
|
@ -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); }
|
||||
|
|
|
@ -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 =
|
||||
|
|
Loading…
Reference in a new issue