oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-02 16:08: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", "name": "frankerfacez",
"author": "Dan Salvato LLC", "author": "Dan Salvato LLC",
"version": "4.20.55", "version": "4.20.56",
"description": "FrankerFaceZ is a Twitch enhancement suite.", "description": "FrankerFaceZ is a Twitch enhancement suite.",
"license": "Apache-2.0", "license": "Apache-2.0",
"scripts": { "scripts": {

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

@ -26,7 +26,7 @@
> >
<button <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}" :class="{'tw-button--disabled': name == null}"
@click="clearName" @click="clearName"
> >
@ -52,7 +52,7 @@
/> />
<button <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}" :class="{'tw-button--disabled': color == null}"
@click="clearColor" @click="clearColor"
> >

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

@ -50,7 +50,7 @@
<button <button
v-if="external" v-if="external"
disabled 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"> <span class="tw-button__icon tw-button__icon--left">
<figure class="ffz-i-trash" /> <figure class="ffz-i-trash" />

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

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

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

@ -12,7 +12,7 @@
<button <button
:disabled="! has_value" :disabled="! has_value"
:class="{'tw-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" @click="clear"
> >
<span class="tw-button__icon tw-button__icon--left"> <span class="tw-button__icon tw-button__icon--left">
@ -93,7 +93,7 @@
/> />
</section> </section>
<button <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)" @click="reset(i.id)"
> >
<span class="tw-button__text">Reset</span> <span class="tw-button__text">Reset</span>

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

@ -27,13 +27,13 @@
</button> </button>
</div> </div>
<div v-else-if="deleting" class="tw-flex-shrink-0"> <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" /> <span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.delete', 'Delete') }} {{ t('setting.delete', 'Delete') }}
</div> </div>
</button> </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" /> <span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }} {{ t('setting.cancel', 'Cancel') }}
@ -41,7 +41,7 @@
</button> </button>
</div> </div>
<div v-else class="tw-flex-shrink-0"> <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" /> <span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.delete', 'Delete') }} {{ 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 v-if=" ! addons" class="tw-mg-b-1 tw-flex tw-align-items-center">
<div class="tw-flex-grow-1" /> <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 <input
id="nonversioned" id="nonversioned"
ref="nonversioned" ref="nonversioned"

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

@ -281,7 +281,7 @@
</div> </div>
<button <button
v-if="! maybe_clear && val.length" 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" @click="maybe_clear = true"
> >
<span class="tw-button__text ffz-i-trash"> <span class="tw-button__text ffz-i-trash">
@ -293,7 +293,7 @@
</button> </button>
<button <button
v-if="maybe_clear" 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" @click="doClear"
> >
<span class="tw-button__text ffz-i-trash"> <span class="tw-button__text ffz-i-trash">
@ -305,7 +305,7 @@
</button> </button>
<button <button
v-if="maybe_clear" 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" @click="maybe_clear = false"
> >
<span class="tw-button__text ffz-i-cancel"> <span class="tw-button__text ffz-i-cancel">
@ -314,7 +314,7 @@
</button> </button>
<button <button
v-if="! val.length && has_default" 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" @click="populate"
> >
<span class="tw-button__text ffz-i-trash"> <span class="tw-button__text ffz-i-trash">

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

@ -6,7 +6,7 @@
</div> </div>
<button <button
v-if="! empty" 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" @click="clear"
> >
<span class="tw-button__text ffz-i-trash"> <span class="tw-button__text ffz-i-trash">
@ -18,7 +18,7 @@
</button> </button>
<button <button
v-if="empty" 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" @click="populate"
> >
<span class="tw-button__text ffz-i-trash"> <span class="tw-button__text ffz-i-trash">

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

