oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-03 00:18:31 +00:00
Code Wiki Activity

4.20.56

Browse source 
* Fixed: Appearance issues caused by Twitch making changes to their site CSS, including white backgrounds for icons and incorrect placement of menus.
This commit is contained in:
SirStendec 2020-12-17 16:51:26 -05:00
parent 05cf8fa1fd
commit 9a2a6f2acf
39 changed files with 299 additions and 285 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.20.55",
"version": "4.20.56",
"description": "FrankerFaceZ is a Twitch enhancement suite.",
"license": "Apache-2.0",
"scripts": {

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

@ -26,7 +26,7 @@
>
<button
class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper"
class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container"
:class="{'tw-button--disabled': name == null}"
@click="clearName"
>
@ -52,7 +52,7 @@
/>
<button
class="tw-mg-l-05 tw-button tw-button--text tw-tooltip-wrapper"
class="tw-mg-l-05 tw-button tw-button--text tw-tooltip__container"
:class="{'tw-button--disabled': color == null}"
@click="clearColor"
>

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

@ -50,7 +50,7 @@
<button
v-if="external"
disabled
class="tw-button ffz-button--hollow tw-button--disabled tw-tooltip-wrapper tw-mg-r-1"
class="tw-button ffz-button--hollow tw-button--disabled tw-tooltip__container tw-mg-r-1"
>
<span class="tw-button__icon tw-button__icon--left">
<figure class="ffz-i-trash" />

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

@ -43,7 +43,7 @@
</figure>
</div>
</div>
<div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-relative tw-tooltip-wrapper">
<div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-relative tw-tooltip__container">
<button
v-if="editing"
:class="{active: edit_data.remove}"
@ -76,13 +76,13 @@
</button>
</div>
<div v-else-if="editing" class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="save">
<button class="tw-button tw-button--text tw-tooltip__container" @click="save">
<span class="tw-button__text ffz-i-floppy" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.save', 'Save') }}
</div>
</button>
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="cancel">
<button class="tw-button tw-button--text tw-tooltip__container" @click="cancel">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }}
@ -90,13 +90,13 @@
</button>
</div>
<div v-else-if="deleting" class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="$emit('remove', term)">
<button class="tw-button tw-button--text tw-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">
{{ t('setting.delete', 'Delete') }}
</div>
</button>
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = false">
<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = false">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }}
@ -104,13 +104,13 @@
</button>
</div>
<div v-else class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="edit">
<button class="tw-button tw-button--text tw-tooltip__container" @click="edit">
<span class="tw-button__text ffz-i-cog" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.edit', 'Edit') }}
</div>
</button>
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = true">
<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = true">
<span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.delete', 'Delete') }}

4
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-wrapper"
class="tw-mg-l-05 tw-button ffz-button--hollow tw-tooltip__container"
@click="clear"
>
<span class="tw-button__icon tw-button__icon--left">
@ -93,7 +93,7 @@
/>
</section>
<button
class="tw-mg-t-05 tw-button ffz-button--hollow tw-tooltip-wrapper"
class="tw-mg-t-05 tw-button ffz-button--hollow tw-tooltip__container"
@click="reset(i.id)"
>
<span class="tw-button__text">Reset</span>

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

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

2
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="tw-checkbox tw-relative tw-tooltip-wrapper">
<div class="tw-checkbox tw-relative tw-tooltip__container">
<input
id="nonversioned"
ref="nonversioned"

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

@ -281,7 +281,7 @@
</div>
<button
v-if="! maybe_clear && val.length"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
@click="maybe_clear = true"
>
<span class="tw-button__text ffz-i-trash">
@ -293,7 +293,7 @@
</button>
<button
v-if="maybe_clear"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
@click="doClear"
>
<span class="tw-button__text ffz-i-trash">
@ -305,7 +305,7 @@
</button>
<button
v-if="maybe_clear"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
@click="maybe_clear = false"
>
<span class="tw-button__text ffz-i-cancel">
@ -314,7 +314,7 @@
</button>
<button
v-if="! val.length && has_default"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
@click="populate"
>
<span class="tw-button__text ffz-i-trash">

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

