summaryrefslogtreecommitdiffstats
path: root/browser/themes/shared/tabs.inc.css
diff options
context:
space:
mode:
Diffstat (limited to 'browser/themes/shared/tabs.inc.css')
-rw-r--r--browser/themes/shared/tabs.inc.css566
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);
+}