Zen Browser customization

arc-logo.svg

<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="white" fill-opacity="context-fill-opacity">
	<title>menu-svg</title>
	<path d="m19.1 14.5q-0.1 0-0.1 0.1 0 0.1 0 0.2l0.9 1.8c0.6 1.2 0.2 2.7-1.1 3.3q-0.5 0.3-1.2 0.3-0.7 0-1.3-0.4-0.7-0.4-1-1.1l-0.7-1.5q-0.1 0-0.1-0.1-0.1 0-0.2 0-1.4 0.4-2.9 0.4-1.4 0-2.7-0.3-0.1 0-0.2 0 0 0-0.1 0.1l-0.7 1.5q-0.3 0.6-1 1-0.6 0.4-1.3 0.4-0.6 0-1.2-0.3c-0.6-0.3-1-0.8-1.2-1.4-0.2-0.6-0.2-1.3 0.1-1.9l0.8-1.7q0.1-0.1 0.1-0.2-0.1 0-0.1-0.1c-1-0.8-1.8-1.9-2.4-3.1-0.3-0.6-0.3-1.3 0-1.9 0.2-0.6 0.7-1.1 1.4-1.4q0.4-0.2 0.9-0.2 0.6 0 1 0.2 0.5 0.2 0.9 0.5 0.3 0.4 0.5 0.9 0 0 0.1 0 0 0.1 0.1 0.1 0 0 0.1-0.1 0 0 0.1 0l2.6-5.4c0.3-0.5 0.7-0.9 1.3-1.2 0.5-0.2 1.1-0.3 1.7-0.1q0.6 0.2 1 0.5 0.4 0.4 0.7 0.9l2.5 5.1q0 0.1 0.1 0.1 0 0.1 0.1 0.1 0.1 0 0.1-0.1 0.1 0 0.1 0 0.6-0.9 0.8-2c0.1-0.6 0.4-1.1 0.9-1.4 0.5-0.4 1-0.6 1.6-0.6q0.3 0 0.5 0 0.6 0.1 1 0.4 0.5 0.4 0.8 0.8c0.3 0.5 0.4 1.2 0.2 1.8-0.5 2.3-1.7 4.4-3.5 6zm-11.6 2.6q0-0.1 0-0.1 0-0.1 0-0.1 0-0.1 0-0.1-0.1 0-0.1 0-1-0.4-2-1-0.2-0.2-0.4-0.3-0.1 0-0.1-0.1-0.1 0-0.1 0-0.1 0.1-0.1 0.1 0 0-0.1 0.1l-0.7 1.4c-0.2 0.4-0.2 0.8-0.1 1.2 0.2 0.4 0.5 0.7 0.9 0.9q0.2 0.2 0.6 0.2 0.3 0 0.6-0.1 0.3-0.1 0.6-0.3 0.2-0.2 0.3-0.5zm6.4-0.7q0 0 0-0.1 0.1 0 0.1 0 0-0.1 0-0.1 0-0.1 0-0.1l-1.2-2.5q-0.1-0.1-0.1-0.1-0.1-0.1-0.2-0.1-0.5 0.1-1.1 0.1c-2.4 0-5.2-1.6-6-3.6q-0.1-0.3-0.3-0.5-0.3-0.2-0.6-0.4-0.3-0.1-0.6-0.1-0.3 0-0.6 0.1-0.3 0.1-0.6 0.4-0.2 0.2-0.3 0.5-0.2 0.3-0.2 0.6 0 0.3 0.2 0.6c1.3 3.1 5.3 5.6 9 5.6q1.3 0 2.5-0.3zm4.5 2.8c0.4-0.2 0.7-0.5 0.8-0.9 0.2-0.4 0.1-0.9-0.1-1.3l-6.1-12.4q-0.1-0.3-0.4-0.5-0.3-0.2-0.6-0.3-0.4-0.1-0.8 0-0.3 0-0.6 0.2-0.3 0.2-0.5 0.6l-3 6q0 0.1 0 0.1 0 0.1 0.1 0.2c0.7 0.6 1.5 1.1 2.5 1.4q0.1 0.1 0.1 0 0.1 0 0.2-0.1l1.3-2.8q0.1 0 0.1-0.1 0.1 0 0.2 0 0 0 0.1 0 0 0.1 0.1 0.1l4.4 9.1q0.2 0.2 0.4 0.4 0.2 0.3 0.6 0.4 0.3 0.1 0.6 0 0.3 0 0.6-0.1zm-7.5-6.7q0 0 0 0.1 0 0 0 0 0 0 0.1 0 0.2 0.1 0.4 0 0.4 0 0.7 0 0.1 0 0.1 0 0 0 0-0.1 0 0 0 0 0-0.1 0-0.1l-0.5-1.1q-0.1 0-0.1 0 0-0.1 0-0.1-0.1 0-0.1 0.1 0 0-0.1 0l-0.5 1.2q0 0 0 0zm7.5 1q0.1 0.1 0.1 0.1 0.1 0 0.1 0.1 0.1 0 0.1-0.1 0.1 0 0.1 0c1.5-1.4 2.5-3.2 3-5.2q0.1-0.3 0-0.7-0.1-0.4-0.3-0.6-0.3-0.3-0.6-0.5-0.3-0.2-0.7-0.2c-0.4 0-0.8 0.2-1 0.4-0.3 0.2-0.5 0.6-0.6 0.9-0.2 1.1-0.7 2.1-1.4 3q-0.1 0-0.1 0.1 0 0 0 0.1z"/>
		<path d="m19.1 14.5q-0.1 0-0.1 0.1 0 0.1 0 0.2l0.9 1.8c0.6 1.2 0.2 2.7-1.1 3.3q-0.5 0.3-1.2 0.3-0.7 0-1.3-0.4-0.7-0.4-1-1.1l-0.7-1.5q-0.1 0-0.1-0.1-0.1 0-0.2 0-1.4 0.4-2.9 0.4-1.4 0-2.7-0.3-0.1 0-0.2 0 0 0-0.1 0.1l-0.7 1.5q-0.3 0.6-1 1-0.6 0.4-1.3 0.4-0.6 0-1.2-0.3c-0.6-0.3-1-0.8-1.2-1.4-0.2-0.6-0.2-1.3 0.1-1.9l0.8-1.7q0.1-0.1 0.1-0.2-0.1 0-0.1-0.1c-1-0.8-1.8-1.9-2.4-3.1-0.3-0.6-0.3-1.3 0-1.9 0.2-0.6 0.7-1.1 1.4-1.4q0.4-0.2 0.9-0.2 0.6 0 1 0.2 0.5 0.2 0.9 0.5 0.3 0.4 0.5 0.9 0 0 0.1 0 0 0.1 0.1 0.1 0 0 0.1-0.1 0 0 0.1 0l2.6-5.4c0.3-0.5 0.7-0.9 1.3-1.2 0.5-0.2 1.1-0.3 1.7-0.1q0.6 0.2 1 0.5 0.4 0.4 0.7 0.9l2.5 5.1q0 0.1 0.1 0.1 0 0.1 0.1 0.1 0.1 0 0.1-0.1 0.1 0 0.1 0 0.6-0.9 0.8-2c0.1-0.6 0.4-1.1 0.9-1.4 0.5-0.4 1-0.6 1.6-0.6q0.3 0 0.5 0 0.6 0.1 1 0.4 0.5 0.4 0.8 0.8c0.3 0.5 0.4 1.2 0.2 1.8-0.5 2.3-1.7 4.4-3.5 6zm-11.6 2.6q0-0.1 0-0.1 0-0.1 0-0.1 0-0.1 0-0.1-0.1 0-0.1 0-1-0.4-2-1-0.2-0.2-0.4-0.3-0.1 0-0.1-0.1-0.1 0-0.1 0-0.1 0.1-0.1 0.1 0 0-0.1 0.1l-0.7 1.4c-0.2 0.4-0.2 0.8-0.1 1.2 0.2 0.4 0.5 0.7 0.9 0.9q0.2 0.2 0.6 0.2 0.3 0 0.6-0.1 0.3-0.1 0.6-0.3 0.2-0.2 0.3-0.5zm6.4-0.7q0 0 0-0.1 0.1 0 0.1 0 0-0.1 0-0.1 0-0.1 0-0.1l-1.2-2.5q-0.1-0.1-0.1-0.1-0.1-0.1-0.2-0.1-0.5 0.1-1.1 0.1c-2.4 0-5.2-1.6-6-3.6q-0.1-0.3-0.3-0.5-0.3-0.2-0.6-0.4-0.3-0.1-0.6-0.1-0.3 0-0.6 0.1-0.3 0.1-0.6 0.4-0.2 0.2-0.3 0.5-0.2 0.3-0.2 0.6 0 0.3 0.2 0.6c1.3 3.1 5.3 5.6 9 5.6q1.3 0 2.5-0.3zm4.5 2.8c0.4-0.2 0.7-0.5 0.8-0.9 0.2-0.4 0.1-0.9-0.1-1.3l-6.1-12.4q-0.1-0.3-0.4-0.5-0.3-0.2-0.6-0.3-0.4-0.1-0.8 0-0.3 0-0.6 0.2-0.3 0.2-0.5 0.6l-3 6q0 0.1 0 0.1 0 0.1 0.1 0.2c0.7 0.6 1.5 1.1 2.5 1.4q0.1 0.1 0.1 0 0.1 0 0.2-0.1l1.3-2.8q0.1 0 0.1-0.1 0.1 0 0.2 0 0 0 0.1 0 0 0.1 0.1 0.1l4.4 9.1q0.2 0.2 0.4 0.4 0.2 0.3 0.6 0.4 0.3 0.1 0.6 0 0.3 0 0.6-0.1zm-7.5-6.7q0 0 0 0.1 0 0 0 0 0 0 0.1 0 0.2 0.1 0.4 0 0.4 0 0.7 0 0.1 0 0.1 0 0 0 0-0.1 0 0 0 0 0-0.1 0-0.1l-0.5-1.1q-0.1 0-0.1 0 0-0.1 0-0.1-0.1 0-0.1 0.1 0 0-0.1 0l-0.5 1.2q0 0 0 0zm7.5 1q0.1 0.1 0.1 0.1 0.1 0 0.1 0.1 0.1 0 0.1-0.1 0.1 0 0.1 0c1.5-1.4 2.5-3.2 3-5.2q0.1-0.3 0-0.7-0.1-0.4-0.3-0.6-0.3-0.3-0.6-0.5-0.3-0.2-0.7-0.2c-0.4 0-0.8 0.2-1 0.4-0.3 0.2-0.5 0.6-0.6 0.9-0.2 1.1-0.7 2.1-1.4 3q-0.1 0-0.1 0.1 0 0 0 0.1z"/>
