Fix: dont use filters for inverted thumbnails (#8121)

diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
index c8adc759dca8b4212982f77bc300ef5087c19a0d..a433a6198bd9d61ea92d75868128b85584eeab77 100644 (file)
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.html
@@ -1,6 +1,6 @@
 <div class="card mb-3 shadow-sm bg-light" [class.card-selected]="selected" [class.document-card]="selectable" [class.popover-hidden]="popoverHidden" (mouseleave)="mouseLeaveCard()">
   <div class="row g-0">
-    <div class="col-md-2 doc-img-background rounded-start" [class.doc-img-background-selected]="selected" (click)="this.toggleSelected.emit($event)" (dblclick)="dblClickDocument.emit()">
+    <div class="col-md-2 doc-img-container rounded-start" (click)="this.toggleSelected.emit($event)" (dblclick)="dblClickDocument.emit()">
       <img [src]="getThumbUrl()" class="card-img doc-img border-end rounded-start" [class.inverted]="getIsThumbInverted()">
 
       <div class="border-end border-bottom bg-light document-card-check">

diff --git a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
index 35f6f53b1a83d313e27e6e0934248754804bfcbf..44c112378441fb343428bc30dcedcaea697cffbd 100644 (file)
--- a/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-large/document-card-large.component.scss
@@ -2,7 +2,7 @@
   overflow-wrap: anywhere;
 }
 
-.doc-img-background {
+.doc-img-container {
   position: relative;
 }
 
@@ -49,18 +49,6 @@
   display: block;
 }
 
-.card-selected {
-  border-color: var(--bs-primary);
-
-  .document-card-check {
-    display: block;
-  }
-}
-
-.doc-img-background-selected {
-  background-color: var(--pngx-primary-faded);
-}
-
 .card-info {
   line-height: 1;
 

diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
index 1dbb7c30806e92176360e85e5d9d35273ed66005..4885212adaa09608e2a67fba29002b4eb437a9c0 100644 (file)
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.html
@@ -1,7 +1,7 @@
 <div class="col p-2 h-100">
   <div class="card h-100 shadow-sm document-card" [class.card-selected]="selected" [class.popover-hidden]="popoverHidden" (mouseleave)="mouseLeaveCard()">
-    <div class="border-bottom doc-img-container" [class.doc-img-background-selected]="selected" (click)="this.toggleSelected.emit($event)" (dblclick)="dblClickDocument.emit(this)">
-      <img class="card-img doc-img rounded-top" [class.inverted]="getIsThumbInverted()" [src]="getThumbUrl()">
+    <div class="border-bottom doc-img-container" (click)="this.toggleSelected.emit($event)" (dblclick)="dblClickDocument.emit(this)">
+      <img class="card-img doc-img" [class.inverted]="getIsThumbInverted()" [src]="getThumbUrl()">
 
       <div class="border-end border-bottom bg-light py-1 px-2 document-card-check">
         <div class="form-check">

diff --git a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
index 9affa52ec4b1b649de5f3e177e7a9bdb9c5b7756..da19b21453a7a5c8af048dc34bdd1325be0e8b13 100644 (file)
--- a/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
+++ b/src-ui/src/app/components/document-list/document-card-small/document-card-small.component.scss
@@ -40,18 +40,6 @@
   top: 142px;
 }
 
-.card-selected {
-  border-color:var(--bs-primary);
-
-  .document-card-check {
-    display: block;
-  }
-}
-
-.doc-img-background-selected {
-  background-color: var(--pngx-primary-faded);
-}
-
 .card-info {
   line-height: 1;
 

diff --git a/src-ui/src/styles.scss b/src-ui/src/styles.scss
index 87904f8e6615f3073b86aae8d84ae1f763b3f029..bac7153e0cbe6df8b427849f6a67c490dcb5d903 100644 (file)
--- a/src-ui/src/styles.scss
+++ b/src-ui/src/styles.scss
@@ -490,9 +490,23 @@ ul.pagination {
 
 .doc-img-container {
   border: none !important;
-  border-top-left-radius: .25rem;
-  border-top-right-radius: .25rem;
   overflow: hidden;
+
+  .doc-img {
+    overflow: visible;
+  }
+}
+
+.card-selected {
+  border-color:var(--bs-primary);
+
+  .document-card-check {
+    display: block;
+  }
+
+  .doc-img-container {
+    background-color: var(--pngx-primary-faded);
+  }
 }
 
 table.table {
@@ -705,6 +719,10 @@ i-bs svg {
   vertical-align: text-bottom;
 }
 
-.document-card .card-footer i-bs svg {
-  vertical-align: middle;
+.document-card {
+  overflow: hidden;
+
+  .card-footer i-bs svg {
+    vertical-align: middle;
+  }
 }

diff --git a/src-ui/src/theme.scss b/src-ui/src/theme.scss
index 6c6075c4a01b29c88ca8dc45c296ae69e195d944..877bf650759207ff44300b024cd203469ee23280 100644 (file)
--- a/src-ui/src/theme.scss
+++ b/src-ui/src/theme.scss
@@ -183,7 +183,7 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
   }
 
   .doc-img {
-    mix-blend-mode: normal !important;
+    mix-blend-mode: normal;
     border-radius: 0;
     border-color: var(--bs-border-color);
     filter: invert(10%);
@@ -201,6 +201,24 @@ $form-check-radio-checked-bg-image-dark: url("data:image/svg+xml,<svg xmlns='htt
     mix-blend-mode: luminosity;
   }
 
+  @supports (hanging-punctuation: first) and (font: -apple-system-body) and (-webkit-appearance: none) {
+    // Safari does not like the filters on the image, see https://github.com/paperless-ngx/paperless-ngx/pull/8121
+    .doc-img-container {
+      background-color: #ffffff;
+    }
+
+    .doc-img {
+      filter: none !important;
+      box-shadow: inset 0px 0px 0px 10px rgba(0,0,0,1);
+    }
+
+    .doc-img.inverted {
+      filter: none !important;
+      mix-blend-mode: difference;
+      opacity: 0.95;
+    }
+  }
+
   .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;