userChrome.css

/* boxy tab close button */
.tab-close-button.close-icon {
  border-radius: 6px !important;
}

.tab-background {
  transition: background 0.15s ease-out !important;
}

















/* arcify url bar */
#urlbar:is([breakout][breakout-extend], [breakout][usertyping][focused]):after {
   top: -6px !important
}

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

#urlbar[open] {
top: calc(var(--zen-toolbar-height) * 3.3) !important;
}
#urlbar[breakout-extend="true"] > #urlbar-background {
background: #7f7e7e !important;
filter: brightness(69%) !important;
}


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

#identity-icon-box {
margin: 5px !important;
scale: 150%;
border-radius: 6px !important;
}

#identity-box {
margin-right: 0px !important;
}

#urlbar-input {
margin-left: 5px !important;
margin-right: 5px !important;
font-size: 20px !important;
}
}

.urlbarView-row-inner {
  border-radius: calc(var(--urlbarView-row-gutter) + var(--toolbarbutton-border-radius));
  display: flex !important;
}

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

.urlbarView-title {
  font-size: 16px !important;
  font-weight: 500 !important;
}

.urlbarView-url, .urlbarView-title-separator::before {
  font-weight: 500 !important;
  color: #aaa !important;
}

.urlbarView-favicon {
  margin-left: 3px !important;
  margin-right: 12px !important;
  padding:4px !important;
  border-radius: 6px !important;
  transform: scale(1.5) !important;
}


.urlbarView-row:hover {
  background: transparent !important;


  .urlbarView-favicon {
    background-color: #f1efe2 !important;
  }


  .urlbarView-row-inner {
    background: color-mix(in srgb, var(--zen-colors-primary) 30%, #f1efe230) !important;
  }
}

* {
  --urlbarView-item-inline-padding: 8px !important;
  --urlbarView-item-block-padding: 12px !important;
}















/* show full tab previw text */
.tab-preview-title {
  overflow: hidden !important;
  -webkit-line-clamp: none !important;
}








/* Glassy tabs */
.tab-background, #tabs-newtab-button {
    transition: outline .5s fade-out,
                box-shadow .6s fade-out;
    #zen-essentials-container:has(&) .tab-background {
        box-shadow: 0px 2px 0px 0px #FFFFFF0f, 
                    0px 2px 8px 0px #00000040 !important;
        outline: 1px solid #ffffff10 !important;
        outline-offset: -1px !important;
    }
    &:hover, .tabbrowser-tab[selected]:has(&) .tab-background, .tab-stack:hover:has(&) .tab-background, #zen-essentials-container:has(&) .tabbrowser-tab:hover .tab-background {
        box-shadow: 0px 2px 0px 0px #FFFFFF0f, 
                    0px 2px 8px 0px #00000040,
                    inset 0px 8px 8px 0px #FFFFFF07 !important;
        outline: 1px solid #ffffff10 !important;
        outline-offset: -1px !important;
    }
    *:has(&) { overflow: visible !important; }
}

/* url depth */
#urlbar-background {
    border: 1px solid #ffffff10 !important;
    box-shadow: inset 0px 2px 0px 0px #00000020, inset 0px 2px 8px 0px #00000040 !important;
}
.urlbar-input {
    color: #ffffffcc !important;
    padding-left: 4px !important; 
}



/* extension , zoom button box black -> transparent */
 #identity-icon-box, #urlbar-zoom-button{
  background: transparent !important;
}

















/* improve tabs acc to js */
/* Style for pinned tabs with dynamically set favicon color */
.tabbrowser-tab[pinned] .tab-background:not([selected], [multiselected]) {
  opacity: 0.2;
}
.tabbrowser-tab[pinned] .tab-background:is([selected], [multiselected]) {
  opacity: 0.5;
}
.tabbrowser-tab[pinned]:not([zen-essential="true"]) .tab-background:not([selected], [multiselected]) {
  opacity: 1;
  background-color: rgba(255, 255, 255, 0.1) !important;
}









