oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-20 04:50:54 +00:00
Code Wiki Activity

4.77.9

Browse source 
* Fixed: Issue with chat disappearing after a recent Twitch update.
* Fixed: Various font size issues.
This commit is contained in:
SirStendec 2025-07-17 12:22:11 -04:00
parent 2bb27693e5
commit 78d40d402e
47 changed files with 184 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -1,7 +1,7 @@
{ {
"name": "frankerfacez", "name": "frankerfacez",
"author": "Dan Salvato LLC", "author": "Dan Salvato LLC",
"version": "4.77.8", "version": "4.77.9",
"description": "FrankerFaceZ is a Twitch enhancement suite.", "description": "FrankerFaceZ is a Twitch enhancement suite.",
"private": true, "private": true,
"license": "Apache-2.0", "license": "Apache-2.0",

13
src/modules/chat/index.js
View file

@ -1935,7 +1935,8 @@ export default class Chat extends Module {
is_action, is_action,
ffz_emotes: emotes, ffz_emotes: emotes,
timestamp: msg.sentAt && msg.sentAt.getTime(), timestamp: msg.sentAt && msg.sentAt.getTime(),
deleted: false deleted: false,
toJSON: () => null
}; };
out.user.color = out.user.chatColor; out.user.color = out.user.chatColor;
@ -1982,7 +1983,7 @@ export default class Chat extends Module {
if ( ! reply ) if ( ! reply )
return null; return null;
return [ const out = [
{ {
type: 'reply', type: 'reply',
text: reply.parentDisplayName, text: reply.parentDisplayName,
@ -1996,6 +1997,9 @@ export default class Chat extends Module {
text: ' ' text: ' '
} }
]; ];
out.toJSON = () => null;
return out;
} }
@ -2576,7 +2580,10 @@ export default class Chat extends Module {
} }
} }
return tokens || []; tokens = tokens || [];
tokens.toJSON = () => null
return tokens;
} }

2
src/modules/chat/tokenizers.jsx
View file

@ -174,7 +174,7 @@ export const Links = {
{content} {content}
{url_notice ? <div class="tw-mg-t-05 tw-border-t tw-pd-t-05 tw-align-center"> {url_notice ? <div class="tw-mg-t-05 tw-border-t tw-pd-t-05 tw-align-center">
{url_notice} {url_notice}
<div class=" tw-font-size-8"> <div class=" ffz-font-size-8">
{this.i18n.t('tooltip.shift-detail', '(Shift for Details)')} {this.i18n.t('tooltip.shift-detail', '(Shift for Details)')}
</div> </div>
</div> : null} </div> : null}

14
src/modules/emote_card/components/card.vue
View file

@ -12,7 +12,7 @@
<div class="tw-flex tw-flex-column tw-full-height tw-full-width viewer-card__overlay"> <div class="tw-flex tw-flex-column tw-full-height tw-full-width viewer-card__overlay">
<div class="tw-align-center tw-border-radius-medium tw-align-items-center tw-c-background-alt tw-c-text-base tw-flex tw-flex-grow-1 tw-flex-row tw-full-width tw-justify-content-start tw-pd-05 tw-relative viewer-card__banner"> <div class="tw-align-center tw-border-radius-medium tw-align-items-center tw-c-background-alt tw-c-text-base tw-flex tw-flex-grow-1 tw-flex-row tw-full-width tw-justify-content-start tw-pd-05 tw-relative viewer-card__banner">
<div class="tw-mg-l-05 tw-mg-y-05 tw-inline-flex viewer-card-drag-cancel"> <div class="tw-mg-l-05 tw-mg-y-05 tw-inline-flex viewer-card-drag-cancel">
<figure v-if="! loaded" class="tw-mg-x-1 tw-font-size-2 ffz-i-zreknarf loading" /> <figure v-if="! loaded" class="tw-mg-x-1 ffz-font-size-2 ffz-i-zreknarf loading" />
<figure v-else class="ffz-avatar tw-flex tw-align-items-center" :style="imageStyle"> <figure v-else class="ffz-avatar tw-flex tw-align-items-center" :style="imageStyle">
<img <img
v-if="emote.src" v-if="emote.src"
@ -23,7 +23,7 @@
</div> </div>
<div class="tw-align-left tw-flex-grow-1 tw-ellipsis tw-mg-l-1 tw-mg-y-05 viewer-card__display-name"> <div class="tw-align-left tw-flex-grow-1 tw-ellipsis tw-mg-l-1 tw-mg-y-05 viewer-card__display-name">
<h4 <h4
class="tw-inline tw-ellipsis" class="tw-inline tw-ellipsis ffz-font-size-4"
:class="{'tw-italic': hasOriginalName}" :class="{'tw-italic': hasOriginalName}"
:title="emote ? emote.name : raw_emote.name" :title="emote ? emote.name : raw_emote.name"
> >
@ -31,18 +31,18 @@
</h4> </h4>
<P <P
v-if="! loaded" v-if="! loaded"
class="tw-c-text-alt-2 tw-font-size-6" class="tw-c-text-alt-2 ffz-font-size-6"
> >
{{ t('emote-card.loading', 'Loading...') }} {{ t('emote-card.loading', 'Loading...') }}
</P> </P>
<p <p
v-if="loaded && emote.source" v-if="loaded && emote.source"
class="tw-c-text-alt-2 tw-font-size-6 tw-ellipsis" class="tw-c-text-alt-2 ffz-font-size-6 tw-ellipsis"
:title="emote.source_i18n ? t(emote.source_i18n, emote.source) : emote.source" :title="emote.source_i18n ? t(emote.source_i18n, emote.source) : emote.source"
> >
{{ emote.source_i18n ? t(emote.source_i18n, emote.source) : emote.source }} {{ emote.source_i18n ? t(emote.source_i18n, emote.source) : emote.source }}
</p> </p>
<p v-if="hasOriginalName" class="tw-c-text-alt-2 tw-font-size-6 tw-ellipsis"> <p v-if="hasOriginalName" class="tw-c-text-alt-2 ffz-font-size-6 tw-ellipsis">
<t-list <t-list
phrase="emote.original-name" phrase="emote.original-name"
default="Name: {name}" default="Name: {name}"
@ -52,7 +52,7 @@
</template> </template>
</t-list> </t-list>
</p> </p>
<p v-if="loaded && emote.owner" class="tw-c-text-alt-2 tw-font-size-6 tw-ellipsis"> <p v-if="loaded && emote.owner" class="tw-c-text-alt-2 ffz-font-size-6 tw-ellipsis">
<t-list <t-list
phrase="emote-card.owner" phrase="emote-card.owner"
default="Owner: {owner}" default="Owner: {owner}"
@ -68,7 +68,7 @@
</template> </template>
</t-list> </t-list>
</p> </p>
<p v-if="loaded && emote.artist" class="tw-c-text-alt-2 tw-font-size-6 tw-ellipsis"> <p v-if="loaded && emote.artist" class="tw-c-text-alt-2 ffz-font-size-6 tw-ellipsis">
<t-list <t-list
phrase="emote-card.artist" phrase="emote-card.artist"
default="Artist: {artist}" default="Artist: {artist}"

6
src/modules/emote_card/components/manage-ffz.vue
View file

@ -9,7 +9,7 @@
@click="toggle" @click="toggle"
> >
<div class="tw-flex-grow-1"> <div class="tw-flex-grow-1">
<h4>{{ t('emote-card.manage', 'Manage My Collections') }}</h4> <h4 class="ffz-font-size-4">{{ t('emote-card.manage', 'Manage My Collections') }}</h4>
</div> </div>
<figure <figure
@ -24,7 +24,7 @@
classes="ffz-mh-30" classes="ffz-mh-30"
> >
<div v-if="loading" class="tw-align-center tw-pd-1"> <div v-if="loading" class="tw-align-center tw-pd-1">
<h1 class="tw-mg-5 ffz-i-zreknarf loading" /> <h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
</div> </div>
<div v-else-if="error" class="tw-align-center tw-pd-1"> <div v-else-if="error" class="tw-align-center tw-pd-1">
<div class="tw-mg-t-1 tw-mg-b-2"> <div class="tw-mg-t-1 tw-mg-b-2">
@ -128,4 +128,4 @@ export default {
} }
</script> </script>

12
src/modules/emote_card/components/modifiers.vue
View file

@ -8,7 +8,7 @@
@click="toggle" @click="toggle"
> >
<div class="tw-flex-grow-1"> <div class="tw-flex-grow-1">
<h4>{{ t('emote-card.modifiers', 'Modifiers') }}</h4> <h4 class="ffz-font-size-4">{{ t('emote-card.modifiers', 'Modifiers') }}</h4>
</div> </div>
<figure <figure
@ -48,15 +48,15 @@
</figure> </figure>
</div> </div>
<div class="tw-align-left tw-flex-grow-1 tw-ellipsis tw-mg-x-1"> <div class="tw-align-left tw-flex-grow-1 tw-ellipsis tw-mg-x-1">
<h4 class="tw-inline" :title="mod.name">{{ mod.name }}</h4> <h4 class="tw-inline ffz-font-size-4" :title="mod.name">{{ mod.name }}</h4>
<p <p
v-if="mod.source" v-if="mod.source"
class="tw-c-text-alt-2 tw-font-size-6" class="tw-c-text-alt-2 ffz-font-size-6"
:title="mod.source_i18n ? t(mod.source_i18n, mod.source) : mod.source" :title="mod.source_i18n ? t(mod.source_i18n, mod.source) : mod.source"
> >
{{ mod.source_i18n ? t(mod.source_i18n, mod.source) : mod.source }} {{ mod.source_i18n ? t(mod.source_i18n, mod.source) : mod.source }}
</p> </p>
<p v-if="mod.owner" class="tw-c-text-alt-2 tw-font-size-6"> <p v-if="mod.owner" class="tw-c-text-alt-2 ffz-font-size-6">
<t-list <t-list
phrase="emote-card.owner" phrase="emote-card.owner"
default="Owner: {owner}" default="Owner: {owner}"
@ -72,7 +72,7 @@
</template> </template>
</t-list> </t-list>
</p> </p>
<p v-if="mod.artist" class="tw-c-text-alt-2 tw-font-size-6"> <p v-if="mod.artist" class="tw-c-text-alt-2 ffz-font-size-6">
<t-list <t-list
phrase="emote-card.artist" phrase="emote-card.artist"
default="Artist: {artist}" default="Artist: {artist}"
@ -182,4 +182,4 @@ export default {
} }
</script> </script>

6
src/modules/emote_card/components/report-form.vue
View file

