From 99ffddf94daa19510e7822cafd8884cb6d5edf4b Mon Sep 17 00:00:00 2001
From: FrostyBiscuit <frostybiscuit@proton.me>
Date: Fri, 21 Feb 2025 09:11:13 +0100
Subject: Added support for epicgames.com

---
 README.md                     |   2 +-
 manifest.json                 |   2 +-
 package.json                  |   2 +-
 styles/websites/epicgames.css | 116 ++++++++++++++++++++++++++++++++++++------
 4 files changed, 104 insertions(+), 18 deletions(-)

diff --git a/README.md b/README.md
index 0c521a1..1088037 100644
--- a/README.md
+++ b/README.md
@@ -46,9 +46,9 @@ The following websites are currently supported by Transparent Zen:
 - 🟢 programiz.com (only for their dark theme)
 - 🟢 nexusmods.com
 - 🟢 duckduckgo.com
+- 🟢 epicgames.com
 - 🟠 amazon.de
 - 🟠 lieferando.at
-- 🔴 epicgames.com
 - 🔴 gog.com
 - 🔴 kinguin.net
 
diff --git a/manifest.json b/manifest.json
index 7c776c4..1b634c9 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Transparent Zen",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "Inject custom styles to make your favorite websites transparent. PLEASE KEEP IN MIND THAT THIS IS STILL WORK IN PROGRESS, SO THINGS MIGHT BREAK!",
   "browser_specific_settings": {
     "gecko": {
diff --git a/package.json b/package.json
index 772ae6e..df5a692 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "transparent-zen",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "A browser extension for Zen Browser to inject custom styles to make your favorite websites transparent",
   "scripts": {
     "build": "web-ext build --config web-ext-config.mjs",
diff --git a/styles/websites/epicgames.css b/styles/websites/epicgames.css
index 587abe1..e13f9e2 100644
--- a/styles/websites/epicgames.css
+++ b/styles/websites/epicgames.css
@@ -1,22 +1,108 @@
 @import url("../global/base.css");
 
-#purchaseAppContainer {
-  background-color: var(--transparent-background-darker) !important;
-  backdrop-filter: var(--backdrop-blur);
-  border-radius: var(--border-radius);
+.isBrowser {
+  background: none !important;
+
+  div:has(> egs-navigation) {
+    background: var(--transparent-background-darker) !important;
+  }
+
+  main {
+    > div:first-child {
+      background: var(--transparent-background-darker) !important;
+      backdrop-filter: var(--backdrop-blur);
+
+      > div:first-child {
+        background: none !important;
+      }
+    }
+
+    > div {
+      background: none !important;
+    }
+
+    [data-testid="egs-ssr-wrapper-all"] {
+      > div {
+        background: none !important;
+      }
+    }
+
+    [data-testid="sticky-nav"] {
+      background: none;
+
+      > ul {
+        background: var(--transparent-background) !important;
+        backdrop-filter: var(--backdrop-blur);
+        padding: 5px 10px 10px;
+      }
+    }
+
+    [data-testid="opt-in-toggle-layout"] {
+      > div[class*="ROOT"] {
+        background: var(--transparent-background) !important;
+      }
+    }
+
+    [data-testid="offer-card-layout-wrapper"] {
+      > div {
+        background: var(--transparent-background) !important;
+      }
+    }
+
+    [data-testid="cart-view"] {
+      > div {
+        background: none !important;
+      }
+
+      [data-testid="offer-card-layout-wrapper"] {
+        > div {
+          background: var(--transparent-background) !important;
+        }
+      }
+    }
+  }
 }
 
-button[type="button"] {
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  background-color: transparent !important;
-  border: 2px solid var(--color-primary) !important;
-  border-radius: var(--border-radius);
-  color: var(--color-primary) !important;
-  font-weight: 500;
+[data-testid="SaleCarouselDesktop"] {
+  div:has(+ [data-testid^="CarouselProgress"]) {
+    background: var(--transparent-background) !important;
+  }
+
+  [data-testid^="CarouselThumbnail"] {
+    &:hover {
+      background: var(--transparent-background-darker) !important;
+    }
+  }
+
+  [data-testid^="CarouselProgress"] {
+    background: var(--color-bg) !important;
+  }
+}
+
+/* Content Page */
+#global-header {
+  .bg-filter {
+    background: var(--transparent-background-darker) !important;
+  }
+}
 
-  * {
-    color: var(--color-primary) !important;
+.eg-content {
+  background: none !important;
+
+  .HomePage,
+  .PageHeader,
+  .MyRequests {
+    background: none !important;
   }
 }
+
+footer#egf {
+  background: var(--transparent-background) !important;
+}
+
+/* Checkout Modal */
+#purchaseAppContainer {
+  background-color: var(--transparent-background-darker) !important;
+  backdrop-filter: var(--backdrop-blur);
+  border-radius: var(--border-radius);
+}
-- 
cgit v1.2.3