From b6c59d4ee15b663fb46908a93ce65e4efbbb91e9 Mon Sep 17 00:00:00 2001
From: Lim Chee Aun <cheeaun@gmail.com>
Date: Thu, 28 Sep 2023 15:48:55 +0800
Subject: [PATCH] Use luminosity for aesthetics

---
 src/app.css               | 1 +
 src/components/status.css | 1 +
 2 files changed, 2 insertions(+)

diff --git a/src/app.css b/src/app.css
index 9f92d714..658d0bcb 100644
--- a/src/app.css
+++ b/src/app.css
@@ -1087,6 +1087,7 @@ a[href^='http'][rel*='nofollow']:visited:not(:has(div)) {
   top: env(safe-area-inset-top, 0);
 }
 :is(.carousel-top-controls, .carousel-controls) {
+  mix-blend-mode: luminosity;
   position: absolute;
   left: 0;
   left: env(safe-area-inset-left, 0);
diff --git a/src/components/status.css b/src/components/status.css
index aa00d5fd..ac5d5b8e 100644
--- a/src/components/status.css
+++ b/src/components/status.css
@@ -1049,6 +1049,7 @@ body:has(#modal-container .carousel) .status .media img:hover {
   font-size: 90%;
   z-index: 1;
   text-shadow: 0 var(--hairline-width) var(--bg-color);
+  mix-blend-mode: luminosity;
 }
 .carousel-item button.media-alt .media-alt-desc {
   overflow: hidden;