curved tabs css

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/curved_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Makes tabs more curvy
 * Set svg.context-properties.content.enabled to true in about:config,
 * otherwise the bottom corners will be black
 */
#tabbrowser-tabs{
  --uc-tab-curve-size: 17px; /* 10px looks about like chromium - 17px looks close to Australis tabs */
  --uc-tabs-scrollbutton-border: 0px;
  --tab-block-margin:0px;
  --tab-min-height: 34px;
  --uc-tab-line-color: rgb(10, 132, 255); /* This is only used when the first optional section is enabled, see below */
  --uc-curve-stroke-opacity: 1; /* can be used to decrease curve border contrast */
}

.tabbrowser-tab{
  padding-inline: 0px !important; /* By default, proton tabs have 2px + 2px = 4px space between them */
  overflow: visible !important;
}
.tabbrowser-tab:is([selected],[multiselected]){
  position: relative;
  z-index: 2;
}
.tab-background{
  overflow: hidden !important;
  outline: none !important;
  box-shadow: none !important;
}
.tab-context-line{
  order: 1;
}
#TabsToolbar{ --toolbarbutton-inner-padding: 6px !important; }

.titlebar-spacer[type="pre-tabs"],
.tabbrowser-tab::after{ border: none !important; }

.tabbrowser-tab:hover > .tab-stack::before,
.tabbrowser-tab:hover > .tab-stack::after,
.tabbrowser-tab:is([selected],[multiselected]) > .tab-stack::before,
.tabbrowser-tab:is([selected],[multiselected]) > .tab-stack::after{
  width: var(--uc-tab-curve-size);
  height: 100%;
  display: block;
  position: absolute;
  content: "";
  fill: color-mix(in srgb, currentColor 11%, transparent);
  -moz-context-properties: fill,stroke,stroke-opacity;
  left: calc(0px - var(--uc-tab-curve-size));
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgc3Ryb2tlLXdpZHRoPSIxLjEiIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQgbWVldCIgdmlld0JveD0iMCAwIDE3IDE2IiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPg0KICA8cGF0aCBkPSJNMCAxNyBMMCAxNiBBMTYgMTYgMCAwIDAgMTYgMCBMIDE4IDAgTCAxOCAxNyBaIiBmaWxsPSJjb250ZXh0LWZpbGwiPjwvcGF0aD4NCiAgPHBhdGggZD0iTTAgMTYgQTE2IDE2IDAgMCAwIDE2IDAiIHN0cm9rZT0iY29udGV4dC1zdHJva2UiIHN0cm9rZS1vcGFjaXR5PSJjb250ZXh0LXN0cm9rZS1vcGFjaXR5IiBmaWxsPSJ0cmFuc3BhcmVudCI+PC9wYXRoPg0KPC9zdmc+"),var(--lwt-header-image, none);
  background-size: var(--uc-tab-curve-size),0;
  background-repeat: no-repeat,no-repeat;
  background-position-y: bottom, bottom -1px;
  background-position-x: 0,0;
  transform: scaleY(var(--uc-tab-vertical-transform));
  stroke-opacity: var(--uc-curve-stroke-opacity);
  z-index:1;
  pointer-events: none;
  background-origin: border-box;
}

:root[lwtheme-image] .tabbrowser-tab:is([selected],[multiselected]) > .tab-stack::before,
:root[lwtheme-image] .tabbrowser-tab:is([selected],[multiselected]) > .tab-stack::after{
  background-attachment: scroll,fixed;
  background-size: var(--uc-tab-curve-size),auto;
}
:root[lwtheme-image] .tabbrowser-tab:is([selected],[multiselected]) > .tab-stack::after{
  background-position-y: bottom,calc(var(--tab-min-height) - 1px);
}

.tabbrowser-tab:is([selected],[multiselected]) > .tab-stack::before,
.tabbrowser-tab:is([selected],[multiselected]) > .tab-stack::after{
  fill: var(--tab-selected-bgcolor,var(--toolbar-bgcolor)) !important;
  stroke: var(--lwt-tabs-border-color,transparent);
}

:root[lwtheme] .tabbrowser-tab:is([selected],[multiselected]) > .tab-stack::before,
:root[lwtheme] .tabbrowser-tab:is([selected],[multiselected]) > .tab-stack::after{
  fill: var(--tab-selected-bgcolor,var(--toolbar-bgcolor)) !important;
}
.tabbrowser-tab:is([selected],[multiselected]) > .tab-stack::after,
.tabbrowser-tab:hover > .tab-stack::after{
  left: auto;
  right: calc(0px - var(--uc-tab-curve-size));
  transform: scaleX(-1);
}

