Merge remote-tracking branch 'upstream/main'

This commit is contained in:
philmard 2025-05-14 14:14:47 +03:00
commit ed6a5f41a5
32 changed files with 1653 additions and 1280 deletions

File diff suppressed because it is too large Load diff

View file

@ -3,7 +3,7 @@
background-color: rgba(0, 0, 0, 0) !important; background-color: rgba(0, 0, 0, 0) !important;
} }
#close, #unpip { #close, #unpip, #minimize {
fill: white !important; fill: white !important;
padding: 5px !important; padding: 5px !important;
top: 2px !important; top: 2px !important;
@ -25,6 +25,11 @@
right: auto !important; right: auto !important;
} }
#minimize {
left: auto !important;
right: 35px !important;
}
#controls { #controls {
margin: 0 !important; margin: 0 !important;
height: 100% !important; height: 100% !important;

View file

@ -10,5 +10,5 @@
"version": "1.0.0", "version": "1.0.0",
"tags": [], "tags": [],
"createdAt": "2025-02-07", "createdAt": "2025-02-07",
"updatedAt": "2025-02-09" "updatedAt": "2025-05-13"
} }

View file

@ -1,10 +1,15 @@
:root { :root {
--bmb-sound-icon-scale: 1.5; --bmb-sound-icon-scale: 1.5;
--bmb-sound-icon-scale-essentials: 1.28; --bmb-sound-icon-scale-essentials: 1.26;
--bmb-sound-icon-scale-glance: 1.15; --bmb-sound-icon-scale-glance: 1.15;
} }
/* ================== General ================== */ /* ================== General ================== */
/* Hide firefox sound button */
.tab-audio-button {
display: none !important;
}
/* Tab icon overlay styles */ /* Tab icon overlay styles */
.tab-icon-overlay { .tab-icon-overlay {
border: none !important; border: none !important;
@ -12,7 +17,7 @@
background-color: transparent !important; background-color: transparent !important;
transition: 0.2s; transition: 0.2s;
&:is([soundplaying], [muted], [activemedia-blocked]):not([selected]) { &:is([soundplaying], [muted], [activemedia-blocked]) {
display: block !important; display: block !important;
} }
} }
@ -58,7 +63,7 @@
& .tab-icon-overlay, & .tab-icon-overlay,
& .tab-icon-stack { & .tab-icon-stack {
&:is([soundplaying], [muted], [activemedia-blocked]) { &:is([soundplaying], [muted], [activemedia-blocked]) {
transform: translate(20%, 24%) transform: translate(20%, 25%)
scale(var(--bmb-sound-icon-scale-essentials)) !important; scale(var(--bmb-sound-icon-scale-essentials)) !important;
display: block !important; display: block !important;
/* Remove extra margin created for vanilla icons */ /* Remove extra margin created for vanilla icons */
@ -84,8 +89,7 @@
& .tab-icon-overlay, & .tab-icon-overlay,
& .tab-icon-stack { & .tab-icon-stack {
&:is([soundplaying], [muted], [activemedia-blocked]) { &:is([soundplaying], [muted], [activemedia-blocked]) {
transform: translate(-10%, 25%) transform: translate(-8%, 25%) scale(var(--bmb-sound-icon-scale-glance)) !important;
scale(var(--bmb-sound-icon-scale-glance)) !important;
display: block !important; display: block !important;
margin: 0px !important; margin: 0px !important;
} }
@ -93,7 +97,7 @@
} }
} }
/* ================== Zen glance tab (pinned and essentials) ================== */ /* ================== Zen glance tab (pinned tabs) ================== */
#navigator-toolbox[zen-sidebar-expanded] #navigator-toolbox[zen-sidebar-expanded]
#tabbrowser-tabs #tabbrowser-tabs
.tabbrowser-tab[zen-glance-tab] { .tabbrowser-tab[zen-glance-tab] {

View file

@ -10,5 +10,5 @@
"version": "1.0.3", "version": "1.0.3",
"tags": [], "tags": [],
"createdAt": "2024-10-12", "createdAt": "2024-10-12",
"updatedAt": "2025-04-27" "updatedAt": "2025-05-10"
} }

View file

@ -1,6 +1,6 @@
/* transparency */ /* variables */
:root { :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( --zen-main-browser-background: var(
--mod-sameerasw-zen_transparency_color, --mod-sameerasw-zen_transparency_color,
#00000000 #00000000
@ -8,44 +8,34 @@
} }
} }
/* Remove new tab background color added in 1.8b */ /* tab tint */
.browserStack { .browserStack {
browser { browser {
@media (-moz-bool-pref: "mod.sameerasw.zen_light_tint_flip") { @media -moz-pref( "mod.sameerasw.zen_light_tint_flip") {
background-color: light-dark( background-color: light-dark(
rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1),
rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1)
) !important; ) !important;
} }
@media (-moz-bool-pref: "mod.sameerasw.zen_light_tint_disabled") { @media -moz-pref( "mod.sameerasw.zen_light_tint_disabled") {
background-color: transparent !important; background-color: transparent !important;
} }
} }
} }
/* hide shadow */ /* hide shadows */
hbox.browserSidebarContainer, hbox.browserSidebarContainer,
#zen-tabbox-wrapper { #zen-tabbox-wrapper {
@media (-moz-bool-pref: "mod.sameerasw.zen_no_shadow") { @media -moz-pref( "mod.sameerasw.zen_no_shadow") {
box-shadow: none !important; 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 */ /* Animations */
/* Tab switch animation */ /* Tab switch animation */
#tabbrowser-tabpanels #tabbrowser-tabpanels
> hbox:not([zen-split="true"]):not(:has(.zen-glance-background)) { > 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), 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; filter 0.45s ease-in-out, opacity 0.35s ease-in-out !important;
scale: 0.9 !important; scale: 0.9 !important;
@ -53,22 +43,22 @@ hbox.browserSidebarContainer,
} }
} }
#tabbrowser-tabpanels > hbox.deck-selected:not([zen-split="true"]) { #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; scale: 1 !important;
opacity: 1 !important; opacity: 1 !important;
} }
} }
/* website view animations */ /* website switch animations */
#browser:not(:has(.zen-glance-background)) #tabbrowser-tabpanels { #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; 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 { #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; pointer-events: none;
scale: 1.1 !important; scale: 1.1 !important;
filter: blur(10px) brightness(70%) !important; filter: blur(10px) brightness(70%) !important;
@ -76,14 +66,14 @@ hbox.browserSidebarContainer,
} }
#urlbar[open][zen-floating-urlbar="true"] #urlbar-background { #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; border-radius: 1em !important;
} }
} }
/* trackpad gestures*/ /* trackpad gestures*/
tabpanels .browserStack browser { 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; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.1) 0.1s !important;
border-radius: 0.75em !important; border-radius: 0.75em !important;
} }
@ -94,7 +84,7 @@ tabpanels .browserStack browser {
#historySwipeAnimationPreviousArrow:not([style="translate: none;"]) #historySwipeAnimationPreviousArrow:not([style="translate: none;"])
) )
browser { browser {
@media (-moz-bool-pref: "mod.sameerasw.zen_trackpad_anim") { @media -moz-pref( "mod.sameerasw.zen_trackpad_anim") {
scale: 0.95 !important; scale: 0.95 !important;
transform: translateX(3%) !important; transform: translateX(3%) !important;
border-radius: 2em !important; border-radius: 2em !important;
@ -106,9 +96,36 @@ tabpanels .browserStack browser {
#historySwipeAnimationNextArrow:not([style="translate: none;"]) #historySwipeAnimationNextArrow:not([style="translate: none;"])
) )
browser { browser {
@media (-moz-bool-pref: "mod.sameerasw.zen_trackpad_anim") { @media -moz-pref( "mod.sameerasw.zen_trackpad_anim") {
scale: 0.95 !important; scale: 0.95 !important;
transform: translateX(-3%) !important; transform: translateX(-3%) !important;
border-radius: 2em !important; border-radius: 2em !important;
} }
} }
/* no tab image */
#browser:has([zen-has-empty-tab=""]) .deck-selected .browserStack {
@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")
) !important;
background-position: center !important;
background-repeat: no-repeat !important;
background-size: var(--mod-sameerasw-zen_notab_img_size, 150px) !important;
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-pref( "mod.sameerasw.zen_notab_img_invert") {
@media (prefers-color-scheme: light) {
filter: saturate(0) invert(1) !important;
}
}
}
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 86 KiB

Before After
Before After

View file

@ -1,72 +1,106 @@
[ [
{ {
"property": "browser.tabs.allow_transparent_browser", "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", "type": "checkbox",
"defaultvalue": true "defaultValue": true
}, },
{ {
"property": "zen.widget.linux.transparency", "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", "type": "checkbox",
"defaultvalue": true, "defaultValue": true,
"disabledOn": [ "disabledOn": [
"windows", "windows",
"macos" "macos"
] ]
}, },
{ {
"property": "mod.sameerasw.zen_bg_color_enabled", "property": "mod.sameerasw.zen_bg_color_enabled",
"label": "Enable custom background color for Zen", "label": "🎨 Enable custom background color for Zen",
"type": "checkbox", "type": "checkbox",
"defaultvalue": false "defaultValue": false
}, },
{ {
"property": "mod.sameerasw.zen_transparency_color", "property": "mod.sameerasw.zen_transparency_color",
"label": "Set background color for Zen (Overrides default theme colors)", "label": "🎨 Set custom background color (Overrides theme)",
"type": "string", "type": "string",
"defaultvalue": "#00000000" "defaultValue": "#00000000",
}, "placeholder": "light-dark(#fff, #222) or RGBA or hex"
{ },
"property": "mod.sameerasw.zen_light_tint_flip", {
"label": "Flip light tint for Zen after 1.8b to dark", "property": "mod.sameerasw.zen_light_tint_flip",
"type": "checkbox", "label": "🌙 Flip the light website tint to dark",
"defaultvalue": false "type": "checkbox",
}, "defaultValue": false
{ },
"property": "mod.sameerasw.zen_light_tint_disabled", {
"label": "Disable light tint for Zen after 1.8b", "property": "mod.sameerasw.zen_light_tint_disabled",
"type": "checkbox", "label": "🌙 Disable the light website tint",
"defaultvalue": true "type": "checkbox",
}, "defaultValue": true
{ },
"property": "mod.sameerasw.zen_empty_page_transparency", {
"label": "Make the empty page transparent after Zen 1.9b", "property": "mod.sameerasw.zen_no_shadow",
"type": "checkbox", "label": "🌑 Remove the shadow around the web page",
"defaultvalue": true "type": "checkbox",
}, "defaultValue": false
{ },
"property": "mod.sameerasw.zen_no_shadow", {
"label": "Remove the shadow around the web page", "property": "mod.sameerasw.zen_tab_switch_anim",
"type": "checkbox", "label": "✨ Tab switch animation",
"defaultvalue": false "type": "checkbox",
}, "defaultValue": true
{ },
"property": "mod.sameerasw.zen_tab_switch_anim", {
"label": "Enable tab switch animation", "property": "mod.sameerasw.zen_urlbar_zoom_anim",
"type": "checkbox", "label": "✨ URL bar zoom animation",
"defaultvalue": false "type": "checkbox",
}, "defaultValue": false
{ },
"property": "mod.sameerasw.zen_urlbar_zoom_anim", {
"label": "Enable URL bar zoom animation", "property": "mod.sameerasw.zen_trackpad_anim",
"type": "checkbox", "label": "✨ Trackpad swipe animations",
"defaultvalue": false "type": "checkbox",
}, "defaultValue": false
{ },
"property": "mod.sameerasw.zen_trackpad_anim", {
"label": "Enable trackpad animation", "property": "mod.sameerasw.zen_notab_img_enabled",
"type": "checkbox", "label": "🖼️ Add no tab screen background image",
"defaultvalue": false "type": "checkbox",
} "defaultValue": false
] },
{
"property": "mod.sameerasw.zen_notab_img",
"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('example.com/1.png')"
},
{
"property": "mod.sameerasw.zen_notab_img_size",
"label": "🖼️ No tab screen image size with unit",
"type": "string",
"defaultValue": "150px",
"placeholder": "50px (px, em, % ...)"
},
{
"property": "mod.sameerasw.zen_notab_img_opacity",
"label": "🖼️ No tab screen 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",
"type": "checkbox",
"defaultValue": false
},
{
"property": "mod.sameerasw.zen_notab_img_invert",
"label": "🖼️ Invert above image in light theme (white → black)",
"type": "checkbox",
"defaultValue": false
}
]

View file

@ -1,15 +1,15 @@
{ {
"id": "642854b5-88b4-4c40-b256-e035532109df", "id": "642854b5-88b4-4c40-b256-e035532109df",
"name": "Transparent Zen", "name": "Transparent Zen",
"description": "Make the Zen Browser's background transparent and modify the empty tab page and have animations that goes along with the transparency. Turn off transparency in mod settings before uninstallation.", "description": "Make the Zen Browser's tab background transparent, get smooth animations and more. Enable features in mod settings and visit the homepage below to learn more about the features. \ud83d\udc47",
"homepage": "https://github.com/sameerasw/zen-themes/tree/main/TransparentZen", "homepage": "https://github.com/sameerasw/zen-themes/tree/main/TransparentZen",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css", "style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/642854b5-88b4-4c40-b256-e035532109df/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/642854b5-88b4-4c40-b256-e035532109df/readme.md", "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/642854b5-88b4-4c40-b256-e035532109df/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/642854b5-88b4-4c40-b256-e035532109df/image.png", "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/642854b5-88b4-4c40-b256-e035532109df/image.png",
"author": "sameerasw", "author": "sameerasw",
"version": "1.11.2b", "version": "1.12.0",
"tags": [], "tags": [],
"createdAt": "2025-02-04", "createdAt": "2025-02-04",
"updatedAt": "2025-04-17", "updatedAt": "2025-05-11",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/642854b5-88b4-4c40-b256-e035532109df/preferences.json" "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/642854b5-88b4-4c40-b256-e035532109df/preferences.json"
} }

View file

@ -3,6 +3,20 @@
--mod-browser-ease-swipe: var(--user-browser-ease-swipe, 0.3, 1.2, 0.5, 1); --mod-browser-ease-swipe: var(--user-browser-ease-swipe, 0.3, 1.2, 0.5, 1);
--mod-browser-ease-reset: var(--user-browser-ease-reset, 0.2, 1.4, 0.3, 1); --mod-browser-ease-reset: var(--user-browser-ease-reset, 0.2, 1.4, 0.3, 1);
--mod-browser-radius-default: var(--user-tab-radius, 8px); --mod-browser-radius-default: var(--user-tab-radius, 8px);
--mod-browser-translate-x: var(--user-tab-movement, 2%);
}
@media (-moz-bool-pref: "tab-shadow-enabled") {
.browserStack browser {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.75);
}
}
@media (-moz-bool-pref: "border-shadow-disabled") {
hbox.browserSidebarContainer,
#zen-tabbox-wrapper {
box-shadow: none !important;
}
} }
.browserStack browser { .browserStack browser {
@ -18,9 +32,9 @@
} }
.browserStack:has(#historySwipeAnimationPreviousArrow:not([style="translate: none;"])) browser { .browserStack:has(#historySwipeAnimationPreviousArrow:not([style="translate: none;"])) browser {
transform: translateX(3%) !important; transform: translateX(calc(var(--mod-browser-translate-x) * 1)) !important;
} }
.browserStack:has(#historySwipeAnimationNextArrow:not([style="translate: none;"])) browser { .browserStack:has(#historySwipeAnimationNextArrow:not([style="translate: none;"])) browser {
transform: translateX(-3%) !important; transform: translateX(calc(var(--mod-browser-translate-x) * -1)) !important;
} }

