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/. */
5 @import url("chrome://global/skin/");
6 @import url("downloads/indicator.css");
8 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
9 @namespace html url("http://www.w3.org/1999/xhtml");
10 @namespace svg url("http://www.w3.org/2000/svg");
13 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
16 toolbar[customizable="true"] {
17 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
20 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme), (-moz-mac-yosemite-theme) {
21 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
22 toolbar[customizable="true"]:not([nowindowdrag="true"]) {
23 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
27 toolbar[type="menubar"][autohide="true"] {
28 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
31 #toolbar-menubar[autohide="true"] {
32 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
36 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
39 /* === BEGIN browser.inc.css === */
47 /* background-color: hsla(0,0%,0%,.05);
48 border: 1px solid ThreeDLightShadow;*/
51 #urlbar-zoom-button[animate="true"] {
52 animation-name: urlbar-zoom-reset-pulse;
53 animation-duration: 250ms;
56 #urlbar-zoom-button:hover {
57 /* background-color: hsla(0,0%,0%,.1);*/
60 #urlbar-zoom-button:hover:active {
61 /* background-color: hsla(0,0%,0%,.15);*/
64 #urlbar-zoom-button > .toolbarbutton-text {
68 #urlbar-zoom-button > .toolbarbutton-icon {
72 /* === END browser.inc.css === */
75 /*--backbutton-urlbar-overlap: 5px;*/
77 /* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
78 --forwardbutton-width: 27px;
79 /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) /
80 --forwardbutton-width: 25px;*/
82 --identity-box-verified-background-color: #000000;
84 --panel-separator-color: #A09090;
85 --arrowpanel-hover: #FFCF00;
86 --arrowpanel-active: #FF9F00;
87 --arrowpanel-dimmed: #402000;
88 --arrowpanel-dimmed-further: #794900;
89 --arrowpanel-dimmed-even-further: #603000;
91 --urlbar-separator-color: #9C9CFF;
95 -moz-box-orient: vertical; /* for flex hack */
99 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
102 /* ::::: primary toolbar ::::: */
104 .toolbar-primary > .toolbar-box > .toolbar-holder {
105 background-color: #A09090;
108 .toolbar-primary > .toolbar-box > .toolbar-startcap,
109 .toolbar-primary > .toolbar-box > .toolbar-endcap {
110 background-color: #9C9CFF;
113 /* Hides the titlebar-placeholder underneath the window caption buttons when we
114 are not autohiding the menubar. */
115 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
119 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
120 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
121 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
122 #toolbar-menubar:not([autohide=true]) ~ #TabsToolbar:not([inFullscreen]),
123 #toolbar-menubar[autohide=true]:not([inactive]) ~ #TabsToolbar:not([inFullscreen]) {
124 /* margin-top: 3px;*/
127 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
128 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
129 /* margin-top: var(--space-above-tabbar);*/
132 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
133 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
134 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
139 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
140 /* the titlebar buttons are shown right over the endcap but we have no power over the buttonbox position just for this case, so hide the endcap */
147 #navigator-toolbox::after {
150 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
151 /*border-bottom: 1px solid ThreeDShadow;*/
154 #navigator-toolbox > toolbar {
157 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
160 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
161 overflow: -moz-hidden-unscrollable;
163 transition: min-height 170ms ease-out, max-height 170ms ease-out;
166 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
169 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
172 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
173 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
174 /* Indent also due to non-applicable aero rule in original Windows theme. */
175 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
176 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
178 background-color: #6000CF;
182 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
183 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
184 background-color: #8050B0;
188 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
192 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
196 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
197 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
202 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
203 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
204 #titlebar-buttonbox > .titlebar-button {
210 /* Position the toolbar above the bottom of background tabs */
215 #personal-bookmarks {
216 /* min-height: 24px; */
219 #PersonalToolbar > #home-button {
220 -moz-box-orient: horizontal;
223 #PersonalToolbar > #home-button > .toolbarbutton-text {
227 #print-preview-toolbar:not(:-moz-lwtheme) {
228 /* -moz-appearance: toolbox; */
231 #browser-bottombox:not(:-moz-lwtheme) {
234 /* ::::: titlebar ::::: */
238 background-color: #6000CF;
241 #titlebar:-moz-window-inactive {
242 background-color: #8050B0;
246 #main-window[sizemode="normal"] > #titlebar {
251 #main-window[sizemode="maximized"] > #titlebar {
255 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
256 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
257 #main-window[sizemode="normal"] > #titlebar,
258 #main-window[sizemode="maximized"] > #titlebar {
260 /* There is a margin-bottom set to -23 by code. */
264 /* The button box must appear on top of the navigator-toolbox in order for
265 * click and hover mouse events to work properly for the button in the restored
266 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
267 * can swallow those events. It will also place the buttons above the fog on
268 * themes with Aero Glass.
271 #main-window[sizemode="maximized"] #titlebar-buttonbox {
272 -moz-appearance: none;
275 margin-inline-end: 3px;
279 .titlebar-placeholder[type="appmenu-button"] {
283 .titlebar-placeholder[type="caption-buttons"] {
287 /* titlebar command buttons */
289 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
292 #titlebar-min:hover {
293 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
297 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
300 #titlebar-max:hover {
301 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
304 #main-window[sizemode="maximized"] #titlebar-max {
305 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
308 #main-window[sizemode="maximized"] #titlebar-max:hover {
309 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
313 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
316 #titlebar-close:hover {
317 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
320 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
321 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
322 #titlebar-fullscreen-button {
323 -moz-appearance: none;
324 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
325 -moz-image-region: rect(0px, 16px, 16px, 0px);
328 #titlebar-fullscreen-button:hover {
329 -moz-image-region: rect(0px, 32px, 16px, 16px);
332 @media (min-resolution: 2dppx) {
333 #titlebar-fullscreen-button {
334 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
335 -moz-image-region: rect(0px, 32px, 32px, 0px);
338 #titlebar-fullscreen-button:hover {
339 -moz-image-region: rect(0px, 64px, 32px, 32px);
345 /* ::::: bookmark buttons ::::: */
347 toolbarbutton.bookmark-item:not(.subviewbutton),
348 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
351 -moz-appearance: none;
352 border: 1px solid transparent;*/
355 toolbarbutton.bookmark-item:not(.subviewbutton):hover:not([disabled="true"]):not([open]) {
356 /* border-color: var(--toolbarbutton-hover-bordercolor);
357 background: var(--toolbarbutton-hover-background);*/
360 toolbarbutton.bookmark-item:not(.subviewbutton):hover:active:not([disabled="true"]),toolbarbutton.bookmark-item[open="true"] {
361 /* border-color: var(--toolbarbutton-active-bordercolor);
362 box-shadow: var(--toolbarbutton-active-boxshadow);
363 background: var(--toolbarbutton-active-background);*/
366 .bookmark-item > .toolbarbutton-icon,
367 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
370 margin-inline-start: 1px;
371 margin-inline-end: 2px;
376 /* Force the display of the label for bookmarks */
377 .bookmark-item > .toolbarbutton-text,
378 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
379 display: -moz-box !important;
382 .bookmark-item > .toolbarbutton-menu-dropmarker {
386 #bookmarks-toolbar-placeholder {
387 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
388 -moz-box-orient: horizontal;
391 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
392 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
393 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
396 /* ----- BOOKMARK STAR ANIMATION ----- */
398 @keyframes animation-bookmarkAdded {
399 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
400 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
402 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
405 @keyframes animation-bookmarkPulse {
406 from { transform: scale(1); }
407 50% { transform: scale(1.3); }
408 to { transform: scale(1); }
411 #bookmarked-notification-container {
420 #bookmarked-notification {
421 background-size: 16px;
422 background-position: center;
423 background-repeat: no-repeat;
429 #bookmarked-notification-dropmarker-anchor {
434 #bookmarked-notification-dropmarker-icon {
440 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
441 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
442 animation: animation-bookmarkAdded 800ms;
443 animation-timing-function: ease, ease, ease;
446 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
447 list-style-image: none !important;
450 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
452 animation: animation-bookmarkPulse 300ms;
453 animation-delay: 600ms;
454 animation-timing-function: ease-out;
457 /* ::::: bookmark menus ::::: */
460 menuitem.bookmark-item {
465 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
470 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
471 padding-inline-start: 0px;
474 /* ::::: bookmark items ::::: */
477 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
478 -moz-image-region: auto;
481 .bookmark-item[container] {
482 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
483 -moz-image-region: auto;
486 .bookmark-item[container][open] {
487 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
488 -moz-image-region: auto;
491 .bookmark-item[container][livemark] {
492 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
493 -moz-image-region: auto;
496 .bookmark-item[container][livemark] .bookmark-item {
497 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
498 -moz-image-region: rect(0px, 16px, 16px, 0px);
501 .bookmark-item[container][livemark] .bookmark-item[visited] {
502 -moz-image-region: rect(0px, 32px, 16px, 16px);
505 .bookmark-item[container][query] {
506 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
507 -moz-image-region: auto;
510 .bookmark-item[query][tagContainer] {
511 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
512 -moz-image-region: auto;
515 .bookmark-item[query][dayContainer] {
516 list-style-image: url("chrome://communicator/skin/history/calendar.png");
517 -moz-image-region: auto;
520 .bookmark-item[query][hostContainer] {
521 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
522 -moz-image-region: auto;
525 .bookmark-item[query][hostContainer][open] {
526 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
527 -moz-image-region: auto;
530 .bookmark-item[cutting] > .toolbarbutton-icon,
531 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
535 .bookmark-item[cutting] > .toolbarbutton-text,
536 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
540 /* ::::: primary toolbar buttons ::::: */
542 /* === BEGIN toolbarbuttons.inc.css === */
544 /* Whole section of this included file: */
545 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
546 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
547 #social-share-button, #open-file-button, #find-button, #developer-button,
548 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
549 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
550 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
551 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu),
552 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
553 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
557 -moz-image-region: rect(0, 36px, 18px, 18px);
560 #back-button:hover:not([disabled="true"]) {
561 -moz-image-region: rect(18px, 36px, 36px, 18px);
564 #back-button[disabled="true"] {
565 -moz-image-region: rect(36px, 36px, 54px, 18px);
569 -moz-image-region: rect(0, 72px, 18px, 54px);
572 #forward-button:hover:not([disabled="true"]) {
573 -moz-image-region: rect(18px, 72px, 36px, 54px);
576 #forward-button[disabled="true"] {
577 -moz-image-region: rect(36px, 72px, 54px, 54px);
580 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
581 #forward-button:-moz-locale-dir(rtl) {
582 transform: scaleX(-1);
585 #home-button[cui-areatype="toolbar"] {
586 -moz-image-region: rect(0, 126px, 18px, 108px);
589 #home-button[cui-areatype="toolbar"]:hover {
590 -moz-image-region: rect(18px, 126px, 36px, 108px);
593 #bookmarks-menu-button[cui-areatype="toolbar"] {
594 -moz-image-region: rect(0, 144px, 18px, 126px);
597 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
598 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
599 -moz-image-region: rect(18px, 144px, 36px, 126px);
602 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
603 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
604 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
605 background-color: transparent !important;
608 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
609 -moz-image-region: rect(0, 162px, 18px, 144px);
612 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
613 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
614 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
615 /* When starred and clicked (for edit/delete dialog),
616 * then only the menubutton-button itself is open, but not the whole menubutton. */
617 -moz-image-region: rect(18px, 162px, 36px, 144px);
620 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
621 -moz-image-region: rect(0, 630px, 18px, 612px);
624 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
626 -moz-box-align: center;
629 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
630 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
631 -moz-image-region: rect(18px, 630px, 36px, 612px);
634 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
635 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
638 padding-inline-start: 2px;
639 padding-inline-end: 0px;
642 #history-panelmenu[cui-areatype="toolbar"] {
643 -moz-image-region: rect(0, 180px, 18px, 162px);
646 #history-panelmenu[cui-areatype="toolbar"]:hover,
647 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
648 -moz-image-region: rect(18px, 180px, 36px, 162px);
651 #downloads-button[cui-areatype="toolbar"] {
652 -moz-image-region: rect(0, 198px, 18px, 180px);
655 #downloads-button[cui-areatype="toolbar"]:hover,
656 #downloads-button[cui-areatype="toolbar"][open="true"] {
657 -moz-image-region: rect(18px, 198px, 36px, 180px);
660 #add-ons-button[cui-areatype="toolbar"] {
661 -moz-image-region: rect(0, 216px, 18px, 198px);
664 #add-ons-button[cui-areatype="toolbar"]:hover {
665 -moz-image-region: rect(18px, 216px, 36px, 198px);
668 #open-file-button[cui-areatype="toolbar"] {
669 -moz-image-region: rect(0, 234px, 18px, 216px);
672 #open-file-button[cui-areatype="toolbar"]:hover {
673 -moz-image-region: rect(18px, 234px, 36px, 216px);
676 #save-page-button[cui-areatype="toolbar"] {
677 -moz-image-region: rect(0, 252px, 18px, 234px);
680 #save-page-button[cui-areatype="toolbar"]:hover {
681 -moz-image-region: rect(18px, 252px, 36px, 234px);
684 #sync-button[cui-areatype="toolbar"] {
685 -moz-image-region: rect(0, 792px, 18px, 774px);
688 #sync-button[cui-areatype="toolbar"]:hover {
689 -moz-image-region: rect(18px, 792px, 36px, 774px);
692 #containers-panelmenu[cui-areatype="toolbar"] {
693 -moz-image-region: rect(0, 810px, 18px, 792px);
696 #containers-panelmenu[cui-areatype="toolbar"]:hover {
697 -moz-image-region: rect(18px, 810px, 36px, 792px);
700 #feed-button[cui-areatype="toolbar"] {
701 -moz-image-region: rect(0, 288px, 18px, 270px);
704 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
705 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
706 -moz-image-region: rect(18px, 288px, 36px, 270px);
709 #feed-button[cui-areatype="toolbar"][disabled="true"] {
710 -moz-image-region: rect(36px, 288px, 54px, 270px);
713 #social-share-button[cui-areatype="toolbar"] {
714 -moz-image-region: rect(0px, 306px, 18px, 288px);
717 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
718 #social-share-button[cui-areatype="toolbar"][open="true"] {
719 -moz-image-region: rect(18px, 306px, 36px, 288px);
722 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
723 -moz-image-region: rect(36px, 306px, 54px, 288px);
726 #characterencoding-button[cui-areatype="toolbar"] {
727 -moz-image-region: rect(0, 324px, 18px, 306px);
730 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
731 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
732 -moz-image-region: rect(18px, 324px, 36px, 306px);
735 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
736 -moz-image-region: rect(36px, 324px, 54px, 306px);
739 #new-window-button[cui-areatype="toolbar"] {
740 -moz-image-region: rect(0, 342px, 18px, 324px);
743 #new-window-button[cui-areatype="toolbar"]:hover {
744 -moz-image-region: rect(18px, 342px, 36px, 324px);
747 #e10s-button[cui-areatype="toolbar"] {
748 -moz-image-region: rect(0, 342px, 18px, 324px);
751 #e10s-button[cui-areatype="toolbar"]:hover {
752 -moz-image-region: rect(18px, 342px, 36px, 324px);
755 #e10s-button > .toolbarbutton-icon {
756 transform: scaleY(-1);
759 #new-tab-button[cui-areatype="toolbar"] {
760 -moz-image-region: rect(0, 360px, 18px, 342px);
763 #new-tab-button[cui-areatype="toolbar"]:hover {
764 -moz-image-region: rect(18px, 360px, 36px, 342px);
767 #privatebrowsing-button[cui-areatype="toolbar"] {
768 -moz-image-region: rect(0, 378px, 18px, 360px);
771 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
772 -moz-image-region: rect(18px, 378px, 36px, 360px);
775 #find-button[cui-areatype="toolbar"] {
776 -moz-image-region: rect(0, 396px, 18px, 378px);
779 #find-button[cui-areatype="toolbar"]:hover {
780 -moz-image-region: rect(18px, 396px, 36px, 378px);
783 #print-button[cui-areatype="toolbar"] {
784 -moz-image-region: rect(0, 414px, 18px, 396px);
787 #print-button[cui-areatype="toolbar"]:hover {
788 -moz-image-region: rect(18px, 414px, 36px, 396px);
791 #fullscreen-button[cui-areatype="toolbar"] {
792 -moz-image-region: rect(0, 432px, 18px, 414px);
795 #fullscreen-button[cui-areatype="toolbar"]:hover {
796 -moz-image-region: rect(18px, 432px, 36px, 414px);
799 #developer-button[cui-areatype="toolbar"] {
800 -moz-image-region: rect(0, 450px, 18px, 432px);
803 #developer-button[cui-areatype="toolbar"]:hover,
804 #developer-button[cui-areatype="toolbar"][open="true"] {
805 -moz-image-region: rect(18px, 450px, 36px, 432px);
808 #preferences-button[cui-areatype="toolbar"] {
809 -moz-image-region: rect(0, 468px, 18px, 450px);
812 #preferences-button[cui-areatype="toolbar"]:hover {
813 -moz-image-region: rect(18px, 468px, 36px, 450px);
816 #PanelUI-menu-button {
817 -moz-image-region: rect(0, 486px, 18px, 468px);
820 #PanelUI-menu-button:hover,
821 #PanelUI-menu-button[open="true"] {
822 -moz-image-region: rect(18px, 486px, 36px, 468px);
825 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
826 -moz-image-region: rect(0, 504px, 18px, 486px);
829 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
830 -moz-image-region: rect(18px, 504px, 36px, 486px);
833 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
834 -moz-image-region: rect(36px, 504px, 54px, 486px);
837 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
838 -moz-image-region: rect(0, 522px, 18px, 504px);
841 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
842 -moz-image-region: rect(18px, 522px, 36px, 504px);
845 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
846 -moz-image-region: rect(36px, 522px, 54px, 504px);
849 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
850 -moz-image-region: rect(0, 540px, 18px, 522px);
853 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
854 -moz-image-region: rect(18px, 540px, 36px, 522px);
857 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
858 -moz-image-region: rect(36px, 540px, 54px, 522px);
861 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
862 -moz-image-region: rect(0, 558px, 18px, 540px);
865 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
866 -moz-image-region: rect(18px, 558px, 36px, 540px);
869 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
870 -moz-image-region: rect(36px, 558px, 54px, 540px);
873 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
874 -moz-image-region: rect(0, 576px, 18px, 558px);
877 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
878 -moz-image-region: rect(18px, 576px, 36px, 558px);
881 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
882 -moz-image-region: rect(36px, 576px, 54px, 558px);
885 #nav-bar-overflow-button {
886 -moz-image-region: rect(0, 612px, 18px, 594px);
889 #nav-bar-overflow-button:hover,
890 #nav-bar-overflow-button[open="true"] {
891 -moz-image-region: rect(18px, 612px, 36px, 594px);
894 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
895 transform: scaleX(-1);
899 -moz-image-region: rect(0, 648px, 18px, 630px);
902 #tabview-button:hover {
903 -moz-image-region: rect(18px, 648px, 36px, 630px);
906 #email-link-button[cui-areatype="toolbar"] {
907 -moz-image-region: rect(0, 666px, 18px, 648px);
910 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
911 -moz-image-region: rect(18px, 666px, 36px, 648px);
914 #email-button[cui-areatype="toolbar"][disabled="true"] {
915 -moz-image-region: rect(36px, 666px, 54px, 648px);
918 #sidebar-button[cui-areatype="toolbar"] {
919 -moz-image-region: rect(0, 684px, 18px, 666px);
922 #sidebar-button[cui-areatype="toolbar"]:hover {
923 -moz-image-region: rect(18px, 684px, 36px, 666px);
926 #panic-button[cui-areatype="toolbar"] {
927 -moz-image-region: rect(0, 702px, 18px, 684px);
930 #panic-button[cui-areatype="toolbar"]:hover,
931 #panic-button[cui-areatype="toolbar"][open] {
932 -moz-image-region: rect(18px, 702px, 36px, 684px);
935 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
936 transform: scaleX(-1);
939 #webide-button[cui-areatype="toolbar"] {
940 -moz-image-region: rect(0, 738px, 18px, 720px);
943 #webide-button[cui-areatype="toolbar"]:hover {
944 -moz-image-region: rect(18px, 738px, 36px, 720px);
947 /* === END toolbarbuttons.inc.css === */
949 /* === BEGIN menupanel.inc.css === */
951 /* Menu panel and palette styles */
953 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
954 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
955 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
956 #social-share-button, #open-file-button, #find-button, #developer-button,
957 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
958 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
959 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
960 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"],
961 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
962 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
963 #social-share-button, #open-file-button, #find-button, #developer-button,
964 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
965 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
966 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
967 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu) {
968 list-style-image: url(chrome://browser/skin/menuPanel.svg);
971 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
972 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
973 #social-share-button, #open-file-button, #find-button, #developer-button,
974 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
975 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
976 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
977 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"] > .toolbarbutton-icon,
978 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
979 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
980 #social-share-button, #open-file-button, #find-button, #developer-button,
981 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
982 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
983 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
984 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-icon,
985 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
986 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
987 #social-share-button, #open-file-button, #find-button, #developer-button,
988 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
989 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
990 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
991 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
992 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
993 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
994 #social-share-button, #open-file-button, #find-button, #developer-button,
995 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
996 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
997 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
998 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button, #containers-panelmenu)[cui-areatype="menu-panel"][panel-multiview-anchor=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
999 filter: url(chrome://global/skin/filters.svg#fill);
1003 #home-button[cui-areatype="menu-panel"],
1004 toolbarpaletteitem[place="palette"] > #home-button {
1005 -moz-image-region: rect(0px, 128px, 32px, 96px);
1008 #bookmarks-menu-button[cui-areatype="menu-panel"],
1009 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
1010 -moz-image-region: rect(0px, 192px, 32px, 160px);
1013 #history-panelmenu[cui-areatype="menu-panel"],
1014 toolbarpaletteitem[place="palette"] > #history-panelmenu {
1015 -moz-image-region: rect(0px, 224px, 32px, 192px);
1018 #downloads-button[cui-areatype="menu-panel"],
1019 toolbarpaletteitem[place="palette"] > #downloads-button {
1020 -moz-image-region: rect(0px, 256px, 32px, 224px);
1023 #add-ons-button[cui-areatype="menu-panel"],
1024 toolbarpaletteitem[place="palette"] > #add-ons-button {
1025 -moz-image-region: rect(0px, 288px, 32px, 256px);
1028 #open-file-button[cui-areatype="menu-panel"],
1029 toolbarpaletteitem[place="palette"] > #open-file-button {
1030 -moz-image-region: rect(0px, 320px, 32px, 288px);
1033 #save-page-button[cui-areatype="menu-panel"],
1034 toolbarpaletteitem[place="palette"] > #save-page-button {
1035 -moz-image-region: rect(0px, 352px, 32px, 320px);
1038 #sync-button[cui-areatype="menu-panel"],
1039 toolbarpaletteitem[place="palette"] > #sync-button {
1040 -moz-image-region: rect(0px, 1024px, 32px, 992px);
1043 #containers-panelmenu[cui-areatype="menu-panel"],
1044 toolbarpaletteitem[place="palette"] > #containers-panelmenu {
1045 -moz-image-region: rect(0px, 1056px, 32px, 1024px);
1048 #feed-button[cui-areatype="menu-panel"],
1049 toolbarpaletteitem[place="palette"] > #feed-button {
1050 -moz-image-region: rect(0px, 416px, 32px, 384px);
1053 #social-share-button[cui-areatype="menu-panel"],
1054 toolbarpaletteitem[place="palette"] > #social-share-button {
1055 -moz-image-region: rect(0px, 448px, 32px, 416px);
1058 #characterencoding-button[cui-areatype="menu-panel"],
1059 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1060 -moz-image-region: rect(0px, 480px, 32px, 448px);
1063 #new-window-button[cui-areatype="menu-panel"],
1064 toolbarpaletteitem[place="palette"] > #new-window-button {
1065 -moz-image-region: rect(0px, 512px, 32px, 480px);
1068 #e10s-button[cui-areatype="menu-panel"],
1069 toolbarpaletteitem[place="palette"] > #e10s-button {
1070 -moz-image-region: rect(0px, 512px, 32px, 480px);
1073 #new-tab-button[cui-areatype="menu-panel"],
1074 toolbarpaletteitem[place="palette"] > #new-tab-button {
1075 -moz-image-region: rect(0px, 544px, 32px, 512px);
1078 #privatebrowsing-button[cui-areatype="menu-panel"],
1079 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1080 -moz-image-region: rect(0px, 576px, 32px, 544px);
1083 #tabview-button[cui-areatype="menu-panel"],
1084 toolbarpaletteitem[place="palette"] > #tabview-button {
1085 -moz-image-region: rect(0px, 608px, 32px, 576px);
1088 #find-button[cui-areatype="menu-panel"],
1089 toolbarpaletteitem[place="palette"] > #find-button {
1090 -moz-image-region: rect(0px, 640px, 32px, 608px);
1093 #print-button[cui-areatype="menu-panel"],
1094 toolbarpaletteitem[place="palette"] > #print-button {
1095 -moz-image-region: rect(0px, 672px, 32px, 640px);
1098 #fullscreen-button[cui-areatype="menu-panel"],
1099 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1100 -moz-image-region: rect(0px, 704px, 32px, 672px);
1103 #developer-button[cui-areatype="menu-panel"],
1104 toolbarpaletteitem[place="palette"] > #developer-button {
1105 -moz-image-region: rect(0px, 736px, 32px, 704px);
1108 #preferences-button[cui-areatype="menu-panel"],
1109 toolbarpaletteitem[place="palette"] > #preferences-button {
1110 -moz-image-region: rect(0px, 768px, 32px, 736px);
1113 #email-link-button[cui-areatype="menu-panel"],
1114 toolbarpaletteitem[place="palette"] > #email-link-button {
1115 -moz-image-region: rect(0, 800px, 32px, 768px);
1118 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1119 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1120 -moz-image-region: rect(64px, 800px, 96px, 768px);
1123 #sidebar-button[cui-areatype="menu-panel"],
1124 toolbarpaletteitem[place="palette"] > #sidebar-button {
1125 -moz-image-region: rect(0, 864px, 32px, 832px);
1128 #panic-button[cui-areatype="menu-panel"],
1129 toolbarpaletteitem[place="palette"] > #panic-button {
1130 -moz-image-region: rect(0, 896px, 32px, 864px);
1133 #webide-button[cui-areatype="menu-panel"],
1134 toolbarpaletteitem[place="palette"] > #webide-button {
1135 -moz-image-region: rect(0px, 960px, 32px, 928px);
1138 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1139 -moz-image-region: rect(0, 832px, 32px, 800px);
1142 /* Wide panel control icons */
1144 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1145 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1146 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1147 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1148 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1151 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1152 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon,
1153 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
1154 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
1155 filter: url(chrome://global/skin/filters.svg#fill);
1159 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1160 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1161 -moz-image-region: rect(0px, 32px, 16px, 16px);
1164 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1165 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1166 -moz-image-region: rect(0px, 48px, 16px, 32px);
1169 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1170 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1171 -moz-image-region: rect(0px, 64px, 16px, 48px);
1174 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1175 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1176 -moz-image-region: rect(0px, 80px, 16px, 64px);
1179 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1180 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1181 -moz-image-region: rect(0px, 96px, 16px, 80px);
1184 #add-share-provider {
1185 list-style-image: url(chrome://browser/skin/menuPanel-small.svg);
1186 -moz-image-region: rect(0px, 96px, 16px, 80px);
1189 /* === END menupanel.inc.css === */
1191 .toolbarbutton-1:not([type="menu-button"]) {
1192 -moz-box-orient: vertical;
1196 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1202 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1203 .toolbarbutton-1[disabled="true"]:hover:active,
1204 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1208 .toolbarbutton-1:hover:active,
1209 .toolbarbutton-1[open="true"],
1210 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1212 padding-bottom: 0px;
1213 padding-inline-start: 3px;
1214 padding-inline-end: 1px;
1217 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1218 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1219 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1220 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1221 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1224 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1225 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1228 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1229 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1232 .toolbarbutton-1 > .toolbarbutton-icon,
1233 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1237 #nav-bar .toolbarbutton-1,
1238 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1241 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1242 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1243 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1246 #nav-bar #PanelUI-menu-button {
1247 /* padding-inline-start: 7px;
1248 padding-inline-end: 5px;*/
1251 #nav-bar .toolbarbutton-1[type=panel],
1252 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1253 /* padding-left: 5px;
1254 padding-right: 5px;*/
1257 #nav-bar .toolbarbutton-1 > menupopup {
1258 /* margin-top: -3px;*/
1261 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1265 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1266 /* padding-inline-end: 0;*/
1269 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1270 /* padding-inline-start: 0;
1271 -moz-box-align: center;*/
1274 .findbar-button > .toolbarbutton-text,
1275 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1276 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1277 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1278 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1279 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1280 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1281 /* padding: 2px 6px;
1283 border-color: transparent;
1284 transition-property: background-color, border-color;
1285 transition-duration: 150ms;*/
1288 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-icon,
1289 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-badge-stack,
1290 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@, .toolbarbutton-legacy-addon)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1291 padding: calc(var(--toolbarbutton-vertical-inner-padding) + 1px) 7px;
1295 /* Help SDK icons fit: */
1296 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1297 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1301 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1302 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1306 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1307 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1308 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon,
1309 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1310 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1311 /* padding-inline-end: 17px;*/
1314 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1315 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button):not(#new-tab-button) > .toolbarbutton-icon {
1316 /* horizontal padding + border + icon width */
1317 /* max-width: 43px;*/
1320 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1323 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1326 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1329 #nav-bar .toolbaritem-combined-buttons {
1330 /* margin-left: 2px;
1331 margin-right: 2px;*/
1334 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1339 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1340 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true]) + .toolbarbutton-1:-moz-any(:not(:hover):not([open]),[disabled=true])::before {
1346 margin-inline-end: -1px;
1350 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1353 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1354 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1355 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1356 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1357 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1358 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1359 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1360 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1361 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1364 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1365 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1366 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1367 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1368 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1369 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1372 #TabsToolbar .toolbarbutton-1,
1373 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1374 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1375 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1378 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1379 #TabsToolbar .toolbarbutton-1[open],
1380 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1381 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1382 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1385 /* unified back/forward button */
1388 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1391 #forward-button > menupopup {
1392 margin-top: 1px !important;
1395 #forward-button > .toolbarbutton-icon {
1396 background-clip: padding-box !important;
1397 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1398 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1402 margin-inline-start: -4px !important;
1407 border-radius: 0 10000px 10000px 0;
1408 /* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
1411 #forward-button:-moz-locale-dir(rtl) {
1412 border-radius: 10000px 0 0 10000px;
1415 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1416 transition: margin-left 150ms ease-out;
1419 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1420 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1423 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1424 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1425 transition-delay: 100s;
1428 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1429 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1430 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1434 /* padding-top: 3px !important;
1435 padding-bottom: 3px !important;
1436 padding-inline-start: 5px !important;
1437 padding-inline-end: 0 !important;*/
1440 border-radius: 10000px;
1444 margin-bottom: -2px;
1447 #back-button:-moz-locale-dir(rtl) {
1450 #back-button > menupopup {
1451 margin-top: -1px !important;
1454 #back-button > .toolbarbutton-icon {
1455 border-radius: 10000px !important;
1456 background-clip: padding-box !important;
1457 /* background-color: hsla(210,25%,98%,.08) !important;
1458 padding: 6px !important;
1459 border-style: none !important;
1460 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1461 0 0 0 1px hsla(210,4%,10%,.25);*/
1462 transition-property: background-color, box-shadow !important;
1463 transition-duration: 250ms !important;
1466 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1467 /* background-color: hsla(210,4%,10%,.08) !important;*/
1470 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1471 #back-button[open="true"] > .toolbarbutton-icon {
1472 /* background-color: hsla(210,4%,10%,.12) !important;
1473 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1474 0 0 0 1px hsla(210,4%,10%,.25),
1475 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1478 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1479 transform: scaleX(-1);
1482 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1483 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1484 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1487 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1488 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1489 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1492 #home-button.bookmark-item {
1493 list-style-image: url("chrome://browser/skin/Toolbar.png");
1496 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1497 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1498 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1499 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1500 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1501 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1502 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1505 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1508 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1509 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1510 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1514 #downloads-button > .toolbarbutton-icon {
1518 /* tabview menu item */
1521 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1522 -moz-image-region: rect(1px, 89px, 17px, 73px);
1525 #menu_tabview[groups="0"] {
1526 -moz-image-region: rect(1px, 17px, 17px, 1px);
1529 #menu_tabview[groups="1"] {
1530 -moz-image-region: rect(1px, 35px, 17px, 19px);
1533 #menu_tabview[groups="2"] {
1534 -moz-image-region: rect(1px, 53px, 17px, 37px);
1537 #menu_tabview[groups="3"] {
1538 -moz-image-region: rect(1px, 71px, 17px, 55px);
1541 /* undo close tab menu item */
1542 #alltabs_undoCloseTab {
1543 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1546 @media (min-resolution: 1.1dppx) {
1547 #alltabs_undoCloseTab {
1548 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1550 #alltabs_undoCloseTab > .toolbarbutton-icon {
1555 /* zoom control text (reset) button special case: */
1557 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1558 /* To make this line up with the icons, it needs the same height (18px) +
1559 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1560 * increase in text sizes would break things...
1565 /* ::::: fullscreen window controls ::::: */
1570 -moz-appearance: none;
1572 /* margin: 0 !important;
1573 padding: 6px 12px;*/
1577 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize);
1580 #minimize-button:hover {
1581 list-style-image: url(chrome://browser/skin/caption-buttons.svg#minimize-hover);
1585 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore);
1588 #restore-button:hover {
1589 list-style-image: url(chrome://browser/skin/caption-buttons.svg#restore-hover);
1592 #minimize-button:hover,
1593 #restore-button:hover {
1594 /* background-color: hsla(0, 0%, 0%, .12);*/
1597 #minimize-button:hover:active,
1598 #restore-button:hover:active {
1599 /* background-color: hsla(0, 0%, 0%, .22);*/
1603 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close);
1606 #close-button:hover {
1607 /* background-color: hsl(355, 86%, 49%);*/
1608 list-style-image: url(chrome://browser/skin/caption-buttons.svg#close-hover);
1611 #close-button:hover:active {
1612 /* background-color: hsl(355, 82%, 69%);*/
1615 /* ::::: Location Bar ::::: */
1618 .searchbar-textbox {
1621 margin-inline-start: 3px;
1625 /* make color as light as possible to deal with dark non-domain parts */
1629 #urlbar:-moz-lwtheme,
1630 .searchbar-textbox:-moz-lwtheme {
1631 /* background-color: rgba(255,255,255,.8);
1632 @navbarTextboxCustomBorder@
1636 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1637 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1638 /* background-color: rgba(255,255,255,.9);*/
1641 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1642 .searchbar-textbox:-moz-lwtheme[focused] {
1643 /* background-color: white;*/
1646 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1647 /* border-inline-start: none;
1651 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1652 /* border-top-left-radius: 0;
1653 border-bottom-left-radius: 0; */
1656 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1657 /* border-top-right-radius: 0;
1658 border-bottom-right-radius: 0; */
1661 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1662 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1663 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1666 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1667 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1668 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1669 transform: scaleX(-1);
1672 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1673 -moz-box-direction: reverse;
1676 html|*.urlbar-input:-moz-lwtheme::placeholder,
1677 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::placeholder {
1682 -moz-box-orient: horizontal;
1683 -moz-box-align: stretch;
1686 .urlbar-textbox-container {
1687 -moz-box-align: stretch;
1691 margin-inline-start: 0;
1695 #urlbar-display-box {
1696 padding-inline-start: 4px;
1697 /* border-inline-start: 1px solid var(--urlbar-separator-color);
1698 border-inline-end: 1px solid var(--urlbar-separator-color);
1699 border-image: linear-gradient(transparent 15%, var(--urlbar-separator-color) 15%, var(--urlbar-separator-color) 85%, transparent 85%);
1700 border-image-slice: 1; */
1704 -moz-box-align: center;
1709 /* 16x16 icon with border-box sizing */
1714 /* ::::: URL Bar Zoom Reset Button ::::: */
1716 @keyframes urlbar-zoom-reset-pulse {
1718 transform: scale(0);
1721 transform: scale(1.5);
1724 transform: scale(1.0);
1728 #urlbar-zoom-button {
1729 /* -moz-appearance: none;*/
1730 /* color: inherit;*/
1733 .search-go-container {
1737 .search-go-container > .search-go-button {
1741 #urlbar-search-footer {
1742 border-top: 1px solid var(--panel-separator-color);
1745 #urlbar-search-settings {
1748 #urlbar-search-settings:hover {
1751 #urlbar-search-settings:hover:active {
1754 #urlbar-search-splitter {
1755 /* The splitter width should equal the location and search bars' combined
1756 neighboring margin and border width. */
1761 background: transparent;
1765 border-inline-end: 1px solid #9C9CFF;
1766 margin-inline-end: 3px;
1769 margin-inline-start: 0;
1773 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1775 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1776 border-bottom: 1px solid var(--panel-separator-color);
1777 background-color: #000000;
1779 padding-inline-start: 44px;
1780 padding-inline-end: 6px;
1781 background-image: url("chrome://browser/skin/info.svg");
1782 background-clip: padding-box;
1783 background-position: 20px center;
1784 background-repeat: no-repeat;
1785 background-size: 16px 16px;
1788 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1789 background-position: right 20px center;
1792 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1797 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1798 margin-inline-start: 0;
1801 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1802 -moz-appearance: none;
1807 margin-inline-start: 10px;
1810 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1813 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1816 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1819 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1822 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1825 min-width: calc(54px + 11ch);
1830 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1831 background-color: var(--identity-box-verified-background-color);
1834 #identity-box:-moz-focusring {
1835 outline: 1px dotted;
1836 outline-offset: -1px;
1839 #identity-box.verifiedDomain:-moz-focusring,
1840 #identity-box.verifiedIdentity:-moz-focusring {
1841 outline-color: #000000;
1844 /* Location bar dropmarker */
1846 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1847 background-color: transparent;
1850 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1851 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1852 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1855 transition: opacity 0.15s ease;
1858 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1862 #navigator-toolbox:not(:hover) #nav-bar:not([customizing="true"]) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1866 .urlbar-history-dropmarker:hover {
1869 .urlbar-history-dropmarker:hover:active,
1870 .urlbar-history-dropmarker[open="true"] {
1873 /* page proxy icon */
1874 /* === BEGIN identity-block.inc.css === */
1876 /* === BEGIN identity-block/icons.inc.css === */
1879 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
1882 #identity-box:hover > #identity-icon:not(.no-hover),
1883 #identity-box[open=true] > #identity-icon {
1884 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
1887 #identity-box.grantedPermissions > #identity-icon {
1888 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice);
1891 #identity-box.grantedPermissions:hover > #identity-icon:not(.no-hover),
1892 #identity-box.grantedPermissions[open=true] > #identity-icon {
1893 list-style-image: url(chrome://browser/skin/identity-icon.svg#notice-hover);
1896 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
1897 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
1900 #tracking-protection-icon {
1901 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#enabled);
1904 #tracking-protection-icon[state="loaded-tracking-content"] {
1905 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg#disabled);
1909 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
1910 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon,
1911 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
1912 list-style-image: url(chrome://browser/skin/connection-secure.svg);
1913 visibility: visible;
1916 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
1917 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
1918 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon,
1919 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
1920 list-style-image: url(chrome://browser/skin/connection-mixed-passive-loaded.svg#icon);
1921 visibility: visible;
1924 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
1925 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
1926 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
1927 visibility: visible;
1930 /* === END identity-block/icons.inc.css === */
1937 /* The padding-left and padding-right transitions handle the delayed hiding of
1938 the forward button when hovered. */
1939 transition: background-color 150ms ease, padding-left, padding-right;
1942 #identity-box:-moz-locale-dir(ltr) {
1943 border-top-right-radius: 0;
1944 border-bottom-right-radius: 0;
1947 #identity-box:-moz-locale-dir(rtl) {
1948 border-top-left-radius: 0;
1949 border-bottom-left-radius: 0;
1952 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1953 border-inline-end: 1px solid #008484;
1956 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #identity-icon-labels {
1960 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1961 border-inline-end: 1px solid #9C9CFF;
1964 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon-labels {
1969 #identity-icon-labels:-moz-locale-dir(ltr) {
1973 #identity-icon-labels:-moz-locale-dir(rtl) {
1977 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
1978 /* border-radius: 0;
1979 padding-inline-start: 2px; */
1980 padding-inline-end: 2px;
1981 margin-inline-end: 1px;
1984 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #identity-box {
1985 padding-inline-start: 2px;
1988 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar > #identity-box {
1989 /* Forward button hiding is delayed when hovered, so we should use the same
1990 delay for the identity box. We handle both horizontal paddings (for LTR and
1991 RTL), the latter two delays here are for padding-left and padding-right. */
1992 transition-delay: 0s, 100s, 100s;
1995 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar > #identity-box {
1996 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1997 padding-inline-start: 2.01px;
2000 /* MAIN IDENTITY ICON */
2007 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2011 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2012 -moz-image-region: inherit;
2013 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2018 #urlbar[actiontype="extension"] > #identity-box > #identity-icon {
2019 -moz-image-region: inherit;
2020 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
2030 margin-inline-start: -16px;
2035 #identity-box[sharing="camera"] > #sharing-icon {
2036 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2039 #identity-box[sharing="microphone"] > #sharing-icon {
2040 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2043 #identity-box[sharing="screen"] > #sharing-icon {
2044 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2048 #identity-box[sharing] > #sharing-icon {
2050 animation-delay: -1.5s;
2053 #identity-box[sharing] > #identity-icon,
2055 animation: 3s linear identity-box-sharing-icon-pulse infinite;
2058 @keyframes identity-box-sharing-icon-pulse {
2059 /* This should remain identical to tab-sharing-icon-pulse in tabs.inc.css */
2060 0%, 16.66%, 83.33%, 100% {
2068 /* TRACKING PROTECTION ICON */
2070 #tracking-protection-icon {
2073 margin-inline-start: 2px;
2074 margin-inline-end: 0;
2077 #tracking-protection-icon[animate] {
2078 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2081 #tracking-protection-icon:not([state]) {
2082 margin-inline-end: -18px;
2083 pointer-events: none;
2085 /* Only animate the shield in, when it disappears hide it immediately. */
2089 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2090 visibility: collapse;
2093 /* CONNECTION ICON */
2098 margin-inline-start: 2px;
2099 visibility: collapse;
2102 /* === END identity-block.inc.css === */
2104 #page-proxy-favicon {
2105 -moz-image-region: rect(0, 16px, 16px, 0);
2108 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2109 /* margin-inline-end: 1px;*/
2112 #identity-box:hover > #page-proxy-favicon {
2113 -moz-image-region: rect(0, 32px, 16px, 16px);
2116 #identity-box:hover:active > #page-proxy-favicon,
2117 #identity-box[open=true] > #page-proxy-favicon {
2118 -moz-image-region: rect(0, 48px, 16px, 32px);
2121 #identity-box:hover {
2122 background-color: #FFCF00;
2126 #identity-box:hover:active,
2127 #identity-box[open=true] {
2128 background-color: #FF9F00;
2132 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2133 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2134 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2135 background-color: #A09090;
2139 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover > #identity-icon-labels,
2140 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active > #identity-icon-labels,
2141 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] > #identity-icon-labels {
2145 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2146 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2147 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2148 background-color: #008484;
2152 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover > #identity-icon-labels,
2153 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active > #identity-icon-labels,
2154 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] > #identity-icon-labels {
2158 #identity-box:hover > image,
2159 #identity-box:hover:active > image,
2160 #identity-box[open=true] > image {
2161 filter: url(chrome://global/skin/filters.svg#active-icon-state);
2166 /* === BEGIN autocomplete.inc.css === */
2168 #PopupAutoComplete > richlistbox > richlistitem {
2173 padding: 0px 1px 0px 1px;
2176 #PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon {
2177 margin-inline-start: 4px;
2178 margin-inline-end: 0;
2181 #PopupAutoComplete > richlistbox > richlistitem > .ac-title {
2183 margin-inline-start: 4px;
2186 #PopupAutoComplete > richlistbox {
2190 /* Login form autocompletion */
2191 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon {
2193 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
2196 #PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] {
2197 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-highlighted);
2200 /* Insecure field warning */
2201 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] {
2202 background-color: var(--arrowpanel-dimmed);
2203 border-bottom: 1px solid var(--panel-separator-color);
2204 padding-bottom: 4px;
2208 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] {
2209 background-color: var(--arrowpanel-dimmed-further);
2213 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title {
2218 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title {
2222 #PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon {
2223 list-style-image: url(chrome://browser/skin/connection-mixed-active-loaded.svg#icon);
2226 /* === END autocomplete.inc.css === */
2228 #PopupAutoComplete > richlistbox > richlistitem[originaltype~="datalist-first"] {
2229 border-top: 1px solid #A09090;
2232 #treecolAutoCompleteImage {
2237 .autocomplete-richlistbox {
2241 .autocomplete-richlistitem {
2246 border: 1px solid transparent;
2259 border: 1px solid transparent;
2270 html|span.ac-emphasize-text-title,
2271 html|span.ac-emphasize-text-tag,
2272 html|span.ac-emphasize-text-url {
2276 .ac-type-icon[type=bookmark] {
2277 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2280 .ac-type-icon[type=bookmark][selected][current] {
2281 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2284 .ac-result-type-bookmark {
2285 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2286 -moz-image-region: rect(0px 16px 16px 0px);
2291 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark {
2292 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2295 .ac-type-icon[type=keyword],
2296 .ac-site-icon[type=searchengine] {
2297 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2300 .ac-type-icon[type=keyword][selected],
2301 .ac-site-icon[type=searchengine][selected] {
2302 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2305 .ac-result-type-tag {
2306 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2311 .ac-type-icon[type=switchtab],
2312 .ac-type-icon[type=remotetab] {
2313 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2316 .ac-type-icon[type=switchtab][selected],
2317 .ac-type-icon[type=remotetab][selected] {
2318 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2321 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2322 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2328 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2329 border-top: 1px solid #9C9CFF;
2332 /* combined go/reload/stop button in location bar */
2335 #urlbar-reload-button,
2336 #urlbar-stop-button {
2338 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2339 /* margin: 0 9px; */
2340 margin-inline-start: 0px;
2341 border-inline-start: 1px solid var(--urlbar-separator-color);
2342 border-image: linear-gradient(transparent 15%,
2343 var(--urlbar-separator-color) 15%,
2344 var(--urlbar-separator-color) 85%,
2346 border-image-slice: 1;
2349 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2350 border-top-left-radius: 0px;
2351 border-bottom-left-radius: 0px;
2354 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2355 border-top-right-radius: 0px;
2356 border-bottom-right-radius: 0px;
2359 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2360 #urlbar-reload-button:not(:hover) {
2361 border-inline-start-style: none;
2362 padding-inline-start: 3px;
2365 #urlbar-reload-button {
2366 -moz-image-region: rect(0px, 14px, 14px, 0px);
2369 #urlbar-reload-button[disabled=true] {
2370 -moz-image-region: rect(28px, 14px, 42px, 0px);
2373 #urlbar-reload-button:not([disabled=true]):hover {
2374 -moz-image-region: rect(14px, 14px, 28px, 0px);
2377 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2378 transform: scaleX(-1);
2382 -moz-image-region: rect(0, 42px, 14px, 28px);
2385 #urlbar-go-button:hover {
2386 -moz-image-region: rect(14px, 42px, 28px, 28px);
2389 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2390 transform: scaleX(-1);
2393 #urlbar-stop-button {
2394 -moz-image-region: rect(0px, 28px, 14px, 14px);
2397 #urlbar-stop-button:hover {
2398 -moz-image-region: rect(14px, 28px, 28px, 14px);
2401 @media (min-resolution: 1.1dppx) {
2403 #urlbar-reload-button,
2404 #urlbar-stop-button {
2405 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2408 #urlbar-go-button > .toolbarbutton-icon,
2409 #urlbar-reload-button > .toolbarbutton-icon,
2410 #urlbar-stop-button > .toolbarbutton-icon {
2415 -moz-image-region: rect(0, 84px, 28px, 56px);
2418 #urlbar-go-button:hover {
2419 -moz-image-region: rect(28px, 84px, 56px, 56px);
2422 #urlbar-go-button:hover:active {
2423 -moz-image-region: rect(56px, 84px, 84px, 56px);
2426 #urlbar-reload-button {
2427 -moz-image-region: rect(0, 28px, 28px, 0);
2430 #urlbar-reload-button:not([disabled]):hover {
2431 -moz-image-region: rect(28px, 28px, 56px, 0);
2434 #urlbar-reload-button:not([disabled]):hover:active {
2435 -moz-image-region: rect(56px, 28px, 84px, 0);
2438 #urlbar-stop-button {
2439 -moz-image-region: rect(0, 56px, 28px, 28px);
2442 #urlbar-stop-button:not([disabled]):hover {
2443 -moz-image-region: rect(28px, 56px, 56px, 28px);
2446 #urlbar-stop-button:hover:active {
2447 -moz-image-region: rect(56px, 56px, 84px, 28px);
2451 /* popup blocker button */
2453 #page-report-button {
2454 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2455 -moz-image-region: rect(0, 16px, 16px, 0);
2458 #page-report-button:hover ,
2459 #page-report-button:hover:active,
2460 #page-report-button[open="true"] {
2461 -moz-image-region: rect(0, 32px, 16px, 16px);
2464 /* Reader mode button */
2466 #reader-mode-button {
2467 list-style-image: url("chrome://browser/skin/readerMode.svg");
2468 -moz-image-region: rect(0, 16px, 16px, 0);
2471 #reader-mode-button:hover,
2472 #reader-mode-button[readeractive]:hover {
2473 -moz-image-region: rect(0, 32px, 16px, 16px);
2476 #reader-mode-button:hover:active,
2477 #reader-mode-button[readeractive] {
2478 -moz-image-region: rect(0, 48px, 16px, 32px);
2481 /* social share panel */
2483 /* === BEGIN social.inc.css === */
2485 #manage-share-providers {
2486 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
2487 -moz-image-region: rect(0, 468px, 18px, 450px);
2490 #manage-share-providers > .toolbarbutton-icon {
2495 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
2498 /* fixup corners for share panel */
2499 .social-panel > .social-panel-frame {
2500 border-radius: inherit;
2503 /* === END social.inc.css === */
2505 .social-panel-frame {
2506 border-radius: inherit;
2509 .social-share-frame {
2516 background-color: white;
2517 background-repeat: no-repeat;
2518 background-position: center center;
2520 #share-container[loading] {
2521 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2523 #share-container > browser {
2524 transition: opacity 150ms ease-in-out;
2527 #share-container[loading] > browser {
2531 .social-share-toolbar {
2532 border-bottom: 1px solid #9C9CFF;
2536 #social-share-provider-buttons {
2541 .share-provider-button {
2546 .share-provider-button > .toolbarbutton-text {
2549 .share-provider-button > .toolbarbutton-icon {
2555 #social-share-panel {
2561 .social-share-frame {
2562 border-top-left-radius: 0;
2563 border-bottom-left-radius: inherit;
2564 border-top-right-radius: 0;
2565 border-bottom-right-radius: inherit;
2568 #social-share-panel > .social-share-toolbar {
2569 border-top-left-radius: inherit;
2570 border-top-right-radius: inherit;
2573 #social-share-provider-buttons {
2574 border-top-left-radius: inherit;
2575 border-top-right-radius: inherit;
2578 /* bookmarks menu-button */
2580 #bookmarks-menu-button.bookmark-item {
2581 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2582 -moz-image-region: rect(0px 16px 16px 0px);
2585 #bookmarks-menu-button.bookmark-item[starred] {
2586 -moz-image-region: rect(0px 32px 16px 16px);
2589 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2591 padding-bottom: 2px;
2594 #BMB_bookmarksPopup[side="top"],
2595 #BMB_bookmarksPopup[side="bottom"] {
2597 margin-right: -20px;
2600 #BMB_bookmarksPopup[side="left"],
2601 #BMB_bookmarksPopup[side="right"] {
2603 margin-bottom: -20px;
2606 /* bookmarking panel */
2608 #editBookmarkPanelStarIcon {
2609 list-style-image: url("chrome://browser/skin/places/starred48.png");
2614 #editBookmarkPanelStarIcon[unstarred] {
2615 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2618 #editBookmarkPanelTitle {
2622 #editBookmarkPanelHeader,
2623 #editBookmarkPanelContent {
2624 margin-bottom: .5em;
2627 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2628 #editBMPanel_folderTree {
2632 /* ::::: content area ::::: */
2635 background-color: #9C9CFF;
2640 background-color: #000000;
2644 margin-inline-start: 0;
2653 padding-inline-start: 0px;
2656 #sidebar-header > .close-icon {
2657 /* padding: 4px 2px;
2660 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2663 #sidebar-header > .close-icon:hover,
2664 #sidebar-header > .close-icon:hover:active {
2665 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2668 #sidebar-splitter:-moz-locale-dir(ltr),
2669 #sidebar:-moz-locale-dir(ltr) {
2670 border-radius: 0 5px 0 0;
2673 #sidebar-splitter:-moz-locale-dir(rtl),
2674 #sidebar:-moz-locale-dir(rtl) {
2675 border-radius: 5px 0 0 0;
2678 .browserContainer > findbar {
2680 background-color: -moz-dialog;
2681 color: -moz-DialogText;
2690 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2693 #TabsToolbar .toolbar-holder {
2694 background-color: #000000; /* correct effect of being an actual toolbar */
2697 #main-window[disablechrome] #TabsToolbar,
2698 #TabsToolbar[tabsontop="false"] {
2699 border-bottom: 1px solid #008484;
2702 /* === BEGIN tabs.inc.css === */
2705 /* --tab-toolbar-navbar-overlap: 1px; */
2706 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2707 /* --tab-min-height: 31px; */
2710 /* --tab-stroke-background-size: auto 100%; */
2714 .tabs-newtab-button,
2715 #TabsToolbar > #new-tab-button {
2720 padding: 1px 4px 2px;
2723 .tabbrowser-tab:first-of-type {
2724 margin-inline-start: 2px;
2727 .tabs-newtab-button,
2728 #TabsToolbar > #new-tab-button,
2729 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2730 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2731 border-radius: 8px 8px 0px 0px;
2732 margin-inline-start: 0;
2735 .tabs-newtab-button:not(:hover),
2736 #TabsToolbar > #new-tab-button:not(:hover),
2737 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2738 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2739 background-color: #C09070;
2742 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2743 .tabbrowser-tab[visuallyselected=true] {
2744 /* position: relative;
2748 .tab-background-middle {
2754 .tab-content[pinned] {
2759 .tab-sharing-icon-overlay,
2765 .tab-sharing-icon-overlay,
2769 margin-inline-end: 3px;
2773 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2776 .tab-icon-image[sharing]:not([selected]),
2777 .tab-sharing-icon-overlay {
2778 animation: 3s linear tab-sharing-icon-pulse infinite;
2781 @keyframes tab-sharing-icon-pulse {
2782 /* This should remain identical to identity-box-sharing-icon-pulse in identity-block.inc.css */
2783 0%, 16.66%, 83.33%, 100% {
2791 .tab-icon-image[sharing]:not([selected]) {
2792 animation-delay: -1.5s;
2795 .tab-sharing-icon-overlay {
2796 /* 16px of the icon + 6px of margin-inline-end of .tab-icon-image */
2797 margin-inline-start: -22px;
2801 .tab-sharing-icon-overlay[sharing="camera"] {
2802 list-style-image: url("chrome://browser/skin/notification-icons.svg#camera-sharing");
2805 .tab-sharing-icon-overlay[sharing="microphone"] {
2806 list-style-image: url("chrome://browser/skin/notification-icons.svg#microphone-sharing");
2809 .tab-sharing-icon-overlay[sharing="screen"] {
2810 list-style-image: url("chrome://browser/skin/notification-icons.svg#screen-sharing");
2817 margin-inline-start: -15px;
2818 margin-inline-end: -1px;
2822 .tab-icon-overlay[crashed] {
2823 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2826 .tab-icon-overlay[soundplaying],
2827 .tab-icon-overlay[muted]:not([crashed]),
2828 .tab-icon-overlay[blocked]:not([crashed]) {
2829 border-radius: 10px;
2832 .tab-icon-overlay[soundplaying]:hover,
2833 .tab-icon-overlay[muted]:hover,
2834 .tab-icon-overlay[blocked]:not([crashed]):hover {
2835 background-color: #FFCF00;
2838 .tab-icon-overlay[soundplaying] {
2839 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2842 .tab-icon-overlay[muted]:not([crashed]) {
2843 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2846 .tab-icon-overlay[blocked]:not([crashed]) {
2847 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-blocked");
2850 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not([selected]):not(:hover),
2851 .tab-icon-overlay[soundplaying][selected]:-moz-lwtheme-brighttext:not(:hover) {
2852 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2855 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not([selected]):not(:hover),
2856 .tab-icon-overlay[mouted][selected]:-moz-lwtheme-brighttext:not(:hover) {
2857 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2860 #TabsToolbar[brighttext] .tab-icon-overlay[blocked]:not([crashed]):not([selected]):not(:hover),
2861 .tab-icon-overlay[blocked][selected]:-moz-lwtheme-brighttext:not(:hover) {
2862 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-blocked");
2865 .tab-throbber[busy] {
2866 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2869 .tab-throbber[progress] {
2870 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2873 @media (min-resolution: 1.1dppx) {
2874 .tab-throbber[busy] {
2875 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2878 .tab-throbber[progress] {
2879 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2883 .tab-throbber[pinned],
2884 .tab-icon-image[pinned] {
2885 margin-inline-start: 2px;
2886 margin-inline-end: 2px;
2890 /* this needs to add up to the 16px of the icon image */
2892 margin-top: 2px !important;
2893 margin-bottom: 2px !important;
2897 margin-inline-start: 4px;
2903 .tab-icon-sound[soundplaying],
2904 .tab-icon-sound[muted],
2905 .tab-icon-sound[blocked] {
2906 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
2907 filter: url(chrome://global/skin/filters.svg#fill);
2911 .tab-icon-sound[muted] {
2912 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
2915 .tab-icon-sound[blocked] {
2916 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
2924 .tab-icon-sound[soundplaying-scheduledremoval]:not([muted]):not(:hover),
2925 .tab-icon-overlay[soundplaying-scheduledremoval]:not([muted]):not(:hover) {
2926 transition: opacity .3s linear var(--soundplaying-removal-delay);
2931 .tabs-newtab-button {
2932 /* overlap the tab curves */
2935 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2939 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2940 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2943 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2944 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2947 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
2950 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2953 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
2954 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
2957 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
2958 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
2961 .tab-background-start[selected=true]::after,
2962 .tab-background-start[selected=true]::before,
2963 .tab-background-start,
2964 .tab-background-end,
2965 .tab-background-end[selected=true]::after,
2966 .tab-background-end[selected=true]::before {
2969 .tabbrowser-tab:not([visuallyselected=true]),
2970 .tabbrowser-tab:-moz-lwtheme {
2973 /* tabbrowser-tab focus ring */
2974 .tabbrowser-tab:focus {
2975 outline: 1px dotted;
2980 .tabbrowser-tab[visuallyselected="true"] {
2983 /* End selected tab */
2985 /* Tab pointer-events */
2988 pointer-events: none;
2991 .tab-background-middle,
2992 .tabs-newtab-button,
2993 .tab-icon-overlay[soundplaying],
2994 .tab-icon-overlay[muted]:not([crashed]),
2995 .tab-icon-overlay[blocked]:not([crashed]),
2998 pointer-events: auto;
3004 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected="true"]),
3005 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected="true"]) {
3007 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3008 background-color: #E7ADE7;
3011 .tab-label[attention]:not([selected="true"]) {
3015 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3016 background-color: #3333FF;
3020 /* Tab separators */
3022 .tabbrowser-tab::after,
3023 .tabbrowser-tab::before {
3025 margin-inline-start: -1px;
3026 background-image: linear-gradient(transparent 5px,
3028 currentColor calc(100% - 4px),
3029 transparent calc(100% - 4px));
3033 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3034 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3038 /* Also show separators beside the selected tab when dragging it. */
3040 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3041 .tabbrowser-tab:not([selected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3042 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([selected]):not([beforehovered]):not(:hover)::after {
3047 /* New tab button */
3049 .tabs-newtab-button {
3051 /* width: calc(36px + var(--tab-curve-width)); */
3053 @media (min-resolution: 1.1dppx) {
3054 /* image preloading hack from like lowdpi styles */
3055 #tabbrowser-tabs::before {
3058 .tabbrowser-tab:hover > .tab-stack > .tab-background:not([selected=true]),
3059 .tabs-newtab-button:hover {
3062 .tab-background-middle[selected=true] {
3065 .tab-background-start[selected=true]:-moz-locale-dir(ltr)::after,
3066 .tab-background-end[selected=true]:-moz-locale-dir(rtl)::after {
3069 .tab-background-end[selected=true]:-moz-locale-dir(ltr)::after,
3070 .tab-background-start[selected=true]:-moz-locale-dir(rtl)::after {
3074 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
3078 /* All tabs menupopup */
3080 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3081 background-color: #402800;
3084 .alltabs-endimage[soundplaying],
3085 .alltabs-endimage[muted],
3086 .alltabs-endimage[blocked] {
3087 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio);
3088 filter: url(chrome://global/skin/filters.svg#fill);
3092 .alltabs-endimage[muted] {
3093 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted);
3096 .alltabs-endimage[blocked] {
3097 list-style-image: url(chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-blocked);
3100 /* === END tabs.inc.css === */
3102 /* Tab DnD indicator */
3103 .tab-drop-indicator {
3104 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3105 margin-bottom: -11px;
3108 /* Tab close button */
3110 list-style-image: url("chrome://global/skin/icons/close-button.gif") !important;
3111 -moz-image-region: auto !important;
3114 .tab-close-button:hover,
3115 .tab-close-button:hover[selected="true"] {
3116 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3117 -moz-image-region: auto !important;
3120 .tab-close-button:hover:active,
3121 .tab-close-button:hover:active[selected="true"] {
3122 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif") !important;
3123 -moz-image-region: auto !important;
3126 .tab-close-button > .button-icon,
3127 .tab-close-button > .button-box > .button-icon,
3128 .tab-close-button > .toolbarbutton-icon {
3129 width: auto !important;
3133 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3135 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3136 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3140 background-origin: border-box;
3143 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3144 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3145 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3146 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3149 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3150 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3153 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3154 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3155 /* transform: scaleX(-1);*/
3158 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3159 transition: 1s background-color ease-out;
3162 .tabbrowser-arrowscrollbox > .scrollbutton-down[highlight] {
3163 background-color: #008484;
3166 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3167 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3168 /* border-width: 0 2px 0 0;
3169 border-style: solid;
3170 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3173 .tabs-newtab-button > .toolbarbutton-icon {
3175 margin-bottom: -1px;
3178 .tabs-newtab-button,
3179 #TabsToolbar > #new-tab-button,
3180 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3181 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3182 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3183 -moz-image-region: auto;
3186 .tabs-newtab-button,
3187 .tabs-newtab-button:hover,
3188 #TabsToolbar > #new-tab-button,
3189 #TabsToolbar > #new-tab-button:hover {
3192 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3193 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3194 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3195 .tabs-newtab-button:-moz-lwtheme-brighttext,
3196 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3197 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3200 #TabsToolbar > #new-tab-button {
3205 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3208 #alltabs-button:hover,
3209 #alltabs-button:hover:active,
3210 #alltabs-button[open="true"] {
3211 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3214 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3215 #alltabs-button:-moz-lwtheme-brighttext {
3218 #alltabs-button > .toolbarbutton-icon {
3222 #alltabs-button > .toolbarbutton-menu-dropmarker {
3226 /* All tabs menupopup */
3227 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3228 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3229 -moz-image-region: auto;
3232 .alltabs-item[selected="true"] {
3236 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3237 list-style-image: url("chrome://global/skin/icons/loading.png");
3240 @media (min-resolution: 1.1dppx) {
3241 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3242 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3246 toolbarbutton.chevron {
3247 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3250 toolbarbutton.chevron:hover {
3251 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3254 toolbar[brighttext] toolbarbutton.chevron {
3255 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3258 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3259 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3260 transform: scaleX(-1);
3263 toolbarbutton.chevron > .toolbarbutton-text,
3264 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3268 toolbarbutton.chevron > .toolbarbutton-icon {
3272 #sidebar-throbber[loading="true"] {
3273 list-style-image: url("chrome://global/skin/icons/loading.png");
3274 margin-inline-end: 4px;
3277 @media (min-resolution: 1.1dppx) {
3278 #sidebar-throbber[loading="true"] {
3279 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3284 /* Bookmarks toolbar */
3285 #PlacesToolbarDropIndicator {
3286 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3289 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3290 background-color: #008484 !important;
3291 color: #FFCF00 !important;
3294 /* rules for menupopup drop indicators */
3295 .menupopup-drop-indicator-bar {
3297 /* these two margins must together compensate the indicator's height */
3299 margin-bottom: -1px;
3302 .menupopup-drop-indicator {
3303 list-style-image: none;
3305 margin-inline-end: -4em;
3306 background-color: #008484;
3309 /* === BEGIN notification-icons.inc.css === */
3311 #notification-popup-box {
3312 border-radius: 3px 0 0 3px;
3315 margin-inline-end: -5px;
3316 padding-inline-end: 5px;
3319 .notification-anchor-icon,
3320 #blocked-permissions-container > .blocked-permission-icon {
3323 margin-inline-start: 2px;
3326 /* This class can be used alone or in combination with the class defining the
3327 type of icon displayed. This rule must be defined before the others in order
3328 for its list-style-image to be overridden. */
3329 .notification-anchor-icon {
3330 list-style-image: url(chrome://browser/skin/notification-icons.svg#default-info);
3333 .notification-anchor-icon:-moz-focusring {
3334 outline: 1px dotted #008484;
3337 @media (min-resolution: 1.1dppx) {
3338 .notification-anchor-icon {
3339 list-style-image: url(chrome://global/skin/icons/information-32.png);
3343 .notification-anchor-icon:not(.plugin-blocked),
3344 #blocked-permissions-container > .blocked-permission-icon {
3345 filter: url(chrome://global/skin/filters.svg#fill);
3349 /* INDIVIDUAL NOTIFICATIONS */
3351 .popup-notification-icon[popupid="web-notifications"],
3352 .desktop-notification-icon {
3353 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification);
3356 .desktop-notification-icon.blocked-permission-icon {
3357 list-style-image: url(chrome://browser/skin/notification-icons.svg#desktop-notification-blocked);
3361 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows);
3364 .geo-icon.blocked-permission-icon {
3365 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-blocked);
3368 .popup-notification-icon[popupid="geolocation"] {
3369 list-style-image: url(chrome://browser/skin/notification-icons.svg#geo-windows-detailed);
3372 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3374 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB);
3377 .indexedDB-icon.blocked-permission-icon {
3378 list-style-image: url(chrome://browser/skin/notification-icons.svg#indexedDB-blocked);
3382 list-style-image: url(chrome://browser/skin/notification-icons.svg#login);
3385 .popup-notification-icon[popupid="password"] {
3386 list-style-image: url(chrome://browser/skin/notification-icons.svg#login-detailed);
3390 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera);
3393 .camera-icon.in-use {
3394 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-sharing);
3397 .camera-icon.blocked-permission-icon {
3398 list-style-image: url(chrome://browser/skin/notification-icons.svg#camera-blocked);
3402 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone);
3405 .microphone-icon.in-use {
3406 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-sharing);
3409 .microphone-icon.blocked-permission-icon {
3410 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-blocked);
3413 .popup-notification-icon.microphone-icon {
3414 list-style-image: url(chrome://browser/skin/notification-icons.svg#microphone-detailed);
3418 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen);
3421 .screen-icon.in-use {
3422 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-sharing);
3425 .screen-icon.blocked-permission-icon {
3426 list-style-image: url(chrome://browser/skin/notification-icons.svg#screen-blocked);
3429 #webRTC-preview:not([hidden]) {
3430 display: -moz-stack;
3432 border: 1px solid #A09090;
3438 html|*#webRTC-previewVideo {
3440 /* If we don't set the min-width, width is ignored. */
3445 #webRTC-previewWarning {
3446 background: #FF0000 url("chrome://browser/skin/warning-white.svg") no-repeat .75em .75em;
3449 padding-inline-start: calc(1.5em + 16px);
3450 border-top: 1px solid #A09090;
3453 #webRTC-previewWarning > .text-link {
3454 margin-inline-start: 0;
3457 /* This icon has a block sign in it, so we don't need a blocked version. */
3459 list-style-image: url("chrome://browser/skin/notification-icons.svg#popup");
3464 .popup-notification-icon[popupid="drmContentPlaying"],
3466 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3469 .drm-icon:hover:active {
3470 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3473 #eme-notification-icon[firstplay=true] {
3474 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3477 @keyframes emeTeachingMoment {
3478 0% {transform: translateX(0); }
3479 25% {transform: translateX(3px) }
3480 75% {transform: translateX(-3px) }
3481 100% { transform: translateX(0); }
3484 /* INSTALL ADDONS */
3487 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg);
3490 .popup-notification-icon[popupid="xpinstall-disabled"],
3491 .popup-notification-icon[popupid="addon-install-blocked"],
3492 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3493 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3496 .popup-notification-icon[popupid="addon-progress"] {
3497 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3500 .popup-notification-icon[popupid="addon-install-failed"] {
3501 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3504 .popup-notification-icon[popupid="addon-install-confirmation"] {
3505 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3508 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3509 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3512 .popup-notification-icon[popupid="addon-install-complete"] {
3513 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3516 .popup-notification-icon[popupid="addon-install-restart"] {
3517 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3520 .popup-notification-icon[popupid="click-to-play-plugins"] {
3521 list-style-image: url(chrome://mozapps/skin/plugins/pluginBlocked-64.png);
3526 .popup-notification-icon[popupid*="offline-app-requested"],
3527 .popup-notification-icon[popupid="offline-app-usage"] {
3528 list-style-image: url(chrome://global/skin/icons/question-64.png);
3534 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
3537 .plugin-icon.plugin-blocked {
3538 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
3541 #notification-popup-box[hidden] {
3542 /* Override display:none to make the pluginBlockedNotification animation work
3543 when showing the notification repeatedly. */
3545 visibility: collapse;
3548 #plugins-notification-icon.plugin-blocked[showing] {
3549 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3552 @keyframes pluginBlockedNotification {
3563 .popup-notification-icon[popupid="servicesInstall"] {
3564 list-style-image: url(chrome://browser/skin/social/services-64.png);
3568 list-style-image: url(chrome://browser/skin/social/services-16.png);
3574 list-style-image: url(chrome://browser/skin/translation-16.png);
3575 -moz-image-region: rect(0px, 16px, 16px, 0px);
3578 .translation-icon.in-use {
3579 -moz-image-region: rect(0px, 32px, 16px, 16px);
3582 /* === END notification-icons.inc.css === */
3584 .popup-notification-body[popupid="addon-progress"],
3585 .popup-notification-body[popupid="addon-install-confirmation"] {
3590 .addon-install-confirmation-name {
3594 .addon-webext-perm-header {
3598 .addon-webext-name {
3607 list-style-image: url("chrome://browser/skin/menuPanel.svg");
3608 -moz-image-region: rect(0px, 288px, 32px, 256px);
3611 .addon-toolbar-icon {
3614 list-style-image: url("chrome://browser/skin/Toolbar.png");
3615 -moz-image-region: rect(0, 486px, 18px, 468px);
3618 /* Notification icon box */
3620 .notification-anchor-icon:-moz-focusring {
3621 /* outline: 1px dotted -moz-DialogText;*/
3624 /* Translation infobar */
3626 /* === BEGIN infobar.inc.css === */
3628 notification[value="translation"] .messageImage {
3629 list-style-image: url("chrome://browser/skin/translation-16.png");
3630 -moz-image-region: rect(0, 32px, 16px, 16px);
3633 @media (min-resolution: 1.25dppx) {
3634 notification[value="translation"] .messageImage {
3635 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3636 -moz-image-region: rect(0, 64px, 32px, 32px);
3640 notification[value="translation"][state="translating"] .messageImage {
3641 list-style-image: url("chrome://browser/skin/translating-16.png");
3642 -moz-image-region: auto;
3645 @media (min-resolution: 1.25dppx) {
3646 notification[value="translation"][state="translating"] .messageImage {
3647 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3651 notification[value="translation"] hbox[anonid="details"] {
3655 notification[value="translation"] button,
3656 notification[value="translation"] menulist {
3660 notification[value="translation"] menulist > .menulist-dropmarker {
3663 .translation-menupopup arrowscrollbox {
3667 .translation-attribution {
3669 -moz-box-align: end;
3673 .translation-attribution > label {
3677 .translation-attribution > image {
3681 .translation-welcome-panel {
3685 .translation-welcome-logo {
3688 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3689 -moz-image-region: rect(0, 64px, 32px, 32px);
3692 .translation-welcome-content {
3693 margin-inline-start: 16px;
3696 .translation-welcome-headline {
3701 .translation-welcome-body {
3706 /* === END infobar.inc.css === */
3708 notification[value="translation"] {
3712 .translation-menupopup {
3713 -moz-appearance: none;
3716 /* Bookmarks roots menu-items */
3717 #subscribeToPageMenuitem:not([disabled]),
3718 #subscribeToPageMenupopup {
3719 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3722 #bookmarksToolbarFolderMenu,
3723 #BMB_bookmarksToolbar,
3724 #panelMenu_bookmarksToolbar {
3725 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3726 -moz-image-region: auto;
3729 #BMB_unsortedBookmarks,
3730 #panelMenu_unsortedBookmarks {
3731 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3732 -moz-image-region: auto;
3737 .statuspanel-label {
3740 background: #404000;
3741 border: 1px none #9C9CFF;
3742 border-top-style: solid;
3747 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3748 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3749 border-right-style: solid;
3750 border-top-right-radius: .3em;
3754 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3755 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3756 border-left-style: solid;
3757 border-top-left-radius: .3em;
3761 /* HACK to abolish devily color on main content */
3764 background-color: transparent !important;
3767 /* === BEGIN fullscreen/warning.inc.css === */
3769 html|*.pointerlockfswarning {
3770 align-items: center;
3771 background: rgba(0, 0, 0, 0.9);
3772 border: 2px solid #A09090;
3773 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3776 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3779 html|*.pointerlockfswarning::before {
3781 width: 24px; height: 24px;
3784 html|*.pointerlockfswarning[data-identity="verifiedIdentity"]::before,
3785 html|*.pointerlockfswarning[data-identity="verifiedDomain"]::before {
3786 content: url("chrome://browser/skin/fullscreen/secure.svg");
3789 html|*.pointerlockfswarning[data-identity="unknownIdentity"]::before {
3790 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3793 html|*.pointerlockfswarning-domain-text,
3794 html|*.pointerlockfswarning-generic-text {
3796 font-weight: lighter;
3801 html|*.pointerlockfswarning-domain {
3806 html|*#fullscreen-exit-button {
3808 html|*.pointerlockfswarning-exit-button {
3811 border-radius: 300px;
3813 background-color: #C09070;
3817 /* === END fullscreen/warning.inc.css === */
3819 /* === BEGIN ctrlTab.inc.css === */
3824 -moz-appearance: none;
3825 background: rgba(0%,0%,0%,.7);
3828 padding: 20px 10px 10px;
3832 .ctrlTab-favicon[src] {
3833 background-color: #000000;
3839 .ctrlTab-preview-inner > .tabPreview-canvas {
3840 /* box-shadow: 1px 1px 2px hsl(0,0%,12%);*/
3843 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3847 .ctrlTab-preview-inner {
3849 border: 2px solid transparent;
3850 border-radius: .5em;
3853 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner {
3854 margin: -10px -10px 0;
3857 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3858 background-color: #000000;
3861 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3863 background-color: #000000;
3865 border-color: #9C9CFF;
3872 /* === END ctrlTab.inc.css === */
3874 /* === BEGIN commandline.inc.css === */
3876 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3877 We are copy/pasting variables from light-theme and dark-theme,
3878 since they aren't loaded in this context (within browser.css). */
3879 :root #developer-toolbar {
3880 --gcli-background-color: #000000; /* --theme-toolbar-background */
3881 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3882 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3883 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3884 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3885 --selection-background: #008484; /* --theme-selection-background */
3886 --selection-color: #000000; /* --theme-selection-color */
3887 --command-line-image: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme); /* --theme-command-line-image */
3888 --command-line-image-focus: url(chrome://devtools/skin/images/commandline-icon.svg#light-theme-focus); /* --theme-command-line-image-focus */
3891 /* Developer toolbar */
3893 #developer-toolbar {
3894 border-top: 3px solid var(--gcli-background-color);
3895 border-bottom: none;
3898 #developer-toolbar .toolbar-holder {
3899 background-color: #8050B0;
3903 #developer-toolbar .toolbar-holder {
3904 background-color: #8050B0;
3908 #developer-toolbar .toolbar-startcap,
3909 #developer-toolbar .toolbar-endcap{
3910 background-color: #6000CF;
3913 #developer-toolbar {
3915 min-height: 32px; */
3918 #developer-toolbar > toolbarbutton {
3920 background-color: transparent;
3926 .developer-toolbar-button > image {
3927 /* margin: auto 10px; */
3930 #developer-toolbar-toolbox-button > label {
3934 .developer-toolbar-button > .toolbarbutton-icon {
3939 #developer-toolbar-toolbox-button {
3940 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
3941 -moz-image-region: rect(0px, 16px, 16px, 0px);
3944 #developer-toolbar-toolbox-button > label {
3948 #developer-toolbar-toolbox-button:hover,
3949 #developer-toolbar-toolbox-button:hover:active,
3950 #developer-toolbar-toolbox-button[checked=true] {
3951 -moz-image-region: rect(0px, 32px, 16px, 16px);
3954 @media (min-resolution: 2dppx) {
3955 #developer-toolbar-toolbox-button {
3956 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
3957 -moz-image-region: rect(0px, 32px, 32px, 0px);
3960 #developer-toolbar-toolbox-button:hover,
3961 #developer-toolbar-toolbox-button:hover:active,
3962 #developer-toolbar-toolbox-button[checked=true] {
3963 -moz-image-region: rect(0px, 64px, 32px, 32px);
3969 html|*#gcli-tooltip-frame,
3970 html|*#gcli-output-frame {
3973 background-color: transparent;
3979 background-color: transparent;
3982 .gclitoolbar-input-node,
3983 .gclitoolbar-complete-node {
3985 -moz-box-align: center;
3989 background-color: transparent;
3992 .gclitoolbar-input-node {
3993 /* line-height: 32px;
3994 outline-style: none; */
3995 background-repeat: no-repeat;
3996 background-color: var(--gcli-input-background);
3999 .gclitoolbar-input-node[focused="true"] {
4000 background-color: var(--gcli-input-focused-background);
4003 .gclitoolbar-input-node::before {
4005 display: inline-block;
4006 -moz-box-ordinal-group: 0;
4010 background-image: var(--command-line-image);
4013 .gclitoolbar-input-node[focused="true"]::before {
4014 background-image: var(--command-line-image-focus);
4017 .gclitoolbar-input-node:not([focused="true"]) {
4018 border-color: transparent;
4021 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4022 background-color: var(--selection-background);
4023 color: var(--selection-color);
4026 .gclitoolbar-complete-node {
4028 background-color: transparent;
4031 pointer-events: none;
4034 .gcli-in-incomplete,
4038 .gcli-in-closebrace,
4045 .gcli-in-incomplete {
4046 border-bottom: 2px dotted #8050B0;
4050 border-bottom: 2px dotted #FF0000;
4061 .gcli-in-closebrace {
4065 /* === END commandline.inc.css === */
4067 /* === BEGIN responsivedesign.inc.css === */
4069 /* Responsive Mode */
4071 .browserContainer[responsivemode] {
4072 background-color: #221500;
4073 padding: 0 20px 20px 20px;
4076 .browserStack[responsivemode] {
4077 box-shadow: 0 0 7px #9C9CFF;
4080 .devtools-responsiveui-toolbar {
4081 background: transparent;
4082 /* text color is textColor from dark theme, since no theme is applied to
4083 * the responsive toolbar.
4089 border-bottom-width: 0;
4092 .devtools-responsiveui-textinput {
4093 /* -moz-appearance: none;
4096 border: 1px solid #111;
4103 .devtools-responsiveui-textinput[attention] {
4104 /* border-color: #38ace6;
4105 background: rgba(56,172,230,0.4);*/
4108 .devtools-responsiveui-menulist,
4109 .devtools-responsiveui-toolbarbutton {
4110 -moz-box-align: center;
4112 /* min-height: 22px;*/
4113 /* margin: 0 3px; */
4116 .devtools-responsiveui-menulist .menulist-editable-box {
4117 background-color: transparent;
4120 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4125 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4126 /* background: hsla(212,7%,57%,.35);*/
4129 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4134 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4135 -moz-box-orient: horizontal;
4138 .devtools-responsiveui-menulist:-moz-focusring,
4139 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4140 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4141 outline-offset: -4px;*/
4144 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4148 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4149 /* border-color: hsla(210,8%,5%,.6);
4150 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4151 box-shadow: 0 0 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4154 .devtools-responsiveui-menulist[open=true],
4155 .devtools-responsiveui-toolbarbutton[open=true],
4156 .devtools-responsiveui-toolbarbutton[checked=true] {
4157 /* border-color: hsla(210,8%,5%,.6) !important;
4158 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4159 box-shadow: 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 3px hsla(210,8%,5%,.25) inset, 0 1px 0 hsla(210,16%,76%,.15); */
4162 .devtools-responsiveui-toolbarbutton[checked=true] {
4163 /* color: hsl(208,100%,60%); */
4166 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4167 /* background-color: transparent !important;*/
4170 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4171 /* background-color: hsla(210,8%,5%,.2) !important;*/
4174 .devtools-responsiveui-menulist > .menulist-label-box {
4178 .devtools-responsiveui-menulist > .menulist-dropmarker {
4179 /* display: -moz-box;
4180 background-color: transparent;
4181 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4182 -moz-box-align: center;
4187 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4190 border-inline-end: 1px solid hsla(210,8%,5%,.45);
4191 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4194 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4195 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4198 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4199 /* padding: 0 1px;*/
4200 -moz-box-align: stretch;
4203 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4204 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4205 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4206 -moz-box-align: center;
4210 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4211 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4215 .devtools-responsiveui-close {
4216 list-style-image: url("chrome://devtools/skin/close.svg");
4219 .devtools-responsiveui-close:hover {
4220 filter: url(chrome://devtools/skin/images/filters.svg#checked-icon-state);
4223 .devtools-responsiveui-close > image {
4227 .devtools-responsiveui-rotate {
4228 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4229 -moz-image-region: rect(0px,16px,16px,0px);
4232 .devtools-responsiveui-rotate:hover {
4233 -moz-image-region: rect(0px,32px,16px,16px);
4236 @media (min-resolution: 2dppx) {
4237 .devtools-responsiveui-rotate {
4238 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4241 .devtools-responsiveui-rotate:hover {
4242 -moz-image-region: rect(0px,64px,32px,32px);
4246 .devtools-responsiveui-touch {
4247 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4248 -moz-image-region: rect(0px,16px,16px,0px);
4251 .devtools-responsiveui-touch:hover,
4252 .devtools-responsiveui-touch[checked],
4253 .devtools-responsiveui-touch[checked]:hover {
4254 -moz-image-region: rect(0px,32px,16px,16px);
4257 @media (min-resolution: 2dppx) {
4258 .devtools-responsiveui-touch {
4259 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4260 -moz-image-region: rect(0px,32px,32px,0px);
4263 .devtools-responsiveui-touch:hover,
4264 .devtools-responsiveui-touch[checked],
4265 .devtools-responsiveui-touch[checked]:hover {
4266 -moz-image-region: rect(0px,64px,32px,32px);
4270 .devtools-responsiveui-screenshot {
4271 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4272 -moz-image-region: rect(0px,16px,16px,0px);
4275 .devtools-responsiveui-screenshot:hover {
4276 -moz-image-region: rect(0px,32px,16px,16px);
4279 @media (min-resolution: 2dppx) {
4280 .devtools-responsiveui-screenshot {
4281 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4284 .devtools-responsiveui-screenshot:hover {
4285 -moz-image-region: rect(0px,64px,32px,32px);
4289 .devtools-responsiveui-resizebarV {
4293 transform: translate(12px, -12px);
4294 background-size: cover;
4295 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4298 .devtools-responsiveui-resizebarH {
4302 transform: translate(-12px, 12px);
4303 background-size: cover;
4304 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4307 .devtools-responsiveui-resizehandle {
4311 transform: translate(12px, 12px);
4312 background-size: cover;
4313 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4316 /* FxOS custom mode with additional buttons and phone look'n feel */
4318 /* Hide devtools manual resizer */
4319 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4320 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4321 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4325 /* Gives responsive mode a phone look'n feel */
4326 .browserStack[responsivemode].fxos-mode {
4327 padding: 60px 15px 0;
4329 border-radius: 25px / 20px;
4330 border-bottom-left-radius: 0;
4331 border-bottom-right-radius: 0;
4332 border: 1px solid #FFFFFF;
4333 border-bottom-width: 0;
4335 background-color: #353535;
4337 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4339 background-image: linear-gradient(to right, #111 11%, #333 56%);
4343 .devtools-responsiveui-hardware-buttons {
4344 -moz-appearance: none;
4347 border: 1px solid #FFFFFF;
4348 border-bottom-left-radius: 25px;
4349 border-bottom-right-radius: 25px;
4350 border-top-width: 0;
4352 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4354 background-image: linear-gradient(to right, #111 11%, #333 56%);
4357 .devtools-responsiveui-home-button {
4358 -moz-user-focus: ignore;
4361 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4364 .devtools-responsiveui-sleep-button {
4365 -moz-user-focus: ignore;
4366 -moz-appearance: none;
4367 /* compensate browserStack top padding */
4375 border: 1px solid #444;
4376 border-top-right-radius: 12px;
4377 border-top-left-radius: 12px;
4378 border-bottom-color: transparent;
4380 background-image: linear-gradient(to top, #111 11%, #333 56%);
4383 .devtools-responsiveui-sleep-button:hover:active {
4384 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4387 .devtools-responsiveui-volume-buttons {
4391 .devtools-responsiveui-volume-up-button,
4392 .devtools-responsiveui-volume-down-button {
4393 -moz-user-focus: ignore;
4394 -moz-appearance: none;
4395 border: 1px solid red;
4399 border: 1px solid #444;
4400 border-right-color: transparent;
4402 background-image: linear-gradient(to right, #111 11%, #333 56%);
4405 .devtools-responsiveui-volume-up-button:hover:active,
4406 .devtools-responsiveui-volume-down-button:hover:active {
4407 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4410 .devtools-responsiveui-volume-up-button {
4411 border-top-left-radius: 12px;
4414 .devtools-responsiveui-volume-down-button {
4415 border-bottom-left-radius: 12px;
4418 @media (min-resolution: 2dppx) {
4419 .devtools-responsiveui-resizebarV {
4420 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4423 .devtools-responsiveui-resizebarH {
4424 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4427 .devtools-responsiveui-resizehandle {
4428 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4432 /* === END responsivedesign.inc.css === */
4434 /* === including indicator.css is done at the start of the file === */
4438 #developer-toolbar-toolbox-button[error-count]:before {
4442 background-color: #FF0000;
4444 margin-inline-end: 5px;
4447 /* === BEGIN plugin-doorhanger.inc.css === */
4450 * Plugin Doorhanger Styles
4453 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4454 padding: 6px 1px 2px;
4457 .click-to-play-plugins-notification-center-box {
4460 .plugin-popupnotification-centeritem:nth-child(odd) {
4461 /* background-color: rgba(0,0,0,0.1);*/
4464 .center-item-label {
4466 text-overflow: ellipsis;
4469 .center-item-warning-icon {
4470 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.svg");
4471 background-repeat: no-repeat;
4474 margin-inline-start: 6px;
4477 .click-to-play-plugins-notification-button-container {
4480 .click-to-play-popup-button {
4484 .click-to-play-plugins-notification-description-box {
4488 padding-bottom: 3px;
4491 .click-to-play-plugins-outer-description {
4495 .click-to-play-plugins-notification-link,
4500 .messageImage[value="plugin-hidden"] {
4501 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin);
4504 /* Keep any changes to this style in sync with pluginProblem.css */
4505 notification.pluginVulnerable {
4508 notification.pluginVulnerable .messageImage {
4509 list-style-image: url(chrome://browser/skin/notification-icons.svg#plugin-blocked);
4512 /* === END plugin-doorhanger.inc.css === */
4514 /* === BEGIN customizeMode.inc.css === */
4516 /* Customization mode */
4519 --drag-drop-transition-duration: .3s;
4522 #main-window[customization-lwtheme] #tab-view-deck:-moz-lwtheme {
4523 background-repeat: no-repeat;
4524 background-position: right top;
4525 background-attachment: fixed;
4526 background-color: transparent;
4527 background-image: -moz-image-rect(var(--lwt-header-image), 0, 100%,
4528 var(--toolbox-rect-height), 0),
4529 linear-gradient(to bottom,
4530 var(--lwt-accent-color) calc(var(--toolbox-rect-height-with-unit) - 1px),
4531 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) - 1px),
4532 rgba(0,0,0,0.25) calc(var(--toolbox-rect-height-with-unit) + 1px),
4533 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 1px),
4534 rgba(255,255,255,0.5) calc(var(--toolbox-rect-height-with-unit) + 2px),
4535 transparent calc(var(--toolbox-rect-height-with-unit) + 2px));
4538 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4542 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4543 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4544 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4549 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4550 pointer-events: none;
4553 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4554 #PanelUI-contents > .panel-customization-placeholder {
4555 -moz-outline-radius: 2.5px;
4556 outline: 1px dashed transparent;
4559 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4560 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4561 -moz-box-ordinal-group: 0;
4566 outline-offset: -2px;
4567 pointer-events: none;
4573 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4574 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4575 offset from the bottom effectively the same as other targets (-2px). */
4576 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4580 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4581 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4582 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4583 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4587 /* Most target outlines are shown on hover and drag over but the panel menu uses
4588 placeholders instead. */
4589 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4590 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4591 /* nav-bar and panel outlines are always shown */
4592 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4593 outline-color: currentColor;
4596 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4597 transition: outline-color 250ms linear;
4600 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4601 transition: outline-color 250ms linear;
4602 outline-color: var(--panel-separator-color);
4605 #PanelUI-contents > .panel-customization-placeholder {
4607 outline-offset: -5px;
4610 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4612 /* padding-left: 10px;
4613 padding-right: 10px;*/
4616 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4620 #customization-container {
4621 background-color: #000000;
4625 #customization-palette,
4626 #customization-empty {
4627 padding: 0 15px 15px;
4630 #customization-header {
4632 line-height: 1.75em;
4635 margin: 25px 25px 12px;
4636 padding-bottom: 12px;
4637 border-bottom: 1px solid #A09090;
4640 #customization-panel-container {
4641 padding: 10px 10px 0px;
4644 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4645 #customization-footer {
4646 /*background-color: rgb(236,236,236);*/
4649 #customization-footer {
4650 border-top: 1px solid #9C9CFF;
4654 .customizationmode-button {
4658 .customizationmode-button:hover {
4661 .customizationmode-button > .box-inherit {
4664 .customizationmode-button > .button-icon {
4667 .customizationmode-button:not([type=menu]) > .button-text {
4670 .customizationmode-button > .button-menu-dropmarker {
4675 .customizationmode-button[checked] {
4676 background-color: #008484;
4679 .customizationmode-button[checked]:hover:not([disabled]),
4680 .customizationmode-button:hover:not([disabled]) {
4681 background-color: #FFCF00;
4684 .customizationmode-button[checked]:hover:active:not([disabled]),
4685 .customizationmode-button:hover:active:not([disabled]),
4686 .customizationmode-button[open] {
4687 background-color: #FF9F00;
4690 .customizationmode-button[disabled="true"] {
4693 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
4694 .customizationmode-button > .button-box > .button-icon {
4698 #customization-titlebar-visibility-button {
4699 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4700 -moz-image-region: rect(0, 16px, 16px, 0);
4703 #customization-titlebar-visibility-button:hover {
4704 -moz-image-region: rect(16px, 16px, 32px, 0);
4707 #customization-titlebar-visibility-button > .button-box {
4709 padding-bottom: 1px;
4712 #customization-titlebar-visibility-button:hover:active > .button-box {
4717 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
4718 #customization-titlebar-visibility-button > .button-box > .button-text {
4719 /* Sadly, button.css thinks its margins are perfect for everyone. */
4720 margin-inline-start: 5px !important;
4723 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
4727 background-image: url("chrome://browser/content/default-theme-icon.svg");
4728 background-size: contain;
4731 #customization-titlebar-visibility-button > .button-box > .button-icon {
4732 vertical-align: middle;
4735 #customization-titlebar-visibility-button[checked] {
4736 -moz-image-region: rect(0, 32px, 16px, 16px);
4737 background-color: #008484;
4740 #customization-titlebar-visibility-button[checked]:hover {
4741 -moz-image-region: rect(16px, 32px, 32px, 16px);
4742 background-color: #FFCF00;
4745 #customization-titlebar-visibility-button[checked]:hover:active {
4746 background-color: #FF9F00;
4749 @media (min-resolution: 1.1dppx) {
4750 #customization-titlebar-visibility-button {
4751 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
4752 -moz-image-region: rect(0, 48px, 48px, 0);
4755 #customization-titlebar-visibility-button:hover {
4756 -moz-image-region: rect(48px, 48px, 96px, 0);
4759 #customization-titlebar-visibility-button[checked] {
4760 -moz-image-region: rect(0, 96px, 48px, 48px);
4763 #customization-titlebar-visibility-button[checked]:hover {
4764 -moz-image-region: rect(48px, 96px, 96px, 48px);
4768 #main-window[customize-entered] #customization-panel-container {
4769 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4770 background-position: left top;
4771 background-repeat: repeat;
4772 background-size: auto;
4773 background-attachment: fixed;
4776 toolbarpaletteitem[place="toolbar"] {
4777 transition: border-width 250ms ease-in-out;
4780 toolbarpaletteitem[mousedown] {
4781 outline: 1px solid #008484;
4782 cursor: -moz-grabbing;
4786 .panel-customization-placeholder,
4787 toolbarpaletteitem[place="palette"],
4788 toolbarpaletteitem[place="panel"] {
4789 transition: transform var(--drag-drop-transition-duration) ease-in-out;
4792 #customization-palette {
4793 transition: opacity .3s ease-in-out;
4797 #customization-palette[showing="true"] {
4801 toolbarpaletteitem toolbarbutton[disabled] {
4802 /* color: inherit !important;*/
4805 toolbarpaletteitem[notransition].panel-customization-placeholder,
4806 toolbarpaletteitem[notransition][place="toolbar"],
4807 toolbarpaletteitem[notransition][place="palette"],
4808 toolbarpaletteitem[notransition][place="panel"] {
4812 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4813 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
4814 toolbarpaletteitem > toolbaritem.panel-wide-item,
4815 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4816 transition: transform var(--drag-drop-transition-duration) cubic-bezier(.6, 2, .75, 1.5) !important;
4819 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
4820 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
4821 transform: scale(1.3);
4824 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4825 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4826 transform: scale(1.1);
4829 /* Override the toolkit styling for items being dragged over. */
4830 toolbarpaletteitem[place="toolbar"] {
4831 border-left-width: 0;
4832 border-right-width: 0;
4837 #customization-palette:not([hidden]) {
4838 margin-bottom: 25px;
4841 toolbarpaletteitem[place="palette"]:-moz-focusring,
4842 toolbarpaletteitem[place="panel"]:-moz-focusring,
4843 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
4847 toolbarpaletteitem[place="palette"]:not([mousedown="true"]):-moz-focusring,
4848 toolbarpaletteitem[place="panel"]:not([mousedown="true"]):-moz-focusring,
4849 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4850 /* Delay adding the focusring back until after the transform transition completes. */
4851 transition: outline-width .01s linear var(--drag-drop-transition-duration);
4852 outline: 1px dotted;
4853 -moz-outline-radius: 2.5px;
4856 toolbarpaletteitem[place="toolbar"]:not([mousedown="true"]):-moz-focusring {
4857 outline-offset: -5px;
4860 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4861 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4862 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4863 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4867 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4868 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4878 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4879 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4883 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4884 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4887 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4888 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4892 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4893 -moz-box-pack: center;
4897 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
4898 margin-inline-end: 5px;
4901 #customization-palette > toolbarpaletteitem > label {
4907 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
4908 -moz-box-orient: vertical;
4909 /* Make the panel padding uniform across all platforms due to the
4910 styling of the section headers and footer. */
4914 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4919 .customization-lwtheme-menu-theme {
4920 -moz-appearance: none;
4923 padding-inline-end: 5px;
4925 padding-inline-start: 0;
4928 .customization-lwtheme-menu-theme[defaulttheme] {
4929 list-style-image: url(chrome://browser/content/default-theme-icon.svg);
4932 .customization-lwtheme-menu-theme[active="true"] {
4933 background-color: #008484;
4936 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
4940 .customization-lwtheme-menu-theme > .toolbarbutton-text {
4944 #customization-lwtheme-menu-header,
4945 #customization-lwtheme-menu-recommended {
4950 #customization-lwtheme-menu-header,
4951 #customization-lwtheme-menu-recommended,
4952 #customization-lwtheme-menu-footer {
4953 background-color: #A09090;
4955 margin-right: -10px;
4959 #customization-lwtheme-menu-header {
4961 border-top-right-radius: 3px;
4962 border-top-left-radius: 3px;
4965 #customization-lwtheme-menu-recommended {
4968 #customization-lwtheme-menu-footer {
4969 margin-bottom: -10px;
4970 border-bottom-right-radius: 3px;
4971 border-bottom-left-radius: 3px;
4974 .customization-lwtheme-menu-footeritem {
4975 -moz-appearance: none;
4977 background-color: #C09070;
4979 border: 1px solid transparent;
4985 .customization-lwtheme-menu-footeritem:hover {
4986 background-color: #FFCF00;
4989 .customization-lwtheme-menu-footeritem:first-child {
4992 /* === END customizeMode.inc.css === */
4994 /* === BEGIN customizeTip.inc.css === */
4996 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5003 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5004 border: 1px solid #9C9CFF;
5008 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5009 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5012 .customization-tipPanel-infoBox {
5013 margin: 20px 25px 25px;
5015 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5016 background-repeat: no-repeat;
5019 .customization-tipPanel-content {
5025 .customization-tipPanel-em {
5030 .customization-tipPanel-contentImage {
5032 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5040 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5041 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5044 .customization-tipPanel-link {
5045 -moz-appearance: none;
5046 background: transparent;
5054 .customization-tipPanel-link > .button-box > .button-text {
5055 margin: 0 !important;
5058 .customization-tipPanel-closeBox > .close-icon {
5059 -moz-appearance: none;
5061 margin-inline-end: -25px;
5064 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5065 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5066 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5069 /* === END customizeTip.inc.css === */
5072 * This next rule is a hack to disable subpixel anti-aliasing on all
5073 * labels during the customize mode transition. Subpixel anti-aliasing
5074 * on Windows with Direct2D layers acceleration is particularly slow to
5075 * paint, so this hack is how we sidestep that performance bottleneck.
5077 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5078 transform: perspective(0.01px);
5081 #main-window[customize-entered] > #tab-view-deck {
5082 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5083 background-attachment: fixed;
5086 #main-window[customization-lwtheme]:-moz-lwtheme {
5087 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5088 background-repeat: repeat;
5089 background-attachment: fixed;
5090 background-position: left top;
5093 #main-window[customize-entered] #browser-bottombox,
5094 #main-window[customize-entered] #customization-container {
5095 border-left: 1px solid #9C9CFF;
5096 border-right: 1px solid #9C9CFF;
5097 background-clip: padding-box;
5100 #main-window[customize-entered] #browser-bottombox {
5101 border-bottom: 1px solid #9C9CFF;
5104 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5108 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5112 /* End customization mode */
5114 /* Private browsing indicators */
5117 * Currently, we have two places where we put private browsing indicators on
5118 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5119 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5120 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5121 * want the bottom border of the image to line up with the bottom of the window
5122 * caption buttons. That's why there's so much special-casing going on in here.
5124 .private-browsing-indicator {
5126 pointer-events: none;
5129 #private-browsing-indicator-titlebar {
5134 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5138 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5142 #TabsToolbar > .private-browsing-indicator {
5143 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5144 margin-inline-start: 4px;
5148 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5149 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5150 * min/max/close window buttons.
5152 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5153 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5154 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5155 margin-inline-end: 4px;
5161 /* This one is for Linux */
5162 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5163 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5167 /* End private browsing indicators */
5169 /* === BEGIN UITour.inc.css === */
5173 #UITourHighlightContainer {
5174 -moz-appearance: none;
5176 background-color: transparent;
5177 /* This is a buffer to compensate for the movement in the "wobble" effect,
5178 and for the box-shadow of #UITourHighlight. */
5183 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5184 border-radius: 40px;
5185 border: 1px solid #9C9CFF;
5186 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5187 on Linux without an X compositor where opacity is either 0 or 1. */
5188 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5193 #UITourTooltipBody {
5194 -moz-box-align: start;
5197 #UITourTooltipTitleContainer {
5198 -moz-box-align: start;
5199 margin-bottom: 10px;
5202 #UITourTooltipIcon {
5205 margin-inline-end: 10px;
5208 #UITourTooltipTitle,
5209 #UITourTooltipDescription {
5213 #UITourTooltipTitle {
5219 #UITourTooltipDescription {
5220 margin-inline-start: 0;
5221 margin-inline-end: 0;
5223 line-height: 1.8rem;
5224 margin-bottom: 0; /* Override global.css */
5227 #UITourTooltipClose {
5229 -moz-appearance: none;
5231 background-color: transparent;
5233 margin-inline-start: 4px;
5237 #UITourTooltipClose > .toolbarbutton-text {
5241 #UITourTooltipButtons {
5243 background-color: rgba(0,0,0,.2);
5244 border-top: 1px solid rgba(0,0,0,.4);
5245 margin: 10px -16px -16px;
5249 #UITourTooltipButtons > label,
5250 #UITourTooltipButtons > button {
5254 #UITourTooltipButtons > label:first-child,
5255 #UITourTooltipButtons > button:first-child {
5256 margin-inline-start: 0;
5259 #UITourTooltipButtons > label:last-child,
5260 #UITourTooltipButtons > button:last-child {
5261 margin-inline-end: 0;
5264 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5267 margin-inline-end: 5px;
5270 #UITourTooltipButtons > label,
5271 #UITourTooltipButtons > button .button-text {
5275 #UITourTooltipButtons > button:not(.button-link) {
5276 -moz-appearance: none;
5277 background-color: #C09070;
5278 border-radius: 3000px;
5282 transition-property: background-color, color;
5283 transition-duration: 150ms;
5286 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5287 background-color: #FFCF00;
5291 #UITourTooltipButtons > label,
5292 #UITourTooltipButtons > button.button-link {
5293 -moz-appearance: none;
5294 background: transparent;
5297 color: rgba(0,0,0,0.35);
5299 padding-right: 10px;
5302 #UITourTooltipButtons > button.button-link:hover {
5306 /* The primary button gets the same color as the customize button. */
5307 #UITourTooltipButtons > button.button-primary {
5308 background-color: #A06060; /* LCARS default button background color */
5311 padding-right: 30px;
5314 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5315 background-color: #FFCF00;
5319 /* Notification overrides for Heartbeat UI */
5321 notification.heartbeat {
5322 background-color: #A09090;
5326 @keyframes pulse-onshow {
5329 transform: scale(1.0);
5333 transform: scale(1.1);
5336 transform: scale(1.0);
5339 transform: scale(1.1);
5342 transform: scale(1.0);
5346 @keyframes pulse-twice {
5348 transform: scale(1.1);
5351 transform: scale(0.8);
5354 transform: scale(1);
5358 .messageText.heartbeat {
5360 /* text-shadow: none; */
5361 margin-inline-start: 0px;
5364 .messageImage.heartbeat {
5367 margin-inline-start: 8px;
5368 margin-inline-end: 8px;
5371 .messageImage.heartbeat.pulse-onshow {
5372 animation-name: pulse-onshow;
5373 animation-duration: 1.5s;
5374 animation-iteration-count: 1;
5375 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5378 .messageImage.heartbeat.pulse-twice {
5379 animation-name: pulse-twice;
5380 animation-duration: 1s;
5381 animation-iteration-count: 2;
5382 animation-timing-function: linear;
5385 /* Learn More link styles */
5386 .heartbeat > .text-link {
5388 margin-inline-start: 0px;
5391 .heartbeat > .text-link:hover {
5393 text-decoration: none;
5396 .heartbeat > .text-link:hover:active {
5400 /* Heartbeat UI Rating Star Classes */
5401 .heartbeat > #star-rating-container {
5403 /* margin-bottom: 4px;*/
5406 .heartbeat > #star-rating-container > #star5 {
5407 -moz-box-ordinal-group: 5;
5410 .heartbeat > #star-rating-container > #star4 {
5411 -moz-box-ordinal-group: 4;
5414 .heartbeat > #star-rating-container > #star3 {
5415 -moz-box-ordinal-group: 3;
5418 .heartbeat > #star-rating-container > #star2 {
5419 -moz-box-ordinal-group: 2;
5422 .heartbeat > #star-rating-container > .star-x {
5423 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5425 /* Overrides the margin-inline-end for all platforms defined in the .plain class */
5426 margin-inline-end: 4px !important;
5431 .heartbeat > #star-rating-container > .star-x:hover,
5432 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5433 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5436 /* === END UITour.inc.css === */
5438 #UITourTooltipButtons {
5440 * Override the --arrowpanel-padding so the background extends
5441 * to the sides and bottom of the panel.
5444 margin-right: -10px;
5445 margin-bottom: -10px;
5448 /* === BEGIN contextmenu.inc.css === */
5450 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5453 #context-navigation > .menuitem-iconic {
5455 -moz-box-pack: center;
5456 -moz-box-align: center;
5459 #context-navigation > .menuitem-iconic[disabled="true"] {
5460 background-color: transparent;
5463 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5464 -moz-appearance: none;
5467 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5471 filter: url(chrome://global/skin/filters.svg#fill);
5476 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back");
5480 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward");
5484 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload");
5488 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop");
5491 #context-bookmarkpage {
5492 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark");
5495 #context-bookmarkpage[starred=true] {
5496 list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked");
5499 #context-back:-moz-locale-dir(rtl),
5500 #context-forward:-moz-locale-dir(rtl),
5501 #context-reload:-moz-locale-dir(rtl) {
5502 transform: scaleX(-1);
5505 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
5506 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
5512 #context-media-eme-learnmore {
5513 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5516 #context-media-eme-learnmore {
5517 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
5520 /* === END contextmenu.inc.css === */
5522 #context-navigation {
5525 #context-sep-navigation {
5526 /* margin-top: -4px; */
5529 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
5534 .webextension-popup-browser {
5535 border-radius: inherit;
5538 .contentSelectDropdown-ingroup > .menu-iconic-text {
5539 padding-inline-start: 20px;
5542 #ContentSelectDropdown > menupopup {
5543 background-color: #000000;
5544 -moz-border-top-colors: #A09090;
5545 -moz-border-right-colors: #A09090;
5546 -moz-border-bottom-colors: #A09090;
5547 -moz-border-left-colors: #A09090;
5550 #ContentSelectDropdown > menupopup > menucaption,
5551 #ContentSelectDropdown > menupopup > menuitem {
5554 /* font: -moz-list;*/
5557 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text,
5558 #ContentSelectDropdown > menupopup > menuitem > .menu-iconic-text {
5559 /* Padding should follow the 4/12 ratio, where 12px is the default font-size
5560 with 4px being the preferred padding size. */
5561 padding-top: .3333em;
5562 padding-bottom: .3333em;
5565 #ContentSelectDropdown > menupopup > menucaption > .menu-iconic-text {
5569 #ContentSelectDropdown > menupopup > menuitem[_moz-menuactive="true"][disabled="true"] {
5571 background-color: unset;
5574 #ContentSelectDropdown > menupopup > menucaption {
5575 background-color: buttonface;
5578 #ContentSelectDropdown > menupopup > menucaption[disabled="true"] {
5582 #ContentSelectDropdown > .isOpenedViaTouch > menucaption > .menu-iconic-text,
5583 #ContentSelectDropdown > .isOpenedViaTouch > menuitem > .menu-iconic-text {
5584 /* Touch padding should follow the 11/12 ratio, where 12px is the default
5585 font-size with 11px being the preferred padding size. */
5586 padding-top: .9167em;
5587 padding-bottom: .9167em;