From 67c64e6f7eb4985bd0a247d8526a74af1759fb6f Mon Sep 17 00:00:00 2001
From: SirStendec <sir@stendec.me>
Date: Thu, 27 Apr 2023 17:30:58 -0400
Subject: [PATCH] 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.
---
 package.json                                  |  2 +-
 src/settings/components/monitor.vue           |  4 +--
 src/settings/filters.js                       | 15 ++++++----
 .../twitch-twilight/modules/theme/index.js    | 29 +++++++++++++++++--
 .../styles/color_normalizer.scss              |  1 +
 src/utilities/object.js                       |  4 +--
 styles/chat.scss                              |  2 +-
 styles/native/index.scss                      |  2 +-
 styles/widgets.scss                           |  2 +-
 9 files changed, 45 insertions(+), 16 deletions(-)

diff --git a/package.json b/package.json
index fd2c50b1..421f994b 100755
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/settings/components/monitor.vue b/src/settings/components/monitor.vue
index 090aacee..b35278cc 100644
--- a/src/settings/components/monitor.vue
+++ b/src/settings/components/monitor.vue
@@ -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);
 
diff --git a/src/settings/filters.js b/src/settings/filters.js
index a00e3fdd..c5ad3443 100644
--- a/src/settings/filters.js
+++ b/src/settings/filters.js
@@ -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;
diff --git a/src/sites/twitch-twilight/modules/theme/index.js b/src/sites/twitch-twilight/modules/theme/index.js
index 0c3b3fb3..9d14deb9 100644
--- a/src/sites/twitch-twilight/modules/theme/index.js
+++ b/src/sites/twitch-twilight/modules/theme/index.js
@@ -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);
diff --git a/src/sites/twitch-twilight/styles/color_normalizer.scss b/src/sites/twitch-twilight/styles/color_normalizer.scss
index 28b3946a..62f7bf05 100644
--- a/src/sites/twitch-twilight/styles/color_normalizer.scss
+++ b/src/sites/twitch-twilight/styles/color_normalizer.scss
@@ -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;
 	}
diff --git a/src/utilities/object.js b/src/utilities/object.js
index d5761b75..ea1f79ee 100644
--- a/src/utilities/object.js
+++ b/src/utilities/object.js
@@ -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) {
diff --git a/styles/chat.scss b/styles/chat.scss
index 05842b07..64185ba1 100644
--- a/styles/chat.scss
+++ b/styles/chat.scss
@@ -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;
diff --git a/styles/native/index.scss b/styles/native/index.scss
index 7341cead..6b5345a9 100644
--- a/styles/native/index.scss
+++ b/styles/native/index.scss
@@ -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 {
diff --git a/styles/widgets.scss b/styles/widgets.scss
index 2e4f8542..91490cea 100644
--- a/styles/widgets.scss
+++ b/styles/widgets.scss
@@ -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);
 	}