View file

@ -1,31 +1,49 @@
[ [
{ {
"property": "user-browser-scale", "property": "user-browser-scale",
"label": "Swipe scale (e.g. 0.98 for 2%)", "label": "Swipe scale (e.g. 0.98 for 2%)",
"type": "string", "type": "string",
"defaultValue": "0.98", "defaultValue": "0.98",
"placeholder": "0.971.00" "placeholder": "0.97\u20131.00"
}, },
{ {
"property": "user-browser-ease-swipe", "property": "user-browser-ease-swipe",
"label": "Swipe easing curve (4 numbers)", "label": "Swipe easing curve (4 numbers)",
"type": "string", "type": "string",
"defaultValue": "0.3, 1.2, 0.5, 1", "defaultValue": "0.3, 1.2, 0.5, 1",
"placeholder": "e.g. 0.25, 0.1, 0.25, 1" "placeholder": "e.g. 0.25, 0.1, 0.25, 1"
}, },
{ {
"property": "user-browser-ease-reset", "property": "user-browser-ease-reset",
"label": "Reset easing curve (4 numbers)", "label": "Reset easing curve (4 numbers)",
"type": "string", "type": "string",
"defaultValue": "0.2, 1.4, 0.3, 1", "defaultValue": "0.2, 1.4, 0.3, 1",
"placeholder": "e.g. 0.2, 0.8, 0.2, 1" "placeholder": "e.g. 0.2, 0.8, 0.2, 1"
}, },
{ {
"property": "user-tab-radius", "property": "user-tab-radius",
"label": "Tab border radius (e.g. 8px)", "label": "Tab border radius (e.g. 8px)",
"type": "string",
"defaultValue": "8px",
"placeholder": "e.g. 10px"
},
{
"property": "user-tab-movement",
"label": "Tab movement amount (e.g. 2%)",
"type": "string", "type": "string",
"defaultValue": "8px", "defaultValue": "2%",
"placeholder": "e.g. 10px" "placeholder": "e.g. 2%"
},
{
"property": "tab-shadow-enabled",
"label": "Enable Tab Shadows(enables shadow aroung the moving page)",
"type": "checkbox",
"defaultValue": true
},
{
"property": "border-shadow-disabled",
"label": "Disable Border Shadows(DIsables shadow around the web page)",
"type": "checkbox",
"defaultValue": true
} }
] ]