</svg>

userChrome.css

/*Set Font to Poppins*/
* {
  font-family: 'Poppins', sans-serif;
}

/* Integrated URL bar & webview */
@media not (-moz-bool-pref:"zen.view.compact") {
  #browser {
    &:has(#navigator-toolbox[zen-expanded="true"]) {
      &:not(:has(.zen-split-view-splitter)) {
        --urlbar-min-width: 28px !important;

        #nav-bar {
          --zen-toolbar-height: 36px;

          background-color: var(--lwt-accent-color) !important;
          /* URL Bar color changing rgba(0, 0, 0, 0.2) */
          border-radius: 10px 10px 0px 0px !important;
          padding-left: 6px !important;
          margin-right: 6px !important;
          margin-top: 6px !important;
          margin-left: 1px;
        }

        .browserContainer {
          border-radius: 0px 0px 10px 10px !important;

          &:not([urlbar-exceeds-toolbar-bounds]) {
            backdrop-filter: blur(10px) saturate(1.5);
          }
        }

        .browserSidebarContainer {
          background-color: rgba(0, 0, 0, 0.12) !important;
          /* Browser Container transparency */
        }
      }
    }
  }
}


/* Hide extensions puzzle button and extension buttons unless hovered */
#nav-bar:not(:has(*[open="true"])) {

  #unified-extensions-button,
  .unified-extensions-item {
    transition: opacity 0.25s !important;
  }

  &:not(:hover) {

    #unified-extensions-button,
    .unified-extensions-item {
      opacity: 0 !important;
    }
  }
}

