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

@@ -5,7 +5,7 @@
  * later. See the COPYING file.
  *
  * @author Pauli Järvinen <[email protected]>
- * @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 {

js/app/controllers/sidebar/smartlistfilterscontroller.js

@@ -5,7 +5,7 @@
  * later. See the COPYING file.
  *
  * @author Pauli Järvinen <[email protected]>
- * @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() {