зеркало из https://github.com/mozilla/gecko-dev.git
797 строки
22 KiB
CSS
797 строки
22 KiB
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
|
|
%filter substitution
|
|
%define horizontalTabPadding 9px
|
|
|
|
#titlebar,
|
|
#tabbrowser-tabs {
|
|
--tab-min-height: 33px;
|
|
}
|
|
|
|
:root[uidensity=compact] #titlebar,
|
|
:root[uidensity=compact] #tabbrowser-tabs {
|
|
--tab-min-height: 29px;
|
|
}
|
|
|
|
:root[uidensity=touch] #titlebar,
|
|
:root[uidensity=touch] #tabbrowser-tabs {
|
|
--tab-min-height: 41px;
|
|
}
|
|
|
|
#tabbrowser-tabs {
|
|
--tabs-top-border-width: 0px;
|
|
--tab-min-width: 76px;
|
|
--tab-loading-fill: #0A84FF;
|
|
}
|
|
|
|
#tabbrowser-tabs:-moz-lwtheme {
|
|
--tab-line-color: var(--lwt-accent-color);
|
|
}
|
|
|
|
#tabbrowser-tabpanels {
|
|
/* Value for --in-content-page-background in in-content/common.inc.css */
|
|
background-color: #f9f9fa;
|
|
}
|
|
|
|
:root[privatebrowsingmode=temporary] #tabbrowser-tabpanels {
|
|
/* Value for --in-content-page-background in aboutPrivateBrowsing.css */
|
|
background-color: #25003e;
|
|
}
|
|
|
|
#tabbrowser-tabs,
|
|
#tabbrowser-tabs > .tabbrowser-arrowscrollbox,
|
|
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] {
|
|
min-height: var(--tab-min-height);
|
|
}
|
|
|
|
.tab-stack {
|
|
min-height: inherit;
|
|
}
|
|
|
|
@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") {
|
|
.tab-stack {
|
|
/* Needed to allow tabs to shrink to be skinnier than their page-title: */
|
|
min-width: 0;
|
|
}
|
|
|
|
.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
|
|
/* Needed to prevent tabstrip from growing as wide as the sum of the tabs'
|
|
page-title widths (when we'd rather have it be as wide as the window and
|
|
compress the tabs to their minimum size): */
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
.tabbrowser-tab {
|
|
-moz-appearance: none;
|
|
background-color: transparent;
|
|
border-radius: 0;
|
|
border-width: 0;
|
|
margin: 0;
|
|
padding: 0;
|
|
-moz-box-align: stretch;
|
|
}
|
|
|
|
/* The selected tab should appear above the border between the tabs toolbar and
|
|
the navigation toolbar. */
|
|
.tabbrowser-tab[visuallyselected=true] {
|
|
position: relative;
|
|
z-index: 2;
|
|
}
|
|
|
|
.tab-content {
|
|
padding: 0 @horizontalTabPadding@;
|
|
}
|
|
|
|
:root:not([uidensity=compact]) .tab-content[pinned] {
|
|
padding: 0 12px;
|
|
}
|
|
|
|
:root[sessionrestored] .tab-loading-burst {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
:root[sessionrestored] .tab-loading-burst::before {
|
|
position: absolute;
|
|
content: "";
|
|
/* We set the width to be a percentage of the tab's width so that we can use
|
|
the `scale` transform to scale it up to the full size of the tab when the
|
|
burst occurs. We also need to set the margin-inline-start so that the
|
|
center of the burst matches the center of the favicon. */
|
|
width: 5%;
|
|
height: 100%;
|
|
/* Center the burst over the .tab-loading-burst; it's 9px from the edge thanks
|
|
to .tab-content, plus 8px more since .tab-loading-burst is 16px wide. */
|
|
margin-inline-start: calc(17px - 2.5%);
|
|
}
|
|
|
|
:root[sessionrestored] .tab-loading-burst[pinned]::before {
|
|
/* This is like the margin-inline-start rule above, except that icons for
|
|
pinned tabs are 12px from the edge. */
|
|
margin-inline-start: calc(20px - 2.5%);
|
|
}
|
|
|
|
:root[sessionrestored] .tab-loading-burst[bursting]::before {
|
|
background-image: url("chrome://browser/skin/tabbrowser/loading-burst.svg");
|
|
background-position: center center;
|
|
background-size: 100% auto;
|
|
background-repeat: no-repeat;
|
|
animation: tab-burst-animation 375ms cubic-bezier(0,0,.58,1);
|
|
-moz-context-properties: fill;
|
|
fill: var(--tab-loading-fill);
|
|
}
|
|
|
|
:root[sessionrestored] .tab-loading-burst[bursting][notselectedsinceload]::before {
|
|
animation-name: tab-burst-animation-light;
|
|
}
|
|
|
|
@keyframes tab-burst-animation {
|
|
0% {
|
|
opacity: 0.4;
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(40);
|
|
}
|
|
}
|
|
|
|
@keyframes tab-burst-animation-light {
|
|
0% {
|
|
opacity: 0.2;
|
|
transform: scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: scale(40);
|
|
}
|
|
}
|
|
|
|
.tab-throbber,
|
|
.tab-throbber-fallback,
|
|
.tab-icon-image,
|
|
.tab-sharing-icon-overlay,
|
|
.tab-icon-sound,
|
|
.tab-close-button {
|
|
margin-top: 1px;
|
|
}
|
|
|
|
.tab-throbber,
|
|
.tab-throbber-fallback,
|
|
.tab-icon-image,
|
|
.tab-sharing-icon-overlay {
|
|
height: 16px;
|
|
width: 16px;
|
|
}
|
|
|
|
.tab-throbber:not([pinned]),
|
|
.tab-throbber-fallback:not([pinned]),
|
|
.tab-sharing-icon-overlay:not([pinned]),
|
|
.tab-icon-image:not([pinned]) {
|
|
margin-inline-end: 6px;
|
|
}
|
|
|
|
:root[sessionrestored] .tab-throbber[busy] {
|
|
position: relative;
|
|
overflow: hidden;
|
|
}
|
|
|
|
:root[sessionrestored] .tab-throbber[busy]::before {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("chrome://browser/skin/tabbrowser/loading.svg");
|
|
background-position: left center;
|
|
background-repeat: no-repeat;
|
|
width: 960px;
|
|
height: 100%;
|
|
animation: tab-throbber-animation 1.05s steps(60) infinite;
|
|
-moz-context-properties: fill;
|
|
|
|
/* XXX: It would be nice to transition between the "connecting" color and the
|
|
"loading" color (see the `.tab-throbber[progress]::before` rule below);
|
|
however, that currently forces main thread painting. When this is fixed
|
|
(after WebRender lands), we can do something like
|
|
`transition: fill 0.333s, opacity 0.333s;` */
|
|
|
|
fill: currentColor;
|
|
opacity: 0.7;
|
|
}
|
|
|
|
:root[sessionrestored] .tab-throbber[busy]:-moz-locale-dir(rtl)::before {
|
|
animation-name: tab-throbber-animation-rtl;
|
|
}
|
|
|
|
@keyframes tab-throbber-animation {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(-100%); }
|
|
}
|
|
|
|
@keyframes tab-throbber-animation-rtl {
|
|
0% { transform: translateX(0); }
|
|
100% { transform: translateX(100%); }
|
|
}
|
|
|
|
#TabsToolbar[brighttext] .tab-throbber[busy]:not([selected=true])::before {
|
|
/* Don't change the --tab-loading-fill variable because this should only affect
|
|
tabs that are not visually selected. */
|
|
fill: #717171;
|
|
opacity: 1;
|
|
}
|
|
|
|
:root[sessionrestored] .tab-throbber[progress]::before {
|
|
fill: var(--tab-loading-fill);
|
|
opacity: 1;
|
|
}
|
|
|
|
#TabsToolbar[brighttext] .tab-throbber[progress]:not([selected=true])::before {
|
|
/* Don't change the --tab-loading-fill variable because this should only affect
|
|
tabs that are not visually selected. */
|
|
fill: #84c1ff;
|
|
}
|
|
|
|
#tabbrowser-tabs[schedulepressure] .tab-throbber,
|
|
#tabbrowser-tabs:not([schedulepressure]) .tab-throbber-fallback {
|
|
display: none;
|
|
}
|
|
|
|
.tab-icon-image {
|
|
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.tab-icon-image[sharing]:not([selected]),
|
|
.tab-sharing-icon-overlay {
|
|
animation: 3s linear tab-sharing-icon-pulse infinite;
|
|
}
|
|
|
|
@keyframes tab-sharing-icon-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;
|
|
-moz-context-properties: fill;
|
|
fill: rgb(224, 41, 29);
|
|
}
|
|
|
|
.tab-sharing-icon-overlay[pinned] {
|
|
margin-inline-start: -16px;
|
|
}
|
|
|
|
.tab-sharing-icon-overlay[sharing="camera"] {
|
|
list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
|
|
}
|
|
|
|
.tab-sharing-icon-overlay[sharing="microphone"] {
|
|
list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
|
|
}
|
|
|
|
.tab-sharing-icon-overlay[sharing="screen"] {
|
|
list-style-image: url("chrome://browser/skin/notification-icons/screen.svg");
|
|
}
|
|
|
|
.tab-icon-overlay {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin-top: -8px;
|
|
margin-inline-start: -15px;
|
|
margin-inline-end: -1px;
|
|
position: relative;
|
|
}
|
|
|
|
.tab-icon-overlay[pinned] {
|
|
margin-inline-start: -6px;
|
|
margin-inline-end: -10px;
|
|
}
|
|
|
|
.tab-icon-overlay[crashed] {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
|
|
}
|
|
|
|
.tab-icon-overlay[soundplaying],
|
|
.tab-icon-overlay[muted]:not([crashed]),
|
|
.tab-icon-overlay[activemedia-blocked]:not([crashed]) {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
.tab-icon-overlay[soundplaying]:hover,
|
|
.tab-icon-overlay[muted]:not([crashed]):hover,
|
|
.tab-icon-overlay[activemedia-blocked]: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");
|
|
}
|
|
|
|
.tab-icon-overlay[activemedia-blocked]:not([crashed]) {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
|
|
}
|
|
|
|
#TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
|
|
.tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext: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([selected]):not(:hover),
|
|
.tab-icon-overlay[muted][selected]:-moz-lwtheme-brighttext:not(:hover) {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
|
|
}
|
|
|
|
#TabsToolbar[brighttext] .tab-icon-overlay[activemedia-blocked]:not([crashed]):not([selected]):not(:hover),
|
|
.tab-icon-overlay[activemedia-blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
|
|
}
|
|
|
|
.tab-throbber-fallback[busy] {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-connecting.png");
|
|
}
|
|
|
|
.tab-throbber-fallback[progress] {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading.png");
|
|
}
|
|
|
|
#TabsToolbar[brighttext] .tab-throbber-fallback[progress]:not([selected=true]) {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading-inverted.png");
|
|
}
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
.tab-throbber-fallback[busy] {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-connecting@2x.png");
|
|
}
|
|
|
|
.tab-throbber-fallback[progress] {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading@2x.png");
|
|
}
|
|
|
|
#TabsToolbar[brighttext] .tab-throbber-fallback[progress]:not([selected=true]) {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading-inverted@2x.png");
|
|
}
|
|
}
|
|
|
|
.tab-label {
|
|
margin-inline-end: 0;
|
|
margin-inline-start: 0;
|
|
/* Maintain consistent alignment in case of font fallback for non-Latin characters. */
|
|
line-height: 1.7em;
|
|
}
|
|
|
|
.tab-close-button {
|
|
margin-inline-end: -2px;
|
|
-moz-context-properties: fill, fill-opacity, stroke-opacity;
|
|
stroke-opacity: var(--toolbarbutton-icon-fill-opacity);
|
|
}
|
|
|
|
:root[uidensity=touch] .tab-close-button {
|
|
margin-inline-end: -@horizontalTabPadding@;
|
|
padding: 10px calc(@horizontalTabPadding@ - 2px);
|
|
}
|
|
|
|
.tab-icon-sound {
|
|
margin-inline-start: 1px;
|
|
width: 16px;
|
|
height: 16px;
|
|
padding: 0;
|
|
}
|
|
|
|
.tab-icon-sound[soundplaying],
|
|
.tab-icon-sound[muted],
|
|
.tab-icon-sound[activemedia-blocked] {
|
|
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg);
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.tab-icon-sound[muted] {
|
|
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg);
|
|
}
|
|
|
|
.tab-icon-sound[activemedia-blocked] {
|
|
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg);
|
|
}
|
|
|
|
:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[soundplaying],
|
|
:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[muted],
|
|
:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-darktext[activemedia-blocked] {
|
|
filter: drop-shadow(1px 1px 1px white);
|
|
}
|
|
|
|
:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[soundplaying],
|
|
:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[muted],
|
|
:root[lwtheme-image] .tab-icon-sound:-moz-lwtheme-brighttext[activemedia-blocked] {
|
|
filter: drop-shadow(1px 1px 1px black);
|
|
}
|
|
|
|
.tab-icon-sound[soundplaying]:not(:hover),
|
|
.tab-icon-sound[muted]:not(:hover),
|
|
.tab-icon-sound[activemedia-blocked]:not(:hover) {
|
|
opacity: .8;
|
|
}
|
|
|
|
.tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
|
|
.tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
|
|
transition: opacity .3s linear var(--soundplaying-removal-delay);
|
|
opacity: 0;
|
|
}
|
|
|
|
/* Tab Overflow */
|
|
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
|
|
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
|
|
width: 18px;
|
|
background-image: url(chrome://browser/skin/tabbrowser/tab-overflow-indicator.png);
|
|
background-size: 17px 100%;
|
|
background-repeat: no-repeat;
|
|
border-left: 1px solid;
|
|
border-image: linear-gradient(rgba(255,255,255,.2),
|
|
rgba(255,255,255,.2) calc(100% - 1px - @navbarTabsShadowSize@),
|
|
transparent calc(100% - 1px - @navbarTabsShadowSize@));
|
|
border-image-slice: 1;
|
|
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]) {
|
|
margin-inline-start: -1px;
|
|
margin-inline-end: -17px;
|
|
}
|
|
|
|
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
|
|
margin-inline-start: -17px;
|
|
margin-inline-end: -1px;
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
.tabbrowser-tab:not([visuallyselected=true]),
|
|
.tabbrowser-tab:-moz-lwtheme {
|
|
color: inherit;
|
|
}
|
|
|
|
.tabbrowser-tab[visuallyselected=true]:-moz-lwtheme {
|
|
color: var(--lwt-tab-text, var(--toolbar-color, inherit));
|
|
}
|
|
|
|
.tab-line {
|
|
height: 2px;
|
|
}
|
|
|
|
/* Selected tab */
|
|
|
|
.tab-background {
|
|
border: 1px none transparent;
|
|
background-clip: padding-box;
|
|
}
|
|
|
|
%ifdef MENUBAR_CAN_AUTOHIDE
|
|
#toolbar-menubar:not([autohide=true]) + #TabsToolbar,
|
|
%endif
|
|
:root:not([tabsintitlebar]),
|
|
:root[extradragspace] {
|
|
--tabs-top-border-width: 1px;
|
|
}
|
|
|
|
%ifdef MENUBAR_CAN_AUTOHIDE
|
|
#toolbar-menubar:not([autohide=true]) + #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab > .tab-stack > .tab-background,
|
|
%endif
|
|
:root:not([tabsintitlebar]) .tab-background,
|
|
:root[extradragspace] .tab-background {
|
|
border-top-style: solid;
|
|
}
|
|
|
|
.tab-background[selected=true] {
|
|
border-top-color: var(--tabs-border-color);
|
|
background-color: var(--toolbar-bgcolor);
|
|
background-image: var(--toolbar-bgimage);
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
.tab-line[selected=true] {
|
|
background-color: var(--tab-line-color);
|
|
}
|
|
|
|
/*
|
|
* LightweightThemeConsumer will set the current lightweight theme's header
|
|
* image to the lwt-header-image variable, used in each of the following rulesets.
|
|
*/
|
|
|
|
/* Lightweight theme on tabs */
|
|
:root[lwtheme-image] #tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab > .tab-stack > .tab-background[selected=true] {
|
|
background-attachment: scroll, scroll, fixed;
|
|
background-color: transparent;
|
|
background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)),
|
|
linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
|
|
var(--lwt-header-image);
|
|
background-position: 0 0, 0 0, right top;
|
|
background-repeat: repeat-x, repeat-x, no-repeat;
|
|
background-size: auto 100%, auto 100%, auto auto;
|
|
}
|
|
|
|
/* Tab hover */
|
|
|
|
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
|
|
background-color: rgba(0,0,0,.1);
|
|
}
|
|
|
|
#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]) {
|
|
background-color: rgba(255,255,255,.1);
|
|
}
|
|
|
|
.tab-line:not([selected=true]) {
|
|
opacity: 0;
|
|
transform: scaleX(0);
|
|
transition: transform 250ms var(--animation-easing-function), opacity 250ms var(--animation-easing-function);
|
|
}
|
|
|
|
.tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) {
|
|
background-color: rgba(0,0,0,.2);
|
|
opacity: 1;
|
|
transform: none;
|
|
}
|
|
|
|
#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab:hover > .tab-stack > .tab-background > .tab-line:not([selected=true]) {
|
|
background-color: rgba(255,255,255,.2);
|
|
}
|
|
|
|
/* Pinned tabs */
|
|
|
|
/* Pinned tab separators need position: absolute when positioned (during overflow). */
|
|
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::after {
|
|
position: absolute;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
}
|
|
|
|
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]:-moz-locale-dir(rtl)::after {
|
|
right: unset;
|
|
left: 0;
|
|
}
|
|
|
|
#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned] > .tab-stack {
|
|
border-inline-end: 1px solid transparent;
|
|
}
|
|
|
|
.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"]) {
|
|
background-image: url(chrome://browser/skin/tabbrowser/indicator-tab-attention.svg);
|
|
background-position: center bottom calc(-4px + @navbarTabsShadowSize@);
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) {
|
|
background-position-x: left 11px;
|
|
}
|
|
|
|
.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]):-moz-locale-dir(rtl) {
|
|
background-position-x: right 11px;
|
|
}
|
|
|
|
.tab-label[attention]:not([selected="true"]) {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Drag space */
|
|
|
|
.titlebar-placeholder[type="pre-tabs"],
|
|
.titlebar-placeholder[type="post-tabs"] {
|
|
width: 40px;
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.titlebar-placeholder[type="post-tabs"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Tab separators */
|
|
|
|
.titlebar-placeholder[type="pre-tabs"] {
|
|
border-inline-end: 1px solid;
|
|
opacity: 0.2;
|
|
}
|
|
|
|
.tabbrowser-tab::after,
|
|
.tabbrowser-tab::before {
|
|
border-left: 1px solid;
|
|
margin-top: 5px;
|
|
margin-bottom: 4px;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
/* Move the ::before pseudo-element on tabs 1px to the left
|
|
* to avoid resizing the tab when the pseudo-element is removed again
|
|
* (this currently happens when a tab is dragged and dropped).
|
|
*
|
|
* Note that this doesn't perfectly solve the issue (dragged tabs
|
|
* may still resize very slightly) on some DPI settings with uneven
|
|
* scaling factors on Windows, because of bug 477157.
|
|
*/
|
|
.tabbrowser-tab::before {
|
|
margin-inline-start: -1px;
|
|
}
|
|
|
|
%ifdef CAN_DRAW_IN_TITLEBAR
|
|
%ifdef MENUBAR_CAN_AUTOHIDE
|
|
:root[tabsintitlebar]:not([extradragspace]) #toolbar-menubar[autohide=true] + #TabsToolbar > #tabbrowser-tabs > .tabbrowser-tab::after,
|
|
%else
|
|
:root[tabsintitlebar]:not([extradragspace]) .tabbrowser-tab::after,
|
|
%endif
|
|
%endif
|
|
/* Show full height tab separators on hover. */
|
|
.tabbrowser-tab:hover::after,
|
|
#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforehovered]::after {
|
|
margin-top: var(--tabs-top-border-width);
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
/* Show full height tab separators on selected tabs. */
|
|
#tabbrowser-tabs:not([movingtab]) > .tabbrowser-tab[beforeselected-visible]::after,
|
|
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before,
|
|
.tabbrowser-tab[visuallyselected]::after {
|
|
border-color: var(--tabs-border-color);
|
|
margin-top: 0;
|
|
margin-bottom: @navbarTabsShadowSize@;
|
|
opacity: 1;
|
|
}
|
|
|
|
.tabbrowser-tab::after,
|
|
/* Also show separators beside the selected tab when dragging it. */
|
|
#tabbrowser-tabs[movingtab] > .tabbrowser-tab[visuallyselected]::before {
|
|
content: "";
|
|
display: -moz-box;
|
|
}
|
|
|
|
/* Tab bar scroll arrows */
|
|
|
|
.tabbrowser-arrowscrollbox > .scrollbutton-up,
|
|
.tabbrowser-arrowscrollbox > .scrollbutton-down {
|
|
list-style-image: url(chrome://browser/skin/arrow-left.svg);
|
|
-moz-context-properties: fill, fill-opacity;
|
|
fill: currentColor;
|
|
fill-opacity: var(--toolbarbutton-icon-fill-opacity);
|
|
color: inherit;
|
|
}
|
|
|
|
.tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
|
|
.tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
/* New tab button */
|
|
|
|
.tabs-newtab-button,
|
|
#TabsToolbar > #new-tab-button ,
|
|
#TabsToolbar > toolbarpaletteitem > #new-tab-button {
|
|
list-style-image: url(chrome://browser/skin/tabbrowser/newtab.svg);
|
|
}
|
|
|
|
/* All tabs button and menupopup */
|
|
|
|
#alltabs-button {
|
|
list-style-image: url(chrome://global/skin/icons/arrow-dropdown-16.svg);
|
|
}
|
|
|
|
.alltabs-item > .menu-iconic-left > .menu-iconic-icon {
|
|
list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
|
|
list-style-image: url("chrome://global/skin/icons/loading.png");
|
|
}
|
|
|
|
@media (min-resolution: 1.1dppx) {
|
|
.alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
|
|
list-style-image: url("chrome://global/skin/icons/loading@2x.png");
|
|
}
|
|
}
|
|
|
|
.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],
|
|
.alltabs-endimage[activemedia-blocked] {
|
|
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-playing.svg);
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.alltabs-endimage[muted] {
|
|
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-muted.svg);
|
|
}
|
|
|
|
.alltabs-endimage[activemedia-blocked] {
|
|
list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio-blocked.svg);
|
|
}
|
|
|
|
.restore-tabs-button-wrapper {
|
|
visibility: hidden;
|
|
position: fixed; /* so the button does not take up actual space and cause overflow buttons in the tabbar when hidden */
|
|
}
|
|
|
|
.restore-tabs-button-wrapper[shown] {
|
|
visibility: visible;
|
|
position: initial;
|
|
}
|
|
|
|
.restore-tabs-button {
|
|
box-sizing: border-box;
|
|
-moz-appearance: none;
|
|
background-color: hsl(0,0%,0%,.04);
|
|
border: 1px solid hsla(0,0%,16%,.2);
|
|
border-radius: 3px;
|
|
margin: 3px;
|
|
margin-inline-start: 9px;
|
|
transition: max-width 100ms;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.restore-tabs-button:hover {
|
|
background-color: hsl(0,0%,0%,.08);
|
|
}
|
|
|
|
.restore-tabs-button:active {
|
|
background-color: hsl(0,0%,0%,.11);
|
|
}
|
|
|
|
#TabsToolbar[brighttext] .restore-tabs-button {
|
|
background-color: hsl(0,0%,100%,.07);
|
|
border-color:currentColor;
|
|
color: currentColor;
|
|
opacity: .7;
|
|
}
|
|
|
|
#TabsToolbar[brighttext] .restore-tabs-button:hover {
|
|
background-color: hsl(0,0%,100%,.17);
|
|
}
|
|
|
|
#TabsToolbar[brighttext] .restore-tabs-button:active {
|
|
background-color: hsl(0,0%,100%,.27);
|
|
}
|
|
|
|
.restore-tabs-button > .toolbarbutton-icon {
|
|
display: none;
|
|
}
|
|
|
|
.restore-tabs-button > .toolbarbutton-text {
|
|
display: -moz-box;
|
|
}
|