diff --git a/package.json b/package.json index 84fc808d..4ea6ec9c 100755 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "frankerfacez", "author": "Dan Salvato LLC", - "version": "4.20.34", + "version": "4.20.35", "description": "FrankerFaceZ is a Twitch enhancement suite.", "license": "Apache-2.0", "scripts": { diff --git a/src/experiments.json b/src/experiments.json index c1cb130e..4b20e7e3 100644 --- a/src/experiments.json +++ b/src/experiments.json @@ -14,13 +14,5 @@ {"value": true, "weight": 50}, {"value": false, "weight": 50} ] - }, - "all_points": { - "name": "Override Channel Points Rendering", - "description": "Override rendering for all channel points messages, even when no message is present.", - "groups": [ - {"value": true, "weight": 100}, - {"value": false, "weight": 0} - ] } } \ No newline at end of file diff --git a/src/sites/twitch-twilight/modules/chat/index.js b/src/sites/twitch-twilight/modules/chat/index.js index a8304a4c..896521ed 100644 --- a/src/sites/twitch-twilight/modules/chat/index.js +++ b/src/sites/twitch-twilight/modules/chat/index.js @@ -1139,7 +1139,7 @@ export default class ChatHook extends Module { }); this.subpump.on(':pubsub-message', event => { - if ( event.prefix !== 'community-points-channel-v1' || ! this.experiments.getAssignment('all_points') ) + if ( event.prefix !== 'community-points-channel-v1' ) return; const service = this.ChatService.first, diff --git a/src/sites/twitch-twilight/modules/css_tweaks/index.js b/src/sites/twitch-twilight/modules/css_tweaks/index.js index da8eb502..c8d41a85 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/index.js +++ b/src/sites/twitch-twilight/modules/css_tweaks/index.js @@ -13,7 +13,7 @@ const STYLE_VALIDATOR = document.createElement('span'); const CLASSES = { 'unfollow': '.follow-btn__follow-btn--following,.follow-btn--following', 'top-discover': '.navigation-link[data-a-target="discover-link"]', - 'side-nav': '.side-nav', + 'side-nav': '.side-nav,#sideNav', 'side-rec-channels': '.side-nav .recommended-channels,.side-nav .side-nav-section + .side-nav-section:not(.online-friends)', //'side-rec-friends': '.side-nav .recommended-friends', 'side-friends': '.side-nav .online-friends', diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/hide-side-nav.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/hide-side-nav.scss index dbbad1b2..cfa7b0a8 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/hide-side-nav.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/hide-side-nav.scss @@ -1,4 +1,4 @@ -.side-nav { +.side-nav,#sideNav { display: none !important; } diff --git a/src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss b/src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss index c7041675..011d7d40 100644 --- a/src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss +++ b/src/sites/twitch-twilight/modules/css_tweaks/styles/swap-sidebars.scss @@ -55,6 +55,19 @@ } } +.side-nav--hover-exp:not(.side-nav--expanded) { + transform: translateX(0) !important; + + .side-nav-content { + transform: none !important; + } + + &:hover { + transform: translateX(-19rem) !important; + } + +} + .right-column.right-column--theatre { right: unset !important; diff --git a/src/sites/twitch-twilight/modules/theme/index.js b/src/sites/twitch-twilight/modules/theme/index.js index 6ad7089b..687c6dce 100644 --- a/src/sites/twitch-twilight/modules/theme/index.js +++ b/src/sites/twitch-twilight/modules/theme/index.js @@ -21,8 +21,10 @@ const COLORS = [ const ACCENT_COLORS = { - dark: {'c':{'accent': 9,'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':2,'background-graph-fill':8,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-active':9,'background-interactable-selected':9,'background-interactable-hover':8,'background-progress-countdown-status':9,'background-progress-status':9,'background-range-fill':9,'background-subscriber-stream-tag-active':4,'background-subscriber-stream-tag-default':4,'background-subscriber-stream-tag-hover':3,'background-toggle-checked':9,/*'background-tooltip':1,*/'background-top-nav':6,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':10,'border-subscriber-stream-tag':5,'border-tab-active':11,'border-tab-focus':11,'border-tab-hover':11,'border-toggle-focus':7,'border-toggle-hover':7,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':10,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':10,'text-link-active':10,'text-link-focus':10,'text-link-hover':10,'text-link-visited':10,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':11,'background-chat':1,'background-chat-alt':3,'background-chat-header':2,'background-modal':3,'text-button-text-active':'o2'/*,'text-tooltip':1*/},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[8,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 0',''],'tab-focus':[11,'0 4px 6px -4px',''],'input':[5,'inset 0 0 0 1px','']}}, - light: {'c':{'accent': 9,'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':15,'background-graph-fill':9,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-active':9,'background-interactable-selected':9,'background-interactable-hover':8,'background-progress-countdown-status':8,'background-progress-status':8,'background-range-fill':9,'background-subscriber-stream-tag-active':13,'background-subscriber-stream-tag-default':13,'background-subscriber-stream-tag-hover':14,'background-toggle-checked':9,/*'background-tooltip':1,*/'background-top-nav':7,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':9,'border-subscriber-stream-tag':10,'border-tab-active':8,'border-tab-focus':8,'border-tab-hover':8,'border-toggle-focus':8,'border-toggle-hover':8,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':8,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':8,'text-link-active':9,'text-link-focus':9,'text-link-hover':9,'text-link-visited':9,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':8},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[10,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 1px',''],'tab-focus':[8,'0 4px 6px -4px','']}}, + //dark: {'c':{'accent': 9,'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':2,'background-graph-fill':8,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-active':9,'background-interactable-selected':9,'background-interactable-hover':8,'background-progress-countdown-status':9,'background-progress-status':9,'background-range-fill':9,'background-subscriber-stream-tag-active':4,'background-subscriber-stream-tag-default':4,'background-subscriber-stream-tag-hover':3,'background-toggle-checked':9,/*'background-tooltip':1,*/'background-top-nav':6,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':10,'border-subscriber-stream-tag':5,'border-tab-active':11,'border-tab-focus':11,'border-tab-hover':11,'border-toggle-focus':7,'border-toggle-hover':7,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':10,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':10,'text-link-active':10,'text-link-focus':10,'text-link-hover':10,'text-link-visited':10,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':11,'background-chat':1,'background-chat-alt':3,'background-chat-header':2,'background-modal':3,'text-button-text-active':'o2'/*,'text-tooltip':1*/},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[8,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 0',''],'tab-focus':[11,'0 4px 6px -4px',''],'input':[5,'inset 0 0 0 1px','']}}, + //light: {'c':{'accent': 9,'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':15,'background-graph-fill':9,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-active':9,'background-interactable-selected':9,'background-interactable-hover':8,'background-progress-countdown-status':8,'background-progress-status':8,'background-range-fill':9,'background-subscriber-stream-tag-active':13,'background-subscriber-stream-tag-default':13,'background-subscriber-stream-tag-hover':14,'background-toggle-checked':9,/*'background-tooltip':1,*/'background-top-nav':7,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':9,'border-subscriber-stream-tag':10,'border-tab-active':8,'border-tab-focus':8,'border-tab-hover':8,'border-toggle-focus':8,'border-toggle-hover':8,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':8,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':8,'text-link-active':9,'text-link-focus':9,'text-link-hover':9,'text-link-visited':9,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':8},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[10,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 1px',''],'tab-focus':[8,'0 4px 6px -4px','']}}, + dark: {'c':{'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':2,'background-graph-fill':8,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-selected':9,'background-progress-countdown-status':9,'background-progress-status':9,'background-range-fill':9,'background-subscriber-stream-tag-active':4,'background-subscriber-stream-tag-default':4,'background-subscriber-stream-tag-hover':3,'background-toggle-checked':9,'background-tooltip':1,'background-top-nav':6,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':10,'border-subscriber-stream-tag':5,'border-tab-active':11,'border-tab-focus':11,'border-tab-hover':11,'border-toggle-focus':7,'border-toggle-hover':7,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':10,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':10,'text-link-active':10,'text-link-focus':10,'text-link-hover':10,'text-link-visited':10,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':11,'background-chat':1,'background-chat-alt':3,'background-chat-header':2,'background-modal':3,'text-button-text-active':'o2','text-tooltip':1},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[8,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 0',''],'tab-focus':[11,'0 4px 6px -4px',''],'input':[5,'inset 0 0 0 1px','']}}, + light: {'c':{'background-accent':8,'background-accent-alt':7,'background-accent-alt-2':6,'background-button':7,'background-button-active':7,'background-button-focus':8,'background-button-hover':8,'background-button-primary-active':7,'background-button-primary-default':9,'background-button-primary-hover':8,'background-graph':15,'background-graph-fill':9,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-selected':9,'background-progress-countdown-status':8,'background-progress-status':8,'background-range-fill':9,'background-subscriber-stream-tag-active':13,'background-subscriber-stream-tag-default':13,'background-subscriber-stream-tag-hover':14,'background-toggle-checked':9,'background-tooltip':1,'background-top-nav':7,'border-brand':9,'border-button':7,'border-button-active':8,'border-button-focus':9,'border-button-hover':8,'border-input-checkbox-checked':9,'border-input-checkbox-focus':9,'border-input-focus':9,'border-interactable-selected':9,'border-subscriber-stream-tag':10,'border-tab-active':8,'border-tab-focus':8,'border-tab-hover':8,'border-toggle-focus':8,'border-toggle-hover':8,'border-whisper-incoming':10,'fill-brand':9,'text-button-text':8,'text-button-text-focus':'o1','text-button-text-hover':'o1','text-link':8,'text-link-active':9,'text-link-focus':9,'text-link-hover':9,'text-link-visited':9,'text-overlay-link-active':13,'text-overlay-link-focus':13,'text-overlay-link-hover':13,'text-tab-active':8},'s':{'button-active':[8,'0 0 6px 0',''],'button-focus':[8,'0 0 6px 0',''],'input-focus':[10,'0 0 10px -2px',''],'interactable-focus':[8,'0 0 6px 1px',''],'tab-focus':[8,'0 4px 6px -4px','']}}, accent_dark: {'c':{'accent-hover':10,'accent':9,'accent-primary-1':1,'accent-primary-2':5,'accent-primary-3':6,'accent-primary-4':7,'accent-primary-5':8},'s':{}}, accent_light: {'c':{'accent-hover':10,'accent':9,'accent-primary-1':1,'accent-primary-2':5,'accent-primary-3':6,'accent-primary-4':7,'accent-primary-5':8},'s':{}} }; diff --git a/src/sites/twitch-twilight/styles/color_normalizer.scss b/src/sites/twitch-twilight/styles/color_normalizer.scss index a83a1660..06ea941b 100644 --- a/src/sites/twitch-twilight/styles/color_normalizer.scss +++ b/src/sites/twitch-twilight/styles/color_normalizer.scss @@ -34,10 +34,6 @@ background-color: var(--color-background-alt-2) !important; } - .emote-picker__emote-link:hover { - background-color: var(--color-background-button-active) !important; - } - .top-stats-tab, .channel-header__user { color: var(--color-text-base) !important; diff --git a/src/utilities/rich_tokens.js b/src/utilities/rich_tokens.js index 3f205a6c..5b0cb704 100644 --- a/src/utilities/rich_tokens.js +++ b/src/utilities/rich_tokens.js @@ -19,9 +19,9 @@ const VALID_WEIGHTS = ['regular', 'bold', 'semibold'], VALID_PADDING = { small: '05', - normal: 'normal', - large: 'large', - huge: 'huge' + normal: '1', + large: '2', + huge: '3' }; @@ -867,13 +867,36 @@ TOKEN_TYPES.overlay = function(token, createElement, ctx) { ); } + const classes = ['ffz--overlay']; + const style = {}; + + if ( token.background ) { + if ( VALID_COLORS.includes(token.background) ) + classes.push(`tw-c-background-${token.background}`); + else + style.backgroundColor = token.background; + } + + if ( token.color ) { + if ( VALID_COLORS.includes(token.color) ) + classes.push(`tw-c-text-${token.color}`); + else + style.color = token.color; + } + if ( ctx.vue ) - return createElement('div', {class: 'ffz--overlay'}, [ + return createElement('div', { + class: classes, + style + }, [ createElement('div', {class: 'ffz--overlay__content'}, content), ...corners ]); - return createElement('div', {className: 'ffz--overlay'}, [ + return createElement('div', { + className: classes.join(' '), + style + }, [ createElement('div', {className: 'ffz--overlay__content'}, content), ...corners ]); diff --git a/styles/widgets.scss b/styles/widgets.scss index e38e9764..19e114d7 100644 --- a/styles/widgets.scss +++ b/styles/widgets.scss @@ -143,8 +143,8 @@ textarea.tw-input { &:focus { box-shadow: - inset 0 0 0 1px var(--color-twitch-purple-8), - 0 0 6px -2px var(--color-twitch-purple-8) !important; + inset 0 0 0 1px var(--ffz-color-accent-8), + 0 0 6px -2px var(--ffz-color-accent-8) !important; } .handle { @@ -193,8 +193,8 @@ textarea.tw-input { &:focus { box-shadow: - inset 0 0 0 1px var(--color-twitch-purple-8), - 0 0 6px -2px var(--color-twitch-purple-8) !important; + inset 0 0 0 1px var(--ffz-color-accent-8), + 0 0 6px -2px var(--ffz-color-accent-8) !important; } .handle { diff --git a/styles/widgets/check-box.scss b/styles/widgets/check-box.scss index f4b10658..6ee0b75b 100644 --- a/styles/widgets/check-box.scss +++ b/styles/widgets/check-box.scss @@ -1,8 +1,8 @@ .tw-checkbox__input { &:indeterminate + .tw-checkbox__label { &:before { - background: var(--color-twitch-purple-8); - border: 1px solid var(--color-twitch-purple-8); + background: var(--ffz-color-accent-8); + border: 1px solid var(--ffz-color-accent-8); } &:after { diff --git a/styles/widgets/menu-tree.scss b/styles/widgets/menu-tree.scss index 7f64b232..dd1f3e75 100644 --- a/styles/widgets/menu-tree.scss +++ b/styles/widgets/menu-tree.scss @@ -12,8 +12,8 @@ content: ''; pointer-events: none; - box-shadow: inset 0 0 0 1px var(--color-twitch-purple-8), - 0 0 6px -2px var(--color-twitch-purple-8); + box-shadow: inset 0 0 0 1px var(--ffz-color-accent-8), + 0 0 6px -2px var(--ffz-color-accent-8); } } diff --git a/styles/widgets/profile-selector.scss b/styles/widgets/profile-selector.scss index 70a1ccf0..add5d4fa 100644 --- a/styles/widgets/profile-selector.scss +++ b/styles/widgets/profile-selector.scss @@ -51,8 +51,8 @@ &:focus { box-shadow: - inset 0 0 0 1px var(--color-twitch-purple-8), - 0 0 6px -2px var(--color-twitch-purple-8); + inset 0 0 0 1px var(--ffz-color-accent-8), + 0 0 6px -2px var(--ffz-color-accent-8); } &:focus,