oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-18 03: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",
"author": "Dan Salvato LLC",
"version": "4.77.8",
"version": "4.77.9",
"description": "FrankerFaceZ is a Twitch enhancement suite.",
"private": true,
"license": "Apache-2.0",

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

@ -1935,7 +1935,8 @@ export default class Chat extends Module {
is_action,
ffz_emotes: emotes,
timestamp: msg.sentAt && msg.sentAt.getTime(),
deleted: false
deleted: false,
toJSON: () => null
};
out.user.color = out.user.chatColor;
@ -1982,7 +1983,7 @@ export default class Chat extends Module {
if ( ! reply )
return null;
return [
const out = [
{
type: 'reply',
text: reply.parentDisplayName,
@ -1996,6 +1997,9 @@ export default class Chat extends Module {
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}
{url_notice ? <div class="tw-mg-t-05 tw-border-t tw-pd-t-05 tw-align-center">
{url_notice}
<div class=" tw-font-size-8">
<div class=" ffz-font-size-8">
{this.i18n.t('tooltip.shift-detail', '(Shift for Details)')}
</div>
</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-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">
<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">
<img
v-if="emote.src"
@ -23,7 +23,7 @@
</div>
<div class="tw-align-left tw-flex-grow-1 tw-ellipsis tw-mg-l-1 tw-mg-y-05 viewer-card__display-name">
<h4
class="tw-inline tw-ellipsis"
class="tw-inline tw-ellipsis ffz-font-size-4"
:class="{'tw-italic': hasOriginalName}"
:title="emote ? emote.name : raw_emote.name"
>
@ -31,18 +31,18 @@
</h4>
<P
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...') }}
</P>
<p
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"
>
{{ emote.source_i18n ? t(emote.source_i18n, emote.source) : emote.source }}
</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
phrase="emote.original-name"
default="Name: {name}"
@ -52,7 +52,7 @@
</template>
</t-list>
</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
phrase="emote-card.owner"
default="Owner: {owner}"
@ -68,7 +68,7 @@
</template>
</t-list>
</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
phrase="emote-card.artist"
default="Artist: {artist}"

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

@ -9,7 +9,7 @@
@click="toggle"
>
<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>
<figure
@ -24,7 +24,7 @@
classes="ffz-mh-30"
>
<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 v-else-if="error" class="tw-align-center tw-pd-1">
<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"
>
<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>
<figure
@ -48,15 +48,15 @@
</figure>
</div>
<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
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"
>
{{ mod.source_i18n ? t(mod.source_i18n, mod.source) : mod.source }}
</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
phrase="emote-card.owner"
default="Owner: {owner}"
@ -72,7 +72,7 @@
</template>
</t-list>
</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
phrase="emote-card.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">
<template v-if="loading">
<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>
</template>
<template v-else-if="errorNoUser">
@ -54,7 +54,7 @@
<textarea
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.')"
/>
@ -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">
<template v-if="! editing">
<h4>{{ title }}</h4>
<h4 class="ffz-font-size-4">{{ title }}</h4>
<div class="description">
{{ description }}
</div>
@ -19,13 +19,13 @@
ref="json"
v-model="json"
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()"
/>
</template>
<template v-else>
<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">
<label for="tooltip">
@ -34,7 +34,7 @@
<input
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>
@ -47,7 +47,7 @@
id="renderer_type"
ref="renderer_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
v-for="(r, key) in data.renderers"
@ -88,7 +88,7 @@
</section>
<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">
<label for="vis_mod">
@ -98,7 +98,7 @@
<select
id="vis_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>
{{ t('setting.unset', 'Unset') }}
@ -120,7 +120,7 @@
<select
id="vis_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>
{{ t('setting.unset', 'Unset') }}
@ -142,7 +142,7 @@
<select
id="vis_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>
{{ t('setting.unset', 'Unset') }}
@ -164,7 +164,7 @@
<select
id="vis_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>
{{ t('setting.unset', 'Unset') }}
@ -186,7 +186,7 @@
<select
id="vis_emote"
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>
{{ t('setting.unset', 'Unset') }}
@ -208,7 +208,7 @@
<select
id="vis_slow"
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>
{{ t('setting.unset', 'Unset') }}
@ -230,7 +230,7 @@
<select
id="vis_subs"
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>
{{ t('setting.unset', 'Unset') }}
@ -252,7 +252,7 @@
<select
id="vis_subs"
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>
{{ t('setting.unset', 'Unset') }}
@ -274,7 +274,7 @@
<select
id="vis_r9k"
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>
{{ t('setting.unset', 'Unset') }}
@ -380,7 +380,7 @@
</section>
<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">
<label for="action_type">
@ -390,7 +390,7 @@
<select
id="action_type"
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
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">
<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">
<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.') }}
</h4>
@ -34,7 +34,7 @@
</div>
<select
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">
{{ t('addon.sort-name', 'Sort By: Name') }}
@ -49,7 +49,7 @@
</div>
<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 v-else>
<addon
@ -103,7 +103,7 @@
<input
ref="unlisted"
: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"
>
<button

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

@ -28,11 +28,11 @@
<div class="tw-flex-grow-1">
<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 }}
<span
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 }})
</span>

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