#urlbar {
  border: 1px solid transparent;
  position: relative;
  overflow: hidden;
}

#nav-bar:has(#reload-button[displaystop="true"]) {
  #urlbar {
    &::before {
      content: '';
      position: absolute;
      inset: 0;
      z-index: -1;
      border: 1px solid rgba(255, 255, 255, 0.5);
      background: linear-gradient(90deg, #ff6b6b66, #4ecdc466, #ff6b6b66);
      background-size: 200% 100%;
      background-clip: border-box;
      animation: urlbar-loading-gradient 1s linear infinite;
    }
  }
}

@keyframes urlbar-loading-gradient {
  0% {
    background-position: 0% 0%;
  }

  100% {
    background-position: 200% 0%;
  }
}

.tabbrowser-tab:is([image], [pinned])>.tab-stack>.tab-content[attention]:not([selected]),
.tabbrowser-tab>.tab-stack>.tab-content[pinned][titlechanged]:not([selected]) {
  background-image: radial-gradient(circle, #ffffff78, #ffffff1c 2px, transparent 2px) !important;
}

/* Change the background color of the first pinned tab */
.tabbrowser-tab[pinned]:nth-of-type(1) .tab-background {
  background-color: rgba(255, 100, 100, 0.15) !important;
}

/* Change the background color of the second pinned tab */
.tabbrowser-tab[pinned]:nth-of-type(2) .tab-background {
  background-color: rgba(93, 155, 255, 0.15) !important;
}

/* Change the background color of the third pinned tab */
.tabbrowser-tab[pinned]:nth-of-type(3) .tab-background {
  background-color: rgba(255, 223, 186, 0.15) !important;
}

/* Change the background color of the fourth pinned tab */
.tabbrowser-tab[pinned]:nth-of-type(4) .tab-background {
  background-color: rgba(186, 255, 201, 0.15) !important;
}

/* Change the background color of the fifth pinned tab */
.tabbrowser-tab[pinned]:nth-of-type(5) .tab-background {
  background-color: rgba(186, 225, 255, 0.15) !important;
}

/* Change the background color of the sixth pinned tab */
.tabbrowser-tab[pinned]:nth-of-type(6) .tab-background {
  background-color: rgba(255, 186, 255, 0.15) !important;
}

/* Change the background color of the seventh pinned tab */
.tabbrowser-tab[pinned]:nth-of-type(7) .tab-background {
  background-color: rgba(255, 255, 186, 0.15) !important;
}

/* Change the background color of the eighth pinned tab */
.tabbrowser-tab[pinned]:nth-of-type(8) .tab-background {
  background-color: rgba(186, 255, 255, 0.15) !important;
}

/* Change the background color of the ninth pinned tab */
.tabbrowser-tab[pinned]:nth-of-type(9) .tab-background {
  background-color: rgba(255, 186, 186, 0.15) !important;
}

/* Change the background color of the tenth pinned tab */
.tabbrowser-tab[pinned]:nth-of-type(10) .tab-background {
  background-color: rgba(186, 186, 255, 0.15) !important;
}

/* Change the background color of the eleventh pinned tab */
.tabbrowser-tab[pinned]:nth-of-type(11) .tab-background {
  background-color: rgba(186, 255, 223, 0.15) !important;
}

/* Change the background color of the twelfth pinned tab */
.tabbrowser-tab[pinned]:nth-of-type(12) .tab-background {
  background-color: rgba(223, 186, 255, 0.15) !important;
}

.tabbrowser-tab[pinned] .tab-background {
  border-top: 1px solid #ffffff1f !important;
  border-bottom: 1px solid #0000001f !important;
}

@media (-moz-bool-pref: "zen.tabs.vertical") {
  #navigator-toolbox:is(#navigator-toolbox[zen-user-hover="true"][zen-has-hover], #navigator-toolbox[zen-user-hover="true"]:focus-within, #navigator-toolbox[zen-user-hover="true"][movingtab], #navigator-toolbox[zen-user-hover="true"][flash-popup], #navigator-toolbox[zen-user-hover="true"][has-popup-menu], #navigator-toolbox[zen-user-hover="true"]:has([open="true"]:not(tab):not(#zen-sidepanel-button)), #navigator-toolbox[zen-expanded="true"]:not([zen-user-hover="true"])) {
    & #zen-essentials-container {
      --tab-min-height: 47px !important;
    }
  }
}