@ -2,7 +2,7 @@
<section class="viewer-card__actions tw-bottom-0 tw-pd-1"> <section class="viewer-card__actions tw-bottom-0 tw-pd-1">
<template v-if="loading"> <template v-if="loading">
<div class="tw-align-center tw-pd-1"> <div class="tw-align-center tw-pd-1">
<h1 class="tw-mg-5 ffz-i-zreknarf loading" /> <h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
</div> </div>
</template> </template>
<template v-else-if="errorNoUser"> <template v-else-if="errorNoUser">
@ -54,7 +54,7 @@
<textarea <textarea
v-model="message" v-model="message"
class="tw-full-width tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input" class="tw-full-width tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
:placeholder="t('emote-card.report.placeholder', 'Enter a report message here.')" :placeholder="t('emote-card.report.placeholder', 'Enter a report message here.')"
/> />
@ -254,4 +254,4 @@ export default {
} }
</script> </script>

34
src/modules/main_menu/components/action-editor.vue
View file

@ -6,7 +6,7 @@
<div class="tw-flex-grow-1"> <div class="tw-flex-grow-1">
<template v-if="! editing"> <template v-if="! editing">
<h4>{{ title }}</h4> <h4 class="ffz-font-size-4">{{ title }}</h4>
<div class="description"> <div class="description">
{{ description }} {{ description }}
</div> </div>
@ -19,13 +19,13 @@
ref="json" ref="json"
v-model="json" v-model="json"
readonly readonly
class="tw-full-width tw-full-height tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input" class="tw-full-width tw-full-height tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
@focus="$event.target.select()" @focus="$event.target.select()"
/> />
</template> </template>
<template v-else> <template v-else>
<section> <section>
<h5>{{ t('setting.actions.appearance', 'Appearance') }}</h5> <h5 class="ffz-font-size-5">{{ t('setting.actions.appearance', 'Appearance') }}</h5>
<div class="tw-flex tw-align-items-center"> <div class="tw-flex tw-align-items-center">
<label for="tooltip"> <label for="tooltip">
@ -34,7 +34,7 @@
<input <input
v-model="edit_data.appearance.tooltip" v-model="edit_data.appearance.tooltip"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05" class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
> >
</div> </div>
@ -47,7 +47,7 @@
id="renderer_type" id="renderer_type"
ref="renderer_type" ref="renderer_type"
v-model="edit_data.appearance.type" v-model="edit_data.appearance.type"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05" class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
> >
<option <option
v-for="(r, key) in data.renderers" v-for="(r, key) in data.renderers"
@ -88,7 +88,7 @@
</section> </section>
<section class="tw-mg-t-1 tw-border-t tw-pd-t-1"> <section class="tw-mg-t-1 tw-border-t tw-pd-t-1">
<h5>{{ t('setting.actions.visibility', 'Visibility') }}</h5> <h5 class="ffz-font-size-5">{{ t('setting.actions.visibility', 'Visibility') }}</h5>
<div class="tw-flex tw-align-items-center"> <div class="tw-flex tw-align-items-center">
<label for="vis_mod"> <label for="vis_mod">
@ -98,7 +98,7 @@
<select <select
id="vis_mod" id="vis_mod"
v-model="edit_data.display.mod" v-model="edit_data.display.mod"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05" class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
> >
<option :value="undefined" selected> <option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }} {{ t('setting.unset', 'Unset') }}
@ -120,7 +120,7 @@
<select <select
id="vis_mod_icons" id="vis_mod_icons"
v-model="edit_data.display.mod_icons" v-model="edit_data.display.mod_icons"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05" class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
> >
<option :value="undefined" selected> <option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }} {{ t('setting.unset', 'Unset') }}
@ -142,7 +142,7 @@
<select <select
id="vis_following" id="vis_following"
v-model="edit_data.display.following" v-model="edit_data.display.following"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05" class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
> >
<option :value="undefined" selected> <option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }} {{ t('setting.unset', 'Unset') }}
@ -164,7 +164,7 @@
<select <select
id="vis_deleted" id="vis_deleted"
v-model="edit_data.display.deleted" v-model="edit_data.display.deleted"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05" class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
> >
<option :value="undefined" selected> <option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }} {{ t('setting.unset', 'Unset') }}
@ -186,7 +186,7 @@
<select <select
id="vis_emote" id="vis_emote"
v-model="edit_data.display.emoteOnly" v-model="edit_data.display.emoteOnly"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05" class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
> >
<option :value="undefined" selected> <option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }} {{ t('setting.unset', 'Unset') }}
@ -208,7 +208,7 @@
<select <select
id="vis_slow" id="vis_slow"
v-model="edit_data.display.slowMode" v-model="edit_data.display.slowMode"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05" class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
> >
<option :value="undefined" selected> <option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }} {{ t('setting.unset', 'Unset') }}
@ -230,7 +230,7 @@
<select <select
id="vis_subs" id="vis_subs"
v-model="edit_data.display.followersOnly" v-model="edit_data.display.followersOnly"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05" class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
> >
<option :value="undefined" selected> <option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }} {{ t('setting.unset', 'Unset') }}
@ -252,7 +252,7 @@
<select <select
id="vis_subs" id="vis_subs"
v-model="edit_data.display.subsMode" v-model="edit_data.display.subsMode"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05" class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
> >
<option :value="undefined" selected> <option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }} {{ t('setting.unset', 'Unset') }}
@ -274,7 +274,7 @@
<select <select
id="vis_r9k" id="vis_r9k"
v-model="edit_data.display.r9kMode" v-model="edit_data.display.r9kMode"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05" class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
> >
<option :value="undefined" selected> <option :value="undefined" selected>
{{ t('setting.unset', 'Unset') }} {{ t('setting.unset', 'Unset') }}
@ -380,7 +380,7 @@
</section> </section>
<section class="tw-mg-t-1 tw-border-t tw-pd-t-1"> <section class="tw-mg-t-1 tw-border-t tw-pd-t-1">
<h5>{{ t('setting.actions.action', 'Action') }}</h5> <h5 class="ffz-font-size-5">{{ t('setting.actions.action', 'Action') }}</h5>
<div class="tw-flex tw-align-items-center"> <div class="tw-flex tw-align-items-center">
<label for="action_type"> <label for="action_type">
@ -390,7 +390,7 @@
<select <select
id="action_type" id="action_type"
v-model="edit_data.action" v-model="edit_data.action"
class="tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05" class="tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-y-05"
> >
<option <option
v-for="(a, key) in data.actions" v-for="(a, key) in data.actions"

8
src/modules/main_menu/components/addon-list.vue
View file

@ -1,7 +1,7 @@
<template lang="html"> <template lang="html">
<div class="ffz--addons tw-border-t tw-pd-y-1"> <div class="ffz--addons tw-border-t tw-pd-y-1">
<div v-if="reload" class="tw-mg-y-1 tw-c-background-accent tw-c-text-overlay tw-pd-1"> <div v-if="reload" class="tw-mg-y-1 tw-c-background-accent tw-c-text-overlay tw-pd-1">
<h4 class="ffz-i-attention"> <h4 class="ffz-i-attention ffz-font-size-4">
{{ t('addon.refresh-needed', 'You must refresh your Twitch pages for some changes to take effect.') }} {{ t('addon.refresh-needed', 'You must refresh your Twitch pages for some changes to take effect.') }}
</h4> </h4>
@ -34,7 +34,7 @@
</div> </div>
<select <select
v-model="sort_by" v-model="sort_by"
class="tw-border-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05" class="tw-border-radius-medium ffz-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
> >
<option :value="0"> <option :value="0">
{{ t('addon.sort-name', 'Sort By: Name') }} {{ t('addon.sort-name', 'Sort By: Name') }}
@ -49,7 +49,7 @@
</div> </div>
<div v-if="! ready" class="tw-align-center tw-pd-1"> <div v-if="! ready" class="tw-align-center tw-pd-1">
<h1 class="tw-mg-5 ffz-i-zreknarf loading" /> <h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
</div> </div>
<div v-else> <div v-else>
<addon <addon
@ -103,7 +103,7 @@
<input <input
ref="unlisted" ref="unlisted"
:placeholder="t('addon.unlisted.id', 'add-on id')" :placeholder="t('addon.unlisted.id', 'add-on id')"
class="tw-flex-grow-1 tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input" class="tw-flex-grow-1 tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
@keydown.enter="addUnlisted" @keydown.enter="addUnlisted"
> >
<button <button

4
src/modules/main_menu/components/addon.vue
View file

@ -28,11 +28,11 @@
<div class="tw-flex-grow-1"> <div class="tw-flex-grow-1">
<div class="tw-border-b tw-mg-b-05"> <div class="tw-border-b tw-mg-b-05">
<h4> <h4 class="ffz-font-size-4">
{{ addon.name_i18n ? t(addon.name_i18n, addon.name) : addon.name }} {{ addon.name_i18n ? t(addon.name_i18n, addon.name) : addon.name }}
<span <span
v-if="addon.dev || addon.unlisted " v-if="addon.dev || addon.unlisted "
class="tw-c-text-alt-2 tw-font-size-6" class="tw-c-text-alt-2 ffz-font-size-6"
> >
({{ addon.id }}) ({{ addon.id }})
</span> </span>

6
src/modules/main_menu/components/async-text.vue
View file

@ -18,7 +18,7 @@
<input <input
ref="url_box" ref="url_box"
:value="url" :value="url"
class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input" class="tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
type="text" type="text"
readonly readonly
@focusin="selectURL" @focusin="selectURL"
@ -38,9 +38,9 @@
</button> </button>
</div> </div>
</div> </div>
<div class="tw-c-background-alt-2 tw-font-size-5 tw-pd-y-05 tw-pd-x-1 tw-border-radius-large"> <div class="tw-c-background-alt-2 ffz-font-size-5 tw-pd-y-05 tw-pd-x-1 tw-border-radius-large">
<div v-if="loading" class="tw-align-center"> <div v-if="loading" class="tw-align-center">
<h1 class="tw-mg-5 ffz-i-zreknarf loading" /> <h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
</div> </div>
<code v-else>{{ text }}</code> <code v-else>{{ text }}</code>
</div> </div>

2
src/modules/main_menu/components/backup-restore.vue
View file

@ -31,7 +31,7 @@
</div> </div>
<div v-if="error" class="tw-c-background-accent-alt-2 tw-c-text-overlay tw-pd-1 tw-mg-b-1"> <div v-if="error" class="tw-c-background-accent-alt-2 tw-c-text-overlay tw-pd-1 tw-mg-b-1">
<h3 class="ffz-i-attention"> <h3 class="ffz-i-attention ffz-font-size-3">
{{ t('setting.backup-restore.error', 'There was an error processing this backup.') }} {{ t('setting.backup-restore.error', 'There was an error processing this backup.') }}
</h3> </h3>
<div v-if="error_desc"> <div v-if="error_desc">

10
src/modules/main_menu/components/badge-term-editor.vue
View file