@ -18,7 +18,7 @@
<input
ref="url_box"
: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"
readonly
@focusin="selectURL"
@ -38,9 +38,9 @@
</button>
</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">
<h1 class="tw-mg-5 ffz-i-zreknarf loading" />
<h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
</div>
<code v-else>{{ text }}</code>
</div>

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

@ -31,7 +31,7 @@
</div>
<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.') }}
</h3>
<div v-if="error_desc">

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

@ -14,16 +14,16 @@
/>
</div>
<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>
</h4>
<h4 v-if="! editing && current">
<h4 v-if="! editing && current" class="ffz-font-size-4">
{{ current.name }}
</h4>
<select
v-if="editing"
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="">
{{ t('setting.terms.please-select', 'Please select an option.') }}
@ -71,7 +71,7 @@
v-model.number="edit_data.p"
type="number"
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"
>
<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"
/>
<div>
<h5>{{ i.name }}</h5>
<h5 class="ffz-font-size-5">{{ i.name }}</h5>
<section
v-if="i.versions && (i.always_versions || i.versions.length > 1)"
class="tw-mg-t-05"
@ -116,7 +116,7 @@
</label>
</li>
</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', {
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="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">
<h4 v-if="! editing">
<h4 v-if="! editing" class="ffz-font-size-4">
{{ display.v }}
</h4>
<select
v-if="editing"
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="">
{{ 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">
<div class="ffz--changelog tw-border-t tw-pd-t-1">
<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
v-if="addon.icon"
class="ffz-avatar ffz-avatar--size-30 tw-mg-r-05"
@ -15,10 +15,10 @@
name: addon.name
}) }}
</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') }}
</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') }}
</h3>
</div>
@ -63,16 +63,16 @@
</figure>
<a
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="#"
@click.prevent="titleNav(commit.title_nav)"
>
{{ commit.title }}
</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 }}
</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 }}
</div>
<div v-if="commit.author" class="tw-mg-l-05">
@ -109,7 +109,7 @@
</div>
<div
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>
</div>
@ -131,7 +131,7 @@
<div v-if="error">
{{ t('home.changelog.error', 'An error occurred loading changes from GitHub.') }}
</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">
{{ t('home.changelog.no-more', 'There are no more commits to load.') }}
</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>
<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">
<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!") }}
</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.')" />
@ -16,7 +16,7 @@
<select
id="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"
>
<option :selected="is_custom" value="custom">
@ -33,13 +33,13 @@
</select>
<input
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"
@input="onMessageChange"
/>
<textarea
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"
@blur="updateMessage"
@input="onMessageChange"

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

@ -1,7 +1,7 @@
<template lang="html">
<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">
<h3 class="ffz-i-attention">
<h3 class="ffz-i-attention ffz-font-size-3">
{{ t('setting.clear.warning', 'Be careful! This is permanent.') }}
</h3>
<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
v-model="entered"
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"
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 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') }}
<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">
<span class="ffz-i-ellipsis-vert" />
</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">
<img
:src="provider.icon"
@ -59,10 +59,10 @@
/>
</div>
<div>
<h4 v-if="! provider.name">
<h4 v-if="! provider.name" class="ffz-font-size-4">
{{ t('emote-source.unknown', 'Unknown ({id})', provider) }}
</h4>
<h4 v-else>{{
<h4 v-else class="ffz-font-size-4">{{
provider.i18n_key
? t(provider.i18n_key, provider.name, provider)
: provider.name

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

@ -10,7 +10,7 @@
</div>
<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"
>
<option :selected="sort_by === 0">
@ -40,7 +40,7 @@
</div>
</div>
<h3 class="tw-mg-b-1">
<h3 class="tw-mg-b-1 ffz-font-size-3">
<span>
{{ t('setting.experiments.ffz', 'FrankerFaceZ Experiments') }}
</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-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">
{{ exp.description }}
</div>
@ -69,7 +69,7 @@
<div class="tw-flex tw-flex-shrink-0 tw-align-items-start">
<select
: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)"
>
<option
@ -103,7 +103,7 @@
</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>
{{ t('setting.experiments.twitch', 'Twitch Experiments') }}
</span>
@ -117,7 +117,7 @@
<section v-if="experiments_locked">
<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.") }}
</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})" />
@ -127,7 +127,7 @@
<input
ref="code"
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"
autocorrect="off"
@keydown.enter="enterCode"
@ -160,7 +160,7 @@
</div>
<div class="tw-flex-grow-1">
<h4>{{ exp.name }}</h4>
<h4 class="ffz-font-size-4">{{ exp.name }}</h4>
<div class="description">
{{ exp.remainder }}
</div>
@ -169,7 +169,7 @@
<div class="tw-flex tw-flex-shrink-0 tw-align-items-start">
<select
: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)"
>
<option

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