/* css tab groups */
tab-group:has(tab[hidden]){
  display: none !important;
}
tab-group {
  display: grid !important;
  background: color-mix(in srgb, var(--tab-group-color-invert) 10%, transparent) !important;
  border-radius: var(--border-radius-medium);
  margin-top: 2px;
  margin-bottom: 2px;
  margin-inline: 2px !important;
  border: 2px solid color-mix(in srgb, var(--tab-group-color-invert) 10%, transparent);
  padding: 3.1px 0px !important;
  max-height: 1000px !important;

  &>vbox {
    padding-top: 2px !important;
  }

  & .tab-group-label-container {
    &:after {
      display: none !important;
    }

    &>label {
      background: transparent !important;
      border: unset !important;
      font-weight: 500 !important;
      text-align: unset !important;
      color: var(--sidebar-text-color) !important;
      padding-left: 32px !important;
    }
    &>label::before {
      content: "" !important;
      position: absolute !important;
      left: 5px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      width: 16px !important;
      height: 16px !important;
      background-color: var(--sidebar-text-color);
      mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMjAgOS41MDJWOC43NWEyLjI1IDIuMjUgMCAwIDAtMi4yNS0yLjI1aC01LjcyNWwtMi4zOC0xLjk4QTIuMjUgMi4yNSAwIDAgMCA4LjIwNCA0SDQuMjVBMi4yNSAyLjI1IDAgMCAwIDIgNi4yNWwtLjAwNCAxMS41QTIuMjUgMi4yNSAwIDAgMCA0LjI0NiAyMEgxOC40N2ExLjc1IDEuNzUgMCAwIDAgMS42OTgtMS4zMjVsMS43NS02Ljk5OGExLjc1IDEuNzUgMCAwIDAtMS42OTgtMi4xNzVIMjBaTTQuMjUgNS41aDMuOTU2YS43NS43NSAwIDAgMSAuNDguMTczbDIuNTg4IDIuMTU0YS43NS43NSAwIDAgMCAuNDguMTczaDUuOTk2YS43NS43NSAwIDAgMSAuNzUuNzV2Ljc1Mkg2LjQyNGEyLjI1IDIuMjUgMCAwIDAtMi4xODMgMS43MDRsLS43NDQgMi45NzhMMy41IDYuMjVhLjc1Ljc1IDAgMCAxIC43NS0uNzVabTEuNDQ3IDYuMDdhLjc1Ljc1IDAgMCAxIC43MjctLjU2OEgyMC4yMmEuMjUuMjUgMCAwIDEgLjI0Mi4zMWwtMS43NSA2Ljk5OWEuMjUuMjUgMCAwIDEtLjI0Mi4xODlINC4yODVhLjI1LjI1IDAgMCAxLS4yNDMtLjMxbDEuNjU1LTYuNjJaIiBmaWxsPSIjMDAwMDAwIi8+PC9zdmc+');
      mask-size: contain;
      mask-repeat: no-repeat;
      background-size: contain !important;
      background-repeat: no-repeat !important;
    }
  }

  &[collapsed] {
    overflow: hidden !important;
    max-height: 35px !important;

    & tab {
      opacity: 0 !important;
    }
    & .tab-group-label-container > label {
      background: transparent !important;
      border: unset !important;
      font-weight: 500 !important;
      text-align: unset !important;
      color: var(--sidebar-text-color) !important;
      padding-left: 32px !important;
    }
    & .tab-group-label-container > label::before {
      content: "" !important;
      position: absolute !important;
      left: 5px !important;
      top: 50% !important;
      transform: translateY(-50%) !important;
      width: 16px !important;
      height: 16px !important;
      background-color: var(--sidebar-text-color);
      mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIGZpbGw9Im5vbmUiIHZpZXdCb3g9IjAgMCAyNCAyNCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNOC4yMDcgNGMuNDYgMCAuOTA4LjE0MSAxLjI4NC40MDJsLjE1Ni4xMkwxMi4wMjIgNi41aDcuNzI4YTIuMjUgMi4yNSAwIDAgMSAyLjIyOSAxLjkzOGwuMDE2LjE1OC4wMDUuMTU0djlhMi4yNSAyLjI1IDAgMCAxLTIuMDk2IDIuMjQ1TDE5Ljc1IDIwSDQuMjVhMi4yNSAyLjI1IDAgMCAxLTIuMjQ1LTIuMDk2TDIgMTcuNzVWNi4yNWEyLjI1IDIuMjUgMCAwIDEgMi4wOTYtMi4yNDVMNC4yNSA0aDMuOTU3Wm0xLjQ0IDUuOTc5YTIuMjUgMi4yNSAwIDAgMS0xLjI0NC41MTJsLS4xOTYuMDA5LTQuNzA3LS4wMDF2Ny4yNTFjMCAuMzguMjgyLjY5NC42NDguNzQzbC4xMDIuMDA3aDE1LjVhLjc1Ljc1IDAgMCAwIC43NDMtLjY0OGwuMDA3LS4xMDJ2LTlhLjc1Ljc1IDAgMCAwLS42NDgtLjc0M0wxOS43NSA4aC03LjcyOUw5LjY0NyA5Ljk3OVpNOC4yMDcgNS41SDQuMjVhLjc1Ljc1IDAgMCAwLS43NDMuNjQ4TDMuNSA2LjI1djIuNzQ5TDguMjA3IDlhLjc1Ljc1IDAgMCAwIC4zOTUtLjExM2wuMDg1LS4wNiAxLjg5MS0xLjU3OC0xLjg5LTEuNTc1YS43NS43NSAwIDAgMC0uMzc3LS4xNjdMOC4yMDcgNS41WiIgZmlsbD0iIzAwMDAwMCIvPjwvc3ZnPg==');
      mask-size: contain;
      mask-repeat: no-repeat;
      background-size: contain !important;
      background-repeat: no-repeat !important;
    }
  }
  & .tab-content {
    margin-left: 6px !important;
  }
}












































































































/* better workspaces */
#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;
}

.tab-close-button {
  padding: 5px !important;
  border-radius: 20px !important;
}


.close-icon:hover {
  background-color: color-mix(in srgb, currentColor 20%, transparent) !important;
}










#zen-workspaces-button {
&:not([as-button='true']) {
  width: 100%;
}
& toolbarbutton {
  width: auto !important;
  flex: 1 1 4px !important;
  min-width: 0;
}
}