oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-06-27 21:05:53 +00:00
Code Wiki Activity

4.22.6

Browse source 
First round of fixes, more to follow.

* Fixed: Appearance of tool-tip and balloon page elements.
This commit is contained in:
SirStendec 2021-05-17 17:02:23 -04:00
parent f0d68527b8
commit 89941d2ee5
47 changed files with 580 additions and 256 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.22.5",
"version": "4.22.6",
"description": "FrankerFaceZ is a Twitch enhancement suite.",
"private": true,
"license": "Apache-2.0",

8
src/modules/chat/override-editor.vue
View file

@ -26,12 +26,12 @@
>
<button
class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container"
class="tw-mg-l-05 tw-button tw-button--text ffz-il-tooltip__container"
:class="{'tw-button--disabled': name == null}"
@click="clearName"
>
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</div>
</button>
@ -52,12 +52,12 @@
/>
<button
class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container"
class="tw-mg-l-05 tw-button tw-button--text ffz-il-tooltip__container"
:class="{'tw-button--disabled': color == null}"
@click="clearColor"
>
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</div>
</button>

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

@ -72,7 +72,7 @@
<button
v-if="external"
disabled
class="tw-button ffz-button--hollow tw-button--disabled tw-tooltip__container tw-mg-r-1"
class="tw-button ffz-button--hollow tw-button--disabled ffz-il-tooltip__container tw-mg-r-1"
>
<span class="tw-button__icon tw-button__icon--left">
<figure class="ffz-i-trash" />
@ -80,7 +80,7 @@
<span class="tw-button__text">
{{ t('addon.disable', 'Disable') }}
</span>
<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-left">
<div class="ffz-il-tooltip ffz-il-tooltip--up ffz-il-tooltip--align-left">
{{ t('addon.external.description', 'This add-on has been loaded by an external script and cannot be disabled here.') }}
</div>
</button>

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

@ -51,11 +51,11 @@
:show-input="false"
:tooltip="t('settings.term.color.tip', 'Color')"
/>
<div v-else-if="term.c" class="ffz-color-preview tw-relative tw-tooltip__container">
<div v-else-if="term.c" class="ffz-color-preview tw-relative ffz-il-tooltip__container">
<figure :style="`background-color: ${term.c}`">
&nbsp;
</figure>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('settings.term.color.tip', 'Color') }}
</div>
</div>
@ -63,7 +63,7 @@
<div
v-if="priority"
:class="editing ? 'tw-mg-r-05' : 'tw-mg-x-05'"
class="tw-flex-shrink-0 tw-relative tw-tooltip__container"
class="tw-flex-shrink-0 tw-relative ffz-il-tooltip__container"
>
<span v-if="! editing">{{ term.p }}</span>
<input
@ -74,13 +74,13 @@
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"
style="width: 5rem"
>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('settings.terms.priority.tip', 'Priority') }}
</div>
</div>
<div
v-if="removable && (editing || display.remove)"
class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative tw-tooltip__container"
class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative ffz-il-tooltip__container"
>
<input
v-if="editing"
@ -101,11 +101,11 @@
v-else-if="term.remove"
class="ffz-i-trash tw-pd-x-1"
/>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.terms.remove.on', 'Remove matching messages from chat.') }}
</div>
</div>
<!--div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-relative tw-tooltip__container">
<!--div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-relative ffz-il-tooltip__container">
<button
v-if="editing"
:class="{active: edit_data.remove}"
@ -121,7 +121,7 @@
v-else-if="term.remove"
class="ffz-i-eye-off tw-pd-x-1"
/>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
<span v-if="display.remove">
{{ t('setting.terms.remove.on', 'Remove matching messages from chat.') }}
</span>
@ -144,47 +144,47 @@
</div>
<div v-else-if="editing" class="tw-flex-shrink-0">
<button
class="tw-button tw-button--text tw-tooltip__container"
class="tw-button tw-button--text ffz-il-tooltip__container"
:class="! valid && 'tw-button--disabled'"
:disabled="! valid"
@click="save"
>
<span class="tw-button__text ffz-i-floppy" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.save', 'Save') }}
</div>
</button>
<button class="tw-button tw-button--text tw-tooltip__container" @click="cancel">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="cancel">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }}
</div>
</button>
</div>
<div v-else-if="deleting" class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip__container" @click="$emit('remove', term)">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="$emit('remove', term)">
<span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.delete', 'Delete') }}
</div>
</button>
<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = false">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="deleting = false">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }}
</div>
</button>
</div>
<div v-else class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip__container" @click="edit">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="edit">
<span class="tw-button__text ffz-i-cog" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.edit', 'Edit') }}
</div>
</button>
<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = true">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="deleting = true">
<span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.delete', 'Delete') }}
</div>
</button>

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

@ -12,7 +12,7 @@
<button
:disabled="! has_value"
:class="{'tw-button--disabled': ! has_value}"
class="tw-mg-l-05 tw-button ffz-button--hollow tw-tooltip__container"
class="tw-mg-l-05 tw-button ffz-button--hollow ffz-il-tooltip__container"
@click="clear"
>
<span class="tw-button__icon tw-button__icon--left">
@ -93,11 +93,11 @@
/>
</section>
<button
class="tw-mg-t-05 tw-button ffz-button--hollow tw-tooltip__container"
class="tw-mg-t-05 tw-button ffz-button--hollow ffz-il-tooltip__container"
@click="reset(i.id)"
>
<span class="tw-button__text">Reset</span>
<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<span class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</span>
</button>

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

@ -35,23 +35,23 @@
</button>
</div>
<div v-else-if="deleting" class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip__container" @click="$emit('remove', term)">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="$emit('remove', term)">
<span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.delete', 'Delete') }}
</div>
</button>
<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = false">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="deleting = false">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }}
</div>
</button>
</div>
<div v-else class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = true">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="deleting = true">
<span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.delete', 'Delete') }}
</div>
</button>

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

@ -11,7 +11,7 @@
<div v-if=" ! addons" class="tw-mg-b-1 tw-flex tw-align-items-center">
<div class="tw-flex-grow-1" />
<div class="ffz-checkbox tw-relative tw-tooltip__container">
<div class="ffz-checkbox tw-relative ffz-il-tooltip__container">
<input
id="nonversioned"
ref="nonversioned"
@ -26,7 +26,7 @@
</span>
</label>
<div class="tw-tooltip ffz-balloon--md tw-tooltip--wrap tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-balloon--md ffz-il-tooltip--wrap ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('home.changelog.about-nonversioned', 'Non-versioned commits are commits to the FrankerFaceZ repository not associated with a release build. They typically represent maintenance or contributions from the community that will be included in a subsequent release.') }}
</div>
</div>

14
src/modules/main_menu/components/chat-actions.vue
View file

@ -301,31 +301,31 @@
</div>
<button
v-if="! maybe_clear && val.length"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
class="tw-mg-l-1 tw-button tw-button--text ffz-il-tooltip__container"
@click="maybe_clear = true"
>
<span class="tw-button__text ffz-i-trash">
{{ t('setting.delete-all', 'Delete All') }}
</span>
<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<span class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.actions.delete-all', "Delete all of this profile's actions.") }}
</span>
</button>
<button
v-if="maybe_clear"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
class="tw-mg-l-1 tw-button tw-button--text ffz-il-tooltip__container"
@click="doClear"
>
<span class="tw-button__text ffz-i-trash">
{{ t('setting.delete-all', 'Delete All') }}
</span>
<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<span class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.actions.delete-all', "Delete all of this profile's actions.") }}
</span>
</button>
<button
v-if="maybe_clear"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
class="tw-mg-l-1 tw-button tw-button--text ffz-il-tooltip__container"
@click="maybe_clear = false"
>
<span class="tw-button__text ffz-i-cancel">
@ -334,13 +334,13 @@
</button>
<button
v-if="! val.length && has_default"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
class="tw-mg-l-1 tw-button tw-button--text ffz-il-tooltip__container"
@click="populate"
>
<span class="tw-button__text ffz-i-trash">
{{ t('setting.actions.add-default', 'Add Defaults') }}
</span>
<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<span class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.actions.add-default-tip', 'Add all of the default actions to this profile.') }}
</span>
</button>

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

