From f4119f51ae9a458103ff3bce0f0eda55d723f577 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Wed, 13 Mar 2024 00:59:06 +0100
Subject: [PATCH] Accented background on DMs

---
 TangerineUI-cherry.css | 10 ++++++++++
 TangerineUI-purple.css | 10 ++++++++++
 TangerineUI.css        | 10 ++++++++++
 3 files changed, 30 insertions(+)

diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index df3231a..a5882de 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -2246,6 +2246,7 @@ body.app-body  {
     width: 20px;
     inset-inline-start: -20px;
     background: linear-gradient(90deg, transparent, var(--color-post-bg));
+    transition: all .2s;
 }
 .app-body .status__relative-time::after {
     inset-inline-start: 0;
@@ -3109,12 +3110,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     display: none;
 }
 
+.app-body .status__wrapper.status__wrapper-direct {
+    --color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 92%);
+}
+.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover),
+.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover) .status__avatar {
+    --color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 88%);
+}
+
 .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend {
     background-color: var(--color-accent);
     margin-inline-start: 10px;
     z-index: 3;
     position: relative;
     outline: 5px solid var(--color-post-bg);
+    transition: all .2s;
 }
 .app-body :is(.detailed-status__wrapper-direct) .status__prepend {
     margin-inline-start: 0;
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index dcde4ce..0b8686b 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -2246,6 +2246,7 @@ body.app-body  {
     width: 20px;
     inset-inline-start: -20px;
     background: linear-gradient(90deg, transparent, var(--color-post-bg));
+    transition: all .2s;
 }
 .app-body .status__relative-time::after {
     inset-inline-start: 0;
@@ -3109,12 +3110,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     display: none;
 }
 
+.app-body .status__wrapper.status__wrapper-direct {
+    --color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 92%);
+}
+.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover),
+.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover) .status__avatar {
+    --color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 88%);
+}
+
 .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend {
     background-color: var(--color-accent);
     margin-inline-start: 10px;
     z-index: 3;
     position: relative;
     outline: 5px solid var(--color-post-bg);
+    transition: all .2s;
 }
 .app-body :is(.detailed-status__wrapper-direct) .status__prepend {
     margin-inline-start: 0;
diff --git a/TangerineUI.css b/TangerineUI.css
index 9f90aea..1873fb7 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -2246,6 +2246,7 @@ body.app-body  {
     width: 20px;
     inset-inline-start: -20px;
     background: linear-gradient(90deg, transparent, var(--color-post-bg));
+    transition: all .2s;
 }
 .app-body .status__relative-time::after {
     inset-inline-start: 0;
@@ -3109,12 +3110,21 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     display: none;
 }
 
+.app-body .status__wrapper.status__wrapper-direct {
+    --color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 92%);
+}
+.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover),
+.app-body .status__wrapper.status__wrapper-direct:has(.status__content:hover) .status__avatar {
+    --color-post-bg: color-mix(in srgb, var(--color-accent), var(--color-content-bg) 88%);
+}
+
 .app-body :is(.status__wrapper-direct, .detailed-status__wrapper-direct) .status__prepend {
     background-color: var(--color-accent);
     margin-inline-start: 10px;
     z-index: 3;
     position: relative;
     outline: 5px solid var(--color-post-bg);
+    transition: all .2s;
 }
 .app-body :is(.detailed-status__wrapper-direct) .status__prepend {
     margin-inline-start: 0;