From 9b63e9a82e94eb9d652db2b5d071f43ba4269830 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Mon, 19 Feb 2024 15:32:27 +0100
Subject: [PATCH] Added translucency to mobile bottom toolbar

---
 TangerineUI-cherry.css | 14 +++++++++++---
 TangerineUI-purple.css | 14 +++++++++++---
 TangerineUI.css        | 14 +++++++++++---
 3 files changed, 33 insertions(+), 9 deletions(-)

diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index 242144e..4bd6762 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -3648,9 +3648,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         padding-bottom: env(safe-area-inset-bottom);
         flex-direction: row;
         overflow-x: auto;
-        background-color: var(--color-content-bg);
-        border-top: 1px solid var(--color-lines);
+        background-color: rgba(255, 255, 255, 0.75);
+        border-top: 1px solid var(--color-lines-translucent);
         border-left: 0;
+        -webkit-backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px);
     }
     .app-body .columns-area__panels__pane--navigational .navigation-panel::before {
         content: " ";
@@ -3763,7 +3765,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         margin-left: -55px;
     }
 }
-
+@media screen and (max-width:1174px) {
+    @media (prefers-color-scheme: dark) {
+        .app-body .columns-area__panels__pane--navigational .navigation-panel {
+            background-color: rgba(3, 3, 3, .65);
+        }
+    }
+}
 /* "Trending Now" block at the bottom of the navigation panel */
 .app-body .getting-started__trends {
     padding: 0;
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index 5034136..ecb54d4 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -3648,9 +3648,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         padding-bottom: env(safe-area-inset-bottom);
         flex-direction: row;
         overflow-x: auto;
-        background-color: var(--color-content-bg);
-        border-top: 1px solid var(--color-lines);
+        background-color: rgba(255, 255, 255, 0.75);
+        border-top: 1px solid var(--color-lines-translucent);
         border-left: 0;
+        -webkit-backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px);
     }
     .app-body .columns-area__panels__pane--navigational .navigation-panel::before {
         content: " ";
@@ -3763,7 +3765,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         margin-left: -55px;
     }
 }
-
+@media screen and (max-width:1174px) {
+    @media (prefers-color-scheme: dark) {
+        .app-body .columns-area__panels__pane--navigational .navigation-panel {
+            background-color: rgba(3, 3, 3, .65);
+        }
+    }
+}
 /* "Trending Now" block at the bottom of the navigation panel */
 .app-body .getting-started__trends {
     padding: 0;
diff --git a/TangerineUI.css b/TangerineUI.css
index b14d7b9..59d5131 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -3648,9 +3648,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         padding-bottom: env(safe-area-inset-bottom);
         flex-direction: row;
         overflow-x: auto;
-        background-color: var(--color-content-bg);
-        border-top: 1px solid var(--color-lines);
+        background-color: rgba(255, 255, 255, 0.75);
+        border-top: 1px solid var(--color-lines-translucent);
         border-left: 0;
+        -webkit-backdrop-filter: blur(20px);
+        backdrop-filter: blur(20px);
     }
     .app-body .columns-area__panels__pane--navigational .navigation-panel::before {
         content: " ";
@@ -3763,7 +3765,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
         margin-left: -55px;
     }
 }
-
+@media screen and (max-width:1174px) {
+    @media (prefers-color-scheme: dark) {
+        .app-body .columns-area__panels__pane--navigational .navigation-panel {
+            background-color: rgba(3, 3, 3, .65);
+        }
+    }
+}
 /* "Trending Now" block at the bottom of the navigation panel */
 .app-body .getting-started__trends {
     padding: 0;