@ -6,25 +6,25 @@
</div>
<button
v-if="! empty"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
class="tw-mg-l-1 tw-button tw-button--text ffz-il-tooltip__container"
@click="clear"
>
<span class="tw-button__text ffz-i-trash">
{{ t('setting.delete-all', 'Delete All') }}
</span>
<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<span class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.reasons.delete-all', "Delete all of this profile's reasons.") }}
</span>
</button>
<button
v-if="empty"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
class="tw-mg-l-1 tw-button tw-button--text ffz-il-tooltip__container"
@click="populate"
>
<span class="tw-button__text ffz-i-trash">
{{ t('setting.reasons.add-default', 'Add Defaults') }}
</span>
<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<span class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.reasons.add-default-tip', 'Add all of the default reasons to this profile.') }}
</span>
</button>

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

@ -105,11 +105,11 @@
<button
:disabled="exp.default"
:class="{'tw-button--disabled': exp.default}"
class="tw-mg-t-05 tw-button tw-button--text tw-tooltip__container"
class="tw-mg-t-05 tw-button tw-button--text ffz-il-tooltip__container"
@click="reset(key)"
>
<span class="tw-button__text ffz-i-cancel" />
<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<span class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</span>
</button>
@ -147,13 +147,13 @@
class="ffz--experiment-row tw-elevation-1 tw-c-background-base tw-border tw-pd-y-05 tw-pd-x-1 tw-mg-y-05 tw-flex"
>
<div v-if="unused" class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-border-r tw-mg-r-1 tw-pd-r-1">
<div v-if="exp.in_use" class="ffz--profile__icon ffz-i-ok tw-tooltip__container">
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<div v-if="exp.in_use" class="ffz--profile__icon ffz-i-ok ffz-il-tooltip__container">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
{{ t('setting.experiments.active', 'This experiment is active.') }}
</div>
</div>
<div v-else class="ffz--profile__icon ffz-i-cancel tw-tooltip__container">
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<div v-else class="ffz--profile__icon ffz-i-cancel ffz-il-tooltip__container">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
{{ t('setting.experiments.inactive', 'This experiment is not active.') }}
</div>
</div>
@ -190,11 +190,11 @@
<button
:disabled="exp.default"
:class="{'tw-button--disabled': exp.default}"
class="tw-mg-t-05 tw-button tw-button--text tw-tooltip__container"
class="tw-mg-t-05 tw-button tw-button--text ffz-il-tooltip__container"
@click="resetTwitch(key)"
>
<span class="tw-button__text ffz-i-cancel" />
<span class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<span class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</span>
</button>

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

@ -14,10 +14,10 @@
<div
v-if="isShort"
class="tw-mg-l-1 tw-pd-x-1 tw-border-l tw-flex tw-align-items-center ffz--profile__icon tw-relative tw-tooltip__container"
class="tw-mg-l-1 tw-pd-x-1 tw-border-l tw-flex tw-align-items-center ffz--profile__icon tw-relative ffz-il-tooltip__container"
>
<figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--up ffz-il-tooltip--align-right">
<span v-if="passes">
{{ t('setting.filters.active', 'This rule matches.') }}
</span>
@ -31,9 +31,9 @@
:class="[isShort ? '' : 'tw-mg-l-1']"
class="tw-border-l tw-pd-l-1 tw-flex tw-flex-column tw-flex-wrap tw-justify-content-start tw-align-items-start"
>
<div v-if="! isShort" class="tw-mg-b-1 tw-border-b tw-pd-b-1 tw-full-width tw-flex tw-justify-content-center ffz--profile__icon tw-relative tw-tooltip__container">
<div v-if="! isShort" class="tw-mg-b-1 tw-border-b tw-pd-b-1 tw-full-width tw-flex tw-justify-content-center ffz--profile__icon tw-relative ffz-il-tooltip__container">
<figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--up ffz-il-tooltip--align-right">
<span v-if="passes">
{{ t('setting.filters.active', 'This rule matches.') }}
</span>
@ -44,23 +44,23 @@
</div>
<template v-if="deleting">
<button class="tw-button tw-button--text tw-relative tw-tooltip__container" @click="$emit('delete')">
<button class="tw-button tw-button--text tw-relative ffz-il-tooltip__container" @click="$emit('delete')">
<span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.delete', 'Delete') }}
</div>
</button>
<button class="tw-button tw-button--text tw-relative tw-tooltip__container" @click="deleting = false">
<button class="tw-button tw-button--text tw-relative ffz-il-tooltip__container" @click="deleting = false">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }}
</div>
</button>
</template>
<template v-else>
<button class="tw-button tw-button--text tw-relative tw-tooltip__container" @click="deleting = true">
<button class="tw-button tw-button--text tw-relative ffz-il-tooltip__container" @click="deleting = true">
<span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.delete', 'Delete') }}
</div>
</button>

4
src/modules/main_menu/components/game-list-editor.vue
View file

@ -65,9 +65,9 @@
</span>
</div>
<div class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip__container" @click="remove(i)">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="remove(i)">
<span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.delete', 'Delete') }}
</div>
</button>

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

@ -40,13 +40,13 @@
</div>
<button
class="tw-mg-05 tw-button tw-button--text tw-tooltip__container"
class="tw-mg-05 tw-button tw-button--text ffz-il-tooltip__container"
:class="examples_loading && 'tw-button--disabled'"
:disabled="examples_loading"
@click="updateExamples"
>
<span class="tw-button__text ffz-i-arrows-cw" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('debug.link-provider.refresh', 'Refresh') }}
</div>
</button>

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

@ -33,11 +33,11 @@
<figure :class="faded ? 'ffz-i-eye-off' : 'ffz-i-eye'" />
</span>
</button>
<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="popout">
<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05 tw-relative ffz-il-tooltip__container" @click="popout">
<span class="tw-button-icon__icon">
<figure class="ffz-i-link-ext" />
</span>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-center">
{{ t('main-menu.popout', 'Open Settings in a New Window') }}
</div>
</button>

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

@ -42,11 +42,11 @@
</div>
</section>
<button
class="tw-button tw-button--text tw-relative tw-tooltip__container"
class="tw-button tw-button--text tw-relative ffz-il-tooltip__container"
@click="resetExport"
>
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.close', 'Close') }}
</div>
</button>
@ -57,11 +57,11 @@
{{ export_message }}
</section>
<button
class="tw-button tw-button--text tw-relative tw-tooltip__container"
class="tw-button tw-button--text tw-relative ffz-il-tooltip__container"
@click="resetExport"
>
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.close', 'Close') }}
</div>
</button>

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

@ -11,7 +11,7 @@
}}
<div v-if="context.can_proxy" class="tw-flex tw-align-items-center tw-mg-t-1">
<div class="ffz-checkbox tw-relative tw-tooltip__container">
<div class="ffz-checkbox tw-relative ffz-il-tooltip__container">
<input
id="proxied"
ref="proxied"
@ -27,7 +27,7 @@
</span>
</label>
<div class="tw-tooltip ffz-balloon--md tw-tooltip--wrap tw-tooltip--down tw-tooltip--align-left">
<div class="ffz-il-tooltip ffz-balloon--md ffz-il-tooltip--wrap ffz-il-tooltip--down ffz-il-tooltip--align-left">
{{ t('setting.context-difference.tip', 'Checking this will use the context from the original window, causing profiles and thier rules to match like they would in the window that opened this Control Center.') }}
</div>
</div>
@ -128,11 +128,11 @@
</div>
</section>
<button
class="tw-button tw-button--text tw-relative tw-tooltip__container"
class="tw-button tw-button--text tw-relative ffz-il-tooltip__container"
@click="resetImport"
>
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.close', 'Close') }}
</div>
</button>
@ -144,11 +144,11 @@
</section>
<button
v-if="import_closable"
class="tw-button tw-button--text tw-relative tw-tooltip__container"
class="tw-button tw-button--text tw-relative ffz-il-tooltip__container"
@click="resetImport"
>
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.close', 'Close') }}
</div>
</button>
@ -163,23 +163,23 @@
<button
v-for="(profile, idx) in import_profiles"
:key="idx"
class="tw-block tw-full-width tw-mg-y-05 tw-mg-r-1 tw-pd-05 tw-button ffz-button--hollow tw-c-text-overlay tw-relative tw-tooltip__container"
class="tw-block tw-full-width tw-mg-y-05 tw-mg-r-1 tw-pd-05 tw-button ffz-button--hollow tw-c-text-overlay tw-relative ffz-il-tooltip__container"
@click="importProfile(profile)"
>
<span class="tw-button__text tw-c-text-overlay">
{{ profile.i18n_key ? t(profile.i18n_key, profile.name) : profile.name }}
</span>
<div v-if="profile.description" class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<div v-if="profile.description" class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
{{ profile.desc_i18n_key ? t(profile.desc_i18n_key, profile.description) : profile.description }}
</div>
</button>
</section>
<button
class="tw-button tw-button--text tw-relative tw-tooltip__container"
class="tw-button tw-button--text tw-relative ffz-il-tooltip__container"
@click="resetImport"
>
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.close', 'Close') }}
</div>
</button>
@ -210,11 +210,11 @@
</button>
</section>
<button
class="tw-button tw-button--text tw-relative tw-tooltip__container"
class="tw-button tw-button--text tw-relative ffz-il-tooltip__container"
@click="resetImport"
>
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.close', 'Close') }}
</div>
</button>
@ -237,10 +237,10 @@
<div
v-if="p.url"
class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-mg-r-1 tw-relative tw-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 tw-font-size-4"
>
<span :class="`ffz-i-download-cloud${p.pause_updates ? ' ffz-unmatched-item' : ''}`" />
<div v-if="! p.pause_updates" class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<div v-if="! p.pause_updates" class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
<div class="tw-mg-b-05">
{{ t('setting.profile.updates', 'This profile will update automatically from the following URL:') }}
</div>
@ -271,9 +271,9 @@
'ffz-i-cancel': ! p.toggled,
'ffz-i-minus': p.toggled && ! p.live
}"
class="ffz--profile__icon tw-relative tw-tooltip__container"
class="ffz--profile__icon tw-relative ffz-il-tooltip__container"
>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
<span v-if="p.live">
{{ t('setting.profiles.active', 'This profile is enabled and active.') }}
</span>

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

