From 8d7e552116b5558ed4f4a02867cdfbf869fad250 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pauli=20J=C3=A4rvinen?= <pauli.jarvinen@gmail.com>
Date: Thu, 11 Jan 2024 23:18:42 +0200
Subject: [PATCH] Smart list filters: Style Genres and Artists like the other
 inputs

NC28 has changed again the border style of the input fields and the CSS
variables used for the border colors. On the other hand, the styles we
assigned for the special "chosen" input fields never quite matched the
styling of the standard input fields on OC or old NC versions.

To get consistent styling of all filter inputs on all possible host
clouds, we now copy the border style rules from standard input fields to
the chosen fields. This required quite a bit of CSS/JS-trickery because
we can't directly get or set the :hover style of an element.
---
 css/music-sidebar.css                            |  8 ++++----
 .../sidebar/smartlistfilterscontroller.js        | 16 ++++++++++++++--
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/css/music-sidebar.css b/css/music-sidebar.css
index 6ed9aab79..677705dea 100644
--- a/css/music-sidebar.css
+++ b/css/music-sidebar.css
@@ -5,7 +5,7 @@
  * later. See the COPYING file.
  *
  * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
- * @copyright Pauli Järvinen 2018 - 2023
+ * @copyright Pauli Järvinen 2018 - 2024
  */
 
 #app-sidebar {
@@ -355,14 +355,14 @@
 
 #app-sidebar #smartlist-filters .chosen-choices {
 	background: var(--color-main-background, #fff);
-	border: 2px solid var(--color-border-dark, #ddd);
-	border-radius: var(--border-radius-large);
+	border: var(--border-input);				/* value of the var is set in our javascript */
+	border-radius: var(--border-radius-input);	/* value of the var is set in our javascript */
 	text-overflow: ellipsis;
 	cursor: pointer;
 }
 
 #app-sidebar #smartlist-filters .chosen-choices:hover {
-	border-color: var(--color-primary-element);
+	border-color: var(--color-input-border-hover); /* value of the var is set in our javascript */
 }
 
 #app-sidebar #smartlist-filters .chosen-choices input {
diff --git a/js/app/controllers/sidebar/smartlistfilterscontroller.js b/js/app/controllers/sidebar/smartlistfilterscontroller.js
index 342e16a73..216fb51fa 100644
--- a/js/app/controllers/sidebar/smartlistfilterscontroller.js
+++ b/js/app/controllers/sidebar/smartlistfilterscontroller.js
@@ -5,7 +5,7 @@
  * later. See the COPYING file.
  *
  * @author Pauli Järvinen <pauli.jarvinen@gmail.com>
- * @copyright Pauli Järvinen 2023
+ * @copyright Pauli Järvinen 2023, 2024
  */
 
 
@@ -33,7 +33,19 @@ angular.module('Music').controller('SmartListFiltersController', [
 		$timeout(() => {
 			$('#filter-genres').chosen();
 			$('#filter-artists').chosen();
-			$('#app-sidebar #smartlist-filters .chosen-container').css('width', ''); // purge the inline rule to let the CSS define the width
+			const $chosenInputs = $('#app-sidebar #smartlist-filters .chosen-container');
+			const $filterGenres = $('#filter-genres');
+			const $filterSize = $('#filter-size');
+
+			$chosenInputs
+				.css('width', '') // purge the inline rule to let the CSS define the width
+				.css('--border-input', $filterGenres.css('border')) // copy the border style from the input field
+				.css('--border-radius-input', $filterGenres.css('border-radius'));
+
+			$filterSize.trigger('focus');
+			$timeout(() => {
+				$chosenInputs.css('--color-input-border-hover', $filterSize.css('border-color')); // copy the border color of focused input
+			});
 		});
 
 		function allFieldsValid() {