Merge pull request #10 from frostybiscuit/6-support-for-duckduckgo-outlook-and-notebooklm

Added support for duckduckgo.com

3 files changed, 203 insertions, 2 deletions

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;

+}