diff options
Diffstat (limited to 'browser/themes/shared/tabs.inc.css')
| -rw-r--r-- | browser/themes/shared/tabs.inc.css | 566 |
1 files changed, 566 insertions, 0 deletions
diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css new file mode 100644 index 000000000..632a6e606 --- /dev/null +++ b/browser/themes/shared/tabs.inc.css @@ -0,0 +1,566 @@ +%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 + +:root { + --tab-toolbar-navbar-overlap: 1px; + --navbar-tab-toolbar-highlight-overlap: 1px; + --tab-min-height: 31px; +} +#TabsToolbar { + --tab-stroke-background-size: auto 100%; +} + +%define tabCurveWidth 30px +%define tabCurveHalfWidth 15px + +/* image preloading hack */ +#tabbrowser-tabs::before { + /* Because of bug 853415, we need to ordinal this to the first position: */ + -moz-box-ordinal-group: 0; + 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); +} + +#tabbrowser-tabs { + min-height: var(--tab-min-height); +} + +.tabbrowser-tab, +.tabs-newtab-button { + -moz-appearance: none; + background-color: transparent; + border-radius: 0; + border-width: 0; + margin: 0; + padding: 0; +} + +.tabbrowser-tab { + -moz-box-align: stretch; +} + +/* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */ +.tabbrowser-tab[visuallyselected=true] { + position: relative; + z-index: 2; +} + +.tab-background-middle { + -moz-box-flex: 1; + background-clip: padding-box; + border-left: @tabCurveHalfWidth@ solid transparent; + border-right: @tabCurveHalfWidth@ solid transparent; + margin: 0 -@tabCurveHalfWidth@; +} + +.tab-content { + padding-inline-end: 9px; + padding-inline-start: 9px; +} + +.tab-content[pinned] { + padding-inline-end: 3px; +} + +.tab-throbber, +.tab-icon-image, +.tab-sharing-icon-overlay, +.tab-icon-sound, +.tab-close-button { + margin-top: 1px; +} + +.tab-throbber, +.tab-sharing-icon-overlay, +.tab-icon-image { + height: 16px; + width: 16px; + margin-inline-end: 6px; +} + +.tab-icon-image { + list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png"); +} + +.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"] { + list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing"); +} + +.tab-sharing-icon-overlay[sharing="microphone"] { + list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing"); +} + +.tab-sharing-icon-overlay[sharing="screen"] { + list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing"); +} + +.tab-icon-overlay { + width: 16px; + height: 16px; + margin-top: -8px; + margin-inline-start: -15px; + margin-inline-end: -1px; + position: relative; +} + +.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[blocked]:not([crashed]) { + border-radius: 10px; +} + +.tab-icon-overlay[soundplaying]:hover, +.tab-icon-overlay[muted]:not([crashed]):hover, +.tab-icon-overlay[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[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[blocked]:not([crashed]):not([selected]):not(:hover), +.tab-icon-overlay[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[busy] { + list-style-image: url("chrome://browser/skin/tabbrowser/connecting.png"); +} + +.tab-throbber[progress] { + list-style-image: url("chrome://global/skin/icons/loading.png"); +} + +.tab-label { + margin-inline-end: 0; + margin-inline-start: 0; +} + +.tab-close-button { + margin-inline-start: 4px; + margin-inline-end: -2px; + padding: 0; +} + +.tab-icon-sound { + margin-inline-start: 4px; + width: 16px; + height: 16px; + padding: 0; +} + +.tab-icon-sound[soundplaying], +.tab-icon-sound[muted], +.tab-icon-sound[blocked] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio); + filter: url(chrome://browser/skin/filters.svg#fill); + fill: currentColor; +} + +.tab-icon-sound[muted] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted); +} + +.tab-icon-sound[blocked] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked); +} + +.tab-icon-sound:-moz-lwtheme-darktext[soundplaying], +.tab-icon-sound:-moz-lwtheme-darktext[muted], +.tab-icon-sound:-moz-lwtheme-darktext[blocked] { + filter: url(chrome://browser/skin/filters.svg#fill) drop-shadow(1px 1px 1px white); +} + +.tab-icon-sound:-moz-lwtheme-brighttext[soundplaying], +.tab-icon-sound:-moz-lwtheme-brighttext[muted], +.tab-icon-sound:-moz-lwtheme-brighttext[blocked] { + filter: url(chrome://browser/skin/filters.svg#fill) drop-shadow(1px 1px 1px black); +} + +.tab-icon-sound[soundplaying]:not(:hover), +.tab-icon-sound[muted]:not(:hover), +.tab-icon-sound[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-background, +.tabs-newtab-button { + /* overlap the tab curves */ + margin-inline-end: -@tabCurveHalfWidth@; + margin-inline-start: -@tabCurveHalfWidth@; +} + +.tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox { + padding-inline-end: @tabCurveHalfWidth@; + padding-inline-start: @tabCurveHalfWidth@; +} + +/* 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; + margin-bottom: var(--navbar-tab-toolbar-highlight-overlap); + 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: -2px; + margin-inline-end: -12px; +} + +.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) { + margin-inline-start: -12px; + margin-inline-end: -2px; +} + +.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; +} + +.tab-background-start[selected=true]::after, +.tab-background-start[selected=true]::before, +.tab-background-start, +.tab-background-end, +.tab-background-end[selected=true]::after, +.tab-background-end[selected=true]::before { + min-height: var(--tab-min-height); + width: @tabCurveWidth@; +} + +.tabbrowser-tab:not([visuallyselected=true]), +.tabbrowser-tab:-moz-lwtheme { + color: inherit; +} + +/* 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. + */ + + +.tab-background-start[selected=true]::after, +.tab-background-end[selected=true]::after { + /* position ::after on top of its parent */ + margin-inline-start: -@tabCurveWidth@; + background-size: 100% 100%; + content: ""; + display: -moz-box; + position: relative; +} + +.tab-background-start[selected=true]::before, +.tab-background-end[selected=true]::before { + /* all ::before pseudo elements */ + content: ""; + display: -moz-box; +} + +.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 { + background-image: url(chrome://browser/skin/tabbrowser/tab-selected-start.svg); + background-size: 100% 100%; +} + +.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 { + 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. */ +.tab-background-start[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { + clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-start); +} + +.tab-background-end[selected=true]:-moz-locale-dir(ltr):-moz-lwtheme::before, +.tab-background-start[selected=true]:-moz-locale-dir(rtl):-moz-lwtheme::before { + clip-path: url(chrome://browser/content/browser.xul#tab-curve-clip-path-end); +} + +.tab-background-start[selected=true]:-moz-locale-dir(ltr)::after, +.tab-background-end[selected=true]:-moz-locale-dir(rtl)::after { + background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start.png); +} + +.tab-background-end[selected=true]:-moz-locale-dir(ltr)::after, +.tab-background-start[selected=true]:-moz-locale-dir(rtl)::after { + background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-end.png); +} + +.tab-background-middle[selected=true] { + background-clip: padding-box, padding-box, content-box; + background-color: @fgTabBackgroundColor@; + background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), + @fgTabTexture@, + none; + background-repeat: repeat-x; + background-size: var(--tab-stroke-background-size), auto 100%; + /* 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; +} + +/* Selected tab lightweight theme styles. + See browser-lightweightTheme.css for information about run-time changes to LWT styles. */ +.tab-background-middle[selected=true]:-moz-lwtheme { + background-color: transparent; + background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle.png), + @fgTabTextureLWT@;/*, + lwtHeader;*/ + /* Don't stretch the LWT header images */ + background-size: var(--tab-stroke-background-size), auto 100%, auto auto; +} + +/* These LWT styles are normally overridden by browser-lightweightTheme.css */ +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before { + background-image: @fgTabTextureLWT@; +} + +.tab-background-start[selected=true]:-moz-lwtheme::before, +.tab-background-end[selected=true]:-moz-lwtheme::before, +.tab-background-middle[selected=true]:-moz-lwtheme { + background-color: transparent; +} + +/* End selected tab */ + +/* new tab button border and gradient on hover */ +.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), +.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); + background-position: left bottom, @tabCurveWidth@ bottom, right bottom; + background-repeat: no-repeat; + background-size: @tabCurveWidth@ 100%, calc(100% - (2 * @tabCurveWidth@)) 100%, @tabCurveWidth@ 100%; +} + +/* Tab pointer-events */ +.tabbrowser-tab { + pointer-events: none; +} + +.tab-background-middle, +.tabs-newtab-button, +.tab-icon-overlay[soundplaying], +.tab-icon-overlay[muted]:not([crashed]), +.tab-icon-overlay[blocked]:not([crashed]), +.tab-icon-sound, +.tab-close-button { + pointer-events: auto; +} + +/* Pinned tabs */ + +/* Pinned tab separators need position: absolute when positioned (during overflow). */ +#tabbrowser-tabs[positionpinnedtabs] > .tabbrowser-tab[pinned]::before { + height: 100%; + position: absolute; +} + +.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: 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%); + background-position: center bottom var(--tab-toolbar-navbar-overlap); + background-repeat: no-repeat; + background-size: 85% 100%; +} + +.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned]):not([selected="true"]) { + background-position: left bottom var(--tab-toolbar-navbar-overlap); + background-size: 34px 100%; +} + +.tab-label[attention]:not([selected="true"]) { + font-weight: bold; +} + +/* Tab separators */ + +.tabbrowser-tab::after, +.tabbrowser-tab::before { + margin-inline-start: -1px; + /* 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; + /* 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; + opacity: 0.2; +} + +#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before, +#TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after { + opacity: 0.4; +} + +/* Also show separators beside the selected tab when dragging it. */ +#tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after, +.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 { + content: ""; + display: -moz-box; +} + +/* New tab button */ + +.tabs-newtab-button { + width: calc(36px + @tabCurveWidth@); +} + +@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); + } + + .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]), + .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); + } + + .tab-background-middle[selected=true] { + background-image: url(chrome://browser/skin/tabbrowser/tab-active-middle@2x.png), + @fgTabTexture@, + none; + } + + .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after, + .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after { + background-image: url(chrome://browser/skin/tabbrowser/tab-stroke-start@2x.png); + } + + .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after, + .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after { + 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"); + } + + .tab-throbber[progress] { + list-style-image: url("chrome://global/skin/icons/loading@2x.png"); + } +} + +/* 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], +.alltabs-endimage[blocked] { + 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); +} + +.alltabs-endimage[blocked] { + list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked); +} |