@ -105,7 +105,7 @@
<button <button
:disabled="exp.default" :disabled="exp.default"
:class="{'tw-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)" @click="reset(key)"
> >
<span class="tw-button__text ffz-i-cancel" /> <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" 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="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"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
{{ t('setting.experiments.active', 'This experiment is active.') }} {{ t('setting.experiments.active', 'This experiment is active.') }}
</div> </div>
</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"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
{{ t('setting.experiments.inactive', 'This experiment is not active.') }} {{ t('setting.experiments.inactive', 'This experiment is not active.') }}
</div> </div>
@ -190,7 +190,7 @@
<button <button
:disabled="exp.default" :disabled="exp.default"
:class="{'tw-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)" @click="resetTwitch(key)"
> >
<span class="tw-button__text ffz-i-cancel" /> <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 <div
v-if="isShort" 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']" /> <figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
@ -31,7 +31,7 @@
:class="[isShort ? '' : 'tw-mg-l-1']" :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" 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']" /> <figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
<span v-if="passes"> <span v-if="passes">
@ -44,13 +44,13 @@
</div> </div>
<template v-if="deleting"> <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" /> <span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.delete', 'Delete') }} {{ t('setting.delete', 'Delete') }}
</div> </div>
</button> </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" /> <span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }} {{ t('setting.cancel', 'Cancel') }}
@ -58,7 +58,7 @@
</button> </button>
</template> </template>
<template v-else> <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" /> <span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.delete', 'Delete') }} {{ t('setting.delete', 'Delete') }}

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

@ -65,7 +65,7 @@
</span> </span>
</div> </div>
<div class="tw-flex-shrink-0"> <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" /> <span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.delete', 'Delete') }} {{ 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'" /> <figure :class="faded ? 'ffz-i-eye-off' : 'ffz-i-eye'" />
</span> </span>
</button> </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"> <span class="tw-button-icon__icon">
<figure class="ffz-i-link-ext" /> <figure class="ffz-i-link-ext" />
</span> </span>

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

@ -42,7 +42,7 @@
</div> </div>
</section> </section>
<button <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" @click="resetExport"
> >
<span class="tw-button__text ffz-i-cancel" /> <span class="tw-button__text ffz-i-cancel" />
@ -57,7 +57,7 @@
{{ export_message }} {{ export_message }}
</section> </section>
<button <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" @click="resetExport"
> >
<span class="tw-button__text ffz-i-cancel" /> <span class="tw-button__text ffz-i-cancel" />

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

@ -32,7 +32,7 @@
</div> </div>
</section> </section>
<button <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" @click="resetImport"
> >
<span class="tw-button__text ffz-i-cancel" /> <span class="tw-button__text ffz-i-cancel" />
@ -47,7 +47,7 @@
{{ import_message }} {{ import_message }}
</section> </section>
<button <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" @click="resetImport"
> >
<span class="tw-button__text ffz-i-cancel" /> <span class="tw-button__text ffz-i-cancel" />
@ -66,7 +66,7 @@
<button <button
v-for="(profile, idx) in import_profiles" v-for="(profile, idx) in import_profiles"
:key="idx" :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)" @click="importProfile(profile)"
> >
<span class="tw-button__text tw-c-text-overlay"> <span class="tw-button__text tw-c-text-overlay">
@ -78,7 +78,7 @@
</button> </button>
</section> </section>
<button <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" @click="resetImport"
> >
<span class="tw-button__text ffz-i-cancel" /> <span class="tw-button__text ffz-i-cancel" />
@ -113,7 +113,7 @@
</button> </button>
</section> </section>
<button <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" @click="resetImport"
> >
<span class="tw-button__text ffz-i-cancel" /> <span class="tw-button__text ffz-i-cancel" />
@ -138,7 +138,7 @@
<span class="ffz-i-ellipsis-vert" /> <span class="ffz-i-ellipsis-vert" />
</div> </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" /> <span class="ffz-i-download-cloud" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<div class="tw-mg-b-05"> <div class="tw-mg-b-05">
@ -171,7 +171,7 @@
'ffz-i-cancel': ! p.toggled, 'ffz-i-cancel': ! p.toggled,
'ffz-i-minus': p.toggled && ! p.live '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"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
<span v-if="p.live"> <span v-if="p.live">

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

