oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-11 00:20:54 +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">

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

@ -2089,11 +2089,14 @@ 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">
<div
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" data-a-target="emote-picker"
role="dialog"
> >
<div class="tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base"> <div class="emote-picker">
<div <div
class="emote-picker__tab-content scrollable-area" class="emote-picker__tab-content scrollable-area"
data-test-selector="scrollable-area-wrapper" data-test-selector="scrollable-area-wrapper"
@ -2138,7 +2141,7 @@ export default class EmoteMenu extends Module {
onChange={this.handleFilterChange} onChange={this.handleFilterChange}
onKeyDown={this.handleKeyDown} onKeyDown={this.handleKeyDown}
/> />
{(no_tabs || ! is_emoji) && <div class="tw-relative tw-tooltip-wrapper tw-mg-l-1"> {(no_tabs || ! is_emoji) && <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--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'}`} 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} onClick={this.toggleVisibilityControl}
@ -2237,6 +2240,8 @@ export default class EmoteMenu extends Module {
</div> </div>
</div> </div>
</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" />

12
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,11 +468,12 @@ 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-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-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-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-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"> <div class="tw-inline-flex tw-relative tw-tooltip__container">
<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"
onDblClick={() => {this.emit('site.player:reset'); destroy()}} // eslint-disable-line react/jsx-no-bind onDblClick={() => {this.emit('site.player:reset'); destroy()}} // eslint-disable-line react/jsx-no-bind
@ -492,7 +493,7 @@ export default class MenuButton extends SiteModule {
</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-wrapper"> <div class="tw-inline-flex tw-relative tw-tooltip__container">
<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
@ -521,6 +522,7 @@ export default class MenuButton extends SiteModule {
{profiles} {profiles}
</div> </div>
</div> </div>
</div>
</div>); </div>);
ctx._ffz_destroy = destroy; ctx._ffz_destroy = destroy;

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'}`"