@ -14,16 +14,16 @@
/> />
</div> </div>
<div class="tw-flex-grow-1 tw-mg-r-05"> <div class="tw-flex-grow-1 tw-mg-r-05">
<h4 v-if="! editing && ! current" class="ffz-monospace"> <h4 v-if="! editing && ! current" class="ffz-monospace ffz-font-size-4">
<pre>{{ t('setting.terms.invalid-badge', 'unknown/unloaded badge') }}</pre> <pre>{{ t('setting.terms.invalid-badge', 'unknown/unloaded badge') }}</pre>
</h4> </h4>
<h4 v-if="! editing && current"> <h4 v-if="! editing && current" class="ffz-font-size-4">
{{ current.name }} {{ current.name }}
</h4> </h4>
<select <select
v-if="editing" v-if="editing"
v-model="edit_data.v" v-model="edit_data.v"
class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-x-1 tw-pd-y-05 tw-mg-y-05" class="tw-block tw-full-width tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
> >
<option v-if="adding" value=""> <option v-if="adding" value="">
{{ t('setting.terms.please-select', 'Please select an option.') }} {{ t('setting.terms.please-select', 'Please select an option.') }}
@ -71,7 +71,7 @@
v-model.number="edit_data.p" v-model.number="edit_data.p"
type="number" type="number"
step="1" step="1"
class="tw-block tw-border-radius-medium tw-font-size-6 ffz-min-width-unset ffz-input tw-pd-x-1 tw-pd-y-05" class="tw-block tw-border-radius-medium ffz-font-size-6 ffz-min-width-unset ffz-input tw-pd-x-1 tw-pd-y-05"
style="width: 5rem" style="width: 5rem"
> >
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right"> <div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
@ -303,4 +303,4 @@ export default {
} }
} }
</script> </script>

6
src/modules/main_menu/components/badge-visibility.vue
View file

@ -88,7 +88,7 @@
class="preview-image ffz-badge tw-mg-r-1 tw-flex-shrink-0" class="preview-image ffz-badge tw-mg-r-1 tw-flex-shrink-0"
/> />
<div> <div>
<h5>{{ i.name }}</h5> <h5 class="ffz-font-size-5">{{ i.name }}</h5>
<section <section
v-if="i.versions && (i.always_versions || i.versions.length > 1)" v-if="i.versions && (i.always_versions || i.versions.length > 1)"
class="tw-mg-t-05" class="tw-mg-t-05"
@ -116,7 +116,7 @@
</label> </label>
</li> </li>
</ul> </ul>
<div v-else class="tw-c-text-alt-2 tw-font-size-4 tw-align-center tw-pd-05"> <div v-else class="tw-c-text-alt-2 ffz-font-size-4 tw-align-center tw-pd-05">
{{ t('setting.badges.hidden', '{count,plural,one{# badge is} other{# badges are} } hidden in this set', { {{ t('setting.badges.hidden', '{count,plural,one{# badge is} other{# badges are} } hidden in this set', {
count: sec.badges.length count: sec.badges.length
}) }} }) }}
@ -192,4 +192,4 @@ export default {
} }
} }
</script> </script>

6
src/modules/main_menu/components/blocked-type-editor.vue
View file

@ -2,13 +2,13 @@
<div class="ffz--term ffz--blocked-type"> <div class="ffz--term ffz--blocked-type">
<div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row tw-full-width"> <div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row tw-full-width">
<div class="tw-flex-grow-1 tw-mg-r-05"> <div class="tw-flex-grow-1 tw-mg-r-05">
<h4 v-if="! editing"> <h4 v-if="! editing" class="ffz-font-size-4">
{{ display.v }} {{ display.v }}
</h4> </h4>
<select <select
v-if="editing" v-if="editing"
v-model="edit_data.v" v-model="edit_data.v"
class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-x-1 tw-pd-y-05 tw-mg-y-05" class="tw-block tw-full-width tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-x-1 tw-pd-y-05 tw-mg-y-05"
> >
<option v-if="adding" value=""> <option v-if="adding" value="">
{{ t('setting.terms.please-select', 'Please select an option.') }} {{ t('setting.terms.please-select', 'Please select an option.') }}
@ -128,4 +128,4 @@ export default {
} }
} }
</script> </script>

18
src/modules/main_menu/components/changelog.vue
View file

@ -1,7 +1,7 @@
<template lang="html"> <template lang="html">
<div class="ffz--changelog tw-border-t tw-pd-t-1"> <div class="ffz--changelog tw-border-t tw-pd-t-1">
<div class="tw-align-center"> <div class="tw-align-center">
<h3 v-if="addon" class="tw-mg-b-1 tw-flex tw-align-items-center tw-justify-content-center"> <h3 v-if="addon" class="tw-mg-b-1 tw-flex tw-align-items-center tw-justify-content-center ffz-font-size-3">
<figure <figure
v-if="addon.icon" v-if="addon.icon"
class="ffz-avatar ffz-avatar--size-30 tw-mg-r-05" class="ffz-avatar ffz-avatar--size-30 tw-mg-r-05"
@ -15,10 +15,10 @@
name: addon.name name: addon.name
}) }} }) }}
</h3> </h3>
<h3 v-else-if="addons" class="tw-mg-b-1"> <h3 v-else-if="addons" class="tw-mg-b-1 ffz-font-size-3">
{{ t('setting.add_ons.changelog.title', 'Add-Ons Changelog') }} {{ t('setting.add_ons.changelog.title', 'Add-Ons Changelog') }}
</h3> </h3>
<h3 v-else class="tw-mg-b-1"> <h3 v-else class="tw-mg-b-1 ffz-font-size-3">
{{ t('home.changelog', 'Changelog') }} {{ t('home.changelog', 'Changelog') }}
</h3> </h3>
</div> </div>
@ -63,16 +63,16 @@
</figure> </figure>
<a <a
v-if="commit.title && commit.title_nav" v-if="commit.title && commit.title_nav"
class="tw-font-size-5 ffz-link ffz-link--inherit" class="ffz-font-size-5 ffz-link ffz-link--inherit"
href="#" href="#"
@click.prevent="titleNav(commit.title_nav)" @click.prevent="titleNav(commit.title_nav)"
> >
{{ commit.title }} {{ commit.title }}
</a> </a>
<div v-else-if="commit.title" class="tw-font-size-5"> <div v-else-if="commit.title" class="ffz-font-size-5">
{{ commit.title }} {{ commit.title }}
</div> </div>
<div v-if="commit.version" class="tw-font-size-4 tw-mg-l-05"> <div v-if="commit.version" class="ffz-font-size-4 tw-mg-l-05">
<span class="tw-c-text-alt-2">v</span>{{ commit.version }} <span class="tw-c-text-alt-2">v</span>{{ commit.version }}
</div> </div>
<div v-if="commit.author" class="tw-mg-l-05"> <div v-if="commit.author" class="tw-mg-l-05">
@ -109,7 +109,7 @@
</div> </div>
<div <div
v-if="commit.hash" v-if="commit.hash"
class="tw-font-size-8 tw-c-text-alt-2" class="ffz-font-size-8 tw-c-text-alt-2"
> >
@<a :href="commit.link" target="_blank" rel="noopener noreferrer" class="ffz-link ffz-link--inherit ffz-tooltip" data-tooltip-type="link">{{ commit.hash }}</a> @<a :href="commit.link" target="_blank" rel="noopener noreferrer" class="ffz-link ffz-link--inherit ffz-tooltip" data-tooltip-type="link">{{ commit.hash }}</a>
</div> </div>
@ -131,7 +131,7 @@
<div v-if="error"> <div v-if="error">
{{ t('home.changelog.error', 'An error occurred loading changes from GitHub.') }} {{ t('home.changelog.error', 'An error occurred loading changes from GitHub.') }}
</div> </div>
<h1 v-else-if="loading" class="tw-mg-5 ffz-i-zreknarf loading" /> <h1 v-else-if="loading" class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
<div v-else-if="! more"> <div v-else-if="! more">
{{ t('home.changelog.no-more', 'There are no more commits to load.') }} {{ t('home.changelog.no-more', 'There are no more commits to load.') }}
</div> </div>
@ -388,4 +388,4 @@ export default {
} }
} }
} }
</script> </script>

8
src/modules/main_menu/components/chat-tester.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="ffz--chat-tester"> <div class="ffz--chat-tester">
<div v-if="context.exclusive" class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-2"> <div v-if="context.exclusive" class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-2">
<h3 class="ffz-i-attention"> <h3 class="ffz-i-attention ffz-font-size-3">
{{ t('debug.chat-tester.exclusive', "Hey! This won't work here!") }} {{ t('debug.chat-tester.exclusive', "Hey! This won't work here!") }}
</h3> </h3>
<markdown :source="t('debug.chat-tester.exclusive-explain', 'This feature does not work when the FFZ Control Center is popped out. It needs to be used in a window where you can see chat.')" /> <markdown :source="t('debug.chat-tester.exclusive-explain', 'This feature does not work when the FFZ Control Center is popped out. It needs to be used in a window where you can see chat.')" />
@ -16,7 +16,7 @@
<select <select
id="selector" id="selector"
ref="selector" ref="selector"
class="tw-full-width tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05" class="tw-full-width tw-border-top-left-radius-medium tw-border-top-right-radius-medium ffz-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05"
@change="onSelectChange" @change="onSelectChange"
> >
<option :selected="is_custom" value="custom"> <option :selected="is_custom" value="custom">
@ -33,13 +33,13 @@
</select> </select>
<input <input
ref="topic" ref="topic"
class="tw-block tw-font-size-6 tw-full-width ffz-textarea ffz-mg-t-1p" class="tw-block ffz-font-size-6 tw-full-width ffz-textarea ffz-mg-t-1p"
@blur="updateMessage" @blur="updateMessage"
@input="onMessageChange" @input="onMessageChange"
/> />
<textarea <textarea
ref="message" ref="message"
class="tw-block tw-font-size-6 tw-full-width ffz-textarea ffz-mg-t-1p tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium" class="tw-block ffz-font-size-6 tw-full-width ffz-textarea ffz-mg-t-1p tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium"
rows="10" rows="10"
@blur="updateMessage" @blur="updateMessage"
@input="onMessageChange" @input="onMessageChange"

6
src/modules/main_menu/components/clear-settings.vue
View file

@ -1,7 +1,7 @@
<template lang="html"> <template lang="html">
<div class="ffz--clear-settings tw-pd-t-05"> <div class="ffz--clear-settings tw-pd-t-05">
<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-2"> <div class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-2">
<h3 class="ffz-i-attention"> <h3 class="ffz-i-attention ffz-font-size-3">
{{ t('setting.clear.warning', 'Be careful! This is permanent.') }} {{ t('setting.clear.warning', 'Be careful! This is permanent.') }}
</h3> </h3>
<markdown :source="t('setting.clear.warning-explain', 'Deleting your data with this tool cannot be reversed. Make sure you have a backup!')" /> <markdown :source="t('setting.clear.warning-explain', 'Deleting your data with this tool cannot be reversed. Make sure you have a backup!')" />
@ -41,7 +41,7 @@
<input <input
v-model="entered" v-model="entered"
type="text" type="text"
class="tw-block tw-border-radius-medium tw-font-size-6 ffz-input tw-pd-x-1 tw-pd-y-05" class="tw-block tw-border-radius-medium ffz-font-size-6 ffz-input tw-pd-x-1 tw-pd-y-05"
autocapitalize="off" autocapitalize="off"
autocorrect="off" autocorrect="off"
> >
@ -138,4 +138,4 @@ export default {
} }
} }
</script> </script>

