From d8f66f6b4539b59342b4bed70785c805505fc6e4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nil=C3=A9ane?= <nileanedorffer@gmail.com>
Date: Tue, 27 Feb 2024 14:28:14 +0100
Subject: [PATCH] Fixed: the notification toaster no longer appears on top of
 the bottom mobile toolbar

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

diff --git a/TangerineUI-cherry.css b/TangerineUI-cherry.css
index 0512074..1c38086 100644
--- a/TangerineUI-cherry.css
+++ b/TangerineUI-cherry.css
@@ -4524,6 +4524,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-image: var(--icon-reject-inv);
 }
 
+@media screen and (max-width:1174px) {
+    .app-body .notification-list {
+        bottom: calc(5rem + env(safe-area-inset-bottom));
+    }
+}
 .app-body .notification-bar {
     background-color: var(--color-content-bg-translucent);
     color: var(--color-content-fg);
@@ -4532,7 +4537,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
 }
-
+.app-body .notification-bar-action {
+    transition: all .2s;
+}
+.app-body .notification-bar-action:is(:active, :focus, :hover) {
+    background-color: var(--color-accent-bg);
+    color: var(--color-accent);
+}
 
 /* 📋 Lists tab */
 .app-body .column-inline-form {
diff --git a/TangerineUI-purple.css b/TangerineUI-purple.css
index a7d4019..28c259a 100644
--- a/TangerineUI-purple.css
+++ b/TangerineUI-purple.css
@@ -4524,6 +4524,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-image: var(--icon-reject-inv);
 }
 
+@media screen and (max-width:1174px) {
+    .app-body .notification-list {
+        bottom: calc(5rem + env(safe-area-inset-bottom));
+    }
+}
 .app-body .notification-bar {
     background-color: var(--color-content-bg-translucent);
     color: var(--color-content-fg);
@@ -4532,7 +4537,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
 }
-
+.app-body .notification-bar-action {
+    transition: all .2s;
+}
+.app-body .notification-bar-action:is(:active, :focus, :hover) {
+    background-color: var(--color-accent-bg);
+    color: var(--color-accent);
+}
 
 /* 📋 Lists tab */
 .app-body .column-inline-form {
diff --git a/TangerineUI.css b/TangerineUI.css
index dfe36fc..647399a 100644
--- a/TangerineUI.css
+++ b/TangerineUI.css
@@ -4524,6 +4524,11 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     background-image: var(--icon-reject-inv);
 }
 
+@media screen and (max-width:1174px) {
+    .app-body .notification-list {
+        bottom: calc(5rem + env(safe-area-inset-bottom));
+    }
+}
 .app-body .notification-bar {
     background-color: var(--color-content-bg-translucent);
     color: var(--color-content-fg);
@@ -4532,7 +4537,13 @@ div[tabindex="-1"] + div[tabindex="-1"] > .status__wrapper > .status-reply.statu
     -webkit-backdrop-filter: blur(10px);
     backdrop-filter: blur(10px);
 }
-
+.app-body .notification-bar-action {
+    transition: all .2s;
+}
+.app-body .notification-bar-action:is(:active, :focus, :hover) {
+    background-color: var(--color-accent-bg);
+    color: var(--color-accent);
+}
 
 /* 📋 Lists tab */
 .app-body .column-inline-form {