[create-theme]: immersive-search

[LucHermkens]

Name

Immersive Search

Description

Transforms the look of the URL bar in your Zen Browser to have a dark and blurry background.

Homepage

https://github.com/LucHermkens/immersive-search

Image

https://raw.githubusercontent.com/LucHermkens/immersive-search/refs/heads/main/images/search_small.png

Type

• JSON Color Theme

Theme Styles

#urlbar[open][zen-floating-urlbar="true"] {
    top: 50% !important;
    transform: translateX(calc(var(--zen-sidebar-width, 273px) / 2)) translateY(-50%) !important;
}

.browserContainer {
    will-change: filter;
    transition: filter 0.2s ease-out;
}

#zen-appcontent-wrapper:has(#urlbar[zen-floating-urlbar="true"]) .browserContainer {
    filter: blur(5px);
}

#tabbrowser-tabbox::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    user-select: none;
    pointer-events: none;
    border-radius: var(--zen-native-inner-radius);

    will-change: background-color;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.2s ease-out;
}

#zen-appcontent-wrapper:has(#urlbar[zen-floating-urlbar="true"]) #tabbrowser-tabbox::before {
    background-color: rgba(0, 0, 0, 0.5);
}

Readme

# Immersive Search

Transforms the look of the URL bar in your Zen Browser to have a dark and blurry background.

![Immersive Search](images/search.png)

Preferences

[github-actions]

Thank you for your contribution! 🎉

Your theme has been successfully submitted. The maintainers will review it and get back to you soon.

Here are some details about your submission:

• Your theme has been requested into this PR.
• It has been created into the create-theme-1054 branch.

If you have any questions or need help, feel free to ask in the comments below or in the PR.