From c745e994f7627419dc8110cd9e2e8b7ee84001a9 Mon Sep 17 00:00:00 2001
From: SethBurkart123 <hi25S.burkart@hills.adventist.edu.au>
Date: Tue, 14 Nov 2023 22:21:54 +1100
Subject: [PATCH] Add background transparency and animation effects to
 dashboard and popup

---
 src/inject/injected.scss              | 25 ++++++++++++++++++-------
 src/inject/injected/popup.scss        |  1 +
 src/inject/injected/transparency.scss |  9 +++++++++
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/src/inject/injected.scss b/src/inject/injected.scss
index f2b8b060..e8f4bf6c 100644
--- a/src/inject/injected.scss
+++ b/src/inject/injected.scss
@@ -21,6 +21,8 @@ body, html {
 * {
   font-family: Rubik, sans-serif !important;
   --theme-fg-parts: white;
+
+  transition: background-color 200ms ease-in-out;
 }
 @media (min-width: 900px) {
   #title > span {
@@ -43,6 +45,9 @@ body, html {
   color: var(--text-color) !important;
   overflow: hidden;
 }
+.LegacyModuleBody__LegacyModule___20YE2 {
+  background: transparent;
+}
 .addedButton {
   position: absolute !important;
   right: 105px;
@@ -59,13 +64,18 @@ body, html {
 }
 #main > .dashboard {
   background: unset;
-}
-#main > .dashboard > section {
-  border-radius: 1rem !important;
-}
-#main > .dashboard > .dashlet {
-  background: var(--background-primary);
-  border-radius: 1rem;
+
+  // TODO: Make this only opacity 0 when the animation will be played to stop a flash of the original
+  > section {
+    border-radius: 1rem !important;
+    //opacity: 0;
+  }
+
+  > .dashlet {
+    background: var(--background-primary);
+    border-radius: 1rem;
+    //opacity: 0;
+  }
 }
 .dashlet-notes > ul {
   background: var(--background-primary);
@@ -785,6 +795,7 @@ div > ol:has(.uiFileHandlerWrapper) {
   color: var(--text-primary);
   box-shadow: unset;
   -webkit-box-shadow: unset;
+  border-radius: 1rem;
 }
 .ais-description {
   color: var(--text-primary) !important;
diff --git a/src/inject/injected/popup.scss b/src/inject/injected/popup.scss
index 6c4976d6..484409c1 100644
--- a/src/inject/injected/popup.scss
+++ b/src/inject/injected/popup.scss
@@ -19,6 +19,7 @@
   top: 80px;
   height: 590px;
   z-index: 20;
+  transition-duration: 100ms;
 }
 
 .imageBackground {
diff --git a/src/inject/injected/transparency.scss b/src/inject/injected/transparency.scss
index 43460eff..2f4677a6 100644
--- a/src/inject/injected/transparency.scss
+++ b/src/inject/injected/transparency.scss
@@ -10,6 +10,8 @@ html.transparencyEffects:not(.dark) {
 
 
 /* Blurs */
+.message.addMessage,
+.thread,
 #title,
 .LabelList__selected___3Egk7,
 .legacy-root button, .legacy-root a,
@@ -33,4 +35,11 @@ html.transparencyEffects:not(.dark) {
 .document,
 .border {
   backdrop-filter: blur(8px);
+}
+
+#main > .dashboard {
+  section,
+  .dashlet {
+    backdrop-filter: blur(8px);
+  }
 }
\ No newline at end of file