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

:root {
  --tab-toolbar-navbar-overlap: 1px;
  --navbar-tab-toolbar-highlight-overlap: 1px;
  --tab-min-height: 31px;
}
#TabsToolbar {
  --tab-stroke-background-size: auto 100%;
}

%define tabCurveWidth 30px
%define tabCurveHalfWidth 15px

/* image preloading hack */
#tabbrowser-tabs::before {
  /* Because of bug 853415, we need to ordinal this to the first position: */
  -moz-box-ordinal-group: 0;
  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-tabs {
  min-height: var(--tab-min-height);
}

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

.tabbrowser-tab {
  -moz-box-align: stretch;
}

/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
.tabbrowser-tab[visuallyselected=true] {
  position: relative;
  z-index: 2;
}

.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: 9px;
  -moz-padding-start: 9px;
}

.tab-content[pinned] {
  -moz-padding-end: 3px;
}

.tab-throbber,
.tab-icon-image,
.tab-icon-sound,
.tab-close-button {
  margin-top: 1px;
}

.tab-throbber,
.tab-icon-image {
  height: 16px;
  width: 16px;
  -moz-margin-end: 6px;
}

.tab-icon-image {
  list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
}

.tab-icon-overlay {
  width: 16px;
  height: 16px;
  margin-top: -8px;
  margin-inline-start: -15px;
  position: relative;
}

.tab-icon-overlay[crashed] {
  list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
}

.tab-icon-overlay[soundplaying],
.tab-icon-overlay[muted]:not([crashed]) {
  border-radius: 10px;
}

.tab-icon-overlay[soundplaying]:hover,
.tab-icon-overlay[muted]:not([crashed]):hover {
  background-color: white;
}

.tab-icon-overlay[soundplaying] {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
}

.tab-icon-overlay[muted]:not([crashed]) {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
}

#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
}

#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
}

.tab-throbber[busy] {
  list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
}

.tab-throbber[progress] {
  list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
}

.tab-label {
  -moz-margin-end: 0;
  -moz-margin-start: 0;
}

.tab-close-button {
  -moz-margin-start: 4px;
  -moz-margin-end: -2px;
  padding: 0;
}

.tab-icon-sound {
  -moz-margin-start: 4px;
  width: 16px;
  height: 16px;
  padding: 0;
}

.tab-icon-sound[soundplaying] {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
}

.tab-icon-sound[soundplaying]:hover {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
}

.tab-icon-sound[soundplaying]:hover:active {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
}

.tab-icon-sound[muted] {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
}

.tab-icon-sound[muted]:hover {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
}

.tab-icon-sound[muted]:hover:active {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
}

.tab-icon-sound[visuallyselected=true][soundplaying] {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
}

.tab-icon-sound[visuallyselected=true][soundplaying]:hover {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
}

.tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
}

.tab-icon-sound[visuallyselected=true][muted] {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
}

.tab-icon-sound[visuallyselected=true][muted]:hover {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
}

.tab-icon-sound[visuallyselected=true][muted]:hover:active {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
}

#TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
}

#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
}

#TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
}

#TabsToolbar[brighttext] .tab-icon-sound[muted] {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
}

#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
}

#TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
  list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
}

.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 Overflow */
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
  background-image: url(chrome://browser/skin/tabbrowser/tab-overflow-indicator.png);
  background-size: 100% 100%;
  width: 14px;
  margin-bottom: var(--navbar-tab-toolbar-highlight-overlap);
  pointer-events: none;
  position: relative;
  z-index: 3; /* the selected tab's z-index + 1 */
}

.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
  transform: scaleX(-1);
}

.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
  -moz-margin-start: -2px;
  -moz-margin-end: -12px;
}

.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
  -moz-margin-start: -12px;
  -moz-margin-end: -2px;
}

.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
  opacity: 0;
}

.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
  transition: opacity 150ms ease;
}

.tab-background-start[visuallyselected=true]::after,
.tab-background-start[visuallyselected=true]::before,
.tab-background-start,
.tab-background-end,
.tab-background-end[visuallyselected=true]::after,
.tab-background-end[visuallyselected=true]::before {
  min-height: var(--tab-min-height);
  width: @tabCurveWidth@;
}

.tabbrowser-tab:not([visuallyselected=true]),
.tabbrowser-tab:-moz-lwtheme {
  color: inherit;
}