8
src/modules/main_menu/components/emote-priorities.vue
View file

@ -31,7 +31,7 @@
</div> </div>
<div ref="list" class="ffz--action-list"> <div ref="list" class="ffz--action-list">
<div v-if="! val.length" class="tw-c-text-alt-2 tw-font-size-4 tw-align-center tw-c-text-alt-2 tw-pd-1"> <div v-if="! val.length" class="tw-c-text-alt-2 ffz-font-size-4 tw-align-center tw-c-text-alt-2 tw-pd-1">
{{ t('setting.priorities.none', 'no priorities are defined in this profile') }} {{ t('setting.priorities.none', 'no priorities are defined in this profile') }}
<div class="tw-mg-t-1"> <div class="tw-mg-t-1">
@ -51,7 +51,7 @@
<div class="tw-flex tw-flex-shrink-0 tw-align-items-start handle tw-pd-x-05 tw-pd-t-1 tw-pd-b-05"> <div class="tw-flex tw-flex-shrink-0 tw-align-items-start handle tw-pd-x-05 tw-pd-t-1 tw-pd-b-05">
<span class="ffz-i-ellipsis-vert" /> <span class="ffz-i-ellipsis-vert" />
</div> </div>
<figure v-if="provider.font_icon" class="tw-font-size-2 tw-mg-r-1" :class="provider.font_icon" /> <figure v-if="provider.font_icon" class="ffz-font-size-2 tw-mg-r-1" :class="provider.font_icon" />
<div v-else-if="provider.icon" class="tw-flex-shrink-0 ffz-card-img--size-4 tw-overflow-hidden tw-mg-r-1"> <div v-else-if="provider.icon" class="tw-flex-shrink-0 ffz-card-img--size-4 tw-overflow-hidden tw-mg-r-1">
<img <img
:src="provider.icon" :src="provider.icon"
@ -59,10 +59,10 @@
/> />
</div> </div>
<div> <div>
<h4 v-if="! provider.name"> <h4 v-if="! provider.name" class="ffz-font-size-4">
{{ t('emote-source.unknown', 'Unknown ({id})', provider) }} {{ t('emote-source.unknown', 'Unknown ({id})', provider) }}
</h4> </h4>
<h4 v-else>{{ <h4 v-else class="ffz-font-size-4">{{
provider.i18n_key provider.i18n_key
? t(provider.i18n_key, provider.name, provider) ? t(provider.i18n_key, provider.name, provider)
: provider.name : provider.name

18
src/modules/main_menu/components/experiments.vue
View file

@ -10,7 +10,7 @@
</div> </div>
<select <select
ref="sort_select" ref="sort_select"
class="tw-border-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05" class="tw-border-radius-medium ffz-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
@change="onSort" @change="onSort"
> >
<option :selected="sort_by === 0"> <option :selected="sort_by === 0">
@ -40,7 +40,7 @@
</div> </div>
</div> </div>
<h3 class="tw-mg-b-1"> <h3 class="tw-mg-b-1 ffz-font-size-3">
<span> <span>
{{ t('setting.experiments.ffz', 'FrankerFaceZ Experiments') }} {{ t('setting.experiments.ffz', 'FrankerFaceZ Experiments') }}
</span> </span>
@ -60,7 +60,7 @@
> >
<div class="tw-elevation-1 tw-c-background-base tw-border tw-pd-y-05 tw-pd-x-1 tw-mg-y-05 tw-flex tw-flex-nowrap"> <div class="tw-elevation-1 tw-c-background-base tw-border tw-pd-y-05 tw-pd-x-1 tw-mg-y-05 tw-flex tw-flex-nowrap">
<div class="tw-flex-grow-1"> <div class="tw-flex-grow-1">
<h4>{{ exp.name ? exp.name : key }}</h4> <h4 class="ffz-font-size-4">{{ exp.name ? exp.name : key }}</h4>
<div v-if="exp.description" class="description"> <div v-if="exp.description" class="description">
{{ exp.description }} {{ exp.description }}
</div> </div>
@ -69,7 +69,7 @@
<div class="tw-flex tw-flex-shrink-0 tw-align-items-start"> <div class="tw-flex tw-flex-shrink-0 tw-align-items-start">
<select <select
:data-key="key" :data-key="key"
class="tw-border-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05" class="tw-border-radius-medium ffz-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
@change="onChange($event)" @change="onChange($event)"
> >
<option <option
@ -103,7 +103,7 @@
</div> </div>
</div> </div>
<h3 class="tw-mg-t-5 tw-mg-b-1"> <h3 class="tw-mg-t-5 tw-mg-b-1 ffz-font-size-3">
<span> <span>
{{ t('setting.experiments.twitch', 'Twitch Experiments') }} {{ t('setting.experiments.twitch', 'Twitch Experiments') }}
</span> </span>
@ -117,7 +117,7 @@
<section v-if="experiments_locked"> <section v-if="experiments_locked">
<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-2"> <div class="tw-c-background-accent tw-c-text-overlay tw-pd-1 tw-mg-b-2">
<h3 class="ffz-i-attention"> <h3 class="ffz-i-attention ffz-font-size-3">
{{ t('setting.dev-warning', "It's dangerous to go at all.") }} {{ t('setting.dev-warning', "It's dangerous to go at all.") }}
</h3> </h3>
<markdown :source="t('setting.dev-warning.explain', 'Be careful, this is an advanced feature intended for developer use only. Normal users should steer clear. Adjusting your experiments can have unexpected impacts on your Twitch experience. FrankerFaceZ is not responsible for any issues you encounter as a result of tampering with experiments, and we will not provide support.\n\nIf you\'re sure about this, please type `{code}` into the box below and hit enter.', {code})" /> <markdown :source="t('setting.dev-warning.explain', 'Be careful, this is an advanced feature intended for developer use only. Normal users should steer clear. Adjusting your experiments can have unexpected impacts on your Twitch experience. FrankerFaceZ is not responsible for any issues you encounter as a result of tampering with experiments, and we will not provide support.\n\nIf you\'re sure about this, please type `{code}` into the box below and hit enter.', {code})" />
@ -127,7 +127,7 @@
<input <input
ref="code" ref="code"
type="text" type="text"
class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-b-5" class="tw-block tw-full-width tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05 tw-mg-b-5"
autocapitalize="off" autocapitalize="off"
autocorrect="off" autocorrect="off"
@keydown.enter="enterCode" @keydown.enter="enterCode"
@ -160,7 +160,7 @@
</div> </div>
<div class="tw-flex-grow-1"> <div class="tw-flex-grow-1">
<h4>{{ exp.name }}</h4> <h4 class="ffz-font-size-4">{{ exp.name }}</h4>
<div class="description"> <div class="description">
{{ exp.remainder }} {{ exp.remainder }}
</div> </div>
@ -169,7 +169,7 @@
<div class="tw-flex tw-flex-shrink-0 tw-align-items-start"> <div class="tw-flex tw-flex-shrink-0 tw-align-items-start">
<select <select
:data-key="key" :data-key="key"
class="tw-border-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05" class="tw-border-radius-medium ffz-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 tw-mg-x-05"
@change="onTwitchChange($event)" @change="onTwitchChange($event)"
> >
<option <option

4
src/modules/main_menu/components/filter-rule-editor.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<section class="ffz--filter-rule-editor tw-elevation-1 tw-c-background-base tw-border tw-pd-y-05 tw-mg-y-05 tw-pd-r-1 tw-flex tw-flex-nowrap"> <section class="ffz--filter-rule-editor tw-elevation-1 tw-c-background-base tw-border tw-pd-y-05 tw-mg-y-05 tw-pd-r-1 tw-flex tw-flex-nowrap">
<div class="tw-flex tw-flex-shrink-0 tw-align-items-center handle tw-c-text-alt-2"> <div class="tw-flex tw-flex-shrink-0 tw-align-items-center handle tw-c-text-alt-2">
<h5 class="ffz-i-ellipsis-vert" /> <h5 class="ffz-i-ellipsis-vert ffz-font-size-5" />
</div> </div>
<div v-if="! component" class="tw-flex tw-flex-grow-1 tw-align-self-center tw-align-items-center"> <div v-if="! component" class="tw-flex tw-flex-grow-1 tw-align-self-center tw-align-items-center">
@ -134,4 +134,4 @@ export default {
} }
} }
</script> </script>

16
src/modules/main_menu/components/home-page.vue
View file

@ -2,7 +2,7 @@
<div class="ffz--home tw-flex tw-flex-nowrap"> <div class="ffz--home tw-flex tw-flex-nowrap">
<div class="tw-flex-grow-1"> <div class="tw-flex-grow-1">
<div class="tw-align-center"> <div class="tw-align-center">
<h2 class="ffz-i-zreknarf ffz-i-pd-1"> <h2 class="ffz-i-zreknarf ffz-i-pd-1 ffz-font-size-2">
FrankerFaceZ FrankerFaceZ
</h2> </h2>
<span class="tw-c-text-alt"> <span class="tw-c-text-alt">
@ -18,7 +18,7 @@
v-if="unseen" v-if="unseen"
class="tw-pd-t-1 tw-border-t tw-mg-t-1" class="tw-pd-t-1 tw-border-t tw-mg-t-1"
> >
<h3 class="tw-pd-b-05"> <h3 class="tw-pd-b-05 ffz-font-size-3">
{{ t('home.new-settings', 'New Settings') }} {{ t('home.new-settings', 'New Settings') }}
</h3> </h3>
@ -57,7 +57,7 @@
v-if="addons" v-if="addons"
class="tw-pd-t-1 tw-border-t tw-mg-t-1" class="tw-pd-t-1 tw-border-t tw-mg-t-1"
> >
<h3 class="tw-pd-b-05"> <h3 class="tw-pd-b-05 ffz-font-size-3">
{{ t('home.addon-updates', 'Updated Add-Ons') }} {{ t('home.addon-updates', 'Updated Add-Ons') }}
</h3> </h3>
@ -101,7 +101,7 @@
v-if="new_addons" v-if="new_addons"
class="tw-pd-t-1 tw-border-t tw-mg-t-1" class="tw-pd-t-1 tw-border-t tw-mg-t-1"
> >
<h3 class="tw-pd-b-05"> <h3 class="tw-pd-b-05 ffz-font-size-3">
{{ t('home.addon-new', 'New Add-Ons') }} {{ t('home.addon-new', 'New Add-Ons') }}
</h3> </h3>
@ -151,7 +151,7 @@
rel="noopener" rel="noopener"
> >
<span class="tw-button__icon tw-pd-05"> <span class="tw-button__icon tw-pd-05">
<figure class="ffz-i-zreknarf tw-font-size-3" /> <figure class="ffz-i-zreknarf ffz-font-size-3" />
</span> </span>
</a> </a>
<a <a
@ -162,7 +162,7 @@
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<span class="tw-button__icon tw-pd-05-1"> <span class="tw-button__icon tw-pd-05-1">
<figure class="ffz-i-discord tw-font-size-3" /> <figure class="ffz-i-discord ffz-font-size-3" />
</span> </span>
</a> </a>
<!--a <!--a
@ -173,7 +173,7 @@
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<span class="tw-button__icon tw-pd-05"> <span class="tw-button__icon tw-pd-05">
<figure class="ffz-i-twitter tw-font-size-3" /> <figure class="ffz-i-twitter ffz-font-size-3" />
</span> </span>
</a--> </a-->
<a <a
@ -184,7 +184,7 @@
rel="noopener noreferrer" rel="noopener noreferrer"
> >
<span class="tw-button__icon tw-pd-05"> <span class="tw-button__icon tw-pd-05">
<figure class="ffz-i-github tw-font-size-3" /> <figure class="ffz-i-github ffz-font-size-3" />
</span> </span>
</a> </a>
</div> </div>

6
src/modules/main_menu/components/link-tester.vue
View file

@ -207,9 +207,9 @@
{{ t('debug.link-provider.raw', 'Raw Data') }} {{ t('debug.link-provider.raw', 'Raw Data') }}
</label> </label>
<div class="tw-full-width tw-overflow-hidden ffz--example-report"> <div class="tw-full-width tw-overflow-hidden ffz--example-report">
<div v-if="url" class="tw-c-background-alt-2 tw-font-size-5 tw-pd-y-05 tw-pd-x-1 tw-border-radius-large"> <div v-if="url" class="tw-c-background-alt-2 ffz-font-size-5 tw-pd-y-05 tw-pd-x-1 tw-border-radius-large">
<div v-if="raw_loading" class="tw-align-center"> <div v-if="raw_loading" class="tw-align-center">
<h1 class="tw-mg-5 ffz-i-zreknarf loading" /> <h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
</div> </div>
<code v-else-if="typeof raw_data === 'string'">{{ raw_data }}</code> <code v-else-if="typeof raw_data === 'string'">{{ raw_data }}</code>
<code v-else v-html="highlightJson(raw_data, true)"></code> <code v-else v-html="highlightJson(raw_data, true)"></code>
@ -600,4 +600,4 @@ export default {
} }
</script> </script>