@ -6,7 +6,7 @@
</div>
<button
v-if="! empty"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
@click="clear"
>
<span class="tw-button__text ffz-i-trash">
@ -18,7 +18,7 @@
</button>
<button
v-if="empty"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip-wrapper"
class="tw-mg-l-1 tw-button tw-button--text tw-tooltip__container"
@click="populate"
>
<span class="tw-button__text ffz-i-trash">

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

@ -105,7 +105,7 @@
<button
:disabled="exp.default"
:class="{'tw-button--disabled': exp.default}"
class="tw-mg-t-05 tw-button tw-button--text tw-tooltip-wrapper"
class="tw-mg-t-05 tw-button tw-button--text tw-tooltip__container"
@click="reset(key)"
>
<span class="tw-button__text ffz-i-cancel" />
@ -147,12 +147,12 @@
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-wrapper">
<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">
{{ t('setting.experiments.active', 'This experiment is active.') }}
</div>
</div>
<div v-else class="ffz--profile__icon ffz-i-cancel tw-tooltip-wrapper">
<div v-else class="ffz--profile__icon ffz-i-cancel tw-tooltip__container">
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
{{ t('setting.experiments.inactive', 'This experiment is not active.') }}
</div>
@ -190,7 +190,7 @@
<button
:disabled="exp.default"
:class="{'tw-button--disabled': exp.default}"
class="tw-mg-t-05 tw-button tw-button--text tw-tooltip-wrapper"
class="tw-mg-t-05 tw-button tw-button--text tw-tooltip__container"
@click="resetTwitch(key)"
>
<span class="tw-button__text ffz-i-cancel" />

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

@ -14,7 +14,7 @@
<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-wrapper"
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"
>
<figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
@ -31,7 +31,7 @@
: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-wrapper">
<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">
<figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
<span v-if="passes">
@ -44,13 +44,13 @@
</div>
<template v-if="deleting">
<button class="tw-button tw-button--text tw-relative tw-tooltip-wrapper" @click="$emit('delete')">
<button class="tw-button tw-button--text tw-relative tw-tooltip__container" @click="$emit('delete')">
<span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.delete', 'Delete') }}
</div>
</button>
<button class="tw-button tw-button--text tw-relative tw-tooltip-wrapper" @click="deleting = false">
<button class="tw-button tw-button--text tw-relative tw-tooltip__container" @click="deleting = false">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }}
@ -58,7 +58,7 @@
</button>
</template>
<template v-else>
<button class="tw-button tw-button--text tw-relative tw-tooltip-wrapper" @click="deleting = true">
<button class="tw-button tw-button--text tw-relative tw-tooltip__container" @click="deleting = true">
<span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.delete', 'Delete') }}

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

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

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

@ -33,7 +33,7 @@
<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-wrapper" @click="popout">
<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="popout">
<span class="tw-button-icon__icon">
<figure class="ffz-i-link-ext" />
</span>

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

@ -42,7 +42,7 @@
</div>
</section>
<button
class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
class="tw-button tw-button--text tw-relative tw-tooltip__container"
@click="resetExport"
>
<span class="tw-button__text ffz-i-cancel" />
@ -57,7 +57,7 @@
{{ export_message }}
</section>
<button
class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
class="tw-button tw-button--text tw-relative tw-tooltip__container"
@click="resetExport"
>
<span class="tw-button__text ffz-i-cancel" />

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

@ -32,7 +32,7 @@
</div>
</section>
<button
class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
class="tw-button tw-button--text tw-relative tw-tooltip__container"
@click="resetImport"
>
<span class="tw-button__text ffz-i-cancel" />
@ -47,7 +47,7 @@
{{ import_message }}
</section>
<button
class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
class="tw-button tw-button--text tw-relative tw-tooltip__container"
@click="resetImport"
>
<span class="tw-button__text ffz-i-cancel" />
@ -66,7 +66,7 @@
<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-wrapper"
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"
@click="importProfile(profile)"
>
<span class="tw-button__text tw-c-text-overlay">
@ -78,7 +78,7 @@
</button>
</section>
<button
class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
class="tw-button tw-button--text tw-relative tw-tooltip__container"
@click="resetImport"
>
<span class="tw-button__text ffz-i-cancel" />
@ -113,7 +113,7 @@
</button>
</section>
<button
class="tw-button tw-button--text tw-relative tw-tooltip-wrapper"
class="tw-button tw-button--text tw-relative tw-tooltip__container"
@click="resetImport"
>
<span class="tw-button__text ffz-i-cancel" />
@ -138,7 +138,7 @@
<span class="ffz-i-ellipsis-vert" />
</div>
<div v-if="p.url" class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-mg-r-1 tw-relative tw-tooltip-wrapper tw-font-size-4">
<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">
<span class="ffz-i-download-cloud" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<div class="tw-mg-b-05">
@ -171,7 +171,7 @@
'ffz-i-cancel': ! p.toggled,
'ffz-i-minus': p.toggled && ! p.live
}"
class="ffz--profile__icon tw-relative tw-tooltip-wrapper"
class="ffz--profile__icon tw-relative tw-tooltip__container"
>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<span v-if="p.live">

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

