oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-07-02 00:58:32 +00:00
Code Wiki Activity

4.0.0-rc12.22

Browse source 
* Fixed: Rename all references to `tw-c-background` to `tw-c-background-base` and `tw-c-text` to `tw-c-text-base` to fix rendering issues with FrankerFaceZ's custom UI due to Twitch CSS changes.
This commit is contained in:
SirStendec 2018-09-25 18:37:14 -04:00
parent 8c0b4b8bad
commit fe41eecd77
22 changed files with 36 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

2
src/main.js
View file

@ -100,7 +100,7 @@ class FrankerFaceZ extends Module {
FrankerFaceZ.Logger = Logger;
const VER = FrankerFaceZ.version_info = {
major: 4, minor: 0, revision: 0, extra: '-rc12.21',
major: 4, minor: 0, revision: 0, extra: '-rc12.22',
commit: __git_commit__,
build: __webpack_hash__,
toString: () =>

4
src/modules/chat/actions/index.jsx
View file

@ -171,9 +171,9 @@ export default class Actions extends Module {
manual: true,
html: true,
tooltipClass: 'ffz-action-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background',
tooltipClass: 'ffz-action-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base',
arrowClass: 'tw-balloon__tail tw-overflow-hidden tw-absolute',
arrowInner: 'tw-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background tw-absolute',
arrowInner: 'tw-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background-base tw-absolute',
innerClass: 'tw-pd-1',
popper: {

2
src/modules/chat/components/chat-rich.vue
View file

@ -1,7 +1,7 @@
<template>
<a :href="url" class="chat-card__link" target="_blank" rel="noreferrer noopener">
<div class="ffz--chat-card tw-elevation-1 tw-mg-t">
<div class="tw-c-background tw-flex tw-flex-nowrap tw-pd-05">
<div class="tw-c-background-base tw-flex tw-flex-nowrap tw-pd-05">
<div class="chat-card__preview-img tw-c-background-alt-2 tw-align-items-center tw-flex tw-flex-shrink-0 tw-justify-content-center">
<div class="tw-card-img tw-flex-shrink-0 tw-flex tw-justify-content-center">
<img

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

@ -1,5 +1,5 @@
<template lang="html">
<div class="ffz--action tw-elevation-1 tw-c-background tw-border tw-pd-y-05 tw-pd-r-1 tw-mg-y-05 tw-flex tw-flex-nowrap">
<div class="ffz--action tw-elevation-1 tw-c-background-base tw-border tw-pd-y-05 tw-pd-r-1 tw-mg-y-05 tw-flex tw-flex-nowrap">
<div class="tw-flex tw-flex-shrink-0 tw-align-items-start handle tw-pd-x-05 tw-pd-t-1 tw-pd-b-05">
<span class="ffz-i-ellipsis-vert" />
</div>

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

@ -28,7 +28,7 @@
:key="key"
:data-key="key"
>
<div class="tw-elevation-1 tw-c-background tw-border tw-pd-y-05 tw-pd-x-1 tw-mg-y-05 tw-flex tw-flex-nowrap">
<div class="tw-elevation-1 tw-c-background-base tw-border tw-pd-y-05 tw-pd-x-1 tw-mg-y-05 tw-flex tw-flex-nowrap">
<div class="tw-flex-grow-1">
<h4>{{ exp.name }}</h4>
@ -83,7 +83,7 @@
>
<div
:class="{live: exp.in_use}"
class="ffz--experiment-row tw-elevation-1 tw-c-background 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 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">

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

@ -3,7 +3,7 @@
<div ref="list" class="ffz--rule-list">
<section v-for="(rule, idx) in rules" :key="`rule-${idx}`">
<div
class="ffz--rule tw-elevation-1 tw-c-background tw-border tw-mg-b-05 tw-pd-y-05 tw-pd-r-1 tw-flex tw-flex-nowrap tw-align-items-start"
class="ffz--rule tw-elevation-1 tw-c-background-base tw-border tw-mg-b-05 tw-pd-y-05 tw-pd-r-1 tw-flex tw-flex-nowrap tw-align-items-start"
tabindex="0"
>
<div class="tw-flex tw-flex-shrink-0 tw-align-items-center tw-handle tw-pd-x-05 tw-pd-y-1">

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

@ -1,9 +1,9 @@
<template lang="html">
<div
:class="{ maximized: maximized || exclusive, exclusive, faded }"
class="ffz-dialog ffz-main-menu tw-elevation-3 tw-c-background-alt tw-c-text tw-border tw-flex tw-flex-nowrap tw-flex-column"
class="ffz-dialog ffz-main-menu tw-elevation-3 tw-c-background-alt tw-c-text-base tw-border tw-flex tw-flex-nowrap tw-flex-column"
>
<header ref="header" class="tw-c-background tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="maybeResize($event)">
<header ref="header" class="tw-c-background-base tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="maybeResize($event)">
<h3 class="ffz-i-zreknarf ffz-i-pd-1">FrankerFaceZ</h3>
<div class="tw-flex-grow-1 tw-pd-x-2">
<div class="tw-search-input">

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

@ -31,7 +31,7 @@
>
<div
:class="{live: p.live}"
class="ffz--profile tw-elevation-1 tw-c-background tw-border tw-pd-y-05 tw-pd-r-1 tw-mg-y-05 tw-flex tw-flex-nowrap"
class="ffz--profile tw-elevation-1 tw-c-background-base tw-border tw-pd-y-05 tw-pd-r-1 tw-mg-y-05 tw-flex tw-flex-nowrap"
tabindex="0"
>
<div class="tw-flex tw-flex-shrink-0 tw-align-items-center handle tw-pd-x-05 tw-pd-t-1 tw-pd-b-05">

8
src/modules/metadata.jsx
View file

@ -433,10 +433,10 @@ export default class Metadata extends Module {
manual: true,
html: true,
tooltipClass: 'ffz-metadata-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background tw-c-text',
tooltipClass: 'ffz-metadata-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base tw-c-text-base',
// Hide the arrow for now, until we re-do our CSS to make it render correctly.
arrowClass: 'tw-balloon__tail tw-overflow-hidden tw-absolute',
arrowInner: 'tw-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background tw-absolute',
arrowInner: 'tw-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background-base tw-absolute',
innerClass: 'tw-pd-1',
popper: {
@ -743,10 +743,10 @@ export default class Metadata extends Module {
manual: true,
html: true,
tooltipClass: 'ffz-metadata-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background',
tooltipClass: 'ffz-metadata-balloon tw-balloon tw-block tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base',
// Hide the arrow for now, until we re-do our CSS to make it render correctly.
arrowClass: 'tw-balloon__tail tw-overflow-hidden tw-absolute',
arrowInner: 'tw-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background tw-absolute',
arrowInner: 'tw-balloon__tail-symbol tw-border-t tw-border-r tw-border-b tw-border-l tw-border-radius-small tw-c-background-base tw-absolute',
innerClass: 'tw-pd-1',
popper: {

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

@ -1,9 +1,9 @@
<template lang="html">
<div
:class="{ maximized: maximized || exclusive, exclusive, faded }"
class="ffz-dialog tw-elevation-3 tw-c-background-alt tw-c-text tw-border tw-flex tw-flex-nowrap tw-flex-column"
class="ffz-dialog tw-elevation-3 tw-c-background-alt tw-c-text-base tw-border tw-flex tw-flex-nowrap tw-flex-column"
>
<header class="tw-c-background tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="resize">
<header class="tw-c-background-base tw-full-width tw-align-items-center tw-flex tw-flex-nowrap" @dblclick="resize">
<h3 class="ffz-i-zreknarf ffz-i-pd-1">{{ t('i18n.ui.title', 'Translation Editor') }}</h3>
<div class="tw-flex-grow-1 tw-pd-x-2">
<div class="tw-search-input">

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

@ -1,7 +1,7 @@
<template>
<div
:style="{zIndex: z}"
class="ffz-mod-card tw-elevation-3 tw-c-background-alt tw-c-text tw-border tw-flex tw-flex-nowrap tw-flex-column"
class="ffz-mod-card tw-elevation-3 tw-c-background-alt tw-c-text-base tw-border tw-flex tw-flex-nowrap tw-flex-column"
tabindex="0"
@focusin="onFocus"
@keyup.esc="close"
@ -80,7 +80,7 @@
</header>
<error-tab v-if="errored" />
<template v-else-if="loaded">
<section class="tw-c-background">
<section class="tw-c-background-base">
<div class="mod-cards__tabs-container tw-border-t">
<div
v-for="(data, key) in tabs"

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

@ -397,7 +397,7 @@ export default class EmoteMenu extends Module {
tones = Object.entries(emoji.variants).map(([tone, emoji]) => this.renderTone(emoji, tone));
return (<div class="tw-absolute tw-balloon tw-balloon--up tw-balloon--right tw-balloon tw-block">
<div class="tw-border-b tw-border-l tw-border-r tw-border-t tw-border-radius-medium tw-c-background tw-elevation-1">
<div class="tw-border-b tw-border-l tw-border-r tw-border-t tw-border-radius-medium tw-c-background-base tw-elevation-1">
{this.renderTone(emoji, null)}
{tones}
</div>
@ -1578,7 +1578,7 @@ export default class EmoteMenu extends Module {
class={`tw-balloon tw-balloon--md tw-balloon--up tw-balloon--right tw-block tw-absolute ffz--emote-picker${padding ? ' reduced-padding' : ''}`}
data-a-target="emote-picker"
>
<div class="tw-border tw-elevation-1 tw-border-radius-small tw-c-background">
<div class="tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base">
<div
class="emote-picker__tab-content scrollable-area"
data-test-selector="scrollable-area-wrapper"
@ -1627,7 +1627,7 @@ export default class EmoteMenu extends Module {
/>}
</div>
</div>)}
<div class="emote-picker__tabs-container tw-flex tw-border-t tw-c-background">
<div class="emote-picker__tabs-container tw-flex tw-border-t tw-c-background-base">
<div
class={`ffz-tooltip emote-picker__tab tw-pd-x-1${tab === 'fav' ? ' emote-picker__tab--active' : ''}`}
id="emote-picker__fav"

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

@ -477,7 +477,7 @@ export default class ChatHook extends Module {
return null;
return createElement('div', {
className: 'tw-border-l tw-c-background-alt-2 tw-c-text tw-full-width tw-full-height tw-align-items-center tw-flex tw-flex-column tw-justify-content-center tw-relative'
className: 'tw-border-l tw-c-background-alt-2 tw-c-text-base tw-full-width tw-full-height tw-align-items-center tw-flex tw-flex-column tw-justify-content-center tw-relative'
}, 'There was an error displaying chat.');
} else

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

@ -349,7 +349,7 @@ export default class ChatLine extends Module {
className: 'chatter-name',
onClick: this.ffz_user_click_handler //e => this.props.onUsernameClick(user.login, null, msg.id, e.currentTarget.getBoundingClientRect().bottom)
}, e('span', {
className: 'tw-c-text tw-strong'
className: 'tw-c-text-base tw-strong'
}, user.userDisplayName)),
plan: plan.prime ?
t.i18n.t('chat.sub.twitch-prime', 'Twitch Prime') :
@ -382,7 +382,7 @@ export default class ChatLine extends Module {
className: 'chatter-name',
onClick: this.ffz_user_click_handler
}, e('span', {
className: 'tw-c-text tw-strong'
className: 'tw-c-text-base tw-strong'
}, user.userDisplayName))
})
]);

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

@ -142,7 +142,7 @@ export default class RichContent extends Module {
renderCard() {
return (<div class="ffz--chat-card tw-elevation-1 tw-mg-t">
<div class="tw-c-background tw-flex tw-flex-nowrap tw-pd-05">
<div class="tw-c-background-base tw-flex tw-flex-nowrap tw-pd-05">
{this.renderCardImage()}
{this.renderCardDescription()}
</div>

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

@ -136,7 +136,7 @@ export default class Scroller extends Module {
return null;
return createElement('div', {
className: 'tw-border-l tw-c-background-alt-2 tw-c-text tw-full-width tw-full-height tw-align-items-center tw-flex tw-flex-column tw-justify-content-center tw-relative'
className: 'tw-border-l tw-c-background-alt-2 tw-c-text-base tw-full-width tw-full-height tw-align-items-center tw-flex tw-flex-column tw-justify-content-center tw-relative'
}, [
createElement('div', {className: 'tw-mg-b-1'}, 'There was an error displaying chat.'),
! auto && createElement('button', {

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

@ -266,7 +266,7 @@ export default class Following extends SiteModule {
}
this.hostMenu = (<div class="ffz-host-menu tw-balloon tw-block">
<div class="tw-border tw-elevation-1 tw-border-radius-small tw-c-background">
<div class="tw-border tw-elevation-1 tw-border-radius-small tw-c-background-base">
<div class="scrollable-area" data-simplebar>
<div class="simplebar-scroll-content">
<div class="simplebar-content">

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

@ -409,7 +409,7 @@ export default class Directory extends SiteModule {
href={link}
onClick={e => this.routeClick(e, link)} // eslint-disable-line react/jsx-no-bind
>
<div class={`tw-absolute tw-right-0 tw-border-l tw-c-background ${is_video ? 'tw-top-0 tw-border-b' : 'tw-bottom-0 tw-border-t'}`}>
<div class={`tw-absolute tw-right-0 tw-border-l tw-c-background-base ${is_video ? 'tw-top-0 tw-border-b' : 'tw-bottom-0 tw-border-t'}`}>
<figure class="tw-aspect tw-aspect--align-top">
<img src={src} title={props.channelDisplayName} />
</figure>

2
src/sites/twitch-twilight/modules/featured-follow.vue
View file

@ -1,5 +1,5 @@
<template lang="html">
<div class="ffz-featured-follow tw-c-background">
<div class="ffz-featured-follow tw-c-background-base">
<header class="tw-full-width tw-align-items-center tw-flex tw-flex-nowrap">
<h4>{{ t('metadata.featured-follow.title', 'Featured Channels') }}</h4>

2
src/sites/twitch-twilight/modules/host-options.vue
View file

@ -1,5 +1,5 @@
<template lang="html">
<div class="ffz-auto-host-options tw-c-background">
<div class="ffz-auto-host-options tw-c-background-base">
<header class="tw-full-width tw-align-items-center tw-flex tw-flex-nowrap">
<h4>{{ t('metadata.host.title', 'Auto Host Management') }}</h4>
</header>

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

@ -112,9 +112,9 @@ export default class VideoChatHook extends Module {
</button>
<div class={`tw-absolute tw-balloon tw-balloon--down tw-balloon--right tw-balloon--sm ${is_open ? 'tw-block' : 'tw-hide'}`}>
<div class="tw-absolute tw-balloon__tail tw-overflow-hidden">
<div class="tw-absolute tw-balloon__tail-symbol tw-border-b tw-border-l tw-border-r tw-border-t tw-c-background" />
<div class="tw-absolute tw-balloon__tail-symbol tw-border-b tw-border-l tw-border-r tw-border-t tw-c-background-base" />
</div>
<div class="tw-border-b tw-border-l tw-border-r tw-border-radius-medium tw-border-t tw-c-background tw-elevation-1 tw-pd-y-1">
<div class="tw-border-b tw-border-l tw-border-r tw-border-radius-medium tw-border-t tw-c-background-base tw-elevation-1 tw-pd-y-1">
<button class="tw-interactable tw-interactable--inverted tw-full-width tw-pd-y-05 tw-pd-x-1">{
t.i18n.t('video-chat.copy-link', 'Copy Link')
}</button>
@ -153,7 +153,7 @@ export default class VideoChatHook extends Module {
const tokens = msg.ffz_tokens = msg.ffz_tokens || t.chat.tokenizeMessage(msg, u),
rich_content = FFZRichContent && t.chat.pluckRichContent(tokens, msg);
return (<div class="tw-align-items-start tw-flex tw-flex-nowrap tw-c-text">
return (<div class="tw-align-items-start tw-flex tw-flex-nowrap tw-c-text-base">
<div class="tw-flex-grow-1" data-room-id={msg.roomID} data-room={msg.roomLogin} data-user-id={user.id} data-user={user.login}>
<span class="chat-line__message--badges">{
t.chat.badges.render(msg, createElement)

4
src/sites/twitch-twilight/styles/theme.scss
View file

@ -1382,7 +1382,7 @@
.tw-c-background-body {
background-color: var(--ffz-color-21) !important;
}
.tw-c-background {
.tw-c-background-base {
background-color: var(--ffz-color-0) !important;
}
.tw-c-background-alt {
@ -1451,7 +1451,7 @@
.tw-c-background-scrollbar {
background-color: var(--ffz-color-0) !important;
}
.tw-c-text {
.tw-c-text-base {
color: var(--ffz-color-1) !important;
}
.tw-c-text-alt {