@ -1,7 +1,7 @@
<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">
<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 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="tw-flex-grow-1">
<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
</h2>
<span class="tw-c-text-alt">
@ -18,7 +18,7 @@
v-if="unseen"
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') }}
</h3>
@ -57,7 +57,7 @@
v-if="addons"
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') }}
</h3>
@ -101,7 +101,7 @@
v-if="new_addons"
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') }}
</h3>
@ -151,7 +151,7 @@
rel="noopener"
>
<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>
</a>
<a
@ -162,7 +162,7 @@
rel="noopener noreferrer"
>
<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>
</a>
<!--a
@ -173,7 +173,7 @@
rel="noopener noreferrer"
>
<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>
</a-->
<a
@ -184,7 +184,7 @@
rel="noopener noreferrer"
>
<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>
</a>
</div>

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

@ -207,9 +207,9 @@
{{ t('debug.link-provider.raw', 'Raw Data') }}
</label>
<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">
<h1 class="tw-mg-5 ffz-i-zreknarf loading" />
<h1 class="tw-mg-5 ffz-i-zreknarf loading ffz-font-size-1" />
</div>
<code v-else-if="typeof raw_data === 'string'">{{ raw_data }}</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"
>
<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
</h3>
<div class="tw-flex-grow-1 tw-pd-x-2">
@ -22,7 +22,7 @@
v-model="query"
:placeholder="t('main-menu.search', 'Search Settings')"
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"
autocorrect="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">
<div class="ffz--home tw-border-t tw-pd-y-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>
<markdown v-else :source="t(`home.${key}`, md)" />
</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>
<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">
<h3 class="ffz-i-attention">
<h3 class="ffz-i-attention ffz-font-size-3">
{{ t('setting.profiles.ephemeral', "This profile is ephemeral.") }}
</h3>
@ -63,7 +63,7 @@
</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">
<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.") }}
</h3>
@ -83,7 +83,7 @@
</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">
<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.') }}
</h3>
@ -96,7 +96,7 @@
</section>
<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">
<h3 class="ffz-i-arrows-cw">
<h3 class="ffz-i-arrows-cw ffz-font-size-3">
{{ t('setting.update', 'There is an update available.') }}
</h3>

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