@ -18,7 +18,7 @@
<div
v-if="opened"
v-on-clickaway="hide"
class="tw-balloon tw-block tw-balloon--lg tw-balloon--down tw-balloon--left"
class="tw-balloon tw-block tw-balloon--lg tw-balloon--down tw-balloon--left tw-z-above"
>
<div
class="ffz--profile-list tw-elevation-2 tw-c-background-alt"
@ -53,7 +53,7 @@
>
<div
v-if="! p.toggled"
class="tw-tooltip-wrapper ffz--profile-row__icon ffz-i-cancel tw-absolute"
class="tw-tooltip__container ffz--profile-row__icon ffz-i-cancel tw-absolute"
>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.profiles.disabled', 'This profile is disabled.') }}
@ -61,7 +61,7 @@
</div>
<div
v-if="p.live"
class="tw-tooltip-wrapper ffz--profile-row__icon ffz-i-ok tw-absolute"
class="tw-tooltip__container ffz--profile-row__icon ffz-i-ok tw-absolute"
>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.profiles.active', 'This profile is enabled and active.') }}

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -1,13 +1,13 @@
<template lang="html">
<div class="ffz--term">
<div class="tw-align-items-center tw-flex tw-flex-nowrap tw-flex-row tw-full-width">
<div v-if="! is_valid" class="tw-relative tw-tooltip-wrapper tw-mg-r-05">
<div v-if="! is_valid" class="tw-relative tw-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">
{{ t('setting.terms.warn-invalid', 'This highlight term is invalid.') }}
</div>
</div>
<div v-if="! is_safe" class="tw-relative tw-tooltip-wrapper tw-mg-r-05">
<div v-if="! is_safe" class="tw-relative tw-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">
{{ t('setting.terms.warn-complex', 'This highlight term is potentially too complex. It may cause client lag.') }}
@ -56,7 +56,7 @@
</option>
</select>
</div>
<div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-relative tw-tooltip-wrapper">
<div v-if="removable" class="tw-flex-shrink-0 tw-mg-r-05 tw-relative tw-tooltip__container">
<button
v-if="editing"
:class="{active: edit_data.remove}"
@ -89,13 +89,13 @@
</button>
</div>
<div v-else-if="editing" class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="save">
<button class="tw-button tw-button--text tw-tooltip__container" @click="save">
<span class="tw-button__text ffz-i-floppy" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.save', 'Save') }}
</div>
</button>
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="cancel">
<button class="tw-button tw-button--text tw-tooltip__container" @click="cancel">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }}
@ -103,13 +103,13 @@
</button>
</div>
<div v-else-if="deleting" class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="$emit('remove', term)">
<button class="tw-button tw-button--text tw-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">
{{ t('setting.delete', 'Delete') }}
</div>
</button>
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = false">
<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = false">
<span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }}
@ -117,13 +117,13 @@
</button>
</div>
<div v-else class="tw-flex-shrink-0">
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="edit">
<button class="tw-button tw-button--text tw-tooltip__container" @click="edit">
<span class="tw-button__text ffz-i-cog" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.edit', 'Edit') }}
</div>
</button>
<button class="tw-button tw-button--text tw-tooltip-wrapper" @click="deleting = true">
<button class="tw-button tw-button--text tw-tooltip__container" @click="deleting = true">
<span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.delete', 'Delete') }}

6
src/modules/metadata.jsx
View file

