mirror of
https://github.com/FrankerFaceZ/FrankerFaceZ.git
synced 2025-06-28 15:27:43 +00:00
4.47.1
* Added: Option to use the older, lighter input elements when using a dark theme. (Effectively reverts the recent Twitch change.) * Fixed: Issue with the settings bridge failing to load when using a profile with a Current Monitor rule. * Fixed: A few minor colors being applied incorrectly when using theme options. * Fixed: No background being present behind certain elements, including most notably up-time in the directory.
This commit is contained in:
parent
e6ad12c937
commit
67c64e6f7e
9 changed files with 45 additions and 16 deletions
|
@ -1,7 +1,7 @@
|
|||
{
|
||||
"name": "frankerfacez",
|
||||
"author": "Dan Salvato LLC",
|
||||
"version": "4.47.0",
|
||||
"version": "4.47.1",
|
||||
"description": "FrankerFaceZ is a Twitch enhancement suite.",
|
||||
"private": true,
|
||||
"license": "Apache-2.0",
|
||||
|
|
|
@ -25,7 +25,7 @@
|
|||
|
||||
<script>
|
||||
|
||||
import { sortScreens, matchScreen } from 'utilities/object';
|
||||
import { matchScreen } from 'utilities/object';
|
||||
|
||||
let last_id = 0;
|
||||
|
||||
|
@ -84,7 +84,7 @@ export default {
|
|||
height: mon.height
|
||||
});
|
||||
|
||||
sortScreens(this.monitors);
|
||||
//sortScreens(this.monitors);
|
||||
if ( this.value.data )
|
||||
this.selected = matchScreen(this.monitors, this.value.data);
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
// Profile Filters for Settings
|
||||
// ============================================================================
|
||||
|
||||
import {glob_to_regex, escape_regex, matchScreen, sortScreens} from 'utilities/object';
|
||||
import {glob_to_regex, escape_regex, matchScreen} from 'utilities/object';
|
||||
import {createTester} from 'utilities/filtering';
|
||||
import { DEBUG } from 'utilities/constants';
|
||||
|
||||
|
@ -412,10 +412,13 @@ if ( window.getScreenDetails ) {
|
|||
return () => false;
|
||||
|
||||
Monitor._used = true;
|
||||
if ( Monitor.details === undefined )
|
||||
FrankerFaceZ.get().resolve('settings').createMonitorUpdate().then(() => {
|
||||
reload();
|
||||
});
|
||||
if ( Monitor.details === undefined ) {
|
||||
const FFZ = window.FrankerFaceZ ?? window.FFZBridge;
|
||||
if ( FFZ )
|
||||
FFZ.get().resolve('settings').createMonitorUpdate().then(() => {
|
||||
reload();
|
||||
});
|
||||
}
|
||||
|
||||
return () => {
|
||||
Monitor._used = true;
|
||||
|
@ -425,7 +428,7 @@ if ( window.getScreenDetails ) {
|
|||
if ( ! screen )
|
||||
return false;
|
||||
|
||||
const sorted = sortScreens(Array.from(details.screens)),
|
||||
const sorted = details.screens, // sortScreens(Array.from(details.screens)),
|
||||
matched = matchScreen(sorted, config);
|
||||
|
||||
return matched === screen;
|
||||
|
|
|
@ -27,8 +27,8 @@ const ACCENT_COLORS = {
|
|||
//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-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'},'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-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-brand':11,'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-chat':1,'background-chat-alt':3,'background-chat-header':2,'background-graph':2,'background-graph-fill':8,'background-input-checkbox-checked':10,'background-input-checked':8,'background-interactable-selected':9,'background-modal':3,'background-progress-countdown-status':9,'background-progress-status':9,'background-range-fill':10,'background-subscriber-stream-tag-active':4,'background-subscriber-stream-tag-default':4,'background-subscriber-stream-tag-hover':3,'background-toggle-checked':9,'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':10,'border-input-checkbox-focus':10,'border-input-focus':10,'border-interactable-selected':10,'border-range-handle':10,'border-subscriber-stream-tag':5,'border-tab-active':11,'border-tab-focus':11,'border-tab-hover':11,'border-toggle-checked':10,'border-toggle-focus':10,'border-whisper-incoming':10,'fill-brand':9,'text-button-text-active':'o2','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,'text-toggle-checked-icon':10,'text-tooltip':1,'text-button-text':10},'s':{'button-active':[8,' 0 0 6px 0',''],'button-focus':[8,' 0 0 6px 0',''],'input':[5,' inset 0 0 0 1px',''],'input-focus':[8,' 0 0 10px -2px',''],'interactable-focus':[8,' 0 0 6px 0',''],'tab-focus':[11,' 0 4px 6px -4px','']}},
|
||||
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-chat':1,'background-chat-alt':3,'background-chat-header':2,'background-graph':15,'background-graph-fill':9,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-selected':9,'background-modal':3,'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-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-range-handle':9,'border-subscriber-stream-tag':10,'border-tab-active':8,'border-tab-focus':8,'border-tab-hover':8,'border-toggle-checked':9,'border-toggle-focus':9,'border-whisper-incoming':10,'fill-brand':9,'text-button-text-active':'o2','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,'text-toggle-checked-icon':9,'text-tooltip':1,'text-button-text':8,'background-tooltip':1,'text-button-text-focus':'o1','text-button-text-hover':'o1'},'s':{'button-active':[8,' 0 0 6px 0',''],'button-focus':[8,' 0 0 6px 0',''],'input':[5,' inset 0 0 0 1px',''],'input-focus':[10,' 0 0 10px -2px',''],'interactable-focus':[8,' 0 0 6px 1px',''],'tab-focus':[8,' 0 4px 6px -4px','']}},
|
||||
dark: {'c':{'background-brand':11,'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-chat':1,'background-chat-alt':3,'background-chat-header':2,'background-graph':2,'background-graph-fill':8,'background-input-checkbox-checked':10,'background-input-checked':8,'background-interactable-selected':9,'background-modal':3,'background-progress-countdown-status':9,'background-progress-status':9,'background-range-fill':10,'background-subscriber-stream-tag-active':4,'background-subscriber-stream-tag-default':4,'background-subscriber-stream-tag-hover':3,'background-toggle-checked':2,'background-toggle-handle-checked':10,'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':10,'border-input-checkbox-focus':10,'border-input-focus':10,'border-interactable-selected':10,'border-range-handle':10,'border-subscriber-stream-tag':5,'border-tab-active':11,'border-tab-focus':11,'border-tab-hover':11,'border-toggle-checked':10,'border-toggle-focus':10,'border-whisper-incoming':10,'fill-brand':9,'text-button-text-active':'o2','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,'text-toggle-checked-icon':10,'text-tooltip':1,'text-button-text':10},'s':{'button-active':[8,' 0 0 6px 0',''],'button-focus':[8,' 0 0 6px 0',''],'input':[5,' inset 0 0 0 1px',''],'input-focus':[8,' 0 0 10px -2px',''],'interactable-focus':[8,' 0 0 6px 0',''],'tab-focus':[11,' 0 4px 6px -4px','']}},
|
||||
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-chat':1,'background-chat-alt':3,'background-chat-header':2,'background-graph':15,'background-graph-fill':9,'background-input-checkbox-checked':9,'background-input-checked':8,'background-interactable-selected':9,'background-modal':3,'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':15,'background-top-nav':7,'background-toggle-handle-checked':10,'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-range-handle':9,'border-subscriber-stream-tag':10,'border-tab-active':8,'border-tab-focus':8,'border-tab-hover':8,'border-toggle-checked':9,'border-toggle-focus':9,'border-whisper-incoming':10,'fill-brand':9,'text-button-text-active':'o2','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,'text-toggle-checked-icon':9,'text-tooltip':1,'text-button-text':8,'background-tooltip':1,'text-button-text-focus':'o1','text-button-text-hover':'o1'},'s':{'button-active':[8,' 0 0 6px 0',''],'button-focus':[8,' 0 0 6px 0',''],'input':[5,' inset 0 0 0 1px',''],'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':{}}
|
||||
};
|
||||
|
@ -60,6 +60,15 @@ export default class ThemeEngine extends Module {
|
|||
changed: () => this.updateCSS()
|
||||
});
|
||||
|
||||
this.settings.add('theme.legacy-dark-input', {
|
||||
default: false,
|
||||
ui: {
|
||||
path: 'Appearance > Theme >> Tweaks',
|
||||
title: 'Use old input element colors with dark theme.',
|
||||
component: 'setting-check-box'
|
||||
},
|
||||
changed: () => this.updateCSS()
|
||||
});
|
||||
|
||||
// Font
|
||||
|
||||
|
@ -389,6 +398,22 @@ export default class ThemeEngine extends Module {
|
|||
if ( text )
|
||||
bits.push(this.generateTextBlob(text));
|
||||
|
||||
// Input elements
|
||||
if ( dark && this.settings.get('theme.legacy-dark-input') ) {
|
||||
bits.push(`--color-background-input: var(--color-opac-w-4);
|
||||
--color-background-input-overlay: var(--color-opac-b-4);
|
||||
--color-background-input-overlay-focus: var(--color-black);
|
||||
--color-background-selectable: var(--color-opac-w-3);
|
||||
--color-background-selectable-hover: var(--color-opac-w-4);
|
||||
--color-border-input: var(--color-opac-w-4);
|
||||
--color-border-input-hover: var(--color-opac-w-6);
|
||||
--color-border-input-overlay: var(--color-opac-w-6);
|
||||
--color-border-input-overlay-hover: var(--color-opac-w-8);
|
||||
--color-border-input-checkbox: var(--color-opac-w-10);
|
||||
--color-border-selectable: var(--color-opac-w-2);
|
||||
--color-border-selectable-hover: var(--color-opac-w-3);`);
|
||||
}
|
||||
|
||||
// Accent
|
||||
const accent = Color.RGBA.fromCSS(this.settings.get('theme.color.accent'));
|
||||
this.toggleAccentNormal(! accent);
|
||||
|
|
|
@ -89,6 +89,7 @@
|
|||
outline: .5rem auto var(--color-border-input-focus) !important;
|
||||
}
|
||||
|
||||
.persistent-notification__card-image-unread,
|
||||
.ach-card--expanded .ach-card__inner {
|
||||
border-color: var(--color-border-brand) !important;
|
||||
}
|
||||
|
|
|
@ -45,7 +45,7 @@ export function generateUUID(input) {
|
|||
}
|
||||
|
||||
|
||||
export function sortScreens(screens) {
|
||||
/*export function sortScreens(screens) {
|
||||
screens.sort((a,b) => {
|
||||
if ( a.left < b.left ) return -1;
|
||||
if ( a.left > b.left ) return 1;
|
||||
|
@ -54,7 +54,7 @@ export function sortScreens(screens) {
|
|||
return 0;
|
||||
});
|
||||
return screens;
|
||||
}
|
||||
}*/
|
||||
|
||||
|
||||
export function matchScreen(screens, options) {
|
||||
|
|
|
@ -119,7 +119,7 @@
|
|||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
background-color: var(--color-background-overlay);
|
||||
background-color: var(--color-background-overlay-alt);
|
||||
color: var(--color-text-overlay);
|
||||
|
||||
padding: 0 0.5rem;
|
||||
|
|
|
@ -1550,7 +1550,7 @@
|
|||
|
||||
.tw-c-background-overlay {
|
||||
background-color: rgba(0,0,0,.6)!important;
|
||||
background-color: var(--color-background-overlay)!important
|
||||
background-color: var(--color-background-overlay-alt)!important
|
||||
}
|
||||
|
||||
.tw-c-background-range {
|
||||
|
|
|
@ -101,7 +101,7 @@ textarea.ffz-input {
|
|||
&--alert { background-color: var(--color-fill-alert) }
|
||||
&--success { background-color: var(--color-fill-success) }
|
||||
&--overlay {
|
||||
background-color: var(--color-background-overlay);
|
||||
background-color: var(--color-background-overlay-alt);
|
||||
box-shadow: 0 0 0 1px var(--color-border-overlay);
|
||||
}
|
||||
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue