forked from mirrors/gecko-dev
2f419065da
This is a start, there are more modules and scripts we can/should move, as well as tests. Differential Revision: https://phabricator.services.mozilla.com/D210676
892 lines
24 KiB
CSS
892 lines
24 KiB
CSS
/* 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/. */
|
|
|
|
@namespace html url("http://www.w3.org/1999/xhtml");
|
|
|
|
:root {
|
|
--tab-min-height: 36px;
|
|
&[uidensity=compact] {
|
|
--tab-min-height: 29px;
|
|
}
|
|
&[uidensity=touch] {
|
|
--tab-min-height: 41px;
|
|
}
|
|
|
|
--inline-tab-padding: 8px;
|
|
--tab-border-radius: 4px;
|
|
--tab-shadow-max-size: 6px;
|
|
--tab-block-margin: 4px;
|
|
--tab-selected-textcolor: var(--toolbar-color);
|
|
--tab-selected-bgcolor: var(--toolbar-bgcolor);
|
|
--tab-selected-color-scheme: var(--toolbar-color-scheme);
|
|
|
|
&[lwt-tab-selected="light"] {
|
|
--tab-selected-color-scheme: light;
|
|
}
|
|
&[lwt-tab-selected="dark"] {
|
|
--tab-selected-color-scheme: dark;
|
|
}
|
|
|
|
/* --tabpanel-background-color matches $in-content-page-background in newtab
|
|
(browser/components/newtab/content-src/styles/_variables.scss) */
|
|
--tabpanel-background-color: #F9F9FB;
|
|
@media (-moz-content-prefers-color-scheme: dark) {
|
|
--tabpanel-background-color: #2B2A33;
|
|
}
|
|
&[privatebrowsingmode=temporary] {
|
|
/* Value for --in-content-page-background in aboutPrivateBrowsing.css.
|
|
!important overrides the direct setting of this variable in
|
|
ThemeVariableMap.sys.mjs when the user has a theme that defines
|
|
ntp_background. */
|
|
--tabpanel-background-color: #25003e !important;
|
|
|
|
/* stylelint-disable-next-line media-query-no-invalid */
|
|
@media (-moz-bool-pref: "browser.privatebrowsing.felt-privacy-v1") {
|
|
--tabpanel-background-color: linear-gradient(45deg, #722291 0%, #45278D 50%, #393473 100%) !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
#tabbrowser-tabpanels {
|
|
appearance: none;
|
|
padding: 0;
|
|
color-scheme: unset;
|
|
background: var(--tabpanel-background-color);
|
|
|
|
&[pendingpaint] {
|
|
background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
|
|
background-repeat: no-repeat;
|
|
background-position: center center;
|
|
background-size: 30px;
|
|
}
|
|
|
|
browser:is([blank], [pendingpaint]) {
|
|
opacity: 0;
|
|
}
|
|
|
|
browser[type=content] {
|
|
color-scheme: env(-moz-content-preferred-color-scheme);
|
|
}
|
|
}
|
|
|
|
#tabbrowser-tabs {
|
|
--tab-min-width: 76px;
|
|
--tab-loading-fill: #0A84FF;
|
|
--tab-overflow-pinned-tabs-width: 0px;
|
|
padding-inline: var(--tab-overflow-pinned-tabs-width) 0;
|
|
/* Use a bigger flex value than the searchbar to prevent it from
|
|
* taking all the toolbar space. */
|
|
flex: 1000 1000;
|
|
|
|
&[positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) {
|
|
/* Add padding to match the shadow's blur radius so the
|
|
shadow doesn't get clipped when either the first or
|
|
last tab is selected */
|
|
padding-inline: var(--tab-shadow-max-size);
|
|
}
|
|
}
|
|
|
|
.closing-tabs-spacer {
|
|
pointer-events: none;
|
|
|
|
#tabbrowser-arrowscrollbox:not(:hover) > #tabbrowser-arrowscrollbox-periphery > & {
|
|
transition: width .15s ease-out;
|
|
}
|
|
}
|
|
|
|
.tabbrowser-tab {
|
|
--tab-label-mask-size: 2em;
|
|
|
|
appearance: none;
|
|
background-color: transparent;
|
|
color: inherit;
|
|
color-scheme: unset;
|
|
border-radius: 0;
|
|
border-width: 0;
|
|
margin: 0;
|
|
padding: 0 2px;
|
|
align-items: stretch;
|
|
/* Needed so that overflowing content overflows towards the end rather than
|
|
getting centered. That prevents tab opening animation from looking off at
|
|
the start, see bug 1759221. */
|
|
justify-content: flex-start;
|
|
overflow: clip;
|
|
/* Needed to avoid clipping the tab-background shadow, which has a 4px blur
|
|
* (we only have 2px padding in the inline direction) */
|
|
overflow-clip-margin: 2px;
|
|
|
|
&[pinned] {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
/* tabbrowser-tab keyboard focus */
|
|
&.keyboard-focused-tab > .tab-stack > .tab-background,
|
|
&:focus:not([aria-activedescendant]) > .tab-stack > .tab-background {
|
|
outline: var(--focus-outline);
|
|
outline-offset: var(--focus-outline-inset);
|
|
}
|
|
}
|
|
|
|
.tab-content {
|
|
padding: 0 var(--inline-tab-padding);
|
|
min-width: 0;
|
|
|
|
:root:not([uidensity=compact]) &[pinned] {
|
|
padding: 0 10px;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
.tab-loading-burst {
|
|
border-radius: inherit;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::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%);
|
|
}
|
|
|
|
&[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%);
|
|
}
|
|
|
|
&[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);
|
|
}
|
|
|
|
&[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);
|
|
}
|
|
}
|
|
}
|
|
|
|
/* Width/height & margins apply on tab icon stack children */
|
|
.tab-throbber,
|
|
.tab-icon-pending,
|
|
.tab-icon-image,
|
|
.tab-sharing-icon-overlay,
|
|
.tab-icon-overlay {
|
|
height: 16px;
|
|
width: 16px;
|
|
|
|
&:not([pinned]) {
|
|
margin-inline-end: 5.5px;
|
|
}
|
|
}
|
|
|
|
.tab-throbber {
|
|
&:not([busy]) {
|
|
display: none;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
background-image: url("chrome://browser/skin/tabbrowser/hourglass.svg");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
opacity: 0.4;
|
|
|
|
&[progress] {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
:root[sessionrestored] & {
|
|
&[busy] {
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
background-image: url("chrome://browser/skin/tabbrowser/loading.svg");
|
|
background-position: left center;
|
|
background-repeat: no-repeat;
|
|
width: 480px;
|
|
height: 100%;
|
|
animation: tab-throbber-animation 1.05s steps(30) infinite;
|
|
-moz-context-properties: fill;
|
|
|
|
/* XXX: It would be nice to transition between the "connecting" color and the
|
|
"loading" color (see the `[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;
|
|
}
|
|
|
|
&:-moz-locale-dir(rtl)::before {
|
|
animation-name: tab-throbber-animation-rtl;
|
|
}
|
|
}
|
|
|
|
&[progress]::before {
|
|
fill: var(--tab-loading-fill);
|
|
opacity: 1;
|
|
}
|
|
|
|
#TabsToolbar[brighttext] &[progress]:not([selected])::before {
|
|
fill: var(--lwt-tab-loading-fill-inactive, #84c1ff);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
@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%); }
|
|
}
|
|
|
|
.tab-icon-pending:is(:not([pendingicon]), [busy], [pinned]) {
|
|
display: none;
|
|
}
|
|
|
|
:root {
|
|
--tab-sharing-icon-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 {
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
|
|
/* Apply crisp rendering for favicons at exactly 2dppx resolution */
|
|
@media (resolution: 2dppx) {
|
|
image-rendering: -moz-crisp-edges;
|
|
}
|
|
|
|
&:not([src]),
|
|
&:-moz-broken {
|
|
content: url("chrome://global/skin/icons/defaultFavicon.svg");
|
|
}
|
|
|
|
&[sharing]:not([selected]) {
|
|
animation: var(--tab-sharing-icon-animation);
|
|
animation-delay: -1.5s;
|
|
}
|
|
|
|
&[selected]:not([src], [pinned], [crashed], [pictureinpicture]),
|
|
&:not([src], [pinned], [crashed], [sharing], [pictureinpicture]),
|
|
&[busy] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.tab-sharing-icon-overlay,
|
|
.tab-icon-overlay {
|
|
display: none;
|
|
}
|
|
|
|
.tab-sharing-icon-overlay[sharing]:not([selected]),
|
|
.tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked], [crashed]) {
|
|
display: revert;
|
|
}
|
|
|
|
.tab-sharing-icon-overlay {
|
|
position: relative;
|
|
-moz-context-properties: fill;
|
|
fill: rgb(224, 41, 29);
|
|
animation: var(--tab-sharing-icon-animation);
|
|
|
|
&[sharing="camera"] {
|
|
list-style-image: url("chrome://browser/skin/notification-icons/camera.svg");
|
|
}
|
|
|
|
&[sharing="microphone"] {
|
|
list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg");
|
|
}
|
|
|
|
&[sharing="screen"] {
|
|
list-style-image: url("chrome://browser/skin/notification-icons/screen.svg");
|
|
}
|
|
}
|
|
|
|
.tab-icon-overlay {
|
|
position: relative;
|
|
|
|
&[crashed] {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
|
|
}
|
|
|
|
&:not([crashed]) {
|
|
&[soundplaying] {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg");
|
|
}
|
|
|
|
&[muted] {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg");
|
|
}
|
|
|
|
&[activemedia-blocked] {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg");
|
|
}
|
|
|
|
&:is([soundplaying], [muted], [activemedia-blocked]) {
|
|
border-radius: 10px;
|
|
-moz-context-properties: fill, fill-opacity, stroke;
|
|
fill: currentColor;
|
|
stroke: transparent;
|
|
|
|
&:is([pinned], [sharing]):hover {
|
|
background-color: var(--tab-icon-overlay-stroke, light-dark(white, black));
|
|
}
|
|
}
|
|
|
|
&:is([pinned], [sharing]) {
|
|
top: -5.5px;
|
|
inset-inline-end: -6px;
|
|
z-index: 1; /* Overlay tab title */
|
|
padding: 2px;
|
|
stroke: var(--tab-icon-overlay-stroke, light-dark(white, black));
|
|
color: var(--tab-icon-overlay-fill, light-dark(black, white));
|
|
}
|
|
}
|
|
|
|
&[indicator-replaces-favicon] {
|
|
border-radius: 2px;
|
|
fill-opacity: 0.75;
|
|
padding: 2px;
|
|
|
|
&:hover {
|
|
background-color: color-mix(in srgb, currentColor 15%, transparent);
|
|
fill-opacity: 0.95;
|
|
}
|
|
|
|
&:hover:active {
|
|
background-color: color-mix(in srgb, currentColor 30%, transparent);
|
|
}
|
|
}
|
|
|
|
:is(
|
|
:root[uidensity=compact],
|
|
#tabbrowser-tabs[secondarytext-unsupported],
|
|
:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover
|
|
) .tab-icon-stack[indicator-replaces-favicon] > :not(&),
|
|
:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) &[indicator-replaces-favicon] {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.tab-label-container {
|
|
overflow: hidden;
|
|
|
|
#tabbrowser-tabs:not([secondarytext-unsupported]) & {
|
|
height: 2.7em;
|
|
}
|
|
|
|
&[pinned] {
|
|
width: 0;
|
|
}
|
|
|
|
&[textoverflow] {
|
|
&[labeldirection=ltr]:not([pinned]),
|
|
&:not([labeldirection], [pinned]):-moz-locale-dir(ltr) {
|
|
direction: ltr;
|
|
mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size));
|
|
}
|
|
|
|
&[labeldirection=rtl]:not([pinned]),
|
|
&:not([labeldirection], [pinned]):-moz-locale-dir(rtl) {
|
|
direction: rtl;
|
|
mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size));
|
|
}
|
|
}
|
|
}
|
|
|
|
.tab-label {
|
|
margin-inline: 0;
|
|
line-height: 1.7; /* override 'normal' in case of fallback math fonts with huge metrics */
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tab-close-button {
|
|
-moz-context-properties: fill, fill-opacity;
|
|
margin-inline-end: calc(var(--inline-tab-padding) / -2);
|
|
width: 24px;
|
|
height: 24px;
|
|
padding: 6px;
|
|
border-radius: var(--tab-border-radius);
|
|
list-style-image: url(chrome://global/skin/icons/close-12.svg);
|
|
|
|
&[pinned],
|
|
#tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-content > &:not([selected]) {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* The following rulesets allow showing more of the tab title */
|
|
.tabbrowser-tab:not([labelendaligned], :hover) > .tab-stack > .tab-content > .tab-close-button {
|
|
padding-inline-start: 0;
|
|
width: 18px;
|
|
}
|
|
|
|
.tabbrowser-tab[visuallyselected]:not([labelendaligned]):hover,
|
|
#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected], [labelendaligned]):hover {
|
|
--tab-label-mask-size: 1em;
|
|
}
|
|
|
|
|
|
.tab-secondary-label {
|
|
font-size: .75em;
|
|
margin: -.3em 0 .3em; /* adjust margins to compensate for line-height of .tab-label */
|
|
opacity: .8;
|
|
|
|
#tabbrowser-tabs[secondarytext-unsupported] &,
|
|
:root[uidensity=compact] &,
|
|
&:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]),
|
|
&:not([activemedia-blocked]) > .tab-icon-sound-blocked-label,
|
|
&[muted][activemedia-blocked] > .tab-icon-sound-blocked-label,
|
|
&[activemedia-blocked] > .tab-icon-sound-playing-label,
|
|
&[muted] > .tab-icon-sound-playing-label,
|
|
&[pictureinpicture] > .tab-icon-sound-playing-label,
|
|
&[pictureinpicture] > .tab-icon-sound-muted-label,
|
|
&:not([pictureinpicture]) > .tab-icon-sound-pip-label,
|
|
&:not([muted]) > .tab-icon-sound-muted-label,
|
|
&:not([showtooltip]) > .tab-icon-sound-tooltip-label,
|
|
&[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) {
|
|
display: none;
|
|
}
|
|
|
|
&[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
|
|
transition: opacity .3s linear var(--soundplaying-removal-delay);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
.tab-icon-sound-label {
|
|
/* Set height back to equivalent of parent's 1em based
|
|
on the .tab-icon-sound having a reduced font-size */
|
|
height: 1.3333em;
|
|
white-space: nowrap;
|
|
margin: 0;
|
|
}
|
|
|
|
.tab-background {
|
|
border-radius: var(--tab-border-radius);
|
|
margin-block: var(--tab-block-margin);
|
|
min-height: var(--tab-min-height);
|
|
}
|
|
|
|
/* Selected tab and tab hover */
|
|
|
|
#TabsToolbar #firefox-view-button:hover:not([open]) > .toolbarbutton-icon,
|
|
.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected], [multiselected]) {
|
|
background-color: color-mix(in srgb, currentColor 11%, transparent);
|
|
}
|
|
|
|
#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon,
|
|
#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) {
|
|
box-shadow: 0 0 4px rgba(0,0,0,.4);
|
|
}
|
|
|
|
#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon,
|
|
.tab-background:is([selected], [multiselected]) {
|
|
background-color: var(--tab-selected-bgcolor);
|
|
background-origin: border-box;
|
|
background-repeat: repeat-x;
|
|
}
|
|
|
|
#TabsToolbar #firefox-view-button[open] > .toolbarbutton-icon,
|
|
.tabbrowser-tab:is([visuallyselected], [multiselected]) {
|
|
color: var(--tab-selected-textcolor);
|
|
color-scheme: var(--tab-selected-color-scheme);
|
|
}
|
|
|
|
@media (prefers-contrast) {
|
|
#TabsToolbar #firefox-view-button:is([open], :hover):not(:focus-visible) > .toolbarbutton-icon,
|
|
.tab-background[selected],
|
|
.tabbrowser-tab:hover > .tab-stack > .tab-background {
|
|
outline: 1px solid currentColor;
|
|
outline-offset: -1px;
|
|
}
|
|
}
|
|
|
|
@media not (prefers-contrast) {
|
|
:root[lwtheme] #TabsToolbar #firefox-view-button[open]:not(:focus-visible) > .toolbarbutton-icon,
|
|
:root[lwtheme] .tab-background[selected]:not([multiselected]) {
|
|
outline: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor));
|
|
outline-offset: -1px;
|
|
}
|
|
}
|
|
|
|
/* Add a focus outline on top of the multiselected tabs, with the currently selected
|
|
tab getting a slightly thicker outline. */
|
|
.tab-background[multiselected] {
|
|
outline: 1px solid var(--focus-outline-color);
|
|
outline-offset: -1px;
|
|
|
|
&[selected] {
|
|
outline-width: 2px;
|
|
outline-offset: -2px;
|
|
}
|
|
}
|
|
|
|
/* Pinned tabs */
|
|
|
|
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
|
|
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]) {
|
|
background-image: radial-gradient(circle, var(--attention-dot-color), var(--attention-dot-color) 2px, transparent 2px);
|
|
background-position: center bottom 6.5px;
|
|
background-size: 4px 4px;
|
|
background-repeat: no-repeat;
|
|
}
|
|
|
|
.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned], [selected]) {
|
|
background-position-x: left 14px;
|
|
|
|
&:-moz-locale-dir(rtl) {
|
|
background-position-x: right 14px;
|
|
}
|
|
}
|
|
|
|
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:nth-child(1 of :not([pinned], [hidden])) {
|
|
/* Add a gap between the last pinned tab and the first visible tab */
|
|
margin-inline-start: 12px !important; /* .tabbrowser-tab sets margin: 0 !important; */
|
|
}
|
|
|
|
.tab-label[attention]:not([selected]) {
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* Tab Overflow */
|
|
|
|
#tabbrowser-arrowscrollbox {
|
|
&:not([scrolledtostart])::part(overflow-start-indicator),
|
|
&:not([scrolledtoend])::part(overflow-end-indicator) {
|
|
width: 7px; /* The width is the sum of the inline margins */
|
|
background-image: radial-gradient(ellipse at bottom,
|
|
rgba(0,0,0,0.1) 0%,
|
|
rgba(0,0,0,0.1) 7.6%,
|
|
rgba(0,0,0,0) 87.5%);
|
|
background-repeat: no-repeat;
|
|
background-position: -3px;
|
|
border-left: .5px solid rgba(255,255,255,.2);
|
|
pointer-events: none;
|
|
position: relative;
|
|
border-bottom: .5px solid transparent;
|
|
}
|
|
|
|
&:not([scrolledtostart])::part(overflow-start-indicator) {
|
|
margin-inline: -.5px -6.5px;
|
|
}
|
|
|
|
&:not([scrolledtoend])::part(overflow-end-indicator) {
|
|
margin-inline: -6.5px -.5px;
|
|
}
|
|
|
|
&:-moz-locale-dir(rtl)::part(overflow-start-indicator),
|
|
&:-moz-locale-dir(ltr)::part(overflow-end-indicator) {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
&[scrolledtostart]::part(overflow-start-indicator),
|
|
&[scrolledtoend]::part(overflow-end-indicator) {
|
|
opacity: 0;
|
|
}
|
|
|
|
&::part(overflow-start-indicator),
|
|
&::part(overflow-end-indicator) {
|
|
transition: opacity 150ms ease;
|
|
}
|
|
|
|
&::part(scrollbox-clip) {
|
|
/* Needed to prevent tabstrip from growing as wide as the sum of the tabs'
|
|
page-title widths when emulating XUL with modern flexbox. */
|
|
contain: inline-size;
|
|
}
|
|
|
|
/* Scroll arrows */
|
|
|
|
&::part(scrollbutton-up),
|
|
&::part(scrollbutton-down) {
|
|
appearance: none;
|
|
background-clip: padding-box;
|
|
border: 4px solid transparent;
|
|
border-radius: calc(var(--tab-border-radius) + 4px);
|
|
fill: var(--toolbarbutton-icon-fill);
|
|
margin: 0;
|
|
padding: 0 calc(var(--toolbarbutton-inner-padding) - 6px);
|
|
}
|
|
|
|
#navigator-toolbox:not(:hover) &:not([highlight])::part(scrollbutton-down) {
|
|
transition: 1s background-color ease-out;
|
|
}
|
|
|
|
&[highlight]::part(scrollbutton-down) {
|
|
background-color: SelectedItem;
|
|
}
|
|
|
|
&:not([scrolledtostart=true])::part(scrollbutton-up):hover,
|
|
&:not([scrolledtoend=true])::part(scrollbutton-down):hover {
|
|
background-color: var(--toolbarbutton-hover-background);
|
|
color: inherit;
|
|
}
|
|
|
|
&:not([scrolledtostart=true])::part(scrollbutton-up):hover:active,
|
|
&:not([scrolledtoend=true])::part(scrollbutton-down):hover:active {
|
|
background-color: var(--toolbarbutton-active-background);
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
/* Tab drag and drop */
|
|
|
|
.tab-drop-indicator {
|
|
width: 12px;
|
|
margin-inline-start: -12px;
|
|
background: url(chrome://browser/skin/tabbrowser/tab-drag-indicator.svg) no-repeat center;
|
|
position: relative;
|
|
z-index: 2;
|
|
pointer-events: none;
|
|
}
|
|
|
|
/* Drag space */
|
|
|
|
.titlebar-spacer[type="pre-tabs"],
|
|
.titlebar-spacer[type="post-tabs"] {
|
|
width: 40px;
|
|
}
|
|
|
|
@media (max-width: 500px) {
|
|
.titlebar-spacer[type="post-tabs"] {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* Firefox View button and menu item */
|
|
|
|
:root:not([privatebrowsingmode], [firefoxviewhidden]) :is(toolbarbutton, toolbarpaletteitem) + #tabbrowser-tabs,
|
|
:root[privatebrowsingmode]:not([firefoxviewhidden]) :is(
|
|
toolbarbutton:not(#firefox-view-button),
|
|
toolbarpaletteitem:not(#wrapper-firefox-view-button)
|
|
) + #tabbrowser-tabs {
|
|
border-inline-start: 1px solid color-mix(in srgb, currentColor 25%, transparent);
|
|
padding-inline-start: calc(var(--tab-overflow-pinned-tabs-width) + 2px);
|
|
margin-inline-start: 2px;
|
|
}
|
|
|
|
:root[privatebrowsingmode] :is(#firefox-view-button, #menu_openFirefoxView) {
|
|
display: none;
|
|
}
|
|
|
|
toolbar:not(#TabsToolbar) #firefox-view-button {
|
|
background-position: top 25% right 25%;
|
|
|
|
/* RTL notification dot */
|
|
&:-moz-locale-dir(rtl) {
|
|
background-position-x: left 25%;
|
|
}
|
|
}
|
|
|
|
:is(#widget-overflow-mainView, #widget-overflow-fixed-list) #firefox-view-button {
|
|
background-position: top 25% left 22px;
|
|
|
|
&:-moz-locale-dir(rtl) {
|
|
background-position-x: right 22px;
|
|
}
|
|
}
|
|
|
|
/* New tab button */
|
|
|
|
#tabs-newtab-button,
|
|
#TabsToolbar #new-tab-button {
|
|
list-style-image: url(chrome://global/skin/icons/plus.svg);
|
|
}
|
|
|
|
/* All tabs button and menupopup */
|
|
|
|
#alltabs-button {
|
|
list-style-image: url(chrome://global/skin/icons/arrow-down.svg);
|
|
}
|
|
|
|
#tabbrowser-tabs[hiddensoundplaying] ~ #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-badge {
|
|
background: transparent url(chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg);
|
|
box-shadow: none;
|
|
/* Match the color of the button, rather than label default. */
|
|
color: inherit;
|
|
display: block;
|
|
-moz-context-properties: fill, fill-opacity, stroke;
|
|
fill: currentColor;
|
|
stroke: transparent;
|
|
/* "!important" is necessary to override the rule in toolbarbutton.css */
|
|
margin: -7px 0 0 !important;
|
|
margin-inline-end: -4px !important;
|
|
min-width: 12px;
|
|
min-height: 12px;
|
|
}
|
|
|
|
/* The list of tabs is in its own panel-subview-body which will scroll. We don't
|
|
want any padding below the scrollbar, so remove the bottom padding
|
|
from the outer panel-subview-body. */
|
|
#allTabsMenu-allTabsView > .panel-subview-body {
|
|
padding-bottom: 0;
|
|
}
|
|
|
|
#allTabsMenu-allTabsView-tabs {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.all-tabs-item {
|
|
margin-inline: var(--arrowpanel-menuitem-margin-inline);
|
|
border-radius: var(--arrowpanel-menuitem-border-radius);
|
|
|
|
&[selected] {
|
|
font-weight: bold;
|
|
}
|
|
|
|
> toolbarbutton {
|
|
margin: 0;
|
|
|
|
&:hover {
|
|
background-color: var(--panel-item-hover-bgcolor);
|
|
}
|
|
|
|
&:hover:active {
|
|
background-color: var(--panel-item-active-bgcolor);
|
|
}
|
|
|
|
&.all-tabs-container-indicator {
|
|
position: relative;
|
|
&::before {
|
|
content: "";
|
|
position: absolute;
|
|
inset: 2px -3px;
|
|
background: var(--identity-tab-color);
|
|
width: 2px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.all-tabs-button {
|
|
list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
|
|
}
|
|
|
|
.all-tabs-secondary-button {
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
|
|
> label {
|
|
display: none !important; /* override panelUI-shared.css */
|
|
}
|
|
|
|
&:hover {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.all-tabs-mute-button[soundplaying] {
|
|
list-style-image: url(chrome://global/skin/media/audio.svg);
|
|
}
|
|
|
|
.all-tabs-mute-button[muted] {
|
|
list-style-image: url(chrome://global/skin/media/audio-muted.svg);
|
|
}
|
|
|
|
.all-tabs-close-button {
|
|
list-style-image: url(chrome://global/skin/icons/close-12.svg);
|
|
|
|
> .toolbarbutton-icon {
|
|
margin-inline: 2px !important; /* override panelUI-shared.css */
|
|
}
|
|
}
|
|
|
|
.tab-throbber-tabslist {
|
|
height: 16px;
|
|
width: 16px;
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
&[busy] {
|
|
list-style-image: url("chrome://browser/skin/tabbrowser/hourglass.svg");
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
opacity: 0.4;
|
|
}
|
|
|
|
&[progress] {
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
&[busy] {
|
|
list-style-image: image-set(
|
|
url("chrome://browser/skin/tabbrowser/tab-connecting.png"),
|
|
url("chrome://browser/skin/tabbrowser/tab-connecting@2x.png") 2x
|
|
);
|
|
}
|
|
|
|
&[progress] {
|
|
list-style-image: image-set(
|
|
url("chrome://browser/skin/tabbrowser/tab-loading.png"),
|
|
url("chrome://browser/skin/tabbrowser/tab-loading@2x.png") 2x
|
|
);
|
|
|
|
/* FIXME: This should probably also apply in regular dark mode? */
|
|
:root[lwt-popup="dark"] &[progress]:not([selected]) {
|
|
list-style-image: image-set(
|
|
url("chrome://browser/skin/tabbrowser/tab-loading-inverted.png"),
|
|
url("chrome://browser/skin/tabbrowser/tab-loading-inverted@2x.png") 2x
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|