.tabbrowser-tab:hover > stack > .tab-background,
.tab-background:is([selected],[multiselected]){
  border-radius: var(--uc-tab-curve-size) var(--uc-tab-curve-size) 0 0 !important;

}

.tabbrowser-tab:first-child{
  margin-inline-start: var(--uc-tab-curve-size) !important;
}
#pinned-tabs-container{
  margin-inline-end: calc(0px - var(--uc-tab-curve-size)) !important;
}
#scrollbutton-up,
#scrollbutton-down{ border-block-width: var(--uc-tabs-scrollbutton-border,0px) !important; }
.tab-background:is([selected],[multiselected]){ border: 1px solid var(--lwt-tabs-border-color) !important; border-bottom: none !important }

.tab-context-line{
  margin-block: 0 !important;
}

/* Annoying fix to prevent hovering of last tab to trigger tab overflow, better solution wanted */
.tabbrowser-tab:last-of-type{ margin-inline-end: var(--uc-tab-curve-size) !important; }

/* To counter the above, make tabs toolbar spacer a bit narrower so there won't be too much space reserved when window dragging spacers are shown */
.titlebar-spacer[type="pre-tabs"]{ width: 24px !important; }


/* OPTIONAL - COLORS - show tabs border, selected tab line and make selected tab match the main toolbar color. Also disables tab shadow */
/* Using these color options requires you to set layout.css.color-mix.enabled to true in about:config */

@media (-moz-bool-pref: "userchrome.curved_tabs.extra-border.enabled"),
       -moz-pref("userchrome.curved_tabs.extra-border.enabled"){
  #navigator-toolbox{ --lwt-tabs-border-color: color-mix(in srgb, currentcolor, white 50%) !important; }
  :root[lwtheme-brighttext] #navigator-toolbox{ --lwt-tabs-border-color: color-mix(in srgb, currentcolor, black 50%) !important; }
  #tabbrowser-tabs{ --lwt-selected-tab-background-color: var(--toolbar-bgcolor) }
  .tab-background:is([selected],[multiselected]){
    border-top: none !important;
    --toolbar-bgcolor: transparent;
  }
  :root:not([lwtheme]) .tab-background{
    background-color: var(--lwt-selected-tab-background-color) !important;
  }
  .tabbrowser-tab:is([selected],[multiselected]) > .tab-stack::before,
  .tabbrowser-tab:is([selected],[multiselected]) > .tab-stack::after{
    fill: var(--lwt-selected-tab-background-color,var(--toolbar-bgcolor)) !important;
  }
  .tabbrowser-tab:is([selected],[multiselected]) > .tab-stack::before{
    left: calc(1px - var(--uc-tab-curve-size));
  }
  .tabbrowser-tab:is([selected],[multiselected]):is([selected],[multiselected]) > .tab-stack::after{
    right: calc(1px - var(--uc-tab-curve-size));
  }
  .tab-background:is([selected],[multiselected])::before{
    content: "";
    display: flex;
    height: 2px;
    background: var(--uc-tab-line-color) !important;
  }
  #nav-bar{ box-shadow: 0 -1px 0 var(--lwt-tabs-border-color) }
}

/* OPTIONAL - Make some of the buttons in tabs toolbar rounded, which might look nicer especially with large curve size */
@media (-moz-bool-pref: "userchrome.curved_tabs.round-buttons.enabled"),
       -moz-pref("userchrome.curved_tabs.round-buttons.enabled"){
  #tabs-newtab-button > .toolbarbutton-icon,
  #TabsToolbar #new-tab-button > .toolbarbutton-icon,
  #alltabs-button > .toolbarbutton-badge-stack,
  .tab-close-button{ border-radius: 30px !important; }
}

/* OPTIONAL - uncomment the following to flip the curves vertically - maybe useful for tabs on bottom ? */
@media (-moz-bool-pref: "userchrome.curved_tabs.flipped-curve.enabled"),
       -moz-pref("userchrome.curved_tabs.flipped-curve.enabled"){
  .tab-background{ flex-direction: column-reverse }
  .tabbrowser-tab:hover > .tab-stack > .tab-background,
  .tab-background[selected]{ border-radius: 0 0 var(--uc-tab-curve-size) var(--uc-tab-curve-size) !important }
  .tabbrowser-tab > .tab-stack::before{ transform: scaleY(-1) !important; }
  .tabbrowser-tab > .tab-stack::after{ transform: scaleY(-1) scaleX(-1) !important; }
}