Add transparency effects and update theme colors

src/inject/injected.scss

@@ -4,6 +4,7 @@
 @import "./injected/popup.scss";
 @import "./injected/sidebar-animation.scss";
 @import "./injected/theme.scss";
+@import "./injected/transparency.scss";
 
 :root {
   background: var(--better-main) !important;
@@ -27,7 +28,7 @@ body, html {
   }
 }
 .connectedNotificationsWrapper > div > button > svg > g {
-  fill: var(--background-primary) !important;
+  fill: var(--theme-primary) !important;
 }
 #main {
   color: var(--text-primary);
@@ -51,7 +52,7 @@ body, html {
   cursor: pointer;
   background: var(--text-primary) !important;
   border-radius: 10px;
-  color: var(--background-primary) !important;
+  color: var(--theme-primary) !important;
   height: 35px;
   justify-content: center;
   width: 35px !important;
@@ -83,7 +84,7 @@ ul.magicDelete > li.deleting {
 }
 .addedButton svg {
   margin: 6px;
-  fill: var(--background-primary);
+  fill: var(--theme-primary);
 }
 #menu, .sub, .nav {
   background: transparent !important;
@@ -398,6 +399,9 @@ ol > [data-label] {
 [data-type="student"] [style="z-index: 30;"] .header:has(h1) {
   color: black !important;
 }
+.uiFile.rows>.name, .uiResource.rows>.name {
+  padding: 2px;
+}
 div > ol:has(.uiFileHandlerWrapper) {
   border-bottom-left-radius: 16px !important;
   border-bottom-right-radius: 16px !important;
@@ -2291,7 +2295,7 @@ body {
   outline: solid 1px black;
 }
 .tooltip svg {
-  fill: var(--background-primary);
+  fill: var(--theme-primary);
 }
 .tooltip {
   display: inline-block;
@@ -2358,7 +2362,7 @@ body {
 .topmenutooltip {
   top: 115% !important;
   background: var(--text-primary) !important;
-  color: var(--background-primary) !important;
+  color: var(--theme-primary) !important;
 }
 .whatsnewContainer {
   position: absolute;

src/inject/injected/theme.scss

@@ -1,11 +1,15 @@
 html.dark {
   --background-primary: #232323;
   --background-secondary: #1a1a1a;
+  --theme-primary: #232323;
+  --theme-secondary: #1a1a1a;
   --text-primary: white;
 }
 
 html:not(.dark) {
   --background-primary: #ffffff;
   --background-secondary: #e5e7eb;
+  --theme-primary: #ffffff;
+  --theme-secondary: #e5e7eb;
   --text-primary: black;
 }

src/inject/injected/transparency.scss

@@ -0,0 +1,32 @@
+html.transparencyEffects.dark {
+  --background-primary: rgba(35, 35, 35, 0.5);
+  --background-secondary: rgba(26, 26, 26, 0.5);
+}
+
+html.transparencyEffects:not(.dark) {
+  --background-primary: rgba(255, 255, 255, 0.5);
+  --background-secondary: rgba(229, 231, 235, 0.5);
+}
+
+
+/* Blurs */
+#title,
+.LabelList__selected___3Egk7,
+.legacy-root button, .legacy-root a,
+.MessageList__MessageList___3DxoC {
+  backdrop-filter: blur(10px);
+}
+
+#menu {
+  backdrop-filter: blur(20px);
+}
+
+.title > a {
+  backdrop-filter: blur(0px) !important;
+}
+
+.search,
+.document,
+.border {
+  backdrop-filter: blur(8px);
+}