Skip to content

[create-theme]: Floating URLbar #39

@mr-cheffy

Description

@mr-cheffy

Name

Floating URLbar

Description

Levitate the URL bar when focusing on it, with a blurred background.

Homepage

https://github.com/zen-browser/theme-components

Image

https://i.imgur.com/zFq8ZyD.png

Theme Styles

#urlbar:is([breakout][breakout-extend], [breakout][usertyping][focused]) {
    #urlbar-input {
        font-size: 16px !important;
    }

    z-index: 2;
    position: fixed !important;
    bottom: auto !important;
    top: 20vh !important;
    padding-left: 6px !important;
    padding-right: 8px !important;

    left: 18vw !important;
    right: 18vw !important;
    width: 64vw !important;

    &:after {
        content: "";
        position: fixed;
        pointer-events: none;

        width: 100vw;
        height: 100vh;

        top: 0px;
        left: 0px;

        background-color: rgba(0, 0, 0, 0.3);
        backdrop-filter: blur(5px);

        z-index: -1;
    }

    #identity-box {
        margin: auto 0;
        height: 30px;
        margin-right: 10px;
    }

    .urlbar-go-button {
        margin: auto 0;
    }
}

Readme

# Floating URL bar

Originally implemented inside zen, now it has been moven into it's own theme for users to enjoy!

* For any issues, with this theme, please go to the [issues page](https://github.com/zen-browser/theme-components/issues)

Preferences

No response

Metadata

Metadata

Assignees

No one assigned

    Labels

    new-themeSubmit a theme to be added to the theme library

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions