mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-08-11 00:20:54 +00:00
4.20.65
* Changed: Re-enable Smooth Scrolling, with a warning that it may not work well. * Changed: Display the current FFZ version in the embed/popout player's menu. * Fixed: Recreate more of Twitch's CSS, since they're using more and more dynamic, procedural class names.
This commit is contained in:
parent
01e7a95cd8
commit
ccef06ef7b
15 changed files with 366 additions and 54 deletions
|
@ -227,7 +227,7 @@ export default class Metadata extends Module {
|
|||
/>
|
||||
{can_copy && <div class="tw-relative tw-tooltip__container tw-mg-l-1">
|
||||
<button
|
||||
class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon tw-core-button tw-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
|
||||
class="tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-left-radius-medium tw-border-top-right-radius-medium tw-button-icon ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
|
||||
aria-label={ this.i18n.t('metadata.uptime.copy', 'Copy to Clipboard') }
|
||||
onClick={copy}
|
||||
>
|
||||
|
@ -648,7 +648,7 @@ export default class Metadata extends Module {
|
|||
tip_content={null}
|
||||
>
|
||||
{btn = (<button
|
||||
class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-top-left-radius-medium tw-core-button tw-core-button--padded tw-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ${border ? 'tw-border-l tw-border-t tw-border-b' : 'tw-font-size-5 tw-regular'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
|
||||
class={`tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-top-left-radius-medium ffz-core-button ffz-core-button--padded ffz-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ${border ? 'tw-border-l tw-border-t tw-border-b' : 'tw-font-size-5 tw-regular'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
|
||||
data-tooltip-type="metadata"
|
||||
>
|
||||
<div class="tw-align-items-center tw-flex tw-flex-grow-0 tw-justify-center tw-pd-x-1">
|
||||
|
@ -657,7 +657,7 @@ export default class Metadata extends Module {
|
|||
</div>
|
||||
</button>)}
|
||||
{popup = (<button
|
||||
class={`tw-align-items-center tw-align-middle tw-border-bottom-right-radius-medium tw-border-top-right-radius-medium tw-core-button tw-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ${border ? 'tw-border' : 'tw-font-size-5 tw-regular'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
|
||||
class={`tw-align-items-center tw-align-middle tw-border-bottom-right-radius-medium tw-border-top-right-radius-medium ffz-core-button ffz-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ${border ? 'tw-border' : 'tw-font-size-5 tw-regular'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
|
||||
data-tooltip-type="metadata"
|
||||
>
|
||||
<div class="tw-align-items-center tw-flex tw-flex-grow-0 tw-justify-center">
|
||||
|
@ -670,7 +670,7 @@ export default class Metadata extends Module {
|
|||
|
||||
} else
|
||||
btn = popup = el = (<button
|
||||
class={`ffz-stat tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-top-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-right-radius-medium tw-core-button tw-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative tw-pd-x-05 ffz-stat--fix-padding ${border ? 'tw-border tw-mg-r-1' : 'tw-font-size-5 tw-regular tw-mg-r-05 ffz-mg-l--05'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
|
||||
class={`ffz-stat tw-align-items-center tw-align-middle tw-border-bottom-left-radius-medium tw-border-top-left-radius-medium tw-border-bottom-right-radius-medium tw-border-top-right-radius-medium ffz-core-button ffz-core-button--text ${inherit ? 'ffz-c-text-inherit' : 'tw-c-text-base'} tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative tw-pd-x-05 ffz-stat--fix-padding ${border ? 'tw-border tw-mg-r-1' : 'tw-font-size-5 tw-regular tw-mg-r-05 ffz-mg-l--05'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
|
||||
data-tooltip-type="metadata"
|
||||
data-key={key}
|
||||
tip_content={null}
|
||||
|
|
|
@ -76,7 +76,7 @@
|
|||
</header>
|
||||
<section class="tw-border-t tw-full-height tw-full-width tw-flex tw-flex-column tw-overflow-hidden">
|
||||
<header class="tw-border-b tw-pd-05 tw-c-background-base tw-flex tw-align-items-center">
|
||||
<button class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip__container" @click="prevPage">
|
||||
<button class="tw-border-radius-medium tw-pd-x-05 ffz-core-button ffz-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip__container" @click="prevPage">
|
||||
<span class="tw-button-icon__icon">
|
||||
<figure class="ffz-i-left-dir" />
|
||||
</span>
|
||||
|
@ -86,7 +86,7 @@
|
|||
</button>
|
||||
<button
|
||||
v-if="! page_open"
|
||||
class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-core-button--text tw-c-text-base tw-interactive"
|
||||
class="tw-border-radius-medium tw-pd-x-05 ffz-core-button ffz-core-button--text tw-c-text-base tw-interactive"
|
||||
@click="openPage"
|
||||
>
|
||||
{{ t('i18n.ui.pages', 'Page {current,number} of {total,number}', {
|
||||
|
@ -105,7 +105,7 @@
|
|||
@keydown.enter="closePage"
|
||||
@blur="closePage"
|
||||
>
|
||||
<button class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip__container" @click="nextPage">
|
||||
<button class="tw-border-radius-medium tw-pd-x-05 ffz-core-button ffz-core-button--text tw-c-text-base tw-interactive tw-relative tw-tooltip__container" @click="nextPage">
|
||||
<span class="tw-button-icon__icon">
|
||||
<figure class="ffz-i-right-dir" />
|
||||
</span>
|
||||
|
@ -115,8 +115,8 @@
|
|||
</button>
|
||||
<div class="tw-flex-grow-1" />
|
||||
<button
|
||||
class="tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
|
||||
:class="[mode === 0 ? 'tw-core-button--primary' : 'tw-core-button--text']"
|
||||
class="tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
|
||||
:class="[mode === 0 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
|
||||
@click="mode = 0"
|
||||
>
|
||||
<div class="tw-align-items-center tw-flex tw-flex-grow-0">
|
||||
|
@ -131,8 +131,8 @@
|
|||
</button>
|
||||
<button
|
||||
v-if="existing != total"
|
||||
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
|
||||
:class="[mode === 1 ? 'tw-core-button--primary' : 'tw-core-button--text']"
|
||||
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
|
||||
:class="[mode === 1 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
|
||||
@click="mode = 1"
|
||||
>
|
||||
<div class="tw-align-items-center tw-flex tw-flex-grow-0">
|
||||
|
@ -147,8 +147,8 @@
|
|||
</button>
|
||||
<button
|
||||
v-if="added"
|
||||
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
|
||||
:class="[mode === 2 ? 'tw-core-button--primary' : 'tw-core-button--text']"
|
||||
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
|
||||
:class="[mode === 2 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
|
||||
@click="mode = 2"
|
||||
>
|
||||
<div class="tw-align-items-center tw-flex tw-flex-grow-0">
|
||||
|
@ -163,8 +163,8 @@
|
|||
</button>
|
||||
<button
|
||||
v-if="changed"
|
||||
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
|
||||
:class="[mode === 3 ? 'tw-core-button--primary' : 'tw-core-button--text']"
|
||||
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
|
||||
:class="[mode === 3 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
|
||||
@click="mode = 3"
|
||||
>
|
||||
<div class="tw-align-items-center tw-flex tw-flex-grow-0">
|
||||
|
@ -179,8 +179,8 @@
|
|||
</button>
|
||||
<button
|
||||
v-if="pending"
|
||||
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
|
||||
:class="[mode === 4 ? 'tw-core-button--primary' : 'tw-core-button--text']"
|
||||
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
|
||||
:class="[mode === 4 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
|
||||
@click="mode = 4"
|
||||
>
|
||||
<div class="tw-align-items-center tw-flex tw-flex-grow-0">
|
||||
|
@ -195,8 +195,8 @@
|
|||
</button>
|
||||
<button
|
||||
v-if="invalid"
|
||||
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 tw-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
|
||||
:class="[mode === 5 ? 'tw-core-button--primary' : 'tw-core-button--text']"
|
||||
class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
|
||||
:class="[mode === 5 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
|
||||
@click="mode = 5"
|
||||
>
|
||||
<div class="tw-align-items-center tw-flex tw-flex-grow-0">
|
||||
|
|
|
@ -75,7 +75,7 @@
|
|||
<button
|
||||
:data-title="t('viewer-card.close', 'Close')"
|
||||
:aria-label="t('viewer-card.close', 'Close')"
|
||||
class="viewer-card-drag-cancel tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip"
|
||||
class="viewer-card-drag-cancel tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--overlay ffz-core-button ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip"
|
||||
@click="close"
|
||||
>
|
||||
<span class="tw-button-icon__icon">
|
||||
|
@ -86,7 +86,7 @@
|
|||
v-if="! pinned"
|
||||
:data-title="t('viewer-card.pin', 'Pin')"
|
||||
:aria-label="t('viewer-card.pin', 'Pin')"
|
||||
class="viewer-card-drag-cancel tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--overlay tw-core-button tw-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip"
|
||||
class="viewer-card-drag-cancel tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--overlay ffz-core-button ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip"
|
||||
@click="pin"
|
||||
>
|
||||
<span class="tw-button-icon__icon">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue