diff options
Diffstat (limited to 'browser/themes/shared/tabs.inc.css')
| -rw-r--r-- | browser/themes/shared/tabs.inc.css | 567 |
1 files changed, 0 insertions, 567 deletions
diff --git a/browser/themes/shared/tabs.inc.css b/browser/themes/shared/tabs.inc.css deleted file mode 100644 index c505416e4..000000000 --- a/browser/themes/shared/tabs.inc.css +++ /dev/null @@ -1,567 +0,0 @@ -%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; - /* Deliberately create a 1px overlap left/right to cover rounding gaps */ - border-left: calc(@tabCurveHalfWidth@ - 1px) solid transparent; - border-right: calc(@tabCurveHalfWidth@ - 1px) 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); -} |