View file

@ -1,2 +1,4 @@
made it for an extra animation when using a trackpad. made it for an extra animation when using a trackpad.
if you need help make a issue on my github or contact me on r/zen_browser(u/Fury7425) or on zens discord server fury_7425

View file

@ -8,8 +8,8 @@
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/8039de3b-72e1-41ea-83b3-5077cf0f98d1/image.png", "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/8039de3b-72e1-41ea-83b3-5077cf0f98d1/image.png",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/8039de3b-72e1-41ea-83b3-5077cf0f98d1/preferences.json", "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/8039de3b-72e1-41ea-83b3-5077cf0f98d1/preferences.json",
"author": "Fury7425", "author": "Fury7425",
"version": "1.2.0", "version": "1.2.1",
"tags": [], "tags": [],
"createdAt": "2025-04-08", "createdAt": "2025-04-08",
"updatedAt": "2025-04-27" "updatedAt": "2025-05-13"
} }

View file

@ -1,14 +1,21 @@
.zen-essentials-container {
#zen-essentials-container > tab > stack:nth-child(1) > hbox:nth-child(2) > stack:nth-child(2) > img:nth-child(3) { grid-template-columns: repeat(auto-fit, minmax(80px, auto)) !important;
height: 32px !important;
width: 32px !important;
} }
#zen-essentials-container > tab > stack:nth-child(1) > hbox:nth-child(2) > stack:nth-child(2) { .zen-essentials-container
padding: 16px !important; > tab
} > stack:nth-child(1)
> hbox:nth-child(2)
> stack:nth-child(2) {
padding: 16px !important;
}
#zen-essentials-container { .zen-essentials-container
gap: 8px 8px !important; > tab
grid-template-columns: repeat(auto-fit, minmax(80px, auto)) !important; > stack:nth-child(1)
} > hbox:nth-child(2)
> stack:nth-child(2)
> img:nth-child(3) {
height: 32px !important;
width: 32px !important;
}

