gecko/browser/themes/shared/tabs.inc.css

%if 0
/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
%endif

%define tabHeight 30px
%define tabCurveWidth 30px
%define tabCurveHalfWidth 15px

/* image preloading hack */
#TabsToolbar::after {
  content: '';
  display: block;
  background-image:
    url(chrome://browser/skin/tabbrowser/tab-background-end.png),
    url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
    url(chrome://browser/skin/tabbrowser/tab-background-start.png);
}

.tabbrowser-tab,
.tabs-newtab-button {
  -moz-appearance: none;
  background-color: transparent;
  border-radius: 0;
  border-width: 0;
  margin: 0;
  padding: 0;
}

/* The selected tab should appear above adjacent tabs and .tabs-newtab-button */
.tabbrowser-tab[selected=true] {
  position: relative;
  z-index: 1;
}

.tab-background-middle {
  -moz-box-flex: 1;
  background-clip: padding-box;
  border-left: @tabCurveHalfWidth@ solid transparent;
  border-right: @tabCurveHalfWidth@ solid transparent;
  margin: 0 -@tabCurveHalfWidth@;
}

.tab-content {
  -moz-padding-end: 10px;
  -moz-padding-start: 10px;
}

.tab-background,
.tabs-newtab-button {
  /* overlap the tab curves */
  -moz-margin-end: -@tabCurveHalfWidth@;
  -moz-margin-start: -@tabCurveHalfWidth@;
}

.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
  -moz-padding-end: @tabCurveHalfWidth@;
  -moz-padding-start: @tabCurveHalfWidth@;
}

.tab-background-start[selected=true]::after,
.tab-background-start[selected=true]::before,
.tab-background-start,
.tab-background-end,
.tab-background-end[selected=true]::after,
.tab-background-end[selected=true]::before {
  min-height: @tabHeight@;
  width: @tabCurveWidth@;
}

/* Selected tab */

/*
 Tab background pseudo-elements which are positioned above .tab-background-start/end:
   - ::before - provides the fill of the tab curve and is clipped to the tab shape. This is where
                pointer events go for the curve.
   - ::after  - provides the border/stroke of the tab curve and is overlayed above ::before.  Pointer
                events go through to ::before to get the proper shape.
 */


.tab-background-start[selected=true]::after,
.tab-background-end[selected=true]::after {
  /* position ::after on top of its parent */
  -moz-margin-start: -@tabCurveWidth@;
  content: "";
  display: -moz-box;
}

.tab-background-start[selected=true]::before,
.tab-background-end[selected=true]::before {
  /* all ::before pseudo elements */
  content: "";
  display: -moz-box;
}

.tab-background-start[selected=true]:-moz-locale-dir(ltr)::before,
.tab-background-end[selected=true]:-moz-locale-dir(rtl)::before {
  clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start);
}

.tab-background-end[selected=true]:-moz-locale-dir(ltr)::before,
.tab-background-start[selected=true]:-moz-locale-dir(rtl)::before {
  clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end);
}

.tab-background-start[selected=true]:not(:-moz-lwtheme)::after,
.tab-background-end[selected=true]:not(:-moz-lwtheme)::after {
  background-repeat: no-repeat;
}

.tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
.tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
  background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start.png);
}

.tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
.tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
  background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end.png);
}

.tab-background-start[selected=true]::before,
.tab-background-end[selected=true]::before {
  background-color: -moz-dialog;
  background-image: @fgTabTexture@;
  background-repeat: no-repeat;
}

.tab-background-middle[selected=true] {
  background-color: transparent;
  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
                    @fgTabBackgroundMiddle@;
  background-repeat: repeat-x;
}

.tab-background-middle[selected=true]:-moz-lwtheme {
  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png);
}

/* Same as above but without border or -moz-dialog background */
.tab-background-start[selected=true]:-moz-lwtheme::before,
.tab-background-end[selected=true]:-moz-lwtheme::before,
.tab-background-middle[selected=true]:-moz-lwtheme {
  background-color: transparent;
}

/* End selected tab */

/* new tab button border and gradient on hover */
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
.tabs-newtab-button:hover {
  background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png),
                    url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
                    url(chrome://browser/skin/tabbrowser/tab-background-end.png);
  background-position: left bottom, @tabCurveWidth@ bottom, right bottom;
  background-repeat: no-repeat;
  background-size: @tabCurveWidth@ 100%, calc(100% - (2 * @tabCurveWidth@)) 100%, @tabCurveWidth@ 100%;
}

/* Tab pointer-events */
.tabbrowser-tab {
  pointer-events: none;
}

/* Allow pointer-events on ::before of the ends of selected tabs
   since they are clipped to the curve shape. */
.tab-background-start[selected=true]::before,
.tab-background-end[selected=true]::before,
.tab-background-middle,
.tabs-newtab-button,
.tab-close-button {
  pointer-events: auto;
}

/* Pinned tabs */

/* pinned tabs need position: fixed for separator when overflowing */
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
  position: fixed;
}

.tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content {
  background-image: radial-gradient(farthest-corner at center bottom, rgb(255,255,255) 3%, rgba(186,221,251,0.75) 20%, rgba(127,179,255,0.25) 40%, rgba(127,179,255,0) 70%);
  background-position: center bottom 1px;
  background-repeat: no-repeat;
  background-size: 85% 100%;
}

/* Background tab separators (1px wide).
   Also show separators beside the selected tab when dragging it. */
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
.tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
  -moz-margin-start: -1px;
  background-image: linear-gradient(rgba(10,31,51,0), rgba(10,31,51,0.3));
  background-position: left bottom;
  background-repeat: no-repeat;
  background-size: 1px 100%;
  content: '';
  display: -moz-box;
  height: @tabHeight@;
  width: 1px;
}

/* New tab button */

.tabs-newtab-button {
  clip-path: url(chrome://browser/content/browser.xul#tab-clip-path-outer);
  width: 66px;
}