michael@0: %if 0
michael@0: /* This Source Code Form is subject to the terms of the Mozilla Public
michael@0:  * License, v. 2.0. If a copy of the MPL was not distributed with this
michael@0:  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
michael@0: %endif
michael@0: 
michael@0: %define tabCurveWidth 30px
michael@0: %define tabCurveHalfWidth 15px
michael@0: 
michael@0: /* image preloading hack */
michael@0: #tabbrowser-tabs::before {
michael@0:   /* Because of bug 853415, we need to ordinal this to the first position: */
michael@0:   -moz-box-ordinal-group: 0;
michael@0:   content: '';
michael@0:   display: block;
michael@0:   background-image:
michael@0:     url(chrome://browser/skin/tabbrowser/tab-background-end.png),
michael@0:     url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
michael@0:     url(chrome://browser/skin/tabbrowser/tab-background-start.png);
michael@0: }
michael@0: 
michael@0: #tabbrowser-tabs {
michael@0:   min-height: @tabMinHeight@;
michael@0: }
michael@0: 
michael@0: .tabbrowser-tab,
michael@0: .tabs-newtab-button {
michael@0:   -moz-appearance: none;
michael@0:   background-color: transparent;
michael@0:   border-radius: 0;
michael@0:   border-width: 0;
michael@0:   margin: 0;
michael@0:   padding: 0;
michael@0: }
michael@0: 
michael@0: .tabbrowser-tab {
michael@0:   -moz-box-align: stretch;
michael@0: }
michael@0: 
michael@0: .tabbrowser-tab[remote] {
michael@0:   text-decoration: underline;
michael@0: }
michael@0: 
michael@0: /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
michael@0: .tabbrowser-tab[selected=true] {
michael@0:   position: relative;
michael@0:   z-index: 2;
michael@0: }
michael@0: 
michael@0: .tab-background-middle {
michael@0:   -moz-box-flex: 1;
michael@0:   background-clip: padding-box;
michael@0:   border-left: @tabCurveHalfWidth@ solid transparent;
michael@0:   border-right: @tabCurveHalfWidth@ solid transparent;
michael@0:   margin: 0 -@tabCurveHalfWidth@;
michael@0: }
michael@0: 
michael@0: .tab-content {
michael@0:   -moz-padding-end: 9px;
michael@0:   -moz-padding-start: 9px;
michael@0: }
michael@0: 
michael@0: .tab-throbber,
michael@0: .tab-icon-image,
michael@0: .tab-close-button {
michael@0:   margin-top: 1px;
michael@0: }
michael@0: 
michael@0: .tab-throbber,
michael@0: .tab-icon-image {
michael@0:   height: 16px;
michael@0:   width: 16px;
michael@0: }
michael@0: 
michael@0: .tab-icon-image {
michael@0:   list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
michael@0: }
michael@0: 
michael@0: .tab-throbber {
michael@0:   list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
michael@0: }
michael@0: 
michael@0: .tab-throbber[progress] {
michael@0:   list-style-image: url("chrome://browser/skin/tabbrowser/loading.png");
michael@0: }
michael@0: 
michael@0: .tab-throbber:not([pinned]),
michael@0: .tab-icon-image:not([pinned]) {
michael@0:   -moz-margin-end: 6px;
michael@0: }
michael@0: 
michael@0: .tab-label {
michael@0:   -moz-margin-end: 0;
michael@0:   -moz-margin-start: 0;
michael@0: }
michael@0: 
michael@0: .tab-close-button {
michael@0:   -moz-margin-start: 4px;
michael@0:   -moz-margin-end: -2px;
michael@0:   padding: 0;
michael@0: }
michael@0: 
michael@0: .tab-background,
michael@0: .tabs-newtab-button {
michael@0:   /* overlap the tab curves */
michael@0:   -moz-margin-end: -@tabCurveHalfWidth@;
michael@0:   -moz-margin-start: -@tabCurveHalfWidth@;
michael@0: }
michael@0: 
michael@0: .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
michael@0:   -moz-padding-end: @tabCurveHalfWidth@;
michael@0:   -moz-padding-start: @tabCurveHalfWidth@;
michael@0: }
michael@0: 
michael@0: .tab-background-start[selected=true]::after,
michael@0: .tab-background-start[selected=true]::before,
michael@0: .tab-background-start,
michael@0: .tab-background-end,
michael@0: .tab-background-end[selected=true]::after,
michael@0: .tab-background-end[selected=true]::before {
michael@0:   min-height: @tabMinHeight@;
michael@0:   width: @tabCurveWidth@;
michael@0: }
michael@0: 
michael@0: .tabbrowser-tab:not([selected=true]),
michael@0: .tabbrowser-tab:-moz-lwtheme {
michael@0:   color: inherit;
michael@0: }
michael@0: 
michael@0: /* Selected tab */
michael@0: 
michael@0: /*
michael@0:  Tab background pseudo-elements which are positioned above .tab-background-start/end:
michael@0:    - ::before - provides the fill of the tab curve and is clipped to the tab shape. This is where
michael@0:                 pointer events go for the curve.
michael@0:    - ::after  - provides the border/stroke of the tab curve and is overlayed above ::before.  Pointer
michael@0:                 events go through to ::before to get the proper shape.
michael@0:  */
michael@0: 
michael@0: 
michael@0: .tab-background-start[selected=true]::after,
michael@0: .tab-background-end[selected=true]::after {
michael@0:   /* position ::after on top of its parent */
michael@0:   -moz-margin-start: -@tabCurveWidth@;
michael@0:   background-size: 100% 100%;
michael@0:   content: "";
michael@0:   display: -moz-box;
michael@0:   position: relative;
michael@0: }
michael@0: 
michael@0: .tab-background-start[selected=true]::before,
michael@0: .tab-background-end[selected=true]::before {
michael@0:   /* all ::before pseudo elements */
michael@0:   content: "";
michael@0:   display: -moz-box;
michael@0: }
michael@0: 
michael@0: .tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before,
michael@0: .tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before {
michael@0:   background-image: url(chrome://browser/skin/tabbrowser/tab-selected-start.svg);
michael@0:   background-size: 100% 100%;
michael@0: }
michael@0: 
michael@0: .tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before,
michael@0: .tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before {
michael@0:   background-image: url(chrome://browser/skin/tabbrowser/tab-selected-end.svg);
michael@0:   background-size: 100% 100%;
michael@0: }
michael@0: 
michael@0: /* For lightweight themes, clip the header image on start, middle, and end. */
michael@0: .tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before,
michael@0: .tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before {
michael@0:   clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start);
michael@0: }
michael@0: 
michael@0: .tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before,
michael@0: .tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before {
michael@0:   clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end);
michael@0: }
michael@0: 
michael@0: .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
michael@0: .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
michael@0:   background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start.png);
michael@0: }
michael@0: 
michael@0: .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
michael@0: .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
michael@0:   background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end.png);
michael@0: }
michael@0: 
michael@0: .tab-background-middle[selected=true] {
michael@0:   background-clip: padding-box, padding-box, content-box;
michael@0:   background-color: @fgTabBackgroundColor@;
michael@0:   background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
michael@0:                     @fgTabTexture@,
michael@0:                     none;
michael@0:   background-repeat: repeat-x;
michael@0:   background-size: auto 100%;
michael@0:   /* The padding-top combined with background-clip: content-box (the bottom-most) ensure the
michael@0:      background-color doesn't extend above the top border. */
michael@0:   padding-top: 2px;
michael@0: }
michael@0: 
michael@0: /* Selected tab lightweight theme styles.
michael@0:    See browser-lightweightTheme.css for information about run-time changes to LWT styles. */
michael@0: .tab-background-middle[selected=true]:-moz-lwtheme {
michael@0:   background-color: transparent;
michael@0:   background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
michael@0:                     @fgTabTextureLWT@;/*,
michael@0:                     lwtHeader;*/
michael@0:   /* Don't stretch the LWT header images */
michael@0:   background-size: auto 100%, auto 100%, auto auto;
michael@0: }
michael@0: 
michael@0: /* These LWT styles are normally overridden by browser-lightweightTheme.css */
michael@0: .tab-background-start[selected=true]:-moz-lwtheme::before,
michael@0: .tab-background-end[selected=true]:-moz-lwtheme::before {
michael@0:   background-image: @fgTabTextureLWT@;
michael@0: }
michael@0: 
michael@0: .tab-background-start[selected=true]:-moz-lwtheme::before,
michael@0: .tab-background-end[selected=true]:-moz-lwtheme::before,
michael@0: .tab-background-middle[selected=true]:-moz-lwtheme {
michael@0:   background-color: transparent;
michael@0: }
michael@0: 
michael@0: /* End selected tab */
michael@0: 
michael@0: /* new tab button border and gradient on hover */
michael@0: .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
michael@0: .tabs-newtab-button:hover {
michael@0:   background-image: url(chrome://browser/skin/tabbrowser/tab-background-start.png),
michael@0:                     url(chrome://browser/skin/tabbrowser/tab-background-middle.png),
michael@0:                     url(chrome://browser/skin/tabbrowser/tab-background-end.png);
michael@0:   background-position: left bottom, @tabCurveWidth@ bottom, right bottom;
michael@0:   background-repeat: no-repeat;
michael@0:   background-size: @tabCurveWidth@ 100%, calc(100% - (2 * @tabCurveWidth@)) 100%, @tabCurveWidth@ 100%;
michael@0: }
michael@0: 
michael@0: /* Tab pointer-events */
michael@0: .tabbrowser-tab {
michael@0:   pointer-events: none;
michael@0: }
michael@0: 
michael@0: .tab-background-middle,
michael@0: .tabs-newtab-button,
michael@0: .tab-close-button {
michael@0:   pointer-events: auto;
michael@0: }
michael@0: 
michael@0: /* Pinned tabs */
michael@0: 
michael@0: /* Pinned tab separators need position: absolute when positioned (during overflow). */
michael@0: #tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
michael@0:   height: 100%;
michael@0:   position: absolute;
michael@0: }
michael@0: 
michael@0: .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) > .tab-stack > .tab-content {
michael@0:   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%);
michael@0:   background-position: center bottom @tabToolbarNavbarOverlap@;
michael@0:   background-repeat: no-repeat;
michael@0:   background-size: 85% 100%;
michael@0: }
michael@0: 
michael@0: /* Background tab separators (3px wide).
michael@0:    Also show separators beside the selected tab when dragging it. */
michael@0: #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
michael@0: .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
michael@0: #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
michael@0:   -moz-margin-start: -1.5px;
michael@0:   -moz-margin-end: -1.5px;
michael@0:   background-image: url(chrome://browser/skin/tabbrowser/tab-separator.png);
michael@0:   background-position: left bottom @tabToolbarNavbarOverlap@;
michael@0:   background-repeat: no-repeat;
michael@0:   background-size: 3px 100%;
michael@0:   content: "";
michael@0:   display: -moz-box;
michael@0:   width: 3px;
michael@0: }
michael@0: 
michael@0: /* New tab button */
michael@0: 
michael@0: .tabs-newtab-button {
michael@0:   width: 66px;
michael@0: }