6
src/modules/main_menu/components/main-menu.vue
View file

@ -7,7 +7,7 @@
@click="onFocus" @click="onFocus"
> >
<header ref="header" class="tw-c-background-base tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="maybeResize($event)"> <header ref="header" class="tw-c-background-base tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="maybeResize($event)">
<h3 class="ffz-i-zreknarf ffz-i-pd-1"> <h3 class="ffz-i-zreknarf ffz-i-pd-1 ffz-font-size-3">
FrankerFaceZ FrankerFaceZ
</h3> </h3>
<div class="tw-flex-grow-1 tw-pd-x-2"> <div class="tw-flex-grow-1 tw-pd-x-2">
@ -22,7 +22,7 @@
v-model="query" v-model="query"
:placeholder="t('main-menu.search', 'Search Settings')" :placeholder="t('main-menu.search', 'Search Settings')"
type="search" type="search"
class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-l-3 tw-pd-r-1 tw-pd-y-05" class="tw-block tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-input tw-pd-l-3 tw-pd-r-1 tw-pd-y-05"
autocapitalize="off" autocapitalize="off"
autocorrect="off" autocorrect="off"
autocomplete="off" autocomplete="off"
@ -349,4 +349,4 @@ export default {
} }
} }
} }
</script> </script>

4
src/modules/main_menu/components/md-page.vue
View file

@ -1,7 +1,7 @@
<template lang="html"> <template lang="html">
<div class="ffz--home tw-border-t tw-pd-y-1"> <div class="ffz--home tw-border-t tw-pd-y-1">
<div v-if="loading" class="tw-align-center tw-pd-1"> <div v-if="loading" class="tw-align-center tw-pd-1">
<h1 class="tw-mg-5 ffz-i-zreknarf loading" /> <h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
</div> </div>
<markdown v-else :source="t(`home.${key}`, md)" /> <markdown v-else :source="t(`home.${key}`, md)" />
</div> </div>
@ -33,4 +33,4 @@ export default {
} }
} }
} }
</script> </script>

8
src/modules/main_menu/components/menu-page.vue
View file

@ -46,7 +46,7 @@
</header> </header>
<section v-if="context.currentProfile.ephemeral && item.profile_warning !== false" class="tw-border-t tw-pd-t-1 tw-pd-b-2"> <section v-if="context.currentProfile.ephemeral && item.profile_warning !== false" class="tw-border-t tw-pd-t-1 tw-pd-b-2">
<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1"> <div class="tw-c-background-accent tw-c-text-overlay tw-pd-1">
<h3 class="ffz-i-attention"> <h3 class="ffz-i-attention ffz-font-size-3">
{{ t('setting.profiles.ephemeral', "This profile is ephemeral.") }} {{ t('setting.profiles.ephemeral', "This profile is ephemeral.") }}
</h3> </h3>
@ -63,7 +63,7 @@
</section> </section>
<section v-if="(! context.currentProfile.live || ! context.currentProfile.toggled) && item.profile_warning !== false" class="tw-border-t tw-pd-t-1 tw-pd-b-2"> <section v-if="(! context.currentProfile.live || ! context.currentProfile.toggled) && item.profile_warning !== false" class="tw-border-t tw-pd-t-1 tw-pd-b-2">
<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1"> <div class="tw-c-background-accent tw-c-text-overlay tw-pd-1">
<h3 class="ffz-i-attention"> <h3 class="ffz-i-attention ffz-font-size-3">
{{ t('setting.profiles.inactive', "This profile is not active.") }} {{ t('setting.profiles.inactive', "This profile is not active.") }}
</h3> </h3>
@ -83,7 +83,7 @@
</section> </section>
<section v-if="context.currentProfile.url && ! context.currentProfile.pause_updates && item.profile_warning !== false" class="tw-border-t tw-pd-t-1 tw-pd-b-2"> <section v-if="context.currentProfile.url && ! context.currentProfile.pause_updates && item.profile_warning !== false" class="tw-border-t tw-pd-t-1 tw-pd-b-2">
<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1"> <div class="tw-c-background-accent tw-c-text-overlay tw-pd-1">
<h3 class="ffz-i-attention"> <h3 class="ffz-i-attention ffz-font-size-3">
{{ t('setting.profiles.updates', 'This profile will update automatically.') }} {{ t('setting.profiles.updates', 'This profile will update automatically.') }}
</h3> </h3>
@ -96,7 +96,7 @@
</section> </section>
<section v-if="context.has_update" class="tw-border-t tw-pd-t-1 tw-pd-b-2"> <section v-if="context.has_update" class="tw-border-t tw-pd-t-1 tw-pd-b-2">
<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1"> <div class="tw-c-background-accent tw-c-text-overlay tw-pd-1">
<h3 class="ffz-i-arrows-cw"> <h3 class="ffz-i-arrows-cw ffz-font-size-3">
{{ t('setting.update', 'There is an update available.') }} {{ t('setting.update', 'There is an update available.') }}
</h3> </h3>

12
src/modules/main_menu/components/profile-editor.vue
View file

@ -2,7 +2,7 @@
<div class="ffz--profile-editor"> <div class="ffz--profile-editor">
<section v-if="isEphemeral" class="tw-border-t tw-pd-t-1 tw-pd-b-2"> <section v-if="isEphemeral" class="tw-border-t tw-pd-t-1 tw-pd-b-2">
<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1"> <div class="tw-c-background-accent tw-c-text-overlay tw-pd-1">
<h3 class="ffz-i-attention"> <h3 class="ffz-i-attention ffz-font-size-3">
{{ t('setting.profiles.ephemeral', "This profile is ephemeral.") }} {{ t('setting.profiles.ephemeral', "This profile is ephemeral.") }}
</h3> </h3>
@ -54,7 +54,7 @@
<div v-if="export_error" class="tw-c-background-accent-alt-2 tw-c-text-overlay tw-pd-1 tw-mg-b-1 tw-flex tw-align-items-start"> <div v-if="export_error" class="tw-c-background-accent-alt-2 tw-c-text-overlay tw-pd-1 tw-mg-b-1 tw-flex tw-align-items-start">
<section class="tw-flex-grow-1"> <section class="tw-flex-grow-1">
<h4 class="ffz-i-attention"> <h4 class="ffz-i-attention ffz-font-size-4">
{{ t('setting.backup-restore.error', 'There was an error processing this backup.') }} {{ t('setting.backup-restore.error', 'There was an error processing this backup.') }}
</h4> </h4>
<div v-if="export_error_message"> <div v-if="export_error_message">
@ -102,7 +102,7 @@
ref="name" ref="name"
:disabled="isEphemeral" :disabled="isEphemeral"
v-model="name" v-model="name"
class="tw-full-width tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input" class="tw-full-width tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
> >
</div> </div>
@ -116,7 +116,7 @@
ref="desc" ref="desc"
:disabled="isEphemeral" :disabled="isEphemeral"
v-model="desc" v-model="desc"
class="tw-full-width tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input" class="tw-full-width tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
/> />
</div> </div>
@ -161,7 +161,7 @@
id="ffz:editor:url" id="ffz:editor:url"
readonly readonly
:value="url" :value="url"
class="tw-full-width tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input" class="tw-full-width tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
> >
</div> </div>
@ -412,4 +412,4 @@ export default {
} }
</script> </script>

18
src/modules/main_menu/components/profile-manager.vue
View file