@ -54,25 +54,25 @@
<div class="ffz--profile-row__icon-tray tw-flex">
<div
v-if="p.url"
:class="`tw-tooltip__container ffz--profile-row__icon ffz-i-download-cloud tw-relative${p.pause_updates ? ' ffz-unmatched-item' : ''}`"
:class="`ffz-il-tooltip__container ffz--profile-row__icon ffz-i-download-cloud tw-relative${p.pause_updates ? ' ffz-unmatched-item' : ''}`"
>
<div v-if="! p.pause_updates" class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div v-if="! p.pause_updates" class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.profiles.updates', 'This profile will update automatically.') }}
</div>
</div>
<div
v-if="! p.toggled"
class="tw-tooltip__container ffz--profile-row__icon ffz-i-cancel tw-relative"
class="ffz-il-tooltip__container ffz--profile-row__icon ffz-i-cancel tw-relative"
>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.profiles.disabled', 'This profile is disabled.') }}
</div>
</div>
<div
v-if="p.live"
class="tw-tooltip__container ffz--profile-row__icon ffz-i-ok tw-relative"
class="ffz-il-tooltip__container ffz--profile-row__icon ffz-i-ok tw-relative"
>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.profiles.active', 'This profile is enabled and active.') }}
</div>
</div>

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

@ -23,43 +23,43 @@
</button>
</div>
<div v-else-if="editing" class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip__container" @click="save">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="save">
<span class="tw-button__text ffz-i-floppy" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.save', 'Save') }}
</div>
</button>
<button class="tw-button tw-button--text tw-tooltip__container" @click="cancel">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="cancel">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }}
</div>
</button>
</div>
<div v-else-if="deleting" class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip__container" @click="$emit('remove', reason)">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="$emit('remove', reason)">
<span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.delete', 'Delete') }}
</div>
</button>
<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = false">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="deleting = false">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }}
</div>
</button>
</div>
<div v-else class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip__container" @click="edit">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="edit">
<span class="tw-button__text ffz-i-cog" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.edit', 'Edit') }}
</div>
</button>
<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = true">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="deleting = true">
<span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.delete', 'Delete') }}
</div>
</button>

4
src/modules/main_menu/components/setting-check-box.vue
View file

@ -39,9 +39,9 @@
</button>
<div class="ffz--reset-button">
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text ffz-il-tooltip__container" @click="clear">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</div>
</button>

4
src/modules/main_menu/components/setting-color-box.vue
View file

@ -38,9 +38,9 @@
</span>
</button>
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text ffz-il-tooltip__container" @click="clear">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</div>
</button>

4
src/modules/main_menu/components/setting-combo-box.vue
View file

@ -54,9 +54,9 @@
</span>
</button>
<button v-if="has_value" class="tw-mg-l-05 tw-mg-y-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
<button v-if="has_value" class="tw-mg-l-05 tw-mg-y-05 tw-button tw-button--text ffz-il-tooltip__container" @click="clear">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</div>
</button>

4
src/modules/main_menu/components/setting-hotkey.vue
View file

@ -35,9 +35,9 @@
</span>
</button>
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text ffz-il-tooltip__container" @click="clear">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</div>
</button>

4
src/modules/main_menu/components/setting-select-box.vue
View file

@ -62,9 +62,9 @@
</span>
</button>
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text ffz-il-tooltip__container" @click="clear">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</div>
</button>

4
src/modules/main_menu/components/setting-text-box.vue
View file

@ -38,9 +38,9 @@
</span>
</button>
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container" @click="clear">
<button v-if="has_value" class="tw-mg-l-05 tw-button tw-button--text ffz-il-tooltip__container" @click="clear">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }}
</div>
</button>

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

@ -1,15 +1,15 @@
<template lang="html">
<div class="ffz--term">
<div class="tw-align-items-center tw-flex tw-flex-wrap tw-flex-row tw-full-width">
<div v-if="! is_valid" class="tw-relative tw-tooltip__container tw-mg-r-05">
<div v-if="! is_valid" class="tw-relative ffz-il-tooltip__container tw-mg-r-05">
<figure class="tw-c-text-error ffz-i-attention" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
{{ t('setting.terms.warn-invalid', 'This highlight term is invalid.') }}
</div>
</div>
<div v-if="! is_safe" class="tw-relative tw-tooltip__container tw-mg-r-05">
<div v-if="! is_safe" class="tw-relative ffz-il-tooltip__container tw-mg-r-05">
<figure class="tw-c-text-hint ffz-i-attention" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
{{ t('setting.terms.warn-complex', 'This highlight term is potentially too complex. It may cause client lag.') }}
</div>
</div>
@ -56,11 +56,11 @@
:show-input="false"
:tooltip="t('settings.term.color.tip', 'Color')"
/>
<div v-else-if="term.c" class="ffz-color-preview tw-relative tw-tooltip__container">
<div v-else-if="term.c" class="ffz-color-preview tw-relative ffz-il-tooltip__container">
<figure :style="`background-color: ${term.c}`">
&nbsp;
</figure>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('settings.term.color.tip', 'Color') }}
</div>
</div>
@ -68,7 +68,7 @@
<div
v-if="priority"
:class="editing ? 'tw-mg-r-05' : 'tw-mg-x-05'"
class="tw-flex-shrink-0 tw-relative tw-tooltip__container"
class="tw-flex-shrink-0 tw-relative ffz-il-tooltip__container"
>
<span v-if="! editing">{{ term.p }}</span>
<input
@ -79,13 +79,13 @@
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"
style="width: 5rem"
>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('settings.terms.priority.tip', 'Priority') }}
</div>
</div>
<div
v-if="editing || display.s"
class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative tw-tooltip__container"
class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative ffz-il-tooltip__container"
>
<input
v-if="editing"
@ -103,18 +103,18 @@
{{ t('settings.terms.sensitive', 'Aa') }}
</span>
</label>
<div v-else-if="display.s" class="tw-relative tw-tooltip__container">
<div v-else-if="display.s" class="tw-relative ffz-il-tooltip__container">
<span class="tw-mg-l-05">
{{ t('settings.terms.sensitive', 'Aa') }}
</span>
</div>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('settings.terms.sensitive.tip', 'Case Sensitive') }}
</div>
</div>
<div
v-if="words && (editing || display.w)"
class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative tw-tooltip__container"
class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative ffz-il-tooltip__container"
>
<input
v-if="editing"
@ -132,18 +132,18 @@
{{ t('settings.terms.word', 'Abc') }}
</span>
</label>
<div v-else-if="display.w" class="tw-relative tw-tooltip__container">
<div v-else-if="display.w" class="tw-relative ffz-il-tooltip__container">
<span class="tw-mg-l-05 ffz--whole-word">
{{ t('settings.terms.word', 'Abc') }}
</span>
</div>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('settings.terms.word.tip', 'Match Whole Words') }}
</div>
</div>
<div
v-if="highlight && (editing || display.h)"
class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative tw-tooltip__container"
class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative ffz-il-tooltip__container"
>
<input
v-if="editing"
@ -161,12 +161,12 @@
{{ t('settings.terms.highlight', 'Hlt') }}
</span>
</label>
<div v-else-if="display.h" class="tw-relative tw-tooltip__container">
<div v-else-if="display.h" class="tw-relative ffz-il-tooltip__container">
<span class="tw-mg-l-05 ffz--highlight">
{{ t('settings.terms.highlight', 'Hlt') }}
</span>
</div>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
<markdown
:source="t(
'settings.terms.highlight.tip',
@ -177,7 +177,7 @@
</div>
<div
v-if="removable && (editing || display.remove)"
class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative tw-tooltip__container"
class="tw-flex-shrink-0 tw-mg-r-05 tw-mg-y-05 tw-flex tw-align-items-center ffz-checkbox tw-relative ffz-il-tooltip__container"
>
<input
v-if="editing"
@ -198,7 +198,7 @@
v-else-if="term.remove"
class="ffz-i-trash tw-pd-x-1"
/>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.terms.remove.on', 'Remove matching messages from chat.') }}
</div>
</div>
@ -210,43 +210,43 @@
</button>
</div>
<div v-else-if="editing" class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip__container" @click="save">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="save">
<span class="tw-button__text ffz-i-floppy" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.save', 'Save') }}
</div>
</button>
<button class="tw-button tw-button--text tw-tooltip__container" @click="cancel">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="cancel">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }}
</div>
</button>
</div>
<div v-else-if="deleting" class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip__container" @click="$emit('remove', term)">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="$emit('remove', term)">
<span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.delete', 'Delete') }}
</div>
</button>
<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = false">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="deleting = false">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }}
</div>
</button>
</div>
<div v-else class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip__container" @click="edit">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="edit">
<span class="tw-button__text ffz-i-cog" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.edit', 'Edit') }}
</div>
</button>
<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = true">
<button class="tw-button tw-button--text ffz-il-tooltip__container" @click="deleting = true">
<span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.delete', 'Delete') }}
</div>
</button>

