browser/base/content/tabbrowser.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 .tab-close-button[pinned],
   6 #tabbrowser-tabs[closebuttons="activetab"] > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-content > .tab-close-button:not([selected]),
   7 .tab-icon-pending:not([pendingicon]),
   8 .tab-icon-pending[busy],
   9 .tab-icon-pending[pinned],
  10 .tab-icon-image:not([src], [pinned], [crashed], [pictureinpicture])[selected],
  11 .tab-icon-image:not([src], [pinned], [crashed], [sharing], [pictureinpicture]),
  12 .tab-icon-image[busy],
  13 .tab-throbber:not([busy]),
  14 .tab-sharing-icon-overlay,
  15 .tab-icon-overlay {
  16   display: none;
  17 }
  18
  19 :root[uidensity=compact] .tab-secondary-label,
  20 .tab-secondary-label:not([soundplaying], [muted], [activemedia-blocked], [pictureinpicture]),
  21 .tab-secondary-label:not([activemedia-blocked]) > .tab-icon-sound-blocked-label,
  22 .tab-secondary-label[muted][activemedia-blocked] > .tab-icon-sound-blocked-label,
  23 .tab-secondary-label[activemedia-blocked] > .tab-icon-sound-playing-label,
  24 .tab-secondary-label[muted] > .tab-icon-sound-playing-label,
  25 .tab-secondary-label[pictureinpicture] > .tab-icon-sound-playing-label,
  26 .tab-secondary-label[pictureinpicture] > .tab-icon-sound-muted-label,
  27 .tab-secondary-label:not([pictureinpicture]) > .tab-icon-sound-pip-label,
  28 .tab-secondary-label:not([muted]) > .tab-icon-sound-muted-label,
  29 .tab-secondary-label:not([showtooltip]) > .tab-icon-sound-tooltip-label,
  30 .tab-secondary-label[showtooltip] > .tab-icon-sound-label:not(.tab-icon-sound-tooltip-label) {
  31   display: none;
  32 }
  33
  34 .tab-sharing-icon-overlay[sharing]:not([selected]),
  35 .tab-icon-overlay:is([soundplaying], [muted], [activemedia-blocked], [crashed]) {
  36   display: revert;
  37 }
  38
  39 .tabbrowser-tab {
  40   --tab-label-mask-size: 2em;
  41 }
  42
  43 .tab-label {
  44   white-space: nowrap;
  45   line-height: 1.7;  /* override 'normal' in case of fallback math fonts with huge metrics */
  46 }
  47
  48 .tab-secondary-label {
  49   margin: -.3em 0 .3em; /* adjust margins to compensate for line-height of .tab-label */
  50 }
  51
  52 .tab-label-container {
  53   overflow: hidden;
  54 }
  55
  56 .tab-label-container[pinned] {
  57   width: 0;
  58 }
  59
  60 .tab-label-container[textoverflow][labeldirection=ltr]:not([pinned]),
  61 .tab-label-container[textoverflow]:not([labeldirection], [pinned]):-moz-locale-dir(ltr) {
  62   direction: ltr;
  63   mask-image: linear-gradient(to left, transparent, black var(--tab-label-mask-size));
  64 }
  65
  66 .tab-label-container[textoverflow][labeldirection=rtl]:not([pinned]),
  67 .tab-label-container[textoverflow]:not([labeldirection], [pinned]):-moz-locale-dir(rtl) {
  68   direction: rtl;
  69   mask-image: linear-gradient(to right, transparent, black var(--tab-label-mask-size));
  70 }
  71
  72 tabpanels {
  73   background-color: transparent;
  74 }
  75
  76 /* Apply crisp rendering for favicons at exactly 2dppx resolution */
  77 @media (resolution: 2dppx) {
  78   .tab-icon-image {
  79     image-rendering: -moz-crisp-edges;
  80   }
  81 }
  82
  83 .closing-tabs-spacer {
  84   pointer-events: none;
  85 }
  86
  87 #tabbrowser-arrowscrollbox:not(:hover) > #tabbrowser-arrowscrollbox-periphery > .closing-tabs-spacer {
  88   transition: width .15s ease-out;
  89 }
  90
  91 browser[blank],
  92 browser[pendingpaint] {
  93   opacity: 0;
  94 }
  95
  96 #tabbrowser-tabpanels[pendingpaint] {
  97   background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
  98   background-repeat: no-repeat;
  99   background-position: center center;
 100   background-size: 30px;
 101 }