[create-theme]: Better URL Bar

[Anoms12]

Name

Better URL Bar

Description

Cleans up and centers Zen's URL bar giving it a more "Arc" feeling

Homepage

https://github.com/Anoms12/Better-URL-Bar/tree/main

Image

https://github.com/Anoms12/Better-URL-Bar/blob/main/Better-URL-Bar.png?raw=true

Type

• JSON Color Theme

Theme Styles

/* Center url text */
#urlbar not[breakout-extend] {
  #urlbar-input {
    font-size: 12.5px !important;
    color: white !important;
    text-align: center !important;
  }
}

/* Personal URL bar */
* {
  --urlbarView-item-block-padding: 4px !important;
  --urlbarView-item-inline-padding: 4px !important;
}

.search-one-offs {
  display: none !important;
}

#urlbar #urlbar-background {
  backdrop-filter: none;
  background: color-mix(in srgb, var(--zen-branding-) 45%, transparent);
  transition: backdrop-filter 0.3s ease, background 0.3s ease;
}

#urlbar[breakout-extend] {
  margin: 0 !important;
  min-width: 75vw !important;
  width: 75vw !important;
  top: 25% !important;
  left: 12.5vw !important;
  border-radius: 30px !important;
  #urlbar-input {
    margin-left: 2px !important;
    margin-right: 0 !important;
  }

  #identity-permission-box,
  #tracking-protection-icon-container,
  #page-action-buttons {
    display: none !important;
  }

  #identity-icon-box {
    margin-left: 1px !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
    border-radius: var(--urlbar-icon-border-radius) !important;
  }

  .verifiedDomain {
    image {
      list-style-image: url("chrome://browser/skin/zen-icons/link.svg") !important;
      scale: 1;
    }
  }

  #identity-box:is([pageproxystate="invalid"]).verifiedDomain {
    image {
      list-style-image: url("chrome://global/skin/icons/search-glass.svg") !important;
      scale: 1;
    }
  }

  #urlbar-input {
    font-size: 18px !important;
  }

  #urlbar-background {
    backdrop-filter: blur(2.5px);
    background: light-dark(
      rgba(255, 255, 255, 0.9),
      rgba(00, 00, 00, 0.9)
    ) !important; /* bg color */
    border-radius: 17px !important;
  }
}

.urlbarView-row {
  background: transparent !important;
  transition: transform 0.2s ease;
  padding: 5px 0px 5px 0px !important;

  .urlbarView-row-inner {
    border-radius: 8px !important;
    transition: background 0.2s ease;
  }

  /* Hide the Icon in the switch tab prompt */
  .urlbarView-userContext-icon {
    display: none !important;
  }

  .urlbarView-title,
  .urlbarView-url {
    font-weight: 400 !important;
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .urlbarView-title-separator {
    margin-top: auto !important;
    margin-bottom: auto !important;
  }

  .urlbarView-button {
    display: inline-block !important;
    min-width: 0 !important;
    min-height: 0 !important;
    width: 0 !important;
    height: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    opacity: 0;
    transition: width 0.2s ease, height 0.2s ease, opacity 0.2s ease,
      margin 0.2s ease, background-color 0.2s ease !important;
  }

  .urlbarView-favicon {
    transition: background-color 0.2s ease !important;
  }

  &:active {
    transform: scale(0.95, 0.95);
  }

  &:hover {
    .urlbarView-row-inner {
      background: var(--urlbarView-hover-background) !important;
    }
    .urlbarView-button {
      max-width: 24px !important;
      max-height: 24px !important;
      width: 24px !important;
      height: 24px !important;
      opacity: 1;
      margin-left: 2px !important;
      margin-right: 2px !important;
    }
  }

  .urlbarView-row-inner[selected] {
    background: var(--zen-colors-primary) !important;
  }
}

.urlbarView-row[has-action]:is(
    [type="switchtab"],
    [type="remotetab"],
    [type="clipboard"]
  )
  .urlbarView-action {
  margin-left: 8px !important;
}

.urlbarView-row-inner .urlbarView-url {
  color: light-dark(
    var(--zen-colors-primary),
    var(--zen-colors-primary-foreground)
  ) !important;
}

.urlbarView-row:hover .urlbarView-row-inner,
.urlbarView-row-inner[selected] {
  .urlbarView-no-wrap .urlbarView-favicon {
    background-color: color-mix(
      in srgb,
      light-dark(var(--zen-primary-color), var(--zen-colors-primary-foreground))
        50%,
      transparent
    ) !important;
  }

  .urlbarView-url {
    color: light-dark(
      var(--zen-colors-primary),
      var(--zen-colors-primary-foreground)
    ) !important;
  }
}

.urlbarView-action,
.urlbarView-button,
.searchbar-engine-one-off-item {
  transition: background-color 0.2s ease !important;
}

.urlbarView-url {
  color: var(--zen-colors-primary-foreground) !important;
}

@media (prefers-color-scheme: dark) {
  .urlbarView-body-inner,
  .search-one-offs {
    border-top: 1px solid
      light-dark(rgba(20, 20, 20, 0.2), rgba(235, 235, 235, 0.2)) !important;
  }
}

Readme

# Better-URL-Bar
Cleans up and centers Zen's URL bar giving it a more "Arc" feeling

Preferences

No response

[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-951 branch.

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