8
src/modules/metadata.jsx
View file

@ -224,7 +224,7 @@ export default class Metadata extends Module {
value={url}
onFocus={e => e.target.select()}
/>
{can_copy && <div class="tw-relative tw-tooltip__container tw-mg-l-1">
{can_copy && <div class="tw-relative ffz-il-tooltip__container tw-mg-l-1">
<button
class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
aria-label={ this.i18n.t('metadata.uptime.copy', 'Copy to Clipboard') }
@ -236,7 +236,7 @@ export default class Metadata extends Module {
</span>
</div>
</button>
<div class="tw-tooltip tw-tooltip--align-right tw-tooltip--up">
<div class="ffz-il-tooltip ffz-il-tooltip--align-right ffz-il-tooltip--up">
{ this.i18n.t('metadata.uptime.copy', 'Copy to Clipboard') }
</div>
</div>}
@ -637,7 +637,7 @@ export default class Metadata extends Module {
if ( def.popup && def.click ) {
el = (<div
class={`tw-align-items-center tw-inline-flex tw-relative tw-tooltip__container ffz-stat tw-stat ffz-stat--fix-padding ${border ? 'tw-mg-r-1' : 'tw-mg-r-05 ffz-mg-l--05'}`}
class={`tw-align-items-center tw-inline-flex tw-relative ffz-il-tooltip__container ffz-stat tw-stat ffz-stat--fix-padding ${border ? 'tw-mg-r-1' : 'tw-mg-r-05 ffz-mg-l--05'}`}
data-key={key}
tip_content={null}
>
@ -764,7 +764,7 @@ export default class Metadata extends Module {
icon = (<span class="tw-stat__icon"><figure class={icon} /></span>);
el = (<div
class={`tw-align-items-center tw-inline-flex tw-relative tw-tooltip__container ffz-stat tw-stat tw-mg-r-1${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
class={`tw-align-items-center tw-inline-flex tw-relative ffz-il-tooltip__container ffz-stat tw-stat tw-mg-r-1${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
data-tooltip-type="metadata"
data-key={key}
tip_content={null}

2
src/modules/translation_ui/components/i18n-entry.vue
View file

@ -93,7 +93,7 @@
</div>
<button
class="tw-button-icon tw-mg-l-05 tw-relative tw-tooltip__container"
class="tw-button-icon tw-mg-l-05 tw-relative ffz-il-tooltip__container"
@click="open = false"
>
<span class="tw-button-icon__icon">

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

@ -26,27 +26,27 @@
</div>
</div>
</div>
<button class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="saveBlob">
<button class="tw-button-icon tw-mg-x-05 tw-relative ffz-il-tooltip__container" @click="saveBlob">
<span class="tw-button-icon__icon">
<figure class="ffz-i-floppy" />
</span>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('i18n.ui.save', 'Generate Change Blob') }}
</div>
</button>
<button v-if="can_upload" class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="uploadBlob">
<button v-if="can_upload" class="tw-button-icon tw-mg-x-05 tw-relative ffz-il-tooltip__container" @click="uploadBlob">
<span class="tw-button-icon__icon">
<figure class="ffz-i-upload-cloud" />
</span>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('i18n.ui.upload', 'Upload Changes') }}
</div>
</button>
<button class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="requestKeys">
<button class="tw-button-icon tw-mg-x-05 tw-relative ffz-il-tooltip__container" @click="requestKeys">
<span class="tw-button-icon__icon">
<figure class="ffz-i-arrows-cw" />
</span>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('i18n.ui.refresh', 'Refresh Strings') }}
</div>
</button>
@ -55,11 +55,11 @@
<figure :class="faded ? 'ffz-i-eye-off' : 'ffz-i-eye'" />
</span>
</button>
<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="popout">
<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05 tw-relative ffz-il-tooltip__container" @click="popout">
<span class="tw-button-icon__icon">
<figure class="ffz-i-link-ext" />
</span>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-center">
{{ t('i18n.ui.popout', 'Open the Translation Editor in a New Window') }}
</div>
</button>
@ -76,11 +76,11 @@
</header>
<section class="tw-border-t tw-full-height tw-full-width tw-flex tw-flex-column tw-overflow-hidden">
<header class="tw-border-b tw-pd-05 tw-c-background-base tw-flex tw-align-items-center">
<button class="tw-border-radius-medium tw-pd-x-05 ffz-core-button ffz-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip__container" @click="prevPage">
<button class="tw-border-radius-medium tw-pd-x-05 ffz-core-button ffz-core-button--text tw-c-text-base tw-interactive tw-relative ffz-il-tooltip__container" @click="prevPage">
<span class="tw-button-icon__icon">
<figure class="ffz-i-left-dir" />
</span>
<div class="tw-tooltip tw-tooltip--down">
<div class="ffz-il-tooltip ffz-il-tooltip--down">
{{ t('page.previous', 'Previous Page') }}
</div>
</button>
@ -105,17 +105,17 @@
@keydown.enter="closePage"
@blur="closePage"
>
<button class="tw-border-radius-medium tw-pd-x-05 ffz-core-button ffz-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip__container" @click="nextPage">
<button class="tw-border-radius-medium tw-pd-x-05 ffz-core-button ffz-core-button--text tw-c-text-base tw-interactive tw-relative ffz-il-tooltip__container" @click="nextPage">
<span class="tw-button-icon__icon">
<figure class="ffz-i-right-dir" />
</span>
<div class="tw-tooltip tw-tooltip--down">
<div class="ffz-il-tooltip ffz-il-tooltip--down">
{{ t('page.next', 'Next Page') }}
</div>
</button>
<div class="tw-flex-grow-1" />
<button
class="tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
class="tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative ffz-il-tooltip__container"
:class="[mode === 0 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
@click="mode = 0"
>
@ -125,13 +125,13 @@
{{ total }}
</div>
</div>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('i18n.ui.all', 'All Strings') }}
</div>
</button>
<button
v-if="existing != total"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative ffz-il-tooltip__container"
:class="[mode === 1 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
@click="mode = 1"
>
@ -141,13 +141,13 @@
{{ existing }}
</div>
</div>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('i18n.ui.existing', 'Existing Strings') }}
</div>
</button>
<button
v-if="added"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative ffz-il-tooltip__container"
:class="[mode === 2 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
@click="mode = 2"
>
@ -157,13 +157,13 @@
{{ added }}
</div>
</div>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('i18n.ui.added', 'New Strings') }}
</div>
</button>
<button
v-if="changed"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative ffz-il-tooltip__container"
:class="[mode === 3 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
@click="mode = 3"
>
@ -173,13 +173,13 @@
{{ changed }}
</div>
</div>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('i18n.ui.changed', 'Changed Strings') }}
</div>
</button>
<button
v-if="pending"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative ffz-il-tooltip__container"
:class="[mode === 4 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
@click="mode = 4"
>
@ -189,13 +189,13 @@
{{ pending }}
</div>
</div>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('i18n.ui.pending', 'Pending Strings') }}
</div>
</button>
<button
v-if="invalid"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative ffz-il-tooltip__container"
:class="[mode === 5 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
@click="mode = 5"
>
@ -205,7 +205,7 @@
{{ invalid }}
</div>
</div>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('i18n.ui.invalid', 'Invalid Strings') }}
</div>
</button>

