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");
40 /*--backbutton-urlbar-overlap: 5px;*/
42 /* icon width + border + horizontal padding (includes the overlap from backbutton-urlbar-overlap) */
43 --forwardbutton-width: 27px;
44 /* icon width + border + horizontal padding (without the overlap from backbutton-urlbar-overlap) /
45 --forwardbutton-width: 25px;*/
47 --identity-box-verified-background-color: #000000;
49 --panel-separator-color: #A09090;
51 --urlbar-separator-color: #9C9CFF;
55 -moz-box-orient: vertical; /* for flex hack */
59 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
62 /* ::::: primary toolbar ::::: */
64 .toolbar-primary > .toolbar-box > .toolbar-holder {
65 background-color: #A09090;
68 .toolbar-primary > .toolbar-box > .toolbar-startcap,
69 .toolbar-primary > .toolbar-box > .toolbar-endcap {
70 background-color: #9C9CFF;
73 /* Hides the titlebar-placeholder underneath the window caption buttons when we
74 are not autohiding the menubar. */
75 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
79 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
80 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
81 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
82 #toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
83 #toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
87 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen])[chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
88 #main-window[tabsintitlebar][sizemode="normal"]:not([inFullscreen]) #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
89 /* margin-top: var(--space-above-tabbar);*/
92 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
93 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
94 #main-window[tabsintitlebar]:not([inFullscreen="true"]) #TabsToolbar {
99 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
100 /* 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 */
104 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
105 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
106 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
107 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
108 outline-color: #A09090;
114 #navigator-toolbox::after {
117 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
121 #navigator-toolbox > toolbar {
124 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(:-moz-lwtheme) {
127 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar) {
128 overflow: -moz-hidden-unscrollable;
130 transition: min-height 170ms ease-out, max-height 170ms ease-out;
133 #navigator-toolbox > toolbar:not(#toolbar-menubar):not(#TabsToolbar):not(#nav-bar):not(#addon-bar)[collapsed=true] {
136 transition: min-height 170ms ease-out, max-height 170ms ease-out, visibility 170ms linear;
139 @media (-moz-mac-graphite-theme: 0) and (-moz-mac-lion-theme: 0) {
140 /* This is a hackish workaround to exclude most of Mac OS until bug 1060941 gets fixed. */
141 /* Indent also due to non-applicable aero rule in original Windows theme. */
142 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
143 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
145 background-color: #6000CF;
149 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
150 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
151 background-color: #8050B0;
155 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
159 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
163 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
164 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
169 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
170 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
171 #titlebar-buttonbox > .titlebar-button {
177 /* Position the toolbar above the bottom of background tabs */
182 #personal-bookmarks {
183 /* min-height: 24px; */
186 #PersonalToolbar > #home-button {
187 -moz-box-orient: horizontal;
190 #PersonalToolbar > #home-button > .toolbarbutton-text {
194 #print-preview-toolbar:not(:-moz-lwtheme) {
195 /* -moz-appearance: toolbox; */
198 #browser-bottombox:not(:-moz-lwtheme) {
201 /* ::::: titlebar ::::: */
205 background-color: #6000CF;
208 #titlebar:-moz-window-inactive {
209 background-color: #8050B0;
213 #main-window[sizemode="normal"] > #titlebar {
218 #main-window[sizemode="maximized"] > #titlebar {
222 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
223 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
224 #main-window[sizemode="normal"] > #titlebar,
225 #main-window[sizemode="maximized"] > #titlebar {
227 /* There is a margin-bottom set to -23 by code. */
231 /* The button box must appear on top of the navigator-toolbox in order for
232 * click and hover mouse events to work properly for the button in the restored
233 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
234 * can swallow those events. It will also place the buttons above the fog on
235 * themes with Aero Glass.
238 #main-window[sizemode="maximized"] #titlebar-buttonbox {
239 -moz-appearance: none;
242 -moz-margin-end: 3px;
246 .titlebar-placeholder[type="appmenu-button"] {
250 .titlebar-placeholder[type="caption-buttons"] {
254 /* titlebar command buttons */
256 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize");
259 #titlebar-min:hover {
260 list-style-image: url("chrome://browser/skin/caption-buttons.svg#minimize-hover");
264 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize");
267 #titlebar-max:hover {
268 list-style-image: url("chrome://browser/skin/caption-buttons.svg#maximize-hover");
271 #main-window[sizemode="maximized"] #titlebar-max {
272 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore");
275 #main-window[sizemode="maximized"] #titlebar-max:hover {
276 list-style-image: url("chrome://browser/skin/caption-buttons.svg#restore-hover");
280 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close");
283 #titlebar-close:hover {
284 list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-hover");
287 @media (-moz-mac-graphite-theme), (-moz-mac-lion-theme) {
288 /* This is a hackish workaround to cover most of Mac OS until bug 1060941 gets fixed. */
289 #titlebar-fullscreen-button {
290 -moz-appearance: none;
291 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon.png");
292 -moz-image-region: rect(0px, 16px, 16px, 0px);
295 #titlebar-fullscreen-button:hover {
296 -moz-image-region: rect(0px, 32px, 16px, 16px);
299 @media (min-resolution: 2dppx) {
300 #titlebar-fullscreen-button {
301 list-style-image: url("chrome://browser/skin/icons/mac-fullscreen-icon@2x.png");
302 -moz-image-region: rect(0px, 32px, 32px, 0px);
305 #titlebar-fullscreen-button:hover {
306 -moz-image-region: rect(0px, 64px, 32px, 32px);
312 /* ::::: bookmark buttons ::::: */
314 toolbarbutton.bookmark-item:not(.subviewbutton),
315 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
320 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
321 toolbarbutton.bookmark-item[open="true"] {
324 -moz-padding-start: 4px;
325 -moz-padding-end: 2px;*/
328 .bookmark-item > .toolbarbutton-icon,
329 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
332 -moz-margin-start: 1px;
333 -moz-margin-end: 2px;
338 /* Force the display of the label for bookmarks */
339 .bookmark-item > .toolbarbutton-text,
340 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
341 display: -moz-box !important;
344 .bookmark-item > .toolbarbutton-menu-dropmarker {
348 #bookmarks-toolbar-placeholder {
349 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
350 -moz-box-orient: horizontal;
353 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
354 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
355 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
358 /* ----- BOOKMARK STAR ANIMATION ----- */
360 @keyframes animation-bookmarkAdded {
361 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
362 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
364 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
367 @keyframes animation-bookmarkPulse {
368 from { transform: scale(1); }
369 50% { transform: scale(1.3); }
370 to { transform: scale(1); }
373 #bookmarked-notification-container {
382 #bookmarked-notification {
383 background-size: 16px;
384 background-position: center;
385 background-repeat: no-repeat;
391 #bookmarked-notification-dropmarker-anchor {
396 #bookmarked-notification-dropmarker-icon {
402 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
403 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
404 animation: animation-bookmarkAdded 800ms;
405 animation-timing-function: ease, ease, ease;
408 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
409 list-style-image: none !important;
412 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
414 animation: animation-bookmarkPulse 300ms;
415 animation-delay: 600ms;
416 animation-timing-function: ease-out;
419 /* ::::: bookmark menus ::::: */
422 menuitem.bookmark-item {
427 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
432 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
433 -moz-padding-start: 0px;
436 /* ::::: bookmark items ::::: */
439 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
440 -moz-image-region: auto;
443 .bookmark-item[container] {
444 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
445 -moz-image-region: auto;
448 .bookmark-item[container][open] {
449 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
450 -moz-image-region: auto;
453 .bookmark-item[container][livemark] {
454 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
455 -moz-image-region: auto;
458 .bookmark-item[container][livemark] .bookmark-item {
459 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
460 -moz-image-region: rect(0px, 16px, 16px, 0px);
463 .bookmark-item[container][livemark] .bookmark-item[visited] {
464 -moz-image-region: rect(0px, 32px, 16px, 16px);
467 .bookmark-item[container][query] {
468 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
469 -moz-image-region: auto;
472 .bookmark-item[query][tagContainer] {
473 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
474 -moz-image-region: auto;
477 .bookmark-item[query][dayContainer] {
478 list-style-image: url("chrome://communicator/skin/history/calendar.png");
479 -moz-image-region: auto;
482 .bookmark-item[query][hostContainer] {
483 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
484 -moz-image-region: auto;
487 .bookmark-item[query][hostContainer][open] {
488 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
489 -moz-image-region: auto;
492 .bookmark-item[cutting] > .toolbarbutton-icon,
493 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
497 .bookmark-item[cutting] > .toolbarbutton-text,
498 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
502 /* ::::: primary toolbar buttons ::::: */
504 /* === BEGIN toolbarbuttons.inc.css === */
506 /* Whole section of this included file: */
507 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
508 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
509 #social-share-button, #open-file-button, #find-button, #developer-button,
510 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
511 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
512 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
513 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button),
514 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
515 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
519 -moz-image-region: rect(0, 36px, 18px, 18px);
522 #back-button:hover:not([disabled="true"]) {
523 -moz-image-region: rect(18px, 36px, 36px, 18px);
526 #back-button[disabled="true"] {
527 -moz-image-region: rect(36px, 36px, 54px, 18px);
531 -moz-image-region: rect(0, 72px, 18px, 54px);
534 #forward-button:hover:not([disabled="true"]) {
535 -moz-image-region: rect(18px, 72px, 36px, 54px);
538 #forward-button[disabled="true"] {
539 -moz-image-region: rect(36px, 72px, 54px, 54px);
542 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
543 #forward-button:-moz-locale-dir(rtl) {
544 transform: scaleX(-1);
547 #home-button[cui-areatype="toolbar"] {
548 -moz-image-region: rect(0, 126px, 18px, 108px);
551 #home-button[cui-areatype="toolbar"]:hover {
552 -moz-image-region: rect(18px, 126px, 36px, 108px);
555 #bookmarks-menu-button[cui-areatype="toolbar"] {
556 -moz-image-region: rect(0, 144px, 18px, 126px);
559 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
560 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
561 -moz-image-region: rect(18px, 144px, 36px, 126px);
564 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
565 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
566 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
567 background-color: transparent !important;
570 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
571 -moz-image-region: rect(0, 162px, 18px, 144px);
574 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
575 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
576 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
577 /* When starred and clicked (for edit/delete dialog),
578 * then only the menubutton-button itself is open, but not the whole menubutton. */
579 -moz-image-region: rect(18px, 162px, 36px, 144px);
582 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
583 -moz-image-region: rect(0, 630px, 18px, 612px);
586 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
588 -moz-box-align: center;
591 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
592 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
593 -moz-image-region: rect(18px, 630px, 36px, 612px);
596 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
597 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
600 -moz-padding-start: 2px;
601 -moz-padding-end: 0px;
604 #history-panelmenu[cui-areatype="toolbar"] {
605 -moz-image-region: rect(0, 180px, 18px, 162px);
608 #history-panelmenu[cui-areatype="toolbar"]:hover,
609 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
610 -moz-image-region: rect(18px, 180px, 36px, 162px);
613 #downloads-button[cui-areatype="toolbar"] {
614 -moz-image-region: rect(0, 198px, 18px, 180px);
617 #downloads-button[cui-areatype="toolbar"]:hover,
618 #downloads-button[cui-areatype="toolbar"][open="true"] {
619 -moz-image-region: rect(18px, 198px, 36px, 180px);
622 #add-ons-button[cui-areatype="toolbar"] {
623 -moz-image-region: rect(0, 216px, 18px, 198px);
626 #add-ons-button[cui-areatype="toolbar"]:hover {
627 -moz-image-region: rect(18px, 216px, 36px, 198px);
630 #open-file-button[cui-areatype="toolbar"] {
631 -moz-image-region: rect(0, 234px, 18px, 216px);
634 #open-file-button[cui-areatype="toolbar"]:hover {
635 -moz-image-region: rect(18px, 234px, 36px, 216px);
638 #save-page-button[cui-areatype="toolbar"] {
639 -moz-image-region: rect(0, 252px, 18px, 234px);
642 #save-page-button[cui-areatype="toolbar"]:hover {
643 -moz-image-region: rect(18px, 252px, 36px, 234px);
646 #sync-button[cui-areatype="toolbar"] {
647 -moz-image-region: rect(0, 792px, 18px, 774px);
650 #sync-button[cui-areatype="toolbar"]:hover {
651 -moz-image-region: rect(18px, 792px, 36px, 774px);
654 #feed-button[cui-areatype="toolbar"] {
655 -moz-image-region: rect(0, 288px, 18px, 270px);
658 #feed-button[cui-areatype="menu-panel"][panel-multiview-anchor=true],
659 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
660 -moz-image-region: rect(18px, 288px, 36px, 270px);
663 #feed-button[cui-areatype="toolbar"][disabled="true"] {
664 -moz-image-region: rect(36px, 288px, 54px, 270px);
667 #social-share-button[cui-areatype="toolbar"] {
668 -moz-image-region: rect(0px, 306px, 18px, 288px);
671 #social-share-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
672 #social-share-button[cui-areatype="toolbar"][open="true"] {
673 -moz-image-region: rect(18px, 306px, 36px, 288px);
676 #social-share-button[cui-areatype="toolbar"][disabled="true"] {
677 -moz-image-region: rect(36px, 306px, 54px, 288px);
680 #characterencoding-button[cui-areatype="toolbar"] {
681 -moz-image-region: rect(0, 324px, 18px, 306px);
684 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
685 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
686 -moz-image-region: rect(18px, 324px, 36px, 306px);
689 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
690 -moz-image-region: rect(36px, 324px, 54px, 306px);
693 #new-window-button[cui-areatype="toolbar"] {
694 -moz-image-region: rect(0, 342px, 18px, 324px);
697 #new-window-button[cui-areatype="toolbar"]:hover {
698 -moz-image-region: rect(18px, 342px, 36px, 324px);
701 #e10s-button[cui-areatype="toolbar"] {
702 -moz-image-region: rect(0, 342px, 18px, 324px);
705 #e10s-button[cui-areatype="toolbar"]:hover {
706 -moz-image-region: rect(18px, 342px, 36px, 324px);
709 #e10s-button > .toolbarbutton-icon {
710 transform: scaleY(-1);
713 #new-tab-button[cui-areatype="toolbar"] {
714 -moz-image-region: rect(0, 360px, 18px, 342px);
717 #new-tab-button[cui-areatype="toolbar"]:hover {
718 -moz-image-region: rect(18px, 360px, 36px, 342px);
721 #privatebrowsing-button[cui-areatype="toolbar"] {
722 -moz-image-region: rect(0, 378px, 18px, 360px);
725 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
726 -moz-image-region: rect(18px, 378px, 36px, 360px);
729 #find-button[cui-areatype="toolbar"] {
730 -moz-image-region: rect(0, 396px, 18px, 378px);
733 #find-button[cui-areatype="toolbar"]:hover {
734 -moz-image-region: rect(18px, 396px, 36px, 378px);
737 #print-button[cui-areatype="toolbar"] {
738 -moz-image-region: rect(0, 414px, 18px, 396px);
741 #print-button[cui-areatype="toolbar"]:hover {
742 -moz-image-region: rect(18px, 414px, 36px, 396px);
745 #fullscreen-button[cui-areatype="toolbar"] {
746 -moz-image-region: rect(0, 432px, 18px, 414px);
749 #fullscreen-button[cui-areatype="toolbar"]:hover {
750 -moz-image-region: rect(18px, 432px, 36px, 414px);
753 #developer-button[cui-areatype="toolbar"] {
754 -moz-image-region: rect(0, 450px, 18px, 432px);
757 #developer-button[cui-areatype="toolbar"]:hover,
758 #developer-button[cui-areatype="toolbar"][open="true"] {
759 -moz-image-region: rect(18px, 450px, 36px, 432px);
762 #preferences-button[cui-areatype="toolbar"] {
763 -moz-image-region: rect(0, 468px, 18px, 450px);
766 #preferences-button[cui-areatype="toolbar"]:hover {
767 -moz-image-region: rect(18px, 468px, 36px, 450px);
770 #PanelUI-menu-button {
771 -moz-image-region: rect(0, 486px, 18px, 468px);
774 #PanelUI-menu-button:hover,
775 #PanelUI-menu-button[open="true"] {
776 -moz-image-region: rect(18px, 486px, 36px, 468px);
779 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
780 -moz-image-region: rect(0, 504px, 18px, 486px);
783 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
784 -moz-image-region: rect(18px, 504px, 36px, 486px);
787 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
788 -moz-image-region: rect(36px, 504px, 54px, 486px);
791 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
792 -moz-image-region: rect(0, 522px, 18px, 504px);
795 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
796 -moz-image-region: rect(18px, 522px, 36px, 504px);
799 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
800 -moz-image-region: rect(36px, 522px, 54px, 504px);
803 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
804 -moz-image-region: rect(0, 540px, 18px, 522px);
807 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
808 -moz-image-region: rect(18px, 540px, 36px, 522px);
811 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
812 -moz-image-region: rect(36px, 540px, 54px, 522px);
815 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
816 -moz-image-region: rect(0, 558px, 18px, 540px);
819 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
820 -moz-image-region: rect(18px, 558px, 36px, 540px);
823 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
824 -moz-image-region: rect(36px, 558px, 54px, 540px);
827 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
828 -moz-image-region: rect(0, 576px, 18px, 558px);
831 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
832 -moz-image-region: rect(18px, 576px, 36px, 558px);
835 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
836 -moz-image-region: rect(36px, 576px, 54px, 558px);
839 #nav-bar-overflow-button {
840 -moz-image-region: rect(0, 612px, 18px, 594px);
843 #nav-bar-overflow-button:hover,
844 #nav-bar-overflow-button[open="true"] {
845 -moz-image-region: rect(18px, 612px, 36px, 594px);
848 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
849 transform: scaleX(-1);
853 -moz-image-region: rect(0, 648px, 18px, 630px);
856 #tabview-button:hover {
857 -moz-image-region: rect(18px, 648px, 36px, 630px);
860 #email-link-button[cui-areatype="toolbar"] {
861 -moz-image-region: rect(0, 666px, 18px, 648px);
864 #email-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
865 -moz-image-region: rect(18px, 666px, 36px, 648px);
868 #email-button[cui-areatype="toolbar"][disabled="true"] {
869 -moz-image-region: rect(36px, 666px, 54px, 648px);
872 #sidebar-button[cui-areatype="toolbar"] {
873 -moz-image-region: rect(0, 684px, 18px, 666px);
876 #sidebar-button[cui-areatype="toolbar"]:hover {
877 -moz-image-region: rect(18px, 684px, 36px, 666px);
880 #panic-button[cui-areatype="toolbar"] {
881 -moz-image-region: rect(0, 702px, 18px, 684px);
884 #panic-button[cui-areatype="toolbar"]:hover,
885 #panic-button[cui-areatype="toolbar"][open] {
886 -moz-image-region: rect(18px, 702px, 36px, 684px);
889 #panic-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
890 transform: scaleX(-1);
893 #webide-button[cui-areatype="toolbar"] {
894 -moz-image-region: rect(0, 738px, 18px, 720px);
897 #webide-button[cui-areatype="toolbar"]:hover {
898 -moz-image-region: rect(18px, 738px, 36px, 720px);
901 /* === END toolbarbuttons.inc.css === */
903 /* === BEGIN menupanel.inc.css === */
905 /* Menu panel and palette styles */
908 /* avoid aero overrides with changed filenames */
909 --menupanel-list-style-image: url(chrome://browser/skin/menuPanelFx.png);
910 --menupanel-small-list-style-image: url(chrome://browser/skin/menuPanelFx-small.png);
913 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
914 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
915 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
916 #social-share-button, #open-file-button, #find-button, #developer-button,
917 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
918 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
919 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
920 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button)[cui-areatype="menu-panel"],
921 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
922 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
923 #social-share-button, #open-file-button, #find-button, #developer-button,
924 #preferences-button, #privatebrowsing-button, #save-page-button, #add-ons-button,
925 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
926 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
927 #copy-button, #paste-button, #e10s-button, #panic-button, #webide-button) {
928 list-style-image: var(--menupanel-list-style-image);
931 #home-button[cui-areatype="menu-panel"],
932 toolbarpaletteitem[place="palette"] > #home-button {
933 -moz-image-region: rect(0px, 128px, 32px, 96px);
936 #home-button[cui-areatype="menu-panel"]:hover,
937 toolbarpaletteitem[place="palette"] > #home-button:hover {
938 -moz-image-region: rect(32px, 128px, 64px, 96px);
941 #bookmarks-menu-button[cui-areatype="menu-panel"],
942 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
943 -moz-image-region: rect(0px, 192px, 32px, 160px);
946 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
947 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
948 -moz-image-region: rect(32px, 192px, 64px, 160px);
951 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
952 -moz-image-region: rect(32px, 192px, 64px, 160px);
955 #history-panelmenu[cui-areatype="menu-panel"],
956 toolbarpaletteitem[place="palette"] > #history-panelmenu {
957 -moz-image-region: rect(0px, 224px, 32px, 192px);
960 #history-panelmenu[cui-areatype="menu-panel"]:hover,
961 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
962 -moz-image-region: rect(32px, 224px, 64px, 192px);
965 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
966 -moz-image-region: rect(32px, 224px, 64px, 192px);
969 #downloads-button[cui-areatype="menu-panel"],
970 toolbarpaletteitem[place="palette"] > #downloads-button {
971 -moz-image-region: rect(0px, 256px, 32px, 224px);
974 #downloads-button[cui-areatype="menu-panel"]:hover,
975 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
976 -moz-image-region: rect(32px, 256px, 64px, 224px);
979 #add-ons-button[cui-areatype="menu-panel"],
980 toolbarpaletteitem[place="palette"] > #add-ons-button {
981 -moz-image-region: rect(0px, 288px, 32px, 256px);
984 #add-ons-button[cui-areatype="menu-panel"]:hover,
985 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
986 -moz-image-region: rect(32px, 288px, 64px, 256px);
989 #open-file-button[cui-areatype="menu-panel"],
990 toolbarpaletteitem[place="palette"] > #open-file-button {
991 -moz-image-region: rect(0px, 320px, 32px, 288px);
994 #open-file-button[cui-areatype="menu-panel"]:hover,
995 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
996 -moz-image-region: rect(32px, 320px, 64px, 288px);
999 #save-page-button[cui-areatype="menu-panel"],
1000 toolbarpaletteitem[place="palette"] > #save-page-button {
1001 -moz-image-region: rect(0px, 352px, 32px, 320px);
1004 #save-page-button[cui-areatype="menu-panel"]:hover,
1005 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
1006 -moz-image-region: rect(32px, 352px, 64px, 320px);
1009 #sync-button[cui-areatype="menu-panel"],
1010 toolbarpaletteitem[place="palette"] > #sync-button {
1011 -moz-image-region: rect(0px, 1024px, 32px, 992px);
1014 #sync-button[cui-areatype="menu-panel"]:hover,
1015 toolbarpaletteitem[place="palette"] > #sync-button:hover {
1016 -moz-image-region: rect(32px, 1024px, 64px, 992px);
1019 #feed-button[cui-areatype="menu-panel"],
1020 toolbarpaletteitem[place="palette"] > #feed-button {
1021 -moz-image-region: rect(0px, 416px, 32px, 384px);
1024 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1025 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
1026 -moz-image-region: rect(32px, 416px, 64px, 384px);
1029 #feed-button[cui-areatype="menu-panel"][disabled="true"],
1030 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
1031 -moz-image-region: rect(64px, 416px, 96px, 384px);
1034 #social-share-button[cui-areatype="menu-panel"],
1035 toolbarpaletteitem[place="palette"] > #social-share-button {
1036 -moz-image-region: rect(0px, 448px, 32px, 416px);
1039 #social-share-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1040 toolbarpaletteitem[place="palette"] > #social-share-button:hover:not([disabled="true"]) {
1041 -moz-image-region: rect(32px, 448px, 64px, 416px);
1044 #social-share-button[cui-areatype="menu-panel"][disabled="true"],
1045 toolbarpaletteitem[place="palette"] > #social-share-button[disabled="true"] {
1046 -moz-image-region: rect(64px, 448px, 96px, 416px);
1049 #characterencoding-button[cui-areatype="menu-panel"],
1050 toolbarpaletteitem[place="palette"] > #characterencoding-button {
1051 -moz-image-region: rect(0px, 480px, 32px, 448px);
1054 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1055 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
1056 -moz-image-region: rect(32px, 480px, 64px, 448px);
1059 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
1060 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
1061 -moz-image-region: rect(64px, 480px, 96px, 448px);
1064 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1065 -moz-image-region: rect(32px, 480px, 64px, 448px);
1068 #new-window-button[cui-areatype="menu-panel"],
1069 toolbarpaletteitem[place="palette"] > #new-window-button {
1070 -moz-image-region: rect(0px, 512px, 32px, 480px);
1073 #new-window-button[cui-areatype="menu-panel"]:hover,
1074 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
1075 -moz-image-region: rect(32px, 512px, 64px, 480px);
1078 #e10s-button[cui-areatype="menu-panel"],
1079 toolbarpaletteitem[place="palette"] > #e10s-button {
1080 -moz-image-region: rect(0px, 512px, 32px, 480px);
1083 #e10s-button[cui-areatype="menu-panel"]:hover,
1084 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
1085 -moz-image-region: rect(32px, 512px, 64px, 480px);
1088 #new-tab-button[cui-areatype="menu-panel"],
1089 toolbarpaletteitem[place="palette"] > #new-tab-button {
1090 -moz-image-region: rect(0px, 544px, 32px, 512px);
1093 #new-tab-button[cui-areatype="menu-panel"]:hover,
1094 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
1095 -moz-image-region: rect(32px, 544px, 64px, 512px);
1098 #privatebrowsing-button[cui-areatype="menu-panel"],
1099 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1100 -moz-image-region: rect(0px, 576px, 32px, 544px);
1103 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1104 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1105 -moz-image-region: rect(32px, 576px, 64px, 544px);
1108 #tabview-button[cui-areatype="menu-panel"],
1109 toolbarpaletteitem[place="palette"] > #tabview-button {
1110 -moz-image-region: rect(0px, 608px, 32px, 576px);
1113 #tabview-button[cui-areatype="menu-panel"]:hover,
1114 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1115 -moz-image-region: rect(32px, 608px, 64px, 576px);
1118 #find-button[cui-areatype="menu-panel"],
1119 toolbarpaletteitem[place="palette"] > #find-button {
1120 -moz-image-region: rect(0px, 640px, 32px, 608px);
1123 #find-button[cui-areatype="menu-panel"]:hover,
1124 toolbarpaletteitem[place="palette"] > #find-button:hover {
1125 -moz-image-region: rect(32px, 640px, 64px, 608px);
1128 #print-button[cui-areatype="menu-panel"],
1129 toolbarpaletteitem[place="palette"] > #print-button {
1130 -moz-image-region: rect(0px, 672px, 32px, 640px);
1133 #print-button[cui-areatype="menu-panel"]:hover,
1134 toolbarpaletteitem[place="palette"] > #print-button:hover {
1135 -moz-image-region: rect(32px, 672px, 64px, 640px);
1138 #fullscreen-button[cui-areatype="menu-panel"],
1139 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1140 -moz-image-region: rect(0px, 704px, 32px, 672px);
1143 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1144 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1145 -moz-image-region: rect(32px, 704px, 64px, 672px);
1148 #developer-button[cui-areatype="menu-panel"],
1149 toolbarpaletteitem[place="palette"] > #developer-button {
1150 -moz-image-region: rect(0px, 736px, 32px, 704px);
1153 #developer-button[cui-areatype="menu-panel"]:hover,
1154 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1155 -moz-image-region: rect(32px, 736px, 64px, 704px);
1158 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1159 -moz-image-region: rect(32px, 736px, 64px, 704px);
1162 #preferences-button[cui-areatype="menu-panel"],
1163 toolbarpaletteitem[place="palette"] > #preferences-button {
1164 -moz-image-region: rect(0px, 768px, 32px, 736px);
1167 #preferences-button[cui-areatype="menu-panel"]:hover,
1168 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1169 -moz-image-region: rect(32px, 768px, 64px, 736px);
1172 #email-link-button[cui-areatype="menu-panel"],
1173 toolbarpaletteitem[place="palette"] > #email-link-button {
1174 -moz-image-region: rect(0, 800px, 32px, 768px);
1177 #email-link-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
1178 toolbarpaletteitem[place="palette"] > #email-link-button:hover:not([disabled="true"]) {
1179 -moz-image-region: rect(32px, 800px, 64px, 768px);
1182 #email-link-button[cui-areatype="menu-panel"][disabled="true"],
1183 toolbarpaletteitem[place="palette"] > #email-link-button[disabled="true"] {
1184 -moz-image-region: rect(64px, 800px, 96px, 768px);
1187 #sidebar-button[cui-areatype="menu-panel"],
1188 toolbarpaletteitem[place="palette"] > #sidebar-button {
1189 -moz-image-region: rect(0, 864px, 32px, 832px);
1192 #sidebar-button[cui-areatype="menu-panel"]:hover,
1193 toolbarpaletteitem[place="palette"] > #sidebar-button:hover,
1194 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1195 -moz-image-region: rect(32px, 864px, 64px, 832px);
1198 #panic-button[cui-areatype="menu-panel"],
1199 toolbarpaletteitem[place="palette"] > #panic-button {
1200 -moz-image-region: rect(0, 896px, 32px, 864px);
1203 #panic-button[cui-areatype="menu-panel"]:hover,
1204 toolbarpaletteitem[place="palette"] > #panic-button:hover,
1205 #panic-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1206 -moz-image-region: rect(32px, 896px, 64px, 864px);
1209 #webide-button[cui-areatype="menu-panel"],
1210 toolbarpaletteitem[place="palette"] > #webide-button {
1211 -moz-image-region: rect(0px, 960px, 32px, 928px);
1214 #webide-button[cui-areatype="menu-panel"]:hover,
1215 toolbarpaletteitem[place="palette"] > #webide-button:hover {
1216 -moz-image-region: rect(32px, 960px, 64px, 928px);
1219 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1220 -moz-image-region: rect(0, 832px, 32px, 800px);
1223 /* Wide panel control icons */
1225 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1226 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1227 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1228 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1229 list-style-image: var(--menupanel-small-list-style-image);
1232 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1233 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1234 -moz-image-region: rect(0px, 32px, 16px, 16px);
1237 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1238 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1239 -moz-image-region: rect(16px, 32px, 32px, 16px);
1242 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1243 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1244 -moz-image-region: rect(32px, 32px, 48px, 16px);
1247 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1248 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1249 -moz-image-region: rect(0px, 48px, 16px, 32px);
1252 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1253 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1254 -moz-image-region: rect(16px, 48px, 32px, 32px);
1257 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1258 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1259 -moz-image-region: rect(32px, 48px, 48px, 32px);
1262 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1263 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1264 -moz-image-region: rect(0px, 64px, 16px, 48px);
1267 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1268 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1269 -moz-image-region: rect(16px, 64px, 32px, 48px);
1272 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1273 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1274 -moz-image-region: rect(32px, 64px, 48px, 48px);
1277 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1278 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1279 -moz-image-region: rect(0px, 80px, 16px, 64px);
1282 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1283 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1284 -moz-image-region: rect(16px, 80px, 32px, 64px);
1287 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1288 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1289 -moz-image-region: rect(32px, 80px, 48px, 64px);
1292 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1293 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1294 -moz-image-region: rect(0px, 96px, 16px, 80px);
1297 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1298 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1299 -moz-image-region: rect(16px, 96px, 32px, 80px);
1302 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1303 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1304 -moz-image-region: rect(32px, 96px, 48px, 80px);
1307 #add-share-provider {
1308 list-style-image: var(--menupanel-small-list-style-image);
1309 -moz-image-region: rect(0px, 96px, 16px, 80px);
1312 /* === END menupanel.inc.css === */
1314 .toolbarbutton-1:not([type="menu-button"]) {
1315 -moz-box-orient: vertical;
1319 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1325 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1326 .toolbarbutton-1[disabled="true"]:hover:active,
1327 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1331 .toolbarbutton-1:hover:active,
1332 .toolbarbutton-1[open="true"],
1333 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1335 padding-bottom: 0px;
1336 -moz-padding-start: 3px;
1337 -moz-padding-end: 1px;
1340 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1341 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1342 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1343 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1344 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1347 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1348 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1351 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1352 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1355 .toolbarbutton-1 > .toolbarbutton-icon,
1356 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1360 #nav-bar .toolbarbutton-1,
1361 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1364 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1365 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1366 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1369 #nav-bar #PanelUI-menu-button {
1370 /* -moz-padding-start: 7px;
1371 -moz-padding-end: 5px;*/
1374 #nav-bar .toolbarbutton-1[type=panel],
1375 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#PanelUI-menu-button) {
1376 /* padding-left: 5px;
1377 padding-right: 5px;*/
1380 #nav-bar .toolbarbutton-1 > menupopup {
1381 /* margin-top: -3px;*/
1384 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1388 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1389 /* -moz-padding-end: 0;*/
1392 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1393 /* -moz-padding-start: 0;
1394 -moz-box-align: center;*/
1397 .findbar-button > .toolbarbutton-text,
1398 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1399 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1400 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-stack,
1401 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1402 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1403 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1404 /* padding: 2px 6px;
1406 border-color: transparent;
1407 transition-property: background-color, border-color;
1408 transition-duration: 150ms;*/
1411 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1412 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-stack,
1413 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1418 /* Help SDK icons fit: */
1419 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon,
1420 toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
1424 #nav-bar toolbarbutton[constrain-size="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1425 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1429 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1430 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-badge-stack,
1431 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon,
1432 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button) > .toolbarbutton-badge-stack,
1433 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1434 /* -moz-padding-end: 17px;*/
1437 #nav-bar .toolbarbutton-1[type=panel] > .toolbarbutton-icon,
1438 #nav-bar .toolbarbutton-1[type=menu]:not(#PanelUI-menu-button):not(#back-button):not(#forward-button) > .toolbarbutton-icon {
1439 /* horizontal padding + border + icon width */
1440 /* max-width: 43px;*/
1443 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1446 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1449 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1452 #nav-bar .toolbaritem-combined-buttons {
1453 /* margin-left: 2px;
1454 margin-right: 2px;*/
1457 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1462 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1463 #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 {
1469 -moz-margin-end: -1px;
1473 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1476 .findbar-button:not(:-moz-any([checked="true"],[disabled="true"])):hover > .toolbarbutton-text,
1477 #nav-bar .toolbarbutton-1:not([disabled=true]) > .toolbarbutton-menubutton-button[open] + .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1478 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1479 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1480 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1481 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1482 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-stack,
1483 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1484 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1487 .findbar-button:not([disabled=true]):-moz-any([checked="true"],:hover:active) > .toolbarbutton-text,
1488 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):-moz-any(:hover:active, [open]) > .toolbarbutton-icon,
1489 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1490 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1491 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1492 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-stack {
1495 #TabsToolbar .toolbarbutton-1,
1496 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1497 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1498 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1501 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1502 #TabsToolbar .toolbarbutton-1[open],
1503 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1504 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1505 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1508 /* unified back/forward button */
1511 -moz-box-align: stretch; /* let the button shape grow vertically with the location bar */
1514 #forward-button > menupopup {
1515 margin-top: 1px !important;
1518 #forward-button > .toolbarbutton-icon {
1519 background-clip: padding-box !important;
1520 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1521 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1525 -moz-margin-start: -4px !important;
1530 border-radius: 0 10000px 10000px 0;
1531 /* max-width: calc(var(--forwardbutton-width) + var(--backbutton-urlbar-overlap)) !important; */
1534 #forward-button:-moz-locale-dir(rtl) {
1535 border-radius: 10000px 0 0 10000px;
1538 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1539 transition: margin-left 150ms ease-out;
1542 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] {
1543 margin-left: calc(0px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1546 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] {
1547 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1548 transition-delay: 100s;
1551 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] {
1552 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1553 margin-left: calc(-0.01px - var(--forwardbutton-width)/* - var(--backbutton-urlbar-overlap)*/);
1557 /* padding-top: 3px !important;
1558 padding-bottom: 3px !important;
1559 -moz-padding-start: 5px !important;
1560 -moz-padding-end: 0 !important;*/
1563 border-radius: 10000px;
1567 margin-bottom: -2px;
1570 #back-button:-moz-locale-dir(rtl) {
1573 #back-button > menupopup {
1574 margin-top: -1px !important;
1577 #back-button > .toolbarbutton-icon {
1578 border-radius: 10000px !important;
1579 background-clip: padding-box !important;
1580 /* background-color: hsla(210,25%,98%,.08) !important;
1581 padding: 6px !important;
1582 border-style: none !important;
1583 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1584 0 0 0 1px hsla(210,4%,10%,.25);*/
1585 transition-property: background-color, box-shadow !important;
1586 transition-duration: 250ms !important;
1589 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1590 /* background-color: hsla(210,4%,10%,.08) !important;*/
1593 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1594 #back-button[open="true"] > .toolbarbutton-icon {
1595 /* background-color: hsla(210,4%,10%,.12) !important;
1596 box-shadow: 0 1px 0 0 hsla(210,4%,10%,.25),
1597 0 0 0 1px hsla(210,4%,10%,.25),
1598 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1601 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
1602 transform: scaleX(-1);
1605 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1606 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1607 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1610 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1611 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1612 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1615 #home-button.bookmark-item {
1616 list-style-image: url("chrome://browser/skin/Toolbar.png");
1619 #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),
1620 #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),
1621 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1622 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1623 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1624 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1625 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1628 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1631 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1632 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1633 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1637 #downloads-button > .toolbarbutton-icon {
1641 /* tabview menu item */
1644 list-style-image: url("chrome://browser/skin/tabview/tabviewFx.png");
1645 -moz-image-region: rect(1px, 89px, 17px, 73px);
1648 #menu_tabview[groups="0"] {
1649 -moz-image-region: rect(1px, 17px, 17px, 1px);
1652 #menu_tabview[groups="1"] {
1653 -moz-image-region: rect(1px, 35px, 17px, 19px);
1656 #menu_tabview[groups="2"] {
1657 -moz-image-region: rect(1px, 53px, 17px, 37px);
1660 #menu_tabview[groups="3"] {
1661 -moz-image-region: rect(1px, 71px, 17px, 55px);
1664 /* undo close tab menu item */
1665 #alltabs_undoCloseTab {
1666 list-style-image: url(chrome://browser/skin/undoCloseTab.png);
1669 @media (min-resolution: 1.1dppx) {
1670 #alltabs_undoCloseTab {
1671 list-style-image: url(chrome://browser/skin/undoCloseTab@2x.png);
1673 #alltabs_undoCloseTab > .toolbarbutton-icon {
1678 /* zoom control text (reset) button special case: */
1680 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1681 /* To make this line up with the icons, it needs the same height (18px) +
1682 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1683 * increase in text sizes would break things...
1688 /* ::::: fullscreen window controls ::::: */
1691 -moz-margin-start: 4px;
1697 /* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1702 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1705 #minimize-button:hover {
1706 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1710 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1713 #restore-button:hover {
1714 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1718 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1721 #close-button:hover {
1722 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1725 /* ::::: Location Bar ::::: */
1728 .searchbar-textbox {
1731 -moz-margin-start: 3px;
1735 /* make color as light as possible to deal with dark non-domain parts */
1739 /* overlap the urlbar's border */
1740 #PopupAutoCompleteRichResult {
1744 #urlbar:-moz-lwtheme,
1745 .searchbar-textbox:-moz-lwtheme {
1746 /* background-color: rgba(255,255,255,.8);
1747 @navbarTextboxCustomBorder@
1751 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1752 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1753 /* background-color: rgba(255,255,255,.9);*/
1756 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1757 .searchbar-textbox:-moz-lwtheme[focused] {
1758 /* background-color: white;*/
1761 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1762 /* -moz-border-start: none;
1766 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1767 /* border-top-left-radius: 0;
1768 border-bottom-left-radius: 0; */
1771 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1772 /* border-top-right-radius: 0;
1773 border-bottom-right-radius: 0; */
1776 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1777 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1778 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1781 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1782 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1783 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1784 transform: scaleX(-1);
1787 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1788 -moz-box-direction: reverse;
1791 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1792 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1797 -moz-box-orient: horizontal;
1798 -moz-box-align: stretch;
1801 .urlbar-textbox-container {
1802 -moz-box-align: stretch;
1806 -moz-margin-start: 0;
1810 -moz-box-align: center;
1815 /* 16x16 icon with border-box sizing */
1820 .search-go-container {
1824 .search-go-container > .search-go-button {
1828 #urlbar-search-footer {
1829 border-top: 1px solid #A09090;
1832 #urlbar-search-settings {
1835 #urlbar-search-settings:hover {
1838 #urlbar-search-settings:hover:active {
1841 #urlbar-search-splitter {
1843 -moz-margin-start: -3px;
1845 background: transparent;
1848 #urlbar-search-splitter + #urlbar-container > #urlbar,
1849 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1850 -moz-margin-start: 0;
1853 #urlbar-display-box {
1857 -moz-border-end: 1px solid #9C9CFF;
1858 -moz-margin-end: 3px;
1861 -moz-margin-start: 0;
1865 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1867 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1868 border-bottom: 1px solid #A09090;
1869 background-color: #000000;
1871 -moz-padding-start: 44px;
1872 -moz-padding-end: 6px;
1873 background-image: url("chrome://browser/skin/info.svg");
1874 background-clip: padding-box;
1875 background-position: 20px center;
1876 background-repeat: no-repeat;
1877 background-size: 16px 16px;
1880 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1881 background-position: right 20px center;
1884 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1889 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1890 -moz-margin-start: 0;
1893 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1894 -moz-appearance: none;
1899 -moz-margin-start: 10px;
1902 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1905 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1908 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1911 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1914 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1917 min-width: calc(54px + 11ch);
1922 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1923 background-color: var(--identity-box-verified-background-color);
1926 #identity-box:-moz-focusring {
1927 outline: 1px dotted #008484;
1928 outline-offset: -1px;
1931 #identity-box.verifiedDomain:-moz-focusring,
1932 #identity-box.verifiedIdentity:-moz-focusring {
1933 outline-color: #000000;
1936 /* Location bar dropmarker */
1938 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1939 background-color: transparent;
1942 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1943 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1944 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1947 transition: opacity 0.15s ease;
1950 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1954 #navigator-toolbox:not(:hover) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1958 .urlbar-history-dropmarker:hover {
1961 .urlbar-history-dropmarker:hover:active,
1962 .urlbar-history-dropmarker[open="true"] {
1965 /* page proxy icon */
1967 /* === BEGIN identity-block.inc.css === */
1970 /* --identity-box-hover-background-color: #FFCF00;
1971 --identity-box-selected-background-color: #FF9F00; */
1972 --identity-box-verified-color: #008484;
1973 /* Default theme does different color per channel, we can't as they do it build-time. */
1974 --identity-box-chrome-color: #9C9CFF;
1976 border-inline-end: 1px solid var(--urlbar-separator-color);
1980 margin-inline-end: 4px;
1982 /* The latter two properties have a transition to handle the delayed hiding of
1983 the forward button when hovered. */
1984 transition: background-color 150ms ease, padding-left, padding-right;
1987 #identity-box:-moz-locale-dir(ltr) {
1988 border-top-right-radius: 0;
1989 border-bottom-right-radius: 0;
1992 #identity-box:-moz-locale-dir(rtl) {
1993 border-top-left-radius: 0;
1994 border-bottom-left-radius: 0;
1997 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1998 color: var(--identity-box-chrome-color);
1999 -moz-border-end: 1px solid var(--identity-box-chrome-color);
2002 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
2003 color: var(--identity-box-verified-color);
2004 -moz-border-end: 1px solid var(--identity-box-verified-color);
2007 #notification-popup-box:not([hidden]) + #identity-box {
2008 padding-inline-start: 10px;
2012 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2013 /* border-radius: 0;
2014 padding-inline-start: 2px; */
2015 padding-inline-end: 2px;
2016 margin-inline-end: 1px;
2019 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2020 #notification-popup-box[hidden] + #identity-box {
2021 padding-inline-start: 2px;
2024 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2025 #notification-popup-box[hidden] + #identity-box {
2026 /* Forward button hiding is delayed when hovered, so we should use the same
2027 delay for the identity box. We handle both horizontal paddings (for LTR and
2028 RTL), the latter two delays here are for padding-left and padding-right. */
2029 transition-delay: 0s, 100s, 100s;
2032 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2033 #notification-popup-box[hidden] + #identity-box {
2034 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2035 padding-inline-start: 2.01px;
2038 /* MAIN IDENTITY ICON */
2043 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2046 #identity-box:hover > #identity-icon,
2047 #identity-box[open=true] > #identity-icon {
2048 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2051 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2052 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2055 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2059 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2060 -moz-image-region: inherit;
2061 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2067 /* TRACKING PROTECTION ICON */
2069 #tracking-protection-icon {
2072 margin-inline-start: 2px;
2073 margin-inline-end: 0;
2074 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2078 #tracking-protection-icon[state="loaded-tracking-content"] {
2079 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2082 #tracking-protection-icon[animate] {
2083 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2086 #tracking-protection-icon:not([state]) {
2087 margin-inline-end: -18px;
2088 pointer-events: none;
2090 /* Only animate the shield in, when it disappears hide it immediately. */
2094 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2095 visibility: collapse;
2098 /* CONNECTION ICON */
2103 margin-inline-start: 2px;
2104 visibility: collapse;
2107 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2108 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2109 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2110 visibility: visible;
2113 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2114 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2115 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2116 visibility: visible;
2119 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2120 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2121 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2122 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2123 visibility: visible;
2126 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2127 list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2128 visibility: visible;
2131 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2132 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2133 visibility: visible;
2136 /* === END identity-block.inc.css === */
2138 #page-proxy-favicon {
2139 -moz-image-region: rect(0, 16px, 16px, 0);
2142 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2143 /* -moz-margin-end: 1px;*/
2146 #identity-box:hover > #page-proxy-favicon {
2147 -moz-image-region: rect(0, 32px, 16px, 16px);
2150 #identity-box:hover:active > #page-proxy-favicon,
2151 #identity-box[open=true] > #page-proxy-favicon {
2152 -moz-image-region: rect(0, 48px, 16px, 32px);
2155 #identity-box:hover {
2156 background-color: #FFCF00;
2160 #identity-box:hover:active,
2161 #identity-box[open=true] {
2162 background-color: #FF9F00;
2166 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2167 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2168 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2169 background-color: #9C9CFF;
2173 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2174 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2175 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2176 background-color: #008484;
2182 #treecolAutoCompleteImage {
2186 .ac-result-type-bookmark,
2187 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2188 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2189 -moz-image-region: rect(0px 16px 16px 0px);
2194 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2195 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2196 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2199 .ac-result-type-keyword,
2200 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage),
2201 richlistitem[type~="action"][actiontype="searchengine"] > .ac-title-box > .ac-site-icon {
2202 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2207 .ac-result-type-keyword[selected="true"],
2208 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected),
2209 richlistitem[type~="action"][actiontype="searchengine"][selected="true"] > .ac-title-box > .ac-site-icon {
2210 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2213 .ac-result-type-tag,
2214 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2215 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2221 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description,
2222 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
2226 .ac-extra > .ac-comment,
2237 richlistitem[type~="action"][actiontype="tab"] > .ac-url-box > .ac-action-icon {
2238 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2239 -moz-image-region: rect(0, 16px, 16px, 0);
2245 @media (min-resolution: 1.1dppx) {
2246 richlistitem[type~="action"][actiontype="tab"] > .ac-url-box > .ac-action-icon {
2247 list-style-image: url("chrome://browser/skin/actionicon-tab@2x.png");
2248 -moz-image-region: rect(0, 32px, 32px, 0);
2252 richlistitem[type~="action"][actiontype="tab"][selected="true"] > .ac-url-box > .ac-action-icon {
2253 -moz-image-region: rect(16px, 16px, 32px, 0);
2256 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2260 .ac-comment[selected="true"],
2261 .ac-url-text[selected="true"],
2262 .ac-action-text[selected="true"] {
2263 color: inherit !important;
2266 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2267 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2273 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2274 border-top: 1px solid #9C9CFF;
2277 /* combined go/reload/stop button in location bar */
2280 #urlbar-reload-button,
2281 #urlbar-stop-button {
2283 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2284 /* padding: 0 9px;*/
2285 margin-inline-start: 0px;
2286 border-inline-start: 1px solid var(--urlbar-separator-color);
2287 border-image: linear-gradient(transparent 15%,
2288 var(--urlbar-separator-color) 15%,
2289 var(--urlbar-separator-color) 85%,
2291 border-image-slice: 1;
2294 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2295 border-top-left-radius: 0px;
2296 border-bottom-left-radius: 0px;
2299 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2300 border-top-right-radius: 0px;
2301 border-bottom-right-radius: 0px;
2304 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2305 #urlbar-reload-button:not(:hover) {
2306 -moz-border-start-style: none;
2307 -moz-padding-start: 3px;
2310 #urlbar-reload-button {
2311 -moz-image-region: rect(0px, 14px, 14px, 0px);
2314 #urlbar-reload-button[disabled=true] {
2315 -moz-image-region: rect(28px, 14px, 42px, 0px);
2318 #urlbar-reload-button:not([disabled=true]):hover {
2319 -moz-image-region: rect(14px, 14px, 28px, 0px);
2322 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2323 transform: scaleX(-1);
2327 -moz-image-region: rect(0, 42px, 14px, 28px);
2330 #urlbar-go-button:hover {
2331 -moz-image-region: rect(14px, 42px, 28px, 28px);
2334 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2335 transform: scaleX(-1);
2338 #urlbar-stop-button {
2339 -moz-image-region: rect(0px, 28px, 14px, 14px);
2342 #urlbar-stop-button:hover {
2343 -moz-image-region: rect(14px, 28px, 28px, 14px);
2346 @media (min-resolution: 1.1dppx) {
2348 #urlbar-reload-button,
2349 #urlbar-stop-button {
2350 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2353 #urlbar-go-button > .toolbarbutton-icon,
2354 #urlbar-reload-button > .toolbarbutton-icon,
2355 #urlbar-stop-button > .toolbarbutton-icon {
2360 -moz-image-region: rect(0, 84px, 28px, 56px);
2363 #urlbar-go-button:hover {
2364 -moz-image-region: rect(28px, 84px, 56px, 56px);
2367 #urlbar-go-button:hover:active {
2368 -moz-image-region: rect(56px, 84px, 84px, 56px);
2371 #urlbar-reload-button {
2372 -moz-image-region: rect(0, 28px, 28px, 0);
2375 #urlbar-reload-button:not([disabled]):hover {
2376 -moz-image-region: rect(28px, 28px, 56px, 0);
2379 #urlbar-reload-button:not([disabled]):hover:active {
2380 -moz-image-region: rect(56px, 28px, 84px, 0);
2383 #urlbar-stop-button {
2384 -moz-image-region: rect(0, 56px, 28px, 28px);
2387 #urlbar-stop-button:not([disabled]):hover {
2388 -moz-image-region: rect(28px, 56px, 56px, 28px);
2391 #urlbar-stop-button:hover:active {
2392 -moz-image-region: rect(56px, 56px, 84px, 28px);
2396 /* popup blocker button */
2398 #page-report-button {
2399 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2400 -moz-image-region: rect(0, 16px, 16px, 0);
2403 #page-report-button:hover ,
2404 #page-report-button:hover:active,
2405 #page-report-button[open="true"] {
2406 -moz-image-region: rect(0, 32px, 16px, 16px);
2409 /* Reader mode button */
2411 #reader-mode-button {
2412 list-style-image: url("chrome://browser/skin/readerMode.svg");
2413 -moz-image-region: rect(0, 16px, 16px, 0);
2416 #reader-mode-button:hover,
2417 #reader-mode-button[readeractive]:hover {
2418 -moz-image-region: rect(0, 32px, 16px, 16px);
2421 #reader-mode-button:hover:active,
2422 #reader-mode-button[readeractive] {
2423 -moz-image-region: rect(0, 48px, 16px, 32px);
2426 /* social share panel */
2428 .social-share-frame {
2435 background-color: white;
2436 background-repeat: no-repeat;
2437 background-position: center center;
2439 #share-container[loading] {
2440 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2442 #share-container > browser {
2443 transition: opacity 150ms ease-in-out;
2446 #share-container[loading] > browser {
2450 .social-share-toolbar {
2451 border-bottom: 1px solid #9C9CFF;
2455 #social-share-provider-buttons {
2460 .share-provider-button {
2465 .share-provider-button > .toolbarbutton-text {
2468 .share-provider-button > .toolbarbutton-icon {
2474 /* fixup corners for share panel */
2475 .social-panel > .social-panel-frame {
2476 border-radius: inherit;
2479 #social-share-panel {
2485 .social-share-frame {
2486 border-top-left-radius: 0;
2487 border-bottom-left-radius: inherit;
2488 border-top-right-radius: 0;
2489 border-bottom-right-radius: inherit;
2492 #social-share-panel > .social-share-toolbar {
2493 border-top-left-radius: inherit;
2494 border-top-right-radius: inherit;
2497 #social-share-provider-buttons {
2498 border-top-left-radius: inherit;
2499 border-top-right-radius: inherit;
2502 /* social recommending panel */
2504 #social-mark-button {
2505 -moz-image-region: rect(0, 16px, 16px, 0);
2508 /* bookmarks menu-button */
2510 #bookmarks-menu-button.bookmark-item {
2511 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2512 -moz-image-region: rect(0px 16px 16px 0px);
2515 #bookmarks-menu-button.bookmark-item[starred] {
2516 -moz-image-region: rect(0px 32px 16px 16px);
2519 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2521 padding-bottom: 2px;
2524 #BMB_bookmarksPopup[side="top"],
2525 #BMB_bookmarksPopup[side="bottom"] {
2527 margin-right: -20px;
2530 #BMB_bookmarksPopup[side="left"],
2531 #BMB_bookmarksPopup[side="right"] {
2533 margin-bottom: -20px;
2536 /* bookmarking panel */
2538 #editBookmarkPanelStarIcon {
2539 list-style-image: url("chrome://browser/skin/places/starred48.png");
2544 #editBookmarkPanelStarIcon[unstarred] {
2545 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2548 #editBookmarkPanelTitle {
2552 #editBookmarkPanelHeader,
2553 #editBookmarkPanelContent {
2554 margin-bottom: .5em;
2557 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2558 #editBMPanel_folderTree {
2565 border-top: 1px solid #9C9CFF;
2566 border-bottom-left-radius: 5px;
2567 border-bottom-right-radius: 5px;
2571 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2572 -moz-margin-end: 10px;
2573 vertical-align: middle;
2576 .panel-promo-closebutton {
2577 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2578 -moz-margin-end: -3px;
2582 .panel-promo-closebutton:hover {
2583 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2586 .panel-promo-closebutton:hover:active {
2587 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2590 .panel-promo-closebutton > .toolbarbutton-text {
2594 /* ::::: content area ::::: */
2597 background-color: #9C9CFF;
2602 background-color: #000000;
2606 -moz-margin-start: 0;
2615 -moz-padding-start: 0px;
2618 #sidebar-header > .close-icon {
2619 /* padding: 4px 2px;
2622 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2625 #sidebar-header > .close-icon:hover,
2626 #sidebar-header > .close-icon:hover:active {
2627 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2630 #sidebar-splitter:-moz-locale-dir(ltr),
2631 #sidebar:-moz-locale-dir(ltr) {
2632 border-radius: 0 5px 0 0;
2635 #sidebar-splitter:-moz-locale-dir(rtl),
2636 #sidebar:-moz-locale-dir(rtl) {
2637 border-radius: 5px 0 0 0;
2640 .browserContainer > findbar {
2642 background-color: -moz-dialog;
2643 color: -moz-DialogText;
2652 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2655 #TabsToolbar .toolbar-holder {
2656 background-color: #000000; /* correct effect of being an actual toolbar */
2659 #main-window[disablechrome] #TabsToolbar,
2660 #TabsToolbar[tabsontop="false"] {
2661 border-bottom: 1px solid #008484;
2664 /* === BEGIN tabs.inc.css === */
2667 /* --tab-toolbar-navbar-overlap: 1px; */
2668 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2669 /* --tab-min-height: 31px; */
2672 /* --tab-stroke-background-size: auto 100%; */
2676 .tabs-newtab-button,
2677 #TabsToolbar > #new-tab-button {
2682 padding: 1px 4px 2px;
2685 .tabbrowser-tab:first-of-type {
2686 -moz-margin-start: 2px;
2689 .tabs-newtab-button,
2690 #TabsToolbar > #new-tab-button,
2691 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2692 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2693 border-radius: 8px 8px 0px 0px;
2694 -moz-margin-start: 0;
2697 .tabs-newtab-button:not(:hover),
2698 #TabsToolbar > #new-tab-button:not(:hover),
2699 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2700 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2701 background-color: #C09070;
2704 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2705 .tabbrowser-tab[visuallyselected=true] {
2706 /* position: relative;
2710 .tab-background-middle {
2716 .tab-content[pinned] {
2729 -moz-margin-end: 3px;
2733 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2740 -moz-margin-start: -15px;
2741 margin-inline-end: -1px;
2745 .tab-icon-overlay[crashed] {
2746 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2749 .tab-icon-overlay[soundplaying],
2750 .tab-icon-overlay[muted]:not([crashed]) {
2751 border-radius: 10px;
2754 .tab-icon-overlay[soundplaying]:hover,
2755 .tab-icon-overlay[muted]:hover {
2756 background-color: #FFCF00;
2759 .tab-icon-overlay[soundplaying] {
2761 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2764 .tab-icon-overlay[muted]:not([crashed]) {
2765 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2768 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2769 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2773 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2774 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2777 .tab-throbber[busy] {
2778 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2781 .tab-throbber[progress] {
2782 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2785 @media (min-resolution: 1.1dppx) {
2786 .tab-throbber[busy] {
2787 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2790 .tab-throbber[progress] {
2791 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2795 .tab-throbber[pinned],
2796 .tab-icon-image[pinned] {
2797 -moz-margin-start: 2px;
2798 -moz-margin-end: 2px;
2802 /* this needs to add up to the 16px of the icon image */
2804 margin-top: 2px !important;
2805 margin-bottom: 2px !important;
2809 -moz-margin-start: 4px;
2815 .tab-icon-sound[muted] {
2816 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2819 .tab-icon-sound[muted]:hover {
2820 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2823 .tab-icon-sound[muted]:hover:active {
2824 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2827 .tab-icon-sound[soundplaying] {
2828 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
2831 .tab-icon-sound[soundplaying]:hover {
2832 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
2835 .tab-icon-sound[soundplaying]:hover:active {
2836 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
2839 .tab-icon-sound[muted] {
2840 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
2843 .tab-icon-sound[muted]:hover {
2844 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
2847 .tab-icon-sound[muted]:hover:active {
2848 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
2851 .tab-icon-sound[visuallyselected=true][soundplaying] {
2852 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
2855 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
2856 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
2859 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
2860 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2863 .tab-icon-sound[visuallyselected=true][muted] {
2864 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2867 .tab-icon-sound[visuallyselected=true][muted]:hover {
2868 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2871 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
2872 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2875 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
2876 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
2879 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
2880 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
2883 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
2884 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
2887 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
2888 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
2891 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
2892 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
2895 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
2896 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
2905 .tabs-newtab-button {
2906 /* overlap the tab curves */
2909 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2913 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2914 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2917 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2918 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2921 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
2924 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2927 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
2928 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
2931 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
2932 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
2935 .tab-background-start[visuallyselected=true]::after,
2936 .tab-background-start[visuallyselected=true]::before,
2937 .tab-background-start,
2938 .tab-background-end,
2939 .tab-background-end[visuallyselected=true]::after,
2940 .tab-background-end[visuallyselected=true]::before {
2943 .tabbrowser-tab:not([visuallyselected=true]),
2944 .tabbrowser-tab:-moz-lwtheme {
2947 /* tabbrowser-tab focus ring */
2948 .tabbrowser-tab:focus {
2949 outline: 1px dotted;
2954 .tabbrowser-tab[visuallyselected="true"] {
2957 /* End selected tab */
2959 /* User Context UI - change tab decoration depending on userContextId.
2960 Defaults to gray for unknown usercontextids. */
2961 .tabbrowser-tab[usercontextid] {
2962 background-image: linear-gradient(to right, transparent 20%, #A09090 30%, #A09090 70%, transparent 80%);
2963 background-size: auto 2px;
2964 background-repeat: no-repeat;
2967 /* Personal User Context */
2968 .tabbrowser-tab[usercontextid="1"] {
2969 background-image: linear-gradient(to right, transparent 20%, #9C9CFF 30%, #9C9CFF 70%, transparent 80%);
2971 /* Work User Context */
2972 .tabbrowser-tab[usercontextid="2"] {
2973 background-image: linear-gradient(to right, transparent 20%, #FF9F00 30%, #FF9F00 70%, transparent 80%);
2975 /* Banking User Context */
2976 .tabbrowser-tab[usercontextid="3"] {
2977 background-image: linear-gradient(to right, transparent 20%, #008484 30%, #008484 70%, transparent 80%);
2979 /* Shopping User Context */
2980 .tabbrowser-tab[usercontextid="4"] {
2981 background-image: linear-gradient(to right, transparent 20%, #E7ADE7 30%, #E7ADE7 70%, transparent 80%);
2984 /* Tab pointer-events */
2987 pointer-events: none;
2990 .tab-background-middle,
2991 .tabs-newtab-button,
2992 .tab-icon-overlay[soundplaying],
2993 .tab-icon-overlay[muted]:not([crashed]),
2996 pointer-events: auto;
3002 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3003 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3005 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3006 background-color: #E7ADE7;
3009 .tab-label[attention]:not([visuallyselected="true"]) {
3013 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3014 background-color: #3333FF;
3018 /* Tab separators */
3020 .tabbrowser-tab::after,
3021 .tabbrowser-tab::before {
3023 -moz-margin-start: -1px;
3024 background-image: linear-gradient(transparent 5px,
3026 currentColor calc(100% - 4px),
3027 transparent calc(100% - 4px));
3031 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3032 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3036 /* Also show separators beside the selected tab when dragging it. */
3038 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3039 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3040 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3045 /* New tab button */
3047 .tabs-newtab-button {
3049 /* width: calc(36px + var(--tab-curve-width)); */
3052 /* === END tabs.inc.css === */
3056 * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3057 * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3058 * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3060 #main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3061 /* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3064 /* Tab DnD indicator */
3065 .tab-drop-indicator {
3066 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3067 margin-bottom: -11px;
3070 /* Tab close button */
3072 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3075 .tab-close-button:hover,
3076 .tab-close-button:hover[selected="true"] {
3077 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3080 .tab-close-button:hover:active,
3081 .tab-close-button:hover:active[selected="true"] {
3082 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3085 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3087 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3088 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3092 background-origin: border-box;
3095 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3096 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3097 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3098 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3101 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3102 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3105 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3106 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3107 /* transform: scaleX(-1);*/
3110 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3111 transition: 1s background-color ease-out;
3114 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3115 background-color: #008484;
3118 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3119 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3120 /* border-width: 0 2px 0 0;
3121 border-style: solid;
3122 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3125 .tabs-newtab-button > .toolbarbutton-icon {
3127 margin-bottom: -1px;
3130 .tabs-newtab-button,
3131 #TabsToolbar > #new-tab-button,
3132 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3133 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3134 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3135 -moz-image-region: auto;
3138 .tabs-newtab-button,
3139 .tabs-newtab-button:hover,
3140 #TabsToolbar > #new-tab-button,
3141 #TabsToolbar > #new-tab-button:hover {
3144 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3145 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3146 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3147 .tabs-newtab-button:-moz-lwtheme-brighttext,
3148 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3149 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3152 #TabsToolbar > #new-tab-button {
3157 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3160 #alltabs-button:hover,
3161 #alltabs-button:hover:active,
3162 #alltabs-button[open="true"] {
3163 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3166 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3167 #alltabs-button:-moz-lwtheme-brighttext {
3170 #alltabs-button > .toolbarbutton-icon {
3174 #alltabs-button > .toolbarbutton-menu-dropmarker {
3178 /* All tabs menupopup */
3179 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3180 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3181 -moz-image-region: auto;
3184 .alltabs-item[selected="true"] {
3188 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3189 list-style-image: url("chrome://global/skin/icons/loading.gif");
3192 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3193 background-color: #402800;
3196 .alltabs-endimage[muted] {
3197 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3200 .alltabs-endimage[soundplaying] {
3201 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3204 toolbarbutton.chevron {
3205 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3208 toolbarbutton.chevron:hover {
3209 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3212 toolbar[brighttext] toolbarbutton.chevron {
3213 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3216 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3217 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3218 transform: scaleX(-1);
3221 toolbarbutton.chevron > .toolbarbutton-text,
3222 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3226 toolbarbutton.chevron > .toolbarbutton-icon {
3230 #sidebar-throbber[loading="true"] {
3231 list-style-image: url("chrome://global/skin/icons/loading.gif");
3232 -moz-margin-end: 4px;
3235 /* Bookmarks toolbar */
3236 #PlacesToolbarDropIndicator {
3237 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3240 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3241 background-color: #008484 !important;
3242 color: #FFCF00 !important;
3245 /* rules for menupopup drop indicators */
3246 .menupopup-drop-indicator-bar {
3248 /* these two margins must together compensate the indicator's height */
3250 margin-bottom: -1px;
3253 .menupopup-drop-indicator {
3254 list-style-image: none;
3256 -moz-margin-end: -4em;
3257 background-color: #008484;
3260 /* === BEGIN notification-icons.inc.css === */
3262 .popup-notification-icon {
3265 -moz-margin-end: 10px;
3268 .popup-notification-icon[popupid="geolocation"] {
3269 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3272 .popup-notification-icon[popupid="xpinstall-disabled"],
3273 .popup-notification-icon[popupid="addon-install-blocked"],
3274 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3275 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3278 .popup-notification-icon[popupid="addon-progress"] {
3279 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3282 .popup-notification-icon[popupid="addon-install-failed"] {
3283 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3286 .popup-notification-icon[popupid="addon-install-confirmation"] {
3287 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3290 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3291 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3294 .popup-notification-icon[popupid="addon-install-complete"] {
3295 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3298 .popup-notification-icon[popupid="addon-install-restart"] {
3299 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3302 .popup-notification-icon[popupid="click-to-play-plugins"] {
3303 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3306 .popup-notification-icon[popupid="web-notifications"] {
3307 list-style-image: url("chrome://browser/skin/web-notifications-icon.svg");
3310 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3311 .popup-notification-icon[popupid*="offline-app-requested"],
3312 .popup-notification-icon[popupid="offline-app-usage"] {
3313 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3316 .popup-notification-icon[popupid="password"] {
3317 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3320 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3321 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3322 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3325 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3326 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3327 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3330 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3331 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3332 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3335 .popup-notification-icon[popupid="pointerLock"] {
3336 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3339 /* Notification icon box */
3340 #notification-popup .panel-promo-box {
3341 /* margin: 10px -10px -10px; */
3344 #notification-popup-box {
3346 background-color: #000000;
3347 background-clip: padding-box;
3350 border-radius: 3px 0 0 3px;
3351 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3352 -moz-margin-end: -8px;
3353 border-right-width: 8px;
3356 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3357 /* padding-left: 7px; */
3360 /* This changes the direction of the main notification box on the url bar. */
3361 #notification-popup-box:-moz-locale-dir(rtl),
3362 /* This adds a second flip for the notification anchors, as they don't switch direction
3364 .notification-anchor-icon:-moz-locale-dir(rtl) {
3365 transform: scaleX(-1);
3368 /* For the anchor icons in the chat window, we don't have the notification popup box,
3369 so we need to cancel the RTL transform. */
3370 .notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) {
3374 .notification-anchor-icon {
3375 list-style-image: url("chrome://global/skin/icons/information-16.png");
3382 .notification-anchor-icon:-moz-focusring {
3383 outline: 1px dotted #008484;
3386 .geo-notification-icon,
3387 #geo-notification-icon {
3388 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3391 #addons-notification-icon {
3392 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3395 #addons-notification-icon:hover {
3396 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3399 #addons-notification-icon:hover:active {
3400 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
3403 .indexedDB-notification-icon,
3404 #indexedDB-notification-icon {
3405 list-style-image: url("chrome://global/skin/icons/question-16.png");
3408 #password-notification-icon {
3409 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3412 #login-fill-notification-icon {
3413 /* Temporary icon until the capture and fill doorhangers are unified. */
3414 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3415 transform: scaleX(-1);
3418 #plugins-notification-icon {
3419 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3422 #plugins-notification-icon.plugin-hidden {
3423 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3426 #plugins-notification-icon.plugin-blocked {
3427 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3430 #plugins-notification-icon {
3431 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
3434 #plugins-notification-icon:hover {
3435 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
3438 #notification-popup-box[hidden] {
3439 /* Override display:none to make the pluginBlockedNotification animation work
3440 when showing the notification repeatedly. */
3442 visibility: collapse;
3445 #plugins-notification-icon.plugin-blocked[showing] {
3446 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3449 @keyframes pluginBlockedNotification {
3458 .webRTC-shareDevices-notification-icon,
3459 #webRTC-shareDevices-notification-icon {
3460 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3463 .webRTC-sharingDevices-notification-icon,
3464 #webRTC-sharingDevices-notification-icon {
3465 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3468 .webRTC-shareMicrophone-notification-icon,
3469 #webRTC-shareMicrophone-notification-icon {
3470 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3473 .webRTC-sharingMicrophone-notification-icon,
3474 #webRTC-sharingMicrophone-notification-icon {
3475 list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3478 .webRTC-shareScreen-notification-icon,
3479 #webRTC-shareScreen-notification-icon {
3480 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3483 .webRTC-sharingScreen-notification-icon,
3484 #webRTC-sharingScreen-notification-icon {
3485 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3488 .web-notifications-notification-icon,
3489 #web-notifications-notification-icon {
3490 list-style-image: url("chrome://browser/skin/web-notifications-tray.svg");
3491 -moz-image-region: rect(0, 16px, 16px, 0);
3494 .web-notifications-notification-icon:hover,
3495 #web-notifications-notification-icon:hover {
3496 -moz-image-region: rect(0, 32px, 16px, 16px);
3499 .web-notifications-notification-icon:hover:active,
3500 #web-notifications-notification-icon:hover:active {
3501 -moz-image-region: rect(0, 48px, 16px, 32px);
3504 #pointerLock-notification-icon {
3505 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3508 .translate-notification-icon,
3509 #translate-notification-icon {
3510 list-style-image: url("chrome://browser/skin/translation-16.png");
3511 -moz-image-region: rect(0px, 16px, 16px, 0px);
3514 .translated-notification-icon,
3515 #translated-notification-icon {
3516 list-style-image: url("chrome://browser/skin/translation-16.png");
3517 -moz-image-region: rect(0px, 32px, 16px, 16px);
3520 .popup-notification-icon[popupid="servicesInstall"] {
3521 list-style-image: url("chrome://browser/skin/social/services-64.png");
3523 #servicesInstall-notification-icon {
3524 list-style-image: url("chrome://browser/skin/social/services-16.png");
3527 /* EME notifications */
3529 .popup-notification-icon[popupid="drmContentPlaying"],
3530 #eme-notification-icon {
3531 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3534 #eme-notification-icon:hover:active {
3535 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3538 #eme-notification-icon[firstplay=true] {
3539 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3542 @keyframes emeTeachingMoment {
3543 0% {transform: translateX(0); }
3544 25% {transform: translateX(3px) }
3545 75% {transform: translateX(-3px) }
3546 100% { transform: translateX(0); }
3549 /* HiDPI notification icons */
3550 @media (min-resolution: 1.1dppx) {
3551 /* #notification-popup-box {
3552 border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3555 .notification-anchor-icon {
3556 list-style-image: url(chrome://global/skin/icons/information-32.png);
3559 .webRTC-shareDevices-notification-icon,
3560 #webRTC-shareDevices-notification-icon {
3561 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3564 .webRTC-sharingDevices-notification-icon,
3565 #webRTC-sharingDevices-notification-icon {
3566 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3569 .webRTC-shareMicrophone-notification-icon,
3570 #webRTC-shareMicrophone-notification-icon {
3571 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3574 .webRTC-sharingMicrophone-notification-icon,
3575 #webRTC-sharingMicrophone-notification-icon {
3576 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3579 .webRTC-shareScreen-notification-icon,
3580 #webRTC-shareScreen-notification-icon {
3581 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3584 .webRTC-sharingScreen-notification-icon,
3585 #webRTC-sharingScreen-notification-icon {
3586 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3589 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3590 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3591 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3594 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3595 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3596 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3599 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3600 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3601 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3605 /* === END notification-icons.inc.css === */
3607 .popup-notification-body[popupid="addon-progress"],
3608 .popup-notification-body[popupid="addon-install-confirmation"] {
3613 /* Translation infobar */
3615 /* === BEGIN infobar.inc.css === */
3617 notification[value="translation"] .messageImage {
3618 list-style-image: url("chrome://browser/skin/translation-16.png");
3619 -moz-image-region: rect(0, 32px, 16px, 16px);
3622 @media (min-resolution: 1.25dppx) {
3623 notification[value="translation"] .messageImage {
3624 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3625 -moz-image-region: rect(0, 64px, 32px, 32px);
3629 notification[value="translation"][state="translating"] .messageImage {
3630 list-style-image: url("chrome://browser/skin/translating-16.png");
3631 -moz-image-region: auto;
3634 @media (min-resolution: 1.25dppx) {
3635 notification[value="translation"][state="translating"] .messageImage {
3636 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3640 notification[value="translation"] hbox[anonid="details"] {
3644 notification[value="translation"] button,
3645 notification[value="translation"] menulist {
3649 notification[value="translation"] menulist > .menulist-dropmarker {
3652 .translation-menupopup arrowscrollbox {
3656 .translation-attribution {
3658 -moz-box-align: end;
3662 .translation-attribution > label {
3666 .translation-attribution > image {
3670 .translation-welcome-panel {
3674 .translation-welcome-logo {
3677 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3678 -moz-image-region: rect(0, 64px, 32px, 32px);
3681 .translation-welcome-content {
3682 -moz-margin-start: 16px;
3685 .translation-welcome-headline {
3690 .translation-welcome-body {
3695 /* === END infobar.inc.css === */
3697 notification[value="translation"] {
3701 .translation-menupopup {
3702 -moz-appearance: none;
3705 /* Bookmarks roots menu-items */
3706 #subscribeToPageMenuitem:not([disabled]),
3707 #subscribeToPageMenupopup {
3708 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3711 #bookmarksToolbarFolderMenu,
3712 #BMB_bookmarksToolbar,
3713 #panelMenu_bookmarksToolbar {
3714 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3715 -moz-image-region: auto;
3718 #BMB_unsortedBookmarks,
3719 #panelMenu_unsortedBookmarks {
3720 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3721 -moz-image-region: auto;
3724 /* ::::: Keyboard UI Panel ::::: */
3729 border-radius: 20px;
3732 .KUI-panel[level="top"] {
3733 /*background-color: rgba(27%,27%,27%,.65);*/
3739 padding: 20px 10px 10px;
3743 .ctrlTab-favicon[src] {
3744 background-color: #000000;
3750 .ctrlTab-preview-inner > .tabPreview-canvas {
3753 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3757 .ctrlTab-preview-inner {
3758 padding-bottom: 10px;
3761 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3763 background-color: #000000;
3764 border-radius: .5em;
3767 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3769 background-color: #000000;
3772 border: 2px solid #9C9CFF;
3773 border-radius: .5em;
3776 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3777 margin: -10px -10px 0;
3789 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3797 .sync-panel-button-box {
3801 #sync-start-panel-title {
3807 #sync-start-panel-subtitle {
3813 .statuspanel-label {
3816 background: #404000;
3817 border: 1px none #9C9CFF;
3818 border-top-style: solid;
3823 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3824 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3825 border-right-style: solid;
3826 border-top-right-radius: .3em;
3830 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3831 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3832 border-left-style: solid;
3833 border-top-left-radius: .3em;
3837 /* HACK to abolish devily color on main content */
3840 background-color: transparent !important;
3843 /* === BEGIN fullscreen/warning.inc.css === */
3845 html|*#fullscreen-warning {
3846 align-items: center;
3847 background: rgba(0, 0, 0, 0.9);
3848 border: 2px solid #A09090;
3849 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3852 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3855 html|*#fullscreen-warning::before {
3857 width: 24px; height: 24px;
3860 html|*#fullscreen-warning.verifiedIdentity::before,
3861 html|*#fullscreen-warning.verifiedDomain::before {
3862 content: url("chrome://browser/skin/fullscreen/secure.svg");
3865 html|*#fullscreen-warning.unknownIdentity::before {
3866 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3869 html|*#fullscreen-domain-text,
3870 html|*#fullscreen-generic-text {
3872 font-weight: lighter;
3877 html|*#fullscreen-domain {
3882 html|*#fullscreen-exit-button {
3884 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3886 font-weight: lighter;
3888 box-sizing: content-box;
3890 border-radius: 300px;
3892 background-color: #C09070;
3896 /* === END fullscreen/warning.inc.css === */
3898 /* === BEGIN commandline.inc.css === */
3900 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3901 We are copy/pasting variables from light-theme and dark-theme,
3902 since they aren't loaded in this context (within browser.css). */
3903 :root #developer-toolbar {
3904 --gcli-background-color: #000000; /* --theme-toolbar-background */
3905 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3906 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3907 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3908 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3909 --selection-background: #008484; /* --theme-selection-background */
3910 --selection-color: #000000; /* --theme-selection-color */
3913 /* Developer toolbar */
3915 #developer-toolbar {
3916 border-top: 3px solid var(--gcli-background-color);
3917 border-bottom: none;
3920 #developer-toolbar .toolbar-holder {
3921 background-color: #8050B0;
3925 #developer-toolbar .toolbar-holder {
3926 background-color: #8050B0;
3930 #developer-toolbar .toolbar-startcap,
3931 #developer-toolbar .toolbar-endcap{
3932 background-color: #6000CF;
3935 #developer-toolbar {
3937 min-height: 32px; */
3940 #developer-toolbar > toolbarbutton {
3946 .developer-toolbar-button > image {
3947 /* margin: auto 10px; */
3950 #developer-toolbar-toolbox-button > label {
3954 .developer-toolbar-button > .toolbarbutton-icon,
3955 #developer-toolbar-closebutton > .toolbarbutton-icon {
3960 #developer-toolbar-toolbox-button {
3961 list-style-image: url("chrome://devtools/skin/toggle-tools.png");
3962 -moz-image-region: rect(0px, 16px, 16px, 0px);
3965 #developer-toolbar-toolbox-button > label {
3969 #developer-toolbar-toolbox-button:hover,
3970 #developer-toolbar-toolbox-button:hover:active,
3971 #developer-toolbar-toolbox-button[checked=true] {
3972 -moz-image-region: rect(0px, 32px, 16px, 16px);
3975 @media (min-resolution: 2dppx) {
3976 #developer-toolbar-toolbox-button {
3977 list-style-image: url("chrome://devtools/skin/toggle-tools@2x.png");
3978 -moz-image-region: rect(0px, 32px, 32px, 0px);
3981 #developer-toolbar-toolbox-button:hover,
3982 #developer-toolbar-toolbox-button:hover:active,
3983 #developer-toolbar-toolbox-button[checked=true] {
3984 -moz-image-region: rect(0px, 64px, 32px, 32px);
3988 #developer-toolbar-closebutton {
3989 list-style-image: url("chrome://devtools/skin/close.png");
3990 -moz-image-region: rect(0px, 16px, 16px, 0px);
3995 #developer-toolbar-closebutton > .toolbarbutton-icon {
3998 #developer-toolbar-closebutton > .toolbarbutton-text {
4002 #developer-toolbar-closebutton:hover,
4003 #developer-toolbar-closebutton:hover:active {
4004 -moz-image-region: rect(0px, 32px, 16px, 16px);
4007 @media (min-resolution: 2dppx) {
4008 #developer-toolbar-closebutton {
4009 list-style-image: url("chrome://devtools/skin/close@2x.png");
4010 -moz-image-region: rect(0px, 32px, 32px, 0px);
4013 #developer-toolbar-closebutton:hover,
4014 #developer-toolbar-closebutton:hover:active {
4015 -moz-image-region: rect(0px, 64px, 32px, 32px);
4021 html|*#gcli-tooltip-frame,
4022 html|*#gcli-output-frame {
4025 background-color: transparent;
4031 background-color: transparent;
4034 .gclitoolbar-input-node,
4035 .gclitoolbar-complete-node {
4037 -moz-box-align: center;
4041 background-color: transparent;
4044 .gclitoolbar-input-node {
4045 /* line-height: 32px;
4046 outline-style: none; */
4047 background-repeat: no-repeat;
4048 background-color: var(--gcli-input-background);
4051 .gclitoolbar-input-node[focused="true"] {
4052 background-color: var(--gcli-input-focused-background);
4055 .gclitoolbar-input-node::before {
4057 display: inline-block;
4058 -moz-box-ordinal-group: 0;
4062 background-image: url("chrome://devtools/skin/commandline-icon.png");
4063 background-position: 0 center;
4064 background-size: 32px 16px;
4067 .gclitoolbar-input-node[focused="true"]::before {
4068 background-position: -16px center;
4071 @media (min-resolution: 2dppx) {
4072 .gclitoolbar-input-node::before {
4073 background-image: url("chrome://devtools/skin/commandline-icon@2x.png");
4077 .gclitoolbar-input-node:not([focused="true"]) {
4078 border-color: transparent;
4081 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4082 background-color: var(--selection-background);
4083 color: var(--selection-color);
4086 .gclitoolbar-complete-node {
4088 background-color: transparent;
4091 pointer-events: none;
4094 .gcli-in-incomplete,
4098 .gcli-in-closebrace,
4105 .gcli-in-incomplete {
4106 border-bottom: 2px dotted #8050B0;
4110 border-bottom: 2px dotted #FF0000;
4121 .gcli-in-closebrace {
4125 /* === END commandline.inc.css === */
4127 /* === BEGIN responsivedesign.inc.css === */
4129 /* Responsive Mode */
4131 .browserContainer[responsivemode] {
4132 background-color: #221500;
4133 padding: 0 20px 20px 20px;
4136 .browserStack[responsivemode] {
4137 box-shadow: 0 0 7px #9C9CFF;
4140 .devtools-responsiveui-toolbar {
4141 background: transparent;
4142 /* text color is textColor from dark theme, since no theme is applied to
4143 * the responsive toolbar.
4149 border-bottom-width: 0;
4152 .devtools-responsiveui-menulist,
4153 .devtools-responsiveui-toolbarbutton {
4154 -moz-box-align: center;
4156 /* min-height: 22px;*/
4157 /* margin: 0 3px; */
4160 .devtools-responsiveui-menulist .menulist-editable-box {
4161 background-color: transparent;
4164 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4169 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4170 /* background: hsla(212,7%,57%,.35);*/
4173 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4178 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4179 -moz-box-orient: horizontal;
4182 .devtools-responsiveui-menulist:-moz-focusring,
4183 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4184 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4185 outline-offset: -4px;*/
4188 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4192 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4193 /* border-color: hsla(210,8%,5%,.6);
4194 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4195 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); */
4198 .devtools-responsiveui-menulist[open=true],
4199 .devtools-responsiveui-toolbarbutton[open=true],
4200 .devtools-responsiveui-toolbarbutton[checked=true] {
4201 /* border-color: hsla(210,8%,5%,.6) !important;
4202 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4203 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); */
4206 .devtools-responsiveui-toolbarbutton[checked=true] {
4207 /* color: hsl(208,100%,60%); */
4210 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4211 /* background-color: transparent !important;*/
4214 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4215 /* background-color: hsla(210,8%,5%,.2) !important;*/
4218 .devtools-responsiveui-menulist > .menulist-label-box {
4222 .devtools-responsiveui-menulist > .menulist-dropmarker {
4223 /* display: -moz-box;
4224 background-color: transparent;
4225 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4226 -moz-box-align: center;
4231 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4234 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
4235 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4238 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4239 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4242 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4243 /* padding: 0 1px;*/
4244 -moz-box-align: stretch;
4247 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4248 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4249 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4250 -moz-box-align: center;
4254 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4255 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4259 .devtools-responsiveui-close {
4260 list-style-image: url("chrome://devtools/skin/close.png");
4261 -moz-image-region: rect(0px,16px,16px,0px);
4264 .devtools-responsiveui-close:hover {
4265 -moz-image-region: rect(0px,32px,16px,16px);
4268 .devtools-responsiveui-rotate {
4269 list-style-image: url("chrome://devtools/skin/responsiveui-rotate.png");
4270 -moz-image-region: rect(0px,16px,16px,0px);
4273 .devtools-responsiveui-rotate:hover {
4274 -moz-image-region: rect(0px,32px,16px,16px);
4277 @media (min-resolution: 2dppx) {
4278 .devtools-responsiveui-close {
4279 list-style-image: url("chrome://devtools/skin/close@2x.png");
4282 .devtools-responsiveui-close:hover {
4283 -moz-image-region: rect(0px,64px,32px,32px);
4286 .devtools-responsiveui-rotate {
4287 list-style-image: url("chrome://devtools/skin/responsiveui-rotate@2x.png");
4290 .devtools-responsiveui-rotate:hover {
4291 -moz-image-region: rect(0px,64px,32px,32px);
4295 .devtools-responsiveui-touch {
4296 list-style-image: url("chrome://devtools/skin/responsiveui-touch.png");
4297 -moz-image-region: rect(0px,16px,16px,0px);
4300 .devtools-responsiveui-touch:hover,
4301 .devtools-responsiveui-touch[checked],
4302 .devtools-responsiveui-touch[checked]:hover {
4303 -moz-image-region: rect(0px,32px,16px,16px);
4306 @media (min-resolution: 2dppx) {
4307 .devtools-responsiveui-touch {
4308 list-style-image: url("chrome://devtools/skin/responsiveui-touch@2x.png");
4309 -moz-image-region: rect(0px,32px,32px,0px);
4312 .devtools-responsiveui-touch:hover,
4313 .devtools-responsiveui-touch[checked],
4314 .devtools-responsiveui-touch[checked]:hover {
4315 -moz-image-region: rect(0px,64px,32px,32px);
4319 .devtools-responsiveui-screenshot {
4320 list-style-image: url("chrome://devtools/skin/responsiveui-screenshot.png");
4321 -moz-image-region: rect(0px,16px,16px,0px);
4324 .devtools-responsiveui-screenshot:hover {
4325 -moz-image-region: rect(0px,32px,16px,16px);
4328 @media (min-resolution: 2dppx) {
4329 .devtools-responsiveui-screenshot {
4330 list-style-image: url("chrome://devtools/skin/responsiveui-screenshot@2x.png");
4333 .devtools-responsiveui-screenshot:hover {
4334 -moz-image-region: rect(0px,64px,32px,32px);
4338 .devtools-responsiveui-resizebarV {
4342 transform: translate(12px, -12px);
4343 background-size: cover;
4344 background-image: url("chrome://devtools/skin/responsive-vertical-resizer.png");
4347 .devtools-responsiveui-resizebarH {
4351 transform: translate(-12px, 12px);
4352 background-size: cover;
4353 background-image: url("chrome://devtools/skin/responsive-horizontal-resizer.png");
4356 .devtools-responsiveui-resizehandle {
4360 transform: translate(12px, 12px);
4361 background-size: cover;
4362 background-image: url("chrome://devtools/skin/responsive-se-resizer.png");
4365 /* FxOS custom mode with additional buttons and phone look'n feel */
4367 /* Hide devtools manual resizer */
4368 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4369 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4370 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4374 /* Gives responsive mode a phone look'n feel */
4375 .browserStack[responsivemode].fxos-mode {
4376 padding: 60px 15px 0;
4378 border-radius: 25px / 20px;
4379 border-bottom-left-radius: 0;
4380 border-bottom-right-radius: 0;
4381 border: 1px solid #FFFFFF;
4382 border-bottom-width: 0;
4384 background-color: #353535;
4386 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4388 background-image: linear-gradient(to right, #111 11%, #333 56%);
4392 .devtools-responsiveui-hardware-buttons {
4393 -moz-appearance: none;
4396 border: 1px solid #FFFFFF;
4397 border-bottom-left-radius: 25px;
4398 border-bottom-right-radius: 25px;
4399 border-top-width: 0;
4401 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4403 background-image: linear-gradient(to right, #111 11%, #333 56%);
4406 .devtools-responsiveui-home-button {
4407 -moz-user-focus: ignore;
4410 list-style-image: url("chrome://devtools/skin/responsiveui-home.png");
4413 .devtools-responsiveui-sleep-button {
4414 -moz-user-focus: ignore;
4415 -moz-appearance: none;
4416 /* compensate browserStack top padding */
4424 border: 1px solid #444;
4425 border-top-right-radius: 12px;
4426 border-top-left-radius: 12px;
4427 border-bottom-color: transparent;
4429 background-image: linear-gradient(to top, #111 11%, #333 56%);
4432 .devtools-responsiveui-sleep-button:hover:active {
4433 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4436 .devtools-responsiveui-volume-buttons {
4440 .devtools-responsiveui-volume-up-button,
4441 .devtools-responsiveui-volume-down-button {
4442 -moz-user-focus: ignore;
4443 -moz-appearance: none;
4444 border: 1px solid red;
4448 border: 1px solid #444;
4449 border-right-color: transparent;
4451 background-image: linear-gradient(to right, #111 11%, #333 56%);
4454 .devtools-responsiveui-volume-up-button:hover:active,
4455 .devtools-responsiveui-volume-down-button:hover:active {
4456 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4459 .devtools-responsiveui-volume-up-button {
4460 border-top-left-radius: 12px;
4463 .devtools-responsiveui-volume-down-button {
4464 border-bottom-left-radius: 12px;
4467 @media (min-resolution: 2dppx) {
4468 .devtools-responsiveui-resizebarV {
4469 background-image: url("chrome://devtools/skin/responsive-vertical-resizer@2x.png");
4472 .devtools-responsiveui-resizebarH {
4473 background-image: url("chrome://devtools/skin/responsive-horizontal-resizer@2x.png");
4476 .devtools-responsiveui-resizehandle {
4477 background-image: url("chrome://devtools/skin/responsive-se-resizer@2x.png");
4481 /* === END responsivedesign.inc.css === */
4483 /* === including indicator.css is done at the start of the file === */
4487 #developer-toolbar-toolbox-button[error-count]:before {
4491 background-color: #FF0000;
4493 -moz-margin-end: 5px;
4496 /* Social toolbar item */
4498 #social-notification-icon-mentions {
4499 background-color: #000000;
4501 -moz-margin-start: 2px;
4504 #social-notification-icon-mentions:hover {
4505 background-color: #FFCF00;
4508 #social-notification-icon-mentions[open="true"] {
4509 background-color: #FF9F00;
4512 #social-sidebar-splitter {
4516 #socialActivatedNotification .popup-notification-button-container {
4520 .social-activation-icon {
4527 #social-activation-message {
4531 #social-activation-message > label {
4535 /* social toolbar provider menu */
4536 .social-statusarea-popup {
4539 margin-right: -12px;
4542 .social-statusarea-user {
4543 border-bottom: 1px solid #9C9CFF;
4544 background-color: #000000;
4550 .social-statusarea-user-portrait {
4557 .social-statusarea-loggedInStatus {
4558 background: transparent;
4563 list-style-image: none;
4566 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4567 text-decoration: underline;
4570 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4574 .social-panel-frame {
4575 border-radius: inherit;
4578 /* === BEGIN chat.inc.css === */
4580 #social-sidebar-header {
4584 #manage-share-providers,
4585 #social-sidebar-button {
4586 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4587 -moz-image-region: rect(0, 468px, 18px, 450px);
4590 #social-sidebar-button {
4591 -moz-appearance: none;
4596 #manage-share-providers > .toolbarbutton-icon,
4597 #social-sidebar-button > .toolbarbutton-icon {
4601 #manage-share-providers:hover,
4602 #manage-share-providers:hover:active,
4603 #social-sidebar-button:hover,
4604 #social-sidebar-button:hover:active {
4605 -moz-image-region: rect(18px, 468px, 36px, 450px);
4607 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4611 #social-sidebar-button[loading="true"] {
4612 list-style-image: url("chrome://global/skin/icons/loading.gif");
4615 #social-sidebar-favico {
4628 .chat-toolbarbutton {
4629 -moz-appearance: none;
4636 .chat-toolbarbutton > .toolbarbutton-text {
4640 .chat-toolbarbutton > .toolbarbutton-icon {
4645 .chat-close-button {
4646 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4649 .chat-close-button:hover {
4650 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4653 .chat-close-button:hover:active {
4654 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4657 .chat-minimize-button {
4658 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4661 .chat-minimize-button:hover {
4662 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4665 .chat-minimize-button:hover:active {
4666 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4670 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4671 transform: rotate(180deg);
4674 .chat-swap-button:hover {
4675 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4678 .chat-swap-button:hover:active {
4679 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4682 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4693 background-color: #9C9CFF;
4700 border: 1px solid #008484;
4702 border-top-left-radius: 4px;
4703 border-top-right-radius: 4px;
4705 background-color: #A09090;
4708 .chat-titlebar[selected] {
4709 background-color: #008484;
4712 .chat-titlebar > .notification-anchor-icon {
4717 .chat-titlebar[minimized="true"] {
4718 border-bottom: none;
4721 .chat-titlebar[selected] {
4722 background-color: #008484;
4725 .chat-titlebar[activity] {
4726 background-color: #E7ADE7;
4736 list-style-image: url("chrome://browser/skin/social/services-16.png");
4737 background-color: #000000;
4743 border-top: 1px solid #008484;
4744 -moz-border-end: 1px solid #008484;
4747 @media (min-resolution: 2dppx) {
4749 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4753 .chatbar-button:hover {
4754 background-color: #FFCF00;
4756 .chatbar-button[open="true"] {
4757 background-color: #FF9F00;
4760 .chatbar-button[activity]:not([open]) {
4761 background-image: radial-gradient(circle farthest-corner at center 2px, rgb(160,144,144) 3%, rgba(160,144,144,0.9) 12%, rgba(156,156,255,0.6) 30%, rgba(156,156,255,0.2) 70%);
4764 .chatbar-button > .toolbarbutton-icon {
4768 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4775 .chatbar-button > .toolbarbutton-icon {
4779 .chatbar-button:hover > .toolbarbutton-icon,
4780 .chatbar-button[open="true"] > .toolbarbutton-icon {
4784 .chatbar-button:hover,
4785 .chatbar-button[open="true"] {
4788 .chatbar-button > .toolbarbutton-text,
4789 .chatbar-button > .toolbarbutton-menu-dropmarker {
4793 .chatbar-button[activity]:not([open="true"]) {
4794 background-color: #E7ADE7;
4797 .chatbar-button > menupopup > menuitem[activity] {
4802 background: transparent;
4807 -moz-margin-end: 20px;
4811 -moz-margin-start: 4px;
4812 background-color: transparent;
4816 /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
4818 /* border-top-left-radius: 4px;
4819 border-top-right-radius: 4px;*/
4820 /* Offset the chatbox the same amount as the box-shadows' spread, to make it
4822 /* -moz-margin-end: 5px;*/
4825 chatbox[minimized="true"] {
4831 -moz-margin-start: 0px;
4837 /* === END chat.inc.css === */
4839 /* === BEGIN plugin-doorhanger.inc.css === */
4842 * Plugin Doorhanger Styles
4845 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4846 padding: 6px 1px 2px;
4849 .click-to-play-plugins-notification-center-box {
4852 .plugin-popupnotification-centeritem:nth-child(odd) {
4853 /* background-color: rgba(0,0,0,0.1);*/
4856 .center-item-label {
4858 text-overflow: ellipsis;
4861 .center-item-warning-icon {
4862 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4863 background-repeat: no-repeat;
4866 -moz-margin-start: 6px;
4869 .click-to-play-plugins-notification-button-container {
4872 .click-to-play-popup-button {
4876 .click-to-play-plugins-notification-description-box {
4880 padding-bottom: 3px;
4883 .click-to-play-plugins-outer-description {
4887 .click-to-play-plugins-notification-link,
4892 .messageImage[value="plugin-hidden"] {
4893 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
4896 /* Keep any changes to this style in sync with pluginProblem.css */
4897 notification.pluginVulnerable {
4900 notification.pluginVulnerable .messageImage {
4901 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
4904 /* === END plugin-doorhanger.inc.css === */
4906 /* === BEGIN login-doorhanger.inc.css === */
4908 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
4909 /* Since we display a sliding subview that extends to the border, we cannot
4910 * keep the default padding of arrow panels. We use the same padding in the
4911 * individual content views instead. Since we removed the padding, we also
4912 * have to ensure the contents are clipped to the border box. */
4917 #login-fill-mainview,
4918 #login-fill-details {
4919 padding: var(--panel-arrowcontent-padding);
4922 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
4923 transform: translateX(-14px);
4926 #login-fill-mainview,
4927 #login-fill-details {
4928 transition: transform 150ms;
4931 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
4932 transform: translateX(105%);
4935 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
4936 transform: translateX(-105%);
4939 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
4940 background-color: hsla(240,39%,100%,.1);
4943 #login-fill-testing {
4949 border: 1px solid #9C9CFF;
4953 .login-fill-item[disabled] {
4955 background-color: #000000;
4958 .login-fill-item[disabled][selected] {
4959 background-color: #008484;
4967 .login-fill-item.different-hostname > .login-hostname {
4977 #login-fill-details {
4979 background: var(--panel-arrowcontent-background);
4980 color: var(--panel-arrowcontent-color);
4981 background-clip: padding-box;
4982 border-left: 1px solid #9C9CFF;
4983 -moz-margin-start: 38px;
4986 /* === END login-doorhanger.inc.css === */
4988 /* === BEGIN customizeMode.inc.css === */
4990 /* Customization mode */
4992 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4996 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4997 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4998 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
5003 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
5004 pointer-events: none;
5007 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5008 #PanelUI-contents > .panel-customization-placeholder {
5009 -moz-outline-radius: 2.5px;
5010 outline: 1px dashed transparent;
5013 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
5014 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
5015 -moz-box-ordinal-group: 0;
5020 outline-offset: -2px;
5021 pointer-events: none;
5027 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
5028 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
5029 offset from the bottom effectively the same as other targets (-2px). */
5030 #main-window[customize-entered] #TabsToolbar.customization-target::before {
5034 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
5035 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
5036 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
5037 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
5041 /* Most target outlines are shown on hover and drag over but the panel menu uses
5042 placeholders instead. */
5043 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5044 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5045 /* nav-bar and panel outlines are always shown */
5046 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5047 outline-color: #A09090;
5050 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5051 transition: outline-color 250ms linear;
5054 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5055 transition: outline-color 250ms linear;
5056 outline-color: #9C9CFF;
5059 #PanelUI-contents > .panel-customization-placeholder {
5061 outline-offset: -5px;
5064 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5066 /* padding-left: 10px;
5067 padding-right: 10px;*/
5070 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5074 #customization-container {
5075 background-color: #000000;
5079 #customization-palette,
5080 #customization-empty {
5081 padding: 0 15px 15px;
5084 #customization-header {
5086 line-height: 1.75em;
5089 margin: 25px 25px 12px;
5090 padding-bottom: 12px;
5091 border-bottom: 1px solid #A09090;
5094 #customization-panel-container {
5095 padding: 10px 10px 0px;
5098 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5099 #customization-footer {
5100 /*background-color: rgb(236,236,236);*/
5103 #customization-footer {
5104 border-top: 1px solid #9C9CFF;
5108 .customizationmode-button {
5112 .customizationmode-button:hover {
5115 #customization-titlebar-visibility-button[checked],
5116 #customization-devedition-theme-button[checked] {
5117 background-color: #008484;
5120 #customization-titlebar-visibility-button[checked]:hover,
5121 #customization-devedition-theme-button[checked]:hover {
5122 background-color: #FFCF00;
5125 #customization-titlebar-visibility-button[checked]:hover:active,
5126 #customization-devedition-theme-button[checked]:hover:active {
5127 background-color: #FF9F00;
5130 .customizationmode-button[disabled="true"] {
5133 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5134 .customizationmode-button > .button-box > .button-icon {
5138 #customization-titlebar-visibility-button {
5139 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5140 -moz-image-region: rect(0, 16px, 16px, 0);
5143 #customization-titlebar-visibility-button:hover {
5144 -moz-image-region: rect(16px, 16px, 32px, 0);
5147 #customization-lwtheme-button,
5148 #customization-titlebar-visibility-button {
5152 #customization-titlebar-visibility-button > .button-box {
5154 padding-bottom: 1px;
5157 #customization-titlebar-visibility-button:hover:active > .button-box {
5162 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5163 #customization-titlebar-visibility-button > .button-box > .button-text {
5164 /* Sadly, button.css thinks its margins are perfect for everyone. */
5165 -moz-margin-start: 5px !important;
5168 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5172 background-size: contain;
5175 #customization-titlebar-visibility-button > .button-box > .button-icon {
5176 vertical-align: middle;
5179 #customization-titlebar-visibility-button[checked] {
5180 -moz-image-region: rect(0, 32px, 16px, 16px);
5181 background-color: #008484;
5184 #customization-titlebar-visibility-button[checked]:hover {
5185 -moz-image-region: rect(16px, 32px, 32px, 16px);
5186 background-color: #FFCF00;
5189 #customization-titlebar-visibility-button[checked]:hover:active {
5190 background-color: #FF9F00;
5193 @media (min-resolution: 1.1dppx) {
5194 #customization-titlebar-visibility-button {
5195 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5196 -moz-image-region: rect(0, 48px, 48px, 0);
5199 #customization-titlebar-visibility-button:hover {
5200 -moz-image-region: rect(48px, 48px, 96px, 0);
5203 #customization-titlebar-visibility-button[checked] {
5204 -moz-image-region: rect(0, 96px, 48px, 48px);
5207 #customization-titlebar-visibility-button[checked]:hover {
5208 -moz-image-region: rect(48px, 96px, 96px, 48px);
5212 #main-window[customize-entered] #customization-panel-container {
5213 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5214 background-position: left top;
5215 background-repeat: repeat;
5216 background-size: auto;
5217 background-attachment: fixed;
5220 toolbarpaletteitem[place="toolbar"] {
5221 transition: border-width 250ms ease-in-out;
5224 toolbarpaletteitem[mousedown] {
5225 outline: 1px solid #008484;
5226 cursor: -moz-grabbing;
5230 .panel-customization-placeholder,
5231 toolbarpaletteitem[place="palette"],
5232 toolbarpaletteitem[place="panel"] {
5233 transition: transform .3s ease-in-out;
5236 #customization-palette {
5237 transition: opacity .3s ease-in-out;
5241 #customization-palette[showing="true"] {
5245 toolbarpaletteitem[notransition].panel-customization-placeholder,
5246 toolbarpaletteitem[notransition][place="toolbar"],
5247 toolbarpaletteitem[notransition][place="palette"],
5248 toolbarpaletteitem[notransition][place="panel"] {
5252 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5253 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5254 toolbarpaletteitem > toolbaritem.panel-wide-item,
5255 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5256 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
5259 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5260 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5261 transform: scale(1.3);
5264 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5265 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5266 transform: scale(1.1);
5269 /* Override the toolkit styling for items being dragged over. */
5270 toolbarpaletteitem[place="toolbar"] {
5271 border-left-width: 0;
5272 border-right-width: 0;
5277 #customization-palette:not([hidden]) {
5278 margin-bottom: 25px;
5281 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5282 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5283 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5284 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5288 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5289 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5299 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5300 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5304 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5305 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5308 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5309 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5313 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5314 -moz-box-pack: center;
5318 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5319 -moz-margin-end: 5px;
5322 #customization-palette > toolbarpaletteitem > label {
5328 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5329 -moz-box-orient: vertical;
5330 /* Make the panel padding uniform across all platforms due to the
5331 styling of the section headers and footer. */
5335 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5340 .customization-lwtheme-menu-theme {
5341 -moz-appearance: none;
5344 -moz-padding-end: 5px;
5346 -moz-padding-start: 0;
5349 .customization-lwtheme-menu-theme[defaulttheme] {
5350 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5353 .customization-lwtheme-menu-theme[active="true"] {
5354 background-color: #008484;
5357 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5361 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5365 #customization-lwtheme-menu-header,
5366 #customization-lwtheme-menu-recommended {
5371 #customization-lwtheme-menu-header,
5372 #customization-lwtheme-menu-recommended,
5373 #customization-lwtheme-menu-footer {
5374 background-color: #A09090;
5376 margin-right: -10px;
5380 #customization-lwtheme-menu-header {
5382 border-top-right-radius: 3px;
5383 border-top-left-radius: 3px;
5386 #customization-lwtheme-menu-recommended {
5389 #customization-lwtheme-menu-footer {
5390 margin-bottom: -10px;
5391 border-bottom-right-radius: 3px;
5392 border-bottom-left-radius: 3px;
5395 .customization-lwtheme-menu-footeritem {
5396 -moz-appearance: none;
5398 background-color: #C09070;
5400 border: 1px solid transparent;
5406 .customization-lwtheme-menu-footeritem:hover {
5407 background-color: #FFCF00;
5410 .customization-lwtheme-menu-footeritem:first-child {
5413 /* === END customizeMode.inc.css === */
5415 /* === BEGIN customizeTip.inc.css === */
5417 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5424 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5425 border: 1px solid #9C9CFF;
5429 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5430 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5433 .customization-tipPanel-infoBox {
5434 margin: 20px 25px 25px;
5436 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5437 background-repeat: no-repeat;
5440 .customization-tipPanel-content {
5446 .customization-tipPanel-em {
5451 .customization-tipPanel-contentImage {
5453 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5461 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5462 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5465 .customization-tipPanel-link {
5466 -moz-appearance: none;
5467 background: transparent;
5475 .customization-tipPanel-link > .button-box > .button-text {
5476 margin: 0 !important;
5479 .customization-tipPanel-closeBox > .close-icon {
5480 -moz-appearance: none;
5482 -moz-margin-end: -25px;
5485 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5486 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5487 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5490 /* === END customizeTip.inc.css === */
5493 * This next rule is a hack to disable subpixel anti-aliasing on all
5494 * labels during the customize mode transition. Subpixel anti-aliasing
5495 * on Windows with Direct2D layers acceleration is particularly slow to
5496 * paint, so this hack is how we sidestep that performance bottleneck.
5498 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5499 transform: perspective(0.01px);
5502 #main-window[customize-entered] > #tab-view-deck {
5503 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5504 background-attachment: fixed;
5507 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5508 background-repeat: no-repeat;
5509 background-position: right top;
5510 background-attachment: fixed;
5511 /* The image will get set from CustomizeMode.jsm */
5512 background-image: none;
5513 background-color: transparent;
5516 #main-window[customization-lwtheme]:-moz-lwtheme {
5517 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5518 background-repeat: repeat;
5519 background-attachment: fixed;
5520 background-position: left top;
5523 #main-window[customize-entered] #browser-bottombox,
5524 #main-window[customize-entered] #customization-container {
5525 border-left: 1px solid #9C9CFF;
5526 border-right: 1px solid #9C9CFF;
5527 background-clip: padding-box;
5530 #main-window[customize-entered] #browser-bottombox {
5531 border-bottom: 1px solid #9C9CFF;
5534 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5538 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5542 /* End customization mode */
5544 /* Private browsing indicators */
5547 * Currently, we have two places where we put private browsing indicators on
5548 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5549 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5550 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5551 * want the bottom border of the image to line up with the bottom of the window
5552 * caption buttons. That's why there's so much special-casing going on in here.
5554 .private-browsing-indicator {
5556 pointer-events: none;
5559 #private-browsing-indicator-titlebar {
5564 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5568 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5572 #TabsToolbar > .private-browsing-indicator {
5573 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5574 -moz-margin-start: 4px;
5578 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5579 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5580 * min/max/close window buttons.
5582 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5583 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5584 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5585 -moz-margin-end: 4px;
5591 /* This one is for Linux */
5592 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5593 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5597 /* End private browsing indicators */
5599 /* === BEGIN UITour.inc.css === */
5603 #UITourHighlightContainer {
5604 -moz-appearance: none;
5606 background-color: transparent;
5607 /* This is a buffer to compensate for the movement in the "wobble" effect */
5612 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5613 border-radius: 40px;
5614 border: 1px solid #9C9CFF;
5615 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5616 on Linux without an X compositor where opacity is either 0 or 1. */
5617 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5622 #UITourTooltipBody {
5623 -moz-margin-end: 14px;
5626 #UITourTooltipBody > vbox {
5630 #UITourTooltipIconContainer {
5631 -moz-margin-start: -16px;
5634 #UITourTooltipIcon {
5637 -moz-margin-start: 28px;
5638 -moz-margin-end: 28px;
5641 #UITourTooltipTitle,
5642 #UITourTooltipDescription {
5646 #UITourTooltipTitle {
5649 -moz-margin-start: 0;
5654 #UITourTooltipDescription {
5655 -moz-margin-start: 0;
5658 line-height: 1.8rem;
5659 margin-bottom: 0; /* Override global.css */
5662 #UITourTooltipClose {
5663 -moz-appearance: none;
5665 background-color: transparent;
5667 -moz-margin-start: 4px;
5671 #UITourTooltipClose > .toolbarbutton-text {
5675 #UITourTooltipButtons {
5677 background-color: rgba(0,0,0,.2);
5678 border-top: 1px solid rgba(0,0,0,.4);
5679 margin: 24px -16px -16px;
5683 #UITourTooltipButtons > label,
5684 #UITourTooltipButtons > button {
5688 #UITourTooltipButtons > label:first-child,
5689 #UITourTooltipButtons > button:first-child {
5690 -moz-margin-start: 0;
5693 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5696 -moz-margin-end: 5px;
5699 #UITourTooltipButtons > label,
5700 #UITourTooltipButtons > button .button-text {
5704 #UITourTooltipButtons > button:not(.button-link) {
5705 -moz-appearance: none;
5706 background-color: #C09070;
5707 border-radius: 3000px;
5711 transition-property: background-color, color;
5712 transition-duration: 150ms;
5715 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5716 background-color: #FFCF00;
5720 #UITourTooltipButtons > label,
5721 #UITourTooltipButtons > button.button-link {
5722 -moz-appearance: none;
5723 background: transparent;
5726 color: rgba(0,0,0,0.35);
5728 padding-right: 10px;
5731 #UITourTooltipButtons > button.button-link:hover {
5735 /* The primary button gets the same color as the customize button. */
5736 #UITourTooltipButtons > button.button-primary {
5737 background-color: #A06060; /* LCARS default button background color */
5740 padding-right: 30px;
5743 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5744 background-color: #FFCF00;
5748 /* Notification overrides for Heartbeat UI */
5750 notification.heartbeat {
5751 background-color: #A09090;
5755 @keyframes pulse-onshow {
5758 transform: scale(1.0);
5762 transform: scale(1.1);
5765 transform: scale(1.0);
5768 transform: scale(1.1);
5771 transform: scale(1.0);
5775 @keyframes pulse-twice {
5777 transform: scale(1.1);
5780 transform: scale(0.8);
5783 transform: scale(1);
5787 .messageText.heartbeat {
5789 /* text-shadow: none; */
5790 -moz-margin-start: 0px;
5793 .messageImage.heartbeat {
5796 -moz-margin-start: 8px;
5797 -moz-margin-end: 8px;
5800 .messageImage.heartbeat.pulse-onshow {
5801 animation-name: pulse-onshow;
5802 animation-duration: 1.5s;
5803 animation-iteration-count: 1;
5804 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5807 .messageImage.heartbeat.pulse-twice {
5808 animation-name: pulse-twice;
5809 animation-duration: 1s;
5810 animation-iteration-count: 2;
5811 animation-timing-function: linear;
5814 /* Learn More link styles */
5815 .heartbeat > .text-link {
5817 -moz-margin-start: 0px;
5820 .heartbeat > .text-link:hover {
5822 text-decoration: none;
5825 .heartbeat > .text-link:hover:active {
5829 /* Heartbeat UI Rating Star Classes */
5830 .heartbeat > #star-rating-container {
5832 /* margin-bottom: 4px;*/
5835 .heartbeat > #star-rating-container > #star5 {
5836 -moz-box-ordinal-group: 5;
5839 .heartbeat > #star-rating-container > #star4 {
5840 -moz-box-ordinal-group: 4;
5843 .heartbeat > #star-rating-container > #star3 {
5844 -moz-box-ordinal-group: 3;
5847 .heartbeat > #star-rating-container > #star2 {
5848 -moz-box-ordinal-group: 2;
5851 .heartbeat > #star-rating-container > .star-x {
5852 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5854 /* Overrides the -moz-margin-end for all platforms defined in the .plain class */
5855 -moz-margin-end: 4px !important;
5860 .heartbeat > #star-rating-container > .star-x:hover,
5861 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5862 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5865 /* === END UITour.inc.css === */
5867 #UITourTooltipButtons {
5869 * Override the --panel-arrowcontent-padding so the background extends
5870 * to the sides and bottom of the panel.
5873 margin-right: -10px;
5874 margin-bottom: -10px;
5877 /* === BEGIN contextmenu.inc.css === */
5879 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5882 #context-navigation > .menuitem-iconic {
5884 -moz-box-pack: center;
5885 -moz-box-align: center;
5888 #context-navigation > .menuitem-iconic[disabled="true"] {
5889 background-color: transparent;
5892 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5893 -moz-appearance: none;
5896 #context-back > .menu-iconic-left {
5897 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
5898 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5899 -moz-image-region: rect(0, 54px, 18px, 36px);
5902 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
5903 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
5904 -moz-image-region: rect(18px, 54px, 36px, 36px);
5907 #context-back[disabled="true"] > .menu-iconic-left {
5908 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
5909 -moz-image-region: rect(36px, 54px, 54px, 36px);
5912 #context-forward > .menu-iconic-left {
5913 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
5914 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5915 -moz-image-region: rect(0, 72px, 18px, 54px);
5918 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
5919 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
5920 -moz-image-region: rect(18px, 72px, 36px, 54px);
5923 #context-forward[disabled="true"] > .menu-iconic-left {
5924 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
5925 -moz-image-region: rect(36px, 72px, 54px, 54px);
5928 #context-reload > .menu-iconic-left {
5929 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
5930 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5931 -moz-image-region: rect(0, 14px, 14px, 0);
5934 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
5935 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
5936 -moz-image-region: rect(14px, 14px, 28px, 0);
5939 #context-reload[disabled="true"] > .menu-iconic-left {
5940 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
5941 -moz-image-region: rect(28px, 14px, 42px, 0);
5944 #context-stop > .menu-iconic-left {
5945 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
5946 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5947 -moz-image-region: rect(0, 28px, 14px, 14px);
5950 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
5951 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
5952 -moz-image-region: rect(14px, 28px, 28px, 14px);
5955 #context-stop[disabled="true"] > .menu-iconic-left {
5956 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
5957 -moz-image-region: rect(28px, 28px, 42px, 14px);
5960 #context-bookmarkpage > .menu-iconic-left {
5961 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
5962 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5963 -moz-image-region: rect(0, 144px, 18px, 126px);
5966 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
5967 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
5968 -moz-image-region: rect(18px, 144px, 36px, 126px);
5971 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
5972 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
5973 -moz-image-region: rect(36px, 144px, 54px, 126px);
5976 #context-bookmarkpage[starred=true] {
5977 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
5978 -moz-image-region: rect(0px, 162px, 18px, 144px);
5981 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
5982 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
5983 -moz-image-region: rect(18px, 162px, 36px, 144px);
5986 #context-bookmarkpage[starred=true][disabled=true] {
5987 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
5988 -moz-image-region: rect(36px, 162px, 54px, 144px);
5991 #context-back:-moz-locale-dir(rtl),
5992 #context-forward:-moz-locale-dir(rtl),
5993 #context-reload:-moz-locale-dir(rtl) {
5994 transform: scaleX(-1);
5997 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
5998 width: 18px; /*16px;*/
5999 height: 18px; /*16px;*/
6003 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
6004 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
6010 #context-media-eme-learnmore {
6011 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6014 #context-media-eme-learnmore {
6015 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6018 /* === END contextmenu.inc.css === */
6020 #context-navigation {
6023 #context-sep-navigation {
6024 /* margin-top: -4px; */
6027 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
6032 /* === BEGIN usercontext.inc.css === */
6034 /* User Context UI browser styles */
6036 #menu_newUserContextTabPersonal {
6037 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6040 #menu_newUserContextTabWork {
6041 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6044 #menu_newUserContextTabBanking {
6045 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6048 #menu_newUserContextTabShopping {
6049 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6052 /* URL Bar Decoration */
6054 #userContext-indicator {
6059 #userContext-label {
6060 margin-inline-end: 3px;
6064 #userContext-icons:not([usercontextid]) {
6068 #userContext-icons {
6069 -moz-box-align: center;
6072 /* Personal User Context */
6073 #userContext-icons[usercontextid="1"] > #userContext-label {
6076 #userContext-icons[usercontextid="1"] > #userContext-indicator {
6077 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6080 /* Work User Context */
6081 #userContext-icons[usercontextid="2"] > #userContext-label {
6084 #userContext-icons[usercontextid="2"] > #userContext-indicator {
6085 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6088 /* Banking User Context */
6089 #userContext-icons[usercontextid="3"] > #userContext-label {
6092 #userContext-icons[usercontextid="3"] > #userContext-indicator {
6093 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6096 /* Shopping User Context */
6097 #userContext-icons[usercontextid="4"] > #userContext-label {
6100 #userContext-icons[usercontextid="4"] > #userContext-indicator {
6101 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6104 /* === END usercontext.inc.css === */