diff options
| -rw-r--r-- | manifest.json | 2 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | 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 {
|