From 3293ff16f6eb316a399963fae70e681a5e24388d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Wed, 20 Dec 2023 18:57:00 +0100
Subject: [PATCH] Tweaked background colors in the compose field

---
 TangerineUI-cherry.css | 11 +++++++++--
 TangerineUI-purple.css | 10 ++++++++--
 TangerineUI.css        | 10 ++++++++--
 3 files changed, 25 insertions(+), 6 deletions(-)

diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index 66c30d5..a8222ff 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -941,11 +941,13 @@ body.app-body  {
 .app-body .navigation-bar {
     border-radius: 8px 8px 0 0;
     padding: 23px 15px 22px 18px;
-    background-color: var(--color-content-secondary-bg);
+    background-color: var(--color-content-bg);
     border-top: 1px solid var(--color-lines);
     border-left: 1px solid var(--color-lines);
     border-right: 1px solid var(--color-lines);
-    transition: border-color .2s;
+    transition:
+        background-color .2s,
+        border-color .2s;
 }
 .app-body .navigation-bar strong {
     color: var(--color-content-fg);
@@ -975,6 +977,10 @@ body.app-body  {
 .app-body .compose-form__highlightable:focus-within {
     border-color: var(--color-accent);
 }
+.app-body .compose-form .reply-indicator + .navigation-bar,
+.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within) {
+    background-color: var(--color-content-secondary-bg);
+}
 .app-body .compose-form__highlightable.active {
     box-shadow: none;
 }
@@ -1229,6 +1235,7 @@ body.app-body  {
     border-radius: 8px;
     border: 1px solid var(--color-lines);
     background-color: var(--color-content-bg);
+    transition: all .2s;
 }
 .app-body .poll__option input[type=text]:focus {
     border-color: var(--color-accent);
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index 227b661..52302f3 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -941,11 +941,13 @@ body.app-body  {
 .app-body .navigation-bar {
     border-radius: 8px 8px 0 0;
     padding: 23px 15px 22px 18px;
-    background-color: var(--color-content-secondary-bg);
+    background-color: var(--color-content-bg);
     border-top: 1px solid var(--color-lines);
     border-left: 1px solid var(--color-lines);
     border-right: 1px solid var(--color-lines);
-    transition: border-color .2s;
+    transition:
+        background-color .2s,
+        border-color .2s;
 }
 .app-body .navigation-bar strong {
     color: var(--color-content-fg);
@@ -975,6 +977,10 @@ body.app-body  {
 .app-body .compose-form__highlightable:focus-within {
     border-color: var(--color-accent);
 }
+.app-body .compose-form .reply-indicator + .navigation-bar,
+.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within) {
+    background-color: var(--color-content-secondary-bg);
+}
 .app-body .compose-form__highlightable.active {
     box-shadow: none;
 }
diff --git a/TangerineUI.css b/TangerineUI.css
index 7260b89..bc1f298 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -941,11 +941,13 @@ body.app-body  {
 .app-body .navigation-bar {
     border-radius: 8px 8px 0 0;
     padding: 23px 15px 22px 18px;
-    background-color: var(--color-content-secondary-bg);
+    background-color: var(--color-content-bg);
     border-top: 1px solid var(--color-lines);
     border-left: 1px solid var(--color-lines);
     border-right: 1px solid var(--color-lines);
-    transition: border-color .2s;
+    transition:
+        background-color .2s,
+        border-color .2s;
 }
 .app-body .navigation-bar strong {
     color: var(--color-content-fg);
@@ -975,6 +977,10 @@ body.app-body  {
 .app-body .compose-form__highlightable:focus-within {
     border-color: var(--color-accent);
 }
+.app-body .compose-form .reply-indicator + .navigation-bar,
+.app-body .compose-form .navigation-bar:has(~ .compose-form__highlightable:focus-within) {
+    background-color: var(--color-content-secondary-bg);
+}
 .app-body .compose-form__highlightable.active {
     box-shadow: none;
 }