.tab-icon-overlay {
  display: none !important;
}

#TabsToolbar #firefox-view-button[open]>.toolbarbutton-icon,
.tab-background:is([selected], [multiselected]) {
  box-shadow: none !important;
  border-top: 1px solid #ffffff2d !important;
  border-bottom: 1px solid #0000002d !important;
  background-color: rgba(255, 255, 255, 0.17) !important;
}

/* Change the HOVER background color of the second pinned tab hover */
.tabbrowser-tab[pinned]:nth-of-type(2) .tab-background:is([selected], [multiselected]) {
  background-color: rgba(161, 197, 255, 0.22) !important;
}

/* Change the HOVER background color of the 1st pinned tab hover */
.tabbrowser-tab[pinned]:nth-of-type(1) .tab-background:is([selected], [multiselected]) {
  background-color: rgba(255, 134, 134, 0.22) !important;
}

.tabbrowser-tab[pinned] .tab-background:is([selected], [multiselected]) {
  border-top: 1px solid #ffffff1f !important;
  border-bottom: 1px solid #0000001f !important;
}

.tabbrowser-tab .tab-background {
  transition: background-color 0.2s ease;
}

.tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-stack .tab-background {
  border: 1px solid #ffffff13 !important;
}

.tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-stack .tab-background:is([selected], [multiselected]) {
  border-top: 1px solid #ffffff2d !important;
  border-bottom: 1px solid #0000002d !important;
  background-color: rgba(255, 255, 255, 0.17) !important;
}