@ -18,7 +18,7 @@
<div <div
v-if="opened" v-if="opened"
v-on-clickaway="hide" 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 <div
class="ffz--profile-list tw-elevation-2 tw-c-background-alt" class="ffz--profile-list tw-elevation-2 tw-c-background-alt"
@ -53,7 +53,7 @@
> >
<div <div
v-if="! p.toggled" 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"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.profiles.disabled', 'This profile is disabled.') }} {{ t('setting.profiles.disabled', 'This profile is disabled.') }}
@ -61,7 +61,7 @@
</div> </div>
<div <div
v-if="p.live" 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"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.profiles.active', 'This profile is enabled and active.') }} {{ 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> </button>
</div> </div>
<div v-else-if="editing" class="tw-flex-shrink-0"> <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" /> <span class="tw-button__text ffz-i-floppy" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.save', 'Save') }} {{ t('setting.save', 'Save') }}
</div> </div>
</button> </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" /> <span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }} {{ t('setting.cancel', 'Cancel') }}
@ -37,13 +37,13 @@
</button> </button>
</div> </div>
<div v-else-if="deleting" class="tw-flex-shrink-0"> <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" /> <span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.delete', 'Delete') }} {{ t('setting.delete', 'Delete') }}
</div> </div>
</button> </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" /> <span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.cancel', 'Cancel') }} {{ t('setting.cancel', 'Cancel') }}
@ -51,13 +51,13 @@
</button> </button>
</div> </div>
<div v-else class="tw-flex-shrink-0"> <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" /> <span class="tw-button__text ffz-i-cog" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.edit', 'Edit') }} {{ t('setting.edit', 'Edit') }}
</div> </div>
</button> </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" /> <span class="tw-button__text ffz-i-trash" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.delete', 'Delete') }} {{ t('setting.delete', 'Delete') }}

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

@ -39,7 +39,7 @@
</button> </button>
<div class="ffz--reset-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" /> <span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }} {{ t('setting.reset', 'Reset to Default') }}

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

@ -37,7 +37,7 @@
</span> </span>
</button> </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" /> <span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }} {{ t('setting.reset', 'Reset to Default') }}

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

@ -54,7 +54,7 @@
</span> </span>
</button> </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" /> <span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }} {{ t('setting.reset', 'Reset to Default') }}

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

@ -60,7 +60,7 @@
</span> </span>
</button> </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" /> <span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }} {{ t('setting.reset', 'Reset to Default') }}

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

@ -37,7 +37,7 @@
</span> </span>
</button> </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" /> <span class="tw-button__text ffz-i-cancel" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right">
{{ t('setting.reset', 'Reset to Default') }} {{ t('setting.reset', 'Reset to Default') }}

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

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

6
src/modules/metadata.jsx
View file

