From 7f5015175e23789987141906f6e0c720a0b4b4bf Mon Sep 17 00:00:00 2001
From: FrostyBiscuit <frostybiscuit@proton.me>
Date: Thu, 20 Feb 2025 10:48:22 +0100
Subject: Added support for duckduckgo.com

---
 manifest.json                  |   7 +-
 package.json                   |   2 +-
 styles/websites/duckduckgo.css | 196 +++++++++++++++++++++++++++++++++++++++++
 3 files changed, 203 insertions(+), 2 deletions(-)
 create mode 100644 styles/websites/duckduckgo.css

diff --git a/manifest.json b/manifest.json
index 2bd5ca5..7c776c4 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Transparent Zen",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "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": {
@@ -137,6 +137,11 @@
       "matches": ["*://*.programiz.com/*"],
       "css": ["./styles/websites/programiz.css"],
       "run_at": "document_start"
+    },
+    {
+      "matches": ["*://*.duckduckgo.com/*"],
+      "css": ["./styles/websites/duckduckgo.css"],
+      "run_at": "document_start"
     }
   ]
 }
\ No newline at end of file
diff --git a/package.json b/package.json
index c276d06..772ae6e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "transparent-zen",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "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/duckduckgo.css b/styles/websites/duckduckgo.css
new file mode 100644
index 0000000..0fb0755
--- /dev/null
+++ b/styles/websites/duckduckgo.css
@@ -0,0 +1,196 @@
+@import url("../global/base.css");
+
+/* Homepage */
+.theme-dark,
+.theme-light {
+  --theme-bg-global: transparent;
+  --theme-bg-secondary: transparent;
+  --theme-sidemenu-bg: var(--transparent-background-darker);
+  --theme-button-primary-border: transparent;
+  --theme-button-primary-outline-bg: transparent;
+  --theme-button-tertiary-bg: transparent;
+  --theme-button-tertiary-bg--disabled: transparent;
+  --theme-checkbox-bg--hover: transparent;
+  --theme-checkbox-bg--active: transparent;
+  --theme-checkbox-bg--disabled: transparent;
+  --theme-searchbox-bg: var(--transparent-background-dark);
+  --theme-searchbox-bg--focused: var(--transparent-background-darker);
+  --theme-searchbox-bg--mobile: var(--transparent-background-darker);
+
+  [class^="home_root"] {
+    --theme-bg-home: transparent;
+    --theme-bg-cta-cards: var(--transparent-background);
+    --theme-bg-home-searchbox: var(--transparent-background-dark);
+    --theme-howitworks-downloads-bg: var(--transparent-background);
+    --legacy-theme-atb-button-border: transparent;
+  }
+}
+
+/* Search Page */
+html,
+body,
+.body--home,
+.site-wrapper,
+.region__body,
+.badge-link,
+.module--carousel__image-wrapper,
+.result__image,
+.vertical--map__sidebar,
+.vertical--map__sidebar__header,
+.page-chrome_newtab,
+.zci--type--tiles:not(.is-fallback).is-full-page.is-expanded,
+.zci--type--tiles:not(.is-fallback).is-full-page.is-expanded .metabar:not(.is-stuck) {
+  background-color: transparent;
+}
+body.embedded-search-default-theme.page-chrome_newtab,
+body.embedded-search-default-theme .newtab-heading {
+  background-color: transparent;
+}
+
+.header-wrap {
+  background-color: var(--transparent-background-darker) !important;
+  backdrop-filter: var(--backdrop-blur);
+  box-shadow: none !important;
+
+  &::after {
+    content: none !important;
+  }
+
+  .dropdown.dropdown--settings {
+    background-color: transparent !important;
+    backdrop-filter: none !important;
+  }
+}
+
+.react-results--main {
+  > li {
+    background: var(--transparent-background);
+    border-radius: var(--border-radius-lg);
+
+    &[data-layout="news"] {
+      padding: 10px;
+
+      .module--carousel {
+        .module--carousel__item {
+          background: var(--transparent-background) !important;
+        }
+      }
+    }
+  }
+
+  .related-searches {
+    .related-searches__lists {
+      .related-searches__list {
+        .related-searches__item {
+          background: var(--transparent-background) !important;
+        }
+      }
+    }
+  }
+
+  /* Only random generated classes available */
+  div:has(> .related-searches) {
+    + div {
+      > div > div {
+        background: var(--transparent-background) !important;
+      }
+    }
+  }
+}
+
+.footer {
+  background: var(--transparent-background) !important;
+  border: 0 !important;
+}
+
+/* Image Search */
+.zci-wrap {
+  background: none !important;
+}
+
+.set-header--fixed .tileview--grid .metabar--fixed,
+.tileview--grid .metabar--fixed.is-stuck {
+  background: var(--transparent-background-darker) !important;
+  backdrop-filter: var(--backdrop-blur);
+  border: 0 !important;
+}
+
+.metabar__dropdowns-wrap {
+  .dropdown {
+    background: none !important;
+    backdrop-filter: none !important;
+  }
+}
+
+/* Video & Shopping Search */
+#zci-videos,
+#zci-products {
+  .tile {
+    background: var(--transparent-background) !important;
+
+    .tile__body {
+      background: none !important;
+      border-color: transparent !important;
+    }
+  }
+}
+
+/* News Search */
+.results--main {
+  .search-filters {
+    .dropdown {
+      background: none !important;
+      backdrop-filter: none !important;
+    }
+  }
+
+  .results {
+    .result.result--news {
+      background: var(--transparent-background) !important;
+      border-radius: var(--border-radius-lg);
+    }
+  }
+}
+
+/* Map */
+#web_content_wrapper {
+  #react-layout {
+    main {
+      > aside[data-testid="maps-vertical-sidebar"] {
+        background-color: var(--transparent-background-darker) !important;
+        backdrop-filter: var(--backdrop-blur);
+
+        > section[data-testid="maps-vertical-sidebar-header"] {
+          > form > div {
+            background: none !important;
+            border: 0 !important;
+
+            div:has(> input) {
+              background-color: var(--transparent-background-dark) !important;
+
+              > input,
+              > button:first-of-type {
+                background: none !important;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+/* General Styles */
+.metabar__dropdowns-wrap,
+nav,
+ul {
+  &::before,
+  &::after {
+    content: none !important;
+  }
+}
+
+.modal,
+.modal--dropdown {
+  z-index: 250;
+}
-- 
cgit v1.2.3