View file

@ -7,8 +7,8 @@
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/9bbaab67-a2c8-4d79-837f-90cd72a8932a/readme.md", "readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/9bbaab67-a2c8-4d79-837f-90cd72a8932a/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/9bbaab67-a2c8-4d79-837f-90cd72a8932a/image.png", "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/9bbaab67-a2c8-4d79-837f-90cd72a8932a/image.png",
"author": "leaferiksen", "author": "leaferiksen",
"version": "1.0.0", "version": "1.0.1",
"tags": [], "tags": [],
"createdAt": "2025-03-11", "createdAt": "2025-03-11",
"updatedAt": "2025-03-11" "updatedAt": "2025-05-10"
} }

View file

@ -1,95 +1,105 @@
:root {
--better-findbar-transform-translateY: 150px;
--better-findbar-transform-translateX: -50%;
--better-findbar-position-top: auto;
--better-findbar-position-bottom: 15px;
--better-findbar-position-left: 50%;
--better-findbar-position-right: auto;
}
.browserContainer {
overflow: clip
}
findbar { findbar {
display: flex !important; display: flex !important;
border-radius: var(--zen-border-radius) !important; border-radius: var(--zen-border-radius) !important;
margin: 0px !important; margin: 0px !important;
width: 90% !important; width: 90% !important;
max-width: 800px; max-width: 800px;
height: auto !important; height: auto !important;
position: absolute !important; position: absolute !important;
top: 15px; top: var(--better-findbar-position-top);
left: 50%; bottom: var(--better-findbar-position-bottom);
transform: translateX(-50%); left: var(--better-findbar-position-left);
right: var(--better-findbar-position-right);
transform: translateX(var(--better-findbar-transform-translateX)) translateY(0);
overflow: unset !important; overflow: unset !important;
box-shadow: var(--box-shadow-10); box-shadow: var(--box-shadow-10);
background: var(--zen-colors-tertiary) !important; background: var(--zen-colors-tertiary) !important;
border: 1px solid var(--zen-colors-border) !important; border: 1px solid var(--zen-colors-border) !important;
transition: transition: transform 0.35s ease !important;
top 0.35s ease,
bottom 0.35s ease !important;
visibility: visible !important; visibility: visible !important;
opacity: 1 !important; opacity: 1 !important;
& .findbar-container { & .findbar-container {
flex-wrap: wrap; flex-wrap: wrap;
overflow-x: auto !important; overflow-x: auto !important;
height: auto !important; height: auto !important;
row-gap: 10px; row-gap: 10px;
& > :first-child { & > :first-child {
width: 100% !important; width: 100% !important;
} }
& .findbar-textbox { & .findbar-textbox {
flex-grow: 1; flex-grow: 1;
} }
} }
&[hidden="true"] { &[hidden="true"] {
top: -150px; transform: translateX(var(--better-findbar-transform-translateX)) translateY(var(--better-findbar-transform-translateY));
} }
@starting-style { @starting-style {
top: -150px; transform: translateX(var(--better-findbar-transform-translateX)) translateY(var(--better-findbar-transform-translateY));
} }
} }
/* Horizontal Position */ /* Horizontal Position */
body:has( body:has(
#theme-Better-Find-Bar[theme-better_find_bar-horizontal_position="left"] #theme-Better-Find-Bar[theme-better_find_bar-horizontal_position="left"]
) { ) {
findbar { --better-findbar-transform-translateX: 0%;
left: 15px; --better-findbar-position-left: 15px;
transform: translateX(0%); --better-findbar-position-right: auto;
}
} }
body:has( body:has(
#theme-Better-Find-Bar[theme-better_find_bar-horizontal_position="right"] #theme-Better-Find-Bar[theme-better_find_bar-horizontal_position="right"]
) { ) {
findbar { --better-findbar-transform-translateX: 0%;
left: unset !important; --better-findbar-position-left: auto;
right: 15px; --better-findbar-position-right: 15px;
transform: translateX(0%);
}
} }
body:has(
#theme-Better-Find-Bar[theme-better_find_bar-vertical_position="top"]
) {
--better-findbar-transform-translateY: -150px;
--better-findbar-position-bottom: auto;
--better-findbar-position-top: 15px;
}
/* Background blur */ /* Background blur */
@media (-moz-bool-pref: "theme.better_find_bar.transparent_background") { @media (-moz-bool-pref: "theme.better_find_bar.transparent_background") {
findbar, findbar, findbar .findbar-textbox:not([status="notfound"]) {
findbar .findbar-textbox:not([status="notfound"]) { backdrop-filter: blur(8px);
backdrop-filter: blur(15px);
background: color-mix( background: color-mix(in hsl, var(--zen-colors-tertiary), transparent 30%) !important;
in hsl, }
var(--zen-colors-tertiary),
transparent 30%
) !important;
}
findbar .findbar-textbox:not([status="notfound"]) { findbar .findbar-textbox:not([status="notfound"]) {
background: color-mix( background: color-mix(in hsl, var(--zen-colors-tertiary), transparent 10%) !important;
in hsl, }
var(--zen-colors-tertiary), }
transparent 10%
) !important;
}
}