@ -225,7 +225,7 @@ export default class Metadata extends Module {
value={url} value={url}
onFocus={e => e.target.select()} 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 <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" 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') } 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 ) { if ( def.popup && def.click ) {
el = (<div 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} data-key={key}
tip_content={null} tip_content={null}
> >
@ -766,7 +766,7 @@ export default class Metadata extends Module {
icon = (<span class="tw-stat__icon"><figure class={icon} /></span>); icon = (<span class="tw-stat__icon"><figure class={icon} /></span>);
el = (<div 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-tooltip-type="metadata"
data-key={key} data-key={key}
tip_content={null} tip_content={null}

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

@ -93,7 +93,7 @@
</div> </div>
<button <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" @click="open = false"
> >
<span class="tw-button-icon__icon"> <span class="tw-button-icon__icon">

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

@ -26,7 +26,7 @@
</div> </div>
</div> </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"> <span class="tw-button-icon__icon">
<figure class="ffz-i-floppy" /> <figure class="ffz-i-floppy" />
</span> </span>
@ -34,7 +34,7 @@
{{ t('i18n.ui.save', 'Generate Change Blob') }} {{ t('i18n.ui.save', 'Generate Change Blob') }}
</div> </div>
</button> </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"> <span class="tw-button-icon__icon">
<figure class="ffz-i-upload-cloud" /> <figure class="ffz-i-upload-cloud" />
</span> </span>
@ -42,7 +42,7 @@
{{ t('i18n.ui.upload', 'Upload Changes') }} {{ t('i18n.ui.upload', 'Upload Changes') }}
</div> </div>
</button> </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"> <span class="tw-button-icon__icon">
<figure class="ffz-i-arrows-cw" /> <figure class="ffz-i-arrows-cw" />
</span> </span>
@ -55,7 +55,7 @@
<figure :class="faded ? 'ffz-i-eye-off' : 'ffz-i-eye'" /> <figure :class="faded ? 'ffz-i-eye-off' : 'ffz-i-eye'" />
</span> </span>
</button> </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"> <span class="tw-button-icon__icon">
<figure class="ffz-i-link-ext" /> <figure class="ffz-i-link-ext" />
</span> </span>
@ -76,7 +76,7 @@
</header> </header>
<section class="tw-border-t tw-full-height tw-full-width tw-flex tw-flex-column tw-overflow-hidden"> <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"> <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"> <span class="tw-button-icon__icon">
<figure class="ffz-i-left-dir" /> <figure class="ffz-i-left-dir" />
</span> </span>
@ -105,7 +105,7 @@
@keydown.enter="closePage" @keydown.enter="closePage"
@blur="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"> <span class="tw-button-icon__icon">
<figure class="ffz-i-right-dir" /> <figure class="ffz-i-right-dir" />
</span> </span>
@ -115,7 +115,7 @@
</button> </button>
<div class="tw-flex-grow-1" /> <div class="tw-flex-grow-1" />
<button <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']" :class="[mode === 0 ? 'tw-core-button--primary' : 'tw-core-button--text']"
@click="mode = 0" @click="mode = 0"
> >
@ -131,7 +131,7 @@
</button> </button>
<button <button
v-if="existing != total" 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']" :class="[mode === 1 ? 'tw-core-button--primary' : 'tw-core-button--text']"
@click="mode = 1" @click="mode = 1"
> >
@ -147,7 +147,7 @@
</button> </button>
<button <button
v-if="added" 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']" :class="[mode === 2 ? 'tw-core-button--primary' : 'tw-core-button--text']"
@click="mode = 2" @click="mode = 2"
> >
@ -163,7 +163,7 @@
</button> </button>
<button <button
v-if="changed" 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']" :class="[mode === 3 ? 'tw-core-button--primary' : 'tw-core-button--text']"
@click="mode = 3" @click="mode = 3"
> >
@ -179,7 +179,7 @@
</button> </button>
<button <button
v-if="pending" 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']" :class="[mode === 4 ? 'tw-core-button--primary' : 'tw-core-button--text']"
@click="mode = 4" @click="mode = 4"
> >
@ -195,7 +195,7 @@
</button> </button>
<button <button
v-if="invalid" 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']" :class="[mode === 5 ? 'tw-core-button--primary' : 'tw-core-button--text']"
@click="mode = 5" @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"> <div class="tw-border-t tw-mg-t-05 tw-pd-t-05">
<header class="tw-flex tw-align-items-center"> <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']" /> <figure :class="[passes ? 'ffz-i-ok' : 'ffz-i-cancel']" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<span v-if="passes"> <span v-if="passes">
@ -43,7 +43,7 @@
<div class="tw-border-t tw-mg-t-05 tw-pd-t-05"> <div class="tw-border-t tw-mg-t-05 tw-pd-t-05">
<header class="tw-flex tw-align-items-center"> <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']" /> <figure :class="[passes ? 'ffz-i-cancel' : 'ffz-i-ok']" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
<span v-if="passes"> <span v-if="passes">

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

@ -5,13 +5,13 @@
{{ t(type.i18n, type.title) }} {{ t(type.i18n, type.title) }}
</div> </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" /> <figure class="tw-c-text-error ffz-i-attention" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left"> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left">
{{ t('settings.filter.title.warn-invalid', 'This pattern is invalid.') }} {{ t('settings.filter.title.warn-invalid', 'This pattern is invalid.') }}
</div> </div>
</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" /> <figure class="tw-c-text-error ffz-i-attention" />
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left"> <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.') }} {{ 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" type="checkbox"
class="ffz-min-width-unset tw-checkbox__input" 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"> <span class="tw-mg-l-05">
Aa Aa
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-right"> <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; const visibility = this.state.visibility_control;
return (<div return (<div class="tw-block">
class={`tw-balloon tw-balloon--md tw-balloon--up tw-balloon--right tw-block tw-absolute ffz--emote-picker${padding ? ' reduced-padding' : ''}`} <div class="tw-absolute tw-attached tw-attached--right tw-attached--up">
data-a-target="emote-picker"
>
<div class="tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base">
<div <div
class="emote-picker__tab-content scrollable-area" 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-test-selector="scrollable-area-wrapper" data-a-target="emote-picker"
data-simplebar role="dialog"
> >
<div ref={this.saveScrollRef} class="simplebar-scroll-content"> <div class="emote-picker">
<div class="simplebar-content"> <div
{loading && this.renderLoading()} class="emote-picker__tab-content scrollable-area"
{!loading && sets && sets.map(data => data && (! visibility || (! data.emoji && ! data.is_favorites)) && createElement( data-test-selector="scrollable-area-wrapper"
data.emoji ? t.EmojiSection : t.MenuSection, data-simplebar
{ >
key: data.key, <div ref={this.saveScrollRef} class="simplebar-scroll-content">
data, <div class="simplebar-content">
filtered: this.state.filtered, {loading && this.renderLoading()}
visibility_control: visibility, {!loading && sets && sets.map(data => data && (! visibility || (! data.emoji && ! data.is_favorites)) && createElement(
onClickToken: this.props.onClickToken, data.emoji ? t.EmojiSection : t.MenuSection,
addSection: this.addSection, {
removeSection: this.removeSection, key: data.key,
startObserving: this.startObserving, data,
stopObserving: this.stopObserving filtered: this.state.filtered,
} visibility_control: visibility,
))} onClickToken: this.props.onClickToken,
{! loading && (! sets || ! sets.length) && this.renderEmpty()} 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">
</div> {(is_emoji || t.chat.context.get('chat.emote-menu.show-search')) && (<div class="tw-border-t tw-pd-1">
<div class="emote-picker__controls-container tw-relative"> <div class="tw-flex">
{(is_emoji || t.chat.context.get('chat.emote-menu.show-search')) && (<div class="tw-border-t tw-pd-1"> <input
<div class="tw-flex"> type="text"
<input class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05"
type="text" placeholder={
class="tw-block tw-border-radius-medium tw-font-size-6 tw-full-width tw-input tw-pd-x-1 tw-pd-y-05" is_emoji ?
placeholder={ t.i18n.t('emote-menu.search-emoji', 'Search for Emoji') :
is_emoji ? t.i18n.t('emote-menu.search', 'Search for Emotes')
t.i18n.t('emote-menu.search-emoji', 'Search for Emoji') : }
t.i18n.t('emote-menu.search', 'Search for Emotes') value={this.state.filter}
} autoFocus
value={this.state.filter} autoCapitalize="off"
autoFocus autoCorrect="off"
autoCapitalize="off" onChange={this.handleFilterChange}
autoCorrect="off" onKeyDown={this.handleKeyDown}
onChange={this.handleFilterChange} />
onKeyDown={this.handleKeyDown} {(no_tabs || ! is_emoji) && <div class="tw-relative tw-tooltip__container tw-mg-l-1">
/> <button
{(no_tabs || ! is_emoji) && <div class="tw-relative tw-tooltip-wrapper tw-mg-l-1"> 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'}`}
<button onClick={this.toggleVisibilityControl}
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 class="tw-button-icon__icon tw-mg-x-05"> </span>
<figure class={this.state.visibility_control ? 'ffz-i-eye-off' : 'ffz-i-eye'} /> </button>
</span> <div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right">
</button> {this.state.visibility_control ?
<div class="tw-tooltip tw-tooltip--up tw-tooltip--align-right"> t.i18n.t('emote-menu.toggle-hide.on', 'Exit Emote Visibility Control') :
{this.state.visibility_control ? t.i18n.t('emote-menu.toggle-hide.off', 'Emote 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 class="tw-mg-t-1 ffz--tooltip-explain"> </div>
{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>
</div>} </div>)}
{(no_tabs || is_emoji) && ! visibility && this.state.has_emoji_tab && <t.EmojiTonePicker <div class="emote-picker__tab-nav-container tw-flex tw-border-t tw-c-background-alt">
tone={this.state.tone} {! visibility && <div class={`emote-picker-tab-item${tab === 'fav' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
choices={this.state.tone_emoji} <button
pickTone={this.pickTone} 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"
</div> data-tab="fav"
</div>)} data-tooltip-type="html"
<div class="emote-picker__tab-nav-container tw-flex tw-border-t tw-c-background-alt"> data-title={t.i18n.t('emote-menu.favorites', 'Favorites')}
{! visibility && <div class={`emote-picker-tab-item${tab === 'fav' ? ' emote-picker-tab-item--active' : ''} tw-relative`}> onClick={this.clickTab}
<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' : ''}`} <div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4">
id="emote-picker__fav" <figure class="ffz-i-star" />
data-tab="fav" </div>
data-tooltip-type="html" </button>
data-title={t.i18n.t('emote-menu.favorites', 'Favorites')} </div>}
onClick={this.clickTab} {this.state.has_channel_tab && <div class={`emote-picker-tab-item${tab === 'channel' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
> <button
<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4"> class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'channel' ? ' tw-interactable--selected' : ''}`}
<figure class="ffz-i-star" /> 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> </div>
</button> {! visibility && this.state.has_emoji_tab && <div class={`emote-picker-tab-item${tab === 'emoji' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
</div>} <button
{this.state.has_channel_tab && <div class={`emote-picker-tab-item${tab === 'channel' ? ' emote-picker-tab-item--active' : ''} tw-relative`}> class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'emoji' ? ' tw-interactable--selected' : ''}`}
<button id="emote-picker__emoji"
class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--default tw-interactive${tab === 'channel' ? ' tw-interactable--selected' : ''}`} data-tab="emoji"
id="emote-picker__channel" data-tooltip-type="html"
data-tab="channel" data-title={t.i18n.t('emote-menu.emoji', 'Emoji')}
data-tooltip-type="html" onClick={this.clickTab}
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-smile" />
<div class="tw-inline-flex tw-pd-x-1 tw-pd-y-05 tw-font-size-4"> </div>
<figure class="ffz-i-camera" /> </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>
</button> </div>
</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>
</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), i = Math.ceil((inst.chatInputRef.scrollHeight - t) / height),
a = Math.min(1 + i, 4); 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({ inst.setState({
numInputRows: a 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' className: 'chat-line__message--badges'
}, t.chat.badges.render(msg, e)), }, t.chat.badges.render(msg, e)),
e('span', { 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', role: 'button',
style: { color }, style: { color },
onClick: this.ffz_user_click_handler, onClick: this.ffz_user_click_handler,
@ -503,7 +503,7 @@ other {# messages were deleted by a moderator.}
className: 'chat-line__message--badges' className: 'chat-line__message--badges'
}, t.chat.badges.render(msg, e)), }, t.chat.badges.render(msg, e)),
e('span', { 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', role: 'button',
style: { color }, style: { color },
onClick: this.ffz_user_click_handler, 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; pointer-events: none;
.tw-tooltip-wrapper, .tw-stat, .ffz-stat, button, a { .tw-tooltip__container, .tw-stat, .ffz-stat, button, a {
pointer-events: all; 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'); el.ffz_uptime_el = container.querySelector('.ffz-uptime-element');
if ( ! el.ffz_uptime_el ) 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"> 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-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"> <div class="tw-flex tw-c-text-live">
<figure class="ffz-i-clock" /> <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 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'}`}`} 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 {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' : ''}`} 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 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 } { this.error.i18n ? this.i18n.t(this.error.i18n, this.error.text) : this.error.text }
</div> </div>
<button <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 onClick={() => this.error = null} // eslint-disable-line react/jsx-no-bind
> >
<span class="tw-button-icon__icon"> <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`}> ctx = (<div class={`tw-absolute tw-attached ${is_mod ? 'tw-attached--up tw-attached--left' : 'tw-attached--down tw-attached--right'}`}>
<div class="tw-border-radius-large tw-c-background-base tw-c-text-inherit tw-elevation-4"> <div class={`tw-balloon tw-balloon--lg tw-block ffz--menu-context`}>
<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-border-radius-large tw-c-background-base tw-c-text-inherit tw-elevation-4">
<div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--left"> <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-inline-flex tw-relative tw-tooltip-wrapper"> <div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--left">
<button <div class="tw-inline-flex tw-relative tw-tooltip__container">
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" <button
onDblClick={() => {this.emit('site.player:reset'); destroy()}} // eslint-disable-line react/jsx-no-bind 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 class="tw-button-icon__icon">
</span> <figure class="ffz-i-t-reset" />
</button> </span>
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-left"> </button>
{ this.i18n.t('player.reset_button.all', 'Reset All Players (Double-Click)') } <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>
</div> <div class="tw-align-items-center tw-flex tw-flex-column tw-flex-grow-1 tw-justify-content-center">
<div class="tw-align-items-center tw-flex tw-flex-column tw-flex-grow-1 tw-justify-content-center"> <h5 class="tw-align-center tw-c-text-alt tw-semibold">
<h5 class="tw-align-center tw-c-text-alt tw-semibold"> { this.i18n.t('site.menu_button.profiles', 'Profiles') }
{ this.i18n.t('site.menu_button.profiles', 'Profiles') } </h5>
</h5> </div>
</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-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 tw-tooltip-wrapper"> <button
<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"
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
onClick={e => {this.openSettings(e, btn); destroy()}} // eslint-disable-line react/jsx-no-bind >
> <span class="tw-button-icon__icon">
<span class="tw-button-icon__icon"> <figure class="ffz-i-cog" />
<figure class="ffz-i-cog" /> </span>
</span> </button>
</button> <div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center">
<div class="tw-tooltip tw-tooltip--down tw-tooltip--align-center"> { this.i18n.t('setting.profiles.configure', 'Configure') }
{ this.i18n.t('setting.profiles.configure', 'Configure') } </div>
</div> </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>
<div class="tw-flex tw-flex-column tw-justify-content-center tw-mg-l-05 tw-popover-header__icon-slot--right"> <div class="center-window__long-scrollable-area scrollable-area scrollable-area--suppress-scroll-x" data-simplebar>
<button {profiles}
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> </div>
<div class="center-window__long-scrollable-area scrollable-area scrollable-area--suppress-scroll-x" data-simplebar>
{profiles}
</div>
</div> </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 ) { 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 {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" 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" type="button"
@ -1260,7 +1260,7 @@ export default class Player extends Module {
} }
if ( ! cont ) { 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 {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" 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" type="button"
@ -1363,7 +1363,7 @@ export default class Player extends Module {
} }
if ( ! cont ) { 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 {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" 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" type="button"
@ -1431,7 +1431,7 @@ export default class Player extends Module {
} }
if ( ! cont ) { 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 {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" 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" 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}> <button class="tw-button tw-button--text" data-test-selector="parent-reply-button" onClick={msg._reply_handler}>
<span class="tw-button__text tw-pd-0">{ t.i18n.t('video-chat.reply', 'Reply') }</span> <span class="tw-button__text tw-pd-0">{ t.i18n.t('video-chat.reply', 'Reply') }</span>
</button> </button>
<span class="tw-c-text-alt-2 tw-font-size-7 tw-mg-l-05 tw-relative 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', { • { t.i18n.t('video-chat.time', '{time,humantime} ago', {
time: msg.timestamp 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"> {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-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}> <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"> <div class="tw-pd-x-05">
<p class="tw-font-size-7">{print_duration(context.comment.contentOffset)}</p> <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; order: 1;
} }
.tw-tooltip-wrapper { .tw-tooltip__container {
order: 100; order: 100;
} }
} }

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

@ -25,7 +25,7 @@
> >
<button <button
v-if="clearable" 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)" @click="change('', false)"
@keydown.escape="open = false" @keydown.escape="open = false"
@focus="onFocus(false)" @focus="onFocus(false)"

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

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