@ -2,7 +2,7 @@
<div class="ffz--widget ffz--profile-manager tw-border-t tw-pd-y-1"> <div class="ffz--widget ffz--profile-manager tw-border-t tw-pd-y-1">
<section v-if="context.exclusive" class="tw-pd-b-2"> <section v-if="context.exclusive" class="tw-pd-b-2">
<div class="tw-c-background-accent tw-c-text-overlay tw-pd-1"> <div class="tw-c-background-accent tw-c-text-overlay tw-pd-1">
<h3 class="ffz-i-info"> <h3 class="ffz-i-info ffz-font-size-3">
{{ t('setting.context-difference', 'Your Profiles might not match.') }} {{ t('setting.context-difference', 'Your Profiles might not match.') }}
</h3> </h3>
@ -78,7 +78,7 @@
<input <input
ref="paste" ref="paste"
:placeholder="t('setting.paste-url.url', '[url]')" :placeholder="t('setting.paste-url.url', '[url]')"
class="tw-flex-grow-1 tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input" class="tw-flex-grow-1 tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input"
@keydown.enter="doImportURL" @keydown.enter="doImportURL"
> >
<button <button
@ -120,7 +120,7 @@
<div v-if="import_error" class="tw-c-background-accent-alt-2 tw-c-text-overlay tw-pd-1 tw-mg-b-1 tw-flex tw-align-items-start"> <div v-if="import_error" class="tw-c-background-accent-alt-2 tw-c-text-overlay tw-pd-1 tw-mg-b-1 tw-flex tw-align-items-start">
<section class="tw-flex-grow-1"> <section class="tw-flex-grow-1">
<h4 class="ffz-i-attention"> <h4 class="ffz-i-attention ffz-font-size-4">
{{ t('setting.backup-restore.error', 'There was an error processing this backup.') }} {{ t('setting.backup-restore.error', 'There was an error processing this backup.') }}
</h4> </h4>
<div v-if="import_error_message"> <div v-if="import_error_message">
@ -156,7 +156,7 @@
<div v-if="import_profiles" class="tw-c-background-accent-alt-2 tw-c-text-overlay tw-pd-1 tw-mg-b-1 tw-flex tw-align-items-start"> <div v-if="import_profiles" class="tw-c-background-accent-alt-2 tw-c-text-overlay tw-pd-1 tw-mg-b-1 tw-flex tw-align-items-start">
<section class="tw-flex-grow-1"> <section class="tw-flex-grow-1">
<h4 class="ffz-i-upload"> <h4 class="ffz-i-upload ffz-font-size-4">
{{ t('setting.backup-restore.pick-profile', 'Please select a profile to import.') }} {{ t('setting.backup-restore.pick-profile', 'Please select a profile to import.') }}
</h4> </h4>
@ -187,7 +187,7 @@
<div v-if="import_profile" class="tw-c-background-accent-alt-2 tw-c-text-overlay tw-pd-1 tw-mg-b-1 tw-flex tw-align-items-start"> <div v-if="import_profile" class="tw-c-background-accent-alt-2 tw-c-text-overlay tw-pd-1 tw-mg-b-1 tw-flex tw-align-items-start">
<section class="tw-flex-grow-1"> <section class="tw-flex-grow-1">
<h4 class="ffz-i-help"> <h4 class="ffz-i-help ffz-font-size-4">
{{ t('setting.backup-restore.confirm-updates', 'The profile you are importing has an automatic update URL. Do you want the profile to keep itself up to date?') }} {{ t('setting.backup-restore.confirm-updates', 'The profile you are importing has an automatic update URL. Do you want the profile to keep itself up to date?') }}
</h4> </h4>
@ -237,7 +237,7 @@
<div <div
v-if="p.ephemeral" v-if="p.ephemeral"
class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-mg-r-1 tw-relative ffz-il-tooltip__container tw-font-size-4" class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-mg-r-1 tw-relative ffz-il-tooltip__container ffz-font-size-4"
> >
<span class="ffz-i-user-secret" /> <span class="ffz-i-user-secret" />
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left"> <div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
@ -247,7 +247,7 @@
<div <div
v-if="p.url" v-if="p.url"
class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-mg-r-1 tw-relative ffz-il-tooltip__container tw-font-size-4" class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-mg-r-1 tw-relative ffz-il-tooltip__container ffz-font-size-4"
> >
<span :class="`ffz-i-download-cloud${p.pause_updates ? ' ffz-unmatched-item' : ''}`" /> <span :class="`ffz-i-download-cloud${p.pause_updates ? ' ffz-unmatched-item' : ''}`" />
<div v-if="! p.pause_updates" class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left"> <div v-if="! p.pause_updates" class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
@ -259,7 +259,7 @@
</div> </div>
<div class="tw-flex-grow-1"> <div class="tw-flex-grow-1">
<h4>{{ p.i18n_key ? t(p.i18n_key, p.title, p) : p.title }}</h4> <h4 class="ffz-font-size-4">{{ p.i18n_key ? t(p.i18n_key, p.title, p) : p.title }}</h4>
<div v-if="p.description" class="description"> <div v-if="p.description" class="description">
{{ p.desc_i18n_key ? t(p.desc_i18n_key, p.description, p) : p.description }} {{ p.desc_i18n_key ? t(p.desc_i18n_key, p.description, p) : p.description }}
</div> </div>
@ -574,4 +574,4 @@ export default {
} }
} }
</script> </script>

6
src/modules/main_menu/components/profile-selector.vue
View file

@ -4,7 +4,7 @@
ref="button" ref="button"
:class="{active: opened}" :class="{active: opened}"
tabindex="0" tabindex="0"
class="tw-flex tw-align-items-center tw-border-radius-medium tw-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05" class="tw-flex tw-align-items-center tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05"
@keyup.up.stop.prevent="focusShow" @keyup.up.stop.prevent="focusShow"
@keyup.left.stop.prevent="focusShow" @keyup.left.stop.prevent="focusShow"
@keyup.down.stop.prevent="focusShow" @keyup.down.stop.prevent="focusShow"
@ -86,7 +86,7 @@
</div> </div>
</div> </div>
<h4>{{ p.i18n_key ? t(p.i18n_key, p.title, p) : p.title }}</h4> <h4 class="ffz-font-size-4">{{ p.i18n_key ? t(p.i18n_key, p.title, p) : p.title }}</h4>
<div v-if="p.description" class="description"> <div v-if="p.description" class="description">
{{ p.desc_i18n_key ? t(p.desc_i18n_key, p.description, p) : p.description }} {{ p.desc_i18n_key ? t(p.desc_i18n_key, p.description, p) : p.description }}
</div> </div>
@ -268,4 +268,4 @@ export default {
} }
} }
</script> </script>

6
src/modules/main_menu/components/reason-editor.vue
View file

@ -2,7 +2,7 @@
<div class="ffz--reason"> <div class="ffz--reason">
<div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row tw-full-width"> <div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row tw-full-width">
<div class="tw-flex-grow-1 tw-mg-r-05"> <div class="tw-flex-grow-1 tw-mg-r-05">
<h4 v-if="! editing" class="ffz-monospace"> <h4 v-if="! editing" class="ffz-monospace ffz-font-size-4">
{{ title }} {{ title }}
</h4> </h4>
<input <input
@ -10,7 +10,7 @@
v-model="edit_data.text" v-model="edit_data.text"
:placeholder="adding ? t('setting.reasons.add-placeholder', 'Add a new reason') : edit_data.text" :placeholder="adding ? t('setting.reasons.add-placeholder', 'Add a new reason') : edit_data.text"
type="text" type="text"
class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05" class="tw-block tw-full-width tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05"
autocapitalize="off" autocapitalize="off"
autocorrect="off" autocorrect="off"
> >
@ -141,4 +141,4 @@ export default {
} }
} }
</script> </script>

10
src/modules/main_menu/components/term-editor.vue
View file

@ -14,7 +14,7 @@
</div> </div>
</div> </div>
<div class="tw-flex-grow-1"> <div class="tw-flex-grow-1">
<h4 v-if="! editing" class="ffz-monospace"> <h4 v-if="! editing" class="ffz-monospace ffz-font-size-4">
<pre>{{ term.v }}</pre> <pre>{{ term.v }}</pre>
</h4> </h4>
<input <input
@ -22,7 +22,7 @@
v-model="edit_data.v" v-model="edit_data.v"
:placeholder="adding ? t('setting.terms.add-placeholder', 'Add a new term') : edit_data.v" :placeholder="adding ? t('setting.terms.add-placeholder', 'Add a new term') : edit_data.v"
type="text" type="text"
class="tw-block tw-full-width tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05" class="tw-block tw-full-width tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05"
autocapitalize="off" autocapitalize="off"
autocorrect="off" autocorrect="off"
> >
@ -32,7 +32,7 @@
<select <select
v-else v-else
v-model="edit_data.t" v-model="edit_data.t"
class="tw-block tw-border-radius-medium tw-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 ffz-min-width-unset" class="tw-block tw-border-radius-medium ffz-font-size-6 ffz-select tw-pd-l-1 tw-pd-r-3 tw-pd-y-05 ffz-min-width-unset"
> >
<option value="text"> <option value="text">
{{ t('setting.terms.type.text', 'Text') }} {{ t('setting.terms.type.text', 'Text') }}
@ -76,7 +76,7 @@
v-model.number="edit_data.p" v-model.number="edit_data.p"
type="number" type="number"
step="1" step="1"
class="tw-block tw-border-radius-medium tw-font-size-6 ffz-min-width-unset ffz-input tw-pd-x-1 tw-pd-y-05" class="tw-block tw-border-radius-medium ffz-font-size-6 ffz-min-width-unset ffz-input tw-pd-x-1 tw-pd-y-05"
style="width: 5rem" style="width: 5rem"
> >
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right"> <div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
@ -404,4 +404,4 @@ export default {
} }
} }
</script> </script>

2
src/modules/main_menu/components/tooltip-tos.vue
View file

@ -1,6 +1,6 @@
<template lang="html"> <template lang="html">
<section class="ffz--widget ffz--service-tos"> <section class="ffz--widget ffz--service-tos">
<h4>{{ key }}</h4> <h4 class="ffz-font-size-4">{{ key }}</h4>
<markdown class="tw-mg-b-05" :source="linkText" /> <markdown class="tw-mg-b-05" :source="linkText" />
<div v-if="hasAccepted"> <div v-if="hasAccepted">
{{ t('tooltip.has-accepted', 'You have accepted the Terms of Service.') }} {{ t('tooltip.has-accepted', 'You have accepted the Terms of Service.') }}

8
src/modules/translation_ui/components/translation-ui.vue
View file

