oss/FrankerFaceZ
oss/FrankerFaceZ
1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-08-07 06:40:54 +00:00
Code Wiki Activity

4.12.1

Browse source 
* Added: Preview of new theming system with custom colors.
* Changed: Start using the CSS color variables in more places.
* Fixed: Alignment of metadata in theater mode.
* Fixed: Custom chat font not applying to chat input.
* Fixed: Do not attempt to fetch uptime when there is no channel ID.
* Fixed: Hover state of emote menu section buttons.
* Fixed: Re-add pill rendering for FFZ menu button.
This commit is contained in:
SirStendec 2019-09-26 20:34:37 -04:00
parent 2232934309
commit a1949b0f8e
21 changed files with 451 additions and 266 deletions
Download patch file Download diff file Expand all files Collapse all files

4
src/modules/main_menu/components/color-picker.vue
View file

@ -22,7 +22,7 @@
<figure v-else-if="color" :style="`background-color: ${color}`" /> <figure v-else-if="color" :style="`background-color: ${color}`" />
<figure v-else class="ffz-i-eyedropper" /> <figure v-else class="ffz-i-eyedropper" />
</button> </button>
<div v-if="open" v-on-clickaway="closePicker" class="tw-absolute tw-z-default tw-right-0"> <div v-if="open" v-on-clickaway="closePicker" class="tw-absolute tw-z-above tw-right-0">
<chrome-picker :value="colors" @input="onPick" /> <chrome-picker :value="colors" @input="onPick" />
</div> </div>
</div> </div>
@ -42,7 +42,7 @@
v-if="open" v-if="open"
v-on-clickaway="closePicker" v-on-clickaway="closePicker"
:class="{'ffz-bottom-100': openUp}" :class="{'ffz-bottom-100': openUp}"
class="tw-absolute tw-z-default tw-balloon--up tw-balloon--right" class="tw-absolute tw-z-above tw-balloon--up tw-balloon--right"
> >
<chrome-picker :value="colors" @input="onPick" /> <chrome-picker :value="colors" @input="onPick" />
</div> </div>

14
src/sites/twitch-twilight/modules/channel_bar.jsx
View file