#browser {

  &:not(:has(.zen-split-view-splitter)) {
    --urlbar-min-height: 28px !important;

    #nav-bar {
      --zen-toolbar-height: 36px;

      margin-top: 6px !important;

    }

  }
}

#zen-workspaces-button {
  background-color: rgba(255, 255, 255, 0.04) !important;
  box-shadow: 0px 1px 10px rgba(0, 0, 0, 0.1) !important;
  border-radius: 8px !important;
  border: 1px solid #ffffff0c !important;
}

.titlebar-button>.toolbarbutton-icon {
  background: #ffffff1f !important;
  list-style-image: none;
  border-radius: 10px;
  transition: 0.2s ease;
  border: 1px solid #3aea4900 !important;
}

.titlebar-min>.toolbarbutton-icon {
  background: #ffffff1f !important;
}

.titlebar-close>.toolbarbutton-icon {
  background: #ffffff1f !important;
}

.titlebar-button:hover>.toolbarbutton-icon {
  background: #3aea4994 !important;
  border: 1px solid #3aea49 !important;
}

.titlebar-min:hover>.toolbarbutton-icon {
  background: #fac53794 !important;
  border: 1px solid #fac537 !important;
}

.titlebar-close:hover>.toolbarbutton-icon {
  background: #f34f5694 !important;
  border: 1px solid #f34f56 !important;
}

.titlebar-button {
  background: transparent !important;
  padding-inline: 5px !important;
}


#zen-workspaces-button {
  .subviewbutton {
    &[active="true"] {
      background: rgba(255, 255, 255, 0.1) !important;
      transition: 0.3s !important;
      border: 1px solid #ffffff0a !important;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.062) !important;

    }

    &:hover {
      background: rgba(255, 255, 255, 0.2) !important;
      transition: 0.3s !important;
    }

    &:after {
      display: none !important;
    }

  }
}

#zen-current-workspace-indicator {
  padding: 10px calc(4px + var(--tab-inline-padding)) !important;
  font-weight: 500 !important;
}

@media (-moz-bool-pref: "uc.arc.mode") {
  #PanelUI-button {
    order: 1;
  }

  /* You can adjust the scaling yourself - I adjusted it so the icons won't be blurry on my 768p screen */
  #PanelUI-menu-button {
    list-style-image: url("./arc-logo.svg") !important;
    /* scale: 1.2; */
    /* padding-inline-start: 7px !important; */
    padding-inline-start: 3px !important;
  }

  #PanelUI-menu-button .toolbarbutton-badge-stack {
    padding: 6px !important;
  }
}

@media (-moz-bool-pref: "zen.tabs.vertical") {
  #navigator-toolbox {
    & #nav-bar {
      :root[zen-single-toolbar="true"] & {
        margin-left: unset !important;
        width: 100% !important;
      }
    }
  }
}

@media (-moz-bool-pref: "zen.view.use-single-toolbar") {
  #zen-appcontent-navbar-container {
    height: var(--zen-element-separation) !important;
    opacity: 0 !important;
  }
}