@ -4,7 +4,7 @@
class="ffz-dialog tw-elevation-3 tw-c-background-alt tw-c-text-base tw-border tw-flex tw-flex-nowrap tw-flex-column" class="ffz-dialog tw-elevation-3 tw-c-background-alt tw-c-text-base tw-border tw-flex tw-flex-nowrap tw-flex-column"
> >
<header class="tw-c-background-base tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="resize"> <header class="tw-c-background-base tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="resize">
<h3 class="ffz-i-zreknarf ffz-i-pd-1">{{ t('i18n.ui.title', 'Translation Tester') }}</h3> <h3 class="ffz-i-zreknarf ffz-i-pd-1 ffz-font-size-3">{{ t('i18n.ui.title', 'Translation Tester') }}</h3>
<div class="tw-flex-grow-1 tw-pd-x-2"> <div class="tw-flex-grow-1 tw-pd-x-2">
<div class="tw-search-input"> <div class="tw-search-input">
<label for="ffz-main-menu.search" class="tw-hide-accessible">{{ t('i18n.ui.search', 'Search Strings') }}</label> <label for="ffz-main-menu.search" class="tw-hide-accessible">{{ t('i18n.ui.search', 'Search Strings') }}</label>
@ -17,7 +17,7 @@
v-model="query" v-model="query"
:placeholder="t('i18n.ui.search', 'Search Strings')" :placeholder="t('i18n.ui.search', 'Search Strings')"
type="search" type="search"
class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-l-3 tw-pd-r-1 tw-pd-y-05" class="tw-block tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-input tw-pd-l-3 tw-pd-r-1 tw-pd-y-05"
autocapitalize="off" autocapitalize="off"
autocorrect="off" autocorrect="off"
autocomplete="off" autocomplete="off"
@ -99,7 +99,7 @@
ref="pager" ref="pager"
:value="page" :value="page"
:max="pages" :max="pages"
class="tw-block tw-border-radius-medium tw-font-size-6 ffz-input tw-pd-x-1 tw-pd-y-05" class="tw-block tw-border-radius-medium ffz-font-size-6 ffz-input tw-pd-x-1 tw-pd-y-05"
type="number" type="number"
min="1" min="1"
@keydown.enter="closePage" @keydown.enter="closePage"
@ -549,4 +549,4 @@ export default {
}, },
} }
} }
</script> </script>

4
src/modules/viewer_cards/components/loading-tab.vue
View file

@ -1,5 +1,5 @@
<template functional> <template functional>
<div class="tw-align-center tw-pd-1"> <div class="tw-align-center tw-pd-1">
<h1 class="tw-mg-5 ffz-i-zreknarf loading" /> <h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
</div> </div>
</template> </template>

2
src/sites/clips/line.jsx
View file

@ -107,7 +107,7 @@ export default class Line extends Module {
user_class = user_class.join(' '); user_class = user_class.join(' ');
const user_props = { const user_props = {
className: `clip-chat__message-author tw-font-size-5 ffz-link notranslate tw-strong${override_name ? ' ffz--name-override tw-relative ffz-il-tooltip__container' : ''} ${user_class ?? ''}`, className: `clip-chat__message-author ffz-font-size-5 ffz-link notranslate tw-strong${override_name ? ' ffz--name-override tw-relative ffz-il-tooltip__container' : ''} ${user_class ?? ''}`,
href: `https://www.twitch.tv/${user.login}/clips`, href: `https://www.twitch.tv/${user.login}/clips`,
style: { color } style: { color }
}; };

4
src/sites/player/metadata.jsx
View file

@ -120,7 +120,7 @@ export default class Metadata extends Module {
</div> </div>
<div class="tw-flex tw-align-items-center"> <div class="tw-flex tw-align-items-center">
<input <input
class="tw-border-radius-medium tw-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input tw-full-width" class="tw-border-radius-medium ffz-font-size-6 tw-pd-x-1 tw-pd-y-05 ffz-input tw-full-width"
type="text" type="text"
value={url} value={url}
onFocus={e => e.target.select()} onFocus={e => e.target.select()}
@ -730,4 +730,4 @@ export default class Metadata extends Module {
return destroy(); return destroy();
} }
} }
} }

2
src/sites/twitch-twilight/modules/channel.jsx
View file

