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:root { 6 --tab-min-height: 36px; 7 --inline-tab-padding: 8px; 8 /* Value for --in-content-page-background in in-content/common.inc.css */ 9 --tabpanel-background-color: #f9f9fa; 10 --tab-border-radius: 4px; 11 --tab-shadow-max-size: 6px; 12 --tab-block-margin: 4px; 13 /* --tabpanel-background-color matches $in-content-page-background in newtab 14 (browser/components/newtab/content-src/styles/_variables.scss) */ 15 --tabpanel-background-color: #F9F9FB; 16} 17 18@media (-moz-content-prefers-color-scheme: dark) { 19 :root { 20 /* --tabpanel-background-color matches $in-content-page-background in newtab 21 (browser/components/newtab/content-src/styles/_variables.scss) */ 22 --tabpanel-background-color: #2B2A33; 23 } 24} 25 26:root[privatebrowsingmode=temporary] { 27 /* Value for --in-content-page-background in aboutPrivateBrowsing.css. 28 !important overrides the direct setting of this variable in 29 ThemeVariableMap.jsm when the user has a theme that defines 30 ntp_background. */ 31 --tabpanel-background-color: #25003e !important; 32} 33 34:root[uidensity=compact] { 35 --tab-min-height: 29px; 36} 37 38:root[uidensity=touch] { 39 --tab-min-height: 41px; 40} 41 42#tabbrowser-tabs { 43 --tab-min-width: 76px; 44 --tab-loading-fill: #0A84FF; 45} 46 47#tabbrowser-tabpanels { 48 background-color: var(--tabpanel-background-color); 49} 50 51#tabbrowser-tabs, 52#tabbrowser-arrowscrollbox, 53#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] { 54 min-height: var(--tab-min-height); 55} 56 57.tab-background, 58.tab-stack { 59 min-height: inherit; 60} 61 62#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox::part(scrollbox) { 63 /* Add padding to match the shadow's blur radius so the 64 shadow doesn't get clipped when either the first or 65 last tab is selected */ 66 padding-inline: var(--tab-shadow-max-size); 67} 68 69@supports -moz-bool-pref("layout.css.emulate-moz-box-with-flex") { 70 .tab-stack { 71 /* Needed to allow tabs to shrink to be skinnier than their page-title: */ 72 min-width: 0; 73 } 74 75 #tabbrowser-arrowscrollbox::part(scrollbox) { 76 /* Needed to prevent tabstrip from growing as wide as the sum of the tabs' 77 page-title widths (when we'd rather have it be as wide as the window and 78 compress the tabs to their minimum size): */ 79 max-width: 100%; 80 } 81} 82 83.tabbrowser-tab { 84 appearance: none; 85 background-color: transparent; 86 border-radius: 0; 87 border-width: 0; 88 margin: 0 !important /* override tabbox.css */; 89 padding: 0 !important /* override tabbox.css */; 90 -moz-box-align: stretch; 91} 92 93.tabbrowser-tab { 94 min-height: var(--tab-min-height); 95 padding-inline: 2px !important; 96} 97 98/* tabbrowser-tab keyboard focus */ 99.keyboard-focused-tab > .tab-stack > .tab-background, 100.tabbrowser-tab:focus:not([aria-activedescendant]) > .tab-stack > .tab-background { 101 outline: var(--focus-outline); 102 outline-offset: var(--focus-outline-inset); 103} 104 105/* The selected tab should appear above the border between the tabs toolbar and 106 the navigation toolbar. */ 107.tabbrowser-tab[visuallyselected=true] { 108 position: relative; 109 z-index: 2; 110} 111 112.tab-content { 113 padding: 0 var(--inline-tab-padding); 114} 115 116:root:not([uidensity=compact]) .tab-content[pinned] { 117 padding: 0 10px; 118} 119 120@media (prefers-reduced-motion: no-preference) { 121 :root[sessionrestored] .tab-loading-burst { 122 border-radius: inherit; 123 position: relative; 124 overflow: hidden; 125 } 126 127 :root[sessionrestored] .tab-loading-burst::before { 128 position: absolute; 129 content: ""; 130 /* We set the width to be a percentage of the tab's width so that we can use 131 the `scale` transform to scale it up to the full size of the tab when the 132 burst occurs. We also need to set the margin-inline-start so that the 133 center of the burst matches the center of the favicon. */ 134 width: 5%; 135 height: 100%; 136 /* Center the burst over the .tab-loading-burst; it's 9px from the edge thanks 137 to .tab-content, plus 8px more since .tab-loading-burst is 16px wide. */ 138 margin-inline-start: calc(17px - 2.5%); 139 } 140 141 :root[sessionrestored] .tab-loading-burst[pinned]::before { 142 /* This is like the margin-inline-start rule above, except that icons for 143 pinned tabs are 12px from the edge. */ 144 margin-inline-start: calc(20px - 2.5%); 145 } 146 147 :root[sessionrestored] .tab-loading-burst[bursting]::before { 148 background-image: url("chrome://browser/skin/tabbrowser/loading-burst.svg"); 149 background-position: center center; 150 background-size: 100% auto; 151 background-repeat: no-repeat; 152 animation: tab-burst-animation 375ms cubic-bezier(0,0,.58,1); 153 -moz-context-properties: fill; 154 fill: var(--tab-loading-fill); 155 } 156 157 :root[sessionrestored] .tab-loading-burst[bursting][notselectedsinceload]::before { 158 animation-name: tab-burst-animation-light; 159 } 160 161 @keyframes tab-burst-animation { 162 0% { 163 opacity: 0.4; 164 transform: scale(1); 165 } 166 100% { 167 opacity: 0; 168 transform: scale(40); 169 } 170 } 171 172 @keyframes tab-burst-animation-light { 173 0% { 174 opacity: 0.2; 175 transform: scale(1); 176 } 177 100% { 178 opacity: 0; 179 transform: scale(40); 180 } 181 } 182} 183 184/* Width/height & margins apply on tab icon stack children */ 185.tab-throbber-tabslist, 186.tab-throbber, 187.tab-icon-pending, 188.tab-icon-image, 189.tab-sharing-icon-overlay, 190.tab-icon-overlay { 191 height: 16px; 192 width: 16px; 193} 194 195.tab-throbber:not([pinned]), 196.tab-icon-pending:not([pinned]), 197.tab-icon-image:not([pinned]), 198.tab-sharing-icon-overlay:not([pinned]), 199.tab-icon-overlay:not([pinned]) { 200 margin-inline-end: 5.5px; 201} 202 203@media (prefers-reduced-motion: reduce) { 204 .tab-throbber[busy] { 205 background-image: url("chrome://browser/skin/tabbrowser/hourglass.svg"); 206 background-position: center; 207 background-repeat: no-repeat; 208 -moz-context-properties: fill; 209 fill: currentColor; 210 opacity: 0.4; 211 } 212 213 .tab-throbber[progress] { 214 opacity: 0.8; 215 } 216} 217 218@media (prefers-reduced-motion: no-preference) { 219 :root[sessionrestored] .tab-throbber[busy] { 220 position: relative; 221 overflow: hidden; 222 } 223 224 :root[sessionrestored] .tab-throbber[busy]::before { 225 content: ""; 226 position: absolute; 227 background-image: url("chrome://browser/skin/tabbrowser/loading.svg"); 228 background-position: left center; 229 background-repeat: no-repeat; 230 width: 480px; 231 height: 100%; 232 animation: tab-throbber-animation 1.05s steps(30) infinite; 233 -moz-context-properties: fill; 234 235 /* XXX: It would be nice to transition between the "connecting" color and the 236 "loading" color (see the `.tab-throbber[progress]::before` rule below); 237 however, that currently forces main thread painting. When this is fixed 238 (after WebRender lands), we can do something like 239 `transition: fill 0.333s, opacity 0.333s;` */ 240 241 fill: currentColor; 242 opacity: 0.7; 243 } 244 245 :root[sessionrestored] .tab-throbber[busy]:-moz-locale-dir(rtl)::before { 246 animation-name: tab-throbber-animation-rtl; 247 } 248 249 @keyframes tab-throbber-animation { 250 0% { transform: translateX(0); } 251 100% { transform: translateX(-100%); } 252 } 253 254 @keyframes tab-throbber-animation-rtl { 255 0% { transform: translateX(0); } 256 100% { transform: translateX(100%); } 257 } 258 259 #TabsToolbar[brighttext] .tab-throbber[busy]:not([selected=true])::before { 260 fill: var(--lwt-tab-loading-fill-inactive, #717171); 261 opacity: 1; 262 } 263 264 :root[sessionrestored] .tab-throbber[progress]::before { 265 fill: var(--tab-loading-fill); 266 opacity: 1; 267 } 268 269 #TabsToolbar[brighttext] .tab-throbber[progress]:not([selected=true])::before { 270 fill: var(--lwt-tab-loading-fill-inactive, #84c1ff); 271 } 272} 273 274.tab-icon-image { 275 -moz-context-properties: fill; 276 fill: currentColor; 277} 278 279.tab-icon-image:not([src]), 280.tab-icon-image:-moz-broken { 281 content: url("chrome://global/skin/icons/defaultFavicon.svg"); 282} 283 284.tab-icon-image[sharing]:not([selected]), 285.tab-sharing-icon-overlay { 286 animation: 3s linear tab-sharing-icon-pulse infinite; 287} 288 289@keyframes tab-sharing-icon-pulse { 290 0%, 16.66%, 83.33%, 100% { 291 opacity: 0; 292 } 293 33.33%, 66.66% { 294 opacity: 1; 295 } 296} 297 298.tab-icon-image[sharing]:not([selected]) { 299 animation-delay: -1.5s; 300} 301 302.tab-sharing-icon-overlay { 303 position: relative; 304 -moz-context-properties: fill; 305 fill: rgb(224, 41, 29); 306} 307 308.tab-sharing-icon-overlay[sharing="camera"] { 309 list-style-image: url("chrome://browser/skin/notification-icons/camera.svg"); 310} 311 312.tab-sharing-icon-overlay[sharing="microphone"] { 313 list-style-image: url("chrome://browser/skin/notification-icons/microphone.svg"); 314} 315 316.tab-sharing-icon-overlay[sharing="screen"] { 317 list-style-image: url("chrome://browser/skin/notification-icons/screen.svg"); 318} 319 320.tab-icon-overlay { 321 width: 16px; 322 height: 16px; 323 position: relative; 324} 325 326.tab-icon-overlay:not([crashed]):is([pinned], [sharing]) { 327 top: -5.5px; 328 inset-inline-end: -6px; 329 z-index: 1; /* Overlay tab title */ 330 padding: 2px; 331} 332 333:root[uidensity=compact] .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay), 334#tabbrowser-tabs[secondarytext-unsupported] .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay), 335:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:not(:hover) .tab-icon-overlay[indicator-replaces-favicon], 336:root:not([uidensity=compact]) #tabbrowser-tabs:not([secondarytext-unsupported]) .tabbrowser-tab:hover .tab-icon-stack[indicator-replaces-favicon] > :not(.tab-icon-overlay) { 337 opacity: 0; 338} 339 340.tab-icon-overlay[soundplaying]:not([crashed]), 341.tab-icon-overlay[muted]:not([crashed]), 342.tab-icon-overlay[activemedia-blocked]:not([crashed]) { 343 border-radius: 10px; 344 -moz-context-properties: fill, fill-opacity, stroke; 345 fill: currentColor; 346 stroke: transparent; 347} 348 349.tab-icon-overlay:is([pinned], [sharing]):not([crashed]) { 350 stroke: var(--tab-icon-overlay-stroke, white); 351 color: var(--tab-icon-overlay-fill, black); 352} 353 354.tab-icon-overlay:is([pinned], [sharing]):not([crashed])[soundplaying]:hover, 355.tab-icon-overlay:is([pinned], [sharing]):not([crashed])[muted]:hover, 356.tab-icon-overlay:is([pinned], [sharing]):not([crashed])[activemedia-blocked]:hover { 357 background-color: var(--tab-icon-overlay-stroke, white); 358} 359 360#TabsToolbar[brighttext] .tab-icon-overlay:is([pinned], [sharing]):not([crashed]) { 361 stroke: var(--tab-icon-overlay-stroke, black); 362 color: var(--tab-icon-overlay-fill, white); 363} 364 365#TabsToolbar[brighttext] .tab-icon-overlay:is([pinned], [sharing]):not([crashed])[soundplaying]:hover, 366#TabsToolbar[brighttext] .tab-icon-overlay:is([pinned], [sharing]):not([crashed])[muted]:hover, 367#TabsToolbar[brighttext] .tab-icon-overlay:is([pinned], [sharing]):not([crashed])[activemedia-blocked]:hover { 368 background-color: var(--tab-icon-overlay-stroke, black); 369} 370 371.tab-icon-overlay[indicator-replaces-favicon] { 372 border-radius: 2px; 373 fill-opacity: 0.75; 374 padding: 2px; 375} 376.tab-icon-overlay[indicator-replaces-favicon]:hover { 377 background-color: color-mix(in srgb, currentColor 15%, transparent); 378 fill-opacity: 0.95; 379} 380.tab-icon-overlay[indicator-replaces-favicon]:hover:active { 381 background-color: color-mix(in srgb, currentColor 30%, transparent); 382} 383 384.tab-icon-overlay[soundplaying] { 385 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg"); 386} 387 388.tab-icon-overlay[muted] { 389 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-muted-small.svg"); 390} 391 392.tab-icon-overlay[activemedia-blocked] { 393 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg"); 394} 395 396.tab-icon-overlay[crashed] { 397 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg"); 398} 399 400@media (prefers-reduced-motion: reduce) { 401 .tab-throbber-tabslist[busy] { 402 list-style-image: url("chrome://browser/skin/tabbrowser/hourglass.svg"); 403 -moz-context-properties: fill; 404 fill: currentColor; 405 opacity: 0.4; 406 } 407 408 .tab-throbber-tabslist[progress] { 409 opacity: 0.8; 410 } 411} 412 413@media (prefers-reduced-motion: no-preference) { 414 .tab-throbber-tabslist[busy] { 415 list-style-image: url("chrome://browser/skin/tabbrowser/tab-connecting.png"); 416 } 417 418 .tab-throbber-tabslist[progress] { 419 list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading.png"); 420 } 421 422 :root[lwt-popup-brighttext] .tab-throbber-tabslist[progress]:not([selected=true]) { 423 list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading-inverted.png"); 424 } 425 426 @media (min-resolution: 1.1dppx) { 427 .tab-throbber-tabslist[busy] { 428 list-style-image: url("chrome://browser/skin/tabbrowser/tab-connecting@2x.png"); 429 } 430 431 .tab-throbber-tabslist[progress] { 432 list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading@2x.png"); 433 } 434 435 :root[lwt-popup-brighttext] .tab-throbber-tabslist[progress]:not([selected=true]) { 436 list-style-image: url("chrome://browser/skin/tabbrowser/tab-loading-inverted@2x.png"); 437 } 438 } 439} 440 441.tab-label { 442 margin-inline: 0; 443} 444 445.tab-close-button { 446 -moz-context-properties: fill, fill-opacity; 447 margin-inline-end: calc(var(--inline-tab-padding) / -2); 448 width: 24px; 449 height: 24px; 450 padding: 7px; 451 border-radius: var(--tab-border-radius); 452} 453 454/* The following rulesets allow showing more of the tab title */ 455.tabbrowser-tab:not([labelendaligned],:hover) > .tab-stack > .tab-content > .tab-close-button { 456 padding-inline-start: 0; 457 width: 17px; 458} 459 460.tabbrowser-tab[visuallyselected=true]:not([labelendaligned]):hover, 461#tabbrowser-tabs:not([closebuttons=activetab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab:not([visuallyselected=true],[labelendaligned]):hover { 462 --tab-label-mask-size: 1em; 463} 464 465 466#tabbrowser-tabs[secondarytext-unsupported] .tab-secondary-label { 467 display: none; 468} 469 470#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container { 471 height: 2.7em; 472} 473 474.tab-secondary-label { 475 font-size: .75em; 476 opacity: .8; 477} 478 479.tab-icon-sound-label { 480 /* Set height back to equivalent of parent's 1em based 481 on the .tab-icon-sound having a reduced font-size */ 482 height: 1.3333em; 483 margin: 0; 484} 485 486.tab-secondary-label[soundplaying-scheduledremoval]:not([muted]):not(:hover) { 487 transition: opacity .3s linear var(--soundplaying-removal-delay); 488 opacity: 0; 489} 490 491/* Tab Overflow */ 492#tabbrowser-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator), 493#tabbrowser-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) { 494 width: 7px; /* The width is the sum of the inline margins */ 495 background-image: radial-gradient(ellipse at bottom, 496 rgba(0,0,0,0.1) 0%, 497 rgba(0,0,0,0.1) 7.6%, 498 rgba(0,0,0,0) 87.5%); 499 background-repeat: no-repeat; 500 background-position: -3px; 501 border-left: .5px solid rgba(255,255,255,.2); 502 pointer-events: none; 503 position: relative; 504 z-index: 3; /* the selected tab's z-index + 1 */ 505 border-bottom: .5px solid transparent; 506} 507 508#tabbrowser-arrowscrollbox:not([scrolledtostart])::part(overflow-start-indicator) { 509 margin-inline: -.5px -6.5px; 510} 511 512#tabbrowser-arrowscrollbox:not([scrolledtoend])::part(overflow-end-indicator) { 513 margin-inline: -6.5px -.5px; 514} 515 516#tabbrowser-arrowscrollbox:-moz-locale-dir(rtl)::part(overflow-start-indicator), 517#tabbrowser-arrowscrollbox:-moz-locale-dir(ltr)::part(overflow-end-indicator) { 518 transform: scaleX(-1); 519} 520 521#tabbrowser-arrowscrollbox[scrolledtostart]::part(overflow-start-indicator), 522#tabbrowser-arrowscrollbox[scrolledtoend]::part(overflow-end-indicator) { 523 opacity: 0; 524} 525 526#tabbrowser-arrowscrollbox::part(overflow-start-indicator), 527#tabbrowser-arrowscrollbox::part(overflow-end-indicator) { 528 transition: opacity 150ms ease; 529} 530 531.tabbrowser-tab:not([visuallyselected=true], [multiselected]), 532.tabbrowser-tab:-moz-lwtheme { 533 color: inherit; 534} 535 536.tab-background { 537 border-radius: var(--tab-border-radius); 538 margin-block: var(--tab-block-margin); 539} 540 541:root[sizemode=maximized] .tabbrowser-tab { 542 margin-top: 0 !important; 543} 544 545/* Selected tab and tab hover */ 546 547#tabbrowser-tabs:not([noshadowfortests]) .tab-background:is([selected], [multiselected]) { 548 box-shadow: 0 0 4px rgba(0,0,0,.4); 549} 550 551.tab-background:is([selected], [multiselected]) { 552 background-color: var(--tab-selected-bgcolor, var(--toolbar-bgcolor)); 553 background-image: var(--toolbar-bgimage); 554 background-origin: border-box; 555 background-repeat: repeat-x; 556} 557 558@media (prefers-contrast) { 559 .tab-background:is([selected], [multiselected]), 560 .tabbrowser-tab:hover > .tab-stack > .tab-background { 561 border: 1px solid currentColor; 562 } 563} 564 565.tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true], [multiselected]) { 566 background-color: color-mix(in srgb, currentColor 11%, transparent); 567} 568 569/* Add a focus outline on top of the multiselected tabs, with the currently selected 570 tab getting a slightly thicker outline. */ 571.tab-background[multiselected=true] { 572 outline: 1px solid color-mix(in srgb, var(--focus-outline-color, currentColor) 40%, transparent); 573 outline-offset: -1px; 574} 575 576.tab-background[multiselected=true][selected=true] { 577 outline-width: 2px; 578 outline-offset: -2px; 579} 580 581/* Selected tab with lightweight theme */ 582 583.tabbrowser-tab:is([selected], [multiselected]):-moz-lwtheme { 584 color: var(--lwt-tab-text, var(--toolbar-color)); 585} 586 587@media not (prefers-contrast) { 588 .tab-background:is([selected], [multiselected]):-moz-lwtheme { 589 border: 1px solid var(--lwt-tab-line-color, var(--lwt-tabs-border-color, currentColor)); 590 } 591} 592 593/* 594 * LightweightThemeConsumer will set the current lightweight theme's header 595 * image to the lwt-header-image variable, used in each of the following rulesets. 596 */ 597#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[multiselected=true]:-moz-lwtheme, 598#tabbrowser-tabs:not([movingtab]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab > .tab-stack > .tab-background[selected=true]:-moz-lwtheme { 599 background-attachment: scroll, scroll, fixed; 600 background-color: transparent; 601 background-image: linear-gradient(var(--lwt-selected-tab-background-color, transparent), var(--lwt-selected-tab-background-color, transparent)), 602 linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)), 603 var(--lwt-header-image, none); 604 background-position: 0 0, 0 0, right top; 605 background-repeat: repeat-x, repeat-x, no-repeat; 606 background-size: auto 100%, auto 100%, auto auto; 607} 608 609/* Pinned tabs */ 610 611#TabsToolbar { 612 --attention-icon-color: var(--lwt-tab-attention-icon-color, rgb(42,195,162)); 613} 614 615#TabsToolbar[brighttext] { 616 --attention-icon-color: var(--lwt-tab-attention-icon-color, rgb(84,255,189)); 617} 618 619.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]), 620.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) { 621 background-image: radial-gradient(circle, var(--attention-icon-color), var(--attention-icon-color) 2px, transparent 2px); 622 background-position: center bottom calc(6.5px + var(--tabs-navbar-shadow-size)); 623 background-size: 4px 4px; 624 background-repeat: no-repeat; 625} 626 627.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned], [selected="true"]) { 628 background-position-x: left 14px; 629} 630 631.tabbrowser-tab[image] > .tab-stack > .tab-content[attention]:not([pinned], [selected="true"]):-moz-locale-dir(rtl) { 632 background-position-x: right 14px; 633} 634 635#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] { 636 /* Add a gap between the last pinned tab and the first visible tab */ 637 margin-inline-start: 12px !important; /* .tabbrowser-tab sets margin: 0 !important; */ 638} 639 640.tab-label[attention]:not([selected="true"]) { 641 font-weight: bold; 642} 643 644/* Tab drag and drop */ 645 646.tab-drop-indicator { 647 width: 12px; 648 margin-inline-start: -12px; 649 background: url(chrome://browser/skin/tabbrowser/tab-drag-indicator.svg) no-repeat center; 650 position: relative; 651 /* The z-index needs to be big enough to trump other positioned UI pieces 652 that we want to overlay. The selected tab uses 2. */ 653 z-index: 3; 654} 655 656/* Drag space */ 657 658.titlebar-spacer[type="pre-tabs"], 659.titlebar-spacer[type="post-tabs"] { 660 width: 40px; 661} 662 663@media (max-width: 500px) { 664 .titlebar-spacer[type="post-tabs"] { 665 display: none; 666 } 667} 668 669/* Tab bar scroll arrows */ 670 671#tabbrowser-arrowscrollbox::part(scrollbutton-up), 672#tabbrowser-arrowscrollbox::part(scrollbutton-down) { 673 fill: var(--toolbarbutton-icon-fill); 674} 675 676/* New tab button */ 677 678#tabs-newtab-button, 679#TabsToolbar #new-tab-button { 680 list-style-image: url(chrome://global/skin/icons/plus.svg); 681} 682 683/* All tabs button and menupopup */ 684 685#alltabs-button { 686 list-style-image: url(chrome://global/skin/icons/arrow-down.svg); 687} 688 689#tabbrowser-tabs[hiddensoundplaying] ~ #alltabs-button > .toolbarbutton-badge-stack > .toolbarbutton-badge { 690 background: transparent url(chrome://browser/skin/tabbrowser/tab-audio-playing-small.svg); 691 box-shadow: none; 692 /* Match the color of the button, rather than label default. */ 693 color: inherit; 694 display: block; 695 -moz-context-properties: fill, fill-opacity, stroke; 696 fill: currentColor; 697 stroke: transparent; 698 /* "!important" is necessary to override the rule in toolbarbutton.css */ 699 margin: -7px 0 0 !important; 700 margin-inline-end: -4px !important; 701 min-width: 12px; 702 min-height: 12px; 703} 704 705#allTabsMenu-allTabsView { 706 --blue-40: #45a1ff; 707 max-width: 42em; 708} 709 710/* The list of tabs is in its own panel-subview-body which will scroll. We don't 711 want any padding above/below the scrollbars, so remove the padding/margin 712 from the separator and outer panel-subview-body. */ 713#allTabsMenu-allTabsView > .panel-subview-body { 714 padding-bottom: 0; 715} 716 717.all-tabs-item > .all-tabs-secondary-button { 718 padding: 0; 719 padding-inline-start: 6px; 720 opacity: .8; 721 -moz-context-properties: fill; 722 fill: currentColor; 723} 724 725.all-tabs-secondary-button:hover { 726 opacity: 1; 727} 728 729.all-tabs-item:hover { 730 background-color: var(--panel-item-hover-bgcolor); 731} 732 733.all-tabs-item:hover:active { 734 background-color: var(--panel-item-active-bgcolor); 735} 736 737.all-tabs-item:hover > .all-tabs-button, 738.all-tabs-item:hover > .all-tabs-secondary-button { 739 /* Since the background is set on the item, don't set it on the children. */ 740 background-color: transparent !important; 741} 742 743.all-tabs-item[selected] { 744 font-weight: bold; 745} 746 747.all-tabs-button { 748 list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg"); 749} 750 751.all-tabs-secondary-button > label { 752 display: none; 753 margin: 0 5.5px; 754} 755 756.all-tabs-secondary-button[soundplaying] { 757 list-style-image: url(chrome://global/skin/media/audio.svg); 758} 759 760.all-tabs-secondary-button[muted] { 761 list-style-image: url(chrome://global/skin/media/audio-muted.svg); 762} 763 764#allTabsMenu-allTabsViewTabs { 765 padding-bottom: 8px; 766} 767 768#allTabsMenu-allTabsViewTabs > .all-tabs-item { 769 margin-inline: 8px; 770 border-radius: 4px; 771} 772 773.all-tabs-item > toolbarbutton { 774 margin-inline-start: 0; 775} 776