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

4.20.65

Browse source 
* 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:
SirStendec 2021-02-16 17:40:27 -05:00
parent 01e7a95cd8
commit ccef06ef7b
15 changed files with 366 additions and 54 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.64", "version": "4.20.65",
"description": "FrankerFaceZ is a Twitch enhancement suite.", "description": "FrankerFaceZ is a Twitch enhancement suite.",
"license": "Apache-2.0", "license": "Apache-2.0",
"scripts": { "scripts": {

8
src/modules/metadata.jsx
View file

@ -227,7 +227,7 @@ export default class Metadata extends Module {
/> />
{can_copy && <div class="tw-relative tw-tooltip__container 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 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') } aria-label={ this.i18n.t('metadata.uptime.copy', 'Copy to Clipboard') }
onClick={copy} onClick={copy}
> >
@ -648,7 +648,7 @@ export default class Metadata extends Module {
tip_content={null} tip_content={null}
> >
{btn = (<button {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" data-tooltip-type="metadata"
> >
<div class="tw-align-items-center tw-flex tw-flex-grow-0 tw-justify-center tw-pd-x-1"> <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> </div>
</button>)} </button>)}
{popup = (<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" data-tooltip-type="metadata"
> >
<div class="tw-align-items-center tw-flex tw-flex-grow-0 tw-justify-center"> <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 } else
btn = popup = el = (<button 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-tooltip-type="metadata"
data-key={key} data-key={key}
tip_content={null} tip_content={null}

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

@ -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__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"> <span class="tw-button-icon__icon">
<figure class="ffz-i-left-dir" /> <figure class="ffz-i-left-dir" />
</span> </span>
@ -86,7 +86,7 @@
</button> </button>
<button <button
v-if="! page_open" 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" @click="openPage"
> >
{{ t('i18n.ui.pages', 'Page {current,number} of {total,number}', { {{ t('i18n.ui.pages', 'Page {current,number} of {total,number}', {
@ -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__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"> <span class="tw-button-icon__icon">
<figure class="ffz-i-right-dir" /> <figure class="ffz-i-right-dir" />
</span> </span>
@ -115,8 +115,8 @@
</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__container" 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 ? 'tw-core-button--primary' : 'tw-core-button--text']" :class="[mode === 0 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
@click="mode = 0" @click="mode = 0"
> >
<div class="tw-align-items-center tw-flex tw-flex-grow-0"> <div class="tw-align-items-center tw-flex tw-flex-grow-0">
@ -131,8 +131,8 @@
</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__container" class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
:class="[mode === 1 ? 'tw-core-button--primary' : 'tw-core-button--text']" :class="[mode === 1 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
@click="mode = 1" @click="mode = 1"
> >
<div class="tw-align-items-center tw-flex tw-flex-grow-0"> <div class="tw-align-items-center tw-flex tw-flex-grow-0">
@ -147,8 +147,8 @@
</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__container" class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
:class="[mode === 2 ? 'tw-core-button--primary' : 'tw-core-button--text']" :class="[mode === 2 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
@click="mode = 2" @click="mode = 2"
> >
<div class="tw-align-items-center tw-flex tw-flex-grow-0"> <div class="tw-align-items-center tw-flex tw-flex-grow-0">
@ -163,8 +163,8 @@
</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__container" class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
:class="[mode === 3 ? 'tw-core-button--primary' : 'tw-core-button--text']" :class="[mode === 3 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
@click="mode = 3" @click="mode = 3"
> >
<div class="tw-align-items-center tw-flex tw-flex-grow-0"> <div class="tw-align-items-center tw-flex tw-flex-grow-0">
@ -179,8 +179,8 @@
</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__container" class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
:class="[mode === 4 ? 'tw-core-button--primary' : 'tw-core-button--text']" :class="[mode === 4 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
@click="mode = 4" @click="mode = 4"
> >
<div class="tw-align-items-center tw-flex tw-flex-grow-0"> <div class="tw-align-items-center tw-flex tw-flex-grow-0">
@ -195,8 +195,8 @@
</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__container" class="tw-mg-l-05 tw-border-radius-medium tw-pd-x-05 ffz-core-button tw-c-text-base tw-interactive tw-relative tw-tooltip__container"
:class="[mode === 5 ? 'tw-core-button--primary' : 'tw-core-button--text']" :class="[mode === 5 ? 'ffz-core-button--primary' : 'ffz-core-button--text']"
@click="mode = 5" @click="mode = 5"
> >
<div class="tw-align-items-center tw-flex tw-flex-grow-0"> <div class="tw-align-items-center tw-flex tw-flex-grow-0">

4
src/modules/viewer_cards/card.vue
View file

@ -75,7 +75,7 @@
<button <button
:data-title="t('viewer-card.close', 'Close')" :data-title="t('viewer-card.close', 'Close')"
:aria-label="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" @click="close"
> >
<span class="tw-button-icon__icon"> <span class="tw-button-icon__icon">
@ -86,7 +86,7 @@
v-if="! pinned" v-if="! pinned"
:data-title="t('viewer-card.pin', 'Pin')" :data-title="t('viewer-card.pin', 'Pin')"
:aria-label="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" @click="pin"
> >
<span class="tw-button-icon__icon"> <span class="tw-button-icon__icon">

19
src/sites/player/index.jsx
View file

@ -117,7 +117,7 @@ export default class PlayerSite extends BaseSite {
const should_render = inst.state.activeMenu === 'settings-menu__main'; const should_render = inst.state.activeMenu === 'settings-menu__main';
let lbl, cont = container.querySelector('.ffz--cc-button'); let lbl, btn, ver, cont = container.querySelector('.ffz--cc-button');
if ( ! cont ) { if ( ! cont ) {
if ( ! should_render ) if ( ! should_render )
return; return;
@ -134,14 +134,15 @@ export default class PlayerSite extends BaseSite {
} }
cont = (<div class="tw-mg-t-1 tw-border-t tw-pd-t-1 tw-full-width tw-relative ffz--cc-button"> cont = (<div class="tw-mg-t-1 tw-border-t tw-pd-t-1 tw-full-width tw-relative ffz--cc-button">
<button {btn = (<button
class="tw-block tw-border-radius-medium tw-full-width ffz-interactable ffz-interactable--hover-enabled ffz-interactable--default tw-interactive" class="tw-block tw-border-radius-medium tw-full-width ffz-interactable ffz-interactable--hover-enabled ffz-interactable--default tw-interactive"
onclick={handler} onclick={handler}
> >
<div class="tw-align-items-center tw-flex tw-pd-05 tw-relative"> <div class="tw-align-items-center tw-flex tw-pd-05 tw-relative">
{lbl = <div class="tw-flex-grow-1" />} {lbl = <div class="ffz--label tw-flex-grow-1 tw-ellipsis" />}
{ver = <div class="ffz--version tw-align-items-center tw-mg-l-05 tw-c-text-alt-2 tw-white-space-nowrap"></div>}
</div> </div>
</button> </button>)}
</div>); </div>);
container.appendChild(cont); container.appendChild(cont);
@ -149,9 +150,13 @@ export default class PlayerSite extends BaseSite {
} else if ( ! should_render ) { } else if ( ! should_render ) {
cont.remove(); cont.remove();
return; return;
} else } else {
lbl = cont.querySelector('button > div > div'); btn = cont.querySelector('button');
lbl = cont.querySelector('.ffz--label');
ver = cont.querySelector('.ffz--version');
}
lbl.textContent = this.i18n.t('site.menu_button', 'FrankerFaceZ Control Center'); lbl.textContent = btn.title = this.i18n.t('site.menu_button', 'FrankerFaceZ Control Center');
ver.textContent = this.resolve('core').constructor.version_info.toString();
} }
} }

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

@ -433,7 +433,7 @@ export default class Metadata extends Module {
tip_content={null} tip_content={null}
> >
{btn = (<button {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-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-regular'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
data-tooltip-type="metadata" data-tooltip-type="metadata"
> >
<div class="tw-align-items-center tw-flex tw-flex-grow-0 tw-justify-center tw-pd-x-1"> <div class="tw-align-items-center tw-flex tw-flex-grow-0 tw-justify-center tw-pd-x-1">
@ -442,7 +442,7 @@ export default class Metadata extends Module {
</div> </div>
</button>)} </button>)}
{popup = (<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-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-regular'}${def.tooltip ? ' ffz-tooltip ffz-tooltip--no-mouse' : ''}`}
data-tooltip-type="metadata" data-tooltip-type="metadata"
> >
<div class="tw-align-items-center tw-flex tw-flex-grow-0 tw-justify-center"> <div class="tw-align-items-center tw-flex tw-flex-grow-0 tw-justify-center">

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

@ -770,7 +770,7 @@ export default class Player extends Module {
if ( ! cont ) { if ( ! cont ) {
cont = (<div class="ffz--player-comp tw-inline-flex tw-relative tw-tooltip__container"> cont = (<div class="ffz--player-comp tw-inline-flex tw-relative 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 ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
type="button" type="button"
data-a-target="ffz-player-comp-button" data-a-target="ffz-player-comp-button"
onClick={this.compressPlayer.bind(this, inst)} // eslint-disable-line react/jsx-no-bind onClick={this.compressPlayer.bind(this, inst)} // eslint-disable-line react/jsx-no-bind
@ -1019,7 +1019,7 @@ export default class Player extends Module {
if ( ! cont ) { if ( ! cont ) {
cont = (<div class="ffz--player-pip tw-inline-flex tw-relative tw-tooltip__container"> cont = (<div class="ffz--player-pip tw-inline-flex tw-relative 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 ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
type="button" type="button"
data-a-target="ffz-player-pip-button" data-a-target="ffz-player-pip-button"
onClick={this.pipPlayer.bind(this, inst)} // eslint-disable-line react/jsx-no-bind onClick={this.pipPlayer.bind(this, inst)} // eslint-disable-line react/jsx-no-bind
@ -1122,7 +1122,7 @@ export default class Player extends Module {
if ( ! cont ) { if ( ! cont ) {
cont = (<div class="ffz--player-reset tw-inline-flex tw-relative tw-tooltip__container"> cont = (<div class="ffz--player-reset tw-inline-flex tw-relative 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 ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
type="button" type="button"
data-a-target="ffz-player-reset-button" data-a-target="ffz-player-reset-button"
onClick={rotateButton} onClick={rotateButton}
@ -1190,7 +1190,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__container 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 ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
type="button" type="button"
data-a-target="ffz-player-reset-button" data-a-target="ffz-player-reset-button"
onClick={rotateButton} onClick={rotateButton}

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

@ -2143,7 +2143,7 @@ export default class EmoteMenu extends Module {
/> />
{(no_tabs || ! is_emoji) && <div class="tw-relative tw-tooltip__container 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 ffz-core-button tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative${this.state.visibility_control ? ' ffz-core-button--primary' : ' tw-button-icon'}`}
onClick={this.toggleVisibilityControl} onClick={this.toggleVisibilityControl}
> >
<span class="tw-button-icon__icon tw-mg-x-05"> <span class="tw-button-icon__icon tw-mg-x-05">

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

@ -873,7 +873,7 @@ other {# messages were deleted by a moderator.}
e('div', { e('div', {
className: 'chat-line__reply-icon tw-absolute tw-border-radius-medium tw-c-background-base tw-elevation-1' className: 'chat-line__reply-icon tw-absolute tw-border-radius-medium tw-c-background-base tw-elevation-1'
}, e('button', { }, e('button', {
className: '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-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip ffz-tooltip--no-mouse', className: '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 tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative ffz-tooltip ffz-tooltip--no-mouse',
'data-test-selector': 'chat-reply-button', 'data-test-selector': 'chat-reply-button',
'aria-label': title, 'aria-label': title,
'data-title': title, 'data-title': title,

93
src/sites/twitch-twilight/modules/chat/scroller.js
View file

@ -87,7 +87,7 @@ export default class Scroller extends Module {
ui: { ui: {
path: 'Chat > Behavior >> Scrolling', path: 'Chat > Behavior >> Scrolling',
title: 'Smooth Scrolling', title: 'Smooth Scrolling',
description: '**Note:** This setting has been disabled until such time as someone is able to fix major bugs with it.\n\nSmoothly slide new chat messages into view. Speed will increase as necessary to keep up with chat.', description: '**Note:** This may not behave well depending on your browser. Disable this if you encounter issues.\n\nSmoothly slide new chat messages into view. Speed will increase as necessary to keep up with chat.',
component: 'setting-select-box', component: 'setting-select-box',
data: [ data: [
{value: 0, title: 'Disabled'}, {value: 0, title: 'Disabled'},
@ -145,9 +145,8 @@ export default class Scroller extends Module {
inst.ffzMaybeUnpause(); inst.ffzMaybeUnpause();
}); });
this.smooth_scroll = 0; // this.chat.context.get('chat.scroller.smooth-scroll'); this.smooth_scroll = this.chat.context.get('chat.scroller.smooth-scroll');
this.chat.context.on('changed:chat.scroller.smooth-scroll', val => { this.chat.context.on('changed:chat.scroller.smooth-scroll', val => {
val = 0;
this.smooth_scroll = val; this.smooth_scroll = val;
for(const inst of this.ChatScroller.instances) for(const inst of this.ChatScroller.instances)
@ -245,6 +244,26 @@ export default class Scroller extends Module {
t.on('tooltips:mousemove', this.ffzTooltipHover, this); t.on('tooltips:mousemove', this.ffzTooltipHover, this);
t.on('tooltips:leave', this.ffzTooltipLeave, this); t.on('tooltips:leave', this.ffzTooltipLeave, this);
inst.scrollToBottom = function() {
if ( inst._ffz_scroll_request )
return;
inst._ffz_scroll_request = requestAnimationFrame(inst._scrollToBottom);
}
inst._scrollToBottom = function() {
inst._ffz_scroll_request = null;
//inst._ffz_snapshot = null;
if ( ! inst.state.isPaused ) {
if ( inst.ffz_smooth_scroll && ! inst._ffz_one_fast_scroll )
inst.ffzSmoothScroll();
else {
inst._ffz_one_fast_scroll = false;
inst.ffz_oldScroll();
}
}
}
inst.handleScrollEvent = function(event) { inst.handleScrollEvent = function(event) {
if ( ! inst.scrollRef?.scrollContent ) if ( ! inst.scrollRef?.scrollContent )
return; return;
@ -314,6 +333,70 @@ export default class Scroller extends Module {
t.emit('site:dom-update', 'chat-scroller', inst); t.emit('site:dom-update', 'chat-scroller', inst);
} }
cls.prototype.ffzSmoothScroll = function() {
if ( this._ffz_smooth_animation )
cancelAnimationFrame(this._ffz_smooth_animation);
this.ffz_is_smooth_scrolling = true;
// Step setting value is # pixels to scroll per 10ms.
// 1 is pretty slow, 2 medium, 3 fast, 4 very fast.
let step = this.ffz_smooth_scroll,
old_time = performance.now();
const scroll_content = this.scrollRef?.scrollContent;
if ( ! scroll_content )
return;
const target_top = scroll_content.scrollHeight - scroll_content.clientHeight,
difference = target_top - scroll_content.scrollTop;
// If we are falling behind speed us up
if ( difference > scroll_content.clientHeight ) {
// we are a full scroll away, just jump there
step = difference;
} else if ( difference > 200 ) {
// we are starting to fall behind, speed it up a bit
step += step * Math.floor(difference / 200);
}
const smoothAnimation = () => {
if ( this.state.isPaused || ! this.state.isAutoScrolling )
return this.ffz_is_smooth_scrolling = false;
// See how much time has passed to get a step based off the delta
const current_time = performance.now(),
delta = current_time - old_time,
current_step = step * (delta / 10);
// we need to move at least one full pixel for scrollTop to do anything in this delta.
if ( current_step >= 1 ) {
const scroll_top = scroll_content.scrollTop,
next_top = scroll_top + current_step,
target_top = scroll_content.scrollHeight - scroll_content.clientHeight;
old_time = current_time;
if ( next_top < target_top ) {
scroll_content.scrollTop = scroll_top + current_step;
this._ffz_smooth_animation = requestAnimationFrame(smoothAnimation);
} else {
// We've reached the bottom.
scroll_content.scrollTop = target_top;
this.ffz_is_smooth_scrolling = false;
}
} else {
// The frame happened so quick since last update that we haven't moved a full pixel.
// Just wait.
this._ffz_smooth_animation = requestAnimationFrame(smoothAnimation);
}
}
smoothAnimation();
}
cls.prototype.ffzSetSmoothScroll = function(value) { cls.prototype.ffzSetSmoothScroll = function(value) {
this.ffz_smooth_scroll = value; this.ffz_smooth_scroll = value;
this.ffzMaybeUnpause(); this.ffzMaybeUnpause();
@ -566,11 +649,11 @@ export default class Scroller extends Module {
}, createElement('div', { }, createElement('div', {
className: 'tw-absolute tw-border-radius-medium tw-bottom-0 tw-c-background-overlay tw-c-text-overlay tw-mg-b-1' className: 'tw-absolute tw-border-radius-medium tw-bottom-0 tw-c-background-overlay tw-c-text-overlay tw-mg-b-1'
}, createElement('button', { }, createElement('button', {
className: '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-core-button tw-core-button--overlay tw-core-button--text tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative', className: '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 ffz-core-button ffz-core-button--overlay ffz-core-button--text tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative',
'data-a-target': 'chat-list-footer', 'data-a-target': 'chat-list-footer',
onClick: this.ffzFastResume onClick: this.ffzFastResume
}, createElement('div', { }, createElement('div', {
className: 'tw-align-items-center tw-core-button-label tw-flex tw-flex-grow-0' className: 'tw-align-items-center ffz-core-button-label tw-flex tw-flex-grow-0'
}, createElement('div', { }, createElement('div', {
className: 'tw-flex-grow-0' className: 'tw-flex-grow-0'
}, msg))))); }, msg)))));

2
src/sites/twitch-twilight/modules/chat/settings_menu.jsx
View file

@ -116,7 +116,7 @@ export default class SettingsMenu extends Module {
<div class="chat-settings__header tw-align-items-center tw-c-background-base tw-flex tw-pd-x-1 tw-relative"> <div class="chat-settings__header tw-align-items-center tw-c-background-base tw-flex tw-pd-x-1 tw-relative">
<div class="chat-settings__back-icon-container tw-left-0 tw-mg-r-05"> <div class="chat-settings__back-icon-container tw-left-0 tw-mg-r-05">
<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 ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
data-test-selector="chat-settings-back-button" data-test-selector="chat-settings-back-button"
aria-label={t.i18n.t('chat.settings.back', 'Back')} aria-label={t.i18n.t('chat.settings.back', 'Back')}
onClick={this.ffzPauseClick} onClick={this.ffzPauseClick}

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

@ -320,7 +320,7 @@ export default class MenuButton extends SiteModule {
> >
<div class="tw-inline-flex tw-relative tw-tooltip__container"> <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 ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative${this.loading ? ' loading' : ''}`}
onClick={e => this.handleClick(e, btn)} // eslint-disable-line react/jsx-no-bind onClick={e => this.handleClick(e, btn)} // eslint-disable-line react/jsx-no-bind
onContextMenu={e => this.renderContext(e, btn)} // eslint-disable-line react/jsx-no-bind onContextMenu={e => this.renderContext(e, btn)} // eslint-disable-line react/jsx-no-bind
> >
@ -465,7 +465,7 @@ export default class MenuButton extends SiteModule {
for(const profile of this.settings.__profiles) { for(const profile of this.settings.__profiles) {
const toggle = (<button const toggle = (<button
class="tw-flex-shrink-0 tw-mg-r-1 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-relative ffz-tooltip ffz-tooltip--no-mouse" class="tw-flex-shrink-0 tw-mg-r-1 tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-relative ffz-tooltip ffz-tooltip--no-mouse"
data-title={this.renderButtonTip(profile)} data-title={this.renderButtonTip(profile)}
onClick={e => { // eslint-disable-line react/jsx-no-bind onClick={e => { // eslint-disable-line react/jsx-no-bind
profile.toggled = ! profile.toggled; profile.toggled = ! profile.toggled;
@ -506,7 +506,7 @@ export default class MenuButton extends SiteModule {
<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__container"> <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 ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden"
onDblClick={() => {this.emit('site.player:reset'); destroy()}} // eslint-disable-line react/jsx-no-bind onDblClick={() => {this.emit('site.player:reset'); destroy()}} // eslint-disable-line react/jsx-no-bind
> >
<span class="tw-button-icon__icon"> <span class="tw-button-icon__icon">
@ -526,7 +526,7 @@ export default class MenuButton extends SiteModule {
<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__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 ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden"
onClick={e => {this.openSettings(e, btn); destroy()}} // eslint-disable-line react/jsx-no-bind 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">
@ -540,7 +540,7 @@ export default class MenuButton extends SiteModule {
</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">
<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 tw-relative" class="tw-align-items-center tw-align-middle tw-border-radius-medium tw-button-icon tw-button-icon--secondary ffz-core-button ffz-core-button--border tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
onClick={destroy} // eslint-disable-line react/jsx-no-bind onClick={destroy} // eslint-disable-line react/jsx-no-bind
> >
<span class="tw-button-icon__icon"> <span class="tw-button-icon__icon">

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

@ -1079,7 +1079,7 @@ export default class Player extends Module {
if ( ! cont ) { if ( ! cont ) {
cont = (<div class="ffz--player-comp tw-inline-flex tw-relative tw-tooltip__container"> cont = (<div class="ffz--player-comp tw-inline-flex tw-relative 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 ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
type="button" type="button"
data-a-target="ffz-player-comp-button" data-a-target="ffz-player-comp-button"
onClick={this.compressPlayer.bind(this, inst)} // eslint-disable-line react/jsx-no-bind onClick={this.compressPlayer.bind(this, inst)} // eslint-disable-line react/jsx-no-bind
@ -1329,7 +1329,7 @@ export default class Player extends Module {
if ( ! cont ) { if ( ! cont ) {
cont = (<div class="ffz--player-pip tw-inline-flex tw-relative tw-tooltip__container"> cont = (<div class="ffz--player-pip tw-inline-flex tw-relative 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 ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
type="button" type="button"
data-a-target="ffz-player-pip-button" data-a-target="ffz-player-pip-button"
onClick={this.pipPlayer.bind(this, inst)} // eslint-disable-line react/jsx-no-bind onClick={this.pipPlayer.bind(this, inst)} // eslint-disable-line react/jsx-no-bind
@ -1432,7 +1432,7 @@ export default class Player extends Module {
if ( ! cont ) { if ( ! cont ) {
cont = (<div class="ffz--player-reset tw-inline-flex tw-relative tw-tooltip__container"> cont = (<div class="ffz--player-reset tw-inline-flex tw-relative 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 ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
type="button" type="button"
data-a-target="ffz-player-reset-button" data-a-target="ffz-player-reset-button"
onClick={rotateButton} onClick={rotateButton}
@ -1500,7 +1500,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__container 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 ffz-core-button ffz-core-button--border ffz-core-button--overlay tw-inline-flex tw-interactive tw-justify-content-center tw-overflow-hidden tw-relative"
type="button" type="button"
data-a-target="ffz-player-reset-button" data-a-target="ffz-player-reset-button"
onClick={rotateButton} onClick={rotateButton}

223
styles/input/button.scss Normal file
View file

@ -0,0 +1,223 @@
.ffz-core-button {
font-size: var(--button-text-default);
font-weight: 600;
height: var(--button-size-default);
user-select: none;
white-space: nowrap;
&, &:hover {
text-decoration: none;
}
&--small {
font-size: var(--button-text-small);
height: var(--button-size-small);
}
&--large {
font-size: var(--button-text-large);
height: var(--button-size-large);
}
&--disabled {
opacity: 0.5;
}
&:disabled {
cursor: not-allowed;
}
&--primary {
background-color: var(--color-background-button-primary-default);
color: var(--color-text-button-primary);
&[data-focus-visible-added],
.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
background-color: var(--color-background-button-primary-hover);
color: var(--color-text-button-primary);
}
&[data-focus-visible-added] {
box-shadow: var(--shadow-button-focus);
}
&:active:not(.ffz-core-button--disabled),
&:hover:active:not(.ffz-core-button--disabled) {
background-color: var(--color-background-button-primary-active);
color: var(--color-text-button-primary);
}
&.ffz-core-button--disabled {
background-color: var(--color-background-button-disabled);
color: var(--color-text-button-disabled);
}
&.ffz-core-button--overlay {
background-color: var(--color-background-button-overlay-primary-default);
color: var(--color-text-button-overlay-primary);
&[data-focus-visible-added],
.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
background-color: var(--color-background-button-overlay-primary-hover);
color: var(--color-text-button-overlay-primary);
}
&[data-focus-visible-added] {
box-shadow: var(--shadow-button-overlay-focus);
}
&:active:not(.ffz-core-button--disabled),
&:hover:active:not(.ffz-core-button--disabled) {
background-color: var(--color-background-button-overlay-primary-active);
box-shadow: var(--shadow-button-overlay-active);
color: var(--color-text-button-overlay-primary);
}
}
}
&--secondary {
background-color: var(--color-background-button-secondary-default);
color: var(--color-text-button-secondary);
&[data-focus-visible-added],
.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
background-color: var(--color-background-button-secondary-hover);
color: var(--color-text-button-secondary);
}
&[data-focus-visible-added] {
box-shadow: var(--shadow-button-focus);
}
&:active:not(.ffz-core-button--disabled),
&:hover:active:not(.ffz-core-button--disabled) {
background-color: var(--color-background-button-secondary-active);
color: var(--color-text-button-secondary);
}
&.ffz-core-button--disabled {
background-color: var(--color-background-button-disabled);
color: var(--color-text-button-disabled);
}
&.ffz-core-button--overlay {
background-color: var(--color-background-button-overlay-secondary-default);
color: var(--color-text-button-overlay-secondary);
&[data-focus-visible-added],
.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
background-color: var(--color-background-button-overlay-secondary-hover);
color: var(--color-text-button-overlay-secondary);
}
&[data-focus-visible-added] {
box-shadow: var(--shadow-button-overlay-focus);
}
&:active:not(.ffz-core-button--disabled),
&:hover:active:not(.ffz-core-button--disabled) {
background-color: var(--color-background-button-overlay-secondary-active);
box-shadow: var(--shadow-button-overlay-active);
color: var(--color-text-button-overlay-secondary);
}
}
}
&--text {
background-color: var(--color-background-button-text-default);
color: var(--color-text-button-text);
&[data-focus-visible-added],
.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
background-color: var(--color-background-button-text-hover);
color: var(--color-text-button-text);
}
&[data-focus-visible-added] {
box-shadow: var(--shadow-button-focus);
}
&:active:not(.ffz-core-button--disabled),
&:hover:active:not(.ffz-core-button--disabled) {
background-color: var(--color-background-button-text-active);
box-shadow: var(--shadow-button-active);
color: var(--color-text-button-text);
}
&.ffz-core-button--disabled {
background-color: var(--color-background-button-disabled);
color: var(--color-text-button-disabled);
}
&.ffz-core-button--overlay {
background-color: var(--color-background-button-overlay-text-default);
color: var(--color-text-button-overlay-text);
&[data-focus-visible-added],
.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
background-color: var(--color-background-button-overlay-text-hover);
color: var(--color-text-button-overlay-text);
}
&[data-focus-visible-added] {
box-shadow: var(--shadow-button-overlay-focus);
}
&:active:not(.ffz-core-button--disabled),
&:hover:active:not(.ffz-core-button--disabled) {
background-color: var(--color-background-button-overlay-text-active);
box-shadow: var(--shadow-button-overlay-active);
color: var(--color-text-button-overlay-text);
}
}
}
&--destructive {
background-color: var(--color-background-button-destructive-default);
color: var(--color-text-button-destructive);
&[data-focus-visible-added],
.tw-root--hover &:hover:not(.ffz-core-button--disabled) {
background-color: var(--color-background-interactable-destructive-hover);
color: var(--color-text-button-destructive);
}
&[data-focus-visible-added] {
box-shadow: var(--shadow-button-focus);
}
&:active:not(.ffz-core-button--disabled),
&:hover:active:not(.ffz-core-button--disabled) {
background-color: var(--color-background-interactable-destructive-active);
box-shadow: var(--shadow-button-active);
color: var(--color-text-button-destructive)
}
&.ffz-core-button--disabled {
background-color: var(--color-background-button-disabled);
color: var(--color-text-button-disabled);
}
&.ffz-core-button--overlay.ffz-core-button--disabled {
background-color: var(--color-background-button-overlay-primary-default);
color: var(--color-text-button-overlay-primary);
}
}
&-label {
padding: 0 var(--button-padding-x);
}
&-label--icon {
padding-left: calc(var(--button-padding-x) - .2rem);
}
&-label--dropdown {
padding-right: calc(var(--button-padding-x) - .2rem);
}
&-icon { width: 2rem }
&-icon--small { width: 1.6rem }
&-icon--large { width: 2.4rem }
}

3
styles/input/index.scss
View file

@ -1,3 +1,4 @@
@import "button";
@import "checkbox"; @import "checkbox";
@import "text";
@import "interactable"; @import "interactable";
@import "text";