From 2ca1c276597b7dcb0f98dfa7f40981b4bb5cfa55 Mon Sep 17 00:00:00 2001
From: FrostyBiscuit <frostybiscuit@proton.me>
Date: Tue, 18 Feb 2025 18:10:08 +0100
Subject: Fixed kryptex.com transparency

---
 manifest.json               |  2 +-
 package.json                |  2 +-
 styles/websites/kryptex.css | 78 ++++++++++++++++++++++++++++++++++++++++++++-
 3 files changed, 79 insertions(+), 3 deletions(-)

diff --git a/manifest.json b/manifest.json
index 34895ea..b76d117 100644
--- a/manifest.json
+++ b/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version": 2,
   "name": "Transparent Zen",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "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 581dd2e..28b8404 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "transparent-zen",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "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/kryptex.css b/styles/websites/kryptex.css
index 6c6ce74..0cac675 100644
--- a/styles/websites/kryptex.css
+++ b/styles/websites/kryptex.css
@@ -4,8 +4,17 @@
   background-color: var(--transparent-background) !important;
 }
 
-.bg-white {
+.bg-white,
+.bg-gray,
+.bg-dark {
   background-color: var(--transparent-background-dark) !important;
+
+  &.fake-bg-overlay {
+    &::before,
+    &::after {
+      background-color: var(--transparent-background-dark) !important;
+    }
+  }
 }
 
 .alert-info-light,
@@ -17,6 +26,16 @@
   color: var(--color-text-alt) !important;
 }
 
+.text-dark {
+  color: var(--color-text) !important;
+
+  &:is(a) {
+    &:hover {
+      color: var(--color-primary) !important;
+    }
+  }
+}
+
 .border {
   border: none !important;
 }
@@ -67,6 +86,34 @@
   background-color: var(--transparent-background-darker) !important;
   backdrop-filter: var(--backdrop-blur);
   border-radius: var(--border-radius);
+
+  a {
+    color: var(--color-text) !important;
+
+    &:hover {
+      color: var(--color-primary) !important;
+    }
+  }
+
+  .page-header-nav-tooltip__link {
+    &:hover {
+      background-color: var(--color-bg) !important;
+    }
+  }
+
+  .page-header-nav-tooltip__link-image-block {
+    &:hover {
+      background-color: var(--color-bg) !important;
+
+      .page-header-nav-tooltip__link-image {
+        color: var(--color-primary) !important;
+      }
+    }
+
+    .page-header-nav-tooltip__link-image {
+      color: var(--color-text) !important;
+    }
+  }
 }
 
 .tooltip__single {
@@ -100,6 +147,12 @@ label {
 
 input {
   border: 1px solid var(--color-bg-alt) !important;
+  color: var(--color-text) !important;
+
+  &:read-only,
+  &:disabled {
+    background: none !important;
+  }
 }
 
 .btn {
@@ -107,6 +160,29 @@ input {
     border-image: none !important;
     border: none !important;
   }
+
+  &.btn-white {
+    background: var(--color-bg) !important;
+    border-color: var(--color-bg) !important;
+
+    &:hover {
+      background: var(--transparent-background) !important;
+      border-color: var(--color-primary) !important;
+    }
+
+    .btn-icon__wrap svg {
+      filter: invert(1);
+    }
+  }
+}
+
+.category-list {
+  .category-list__link {
+    &.active,
+    &:hover {
+      background: linear-gradient(to right, var(--color-primary) 10%, transparent);
+    }
+  }
 }
 
 #sidebar {
-- 
cgit v1.2.3