/* 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[visuallyselected=true]::after,
.tab-background-end[visuallyselected=true]::after {
  /* position ::after on top of its parent */
  -moz-margin-start: -@tabCurveWidth@;
  background-size: 100% 100%;
  content: "";
  display: -moz-box;
  position: relative;
}

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

.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before,
.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before {
  background-image: url(chrome://browser/skin/tabbrowser/tab-selected-start.svg);
  background-size: 100% 100%;
}

.tab-background-end[visuallyselected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before,
.tab-background-start[visuallyselected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before {
  background-image: url(chrome://browser/skin/tabbrowser/tab-selected-end.svg);
  background-size: 100% 100%;
}

/* For lightweight themes, clip the header image on start, middle, and end. */
.tab-background-start[visuallyselected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before,
.tab-background-end[visuallyselected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before {
  clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start);
}

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

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

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

.tab-background-middle[visuallyselected=true] {
  background-clip: padding-box, padding-box, content-box;
  background-color: @fgTabBackgroundColor@;
  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
                    @fgTabTexture@,
                    none;
  background-repeat: repeat-x;
  background-size: var(--tab-stroke-background-size), auto 100%;
  /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the
     background-color doesn't extend above the top border. */
  padding-top: 2px;
}

/* Selected tab lightweight theme styles.
   See browser-lightweightTheme.css for information about run-time changes to LWT styles. */
.tab-background-middle[visuallyselected=true]:-moz-lwtheme {
  background-color: transparent;
  background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
                    @fgTabTextureLWT@;/*,
                    lwtHeader;*/
  /* Don't stretch the LWT header images */
  background-size: var(--tab-stroke-background-size), auto 100%, auto auto;
}

/* These LWT styles are normally overridden by browser-lightweightTheme.css */
.tab-background-start[visuallyselected=true]:-moz-lwtheme::before,
.tab-background-end[visuallyselected=true]:-moz-lwtheme::before {
  background-image: @fgTabTextureLWT@;
}

.tab-background-start[visuallyselected=true]:-moz-lwtheme::before,
.tab-background-end[visuallyselected=true]:-moz-lwtheme::before,
.tab-background-middle[visuallyselected=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([visuallyselected=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%;
}

/* User Context UI - change tab decoration depending on userContextId.
   Defaults to gray for unknown usercontextids. */
.tabbrowser-tab[usercontextid] {
  background-image: linear-gradient(to right, transparent 20%, #909090 30%, #909090 70%, transparent 80%);
  background-size: auto 2px;
  background-repeat: no-repeat;
}

/* Personal User Context */
.tabbrowser-tab[usercontextid="1"] {
  background-image: linear-gradient(to right, transparent 20%, #00a7e0 30%, #00a7e0 70%, transparent 80%);
}
/* Work User Context */
.tabbrowser-tab[usercontextid="2"] {
  background-image: linear-gradient(to right, transparent 20%, #f89c24 30%, #f89c24 70%, transparent 80%);
}
/* Banking User Context */
.tabbrowser-tab[usercontextid="3"] {
  background-image: linear-gradient(to right, transparent 20%, #7dc14c 30%, #7dc14c 70%, transparent 80%);
}
/* Shopping User Context */
.tabbrowser-tab[usercontextid="4"] {
  background-image: linear-gradient(to right, transparent 20%, #ee5195 30%, #ee5195 70%, transparent 80%);
}

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

.tab-background-middle,
.tabs-newtab-button,
.tab-icon-overlay[soundplaying],
.tab-icon-overlay[muted]:not([crashed]),
.tab-icon-sound,
.tab-close-button {
  pointer-events: auto;
}

/* Pinned tabs */

/* Pinned tab separators need position: absolute when positioned (during overflow). */
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
  height: 100%;
  position: absolute;
}

.tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="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%, transparent 70%);
  background-position: center bottom var(--tab-toolbar-navbar-overlap);
  background-repeat: no-repeat;
  background-size: 85% 100%;
}

/* Tab separators */

.tabbrowser-tab::after,
.tabbrowser-tab::before {
  width: 1px;
  -moz-margin-start: -1px;
  background-image: linear-gradient(transparent 5px,
                                    currentColor 5px,
                                    currentColor calc(100% - 4px),
                                    transparent calc(100% - 4px));
  opacity: 0.2;
}

#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
  opacity: 0.4;
}

/* Also show separators beside the selected tab when dragging it. */
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
.tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
#tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
  content: "";
  display: -moz-box;
}

/* New tab button */

.tabs-newtab-button {
  width: calc(36px + @tabCurveWidth@);
}