@ -118,12 +118,16 @@ export default class ChannelBar extends Module {
inst._ffz_uptime_updating = true; inst._ffz_uptime_updating = true;
inst._ffz_uptime_id = current_id; inst._ffz_uptime_id = current_id;
try { if ( ! current_id )
inst._ffz_meta = await this.twitch_data.getStreamMeta(current_id, inst?.props?.channel?.login);
} catch(err) {
this.log.capture(err);
this.log.error('Error fetching uptime:', err);
inst._ffz_meta = null; inst._ffz_meta = null;
else {
try {
inst._ffz_meta = await this.twitch_data.getStreamMeta(current_id, inst?.props?.channel?.login);
} catch(err) {
this.log.capture(err);
this.log.error('Error fetching uptime:', err);
inst._ffz_meta = null;
}
} }
inst._ffz_uptime_saved = Date.now(); inst._ffz_uptime_saved = Date.now();

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

@ -1713,7 +1713,7 @@ export default class EmoteMenu extends Module {
<div class="emote-picker__tab-nav-container tw-flex tw-border-t tw-c-background-alt"> <div class="emote-picker__tab-nav-container tw-flex tw-border-t tw-c-background-alt">
<div class={`emote-picker-tab-item${tab === 'fav' ? ' emote-picker-tab-item--active' : ''} tw-relative`}> <div class={`emote-picker-tab-item${tab === 'fav' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
<button <button
class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive" class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive${tab === 'fav' ? ' tw-interactable--selected' : ''}`}
id="emote-picker__fav" id="emote-picker__fav"
data-tab="fav" data-tab="fav"
data-tooltip-type="html" data-tooltip-type="html"
@ -1727,7 +1727,7 @@ export default class EmoteMenu extends Module {
</div> </div>
{this.state.has_channel_tab && <div class={`emote-picker-tab-item${tab === 'channel' ? ' emote-picker-tab-item--active' : ''} tw-relative`}> {this.state.has_channel_tab && <div class={`emote-picker-tab-item${tab === 'channel' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
<button <button
class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive" class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive${tab === 'channel' ? ' tw-interactable--selected' : ''}`}
id="emote-picker__channel" id="emote-picker__channel"
data-tab="channel" data-tab="channel"
data-tooltip-type="html" data-tooltip-type="html"
@ -1741,7 +1741,7 @@ export default class EmoteMenu extends Module {
</div>} </div>}
<div class={`emote-picker-tab-item${tab === 'all' ? ' emote-picker-tab-item--active' : ''} tw-relative`}> <div class={`emote-picker-tab-item${tab === 'all' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
<button <button
class="ffz-tooltip tw-block tw-full-width ttw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive" class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive${tab === 'all' ? ' tw-interactable--selected' : ''}`}
id="emote-picker__all" id="emote-picker__all"
data-tab="all" data-tab="all"
data-tooltip-type="html" data-tooltip-type="html"
@ -1755,7 +1755,7 @@ export default class EmoteMenu extends Module {
</div> </div>
{this.state.has_emoji_tab && <div class={`emote-picker-tab-item${tab === 'emoji' ? ' emote-picker-tab-item--active' : ''} tw-relative`}> {this.state.has_emoji_tab && <div class={`emote-picker-tab-item${tab === 'emoji' ? ' emote-picker-tab-item--active' : ''} tw-relative`}>
<button <button
class="ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive" class={`ffz-tooltip tw-block tw-full-width tw-interactable tw-interactable--hover-enabled tw-interactable--inverted tw-interactive${tab === 'emoji' ? ' tw-interactable--selected' : ''}`}
id="emote-picker__emoji" id="emote-picker__emoji"
data-tab="emoji" data-tab="emoji"
data-tooltip-type="html" data-tooltip-type="html"

35
src/sites/twitch-twilight/modules/css_tweaks/index.js
View file

@ -8,6 +8,8 @@ import Module from 'utilities/module';
import {ManagedStyle} from 'utilities/dom'; import {ManagedStyle} from 'utilities/dom';
import {has} from 'utilities/object'; import {has} from 'utilities/object';
const STYLE_VALIDATOR = document.createElement('span');
const CLASSES = { const CLASSES = {
'top-discover': '.top-nav__nav-link[data-a-target="discover-link"]', 'top-discover': '.top-nav__nav-link[data-a-target="discover-link"]',
'side-nav': '.side-nav', 'side-nav': '.side-nav',
@ -221,6 +223,17 @@ export default class CSSTweaks extends Module {
// Other? // Other?
this.settings.add('layout.theme.global-font', {
default: '',
ui: {
path: 'Appearance > Theme >> Fonts',
title: 'Font Family',
description: 'Override the font used for the entire Twitch website.',
component: 'setting-text-box'
},
changed: () => this.updateFont()
});
this.settings.add('channel.hide-live-indicator', { this.settings.add('channel.hide-live-indicator', {
requires: ['context.route.name'], requires: ['context.route.name'],
process(ctx, val) { process(ctx, val) {
@ -282,6 +295,28 @@ export default class CSSTweaks extends Module {
this.toggleHide('side-closed-friends', friends === 2); this.toggleHide('side-closed-friends', friends === 2);
this.toggleHide('whispers', !this.settings.get('whispers.show')); this.toggleHide('whispers', !this.settings.get('whispers.show'));
this.updateFont();
}
updateFont() {
let font = this.settings.get('layout.theme.global-font');
if ( font && font.length ) {
if ( font.indexOf(' ') !== -1 && font.indexOf(',') === -1 && font.indexOf('"') === -1 && font.indexOf("'") === -1 )
font = `"${font}"`;
STYLE_VALIDATOR.style.fontFamily = '';
STYLE_VALIDATOR.style.fontFamily = font;
if ( STYLE_VALIDATOR.style.fontFamily ) {
this.setVariable('global-font', font);
this.toggle('global-font', true);
return;
}
}
this.toggle('global-font', false);
this.deleteVariable('global-font');
} }
toggleHide(key, val) { toggleHide(key, val) {

1
src/sites/twitch-twilight/modules/css_tweaks/styles/chat-font.scss
View file

@ -12,5 +12,6 @@
textarea[data-a-target="chat-input"], textarea[data-a-target="chat-input"],
textarea[data-a-target="video-chat-input"] { textarea[data-a-target="video-chat-input"] {
font-family: var(--ffz-chat-font-family) !important;
font-size: var(--ffz-chat-font-size) !important; font-size: var(--ffz-chat-font-size) !important;
} }

1
src/sites/twitch-twilight/modules/css_tweaks/styles/theatre-metadata.scss
View file

@ -5,6 +5,7 @@
right: calc(var(--ffz-chat-width) + 25rem); right: calc(var(--ffz-chat-width) + 25rem);
z-index: 3500; z-index: 3500;
opacity: 0; opacity: 0;
width: unset !important;
pointer-events: none; pointer-events: none;

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

@ -93,6 +93,21 @@ export default class MenuButton extends SiteModule {
return val; return val;
} }
formatExtraPill() {
if ( this.has_update )
return null;
if ( DEBUG && this.addons.has_dev )
return this.i18n.t('site.menu_button.dev', 'dev');
if ( DEBUG && ! this.addons.has_dev )
return this.i18n.t('site.menu_button.main-dev', 'm-dev');
if ( ! DEBUG && this.addons.has_dev )
return this.i18n.t('site.menu_button.addon-dev', 'a-dev');
return null;
}
update() { update() {
for(const inst of this.NavBar.instances) for(const inst of this.NavBar.instances)
@ -135,7 +150,8 @@ export default class MenuButton extends SiteModule {
if ( el ) if ( el )
el.remove(); el.remove();
const pill = this.formatPill(); const pill = this.formatPill(),
extra_pill = this.formatExtraPill();
// TODO: Pill. // TODO: Pill.
@ -169,7 +185,21 @@ export default class MenuButton extends SiteModule {
</div>)} </div>)}
</div> </div>
</div> </div>
{this.has_update && (<div class="ffz-menu__extra-pill tw-absolute">
<div class={`tw-pill ${this.important_update ? 'tw-pill--notification' : ''}`}>
<figure class="ffz-i-arrows-cw" />
</div>
</div>)}
{extra_pill && (<div class="ffz-menu__extra-pill tw-absolute">
<div class="tw-pill">
{extra_pill}
</div>
</div>)}
{pill && (<div class="ffz-menu__pill tw-absolute">
<div class="tw-pill">
{pill}
</div>
</div>)}
</div>) </div>)
/*el = (<div class="ffz-top-nav tw-align-self-center tw-flex-grow-0 tw-flex-shrink-0 tw-flex-nowrap tw-pd-r-1 tw-pd-l-05"> /*el = (<div class="ffz-top-nav tw-align-self-center tw-flex-grow-0 tw-flex-shrink-0 tw-flex-nowrap tw-pd-r-1 tw-pd-l-05">

95
src/sites/twitch-twilight/modules/theme/index.js
View file

@ -6,8 +6,10 @@
import Module from 'utilities/module'; import Module from 'utilities/module';
import {createElement} from 'utilities/dom'; import {createElement} from 'utilities/dom';
import {Color} from 'utilities/color';
import THEME_CSS_URL from 'site/styles/theme.scss'; import THEME_CSS from 'site/styles/theme.scss';
import NORMALIZER_CSS_URL from 'site/styles/color_normalizer.scss';
const BAD_ROUTES = ['product', 'prime', 'turbo']; const BAD_ROUTES = ['product', 'prime', 'turbo'];
@ -23,6 +25,28 @@ export default class ThemeEngine extends Module {
this.should_enable = true; this.should_enable = true;
// Colors
this.settings.add('theme.color.background', {
default: '',
ui: {
path: 'Appearance > Theme >> Colors @{"description": "This is a quick preview of a new system coming soon to FrankerFaceZ. Expect heavy changes here, including separate Basic and Advanced modes, and better color selection."}',
title: 'Background',
component: 'setting-color-box'
},
changed: () => this.updateCSS()
});
this.settings.add('theme.color.text', {
default: '',
ui: {
path: 'Appearance > Theme >> Colors',
title: 'Text',
component: 'setting-color-box'
},
changed: () => this.updateCSS()
});
this.settings.add('theme.dark', { this.settings.add('theme.dark', {
requires: ['theme.is-dark'], requires: ['theme.is-dark'],
default: false, default: false,
@ -70,19 +94,78 @@ This is a very early feature and will change as there is time.`,
}); });
this._style = null; this._style = null;
this._normalizer = null;
} }
updateOldCSS() {
updateCSS() {
const dark = this.settings.get('theme.is-dark'), const dark = this.settings.get('theme.is-dark'),
gray = this.settings.get('theme.dark'); gray = this.settings.get('theme.dark');
document.body.classList.toggle('tw-root--theme-dark', dark); //document.body.classList.toggle('tw-root--theme-dark', dark);
document.body.classList.toggle('tw-root--theme-ffz', gray); document.body.classList.toggle('tw-root--theme-ffz', gray);
this.css_tweaks.setVariable('border-color', dark ? (gray ? '#2a2a2a' : '#2c2541') : '#dad8de'); this.css_tweaks.setVariable('border-color', dark ? (gray ? '#2a2a2a' : '#2c2541') : '#dad8de');
} }
updateCSS() {
this.updateOldCSS();
let dark = this.settings.get('theme.is-dark');
const bits = [];
const background = Color.RGBA.fromCSS(this.settings.get('theme.color.background'));
if ( background ) {
bits.push(`--color-background-body: ${background.toCSS()};`);
const hsla = background.toHSLA(),
luma = hsla.l;
dark = luma < 0.5;
bits.push(`--color-background-base: ${hsla._l(luma + (dark ? .05 : -.05)).toCSS()};`);
bits.push(`--color-background-alt: ${hsla._l(luma + (dark ? .1 : -.1)).toCSS()};`);
bits.push(`--color-background-alt-2: ${hsla._l(luma + (dark ? .15 : -.15)).toCSS()};`);
}
let text = Color.RGBA.fromCSS(this.settings.get('theme.color.text'));
if ( ! text && background ) {
text = Color.RGBA.fromCSS(dark ? '#FFF' : '#000');
}
if ( text ) {
bits.push(`--color-text-base: ${text.toCSS()};`);
const hsla = text.toHSLA(),
luma = hsla.l;
bits.push(`--color-text-alt: ${hsla._l(luma + (dark ? -.1 : .1)).toRGBA().toCSS()};`);
bits.push(`--color-text-alt-2: ${hsla._l(luma + (dark ? -.2 : .2)).toRGBA().toCSS()};`);
}
if ( bits.length )
this.css_tweaks.set('colors', `body {${bits.join('\n')}}`);
else
this.css_tweaks.delete('colors');
}
toggleNormalizer(enable) {
if ( ! this._normalizer ) {
if ( ! enable )
return;
this._normalizer = createElement('link', {
rel: 'stylesheet',
type: 'text/css',
href: NORMALIZER_CSS_URL
});
} else if ( ! enable ) {
this._normalizer.remove();
return;
}
if ( ! document.head.contains(this._normalizer) )
document.head.appendChild(this._normalizer)
}
toggleStyle(enable) { toggleStyle(enable) {
if ( ! this._style ) { if ( ! this._style ) {
@ -92,7 +175,7 @@ This is a very early feature and will change as there is time.`,
this._style = createElement('link', { this._style = createElement('link', {
rel: 'stylesheet', rel: 'stylesheet',
type: 'text/css', type: 'text/css',
href: THEME_CSS_URL href: THEME_CSS
}); });
} else if ( ! enable ) { } else if ( ! enable ) {
@ -110,5 +193,7 @@ This is a very early feature and will change as there is time.`,
onEnable() { onEnable() {
this.updateSetting(this.settings.get('theme.dark')); this.updateSetting(this.settings.get('theme.dark'));
this.toggleNormalizer(true);
this.updateCSS();
} }
} }

374
src/sites/twitch-twilight/styles/chat.scss
View file

@ -1,6 +1,6 @@
.chat-line__message--emote { .chat-line__message--emote {
vertical-align: middle; vertical-align: middle;
margin: -.5rem 0; margin: -.5rem 0;
} }
.chat-author__display-name, .chat-author__display-name,
@ -17,262 +17,262 @@
} }
.user-notice-line.tw-mg-y-05 { .user-notice-line.tw-mg-y-05 {
margin-top: 0 !important; margin-top: 0 !important;
margin-bottom: 0 !important; margin-bottom: 0 !important;
} }
.chat-settings__content div[data-test-selector="high-contrast-selector"] { .chat-settings__content div[data-test-selector="high-contrast-selector"] {
display: none; display: none;
} }
.autocomplete-balloon { .autocomplete-balloon {
.autocomplete-balloon__item { .autocomplete-balloon__item {
> .tw-flex { > .tw-flex {
> div { > div {
display: flex; display: flex;
flex-shrink: 0; flex-shrink: 0;
} }
} }
span { span {
overflow-x: hidden; overflow-x: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
} }
} }
} }
.ffz-action-balloon { .ffz-action-balloon {
z-index: 10000 !important; z-index: 10000 !important;
} }
.ffz-tooltip.chat-card__link > * { .ffz-tooltip.chat-card__link > * {
pointer-events: none; pointer-events: none;
} }
.ffz--chat-card { .ffz--chat-card {
.vod-message & { .vod-message & {
.ffz--card-text { .ffz--card-text {
max-width: 18rem; max-width: 18rem;
} }
} }
.chat-card__title { .chat-card__title {
max-width: unset; max-width: unset;
} }
.ffz--two-line { .ffz--two-line {
.tw-ellipsis { line-height: 1.4rem } .tw-ellipsis { line-height: 1.4rem }
.chat-card__title { line-height: 1.5rem } .chat-card__title { line-height: 1.5rem }
} }
} }
.ffz-emoji { .ffz-emoji {
width: calc(var(--ffz-chat-font-size) * 1.5); width: calc(var(--ffz-chat-font-size) * 1.5);
height: calc(var(--ffz-chat-font-size) * 1.5); height: calc(var(--ffz-chat-font-size) * 1.5);
&.preview-image { &.preview-image {
width: 7.2rem; width: 7.2rem;
height: 7.2rem; height: 7.2rem;
} }
&.emote-autocomplete-provider__image { &.emote-autocomplete-provider__image {
width: 1.8rem; width: 1.8rem;
height: 1.8rem; height: 1.8rem;
margin: .5rem; margin: .5rem;
} }
} }
.ffz-mod-icon { .ffz-mod-icon {
text-align: center; text-align: center;
display: inline-flex; display: inline-flex;
& + .ffz-mod-icon { & + .ffz-mod-icon {
margin-left: 1px; margin-left: 1px;
} }
span, img, figure { span, img, figure {
pointer-events: none; pointer-events: none;
} }
span, img, span, img,
figure:before { figure:before {
margin: 0 0.05rem !important margin: 0 0.05rem !important
} }
span { span {
display: inline-block; display: inline-block;
min-width: 1.6rem; min-width: 1.6rem;
font-weight: bold; font-weight: bold;
} }
.mod-icon__image img { .mod-icon__image img {
max-height: 1.6rem; max-height: 1.6rem;
} }
&.colored, &.colored,
.mod-icon__image img { .mod-icon__image img {
opacity: 0.75; opacity: 0.75;
} }
.ffz--action &, .ffz--action &,
.tw-interactable:hover &, .tw-interactable:hover &,
&:hover { &:hover {
.tw-root--theme-dark &, & { .tw-root--theme-dark &, & {
&.tw-c-text-alt-2 { &.tw-c-text-alt-2 {
color: inherit !important; color: inherit !important;
} }
} }
&.colored, &.colored,
.mod-icon__image img { .mod-icon__image img {
opacity: 1; opacity: 1;
} }
} }
} }
.ffz--giftee-name { .ffz--giftee-name {
cursor: pointer; cursor: pointer;
outline: none; outline: none;
&:hover { &:hover {
text-decoration: underline; text-decoration: underline;
} }
} }
.chat-line__username:hover, .chat-line__username:hover,
.chatter-name:hover { .chatter-name:hover {
text-decoration: underline; text-decoration: underline;
} }
.ffz--emote-picker { .ffz--emote-picker {
section:not(.filtered) heading { section:not(.filtered) heading {
cursor: pointer; cursor: pointer;
} }
.ffz--menu-badge { .ffz--menu-badge {
width: 1.8rem; height: 1.8rem; width: 1.8rem; height: 1.8rem;
} }
.ffz--expiry-info { .ffz--expiry-info {
opacity: 0.5; opacity: 0.5;
} }
.emote-picker__placeholder { .emote-picker__placeholder {
display: inline-block; display: inline-block;
margin: .5rem .5rem 0; margin: .5rem .5rem 0;
min-width: 2.8rem; min-width: 2.8rem;
} }
.emote-picker__tab { /*.emote-picker__tab {
border-top: 1px solid transparent; border-top: 1px solid transparent;
&.emote-picker__tab--active, &.emote-picker__tab--active,
&:hover { &:hover {
border-top-color: #6441a4; border-top-color: #6441a4;
} }
} }*/
.whispers-thread .emote-picker-and-button & .emote-picker__tab-content { .whispers-thread .emote-picker-and-button & .emote-picker__tab-content {
max-height: 30rem; max-height: 30rem;
} }
.emote-picker__tab-content { .emote-picker__tab-content {
height: unset !important; height: unset !important;
max-height: 50rem; max-height: 50rem;
} }
.whispers-thread { .whispers-thread {
overflow: visible !important; overflow: visible !important;
} }
@media only screen and (max-height: 750px) { @media only screen and (max-height: 750px) {
.emote-picker__tab-content { .emote-picker__tab-content {
#root & { #root & {
max-height: calc(100vh - 31rem); max-height: calc(100vh - 31rem);
} }
max-height: calc(100vh - 26rem); max-height: calc(100vh - 26rem);
} }
} }
.emote-picker-tab-item button > *, .emote-picker-tab-item button > *,
.emote-picker__emote-link > * { .emote-picker__emote-link > * {
pointer-events: none; pointer-events: none;
} }
.emote-picker__emote-image { .emote-picker__emote-image {
max-height: 3.2rem max-height: 3.2rem
} }
section:last-of-type { section:last-of-type {
& > div:last-child, & > div:last-child,
& > heading:last-child { & > heading:last-child {
border-bottom: none !important; border-bottom: none !important;
} }
} }
.ffz--emoji-tone-picker { .ffz--emoji-tone-picker {
.tw-balloon { .tw-balloon {
min-width: unset; min-width: unset;
} }
.tw-button__text { .tw-button__text {
padding: .2rem .4rem; padding: .2rem .4rem;
padding-right: .8rem; padding-right: .8rem;
} }
} }
.ffz--emoji-tone-picker__emoji { .ffz--emoji-tone-picker__emoji {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
} }
.emote-picker__emote-link { .emote-picker__emote-link {
position: relative; position: relative;
padding: 0.5rem; padding: 0.5rem;
width: unset; width: unset;
height: unset; height: unset;
min-width: 3.8rem; min-width: 3.8rem;
img { img {
vertical-align: middle; vertical-align: middle;
} }
&.emote-picker__emoji { &.emote-picker__emoji {
min-width: unset; min-width: unset;
.emote-picker__emote-figure { .emote-picker__emote-figure {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
} }
} }
&.locked { &.locked {
cursor: not-allowed; cursor: not-allowed;
img { img {
opacity: 0.5; opacity: 0.5;
} }
.ffz-i-lock { .ffz-i-lock {
position: absolute; position: absolute;
bottom: 0; right: 0; bottom: 0; right: 0;
border-radius: .2rem; border-radius: .2rem;
font-size: 1rem; font-size: 1rem;
background-color: rgba(0,0,0,0.5); background-color: rgba(0,0,0,0.5);
color: #fff; color: #fff;
} }
} }
} }
&.reduced-padding { &.reduced-padding {
.tw-pd-1 { .tw-pd-1 {
padding: 0.5rem !important; padding: 0.5rem !important;
} }
} }
} }

45
src/sites/twitch-twilight/styles/color_normalizer.scss Normal file
View file

@ -0,0 +1,45 @@
body {
background-color: var(--color-background-body) !important;
}
.tw-root--theme-dark .channel-root__right-column,
.channel-root__right-column {
background-color: var(--color-background-body) !important;
}
.tw-root--theme-dark .chat-room,
.chat-room {
background-color: var(--color-background-body) !important;
}
.tw-root--theme-dark .carousel-player-nav-arrow__container,
.carousel-player-nav-arrow__container {
background-color: var(--color-background-body) !important;
}
.tw-root--theme-dark .side-nav__overlay-wrapper,
.side-nav__overlay-wrapper {
background-color: var(--color-background-alt) !important;
}
.tw-root--theme-dark .side-nav-card__link:hover,
.side-nav-card__link:hover {
background-color: var(--color-background-alt-2) !important;
}
.tw-root--theme-dark .channel-header,
.channel-header {
background-color: var(--color-background-body) !important;
}
.tw-root--theme-dark .channel-header__user,
.channel-header__user {
color: var(--color-text-base) !important;
}
.tw-root--theme-dark .chat-line__moderation,
.tw-root--theme-dark .chat-line__status,
.chat-line__moderation,
.chat-line__status {
color: var(--color-text-alt-2) !important;
}

15
src/sites/twitch-twilight/styles/menu_button.scss
View file

@ -1,14 +1,17 @@
.ffz-top-nav { .ffz-top-nav {
.tw-pill {
padding: .4rem;
}
.ffz-menu__pill { .ffz-menu__pill {
top: -1rem; top: -.5rem;
right: -.3rem; right: 0;
font-size: 1.2rem;
} }
.ffz-menu__extra-pill { .ffz-menu__extra-pill {
bottom: -0.2rem; bottom: -.5rem;
right: 5.2rem; right: 0;
font-size: 1.2rem; pointer-events: none;
} }
.tw-pd-r-1 + & { .tw-pd-r-1 + & {

10
src/sites/twitch-twilight/styles/mod_card.scss
View file

@ -2,12 +2,12 @@
width: 340px; width: 340px;
z-index: 9001; z-index: 9001;
> header { > header {
cursor: move; cursor: move;
background-size: cover; background-size: cover;
background-position: top; background-position: top;
} }
.ffz-tooltip { .ffz-tooltip {
> * { > * {
@ -23,7 +23,7 @@
line-height: 1.2; line-height: 1.2;
} }
.mod-cards__tabs-container { .mod-cards__tabs-container {
height: 3rem; height: 3rem;
> .mod-cards__tab { > .mod-cards__tab {

2
src/utilities/color.js
View file

@ -386,7 +386,7 @@ HSLAColor.prototype.targetLuminance = function (target) {
} }
HSLAColor.prototype.toRGBA = function() { return RGBAColor.fromHSLA(this.h, this.s, this.l, this.a); } HSLAColor.prototype.toRGBA = function() { return RGBAColor.fromHSLA(this.h, this.s, this.l, this.a); }
HSLAColor.prototype.toCSS = function() { return `"hsl${this.a !== 1 ? 'a' : ''}(${Math.round(this.h*360)},${Math.round(this.s*100)}%,${Math.round(this.l*100)}%${this.a !== 1 ? `,${this.a}` : ''})`; } HSLAColor.prototype.toCSS = function() { return `hsl${this.a !== 1 ? 'a' : ''}(${Math.round(this.h*360)},${Math.round(this.s*100)}%,${Math.round(this.l*100)}%${this.a !== 1 ? `,${this.a}` : ''})`; }
HSLAColor.prototype.toHSVA = function() { return this.toRGBA().toHSVA(); } HSLAColor.prototype.toHSVA = function() { return this.toRGBA().toHSVA(); }
HSLAColor.prototype.toXYZA = function() { return this.toRGBA().toXYZA(); } HSLAColor.prototype.toXYZA = function() { return this.toRGBA().toXYZA(); }
HSLAColor.prototype.toLUVA = function() { return this.toRGBA().toLUVA(); } HSLAColor.prototype.toLUVA = function() { return this.toRGBA().toLUVA(); }

16
styles/tooltips.scss
View file

@ -80,8 +80,8 @@ body {
z-index: 999999999; z-index: 999999999;
margin: 6px; margin: 6px;
border-radius: 2px; border-radius: 2px;
background: #0e0c13; background: var(--color-background-tooltip);
color: #fff; color: var(--color-text-tooltip);
font-size: 1.2rem; font-size: 1.2rem;
line-height: 1; line-height: 1;
text-align: left; text-align: left;
@ -96,7 +96,7 @@ body {
transform: rotate(45deg); transform: rotate(45deg);
z-index: -1; z-index: -1;
background: #0e0c13; background: var(--color-background-tooltip);
} }
&[x-placement^="bottom"] { &[x-placement^="bottom"] {
@ -126,16 +126,6 @@ body {
border-radius: 0 0 0 2px; border-radius: 0 0 0 2px;
} }
} }
.tw-root--theme-dark & {
background: #fff;
color: #0e0c13;
.ffz__tooltip--arrow {
background: #fff;
}
}
} }

14
styles/widgets.scss
View file

@ -115,8 +115,8 @@ textarea.tw-input {
&:focus { &:focus {
box-shadow: box-shadow:
inset 0 0 0 1px #7d5bbe, inset 0 0 0 1px var(--color-twitch-purple-8),
0 0 6px -2px #7d5bbe !important; 0 0 6px -2px var(--color-twitch-purple-8) !important;
} }
.handle { .handle {
@ -138,12 +138,12 @@ textarea.tw-input {
.ffz--profile__icon { .ffz--profile__icon {
&.ffz-i-ok, &.ffz-i-ok,
.ffz-i-ok { .ffz-i-ok {
color: green; color: var(--color-green-darker);
} }
&.ffz-i-cancel, &.ffz-i-cancel,
.ffz-i-cancel { .ffz-i-cancel {
color: red; color: var(--color-red);
} }
} }
@ -159,8 +159,8 @@ textarea.tw-input {
&:focus { &:focus {
box-shadow: box-shadow:
inset 0 0 0 1px #7d5bbe, inset 0 0 0 1px var(--color-twitch-purple-8),
0 0 6px -2px #7d5bbe !important; 0 0 6px -2px var(--color-twitch-purple-8) !important;
} }
.handle { .handle {
@ -173,7 +173,7 @@ textarea.tw-input {
font-size: 2rem; font-size: 2rem;
} }
.ffz-i-ok { color: green } .ffz-i-ok { color: var(--color-green) }
} }
.sortable-ghost { .sortable-ghost {

6
styles/widgets/add-ons.scss
View file

@ -1,5 +1,5 @@
.ffz--add-on-info { .ffz--add-on-info {
.ffz-logo-section { .ffz-logo-section {
max-width: 8rem; max-width: 8rem;
} }
} }

4
styles/widgets/check-box.scss
View file

@ -1,8 +1,8 @@
.tw-checkbox__input { .tw-checkbox__input {
&:indeterminate + .tw-checkbox__label { &:indeterminate + .tw-checkbox__label {
&:before { &:before {
background: #7d5bbe; background: var(--color-twitch-purple-8);
border: 1px solid #7d5bbe; border: 1px solid var(--color-twitch-purple-8);
} }
&:after { &:after {

6
styles/widgets/menu-container.scss
View file

@ -18,10 +18,6 @@
transform: translateY(-50%); transform: translateY(-50%);
padding: 0 0.5rem; padding: 0 0.5rem;
background-color: $bg-light; background-color: var(--color-background-alt);
.tw-root--theme-dark & {
background-color: $bg-dark;
}
} }
} }

15
styles/widgets/menu-tree.scss
View file

@ -12,26 +12,21 @@
content: ''; content: '';
pointer-events: none; pointer-events: none;
box-shadow: inset 0 0 0 1px #7d5bbe, box-shadow: inset 0 0 0 1px var(--color-twitch-purple-8),
0 0 6px -2px #7d5bbe; 0 0 6px -2px var(--color-twitch-purple-8);
} }
} }
.active > div, .active > div,
.active > div:hover, .active > div:hover,
.tw-root--theme-dark & .active > div:hover { .tw-root--theme-dark & .active > div:hover {
background-color: #6441a4; background-color: var(--color-background-button-primary-hover);
color: #fff; color: var(--color-text-button-primary);
} }
div:hover { div:hover {
cursor: pointer; cursor: pointer;
background-color: var(--color-background-button-text-hover);
background-color: #fff;
.tw-root--theme-dark & {
background-color: #201c2b;
}
} }
li div { li div {

12
styles/widgets/profile-selector.scss
View file

@ -19,7 +19,7 @@
border-left-color: transparent; border-left-color: transparent;
&.live .ffz--profile-row__icon { &.live .ffz--profile-row__icon {
color: green; color: var(--color-green-darker);
} }
&:not(.live):not(:hover):not(:focus) { &:not(.live):not(:hover):not(:focus) {
@ -32,7 +32,7 @@
} }
&.current { &.current {
border-left-color: #6441a4; border-left-color: var(--color-twitch-purple-8);
} }
.description { .description {
@ -51,16 +51,16 @@
&:focus { &:focus {
box-shadow: box-shadow:
inset 0 0 0 1px #7d5bbe, inset 0 0 0 1px var(--color-twitch-purple-8),
0 0 6px -2px #7d5bbe; 0 0 6px -2px var(--color-twitch-purple-8);
} }
&:focus, &:focus,
&:hover { &:hover {
background: rgba(100, 65, 164, .05); background: var(--color-opac-p-1);
.tw-root--theme-dark & { .tw-root--theme-dark & {
background: rgba(100, 65, 164, .2); background: var(--color-opac-p-4);
} }
} }
} }

6
styles/widgets/tab-container.scss
View file

@ -5,8 +5,8 @@
outline: none; outline: none;
.tab.active { .tab.active {
box-shadow: inset 0 0 0 1px #7d5bbe, box-shadow: inset 0 0 0 1px var(--color-twitch-purple-8),
0 0 6px -2px #7d5bbe; 0 0 6px -2px var(--color-twitch-purple-8);
} }
} }
@ -30,7 +30,7 @@
left: 0; left: 0;
right: 0; right: 0;
content: ''; content: '';
border-bottom: 4px solid #6441a4; border-bottom: 4px solid var(--color-twitch-purple-8);
} }
} }