1
0
Fork 0
mirror of https://github.com/FrankerFaceZ/FrankerFaceZ.git synced 2025-09-17 10:16:57 +00:00
* Changed: Remove the `Override Channel Points Rendering` experiment. Now enabled for all users.
* Fixed: Update the theme generation rules when using accent colors.
* Fixed: Swap Sidebars and Hide Side Navigation when experiencing the experiment that expands the side navigation bar on hover.
* API Changed: Allow `overlay` rich tokens to have a background color.
This commit is contained in:
SirStendec 2020-08-21 15:59:13 -04:00
parent 6056b87202
commit 0d61922164
13 changed files with 59 additions and 33 deletions

View file

@ -1,7 +1,7 @@
{ {
"name": "frankerfacez", "name": "frankerfacez",
"author": "Dan Salvato LLC", "author": "Dan Salvato LLC",
"version": "4.20.34", "version": "4.20.35",
"description": "FrankerFaceZ is a Twitch enhancement suite.", "description": "FrankerFaceZ is a Twitch enhancement suite.",
"license": "Apache-2.0", "license": "Apache-2.0",
"scripts": { "scripts": {

View file

@ -14,13 +14,5 @@
{"value": true, "weight": 50}, {"value": true, "weight": 50},
{"value": false, "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}
]
} }
} }

View file

@ -1139,7 +1139,7 @@ export default class ChatHook extends Module {
}); });
this.subpump.on(':pubsub-message', event => { 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; return;
const service = this.ChatService.first, const service = this.ChatService.first,

View file

@ -13,7 +13,7 @@ const STYLE_VALIDATOR = document.createElement('span');
const CLASSES = { const CLASSES = {
'unfollow': '.follow-btn__follow-btn--following,.follow-btn--following', 'unfollow': '.follow-btn__follow-btn--following,.follow-btn--following',
'top-discover': '.navigation-link[data-a-target="discover-link"]', '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-channels': '.side-nav .recommended-channels,.side-nav .side-nav-section + .side-nav-section:not(.online-friends)',
//'side-rec-friends': '.side-nav .recommended-friends', //'side-rec-friends': '.side-nav .recommended-friends',
'side-friends': '.side-nav .online-friends', 'side-friends': '.side-nav .online-friends',

View file

@ -1,4 +1,4 @@
.side-nav { .side-nav,#sideNav {
display: none !important; display: none !important;
} }

View file

@ -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-column.right-column--theatre {
right: unset !important; right: unset !important;

View file

@ -21,8 +21,10 @@ const COLORS = [
const ACCENT_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','']}}, //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','']}}, //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_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':{}} 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':{}}
}; };

View file

@ -34,10 +34,6 @@
background-color: var(--color-background-alt-2) !important; background-color: var(--color-background-alt-2) !important;
} }
.emote-picker__emote-link:hover {
background-color: var(--color-background-button-active) !important;
}
.top-stats-tab, .top-stats-tab,
.channel-header__user { .channel-header__user {
color: var(--color-text-base) !important; color: var(--color-text-base) !important;

View file

@ -19,9 +19,9 @@ const VALID_WEIGHTS = ['regular', 'bold', 'semibold'],
VALID_PADDING = { VALID_PADDING = {
small: '05', small: '05',
normal: 'normal', normal: '1',
large: 'large', large: '2',
huge: 'huge' 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 ) if ( ctx.vue )
return createElement('div', {class: 'ffz--overlay'}, [ return createElement('div', {
class: classes,
style
}, [
createElement('div', {class: 'ffz--overlay__content'}, content), createElement('div', {class: 'ffz--overlay__content'}, content),
...corners ...corners
]); ]);
return createElement('div', {className: 'ffz--overlay'}, [ return createElement('div', {
className: classes.join(' '),
style
}, [
createElement('div', {className: 'ffz--overlay__content'}, content), createElement('div', {className: 'ffz--overlay__content'}, content),
...corners ...corners
]); ]);

View file

@ -143,8 +143,8 @@ textarea.tw-input {
&:focus { &:focus {
box-shadow: box-shadow:
inset 0 0 0 1px var(--color-twitch-purple-8), inset 0 0 0 1px var(--ffz-color-accent-8),
0 0 6px -2px var(--color-twitch-purple-8) !important; 0 0 6px -2px var(--ffz-color-accent-8) !important;
} }
.handle { .handle {
@ -193,8 +193,8 @@ textarea.tw-input {
&:focus { &:focus {
box-shadow: box-shadow:
inset 0 0 0 1px var(--color-twitch-purple-8), inset 0 0 0 1px var(--ffz-color-accent-8),
0 0 6px -2px var(--color-twitch-purple-8) !important; 0 0 6px -2px var(--ffz-color-accent-8) !important;
} }
.handle { .handle {

View file

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

View file

@ -12,8 +12,8 @@
content: ''; content: '';
pointer-events: none; pointer-events: none;
box-shadow: inset 0 0 0 1px var(--color-twitch-purple-8), box-shadow: inset 0 0 0 1px var(--ffz-color-accent-8),
0 0 6px -2px var(--color-twitch-purple-8); 0 0 6px -2px var(--ffz-color-accent-8);
} }
} }

View file

@ -51,8 +51,8 @@
&:focus { &:focus {
box-shadow: box-shadow:
inset 0 0 0 1px var(--color-twitch-purple-8), inset 0 0 0 1px var(--ffz-color-accent-8),
0 0 6px -2px var(--color-twitch-purple-8); 0 0 6px -2px var(--ffz-color-accent-8);
} }
&:focus, &:focus,