From e22ccbda2675e4317954077f4f82e6c35f58ca17 Mon Sep 17 00:00:00 2001
From: shamoon <4887959+shamoon@users.noreply.github.com>
Date: Wed, 30 Oct 2024 11:43:02 -0700
Subject: [PATCH] Fix: dont use filters for inverted thumbnails (#8121)

---
 .../document-card-large.component.html        |  2 +-
 .../document-card-large.component.scss        | 14 +---------
 .../document-card-small.component.html        |  4 +--
 .../document-card-small.component.scss        | 12 ---------
 src-ui/src/styles.scss                        | 26 ++++++++++++++++---
 src-ui/src/theme.scss                         | 20 +++++++++++++-
 6 files changed, 45 insertions(+), 33 deletions(-)

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 c8adc759d..a433a6198 100644
--- 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 35f6f53b1..44c112378 100644
--- 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 1dbb7c308..4885212ad 100644
--- 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 9affa52ec..da19b2145 100644
--- 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 87904f8e6..bac7153e0 100644
--- 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 6c6075c4a..877bf6507 100644
--- 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;