8
src/settings/components/if.vue
View file

@ -16,9 +16,9 @@
<div class="tw-border-t tw-mg-t-05 tw-pd-t-05">
<header class="tw-flex tw-align-items-center">
<div class="ffz--profile__icon tw-pd-r-05 tw-pd-y-05 tw-relative tw-tooltip__container">
<div class="ffz--profile__icon tw-pd-r-05 tw-pd-y-05 tw-relative ffz-il-tooltip__container">
<figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
<span v-if="passes">
{{ t('setting.filters.if.pass', 'This branch is active because the condition is true.') }}
</span>
@ -43,9 +43,9 @@
<div class="tw-border-t tw-mg-t-05 tw-pd-t-05">
<header class="tw-flex tw-align-items-center">
<div class="ffz--profile__icon tw-pd-r-05 tw-pd-y-05 tw-relative tw-tooltip__container">
<div class="ffz--profile__icon tw-pd-r-05 tw-pd-y-05 tw-relative ffz-il-tooltip__container">
<figure :class="[passes ? 'ffz-i-cancel' : 'ffz-i-ok']" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
<span v-if="passes">
{{ t('setting.filters.if.no_fail', 'This branch is not active because the condition is true.') }}
</span>

12
src/settings/components/title.vue
View file

@ -5,15 +5,15 @@
{{ t(type.i18n, type.title) }}
</div>
<div v-if="! is_valid" class="tw-relative tw-tooltip__container tw-mg-r-05">
<div v-if="! is_valid" class="tw-relative ffz-il-tooltip__container tw-mg-r-05">
<figure class="tw-c-text-error ffz-i-attention" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
{{ t('settings.filter.title.warn-invalid', 'This pattern is invalid.') }}
</div>
</div>
<div v-else-if="! is_safe" class="tw-relative tw-tooltip__container tw-mg-r-05">
<div v-else-if="! is_safe" class="tw-relative ffz-il-tooltip__container tw-mg-r-05">
<figure class="tw-c-text-error ffz-i-attention" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
{{ t('settings.filter.title.warn-complex', 'This pattern is potentially too complex. It will be disabled to avoid client lag or freezing.') }}
</div>
</div>
@ -50,10 +50,10 @@
type="checkbox"
class="ffz-min-width-unset ffz-checkbox__input"
>
<label :for="'sensitive$' + id" class="ffz-min-width-unset ffz-checkbox__label tw-relative tw-tooltip__container">
<label :for="'sensitive$' + id" class="ffz-min-width-unset ffz-checkbox__label tw-relative ffz-il-tooltip__container">
<span class="tw-mg-l-05">
Aa
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('settings.filter.title.sensitive', 'Case Sensitive') }}
</div>
</span>

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