View file

@ -9,6 +9,8 @@
"label": "Horizontal position", "label": "Horizontal position",
"type": "dropdown", "type": "dropdown",
"disabledOn": [], "disabledOn": [],
"placeholder": "Select horizontal position",
"defaultValue": "default",
"options": [ "options": [
{ {
"label": "Left", "label": "Left",
@ -23,5 +25,23 @@
"value": "right" "value": "right"
} }
] ]
},
{
"property": "theme.better_find_bar.vertical_position",
"label": "Vertical position",
"type": "dropdown",
"disabledOn": [],
"placeholder": "Select vertical position",
"defaultValue": "default",
"options": [
{
"label": "Top",
"value": "top"
},
{
"label": "Bottom",
"value": "default"
}
]
} }
] ]

View file

@ -1,3 +1,3 @@
# Better Find Bar # Better Find Bar
Improves the find bar by matching the browser theme, making it floating, more responsive, and moving it to the top of the page. Improves the find bar by matching the browser theme, making it floating and more responsive.

View file

@ -8,8 +8,8 @@
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/a6335949-4465-4b71-926c-4a52d34bc9c0/image.png", "image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/a6335949-4465-4b71-926c-4a52d34bc9c0/image.png",
"author": "RobotoSkunk", "author": "RobotoSkunk",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/a6335949-4465-4b71-926c-4a52d34bc9c0/preferences.json", "preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/a6335949-4465-4b71-926c-4a52d34bc9c0/preferences.json",
"version": "1.1.2", "version": "1.2.0",
"tags": [], "tags": [],
"createdAt": "2024-11-24", "createdAt": "2024-11-24",
"updatedAt": "2025-01-31" "updatedAt": "2025-05-10"
} }