@ -2,7 +2,7 @@
<div class="ffz--profile-editor">
<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">
<h3 class="ffz-i-attention">
<h3 class="ffz-i-attention ffz-font-size-3">
{{ t('setting.profiles.ephemeral', "This profile is ephemeral.") }}
</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">
<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.') }}
</h4>
<div v-if="export_error_message">
@ -102,7 +102,7 @@
ref="name"
:disabled="isEphemeral"
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>
@ -116,7 +116,7 @@
ref="desc"
:disabled="isEphemeral"
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>
@ -161,7 +161,7 @@
id="ffz:editor:url"
readonly
: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>
@ -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">
<section v-if="context.exclusive" class="tw-pd-b-2">
<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.') }}
</h3>
@ -78,7 +78,7 @@
<input
ref="paste"
: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"
>
<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">
<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.') }}
</h4>
<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">
<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.') }}
</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">
<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?') }}
</h4>
@ -237,7 +237,7 @@
<div
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" />
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
@ -247,7 +247,7 @@
<div
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' : ''}`" />
<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 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">
{{ p.desc_i18n_key ? t(p.desc_i18n_key, p.description, p) : p.description }}
</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"
:class="{active: opened}"
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.left.stop.prevent="focusShow"
@keyup.down.stop.prevent="focusShow"
@ -86,7 +86,7 @@
</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">
{{ p.desc_i18n_key ? t(p.desc_i18n_key, p.description, p) : p.description }}
</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="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">
<h4 v-if="! editing" class="ffz-monospace">
<h4 v-if="! editing" class="ffz-monospace ffz-font-size-4">
{{ title }}
</h4>
<input
@ -10,7 +10,7 @@
v-model="edit_data.text"
:placeholder="adding ? t('setting.reasons.add-placeholder', 'Add a new reason') : edit_data.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"
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 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>
</h4>
<input
@ -22,7 +22,7 @@
v-model="edit_data.v"
:placeholder="adding ? t('setting.terms.add-placeholder', 'Add a new term') : edit_data.v"
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"
autocorrect="off"
>
@ -32,7 +32,7 @@
<select
v-else
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">
{{ t('setting.terms.type.text', 'Text') }}
@ -76,7 +76,7 @@
v-model.number="edit_data.p"
type="number"
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"
>
<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">
<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" />
<div v-if="hasAccepted">
{{ 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"
>
<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-search-input">
<label for="ffz-main-menu.search" class="tw-hide-accessible">{{ t('i18n.ui.search', 'Search Strings') }}</label>
@ -17,7 +17,7 @@
v-model="query"
:placeholder="t('i18n.ui.search', 'Search Strings')"
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"
autocorrect="off"
autocomplete="off"
@ -99,7 +99,7 @@
ref="pager"
:value="page"
: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"
min="1"
@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>
<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>
</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(' ');
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`,
style: { color }
};

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

@ -120,7 +120,7 @@ export default class Metadata extends Module {
</div>
<div class="tw-flex tw-align-items-center">
<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"
value={url}
onFocus={e => e.target.select()}
@ -730,4 +730,4 @@ export default class Metadata extends Module {
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;
if ( login ) {
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 => {
if ( event.ctrlKey || event.shiftKey || event.altKey )
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
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...')}
</div>)
}
@ -2834,7 +2834,7 @@ export default class EmoteMenu extends Module {
<div class="tw-flex">
<input
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={
is_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')}
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" />
</div>
</button>
@ -2897,7 +2897,7 @@ export default class EmoteMenu extends Module {
data-title={t.i18n.t('emote-menu.channel', 'Channel')}
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" />
</div>
</button>
@ -2912,7 +2912,7 @@ export default class EmoteMenu extends Module {
onClick={this.clickTab}
>
{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" />
</div>
</button>
@ -2926,7 +2926,7 @@ export default class EmoteMenu extends Module {
data-title={t.i18n.t('emote-menu.my-emotes', 'My Emotes')}
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" />
</div>
</button>
@ -2940,7 +2940,7 @@ export default class EmoteMenu extends Module {
data-title={t.i18n.t('emote-menu.emoji', 'Emoji')}
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" />
</div>
</button>
@ -2953,7 +2953,7 @@ export default class EmoteMenu extends Module {
data-title={t.i18n.t('emote-menu.settings', 'Open Settings')}
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" />
</div>
</button>

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

@ -877,7 +877,7 @@ export default class Input extends Module {
</div>
{args}
</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>);
}
}

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

@ -452,7 +452,7 @@ export default class ChatLine extends Module {
if ( mystery )
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 = [
@ -1170,7 +1170,7 @@ other {# messages were deleted by a moderator.}
username,
want_source_tip
? 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}))
: 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">
<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') }
</p>
</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">
<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') }
</p>
</div>

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

@ -1,7 +1,7 @@
<template lang="html">
<div class="ffz-featured-follow tw-c-background-base">
<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" />
<button
@ -26,7 +26,7 @@
<div class="ffz-channel-avatar">
<a :href="'/' + user.login" :title="user.login" @click.prevent="route(user.login)"><img :src="user.avatar"></a>
</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 v-if="user.error">

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

@ -1,7 +1,7 @@
<template lang="html">
<div class="ffz-auto-host-options tw-c-background-base">
<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>
<div
v-show="activeTab === 'auto-host'"
@ -32,7 +32,7 @@
<div class="ffz-channel-avatar">
<img :src="host.profileImageURL" :alt="host.displayName + '(' + host.login + ')'">
</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 }}
</p>
<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">
{data.icon && (
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.render ? data.render.call(this, data) : null }
{ (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}
</header>) : null }
{ 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">
{toggle}
<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"
>
<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 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') }
</h5>
</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}>
<span class="tw-button__text tw-pd-0">{ t.i18n.t('video-chat.reply', 'Reply') }</span>
</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', {
time: msg.timestamp
}) }
@ -397,7 +397,7 @@ export default class VideoChatHook extends Module {
<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}>
<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>
</button>
<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"
:class="[hasIcon ? 'tw-pd-l-3' : 'tw-pd-l-1']"
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"
autocorrect="off"
autocomplete="off"
@ -39,7 +39,7 @@
{{ t('autocomplete.empty', 'There are no results.') }}
</div>
<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>
<button
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 ( typeof token.size === 'string' ) {
if ( VALID_SIZES.includes(token.size) )
classes.push(`tw-font-size-${token.size}`);
classes.push(`ffz-font-size-${token.size}`);
else
style.fontSize = token.size;
} else