From e46bcad2ba1dda5d80d59f44df0156d6c07fe956 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Tue, 12 Mar 2024 18:35:08 +0100
Subject: [PATCH] Using color-mix() instead of a seperate translucent color
 value (this time for column headers)

---
 TangerineUI-cherry.css | 8 +-------
 TangerineUI-purple.css | 8 +-------
 TangerineUI.css        | 8 +-------
 3 files changed, 3 insertions(+), 21 deletions(-)

diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index 33c3bfe..ac76c74 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -3156,7 +3156,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 .app-body .column-header,
 .app-body .column-back-button {
-    background-color: rgba(255, 255, 255, .9);
+    background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%);
     color: var(--color-content-fg);
     border-right: 1px solid var(--color-lines);
     border-left: 1px solid var(--color-lines);
@@ -3170,12 +3170,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     -webkit-backdrop-filter: blur(20px);
     backdrop-filter: blur(20px);
 }
-@media (prefers-color-scheme: dark) {
-    .app-body .column-header,
-    .app-body .column-back-button {
-        background-color: rgba(3, 3, 3, .65);
-    }
-}
 .app-body .column-header__button,
 .app-body .column-header__back-button {
     background-color: transparent;
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index dbf6e50..90a8770 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -3156,7 +3156,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 .app-body .column-header,
 .app-body .column-back-button {
-    background-color: rgba(255, 255, 255, .9);
+    background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%);
     color: var(--color-content-fg);
     border-right: 1px solid var(--color-lines);
     border-left: 1px solid var(--color-lines);
@@ -3170,12 +3170,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     -webkit-backdrop-filter: blur(20px);
     backdrop-filter: blur(20px);
 }
-@media (prefers-color-scheme: dark) {
-    .app-body .column-header,
-    .app-body .column-back-button {
-        background-color: rgba(3, 3, 3, .65);
-    }
-}
 .app-body .column-header__button,
 .app-body .column-header__back-button {
     background-color: transparent;
diff --git a/TangerineUI.css b/TangerineUI.css
index 64c3081..737f0cc 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -3156,7 +3156,7 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
 }
 .app-body .column-header,
 .app-body .column-back-button {
-    background-color: rgba(255, 255, 255, .9);
+    background-color: color-mix(in srgb, var(--color-content-bg), transparent 15%);
     color: var(--color-content-fg);
     border-right: 1px solid var(--color-lines);
     border-left: 1px solid var(--color-lines);
@@ -3170,12 +3170,6 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     -webkit-backdrop-filter: blur(20px);
     backdrop-filter: blur(20px);
 }
-@media (prefers-color-scheme: dark) {
-    .app-body .column-header,
-    .app-body .column-back-button {
-        background-color: rgba(3, 3, 3, .65);
-    }
-}
 .app-body .column-header__button,
 .app-body .column-header__back-button {
     background-color: transparent;