View file

@ -314,4 +314,4 @@
"disabledOn": [], "disabledOn": [],
"defaultValue": "1" "defaultValue": "1"
} }
] ]

View file

@ -1,54 +1,55 @@
@media (-moz-bool-pref: "zen.view.use-single-toolbar") { @media (-moz-bool-pref: "zen.view.use-single-toolbar") {
#zen-appcontent-wrapper { .browserSidebarContainer.deck-selected::before {
position: relative !important; content: "" !important;
background-color: transparent !important; position: absolute !important;
} top: 0px !important;
left: 0px !important;
#zen-appcontent-wrapper::before { height: 4px !important; /* Height of the top background */
content: "" !important; max-width: 100% !important;
position: absolute !important; width: var(--bar-pcent) !important; /* Ensure full width or customizable width */
top: 2px !important; background-color: var(--bar-colour) !important; /* Solid color for the bar */
left: 6px !important; border-radius: 0 2px 2px 0; /* Adjust this value to control the roundness of the ends */
height: 4px !important; z-index: 1 !important;
max-width: calc(100% - 16px) !important; transition: width 0.5s ease-in-out, background 0.2s ease !important; /* Apply smooth transition on width and background */
width: var(--bar-pcent) !important; } /* Current tab loading progress and muted status */
background-color: var(--bar-colour) !important;
border-radius: 4px;
pointer-events: none !important; .browserSidebarContainer.deck-selected:has([zen-glance-selected])::before,
transition: .browserSidebarContainer.deck-selected.zen-glance-overlay::before {
background-color 0.2s ease-in-out, max-width: calc(85%) !important;
width 0.5s ease-in-out !important; left: calc(15%/2) !important;
} border-radius: 6px !important;
#main-window {
&:has(.tabbrowser-tab[selected][busy]) {
--bar-colour: white;
--bar-pcent: 10%;
} }
&:has(.tabbrowser-tab[selected][busy][pendingicon]) { .browserSidebarContainer.deck-selected.zen-glance-background::before {
--bar-colour: white; background: transparent !important;
--bar-pcent: 50%; height: 0px !important;
} }
&:has(.tabbrowser-tab[selected][busy][pendingicon][progress]) { :root {
--bar-colour: white; &:has(.tabbrowser-tab[selected][busy]) {
--bar-pcent: 80%; --bar-colour: var(--zen-primary-color);
} --bar-pcent: 15%;
}
&:has(.tabbrowser-tab[selected][busy][progress]) { &:has(.tabbrowser-tab[selected][busy][pendingicon]) {
--bar-colour: white; --bar-colour: var(--zen-primary-color);
--bar-pcent: 100%; --bar-pcent: 45%;
} }
&:has(.tabbrowser-tab[selected][busy][pendingicon][progress]) {
&:has(.tabbrowser-tab[selected][muted]:not([busy])) { --bar-colour: var(--zen-primary-color);
--bar-colour: orangered; --bar-pcent: 85%;
--bar-pcent: 100%; }
} &:has(.tabbrowser-tab[selected][busy][progress]) {
--bar-colour: var(--zen-primary-color);
&:has(.tabbrowser-tab[selected]:not([muted]):not([busy])) { --bar-pcent: 95%;
--bar-colour: transparent; }
--bar-pcent: 0%; &:has(.tabbrowser-tab[selected][muted]:not([busy])) {
--bar-colour: orangered;
--bar-pcent: 100%;
.browserSidebarContainer.deck-selected::before {
border-radius: 0;
}
}
} }
} }
}

