Switched to -moz-pref, removed no tab bg color removal option, no tab screen image opacity added

This commit is contained in:
sameerasw 2025-05-04 04:14:32 +05:30
parent 99323d3382
commit d9fef1f62a
2 changed files with 47 additions and 54 deletions

View file

@ -1,6 +1,6 @@
/* variables */
:root {
@media (-moz-bool-pref: "mod.sameerasw.zen_bg_color_enabled") {
@media -moz-pref( "mod.sameerasw.zen_bg_color_enabled") {
--zen-main-browser-background: var(
--mod-sameerasw-zen_transparency_color,
#00000000
@ -8,44 +8,34 @@
}
}
/* Remove new tab background color added in 1.8b */
/* tab tint */
.browserStack {
browser {
@media (-moz-bool-pref: "mod.sameerasw.zen_light_tint_flip") {
@media -moz-pref( "mod.sameerasw.zen_light_tint_flip") {
background-color: light-dark(
rgba(255, 255, 255, 0.1),
rgba(0, 0, 0, 0.1)
) !important;
}
@media (-moz-bool-pref: "mod.sameerasw.zen_light_tint_disabled") {
@media -moz-pref( "mod.sameerasw.zen_light_tint_disabled") {
background-color: transparent !important;
}
}
}
/* hide shadow */
/* hide shadows */
hbox.browserSidebarContainer,
#zen-tabbox-wrapper {
@media (-moz-bool-pref: "mod.sameerasw.zen_no_shadow") {
@media -moz-pref( "mod.sameerasw.zen_no_shadow") {
box-shadow: none !important;
}
}
/* removed tab bg added in 1.9b */
#browser:has([zen-empty-tab="true"][selected="true"]) .browserStack {
browser {
@media (-moz-bool-pref: "mod.sameerasw.zen_empty_page_transparency") {
background-color: transparent !important;
opacity: 0 !important;
}
}
}
/* Animations */
/* Tab switch animation */
#tabbrowser-tabpanels
> hbox:not([zen-split="true"]):not(:has(.zen-glance-background)) {
@media (-moz-bool-pref: "mod.sameerasw.zen_tab_switch_anim") {
@media -moz-pref( "mod.sameerasw.zen_tab_switch_anim") {
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.35),
filter 0.45s ease-in-out, opacity 0.35s ease-in-out !important;
scale: 0.9 !important;
@ -53,22 +43,22 @@ hbox.browserSidebarContainer,
}
}
#tabbrowser-tabpanels > hbox.deck-selected:not([zen-split="true"]) {
@media (-moz-bool-pref: "mod.sameerasw.zen_tab_switch_anim") {
@media -moz-pref( "mod.sameerasw.zen_tab_switch_anim") {
scale: 1 !important;
opacity: 1 !important;
}
}
/* website view animations */
/* website switch animations */
#browser:not(:has(.zen-glance-background)) #tabbrowser-tabpanels {
@media (-moz-bool-pref: "mod.sameerasw.zen_urlbar_zoom_anim") {
@media -moz-pref( "mod.sameerasw.zen_urlbar_zoom_anim") {
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.35) !important;
}
}
/* URL bar page animation */
/* URL bar zoom animation */
#browser:has(#urlbar[open][zen-floating-urlbar="true"]) #tabbrowser-tabpanels {
@media (-moz-bool-pref: "mod.sameerasw.zen_urlbar_zoom_anim") {
@media -moz-pref( "mod.sameerasw.zen_urlbar_zoom_anim") {
pointer-events: none;
scale: 1.1 !important;
filter: blur(10px) brightness(70%) !important;
@ -76,14 +66,14 @@ hbox.browserSidebarContainer,
}
#urlbar[open][zen-floating-urlbar="true"] #urlbar-background {
@media (-moz-bool-pref: "mod.sameerasw.zen_urlbar_zoom_anim") {
@media -moz-pref( "mod.sameerasw.zen_urlbar_zoom_anim") {
border-radius: 1em !important;
}
}
/* trackpad gestures*/
tabpanels .browserStack browser {
@media (-moz-bool-pref: "mod.sameerasw.zen_trackpad_anim") {
@media -moz-pref( "mod.sameerasw.zen_trackpad_anim") {
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1) 0.1s !important;
border-radius: 0.75em !important;
}
@ -94,7 +84,7 @@ tabpanels .browserStack browser {
#historySwipeAnimationPreviousArrow:not([style="translate: none;"])
)
browser {
@media (-moz-bool-pref: "mod.sameerasw.zen_trackpad_anim") {
@media -moz-pref( "mod.sameerasw.zen_trackpad_anim") {
scale: 0.95 !important;
transform: translateX(3%) !important;
border-radius: 2em !important;
@ -106,7 +96,7 @@ tabpanels .browserStack browser {
#historySwipeAnimationNextArrow:not([style="translate: none;"])
)
browser {
@media (-moz-bool-pref: "mod.sameerasw.zen_trackpad_anim") {
@media -moz-pref( "mod.sameerasw.zen_trackpad_anim") {
scale: 0.95 !important;
transform: translateX(-3%) !important;
border-radius: 2em !important;
@ -115,7 +105,7 @@ tabpanels .browserStack browser {
/* no tab image */
#browser:has([zen-empty-tab="true"][selected="true"]) .browserStack {
@media (-moz-bool-pref: "mod.sameerasw.zen_notab_img_enabled") {
@media -moz-pref( "mod.sameerasw.zen_notab_img_enabled") {
background-image: var(
--mod-sameerasw-zen_notab_img,
url("https://raw.githubusercontent.com/zen-browser/branding/refs/heads/main/Official/Word%20Marks/SVG/zen_logo_icon_white.svg")
@ -126,10 +116,12 @@ tabpanels .browserStack browser {
background-size: var(--mod-sameerasw-zen_notab_img_size, 150px) !important;
@media (-moz-bool-pref: "mod.sameerasw.zen_notab_img_saturate") {
opacity: var(--mod-sameerasw-zen_notab_img_opacity, 1) !important;
@media -moz-pref( "mod.sameerasw.zen_notab_img_saturate") {
filter: saturate(0) !important;
@media (-moz-bool-pref: "mod.sameerasw.zen_notab_img_invert") {
@media -moz-pref( "mod.sameerasw.zen_notab_img_invert") {
@media (prefers-color-scheme: light) {
filter: saturate(0) invert(1) !important;
}

View file

@ -1,13 +1,13 @@
[
{
"property": "browser.tabs.allow_transparent_browser",
"label": "Allow zen browser to be transparent (TURN OFF BEFORE UNINSTALL)",
"label": "👀 Allow transparency (TURN OFF BEFORE UNINSTALL)",
"type": "checkbox",
"defaultValue": false
"defaultValue": true
},
{
"property": "zen.widget.linux.transparency",
"label": "Allow zen browser on linux to be transparent (TURN OFF BEFORE UNINSTALL)",
"label": "👀 Allow transparency on linux (TURN OFF BEFORE UNINSTALL)",
"type": "checkbox",
"defaultValue": true,
"disabledOn": [
@ -17,89 +17,90 @@
},
{
"property": "mod.sameerasw.zen_bg_color_enabled",
"label": "Enable custom background color for Zen",
"label": "🎨 Enable custom background color for Zen",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.sameerasw.zen_transparency_color",
"label": "Set custom background color (Overrides default theme colors)",
"label": "🎨 Set custom background color (Overrides theme)",
"type": "string",
"defaultValue": "#00000000",
"placeholder": "light-dark(#fff, #222) or RGBA or hex"
},
{
"property": "mod.sameerasw.zen_light_tint_flip",
"label": "Flip the light website tint to dark",
"label": "🌙 Flip the light website tint to dark",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.sameerasw.zen_light_tint_disabled",
"label": "Disable the light website tint",
"type": "checkbox",
"defaultValue": true
},
{
"property": "mod.sameerasw.zen_empty_page_transparency",
"label": "Transparent empty no tabs page",
"label": "🌙 Disable the light website tint",
"type": "checkbox",
"defaultValue": true
},
{
"property": "mod.sameerasw.zen_no_shadow",
"label": "Remove the shadow around the web page",
"label": "🌑 Remove the shadow around the web page",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.sameerasw.zen_tab_switch_anim",
"label": "Tab switch animation",
"label": "Tab switch animation",
"type": "checkbox",
"defaultValue": true
},
{
"property": "mod.sameerasw.zen_urlbar_zoom_anim",
"label": "URL bar zoom animation",
"label": "URL bar zoom animation",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.sameerasw.zen_trackpad_anim",
"label": "Trackpad swipe animations",
"label": "Trackpad swipe animations",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.sameerasw.zen_notab_img_enabled",
"label": "Add no tab screen background image",
"label": "🖼️ Add no tab screen background image",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.sameerasw.zen_notab_img",
"label": "Image URL, match the format: url('example.com/image.png')",
"label": "🖼️ Image URL, format: url('example.com/1.png')",
"type": "string",
"defaultValue": "url('https://github.com/sameerasw/my-internet/blob/main/wave-light.png?raw=true')",
"placeholder": "url('link_to_image.png')"
"placeholder": "url('example.com/1.png')"
},
{
"property": "mod.sameerasw.zen_notab_img_size",
"label": "Set no tab scren image size with unit",
"label": "🖼️ No tab scren image size with unit",
"type": "string",
"defaultValue": "150px",
"placeholder": "50px (include units px, % ...)"
"placeholder": "50px (px, em, % ...)"
},
{
"property": "mod.sameerasw.zen_notab_img_opacity",
"label": "🖼️ No tab scren image opacity (0-1)",
"type": "string",
"defaultValue": "1",
"placeholder": "0.75"
},
{
"property": "mod.sameerasw.zen_notab_img_saturate",
"label": "Grayscale the no tab screen image",
"label": "🖼️ Grayscale the no tab screen image",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.sameerasw.zen_notab_img_invert",
"label": "Invert the grayscaled no tab screen image in light theme (white → black)",
"label": "🖼️ Invert above image in light theme (white → black)",
"type": "checkbox",
"defaultValue": true
"defaultValue": false
}
]