[create-theme]: A maintained version of Cleaned URL Bar

[matteo-tafuro]

Name

Better Cleaned URL Bar

Description

Elegant and minimalistic glassmorphic URL bar with blur, transparency and customizable colors

Homepage

https://github.com/matteo-tafuro/zen-better-cleaned-url-bar

Image

https://imgur.com/a/jpqPw18

Type

• JSON Color Theme

Theme Styles

@-moz-document url-prefix("chrome:") {

  /* Firefox 150+ / Zen 1.19.9b+ broke backdrop-filter on child
     elements by removing the stacking context from #browser. Re-establishing
     a no-op backdrop-filter on a parent element restores the behaviour. */
  #browser {
    backdrop-filter: blur(0) !important;
  }

  /* Blurs the background */
  #urlbar[breakout-extend="true"] .urlbar-background {
    border-radius: 15px !important;
    border: solid 3px color-mix(in hsl, hsl(0 0 50), transparent 90%) !important;
  }

  #urlbar[breakout-extend="true"] .urlbar-background {
    backdrop-filter: blur(25px) !important;
  }

  @media (prefers-color-scheme: dark) {
    #urlbar[breakout-extend="true"] .urlbar-background {
      background-color: color-mix(in hsl,
          var(--mod-cleanedurlbar-customdarkcolor),
          transparent var(--mod-cleanedurlbar-customtransparency)) !important;
    }
  }

  @media (prefers-color-scheme: light) {
    #urlbar[breakout-extend="true"] .urlbar-background {
      background-color: color-mix(in hsl,
          var(--mod-cleanedurlbar-customlightcolor),
          transparent var(--mod-cleanedurlbar-customtransparency)) !important;
    }
  }

  /* Custom URL result selected color */
  .urlbarView-row {
    &[selected] {
      background-color: var(--mod-cleanedurlbar-customselectcolor) !important;
      color: var(--mod-cleanedurlbar-customselectfontcolor) !important;
    }
  }

  /* Unifies the border radius */
  .urlbarView-row {
    border-radius: 11px !important;
  }

  /* Deletes the border */
  .urlbarView-body-inner {
    border: none !important;
  }

  /* Styles the search options */
  .search-one-offs {
    border-top: none !important;
    border-radius: 10px !important;
    padding: 4px !important;
    margin: 0px 0px 7px 0px !important;
    backdrop-filter: brightness(130%);
  }

  .searchbar-engine-one-off-item {
    border-radius: 8px !important;
    margin-right: 3px !important;
  }

  #urlbar-anon-search-settings {
    margin-right: 0px !important;
  }
}

Readme

# Zen Cleaned URL Bar (Maintained Fork)

A maintained fork of [zen-cleaned-url-bar](https://github.com/dinnoyow/zen-cleaned-url-bar) by [@Dinno-DEV](https://github.com/dinnoyow), with bug fixes for recent Zen/Firefox versions.

## What's different

- **Fix transparent URL bar** — adds a no-op `backdrop-filter` on `#browser` to re-establish the stacking context removed upstream. Refs:
  - https://github.com/zen-browser/desktop/issues/13389
  - https://github.com/zen-browser/desktop/pull/13424
- **Fix class selector** — `#urlbar-background` was converted to a class in Zen 1.16; updated selector to `.urlbar-background`

## Customization

- URL panel color
- URL panel transparency
- Selected result color
- Selected result font color

Preferences

[
    {
        "property": "mod.cleanedurlbar.customdarkcolor",
        "label": "Cleaned URL Bar Color (HSL only) [Dark Mode]",
        "type": "string",
        "defaultValue": "hsl(0 0 10)"
    },
    {
        "property": "mod.cleanedurlbar.customlightcolor",
        "label": "Cleaned URL Bar Color (HSL only) [Light Mode]",
        "type": "string",
        "defaultValue": "hsl(0 0 90)"
    },
    {
        "property": "mod.cleanedurlbar.customtransparency",
        "label": "Transparency (In percentage ex. 100%)",
        "type": "string",
        "defaultValue": "40%"
    },
    {
        "property": "mod.cleanedurlbar.customselectcolor",
        "label": "Selected URL color (rgb, hsl, hex)",
        "type": "string",
        "defaultValue": "rgba(125, 125, 125, 0.65)"
    },
    {
        "property": "mod.cleanedurlbar.customselectfontcolor",
        "label": "Selected URL font color (rgb, hsl, hex)",
        "type": "string",
        "defaultValue": "rgba(255,255,255,1)"
    }
]

[github-actions]

Error creating theme

Sorry about that! There was an error creating the theme. Please try again or contact the maintainers for help.

Image must be a PNG.