View file

@ -10,5 +10,5 @@
"version": "1.0.0", "version": "1.0.0",
"tags": [], "tags": [],
"createdAt": "2024-12-21", "createdAt": "2024-12-21",
"updatedAt": "2025-01-26" "updatedAt": "2025-05-10"
} }

View file

@ -0,0 +1,53 @@
#zen-toast-container {
top: calc(var(--zen-element-separation) * 6) !important;
:root:not([zen-right-side='true']) & {
right: calc(var(--zen-element-separation) * 2) !important;
}
:root[zen-right-side='true'] & {
left: calc(var(--zen-element-separation) * 2) !important;
}
& .zen-toast {
padding: 6px !important;
border-radius: 12px !important;
font-weight: 600 !important;
font-size: 12px !important;
box-shadow: 0px !important ;
& .description {
font-size: 10px !important;
}
&:has(#mod-zentoast[mod-zentoast-background_opacity="0.1"]) { background: rgba(255, 255, 255, 0.1) !important; }
&:has(#mod-zentoast[mod-zentoast-background_opacity="0.2"]) { background: rgba(255, 255, 255, 0.2) !important; }
&:has(#mod-zentoast[mod-zentoast-background_opacity="0.3"]) { background: rgba(255, 255, 255, 0.3) !important; }
&:has(#mod-zentoast[mod-zentoast-background_opacity="0.4"]) { background: rgba(255, 255, 255, 0.4) !important; }
&:has(#mod-zentoast[mod-zentoast-background_opacity="0.5"]) { background: rgba(255, 255, 255, 0.5) !important; }
&:has(#mod-zentoast[mod-zentoast-background_opacity="0.6"]) { background: rgba(255, 255, 255, 0.6) !important; }
&:has(#mod-zentoast[mod-zentoast-border_opacity="0.1"]) { border: 1px solid rgba(0, 0, 0, 0.1) !important; }
&:has(#mod-zentoast[mod-zentoast-border_opacity="0.2"]) { border: 1px solid rgba(0, 0, 0, 0.2) !important; }
&:has(#mod-zentoast[mod-zentoast-border_opacity="0.3"]) { border: 1px solid rgba(0, 0, 0, 0.3) !important; }
&:has(#mod-zentoast[mod-zentoast-border_opacity="0.4"]) { border: 1px solid rgba(0, 0, 0, 0.4) !important; }
&:has(#mod-zentoast[mod-zentoast-border_opacity="0.5"]) { border: 1px solid rgba(0, 0, 0, 0.5) !important; }
&:has(#mod-zentoast[mod-zentoast-border_opacity="0.6"]) { border: 1px solid rgba(0, 0, 0, 0.6) !important; }
&:has(#mod-zentoast[mod-zentoast-text_opacity="0.1"]) { color: rgba(0, 0, 0, 0.1) !important; }
&:has(#mod-zentoast[mod-zentoast-text_opacity="0.2"]) { color: rgba(0, 0, 0, 0.2) !important; }
&:has(#mod-zentoast[mod-zentoast-text_opacity="0.3"]) { color: rgba(0, 0, 0, 0.3) !important; }
&:has(#mod-zentoast[mod-zentoast-text_opacity="0.4"]) { color: rgba(0, 0, 0, 0.4) !important; }
&:has(#mod-zentoast[mod-zentoast-text_opacity="0.5"]) { color: rgba(0, 0, 0, 0.5) !important; }
&:has(#mod-zentoast[mod-zentoast-text_opacity="0.6"]) { color: rgba(0, 0, 0, 0.6) !important; }
&:hover {
background: var(--zen-primary-color) !important;
color: var(--button-primary-color) !important;
border: 1px solid rgba(0, 0, 0, 0.0) !important;
transition: 0.3s !important;
}
}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

View file

@ -0,0 +1,101 @@
[
{
"property": "mod.zentoast.background_opacity",
"label": "Background opacity",
"type": "dropdown",
"placeholder": "Select background opacity",
"defaultValue": "0.3",
"options": [
{
"label": "10%",
"value": "0.1"
},
{
"label": "20%",
"value": "0.2"
},
{
"label": "30%",
"value": "0.3"
},
{
"label": "40%",
"value": "0.4"
},
{
"label": "50%",
"value": "0.5"
},
{
"label": "60%",
"value": "0.6"
}
]
},
{
"property": "mod.zentoast.border_opacity",
"label": "Border opacity",
"type": "dropdown",
"placeholder": "Select border opacity",
"defaultValue": "0.3",
"options": [
{
"label": "10%",
"value": "0.1"
},
{
"label": "20%",
"value": "0.2"
},
{
"label": "30%",
"value": "0.3"
},
{
"label": "40%",
"value": "0.4"
},
{
"label": "50%",
"value": "0.5"
},
{
"label": "60%",
"value": "0.6"
}
]
},
{
"property": "mod.zentoast.text_opacity",
"label": "Text opacity",
"type": "dropdown",
"placeholder": "Select text opacity",
"defaultValue": "0.3",
"options": [
{
"label": "10%",
"value": "0.1"
},
{
"label": "20%",
"value": "0.2"
},
{
"label": "30%",
"value": "0.3"
},
{
"label": "40%",
"value": "0.4"
},
{
"label": "50%",
"value": "0.5"
},
{
"label": "60%",
"value": "0.6"
}
]
}
]

View file

@ -0,0 +1,2 @@
Makes the 'New background tab opened!' toast popup notification less distracting and adds hover

View file

@ -0,0 +1,15 @@
{
"id": "e51b85e6-cef5-45d4-9fff-6986637974e1",
"name": "smaller zen toast popup",
"description": "Makes the 'New background tab opened!' toast popup notification less distracting and adds hover",
"homepage": "https://github.com/lenzfliker/zen-mods/tree/main/%5BMOD%5D%20smaller%20zen%20toast%20popup",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/e51b85e6-cef5-45d4-9fff-6986637974e1/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/e51b85e6-cef5-45d4-9fff-6986637974e1/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/e51b85e6-cef5-45d4-9fff-6986637974e1/image.png",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/e51b85e6-cef5-45d4-9fff-6986637974e1/preferences.json",
"author": "lenzfliker",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-05-09",
"updatedAt": "2025-05-13"
}

View file

@ -0,0 +1,7 @@
:root:has(#theme-Custom-uiFont[theme-custom_uifont-default="Serif"]) {
* {font-family: serif !important;}
}
:root:has(#theme-Custom-uiFont[theme-custom_uifont-default="Custom"]) {
* {font-family: var(--theme-custom_uifont-custom) !important; text-shadow: var(--theme-custom_uifont-shadow) !important;}
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 188 KiB

View file

@ -0,0 +1,32 @@
[
{
"property": "theme.custom_uifont.default",
"label": "Select Font:",
"type": "dropdown",
"defaultValue": "Serif",
"options": [
{
"label": "Serif",
"value": "Serif"
},
{
"label": "Custom",
"value": "Custom"
}
]
},
{
"property": "theme.custom_uifont.custom",
"label": "font-family:",
"type": "string",
"placeholder": "sans-serif",
"defaultValue": "sans-serif"
},
{
"property": "theme.custom_uifont.shadow",
"label": "text-shadow:",
"type": "string",
"placeholder": "0.01em 0.01em 0.05em #7C7C7C70",
"defaultValue": "none"
}
]

View file

@ -0,0 +1,2 @@
Customize the interface font, the default is consistent with the serif font in the settings.

View file

@ -0,0 +1,15 @@
{
"id": "e74cb40a-f3b8-445a-9826-1b1b6e41b846",
"name": "Custom uiFont",
"description": "Customize the interface font, the default is consistent with the serif font in the settings.",
"homepage": "",
"style": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/e74cb40a-f3b8-445a-9826-1b1b6e41b846/chrome.css",
"readme": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/e74cb40a-f3b8-445a-9826-1b1b6e41b846/readme.md",
"image": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/e74cb40a-f3b8-445a-9826-1b1b6e41b846/image.png",
"author": "lindongbin",
"version": "1.0.0",
"tags": [],
"createdAt": "2025-05-03",
"updatedAt": "2025-05-03",
"preferences": "https://raw.githubusercontent.com/zen-browser/theme-store/main/themes/e74cb40a-f3b8-445a-9826-1b1b6e41b846/preferences.json"
}