2013-03-08 14:57:00 +04:00
|
|
|
%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
|
|
|
|
|
2015-01-09 22:42:00 +03:00
|
|
|
:root {
|
|
|
|
--tab-toolbar-navbar-overlap: 1px;
|
2015-08-09 12:13:27 +03:00
|
|
|
--navbar-tab-toolbar-highlight-overlap: 1px;
|
2015-01-09 22:42:00 +03:00
|
|
|
--tab-min-height: 31px;
|
|
|
|
}
|
2015-06-26 14:39:00 +03:00
|
|
|
#TabsToolbar {
|
2015-08-08 17:57:55 +03:00
|
|
|
--tab-stroke-background-size: auto 100%;
|
2015-06-26 14:39:00 +03:00
|
|
|
}
|
2015-01-09 22:42:00 +03:00
|
|
|
|
2015-01-28 19:50:00 +03:00
|
|
|
%define tabCurveWidth 30px
|
|
|
|
%define tabCurveHalfWidth 15px
|
|
|
|
|
2013-03-08 14:57:00 +04:00
|
|
|
/* image preloading hack */
|
2014-02-26 11:07:03 +04:00
|
|
|
#tabbrowser-tabs::before {
|
2013-06-01 01:47:11 +04:00
|
|
|
/* Because of bug 853415, we need to ordinal this to the first position: */
|
|
|
|
-moz-box-ordinal-group: 0;
|
2013-03-08 14:57:00 +04:00
|
|
|
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);
|
|
|
|
}
|
|
|
|
|
2014-03-03 21:18:54 +04:00
|
|
|
#tabbrowser-tabs {
|
2015-01-09 22:42:00 +03:00
|
|
|
min-height: var(--tab-min-height);
|
2014-03-03 21:18:54 +04:00
|
|
|
}
|
|
|
|
|
2013-03-08 14:57:00 +04:00
|
|
|
.tabbrowser-tab,
|
|
|
|
.tabs-newtab-button {
|
|
|
|
-moz-appearance: none;
|
|
|
|
background-color: transparent;
|
|
|
|
border-radius: 0;
|
|
|
|
border-width: 0;
|
|
|
|
margin: 0;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
2013-04-25 15:30:33 +04:00
|
|
|
.tabbrowser-tab {
|
|
|
|
-moz-box-align: stretch;
|
|
|
|
}
|
|
|
|
|
2013-05-17 00:32:15 +04:00
|
|
|
/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
|
2015-03-16 21:30:41 +03:00
|
|
|
.tabbrowser-tab[visuallyselected=true] {
|
2013-03-08 14:57:00 +04:00
|
|
|
position: relative;
|
2013-05-17 00:32:15 +04:00
|
|
|
z-index: 2;
|
2013-03-08 14:57:00 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
.tab-background-middle {
|
|
|
|
-moz-box-flex: 1;
|
|
|
|
background-clip: padding-box;
|
2015-01-28 19:50:00 +03:00
|
|
|
border-left: @tabCurveHalfWidth@ solid transparent;
|
|
|
|
border-right: @tabCurveHalfWidth@ solid transparent;
|
|
|
|
margin: 0 -@tabCurveHalfWidth@;
|
2013-03-08 14:57:00 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
.tab-content {
|
2016-05-13 08:19:58 +03:00
|
|
|
padding-inline-end: 9px;
|
|
|
|
padding-inline-start: 9px;
|
2013-05-02 20:05:50 +04:00
|
|
|
}
|
|
|
|
|
2015-01-13 23:33:26 +03:00
|
|
|
.tab-content[pinned] {
|
2016-05-13 08:19:58 +03:00
|
|
|
padding-inline-end: 3px;
|
2015-01-13 23:33:26 +03:00
|
|
|
}
|
|
|
|
|
2013-05-02 20:05:50 +04:00
|
|
|
.tab-throbber,
|
|
|
|
.tab-icon-image,
|
2016-06-22 14:07:39 +03:00
|
|
|
.tab-sharing-icon-overlay,
|
2015-07-04 23:24:50 +03:00
|
|
|
.tab-icon-sound,
|
2013-05-02 20:05:50 +04:00
|
|
|
.tab-close-button {
|
|
|
|
margin-top: 1px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab-throbber,
|
2016-06-22 14:07:39 +03:00
|
|
|
.tab-sharing-icon-overlay,
|
2013-05-02 20:05:50 +04:00
|
|
|
.tab-icon-image {
|
|
|
|
height: 16px;
|
|
|
|
width: 16px;
|
2016-05-13 08:19:58 +03:00
|
|
|
margin-inline-end: 6px;
|
2013-05-02 20:05:50 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
.tab-icon-image {
|
|
|
|
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
|
|
|
|
}
|
|
|
|
|
2016-06-22 14:07:39 +03:00
|
|
|
.tab-icon-image[sharing]:not([selected]),
|
|
|
|
.tab-sharing-icon-overlay {
|
|
|
|
animation: 3s linear pulse infinite;
|
|
|
|
}
|
|
|
|
|
|
|
|
@keyframes pulse {
|
|
|
|
0%, 16.66%, 83.33%, 100% {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
33.33%, 66.66% {
|
|
|
|
opacity: 1;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab-icon-image[sharing]:not([selected]) {
|
|
|
|
animation-delay: -1.5s;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab-sharing-icon-overlay {
|
|
|
|
/* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
|
|
|
|
margin-inline-start: -22px;
|
|
|
|
position: relative;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab-sharing-icon-overlay[sharing="camera"] {
|
2016-10-18 20:35:30 +03:00
|
|
|
list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
|
2016-06-22 14:07:39 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
.tab-sharing-icon-overlay[sharing="microphone"] {
|
2016-10-18 20:35:30 +03:00
|
|
|
list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
|
2016-06-22 14:07:39 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
.tab-sharing-icon-overlay[sharing="screen"] {
|
2016-10-18 20:35:30 +03:00
|
|
|
list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
|
2016-06-22 14:07:39 +03:00
|
|
|
}
|
|
|
|
|
2015-01-13 23:33:26 +03:00
|
|
|
.tab-icon-overlay {
|
|
|
|
width: 16px;
|
|
|
|
height: 16px;
|
2015-09-23 17:27:20 +03:00
|
|
|
margin-top: -8px;
|
|
|
|
margin-inline-start: -15px;
|
2016-03-09 02:18:48 +03:00
|
|
|
margin-inline-end: -1px;
|
2015-08-07 03:16:06 +03:00
|
|
|
position: relative;
|
2015-01-13 23:33:26 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
.tab-icon-overlay[crashed] {
|
|
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
|
|
|
|
}
|
|
|
|
|
2015-08-12 08:32:27 +03:00
|
|
|
.tab-icon-overlay[soundplaying],
|
|
|
|
.tab-icon-overlay[muted]:not([crashed]) {
|
2015-09-23 17:27:20 +03:00
|
|
|
border-radius: 10px;
|
2015-07-04 23:24:50 +03:00
|
|
|
}
|
|
|
|
|
2015-08-12 08:32:27 +03:00
|
|
|
.tab-icon-overlay[soundplaying]:hover,
|
|
|
|
.tab-icon-overlay[muted]:not([crashed]):hover {
|
2015-08-01 18:53:03 +03:00
|
|
|
background-color: white;
|
|
|
|
}
|
|
|
|
|
2015-08-12 08:32:27 +03:00
|
|
|
.tab-icon-overlay[soundplaying] {
|
2015-08-01 18:53:03 +03:00
|
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
|
|
|
|
}
|
|
|
|
|
2015-08-12 08:32:27 +03:00
|
|
|
.tab-icon-overlay[muted]:not([crashed]) {
|
2015-07-19 04:21:03 +03:00
|
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
|
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
|
|
|
|
.tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
|
2015-08-07 06:40:44 +03:00
|
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
|
2015-07-19 04:21:03 +03:00
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
#TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
|
|
|
|
.tab-icon-overlay[muted][selected]:-moz-lwtheme-brighttext:not(:hover) {
|
2015-08-07 06:40:44 +03:00
|
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
|
2015-07-19 04:21:03 +03:00
|
|
|
}
|
|
|
|
|
2014-05-28 23:26:14 +04:00
|
|
|
.tab-throbber[busy] {
|
2013-05-02 20:05:50 +04:00
|
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png");
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab-throbber[progress] {
|
2016-03-15 13:04:22 +03:00
|
|
|
list-style-image: url("chrome://global/skin/icons/loading.png");
|
2013-05-02 20:05:50 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
.tab-label {
|
2016-05-13 08:19:58 +03:00
|
|
|
margin-inline-end: 0;
|
|
|
|
margin-inline-start: 0;
|
2013-05-02 20:05:50 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
.tab-close-button {
|
2016-05-13 08:19:58 +03:00
|
|
|
margin-inline-start: 4px;
|
|
|
|
margin-inline-end: -2px;
|
2013-05-02 20:05:50 +04:00
|
|
|
padding: 0;
|
2013-03-08 14:57:00 +04:00
|
|
|
}
|
|
|
|
|
2015-07-04 23:24:50 +03:00
|
|
|
.tab-icon-sound {
|
2016-05-13 08:19:58 +03:00
|
|
|
margin-inline-start: 4px;
|
2015-07-04 23:24:50 +03:00
|
|
|
width: 16px;
|
|
|
|
height: 16px;
|
|
|
|
padding: 0;
|
|
|
|
}
|
|
|
|
|
2016-08-19 15:29:20 +03:00
|
|
|
.tab-icon-sound[soundplaying],
|
2015-07-19 04:21:03 +03:00
|
|
|
.tab-icon-sound[muted] {
|
2016-08-19 15:29:20 +03:00
|
|
|
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
|
|
|
|
filter: url(chrome://browser/skin/filters.svg#fill);
|
|
|
|
fill: currentColor;
|
2015-07-04 23:24:50 +03:00
|
|
|
}
|
|
|
|
|
2016-08-19 15:29:20 +03:00
|
|
|
.tab-icon-sound[muted] {
|
|
|
|
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
|
2015-07-04 23:24:50 +03:00
|
|
|
}
|
|
|
|
|
2016-08-19 15:29:20 +03:00
|
|
|
.tab-icon-sound:-moz-lwtheme-darktext[soundplaying],
|
|
|
|
.tab-icon-sound:-moz-lwtheme-darktext[muted] {
|
|
|
|
filter: url(chrome://browser/skin/filters.svg#fill) drop-shadow(1px 1px 1px white);
|
2015-07-19 04:21:03 +03:00
|
|
|
}
|
|
|
|
|
2016-08-19 15:29:20 +03:00
|
|
|
.tab-icon-sound:-moz-lwtheme-brighttext[soundplaying],
|
|
|
|
.tab-icon-sound:-moz-lwtheme-brighttext[muted] {
|
|
|
|
filter: url(chrome://browser/skin/filters.svg#fill) drop-shadow(1px 1px 1px black);
|
2015-07-19 04:21:03 +03:00
|
|
|
}
|
|
|
|
|
2016-08-19 15:29:20 +03:00
|
|
|
.tab-icon-sound[soundplaying]:not(:hover),
|
|
|
|
.tab-icon-sound[muted]:not(:hover) {
|
|
|
|
opacity: .8;
|
2015-07-19 04:21:03 +03:00
|
|
|
}
|
|
|
|
|
2016-10-20 23:19:11 +03:00
|
|
|
.tab-icon-sound[soundplaying-scheduledremoval]:not(:hover),
|
|
|
|
.tab-icon-overlay[soundplaying-scheduledremoval]:not(:hover) {
|
|
|
|
transition: opacity .3s linear var(--soundplaying-removal-delay);
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
|
2013-03-08 14:57:00 +04:00
|
|
|
.tab-background,
|
|
|
|
.tabs-newtab-button {
|
|
|
|
/* overlap the tab curves */
|
2016-05-13 08:19:58 +03:00
|
|
|
margin-inline-end: -@tabCurveHalfWidth@;
|
|
|
|
margin-inline-start: -@tabCurveHalfWidth@;
|
2013-03-08 14:57:00 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
|
2016-05-13 08:19:58 +03:00
|
|
|
padding-inline-end: @tabCurveHalfWidth@;
|
|
|
|
padding-inline-start: @tabCurveHalfWidth@;
|
2013-03-08 14:57:00 +04:00
|
|
|
}
|
|
|
|
|
2014-06-10 18:56:14 +04:00
|
|
|
/* 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;
|
2015-08-09 12:13:27 +03:00
|
|
|
margin-bottom: var(--navbar-tab-toolbar-highlight-overlap);
|
2014-06-10 18:56:14 +04:00
|
|
|
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]) {
|
2016-05-13 08:19:58 +03:00
|
|
|
margin-inline-start: -2px;
|
|
|
|
margin-inline-end: -12px;
|
2014-06-10 18:56:14 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
|
2016-05-13 08:19:58 +03:00
|
|
|
margin-inline-start: -12px;
|
|
|
|
margin-inline-end: -2px;
|
2014-06-10 18:56:14 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
.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;
|
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-start[selected=true]::after,
|
|
|
|
.tab-background-start[selected=true]::before,
|
2013-03-08 14:57:00 +04:00
|
|
|
.tab-background-start,
|
|
|
|
.tab-background-end,
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-end[selected=true]::after,
|
|
|
|
.tab-background-end[selected=true]::before {
|
2015-01-09 22:42:00 +03:00
|
|
|
min-height: var(--tab-min-height);
|
2015-01-28 19:50:00 +03:00
|
|
|
width: @tabCurveWidth@;
|
2013-03-08 14:57:00 +04:00
|
|
|
}
|
|
|
|
|
2015-03-16 21:30:41 +03:00
|
|
|
.tabbrowser-tab:not([visuallyselected=true]),
|
2013-08-26 19:34:16 +04:00
|
|
|
.tabbrowser-tab:-moz-lwtheme {
|
|
|
|
color: inherit;
|
|
|
|
}
|
|
|
|
|
2013-03-08 14:57:00 +04:00
|
|
|
/* 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.
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-start[selected=true]::after,
|
|
|
|
.tab-background-end[selected=true]::after {
|
2013-03-08 14:57:00 +04:00
|
|
|
/* position ::after on top of its parent */
|
2016-05-13 08:19:58 +03:00
|
|
|
margin-inline-start: -@tabCurveWidth@;
|
2013-05-22 23:47:12 +04:00
|
|
|
background-size: 100% 100%;
|
|
|
|
content: "";
|
2013-03-08 14:57:00 +04:00
|
|
|
display: -moz-box;
|
2013-05-30 02:16:48 +04:00
|
|
|
position: relative;
|
2013-03-08 14:57:00 +04:00
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-start[selected=true]::before,
|
|
|
|
.tab-background-end[selected=true]::before {
|
2013-03-08 14:57:00 +04:00
|
|
|
/* all ::before pseudo elements */
|
|
|
|
content: "";
|
|
|
|
display: -moz-box;
|
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-start[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before,
|
|
|
|
.tab-background-end[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before {
|
2013-10-28 11:49:37 +04:00
|
|
|
background-image: url(chrome://browser/skin/tabbrowser/tab-selected-start.svg);
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-end[selected=true]:-moz-locale-dir(ltr):not(:-moz-lwtheme)::before,
|
|
|
|
.tab-background-start[selected=true]:-moz-locale-dir(rtl):not(:-moz-lwtheme)::before {
|
2013-10-28 11:49:37 +04:00
|
|
|
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. */
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before,
|
|
|
|
.tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before {
|
2013-03-08 14:57:00 +04:00
|
|
|
clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start);
|
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before,
|
|
|
|
.tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before {
|
2013-03-08 14:57:00 +04:00
|
|
|
clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end);
|
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
|
|
|
|
.tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
|
2013-05-22 23:47:12 +04:00
|
|
|
background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start.png);
|
2013-03-08 14:57:00 +04:00
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
|
|
|
|
.tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
|
2013-05-22 23:47:12 +04:00
|
|
|
background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end.png);
|
2013-03-08 14:57:00 +04:00
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-middle[selected=true] {
|
2013-09-14 04:28:11 +04:00
|
|
|
background-clip: padding-box, padding-box, content-box;
|
|
|
|
background-color: @fgTabBackgroundColor@;
|
2013-03-08 14:57:00 +04:00
|
|
|
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
|
2013-05-30 02:16:48 +04:00
|
|
|
@fgTabTexture@,
|
2013-09-14 04:28:11 +04:00
|
|
|
none;
|
2013-03-08 14:57:00 +04:00
|
|
|
background-repeat: repeat-x;
|
2015-08-08 17:57:55 +03:00
|
|
|
background-size: var(--tab-stroke-background-size), auto 100%;
|
2013-09-14 04:28:11 +04:00
|
|
|
/* 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;
|
2013-05-04 11:25:59 +04:00
|
|
|
}
|
|
|
|
|
2013-11-15 15:13:52 +04:00
|
|
|
/* Selected tab lightweight theme styles.
|
|
|
|
See browser-lightweightTheme.css for information about run-time changes to LWT styles. */
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-middle[selected=true]:-moz-lwtheme {
|
2013-09-14 04:28:11 +04:00
|
|
|
background-color: transparent;
|
2013-11-15 15:13:52 +04:00
|
|
|
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png),
|
|
|
|
@fgTabTextureLWT@;/*,
|
|
|
|
lwtHeader;*/
|
2013-05-04 11:25:59 +04:00
|
|
|
/* Don't stretch the LWT header images */
|
2015-08-08 17:57:55 +03:00
|
|
|
background-size: var(--tab-stroke-background-size), auto 100%, auto auto;
|
2013-05-04 11:25:59 +04:00
|
|
|
}
|
|
|
|
|
2013-10-28 11:49:37 +04:00
|
|
|
/* These LWT styles are normally overridden by browser-lightweightTheme.css */
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-start[selected=true]:-moz-lwtheme::before,
|
|
|
|
.tab-background-end[selected=true]:-moz-lwtheme::before {
|
2013-05-04 11:25:59 +04:00
|
|
|
background-image: @fgTabTextureLWT@;
|
2013-03-08 14:57:00 +04:00
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-start[selected=true]:-moz-lwtheme::before,
|
|
|
|
.tab-background-end[selected=true]:-moz-lwtheme::before,
|
|
|
|
.tab-background-middle[selected=true]:-moz-lwtheme {
|
2013-03-08 14:57:00 +04:00
|
|
|
background-color: transparent;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* End selected tab */
|
|
|
|
|
|
|
|
/* new tab button border and gradient on hover */
|
2016-08-24 17:40:11 +03:00
|
|
|
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
|
2013-03-08 14:57:00 +04:00
|
|
|
.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);
|
2015-01-28 19:50:00 +03:00
|
|
|
background-position: left bottom, @tabCurveWidth@ bottom, right bottom;
|
2013-03-08 14:57:00 +04:00
|
|
|
background-repeat: no-repeat;
|
2015-01-28 19:50:00 +03:00
|
|
|
background-size: @tabCurveWidth@ 100%, calc(100% - (2 * @tabCurveWidth@)) 100%, @tabCurveWidth@ 100%;
|
2013-03-08 14:57:00 +04:00
|
|
|
}
|
|
|
|
|
|
|
|
/* Tab pointer-events */
|
|
|
|
.tabbrowser-tab {
|
|
|
|
pointer-events: none;
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab-background-middle,
|
|
|
|
.tabs-newtab-button,
|
2015-07-04 23:24:50 +03:00
|
|
|
.tab-icon-overlay[soundplaying],
|
2015-08-05 00:59:39 +03:00
|
|
|
.tab-icon-overlay[muted]:not([crashed]),
|
2015-07-04 23:24:50 +03:00
|
|
|
.tab-icon-sound,
|
2013-03-08 14:57:00 +04:00
|
|
|
.tab-close-button {
|
|
|
|
pointer-events: auto;
|
|
|
|
}
|
|
|
|
|
|
|
|
/* Pinned tabs */
|
|
|
|
|
2013-05-31 16:05:14 +04:00
|
|
|
/* Pinned tab separators need position: absolute when positioned (during overflow). */
|
2013-03-08 14:57:00 +04:00
|
|
|
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before {
|
2013-05-31 16:05:14 +04:00
|
|
|
height: 100%;
|
|
|
|
position: absolute;
|
2013-03-08 14:57:00 +04:00
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
|
|
|
|
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
|
2014-10-26 13:08:00 +03:00
|
|
|
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%);
|
2015-01-09 22:42:00 +03:00
|
|
|
background-position: center bottom var(--tab-toolbar-navbar-overlap);
|
2013-03-08 14:57:00 +04:00
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 85% 100%;
|
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) {
|
2015-10-12 20:10:44 +03:00
|
|
|
background-position: left bottom var(--tab-toolbar-navbar-overlap);
|
|
|
|
background-size: 34px 100%;
|
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-label[attention]:not([selected="true"]) {
|
2015-10-12 20:10:44 +03:00
|
|
|
font-weight: bold;
|
|
|
|
}
|
|
|
|
|
2015-08-27 13:52:34 +03:00
|
|
|
/* Tab separators */
|
|
|
|
|
|
|
|
.tabbrowser-tab::after,
|
|
|
|
.tabbrowser-tab::before {
|
2016-05-13 08:19:58 +03:00
|
|
|
margin-inline-start: -1px;
|
2016-09-07 09:15:59 +03:00
|
|
|
/* Vertical margin doesn't work here for positioned pinned tabs, see
|
|
|
|
bug 1198236 and bug 1300410. We're using linear-gradient instead
|
|
|
|
to cut off the border at the top and at the bottom. */
|
|
|
|
border-left: 1px solid;
|
|
|
|
border-image: linear-gradient(transparent 6px,
|
|
|
|
currentColor 6px,
|
|
|
|
currentColor calc(100% - 5px),
|
|
|
|
transparent calc(100% - 5px));
|
|
|
|
border-image-slice: 1;
|
2016-09-07 12:47:02 +03:00
|
|
|
/* The 1px border and negative margin may amount to a different number of
|
|
|
|
device pixels (bug 477157), so we also set a width to match the margin. */
|
|
|
|
width: 1px;
|
|
|
|
box-sizing: border-box;
|
2015-09-24 18:38:59 +03:00
|
|
|
opacity: 0.2;
|
2015-09-22 19:03:23 +03:00
|
|
|
}
|
|
|
|
|
2015-09-24 18:38:59 +03:00
|
|
|
#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
|
|
|
|
#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
|
|
|
|
opacity: 0.4;
|
2015-08-27 13:52:34 +03:00
|
|
|
}
|
|
|
|
|
|
|
|
/* Also show separators beside the selected tab when dragging it. */
|
2013-03-08 14:57:00 +04:00
|
|
|
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
|
2016-08-24 17:40:11 +03:00
|
|
|
.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 {
|
2015-09-25 18:42:44 +03:00
|
|
|
content: "";
|
|
|
|
display: -moz-box;
|
2015-06-26 14:39:00 +03:00
|
|
|
}
|
|
|
|
|
2013-03-08 14:57:00 +04:00
|
|
|
/* New tab button */
|
|
|
|
|
|
|
|
.tabs-newtab-button {
|
2015-01-28 19:50:00 +03:00
|
|
|
width: calc(36px + @tabCurveWidth@);
|
2013-03-08 14:57:00 +04:00
|
|
|
}
|
2016-06-15 00:43:40 +03:00
|
|
|
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
|
|
/* image preloading hack from like lowdpi styles */
|
|
|
|
#tabbrowser-tabs::before {
|
|
|
|
background-image:
|
|
|
|
url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png),
|
|
|
|
url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png),
|
|
|
|
url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png);
|
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
|
2016-06-15 00:43:40 +03:00
|
|
|
.tabs-newtab-button:hover {
|
|
|
|
background-image: url(chrome://browser/skin/tabbrowser/tab-background-start@2x.png),
|
|
|
|
url(chrome://browser/skin/tabbrowser/tab-background-middle@2x.png),
|
|
|
|
url(chrome://browser/skin/tabbrowser/tab-background-end@2x.png);
|
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-middle[selected=true] {
|
2016-06-15 00:43:40 +03:00
|
|
|
background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png),
|
|
|
|
@fgTabTexture@,
|
|
|
|
none;
|
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
|
|
|
|
.tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
|
2016-06-15 00:43:40 +03:00
|
|
|
background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start@2x.png);
|
|
|
|
}
|
|
|
|
|
2016-08-24 17:40:11 +03:00
|
|
|
.tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
|
|
|
|
.tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
|
2016-06-15 00:43:40 +03:00
|
|
|
background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end@2x.png);
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab-throbber[busy] {
|
|
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/connecting@2x.png");
|
|
|
|
}
|
|
|
|
|
|
|
|
.tab-icon-image {
|
|
|
|
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
|
|
|
|
}
|
2016-07-02 00:18:44 +03:00
|
|
|
|
|
|
|
.tab-throbber[progress] {
|
|
|
|
list-style-image: url("chrome://global/skin/icons/loading@2x.png");
|
|
|
|
}
|
2016-06-15 00:43:40 +03:00
|
|
|
}
|
2016-08-19 15:29:20 +03:00
|
|
|
|
|
|
|
/* All tabs menupopup */
|
|
|
|
|
|
|
|
.alltabs-item[tabIsVisible] {
|
|
|
|
/* box-shadow instead of background-color to work around native styling */
|
|
|
|
box-shadow: inset -5px 0 ThreeDShadow;
|
|
|
|
}
|
|
|
|
|
|
|
|
.alltabs-endimage[soundplaying],
|
|
|
|
.alltabs-endimage[muted] {
|
|
|
|
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
|
|
|
|
filter: url(chrome://browser/skin/filters.svg#fill);
|
|
|
|
fill: currentColor;
|
|
|
|
}
|
|
|
|
|
|
|
|
.alltabs-endimage[muted] {
|
|
|
|
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
|
|
|
|
}
|