@ -373,7 +373,7 @@ export default class Channel extends Module {
const login = el._ffz_link_login = props.channelLogin; const login = el._ffz_link_login = props.channelLogin;
if ( login ) { if ( login ) {
const make_link = (link, text) => { const make_link = (link, text) => {
const a = <a href={link} class="tw-c-text-alt-2 tw-interactive tw-pd-x-1 tw-font-size-5">{text}</a>; const a = <a href={link} class="tw-c-text-alt-2 tw-interactive tw-pd-x-1 ffz-font-size-5">{text}</a>;
a.addEventListener('click', event => { a.addEventListener('click', event => {
if ( event.ctrlKey || event.shiftKey || event.altKey ) if ( event.ctrlKey || event.shiftKey || event.altKey )
return; return;

16
src/sites/twitch-twilight/modules/chat/emote_menu.jsx
View file

@ -2680,7 +2680,7 @@ export default class EmoteMenu extends Module {
renderLoading() { // eslint-disable-line class-methods-use-this renderLoading() { // eslint-disable-line class-methods-use-this
return (<div class="tw-align-center tw-pd-1"> return (<div class="tw-align-center tw-pd-1">
<h1 class="tw-mg-5 ffz-i-zreknarf loading" /> <h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
{t.i18n.t('emote-menu.loading', 'Loading...')} {t.i18n.t('emote-menu.loading', 'Loading...')}
</div>) </div>)
} }
@ -2834,7 +2834,7 @@ export default class EmoteMenu extends Module {
<div class="tw-flex"> <div class="tw-flex">
<input <input
type="text" type="text"
class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05" class="tw-block tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-input tw-pd-x-1 tw-pd-y-05"
placeholder={ placeholder={
is_emoji ? is_emoji ?
t.i18n.t('emote-menu.search-emoji', 'Search for Emoji') : t.i18n.t('emote-menu.search-emoji', 'Search for Emoji') :
@ -2883,7 +2883,7 @@ export default class EmoteMenu extends Module {
data-title={t.i18n.t('emote-menu.favorites', 'Favorites')} data-title={t.i18n.t('emote-menu.favorites', 'Favorites')}
onClick={this.clickTab} onClick={this.clickTab}
> >
<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4"> <div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 ffz-font-size-4">
<figure class="ffz-i-star" /> <figure class="ffz-i-star" />
</div> </div>
</button> </button>
@ -2897,7 +2897,7 @@ export default class EmoteMenu extends Module {
data-title={t.i18n.t('emote-menu.channel', 'Channel')} data-title={t.i18n.t('emote-menu.channel', 'Channel')}
onClick={this.clickTab} onClick={this.clickTab}
> >
<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4"> <div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 ffz-font-size-4">
<figure class="ffz-i-camera" /> <figure class="ffz-i-camera" />
</div> </div>
</button> </button>
@ -2912,7 +2912,7 @@ export default class EmoteMenu extends Module {
onClick={this.clickTab} onClick={this.clickTab}
> >
{this.state.hasNewEffects && (<div class="ffz-new-indicator" />)} {this.state.hasNewEffects && (<div class="ffz-new-indicator" />)}
<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4"> <div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 ffz-font-size-4">
<figure class="ffz-i-fx" /> <figure class="ffz-i-fx" />
</div> </div>
</button> </button>
@ -2926,7 +2926,7 @@ export default class EmoteMenu extends Module {
data-title={t.i18n.t('emote-menu.my-emotes', 'My Emotes')} data-title={t.i18n.t('emote-menu.my-emotes', 'My Emotes')}
onClick={this.clickTab} onClick={this.clickTab}
> >
<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4"> <div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 ffz-font-size-4">
<figure class="ffz-i-channels" /> <figure class="ffz-i-channels" />
</div> </div>
</button> </button>
@ -2940,7 +2940,7 @@ export default class EmoteMenu extends Module {
data-title={t.i18n.t('emote-menu.emoji', 'Emoji')} data-title={t.i18n.t('emote-menu.emoji', 'Emoji')}
onClick={this.clickTab} onClick={this.clickTab}
> >
<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4"> <div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 ffz-font-size-4">
<figure class="ffz-i-smile" /> <figure class="ffz-i-smile" />
</div> </div>
</button> </button>
@ -2953,7 +2953,7 @@ export default class EmoteMenu extends Module {
data-title={t.i18n.t('emote-menu.settings', 'Open Settings')} data-title={t.i18n.t('emote-menu.settings', 'Open Settings')}
onClick={this.clickSettings} onClick={this.clickSettings}
> >
<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4"> <div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 ffz-font-size-4">
<figure class="ffz-i-cog" /> <figure class="ffz-i-cog" />
</div> </div>
</button> </button>

2
src/sites/twitch-twilight/modules/chat/input.jsx
View file

@ -877,7 +877,7 @@ export default class Input extends Module {
</div> </div>
{args} {args}
</div> </div>
<p class="tw-c-text-alt-2 tw-font-size-7">{ cmd.description }</p> <p class="tw-c-text-alt-2 ffz-font-size-7">{ cmd.description }</p>
</div>); </div>);
} }
} }

4
src/sites/twitch-twilight/modules/chat/line.js
View file

@ -452,7 +452,7 @@ export default class ChatLine extends Module {
if ( mystery ) if ( mystery )
target.push(e('span', { target.push(e('span', {
className: `tw-pd-l-05 tw-font-size-4 ffz-i-${expanded ? 'down' : 'right'}-dir` className: `tw-pd-l-05 ffz-font-size-4 ffz-i-${expanded ? 'down' : 'right'}-dir`
})); }));
const out = [ const out = [
@ -1170,7 +1170,7 @@ other {# messages were deleted by a moderator.}
username, username,
want_source_tip want_source_tip
? e('div', { ? e('div', {
className: 'tw-font-size-8 tw-mg-t-05' className: 'ffz-font-size-8 tw-mg-t-05'
}, t.i18n.t('chat.sent-from-source', 'Sent from {source}', {source: source.displayName ?? source.login})) }, t.i18n.t('chat.sent-from-source', 'Sent from {source}', {source: source.displayName ?? source.login}))
: null : null
] ]

4
src/sites/twitch-twilight/modules/chat/settings_menu.jsx
View file

@ -158,7 +158,7 @@ export default class SettingsMenu extends Module {
return (<div class="ffz-identity"> return (<div class="ffz-identity">
<div class="tw-mg-y-05 tw-pd-x-05"> <div class="tw-mg-y-05 tw-pd-x-05">
<p class="tw-c-text-alt-2 tw-font-size-6 tw-strong tw-upcase"> <p class="tw-c-text-alt-2 ffz-font-size-6 tw-strong tw-upcase">
{ t.i18n.t('chat.identity-menu', 'Chat Identity') } { t.i18n.t('chat.identity-menu', 'Chat Identity') }
</p> </p>
</div> </div>
@ -339,7 +339,7 @@ export default class SettingsMenu extends Module {
const out = (<div class="ffz--badge-selector tw-border-b tw-mg-b-1"> const out = (<div class="ffz--badge-selector tw-border-b tw-mg-b-1">
<div class="tw-mg-y-05 tw-pd-x-05"> <div class="tw-mg-y-05 tw-pd-x-05">
<p class="tw-c-text-alt-2 tw-font-size-6 tw-strong tw-upcase"> <p class="tw-c-text-alt-2 ffz-font-size-6 tw-strong tw-upcase">
{ this.i18n.t('chat.ffz-badge.title', 'FrankerFaceZ Badge') } { this.i18n.t('chat.ffz-badge.title', 'FrankerFaceZ Badge') }
</p> </p>
</div> </div>

4
src/sites/twitch-twilight/modules/featured-follow.vue
View file

@ -1,7 +1,7 @@
<template lang="html"> <template lang="html">
<div class="ffz-featured-follow tw-c-background-base"> <div class="ffz-featured-follow tw-c-background-base">
<header class="tw-full-width tw-align-items-center tw-flex tw-flex-nowrap"> <header class="tw-full-width tw-align-items-center tw-flex tw-flex-nowrap">
<h4>{{ t('metadata.featured-follow.title', 'Featured Channels') }}</h4> <h4 class="ffz-font-size-4">{{ t('metadata.featured-follow.title', 'Featured Channels') }}</h4>
<div class="tw-flex-grow-1 tw-pd-x-2" /> <div class="tw-flex-grow-1 tw-pd-x-2" />
<button <button
@ -26,7 +26,7 @@
<div class="ffz-channel-avatar"> <div class="ffz-channel-avatar">
<a :href="'/' + user.login" :title="user.login" @click.prevent="route(user.login)"><img :src="user.avatar"></a> <a :href="'/' + user.login" :title="user.login" @click.prevent="route(user.login)"><img :src="user.avatar"></a>
</div> </div>
<a :href="'/' + user.login" :title="user.login" @click.prevent="route(user.login)"><p class="tw-ellipsis tw-flex-grow-1 tw-mg-l-1 tw-font-size-5">{{ user.displayName }}</p></a> <a :href="'/' + user.login" :title="user.login" @click.prevent="route(user.login)"><p class="tw-ellipsis tw-flex-grow-1 tw-mg-l-1 ffz-font-size-5">{{ user.displayName }}</p></a>
<div class="tw-flex-grow-1 tw-pd-x-2" /> <div class="tw-flex-grow-1 tw-pd-x-2" />
<div v-if="user.error"> <div v-if="user.error">

4
src/sites/twitch-twilight/modules/host_button/host-options.vue
View file

@ -1,7 +1,7 @@
<template lang="html"> <template lang="html">
<div class="ffz-auto-host-options tw-c-background-base"> <div class="ffz-auto-host-options tw-c-background-base">
<header class="tw-full-width tw-align-items-center tw-flex tw-flex-nowrap"> <header class="tw-full-width tw-align-items-center tw-flex tw-flex-nowrap">
<h4>{{ t('metadata.host.title', 'Auto Host Management') }}</h4> <h4 class="ffz-font-size-4">{{ t('metadata.host.title', 'Auto Host Management') }}</h4>
</header> </header>
<div <div
v-show="activeTab === 'auto-host'" v-show="activeTab === 'auto-host'"
@ -32,7 +32,7 @@
<div class="ffz-channel-avatar"> <div class="ffz-channel-avatar">
<img :src="host.profileImageURL" :alt="host.displayName + '(' + host.login + ')'"> <img :src="host.profileImageURL" :alt="host.displayName + '(' + host.login + ')'">
</div> </div>
<p class="tw-ellipsis tw-flex-grow-1 tw-mg-l-1 tw-font-size-5"> <p class="tw-ellipsis tw-flex-grow-1 tw-mg-l-1 tffz-font-size-5">
{{ host.login }} {{ host.login }}
</p> </p>
<div class="tw-flex-grow-1 tw-pd-x-2" /> <div class="tw-flex-grow-1 tw-pd-x-2" />

8
src/sites/twitch-twilight/modules/menu_button.jsx
View file

@ -439,12 +439,12 @@ export default class MenuButton extends Module {
<div class="tw-flex tw-align-items-start"> <div class="tw-flex tw-align-items-start">
{data.icon && ( {data.icon && (
typeof data.icon === 'string' ? typeof data.icon === 'string' ?
<figure class={`tw-font-size-3 tw-pd-r-1 ${data.icon}`} /> : <figure class={`ffz-font-size-3 tw-pd-r-1 ${data.icon}`} /> :
data.icon data.icon
)} )}
{ data.render ? data.render.call(this, data) : null } { data.render ? data.render.call(this, data) : null }
{ (data.title || data.text) ? (<div class="tw-flex-grow-1"> { (data.title || data.text) ? (<div class="tw-flex-grow-1">
{ data.title ? (<header class="tw-semibold tw-font-size-3 tw-pd-b-05"> { data.title ? (<header class="tw-semibold ffz-font-size-3 tw-pd-b-05">
{ data.title_i18n ? this.i18n.tList(data.title_i18n, data.title, data) : data.title} { data.title_i18n ? this.i18n.tList(data.title_i18n, data.title, data) : data.title}
</header>) : null } </header>) : null }
{ data.text ? (<span class={`${data.lines ? 'ffz--line-clamp' : ''}`} style={{'--ffz-lines': data.lines}}> { data.text ? (<span class={`${data.lines ? 'ffz--line-clamp' : ''}`} style={{'--ffz-lines': data.lines}}>
@ -724,7 +724,7 @@ export default class MenuButton extends Module {
profiles.push(<div class="tw-relative tw-border-b tw-pd-y-05 tw-pd-x-1 tw-flex"> profiles.push(<div class="tw-relative tw-border-b tw-pd-y-05 tw-pd-x-1 tw-flex">
{toggle} {toggle}
<div> <div>
<h4>{ profile.i18n_key ? this.i18n.t(profile.i18n_key, profile.name, profile) : profile.name }{profile.ephemeral && (<div <h4 class="ffz-font-size-4">{ profile.i18n_key ? this.i18n.t(profile.i18n_key, profile.name, profile) : profile.name }{profile.ephemeral && (<div
class="tw-inline tw-mg-l-05 ffz-il-tooltip__container ffz--profile-row__icon ffz-i-user-secret tw-relative" class="tw-inline tw-mg-l-05 ffz-il-tooltip__container ffz--profile-row__icon ffz-i-user-secret tw-relative"
> >
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-center"> <div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-center">
@ -759,7 +759,7 @@ export default class MenuButton extends Module {
</div> </div>
</div> </div>
<div class="tw-align-items-center tw-flex tw-flex-column tw-flex-grow-1 tw-justify-content-center"> <div class="tw-align-items-center tw-flex tw-flex-column tw-flex-grow-1 tw-justify-content-center">
<h5 class="tw-align-center tw-c-text-alt tw-semibold"> <h5 class="tw-align-center tw-c-text-alt tw-semibold ffz-font-size-5">
{ this.i18n.t('site.menu_button.profiles', 'Profiles') } { this.i18n.t('site.menu_button.profiles', 'Profiles') }
</h5> </h5>
</div> </div>

4
src/sites/twitch-twilight/modules/video_chat/index.jsx
View file

@ -357,7 +357,7 @@ export default class VideoChatHook extends Module {
<button class="tw-button tw-button--text" data-test-selector="parent-reply-button" onClick={msg._reply_handler}> <button class="tw-button tw-button--text" data-test-selector="parent-reply-button" onClick={msg._reply_handler}>
<span class="tw-button__text tw-pd-0">{ t.i18n.t('video-chat.reply', 'Reply') }</span> <span class="tw-button__text tw-pd-0">{ t.i18n.t('video-chat.reply', 'Reply') }</span>
</button> </button>
<span class="tw-c-text-alt-2 tw-font-size-7 tw-mg-l-05 tw-relative ffz-il-tooltip__container"> <span class="tw-c-text-alt-2 ffz-font-size-7 tw-mg-l-05 tw-relative ffz-il-tooltip__container">
• { t.i18n.t('video-chat.time', '{time,humantime} ago', { • { t.i18n.t('video-chat.time', '{time,humantime} ago', {
time: msg.timestamp time: msg.timestamp
}) } }) }
@ -397,7 +397,7 @@ export default class VideoChatHook extends Module {
<div class="tw-inline-flex tw-relative ffz-il-tooltip__container"> <div class="tw-inline-flex tw-relative ffz-il-tooltip__container">
<button class="tw-block tw-full-width ffz-interactable ffz-interactable--hover-enabled ffz-interactable--default tw-interactive" onClick={this.onTimestampClickHandler}> <button class="tw-block tw-full-width ffz-interactable ffz-interactable--hover-enabled ffz-interactable--default tw-interactive" onClick={this.onTimestampClickHandler}>
<div class="tw-pd-x-05"> <div class="tw-pd-x-05">
<p class="tw-font-size-7">{print_duration(context.comment.contentOffset)}</p> <p class="ffz-font-size-7">{print_duration(context.comment.contentOffset)}</p>
</div> </div>
</button> </button>
<div class="ffz-il-tooltip ffz-il-tooltip--align-left ffz-il-tooltip--up" role="tooltip"> <div class="ffz-il-tooltip ffz-il-tooltip--align-left ffz-il-tooltip--up" role="tooltip">

6
src/std-components/autocomplete.vue
View file

@ -12,7 +12,7 @@
:placeholder="placeholder" :placeholder="placeholder"
:class="[hasIcon ? 'tw-pd-l-3' : 'tw-pd-l-1']" :class="[hasIcon ? 'tw-pd-l-3' : 'tw-pd-l-1']"
type="search" type="search"
class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width ffz-input tw-pd-r-1 tw-pd-y-05" class="tw-block tw-border-radius-medium ffz-font-size-6 tw-full-width ffz-input tw-pd-r-1 tw-pd-y-05"
autocapitalize="off" autocapitalize="off"
autocorrect="off" autocorrect="off"
autocomplete="off" autocomplete="off"
@ -39,7 +39,7 @@
{{ t('autocomplete.empty', 'There are no results.') }} {{ t('autocomplete.empty', 'There are no results.') }}
</div> </div>
<div v-else-if="! hasItems && loading" class="tw-align-center tw-c-text-alt-2 tw-pd-05"> <div v-else-if="! hasItems && loading" class="tw-align-center tw-c-text-alt-2 tw-pd-05">
<h3 class="ffz-i-zreknarf loading" /> <h3 class="ffz-i-zreknarf loading ffz-font-size-3" />
</div> </div>
<button <button
v-for="(item, idx) of filteredItems" v-for="(item, idx) of filteredItems"
@ -424,4 +424,4 @@ export default {
} }
} }
</script> </script>

2
src/utilities/rich_tokens.js
View file

@ -1437,7 +1437,7 @@ TOKEN_TYPES.style = function(token, createElement, ctx) {
if ( token.size ) { if ( token.size ) {
if ( typeof token.size === 'string' ) { if ( typeof token.size === 'string' ) {
if ( VALID_SIZES.includes(token.size) ) if ( VALID_SIZES.includes(token.size) )
classes.push(`tw-font-size-${token.size}`); classes.push(`ffz-font-size-${token.size}`);
else else
style.fontSize = token.size; style.fontSize = token.size;
} else } else