diff --git a/src-ui/src/app/components/common/input/tags/tags.component.scss b/src-ui/src/app/components/common/input/tags/tags.component.scss index 2f06247bd..94da62699 100644 --- a/src-ui/src/app/components/common/input/tags/tags.component.scss +++ b/src-ui/src/app/components/common/input/tags/tags.component.scss @@ -22,7 +22,7 @@ } // Dropdown hierarchy reveal for ng-select options -:host ::ng-deep .ng-dropdown-panel .ng-option { +::ng-deep .ng-dropdown-panel .ng-option { overflow-x: auto !important; .tag-option-row { @@ -41,12 +41,12 @@ } } -:host ::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-reveal, -:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-reveal { +::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-reveal, +::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-reveal { max-width: 1000px; } ::ng-deep .ng-dropdown-panel .ng-option:hover .hierarchy-indicator, -:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-indicator { +::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked .hierarchy-indicator { background: transparent; } diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss index b02ae6a24..55cbff7f9 100644 --- a/src-ui/src/styles.scss +++ b/src-ui/src/styles.scss @@ -374,17 +374,6 @@ th[pngxSortable] { } } - .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked { - 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 { - font-weight: bold; - background-color: var(--pngx-bg-alt2) !important; - } - &.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder, .ng-select-container .ng-value-container .ng-placeholder { top: 7px; @@ -402,6 +391,22 @@ th[pngxSortable] { } } +// ng-select renders the dropdown panel in a CDK overlay outside the component +.ng-dropdown-panel { + font-size: var(--pngx-body-font-size); + + .ng-dropdown-panel-items .ng-option.ng-option-marked { + background-color: var(--pngx-bg-darker) !important; + color: var(--pngx-body-color-accent) !important; + } + + .ng-dropdown-panel-items .ng-option.ng-option-selected, + .ng-dropdown-panel-items .ng-option.ng-option-selected.ng-option-marked { + font-weight: bold; + background-color: var(--pngx-bg-alt2) !important; + } +} + .paperless-input-tags { .ng-select.ng-select-multiple .ng-select-container .ng-value-container .ng-value { background-color: transparent; diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss index afee1f311..f3d75369b 100644 --- a/src-ui/src/theme.scss +++ b/src-ui/src/theme.scss @@ -237,8 +237,8 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,%3csvg xmlns='h mix-blend-mode: luminosity; } - .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 { + .ng-dropdown-panel .ng-dropdown-panel-items .ng-option:not(.ng-option-selected):hover, + .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-marked { background-color: var(--bs-light) !important; }