@ -225,7 +225,7 @@ export default class Metadata extends Module {
value={url}
onFocus={e => e.target.select()}
/>
{can_copy && <div class="tw-relative tw-tooltip-wrapper tw-mg-l-1">
{can_copy && <div class="tw-relative tw-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 tw-core-button tw-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') }
@ -639,7 +639,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-wrapper 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 tw-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}
>
@ -766,7 +766,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-wrapper 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 tw-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-wrapper"
class="tw-button-icon tw-mg-l-05 tw-relative tw-tooltip__container"
@click="open = false"
>
<span class="tw-button-icon__icon">

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

@ -26,7 +26,7 @@
</div>
</div>
</div>
<button class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip-wrapper" @click="saveBlob">
<button class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="saveBlob">
<span class="tw-button-icon__icon">
<figure class="ffz-i-floppy" />
</span>
@ -34,7 +34,7 @@
{{ 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-wrapper" @click="uploadBlob">
<button v-if="can_upload" class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="uploadBlob">
<span class="tw-button-icon__icon">
<figure class="ffz-i-upload-cloud" />
</span>
@ -42,7 +42,7 @@
{{ t('i18n.ui.upload', 'Upload Changes') }}
</div>
</button>
<button class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip-wrapper" @click="requestKeys">
<button class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="requestKeys">
<span class="tw-button-icon__icon">
<figure class="ffz-i-arrows-cw" />
</span>
@ -55,7 +55,7 @@
<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-wrapper" @click="popout">
<button v-if="!exclusive" class="tw-button-icon tw-mg-x-05 tw-relative tw-tooltip__container" @click="popout">
<span class="tw-button-icon__icon">
<figure class="ffz-i-link-ext" />
</span>
@ -76,7 +76,7 @@
</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 tw-core-button tw-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip-wrapper" @click="prevPage">
<button class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip__container" @click="prevPage">
<span class="tw-button-icon__icon">
<figure class="ffz-i-left-dir" />
</span>
@ -105,7 +105,7 @@
@keydown.enter="closePage"
@blur="closePage"
>
<button class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip-wrapper" @click="nextPage">
<button class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip__container" @click="nextPage">
<span class="tw-button-icon__icon">
<figure class="ffz-i-right-dir" />
</span>
@ -115,7 +115,7 @@
</button>
<div class="tw-flex-grow-1" />
<button
class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip-wrapper"
class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
:class="[mode === 0 ? 'tw-core-button--primary' : 'tw-core-button--text']"
@click="mode = 0"
>
@ -131,7 +131,7 @@
</button>
<button
v-if="existing != total"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip-wrapper"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
:class="[mode === 1 ? 'tw-core-button--primary' : 'tw-core-button--text']"
@click="mode = 1"
>
@ -147,7 +147,7 @@
</button>
<button
v-if="added"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip-wrapper"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
:class="[mode === 2 ? 'tw-core-button--primary' : 'tw-core-button--text']"
@click="mode = 2"
>
@ -163,7 +163,7 @@
</button>
<button
v-if="changed"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip-wrapper"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
:class="[mode === 3 ? 'tw-core-button--primary' : 'tw-core-button--text']"
@click="mode = 3"
>
@ -179,7 +179,7 @@
</button>
<button
v-if="pending"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip-wrapper"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
:class="[mode === 4 ? 'tw-core-button--primary' : 'tw-core-button--text']"
@click="mode = 4"
>
@ -195,7 +195,7 @@
</button>
<button
v-if="invalid"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip-wrapper"
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
:class="[mode === 5 ? 'tw-core-button--primary' : 'tw-core-button--text']"
@click="mode = 5"
>

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

@ -16,7 +16,7 @@
<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-wrapper">
<div class="ffz--profile__icon tw-pd-r-05 tw-pd-y-05 tw-relative tw-tooltip__container">
<figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<span v-if="passes">
@ -43,7 +43,7 @@
<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-wrapper">
<div class="ffz--profile__icon tw-pd-r-05 tw-pd-y-05 tw-relative tw-tooltip__container">
<figure :class="[passes ? 'ffz-i-cancel' : 'ffz-i-ok']" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<span v-if="passes">

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

@ -5,13 +5,13 @@
{{ t(type.i18n, type.title) }}
</div>
<div v-if="! is_valid" class="tw-relative tw-tooltip-wrapper tw-mg-r-05">
<div v-if="! is_valid" class="tw-relative tw-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">
{{ t('settings.filter.title.warn-invalid', 'This pattern is invalid.') }}
</div>
</div>
<div v-else-if="! is_safe" class="tw-relative tw-tooltip-wrapper tw-mg-r-05">
<div v-else-if="! is_safe" class="tw-relative tw-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">
{{ t('settings.filter.title.warn-complex', 'This pattern is potentially too complex. It will be disabled to avoid client lag or freezing.') }}
@ -50,7 +50,7 @@
type="checkbox"
class="ffz-min-width-unset tw-checkbox__input"
>
<label :for="'sensitive$' + id" class="tw-checkbox__label tw-relative tw-tooltip-wrapper">
<label :for="'sensitive$' + id" class="tw-checkbox__label tw-relative tw-tooltip__container">
<span class="tw-mg-l-05">
Aa
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">

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

@ -2089,150 +2089,155 @@ export default class EmoteMenu extends Module {
const visibility = this.state.visibility_control;
return (<div
class={`tw-balloon tw-balloon--md tw-balloon--up tw-balloon--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">
return (<div class="tw-block">
<div class="tw-absolute tw-attached tw-attached--right tw-attached--up">
<div
class="emote-picker__tab-content scrollable-area"
data-test-selector="scrollable-area-wrapper"
data-simplebar
class={`tw-balloon tw-balloon--auto tw-inline-block tw-border-radius-large tw-c-background-base tw-c-text-inherit tw-elevation-2 ffz--emote-picker${padding ? ' reduced-padding' : ''}`}
data-a-target="emote-picker"
role="dialog"
>
<div ref={this.saveScrollRef} class="simplebar-scroll-content">
<div class="simplebar-content">
{loading && this.renderLoading()}
{!loading && sets && sets.map(data => data && (! visibility || (! data.emoji && ! data.is_favorites)) && createElement(
data.emoji ? t.EmojiSection : t.MenuSection,
{
key: data.key,
data,
filtered: this.state.filtered,
visibility_control: visibility,
onClickToken: this.props.onClickToken,
addSection: this.addSection,
removeSection: this.removeSection,
startObserving: this.startObserving,
stopObserving: this.stopObserving
}
))}
{! loading && (! sets || ! sets.length) && this.renderEmpty()}
<div class="emote-picker">
<div
class="emote-picker__tab-content scrollable-area"
data-test-selector="scrollable-area-wrapper"
data-simplebar
>
<div ref={this.saveScrollRef} class="simplebar-scroll-content">
<div class="simplebar-content">
{loading && this.renderLoading()}
{!loading && sets && sets.map(data => data && (! visibility || (! data.emoji && ! data.is_favorites)) && createElement(
data.emoji ? t.EmojiSection : t.MenuSection,
{
key: data.key,
data,
filtered: this.state.filtered,
visibility_control: visibility,
onClickToken: this.props.onClickToken,
addSection: this.addSection,
removeSection: this.removeSection,
startObserving: this.startObserving,
stopObserving: this.stopObserving
}
))}
{! loading && (! sets || ! sets.length) && this.renderEmpty()}
</div>
</div>
</div>
</div>
</div>
<div class="emote-picker__controls-container tw-relative">
{(is_emoji || t.chat.context.get('chat.emote-menu.show-search')) && (<div class="tw-border-t tw-pd-1">
<div class="tw-flex">
<input
type="text"
class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05"
placeholder={
is_emoji ?
t.i18n.t('emote-menu.search-emoji', 'Search for Emoji') :
t.i18n.t('emote-menu.search', 'Search for Emotes')
}
value={this.state.filter}
autoFocus
autoCapitalize="off"
autoCorrect="off"
onChange={this.handleFilterChange}
onKeyDown={this.handleKeyDown}
/>
{(no_tabs || ! is_emoji) && <div class="tw-relative tw-tooltip-wrapper 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 tw-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative${this.state.visibility_control ? ' tw-core-button--primary' : ' tw-button-icon'}`}
onClick={this.toggleVisibilityControl}
>
<span class="tw-button-icon__icon tw-mg-x-05">
<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">
{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')
}
<div class="tw-mg-t-1 ffz--tooltip-explain">
{t.i18n.t('emote-menu.toggle-hide.info', 'Emote Visibility Control allows you to hide emotes from your emote menu, either individually or by set. With Emote Visibility Control enabled, just click an emote to hide or unhide it. Please note that you will still see the emotes in chat if someone uses them, but they won\'t appear in your emote menu.')}
</div>
<div class="emote-picker__controls-container tw-relative">
{(is_emoji || t.chat.context.get('chat.emote-menu.show-search')) && (<div class="tw-border-t tw-pd-1">
<div class="tw-flex">
<input
type="text"
class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05"
placeholder={
is_emoji ?
t.i18n.t('emote-menu.search-emoji', 'Search for Emoji') :
t.i18n.t('emote-menu.search', 'Search for Emotes')
}
value={this.state.filter}
autoFocus
autoCapitalize="off"
autoCorrect="off"
onChange={this.handleFilterChange}
onKeyDown={this.handleKeyDown}
/>
{(no_tabs || ! is_emoji) && <div class="tw-relative tw-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 tw-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative${this.state.visibility_control ? ' tw-core-button--primary' : ' tw-button-icon'}`}
onClick={this.toggleVisibilityControl}
>
<span class="tw-button-icon__icon tw-mg-x-05">
<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">
{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')
}
<div class="tw-mg-t-1 ffz--tooltip-explain">
{t.i18n.t('emote-menu.toggle-hide.info', 'Emote Visibility Control allows you to hide emotes from your emote menu, either individually or by set. With Emote Visibility Control enabled, just click an emote to hide or unhide it. Please note that you will still see the emotes in chat if someone uses them, but they won\'t appear in your emote menu.')}
</div>
</div>
</div>}
{(no_tabs || is_emoji) && ! visibility && this.state.has_emoji_tab && <t.EmojiTonePicker
tone={this.state.tone}
choices={this.state.tone_emoji}
pickTone={this.pickTone}
/>}
</div>
</div>}
{(no_tabs || is_emoji) && ! visibility && this.state.has_emoji_tab && <t.EmojiTonePicker
tone={this.state.tone}
choices={this.state.tone_emoji}
pickTone={this.pickTone}
/>}
</div>
</div>)}
<div class="emote-picker__tab-nav-container tw-flex tw-border-t tw-c-background-alt">
{! visibility && <div class={`emote-picker-tab-item${tab === 'fav' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
<button
class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'fav' ? ' tw-interactable--selected' : ''}`}
id="emote-picker__fav"
data-tab="fav"
data-tooltip-type="html"
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">
<figure class="ffz-i-star" />
</div>)}
<div class="emote-picker__tab-nav-container tw-flex tw-border-t tw-c-background-alt">
{! visibility && <div class={`emote-picker-tab-item${tab === 'fav' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
<button
class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'fav' ? ' tw-interactable--selected' : ''}`}
id="emote-picker__fav"
data-tab="fav"
data-tooltip-type="html"
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">
<figure class="ffz-i-star" />
</div>
</button>
</div>}
{this.state.has_channel_tab && <div class={`emote-picker-tab-item${tab === 'channel' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
<button
class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'channel' ? ' tw-interactable--selected' : ''}`}
id="emote-picker__channel"
data-tab="channel"
data-tooltip-type="html"
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">
<figure class="ffz-i-camera" />
</div>
</button>
</div>}
<div class={`emote-picker-tab-item${tab === 'all' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
<button
class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'all' ? ' tw-interactable--selected' : ''}`}
id="emote-picker__all"
data-tab="all"
data-tooltip-type="html"
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">
<figure class="ffz-i-channels" />
</div>
</button>
</div>
</button>
</div>}
{this.state.has_channel_tab && <div class={`emote-picker-tab-item${tab === 'channel' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
<button
class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'channel' ? ' tw-interactable--selected' : ''}`}
id="emote-picker__channel"
data-tab="channel"
data-tooltip-type="html"
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">
<figure class="ffz-i-camera" />
{! visibility && this.state.has_emoji_tab && <div class={`emote-picker-tab-item${tab === 'emoji' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
<button
class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'emoji' ? ' tw-interactable--selected' : ''}`}
id="emote-picker__emoji"
data-tab="emoji"
data-tooltip-type="html"
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">
<figure class="ffz-i-smile" />
</div>
</button>
</div>}
<div class="tw-flex-grow-1" />
<div class="emote-picker-tab-item tw-relative">
<button
class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive"
data-tooltip-type="html"
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">
<figure class="ffz-i-cog" />
</div>
</button>
</div>
</button>
</div>}
<div class={`emote-picker-tab-item${tab === 'all' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
<button
class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'all' ? ' tw-interactable--selected' : ''}`}
id="emote-picker__all"
data-tab="all"
data-tooltip-type="html"
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">
<figure class="ffz-i-channels" />
</div>
</button>
</div>
{! visibility && this.state.has_emoji_tab && <div class={`emote-picker-tab-item${tab === 'emoji' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
<button
class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'emoji' ? ' tw-interactable--selected' : ''}`}
id="emote-picker__emoji"
data-tab="emoji"
data-tooltip-type="html"
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">
<figure class="ffz-i-smile" />
</div>
</button>
</div>}
<div class="tw-flex-grow-1" />
<div class="emote-picker-tab-item tw-relative">
<button
class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive"
data-tooltip-type="html"
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">
<figure class="ffz-i-cog" />
</div>
</button>
</div>
</div>
</div>
</div>

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

@ -308,6 +308,13 @@ export default class Input extends Module {
i = Math.ceil((inst.chatInputRef.scrollHeight - t) / height),
a = Math.min(1 + i, 4);
window._style = style;
window._height = height;
window.t = t;
window.i = i;
window.a = a;
console.log('resize', height, t, i, a)
inst.setState({
numInputRows: a
});

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

@ -313,7 +313,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-wrapper' : ''}`,
className: `chat-line__username notranslate${override_name ? ' ffz--name-override tw-relative tw-tooltip__container' : ''}`,
role: 'button',
style: { color },
onClick: this.ffz_user_click_handler,
@ -503,7 +503,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-wrapper' : ''}`,
className: `chat-line__username notranslate${override_name ? ' ffz--name-override tw-relative tw-tooltip__container' : ''}`,
role: 'button',
style: { color },
onClick: this.ffz_user_click_handler,

2
src/sites/twitch-twilight/modules/css_tweaks/styles/theatre-metadata.scss
View file

@ -14,7 +14,7 @@
pointer-events: none;
.tw-tooltip-wrapper, .tw-stat, .ffz-stat, button, a {
.tw-tooltip__container, .tw-stat, .ffz-stat, button, a {
pointer-events: all;
}
}

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

@ -413,7 +413,7 @@ 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-wrapper">
<div class="tw-relative tw-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" />

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

@ -295,7 +295,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-wrapper">
<div class="tw-inline-flex tw-relative tw-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-core-button tw-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
@ -314,7 +314,7 @@ export default class MenuButton extends SiteModule {
{ this.error.i18n ? this.i18n.t(this.error.i18n, this.error.text) : this.error.text }
</div>
<button
class="tw-button-icon tw-mg-l-05 tw-relative tw-tooltip-wrapper"
class="tw-button-icon tw-mg-l-05 tw-relative tw-tooltip__container"
onClick={() => this.error = null} // eslint-disable-line react/jsx-no-bind
>
<span class="tw-button-icon__icon">
@ -468,58 +468,60 @@ export default class MenuButton extends SiteModule {
}
ctx = (<div class={`tw-absolute tw-balloon tw-balloon--lg ${is_mod ? 'tw-balloon--up tw-balloon--left' : 'tw-balloon--down tw-balloon--right'} tw-block ffz--menu-context`}>
<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-wrapper">
<button
class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-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
>
<span class="tw-button-icon__icon">
<figure class="ffz-i-t-reset" />
</span>
</button>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
{ this.i18n.t('player.reset_button.all', 'Reset All Players (Double-Click)') }
ctx = (<div class={`tw-absolute tw-attached ${is_mod ? 'tw-attached--up tw-attached--left' : 'tw-attached--down tw-attached--right'}`}>
<div class={`tw-balloon tw-balloon--lg tw-block ffz--menu-context`}>
<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">
<button
class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-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
>
<span class="tw-button-icon__icon">
<figure class="ffz-i-t-reset" />
</span>
</button>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
{ this.i18n.t('player.reset_button.all', 'Reset All Players (Double-Click)') }
</div>
</div>
</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">
{ this.i18n.t('site.menu_button.profiles', 'Profiles') }
</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-wrapper">
<button
class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-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
>
<span class="tw-button-icon__icon">
<figure class="ffz-i-cog" />
</span>
</button>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center">
{ this.i18n.t('setting.profiles.configure', 'Configure') }
<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">
{ this.i18n.t('site.menu_button.profiles', 'Profiles') }
</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">
<button
class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-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
>
<span class="tw-button-icon__icon">
<figure class="ffz-i-cog" />
</span>
</button>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center">
{ this.i18n.t('setting.profiles.configure', 'Configure') }
</div>
</div>
</div>
<div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--right">
<button
class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
onClick={destroy} // eslint-disable-line react/jsx-no-bind
>
<span class="tw-button-icon__icon">
<figure class="ffz-i-cancel" />
</span>
</button>
</div>
</div>
<div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--right">
<button
class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
onClick={destroy} // eslint-disable-line react/jsx-no-bind
>
<span class="tw-button-icon__icon">
<figure class="ffz-i-cancel" />
</span>
</button>
<div class="center-window__long-scrollable-area scrollable-area scrollable-area--suppress-scroll-x" data-simplebar>
{profiles}
</div>
</div>
<div class="center-window__long-scrollable-area scrollable-area scrollable-area--suppress-scroll-x" data-simplebar>
{profiles}
</div>
</div>
</div>);

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

@ -1066,7 +1066,7 @@ export default class Player extends Module {
}
if ( ! cont ) {
cont = (<div class="ffz--player-comp tw-inline-flex tw-relative tw-tooltip-wrapper">
cont = (<div class="ffz--player-comp tw-inline-flex tw-relative tw-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 tw-core-button tw-core-button--border tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
type="button"
@ -1260,7 +1260,7 @@ export default class Player extends Module {
}
if ( ! cont ) {
cont = (<div class="ffz--player-pip tw-inline-flex tw-relative tw-tooltip-wrapper">
cont = (<div class="ffz--player-pip tw-inline-flex tw-relative tw-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 tw-core-button tw-core-button--border tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
type="button"
@ -1363,7 +1363,7 @@ export default class Player extends Module {
}
if ( ! cont ) {
cont = (<div class="ffz--player-reset tw-inline-flex tw-relative tw-tooltip-wrapper">
cont = (<div class="ffz--player-reset tw-inline-flex tw-relative tw-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 tw-core-button tw-core-button--border tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
type="button"
@ -1431,7 +1431,7 @@ export default class Player extends Module {
}
if ( ! cont ) {
cont = (<div class="ffz--player-reset tw-absolute tw-bottom-0 tw-right-0 tw-tooltip-wrapper tw-mg-1">
cont = (<div class="ffz--player-reset tw-absolute tw-bottom-0 tw-right-0 tw-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 tw-core-button tw-core-button--border tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
type="button"

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

@ -264,7 +264,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 tw-tooltip-wrapper">
<span class="tw-c-text-alt-2 tw-font-size-7 tw-mg-l-05 tw-relative tw-tooltip__container">
• { t.i18n.t('video-chat.time', '{time,humantime} ago', {
time: msg.timestamp
}) }
@ -301,7 +301,7 @@ 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-wrapper">
<div class="tw-inline-flex tw-relative tw-tooltip__container">
<button class="tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-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>

2
src/sites/twitch-twilight/styles/channel.scss
View file

@ -24,7 +24,7 @@
order: 1;
}
.tw-tooltip-wrapper {
.tw-tooltip__container {
order: 100;
}
}

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

@ -25,7 +25,7 @@
>
<button
v-if="clearable"
class="tw-absolute tw-right-0 tw-top-0 tw-button tw-button--text tw-tooltip-wrapper"
class="tw-absolute tw-right-0 tw-top-0 tw-button tw-button--text tw-tooltip__container"
@click="change('', false)"
@keydown.escape="open = false"
@focus="onFocus(false)"

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

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