Added support for epicgames.com

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);

+}