diff --git a/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css b/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css index e1ba1958..b67dab9f 100644 --- a/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css +++ b/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css @@ -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; } diff --git a/themes/642854b5-88b4-4c40-b256-e035532109df/preferences.json b/themes/642854b5-88b4-4c40-b256-e035532109df/preferences.json index d93cf375..ef1d5150 100644 --- a/themes/642854b5-88b4-4c40-b256-e035532109df/preferences.json +++ b/themes/642854b5-88b4-4c40-b256-e035532109df/preferences.json @@ -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 } ]