@ -125,7 +125,7 @@ export default class Metadata extends Module {
value={url}
onFocus={e => e.target.select()}
/>
{can_copy && <div class="tw-relative tw-tooltip__container tw-mg-l-1">
{can_copy && <div class="tw-relative ffz-il-tooltip__container tw-mg-l-1">
<button
class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
aria-label={ this.i18n.t('metadata.uptime.copy', 'Copy to Clipboard') }
@ -137,7 +137,7 @@ export default class Metadata extends Module {
</span>
</div>
</button>
<div class="tw-tooltip tw-tooltip--align-right tw-tooltip--up">
<div class="ffz-il-tooltip ffz-il-tooltip--align-right ffz-il-tooltip--up">
{ this.i18n.t('metadata.uptime.copy', 'Copy to Clipboard') }
</div>
</div>}
@ -482,7 +482,7 @@ export default class Metadata extends Module {
if ( def.popup && def.click ) {
el = (<div
class={`tw-align-items-center tw-inline-flex tw-relative tw-tooltip__container ffz-stat tw-stat ffz-stat--fix-padding ${border ? 'tw-mg-r-1' : 'tw-mg-r-05'}`}
class={`tw-align-items-center tw-inline-flex tw-relative ffz-il-tooltip__container ffz-stat tw-stat ffz-stat--fix-padding ${border ? 'tw-mg-r-1' : 'tw-mg-r-05'}`}
data-key={key}
tip_content={null}
>
@ -609,7 +609,7 @@ export default class Metadata extends Module {
icon = (<span class="tw-stat__icon"><figure class={icon} /></span>);
el = (<div
class={`tw-align-items-center tw-inline-flex tw-relative tw-tooltip__container ffz-stat tw-stat tw-mg-r-1${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
class={`tw-align-items-center tw-inline-flex tw-relative ffz-il-tooltip__container ffz-stat tw-stat tw-mg-r-1${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
data-tooltip-type="metadata"
data-key={key}
tip_content={null}

36
src/sites/shared/player.jsx
View file

@ -1182,7 +1182,7 @@ export default class PlayerBase extends Module {
extra.textContent = `${Math.round(value * 100)}%`;
};
cont = (<div class="ffz--player-gain volume-slider__slider-container tw-relative tw-tooltip__container">
cont = (<div class="ffz--player-gain volume-slider__slider-container tw-relative ffz-il-tooltip__container">
<div class="tw-align-items-center tw-flex tw-full-height">
<label class="tw-hide-accessible">{this.i18n.t('player.gain.label','Gain Control')}</label>
<div class="tw-flex tw-full-width tw-relative tw-z-above">
@ -1205,7 +1205,7 @@ export default class PlayerBase extends Module {
</div>
</div>
</div>
{tipcont = (<div class="tw-tooltip tw-tooltip--align-center tw-tooltip--up" role="tooltip">
{tipcont = (<div class="ffz-il-tooltip ffz-il-tooltip--align-center ffz-il-tooltip--up" role="tooltip">
<div>
{tip = (<div class="ffz--p-tip" />)}
{extra = (<div class="tw-regular ffz--p-value" />)}
@ -1226,9 +1226,9 @@ export default class PlayerBase extends Module {
else {
input = cont.querySelector('input');
fill = cont.querySelector('.ffz--gain-value');
tipcont = cont.querySelector('.tw-tooltip');
tip = cont.querySelector('.tw-tooltip .ffz--p-tip');
extra = cont.querySelector('.tw-tooltip .ffz--p-value');
tipcont = cont.querySelector('.ffz-il-tooltip');
tip = cont.querySelector('.ffz-il-tooltip .ffz--p-tip');
extra = cont.querySelector('.ffz-il-tooltip .ffz--p-value');
}
let value = video._ffz_gain_value;
@ -1272,7 +1272,7 @@ export default class PlayerBase extends Module {
}
if ( ! cont ) {
cont = (<div class="ffz--player-comp tw-inline-flex tw-relative tw-tooltip__container">
cont = (<div class="ffz--player-comp tw-inline-flex tw-relative ffz-il-tooltip__container">
{btn = (<button
class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
type="button"
@ -1285,7 +1285,7 @@ export default class PlayerBase extends Module {
</div>
</div>
</button>)}
<div class="tw-tooltip tw-tooltip--align-left tw-tooltip--up" role="tooltip">
<div class="ffz-il-tooltip ffz-il-tooltip--align-left ffz-il-tooltip--up" role="tooltip">
<div>
{tip = (<div class="ffz--p-tip" />)}
{extra = (<div class="ffz--p-extra tw-pd-t-05 ffz--tooltip-explain" />)}
@ -1300,8 +1300,8 @@ export default class PlayerBase extends Module {
else {
icon = cont.querySelector('figure');
btn = cont.querySelector('button');
tip = cont.querySelector('.tw-tooltip .ffz--p-tip');
extra = cont.querySelector('.tw-tooltip .ffz--p-extra');
tip = cont.querySelector('.ffz-il-tooltip .ffz--p-tip');
extra = cont.querySelector('.ffz-il-tooltip .ffz--p-extra');
}
const comp_active = video._ffz_compressed,
@ -1637,7 +1637,7 @@ export default class PlayerBase extends Module {
}
if ( ! cont ) {
cont = (<div class="ffz--player-pip tw-inline-flex tw-relative tw-tooltip__container">
cont = (<div class="ffz--player-pip tw-inline-flex tw-relative ffz-il-tooltip__container">
{btn = (<button
class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
type="button"
@ -1650,7 +1650,7 @@ export default class PlayerBase extends Module {
</div>
</div>
</button>)}
{tip = (<div class="tw-tooltip tw-tooltip--align-right tw-tooltip--up" role="tooltip" />)}
{tip = (<div class="ffz-il-tooltip ffz-il-tooltip--align-right ffz-il-tooltip--up" role="tooltip" />)}
</div>);
let thing = container.querySelector('button[data-a-target="player-theatre-mode-button"]');
@ -1665,7 +1665,7 @@ export default class PlayerBase extends Module {
} else {
icon = cont.querySelector('figure');
btn = cont.querySelector('button');
tip = cont.querySelector('.tw-tooltip');
tip = cont.querySelector('.ffz-il-tooltip');
}
const pip_active = !!document.pictureInPictureElement,
@ -1740,7 +1740,7 @@ export default class PlayerBase extends Module {
}
if ( ! cont ) {
cont = (<div class="ffz--player-reset tw-inline-flex tw-relative tw-tooltip__container">
cont = (<div class="ffz--player-reset tw-inline-flex tw-relative ffz-il-tooltip__container">
{btn = (<button
class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
type="button"
@ -1754,7 +1754,7 @@ export default class PlayerBase extends Module {
</div>
</div>
</button>)}
{tip = (<div class="tw-tooltip tw-tooltip--align-right tw-tooltip--up" role="tooltip" />)}
{tip = (<div class="ffz-il-tooltip ffz-il-tooltip--align-right ffz-il-tooltip--up" role="tooltip" />)}
</div>);
const thing = container.querySelector('.ffz--player-pip button') || container.querySelector('button[data-a-target="player-theatre-mode-button"]') || container.querySelector('button[data-a-target="player-fullscreen-button"]');
@ -1765,7 +1765,7 @@ export default class PlayerBase extends Module {
} else {
btn = cont.querySelector('button');
tip = cont.querySelector('.tw-tooltip');
tip = cont.querySelector('.ffz-il-tooltip');
}
btn.setAttribute('aria-label',
@ -1808,7 +1808,7 @@ export default class PlayerBase extends Module {
}
if ( ! cont ) {
cont = (<div class="ffz--player-reset tw-absolute tw-bottom-0 tw-right-0 tw-tooltip__container tw-mg-1">
cont = (<div class="ffz--player-reset tw-absolute tw-bottom-0 tw-right-0 ffz-il-tooltip__container tw-mg-1">
{btn = (<button
class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-button-icon--overlay ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
type="button"
@ -1822,14 +1822,14 @@ export default class PlayerBase extends Module {
</div>
</div>
</button>)}
{tip = (<div class="tw-tooltip tw-tooltip--align-right tw-tooltip--up" role="tooltip" />)}
{tip = (<div class="ffz-il-tooltip ffz-il-tooltip--align-right ffz-il-tooltip--up" role="tooltip" />)}
</div>);
container.appendChild(cont);
} else {
btn = cont.querySelector('button');
tip = cont.querySelector('.tw-tooltip');
tip = cont.querySelector('.ffz-il-tooltip');
}
btn.setAttribute('aria-label',

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

@ -541,7 +541,7 @@ export default class EmoteMenu extends Module {
const tones = Object.entries(emoji.variants).map(([tone, emoji]) => this.renderTone(emoji, tone));
return (<div class="tw-absolute ffz-balloon tw-tooltip--up tw-tooltip--align-right ffz-balloon tw-block">
return (<div class="tw-absolute ffz-balloon ffz-il-tooltip--up ffz-il-tooltip--align-right ffz-balloon tw-block">
<div class="tw-border-b tw-border-l tw-border-r tw-border-t tw-border-radius-medium tw-c-background-base tw-elevation-1">
{this.renderTone(emoji, null)}
{tones}
@ -1013,7 +1013,7 @@ export default class EmoteMenu extends Module {
const padding = t.chat.context.get('chat.emote-menu.reduced-padding');
return (<div
class={`ffz-balloon ffz-balloon--md tw-tooltip--up tw-tooltip--align-right tw-block tw-absolute ffz--emote-picker${padding ? ' reduced-padding' : ''}`}
class={`ffz-balloon ffz-balloon--md ffz-il-tooltip--up ffz-il-tooltip--align-right tw-block tw-absolute ffz--emote-picker${padding ? ' reduced-padding' : ''}`}
data-a-target="emote-picker"
>
<div class="tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base">
@ -2425,7 +2425,7 @@ export default class EmoteMenu extends Module {
choices={this.state.tone_emoji}
pickTone={this.pickTone}
/>}
{(no_tabs || ! is_emoji) && <div class="tw-relative tw-tooltip__container tw-mg-l-1">
{(no_tabs || ! is_emoji) && <div class="tw-relative ffz-il-tooltip__container tw-mg-l-1">
<button
class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon--primary ffz-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative${this.state.visibility_control ? ' ffz-core-button--primary' : ' tw-button-icon'}`}
onClick={this.toggleVisibilityControl}
@ -2434,7 +2434,7 @@ export default class EmoteMenu extends Module {
<figure class={this.state.visibility_control ? 'ffz-i-eye-off' : 'ffz-i-eye'} />
</span>
</button>
<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--up ffz-il-tooltip--align-right">
{this.state.visibility_control ?
t.i18n.t('emote-menu.toggle-hide.on', 'Exit Emote Visibility Control') :
t.i18n.t('emote-menu.toggle-hide.off', 'Emote Visibility Control')

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

@ -323,7 +323,7 @@ export default class ChatLine extends Module {
className: 'chat-line__message--badges'
}, t.chat.badges.render(msg, e)),
e('span', {
className: `chat-line__username notranslate${override_name ? ' ffz--name-override tw-relative tw-tooltip__container' : ''}`,
className: `chat-line__username notranslate${override_name ? ' ffz--name-override tw-relative ffz-il-tooltip__container' : ''}`,
role: 'button',
style: { color },
onClick: this.ffz_user_click_handler,
@ -333,7 +333,7 @@ export default class ChatLine extends Module {
className: 'chat-author__display-name'
}, override_name),
e('div', {
className: 'tw-tooltip tw-tooltip--down tw-tooltip--align-center'
className: 'ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-center'
}, user_block)
] : user_block)
]);
@ -522,7 +522,7 @@ other {# messages were deleted by a moderator.}
className: 'chat-line__message--badges'
}, t.chat.badges.render(msg, e)),
e('span', {
className: `chat-line__username notranslate${override_name ? ' ffz--name-override tw-relative tw-tooltip__container' : ''}`,
className: `chat-line__username notranslate${override_name ? ' ffz--name-override tw-relative ffz-il-tooltip__container' : ''}`,
role: 'button',
style: { color },
onClick: this.ffz_user_click_handler,
@ -532,7 +532,7 @@ other {# messages were deleted by a moderator.}
className: 'chat-author__display-name'
}, override_name),
e('div', {
className: 'tw-tooltip tw-tooltip--down tw-tooltip--align-center'
className: 'ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-center'
}, user_block)
] : user_block)
];

6
src/sites/twitch-twilight/modules/directory/index.jsx
View file

@ -413,14 +413,14 @@ export default class Directory extends SiteModule {
el.ffz_uptime_el = container.querySelector('.ffz-uptime-element');
if ( ! el.ffz_uptime_el )
container.appendChild(el.ffz_uptime_el = (<div class="ffz-uptime-element tw-absolute tw-right-0 tw-top-0 tw-mg-1">
<div class="tw-relative tw-tooltip__container">
<div class="tw-relative ffz-il-tooltip__container">
<div class="tw-border-radius-small tw-c-background-overlay tw-c-text-overlay tw-flex tw-pd-x-05">
<div class="tw-flex tw-c-text-live">
<figure class="ffz-i-clock" />
</div>
{el.ffz_uptime_span = <p />}
</div>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{this.i18n.t('metadata.uptime.tooltip', 'Stream Uptime')}
{el.ffz_uptime_tt = <div class="tw-pd-t-05" />}
</div>
@ -434,7 +434,7 @@ export default class Directory extends SiteModule {
return this.clearUptime(el);
if ( ! el.ffz_uptime_tt )
el.ffz_uptime_tt = el.ffz_uptime_el.querySelector('.tw-tooltip > div');
el.ffz_uptime_tt = el.ffz_uptime_el.querySelector('.ffz-il-tooltip > div');
if ( ! el.ffz_uptime_tt )
return this.clearUptime(el);

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

@ -452,7 +452,7 @@ export default class MenuButton extends SiteModule {
</span>) : null }
</div>) : null}
{ ! data.unclosable && (<button
class="tw-button-icon tw-mg-l-05 tw-relative tw-tooltip__container"
class="tw-button-icon tw-mg-l-05 tw-relative ffz-il-tooltip__container"
onClick={data._remove}
>
<span class="tw-button-icon__icon">
@ -544,7 +544,7 @@ export default class MenuButton extends SiteModule {
el = (<div
class={`ffz-top-nav ${is_mod ? 'ffz-mod-view-button tw-relative tw-mg-b-1' : `tw-align-self-center tw-flex-grow-0 tw-flex-nowrap tw-flex-shrink-0 tw-relative ${is_sunlight ? 'tw-mg-l-05 tw-mg-r-2' : 'tw-mg-x-05'}`}`}
>
<div class="tw-inline-flex tw-relative tw-tooltip__container">
<div class="tw-inline-flex tw-relative ffz-il-tooltip__container">
{btn = (<button
class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative${this.loading ? ' loading' : ''}`}
onClick={e => this.handleClick(e, btn)} // eslint-disable-line react/jsx-no-bind
@ -556,14 +556,14 @@ export default class MenuButton extends SiteModule {
</span>
</div>
</button>)}
{this.has_error && (<div class={`tw-absolute ffz-balloon ffz-balloon--lg tw-block ${is_mod ? 'tw-tooltip--up tw-tooltip--align-left' : 'tw-tooltip--down tw-tooltip--align-right'}`}>
{this.has_error && (<div class={`tw-absolute ffz-balloon ffz-balloon--lg tw-block ${is_mod ? 'ffz-il-tooltip--up ffz-il-tooltip--align-left' : 'ffz-il-tooltip--down ffz-il-tooltip--align-right'}`}>
<div class="tw-border-radius-large tw-c-background-base tw-c-text-inherit tw-elevation-4 tw-pd-1">
<div class="tw-flex tw-align-items-center">
<div class="tw-flex-grow-1">
{ this.error.i18n ? this.i18n.t(this.error.i18n, this.error.text) : this.error.text }
</div>
{this.error.permanent ? null : (<button
class="tw-button-icon tw-mg-l-05 tw-relative tw-tooltip__container"
class="tw-button-icon tw-mg-l-05 tw-relative ffz-il-tooltip__container"
onClick={() => this.error = null} // eslint-disable-line react/jsx-no-bind
>
<span class="tw-button-icon__icon">
@ -573,7 +573,7 @@ export default class MenuButton extends SiteModule {
</div>
</div>
</div>)}
<div class={`tw-tooltip ${is_mod ? 'tw-tooltip--up tw-tooltip--align-left' : 'tw-tooltip--down tw-tooltip--align-right'}`}>
<div class={`ffz-il-tooltip ${is_mod ? 'ffz-il-tooltip--up ffz-il-tooltip--align-left' : 'ffz-il-tooltip--down ffz-il-tooltip--align-right'}`}>
{this.i18n.t('site.menu_button', 'FrankerFaceZ Control Center')}
{this.has_update && (<div class="tw-mg-t-1">
{this.i18n.t('site.menu_button.update-desc', 'There is an update available. Please refresh your page.')}
@ -601,7 +601,7 @@ export default class MenuButton extends SiteModule {
</div>
</div>
{(inst || container)._ffz_toast_el = (<div
class={`ffz-toast--container tw-absolute tw-block ${is_mod ? 'tw-tooltip--up tw-tooltip--align-left' : 'tw-tooltip--down tw-tooltip--align-right'}`}
class={`ffz-toast--container tw-absolute tw-block ${is_mod ? 'ffz-il-tooltip--up ffz-il-tooltip--align-left' : 'ffz-il-tooltip--down ffz-il-tooltip--align-right'}`}
onmouseenter={this.pauseToasts}
onmouseleave={this.unpauseToasts}
>
@ -737,7 +737,7 @@ export default class MenuButton extends SiteModule {
<div class="tw-border-radius-large tw-c-background-base tw-c-text-inherit tw-elevation-4">
<div class="tw-c-text-base tw-elevation-1 tw-flex tw-flex-shrink-0 tw-pd-x-1 tw-pd-y-05 tw-popover-header">
<div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--left">
<div class="tw-inline-flex tw-relative tw-tooltip__container">
<div class="tw-inline-flex tw-relative ffz-il-tooltip__container">
<button
class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden"
onDblClick={() => {this.emit('site.player:reset'); destroy()}} // eslint-disable-line react/jsx-no-bind
@ -746,7 +746,7 @@ export default class MenuButton extends SiteModule {
<figure class="ffz-i-t-reset" />
</span>
</button>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-left">
{ this.i18n.t('player.reset_button.all', 'Reset All Players (Double-Click)') }
</div>
</div>
@ -757,7 +757,7 @@ export default class MenuButton extends SiteModule {
</h5>
</div>
<div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--right">
<div class="tw-inline-flex tw-relative tw-tooltip__container">
<div class="tw-inline-flex tw-relative ffz-il-tooltip__container">
<button
class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden"
onClick={e => {this.openSettings(e, btn); destroy()}} // eslint-disable-line react/jsx-no-bind
@ -766,7 +766,7 @@ export default class MenuButton extends SiteModule {
<figure class="ffz-i-cog" />
</span>
</button>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-center">
{ this.i18n.t('setting.profiles.configure', 'Configure') }
</div>
</div>

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

@ -357,11 +357,11 @@ 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 tw-tooltip__container">
<span class="tw-c-text-alt-2 tw-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
}) }
<div class="tw-tooltip tw-tooltip--align-center tw-tooltip--up" role="tooltip">
<div class="ffz-il-tooltip ffz-il-tooltip--align-center ffz-il-tooltip--up" role="tooltip">
{ t.i18n.formatDateTime(msg.timestamp, 'full') }
</div>
</span>
@ -394,13 +394,13 @@ export default class VideoChatHook extends Module {
>
{hide_timestamps || (<div data-test-selector="message-timestamp" class="tw-align-right tw-flex tw-flex-shrink-0 vod-message__header">
<div class="tw-mg-r-05">
<div class="tw-inline-flex tw-relative tw-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}>
<div class="tw-pd-x-05">
<p class="tw-font-size-7">{print_duration(context.comment.contentOffset)}</p>
</div>
</button>
<div class="tw-tooltip tw-tooltip--align-left tw-tooltip--up" role="tooltip">
<div class="ffz-il-tooltip ffz-il-tooltip--align-left ffz-il-tooltip--up" role="tooltip">
{t.i18n.t('video-chat.jump', 'Jump to Video')}
</div>
</div>

4
src/std-components/balloon.vue
View file

@ -34,9 +34,9 @@ export default {
if ( this.dir ) {
dir = this.dir.split('-').map(d => {
if ( d === 'up' || d === 'down' )
return `tw-tooltip--${d}`;
return `ffz-il-tooltip--${d}`;
if ( d === 'left' || d === 'right' )
return `tw-tooltip--align-${d}`;
return `ffz-il-tooltip--align-${d}`;
return '';
}).join(' ');
}

6
src/std-components/color-picker.vue
View file

@ -33,7 +33,7 @@
</div>
<div
v-else
:class="{'tw-tooltip__container': hasTooltip}"
:class="{'ffz-il-tooltip__container': hasTooltip}"
class="tw-relative"
>
<button
@ -51,13 +51,13 @@
v-if="open"
v-on-clickaway="closePicker"
:class="{'ffz-bottom-100': openUp}"
class="tw-absolute tw-z-above tw-tooltip--down tw-tooltip--align-right"
class="tw-absolute tw-z-above ffz-il-tooltip--down ffz-il-tooltip--align-right"
>
<chrome-picker :disable-alpha="! alpha" :value="colors" @input="onPick" />
</div>
<div
v-if="! open && hasTooltip"
class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"
class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right"
>
{{ tooltip }}
<div v-if="nullable" class="tw-regular">

4
src/std-components/icon-picker.vue
View file

@ -25,14 +25,14 @@
>
<button
v-if="clearable"
class="tw-absolute tw-right-0 tw-top-0 tw-button tw-button--text tw-tooltip__container"
class="tw-absolute tw-right-0 tw-top-0 tw-button tw-button--text ffz-il-tooltip__container"
@click="change('', false)"
@keydown.escape="open = false"
@focus="onFocus(false)"
@blur="onBlur"
>
<span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--up ffz-il-tooltip--align-right">
{{ t('setting.icon.clear', 'Clear') }}
</div>
</button>

4
src/std-components/key-picker.vue
View file

@ -23,11 +23,11 @@
</div>
<button
class="ffz-button--hollow ffz-clear-key tw-absolute tw-top-0 tw-bottom-0 tw-right-0 tw-border-l tw-z-default tw-pd-x-1 tw-tooltip__container"
class="ffz-button--hollow ffz-clear-key tw-absolute tw-top-0 tw-bottom-0 tw-right-0 tw-border-l tw-z-default tw-pd-x-1 ffz-il-tooltip__container"
@click="clear"
>
<figure class="ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<div class="ffz-il-tooltip ffz-il-tooltip--down ffz-il-tooltip--align-right">
{{ t('setting.clear', 'Clear') }}
</div>
</button>

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

@ -1,9 +1,9 @@
<template functional>
<div class="tw-relative tw-tooltip__container">
<div class="tw-relative ffz-il-tooltip__container">
<slot />
<div
:class="`tw-tooltip--align-${props.align||'center'} tw-tooltip--${props.above ? 'up' : 'down'}`"
class="tw-tooltip"
:class="`ffz-il-tooltip--align-${props.align||'center'} ffz-il-tooltip--${props.above ? 'up' : 'down'}`"
class="ffz-il-tooltip"
>
<slot name="tooltip" />
</div>

2
src/utilities/markdown.js
View file

@ -19,8 +19,6 @@ function loadMD() {
import(/* webpackChunkName: 'markdown' */ 'markdown-it'),
import(/* webpackChunkName: 'markdown' */ 'markdown-it-link-attributes')
]).then(modules => {
console.log('loaded', modules);
MD = modules[0]?.default;
MILA = modules[1]?.default;

179
styles/native/balloon.scss Normal file
View file

@ -0,0 +1,179 @@
.ffz-balloon {
max-width: 90vw;
min-width: 16rem;
z-index: 2000;
& > &__tail {
height: 16px;
width: 16px;
& .ffz-balloon-symbol {
height: 8px;
transform: rotate(45deg) translate(-50%,-50%);
transform-origin: 0 0;
width: 8px;
}
}
&--overlay-border {
border: 2px solid var(--color-border-balloon-overlay);
}
&--left {
margin-right: 8px;
right: 100%;
& > .ffz-balloon__tail {
left: 100%;
margin-left: -1px;
& .ffz-balloon__tail-symbol {
right: 8px;
}
}
}
&--right {
left: 100%;
margin-left: 8px;
& > .ffz-balloon__tail {
margin-right: -1px;
right: 100%;
& .ffz-balloon__tail-symbol {
right: -8px;
}
}
}
&--left, &--right {
top: 0;
& > .ffz-balloon__tail {
top: 8px;
& .ffz-balloon__tail-symbol {
top: 50%;
}
}
&.ffz-balloon--center {
top: 50%;
transform: translateY(-50%);
& > .ffz-balloon__tail {
margin-top: -5.33333px;
top: 50%;
}
}
}
&--up {
bottom: 100%;
left: 0;
margin-bottom: 8px;
top: auto;
& > .ffz-balloon__tail {
margin-top: -1px;
top: 100%;
& .ffz-balloon__tail-symbol {
bottom: 8px;
top: auto;
}
}
}
&--down, &--up {
& > .ffz-balloon__tail .ffz-balloon__tail-symbol {
left: 50%;
}
&.ffz-balloon--left {
left: 0;
right: auto;
& > .ffz-balloon__tail {
left: 0;
}
}
&.ffz-balloon--center {
left: 50%;
transform: translateX(-50%);
& > .ffz-balloon__tail {
left: 50%;
margin-left: -8px;
}
}
&.ffz-balloon--right {
left: auto;
right: 0;
& > .ffz-balloon__tail {
left: 100%;
margin-left: -16px;
top: 100%;
}
}
}
&--down {
left: 0;
margin-top: 8px;
top: 100%;
& > .ffz-balloon__tail {
bottom: 100%;
margin-bottom: -1px;
& .ffz-balloon__tail-symbol {
bottom: -8px;
top: auto;
}
}
&.ffz-balloon--right {
top: 100%;
& > .ffz-balloon__tail {
left: 100%;
margin-left: -16px;
top: auto;
}
}
}
&--xs {
min-width: 10rem;
width: 10rem;
}
&--auto {
min-width: 0;
white-space: nowrap;
}
&--sm { width: 20rem }
&--md { width: 30rem }
&--lg { width: 40rem }
&--xl { width: 50rem }
}
.tw-attached {
position: absolute;
z-index: var(--z-index-balloon);
&--up { margin-bottom: 0 }
&--down { margin-top: 0 }
&--left { margin-right: 0 }
&--right { margin-left: 0 }
&--up.tw-attached--right {
inset: auto 0px 100% auto;
}
}

2
styles/native/index.scss
View file

@ -6,3 +6,5 @@
@import "card";
@import "tag";
@import "progress";
@import "tooltip";
@import "balloon";

145
styles/native/tooltip.scss Normal file
View file

@ -0,0 +1,145 @@
.ffz-il-tooltip {
user-select: none;
background-color: var(--color-background-tooltip);
border-radius: var(--border-radius-medium);
color: var(--color-text-tooltip);
font-size: var(--font-size-6);
font-weight: var(--font-weight-semibold);
line-height: var(--line-height-heading);
display: none;
position: absolute;
text-align: left;
padding: 3px 6px;
pointer-events: none;
white-space: nowrap;
z-index: var(--z-index-balloon);
display: none;
.tw-root--hover &__container:hover &,
.tw-root--touch &__container:hover &,
&__container--show & {
display: block;
}
&:before,&:after {
content: '';
position: absolute;
}
&:before {
height: calc(100% + 12px);
left: -6px;
top: -6px;
width: calc(100% + 12px);
z-index: -1;
}
&:after {
background-color: var(--color-background-tooltip);
height: 6px;
transform: rotate(45deg);
width: 6px;
z-index: -1;
}
&--wrap { white-space: normal; }
&--left {
left: auto;
margin-right: 6px;
right: 100%;
top: 0;
&:after {
border-radius: 0 var(--border-radius-small) 0 0;
left: 100%;
margin-left: -3px;
top: 6px;
}
}
&--right {
left: 100%;
margin-left: 6px;
top: 0;
&:after {
border-radius: 0 0 0 var(--border-radius-small);
left: 0;
margin-left: -3px;
top: 6px;
}
}
&--left.ffz-il-tooltip--align-center,
&--right.ffz-il-tooltip--align-center {
top: 50%;
transform: translateY(-50%);
&:after {
margin-top: -3px;
top: 50%;
}
}
&--up {
bottom: 100%;
left: 0;
margin-bottom: 6px;
top: auto;
&:after {
border-radius: 0 0 var(--border-radius-small);
left: 6px;
margin-top: -3px;
top: 100%;
}
}
&--down {
left: 0;
margin-top: 6px;
top: 100%;
&:after {
border-radius: var(--border-radius-small) 0 0;
left: 6px;
top: -3px;
}
}
&--down.ffz-il-tooltip--align-center,
&--up.ffz-il-tooltip--align-center {
left: 50%;
transform: translateX(-50%);
&:after {
left: 50%;
margin-left: -3px;
}
}
&--down.ffz-il-tooltip--align-right,
&--up.ffz-il-tooltip--align-right {
left: auto;
right: 0;
top: auto;
&:after {
left: 100%;
margin-left: -12px;
top: 100%;
}
}
&--down.ffz-il-tooltip--align-right {
top: 100%;
&:after {
top: -3px;
}
}
}

4
styles/structure/balloon.scss
View file

@ -1,4 +1,4 @@
.ffz-balloon {
/*.ffz-balloon {
max-width: 90vw;
min-width: 16rem;
@ -20,4 +20,4 @@
.ffz-balloon--overlay-border {
border: 2px solid var(--color-border-balloon-overlay);
}
}*/