diff options
| -rw-r--r-- | README.md | 5 | ||||
| -rw-r--r-- | manifest.json | 2 | ||||
| -rw-r--r-- | package.json | 2 | ||||
| -rw-r--r-- | styles/websites/github.css | 10 | ||||
| -rw-r--r-- | styles/websites/kryptex.css | 78 |
5 files changed, 91 insertions, 6 deletions
@@ -38,13 +38,13 @@ The following websites are currently supported by Transparent Zen: - 🟢 chatgpt.com
- 🟢 copilot.microsoft.com
- 🟢 chess.com
+- 🟢 github.com
- 🟠amazon.de
- 🟠bing.com
- 🟠kryptex.com
- 🟠lieferando.at
- 🟠nexusmods.com
- 🔴 epicgames.com
-- 🔴 github.com
- 🔴 gog.com
- 🔴 kinguin.net
@@ -69,6 +69,9 @@ If you are using Dark Reader, ensure that it is disabled for the websites you wa Once installed, Transparent Zen will automatically apply transparent styles to the supported websites listed above. No further configuration is required.
+#### Customization
+I highly recommend darkening the browser theme slightly by right-clicking the Zen Browser Toolbar and selecting **Change Theme Colors**. I'm personally using the hex code **#00000066** which darkens the browser background slightly while maintaining readability. But of course, feel free to play around to find the best color to your liking!
+
## Contributing
The main idea behind this project is for the community to contribute and add styles for their favorite websites, so that everyone can enjoy a fully transparent experience.
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/github.css b/styles/websites/github.css index 80886a4..83c2d03 100644 --- a/styles/websites/github.css +++ b/styles/websites/github.css @@ -1,3 +1,8 @@ +html,
+body {
+ background: none !important;
+}
+
/* Styles by u/sameera_s_w */
div.feed-item-content.d-flex.flex-column.pt-2.pb-2.border.color-border-default.rounded-2.color-shadow-small.width-full.height-fit,
@@ -69,7 +74,8 @@ div.prc-Dialog-Dialog-luvDS, .Overlay,
.Overlay__StyledOverlay-sc-51280t-0,
details-menu {
- background-color: var(--bgColor-disabled);
+ background-color: var(--transparent-background-dark);
+ backdrop-filter: var(--backdrop-blur);
}
aside.feed-right-sidebar,
@@ -82,7 +88,7 @@ aside.feed-left-sidebar { }
.gh-header-sticky.is-stuck {
- background-color: var(--bgColor-disabled);
+ background-color: var(--transparent-background-dark);
border-radius: 1em;
/* margin-top: 1em; */
}
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 {
|