diff options
Diffstat (limited to 'browser/themes/shared/tabs.css')
| -rw-r--r-- | browser/themes/shared/tabs.css | 807 |
1 files changed, 807 insertions, 0 deletions
diff --git a/browser/themes/shared/tabs.css b/browser/themes/shared/tabs.css new file mode 100644 index 0000000000..eb92f71e59 --- /dev/null +++ b/browser/themes/shared/tabs.css @@ -0,0 +1,807 @@ +/* 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-attention-icon-color: AccentColor; + &:-moz-lwtheme { + --tab-attention-icon-color: light-dark(rgb(42, 195, 162), rgb(84, 255, 189)); + } + + --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); + + 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); + } +} + +.tabbrowser-tab { + 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; + } +} + +@media (prefers-reduced-motion: reduce) { + .tab-throbber[busy] { + 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; + } + + .tab-throbber[progress] { + opacity: 0.8; + } +} + +@media (prefers-reduced-motion: no-preference) { + :root[sessionrestored] .tab-throbber { + &[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 `.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; + } + + &:-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%); } + } +} + +: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; + + &: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; + } +} + +.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 { + margin-inline: 0; +} + +.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); +} + +/* 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; +} + + +#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container { + height: 2.7em; +} + +.tab-secondary-label { + font-size: .75em; + opacity: .8; + + #tabbrowser-tabs[secondarytext-unsupported] & { + 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) { + #TabsToolbar #firefox-view-button[open]:not(:focus-visible) > .toolbarbutton-icon:-moz-lwtheme, + .tab-background[selected]:not([multiselected]):-moz-lwtheme { + 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]), +#firefox-view-button[attention] { + background-image: radial-gradient(circle, var(--tab-attention-icon-color), var(--tab-attention-icon-color) 2px, transparent 2px); + background-position: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); + 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 + ); + } + } + } +} |