[create-theme]: Loading bar inside URL bar

[AkariYui1]

Name

Loading bar inside URL bar

Description

This mod will add a loading bar inside the URL bar.

Homepage

No response

Image

https://imgur.com/a/QrDt2kg

Type

• [ ] JSON Color Theme

Theme Styles

:root {
  --zen-urlbar: rgb(117, 191, 255);
  --zen-urlbar-background: color-mix(in srgb, var(--zen-urlbar) 10%, transparent);
}

#main-window:not([customizing]):not([titlepreface*="‌"]):has(.tabbrowser-tab[selected][busy]) #urlbar:not([breakout-extend]) #urlbar-background {
  background: linear-gradient(to right,
      color-mix(in srgb, var(--zen-urlbar) 20%, transparent) 0 var(--tab-load-pcent),
      var(--zen-urlbar-background) var(--tab-load-pcent) 100%) !important;
  transition: background 0.5s ease !important;
}

/* tab loading progress bar */
&:has(.tabbrowser-tab[selected][busy]) #nav-bar::before {
  background: linear-gradient(to right,
      var(--zen-primary-color) 0 var(--tab-load-pcent),
      var(--zen-urlbar-background) var(--tab-load-pcent) 100%) !important;
}

/* tab loading progress on whole panel */
&:has(.tabbrowser-tab[selected][busy]) #nav-bar::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: -999;
  width: 100%;
  height: 100%;
  bottom: 0px;
  border-radius: var(--big-rounding);
  opacity: 0;
  background: linear-gradient(to right,
      var(--zen-primary-color) 0 var(--tab-load-pcent),
      transparent var(--tab-load-pcent) 100%);
}

/* current tab loading progress */
#main-window {
  &:has(.tabbrowser-tab[selected][busy]) {
    --tab-load-pcent: 20%;
  }

  &:has(.tabbrowser-tab[selected][busy][pendingicon]) {
    --tab-load-pcent: 50%;
  }

  &:has(.tabbrowser-tab[selected][busy][pendingicon][progress]) {
    --tab-load-pcent: 85%;
  }

  &:has(.tabbrowser-tab[selected][busy][progress]) {
    --tab-load-pcent: 95%;
  }
}

Readme

# Loading bar inside URL bar

This mod will add a loading bar inside the URL bar.

Preferences

No response

[github-actions[bot]]

Error creating theme

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

Name must be less than 25 characters.