Fix: select dropdown background colors not visible in light mode (#6323)

diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index 5dcf2bf9e898e7ae82ca52d33d4333e73b7b4e1a..967b416adf091e681d690a6402fc56802a23b8f4 100644 (file)
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -262,13 +262,14 @@ a.btn-link:focus-visible,
     }
 
     .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
-      background-color: var(--pngx-bg-alt) !important;
+      background-color: var(--pngx-bg-darker) !important;
       color: var(--pngx-body-color-accent) !important;
     }
 
     .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected,
     .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked {
-      background: none;
+      font-weight: bold;
+      background-color: var(--pngx-bg-alt2) !important;
     }
   }
 

diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index 3596f002aa04d4f29629b83132a65501e0f64a0c..806966ec71ee61a5a7e95c7c7746392ba244bea1 100644 (file)
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -24,6 +24,7 @@ $color-mode-type: data;
   --pngx-success-darken-10: hsl(152, 69%, 11%); // based on success #198754
   --pngx-bg-alt: #fff;
   --pngx-bg-darker: var(--bs-gray-100);
+  --pngx-bg-alt2: var(--bs-gray-200);
   --pngx-focus-alpha: 0.3;
 }
 
@@ -78,6 +79,7 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
   --bs-light: #1c1c1f;
   --bs-light-rgb: 28, 28, 31;
   --bs-border-color: #47494f;
+  --pngx-bg-alt2: #232323;
   --pngx-bg-darker: #101216;
   --bs-tertiary-bg: var(--pngx-bg-darker);
   --pngx-bg-alt: #242529;
@@ -195,9 +197,9 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
     mix-blend-mode: luminosity;
   }
 
-  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:hover,
-  .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
-    background-color: var(--bs-light);
+  .paperless-input-select .ng-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:not(.ng-option-selected):hover,
+  .paperless-input-select .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked {
+    background-color: var(--bs-light) !important;
   }
 
   .ng-select-multiple .ng-select-container .ng-value-container .ng-value {