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 #urlbar:-moz-lwtheme,
1740 .searchbar-textbox:-moz-lwtheme {
1741 /* background-color: rgba(255,255,255,.8);
1742 @navbarTextboxCustomBorder@
1746 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1747 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1748 /* background-color: rgba(255,255,255,.9);*/
1751 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1752 .searchbar-textbox:-moz-lwtheme[focused] {
1753 /* background-color: white;*/
1756 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1757 /* -moz-border-start: none;
1761 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1762 /* border-top-left-radius: 0;
1763 border-bottom-left-radius: 0; */
1766 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1767 /* border-top-right-radius: 0;
1768 border-bottom-right-radius: 0; */
1771 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1772 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1773 /* margin-inline-start: calc(-1 * var(--backbutton-urlbar-overlap)); */
1776 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1777 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1778 /* let urlbar-back-button-clip-path clip the urlbar's right side for RTL */
1779 transform: scaleX(-1);
1782 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl) {
1783 -moz-box-direction: reverse;
1786 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1787 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1792 -moz-box-orient: horizontal;
1793 -moz-box-align: stretch;
1796 .urlbar-textbox-container {
1797 -moz-box-align: stretch;
1801 -moz-margin-start: 0;
1805 -moz-box-align: center;
1810 /* 16x16 icon with border-box sizing */
1815 .search-go-container {
1819 .search-go-container > .search-go-button {
1823 #urlbar-search-footer {
1824 border-top: 1px solid #A09090;
1827 #urlbar-search-settings {
1830 #urlbar-search-settings:hover {
1833 #urlbar-search-settings:hover:active {
1836 #urlbar-search-splitter {
1838 -moz-margin-start: -3px;
1840 background: transparent;
1843 #urlbar-search-splitter + #urlbar-container > #urlbar,
1844 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1845 -moz-margin-start: 0;
1848 #urlbar-display-box {
1852 -moz-border-end: 1px solid #9C9CFF;
1853 -moz-margin-end: 3px;
1856 -moz-margin-start: 0;
1860 /* === BEGIN urlbarSearchSuggestionsNotification.inc.css === */
1862 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] {
1863 border-bottom: 1px solid #A09090;
1864 background-color: #000000;
1866 -moz-padding-start: 44px;
1867 -moz-padding-end: 6px;
1868 background-image: url("chrome://browser/skin/info.svg");
1869 background-clip: padding-box;
1870 background-position: 20px center;
1871 background-repeat: no-repeat;
1872 background-size: 16px 16px;
1875 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"]:-moz-locale-dir(rtl) {
1876 background-position: right 20px center;
1879 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description {
1884 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > description > label.text-link {
1885 -moz-margin-start: 0;
1888 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button {
1889 -moz-appearance: none;
1894 -moz-margin-start: 10px;
1897 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"] {
1900 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-disable"]:hover {
1903 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"] {
1906 #PopupAutoCompleteRichResult > hbox[anonid="search-suggestions-notification"] > button[anonid="search-suggestions-notification-enable"]:hover {
1909 /* === END urlbarSearchSuggestionsNotification.inc.css === */
1912 min-width: calc(54px + 11ch);
1917 #identity-box.verifiedIdentity:not(:-moz-lwtheme):not(:hover):not([open=true]) {
1918 background-color: var(--identity-box-verified-background-color);
1921 #identity-box:-moz-focusring {
1922 outline: 1px dotted #008484;
1923 outline-offset: -1px;
1926 #identity-box.verifiedDomain:-moz-focusring,
1927 #identity-box.verifiedIdentity:-moz-focusring {
1928 outline-color: #000000;
1931 /* Location bar dropmarker */
1933 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1934 background-color: transparent;
1937 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1938 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker,
1939 #urlbar-wrapper > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1942 transition: opacity 0.15s ease;
1945 #urlbar-wrapper[switchingtabs] > #urlbar > .urlbar-textbox-container > .urlbar-history-dropmarker {
1949 #navigator-toolbox:not(:hover) #urlbar:not([focused]) > .urlbar-textbox-container > .urlbar-history-dropmarker {
1953 .urlbar-history-dropmarker:hover {
1956 .urlbar-history-dropmarker:hover:active,
1957 .urlbar-history-dropmarker[open="true"] {
1960 /* page proxy icon */
1962 /* === BEGIN identity-block.inc.css === */
1965 /* --identity-box-hover-background-color: #FFCF00;
1966 --identity-box-selected-background-color: #FF9F00; */
1967 --identity-box-verified-color: #008484;
1968 /* Default theme does different color per channel, we can't as they do it build-time. */
1969 --identity-box-chrome-color: #9C9CFF;
1971 border-inline-end: 1px solid var(--urlbar-separator-color);
1975 margin-inline-end: 4px;
1977 /* The latter two properties have a transition to handle the delayed hiding of
1978 the forward button when hovered. */
1979 transition: background-color 150ms ease, padding-left, padding-right;
1982 #identity-box:-moz-locale-dir(ltr) {
1983 border-top-right-radius: 0;
1984 border-bottom-right-radius: 0;
1987 #identity-box:-moz-locale-dir(rtl) {
1988 border-top-left-radius: 0;
1989 border-bottom-left-radius: 0;
1992 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1993 color: var(--identity-box-chrome-color);
1994 -moz-border-end: 1px solid var(--identity-box-chrome-color);
1997 #identity-box:hover > :not(#identity-icon),
1998 #identity-box[open=true] > :not(#identity-icon) {
1999 /* filter: grayscale(100%);*/
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 #identity-icon-labels:-moz-locale-dir(ltr) {
2011 #identity-icon-labels:-moz-locale-dir(rtl) {
2015 #notification-popup-box:not([hidden]) + #identity-box {
2016 padding-inline-start: 10px;
2020 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
2021 /* border-radius: 0;
2022 padding-inline-start: 2px; */
2023 padding-inline-end: 2px;
2024 margin-inline-end: 1px;
2027 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar >
2028 #notification-popup-box[hidden] + #identity-box {
2029 padding-inline-start: 2px;
2032 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:hover:not([switchingtabs]) > #forward-button[disabled] + #urlbar >
2033 #notification-popup-box[hidden] + #identity-box {
2034 /* Forward button hiding is delayed when hovered, so we should use the same
2035 delay for the identity box. We handle both horizontal paddings (for LTR and
2036 RTL), the latter two delays here are for padding-left and padding-right. */
2037 transition-delay: 0s, 100s, 100s;
2040 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled] + #urlbar >
2041 #notification-popup-box[hidden] + #identity-box {
2042 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
2043 padding-inline-start: 2.01px;
2046 /* MAIN IDENTITY ICON */
2051 list-style-image: url(chrome://browser/skin/identity-icon.svg#normal);
2054 #identity-box:hover > #identity-icon,
2055 #identity-box[open=true] > #identity-icon {
2056 list-style-image: url(chrome://browser/skin/identity-icon.svg#hover);
2059 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI > #identity-icon {
2060 list-style-image: url(chrome://branding/content/identity-icons-brand.svg);
2063 #urlbar[pageproxystate="invalid"] > #identity-box > #identity-icon {
2067 #urlbar[actiontype="searchengine"] > #identity-box > #identity-icon {
2068 -moz-image-region: inherit;
2069 list-style-image: url(chrome://global/skin/icons/autocomplete-search.svg#search-icon);
2075 /* TRACKING PROTECTION ICON */
2077 #tracking-protection-icon {
2080 margin-inline-start: 2px;
2081 margin-inline-end: 0;
2082 list-style-image: url(chrome://browser/skin/tracking-protection-16.svg);
2086 #tracking-protection-icon[state="loaded-tracking-content"] {
2087 list-style-image: url(chrome://browser/skin/tracking-protection-disabled-16.svg);
2090 #tracking-protection-icon[animate] {
2091 transition: margin-left 200ms ease-out, margin-right 200ms ease-out;
2094 #tracking-protection-icon:not([state]) {
2095 margin-inline-end: -18px;
2096 pointer-events: none;
2098 /* Only animate the shield in, when it disappears hide it immediately. */
2102 #urlbar[pageproxystate="invalid"] > #identity-box > #tracking-protection-icon {
2103 visibility: collapse;
2106 /* CONNECTION ICON */
2111 margin-inline-start: 2px;
2112 visibility: collapse;
2115 #urlbar[pageproxystate="valid"] > #identity-box.verifiedDomain > #connection-icon,
2116 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity > #connection-icon {
2117 list-style-image: url(chrome://browser/skin/identity-secure.svg);
2118 visibility: visible;
2121 #urlbar[pageproxystate="valid"] > #identity-box.insecureLoginForms > #connection-icon,
2122 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveContent > #connection-icon {
2123 list-style-image: url(chrome://browser/skin/identity-mixed-active-loaded.svg);
2124 visibility: visible;
2127 #urlbar[pageproxystate="valid"] > #identity-box.weakCipher > #connection-icon,
2128 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContent > #connection-icon,
2129 #urlbar[pageproxystate="valid"] > #identity-box.mixedDisplayContentLoadedActiveBlocked > #connection-icon {
2130 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2131 visibility: visible;
2134 #urlbar[pageproxystate="valid"] > #identity-box.mixedActiveBlocked > #connection-icon {
2135 list-style-image: url(chrome://browser/skin/identity-mixed-active-blocked.svg);
2136 visibility: visible;
2139 #urlbar[pageproxystate="valid"] > #identity-box.certUserOverridden > #connection-icon {
2140 list-style-image: url(chrome://browser/skin/identity-mixed-passive-loaded.svg);
2141 visibility: visible;
2144 /* === END identity-block.inc.css === */
2146 #page-proxy-favicon {
2147 -moz-image-region: rect(0, 16px, 16px, 0);
2150 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
2151 /* -moz-margin-end: 1px;*/
2154 #identity-box:hover > #page-proxy-favicon {
2155 -moz-image-region: rect(0, 32px, 16px, 16px);
2158 #identity-box:hover:active > #page-proxy-favicon,
2159 #identity-box[open=true] > #page-proxy-favicon {
2160 -moz-image-region: rect(0, 48px, 16px, 32px);
2163 #identity-box:hover {
2164 background-color: #FFCF00;
2168 #identity-box:hover:active,
2169 #identity-box[open=true] {
2170 background-color: #FF9F00;
2174 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
2175 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
2176 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
2177 background-color: #9C9CFF;
2181 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
2182 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
2183 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
2184 background-color: #008484;
2190 #treecolAutoCompleteImage {
2195 .autocomplete-richlistbox {
2199 .autocomplete-richlistitem {
2204 border: 1px solid transparent;
2207 .autocomplete-richlistitem[selected=true] {
2208 background-color: hsl(210, 80%, 52%);
2213 /* color: hsl(0, 0%, 0%);*/
2221 background-color: hsl(216, 0%, 88%);
2222 color: hsl(0, 0%, 0%);
2224 border: 1px solid transparent;
2236 /* color: hsl(0, 0%, 50%);*/
2247 .ac-title[selected=true],
2248 .ac-separator[selected],
2249 .ac-url[selected=true],
2250 .ac-action[selected=true] {
2254 .ac-tags-text[selected] > html|span.ac-tag {
2255 background-color: #A09090;
2259 html|span.ac-emphasize-text-title,
2260 html|span.ac-emphasize-text-tag,
2261 html|span.ac-emphasize-text-url {
2265 .ac-type-icon[type=bookmark] {
2266 list-style-image: url("chrome://browser/skin/urlbar-star.svg#star");
2269 .ac-type-icon[type=bookmark][selected][current] {
2270 /* list-style-image: url("chrome://browser/skin/urlbar-star.svg#star-inverted");*/
2273 .ac-result-type-bookmark,
2274 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
2275 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2276 -moz-image-region: rect(0px 16px 16px 0px);
2281 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
2282 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
2283 /* -moz-image-region: rect(0px 48px 16px 32px);*/
2286 .ac-type-icon[type=keyword],
2287 .ac-site-icon[type=searchengine],
2288 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
2289 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon");
2292 .ac-type-icon[type=keyword][selected],
2293 .ac-site-icon[type=searchengine][selected],
2294 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage, selected) {
2295 list-style-image: url("chrome://global/skin/icons/autocomplete-search.svg#search-icon-inverted");
2298 .ac-result-type-tag,
2299 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
2300 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2305 .ac-type-icon[type=switchtab],
2306 .ac-type-icon[type=remotetab] {
2307 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab");
2310 .ac-type-icon[type=switchtab][selected],
2311 .ac-type-icon[type=remotetab][selected] {
2312 list-style-image: url("chrome://browser/skin/urlbar-tab.svg#tab-inverted");
2315 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2316 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2322 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2323 border-top: 1px solid #9C9CFF;
2326 /* combined go/reload/stop button in location bar */
2329 #urlbar-reload-button,
2330 #urlbar-stop-button {
2332 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
2333 /* padding: 0 9px;*/
2334 margin-inline-start: 0px;
2335 border-inline-start: 1px solid var(--urlbar-separator-color);
2336 border-image: linear-gradient(transparent 15%,
2337 var(--urlbar-separator-color) 15%,
2338 var(--urlbar-separator-color) 85%,
2340 border-image-slice: 1;
2343 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2344 border-top-left-radius: 0px;
2345 border-bottom-left-radius: 0px;
2348 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2349 border-top-right-radius: 0px;
2350 border-bottom-right-radius: 0px;
2353 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2354 #urlbar-reload-button:not(:hover) {
2355 -moz-border-start-style: none;
2356 -moz-padding-start: 3px;
2359 #urlbar-reload-button {
2360 -moz-image-region: rect(0px, 14px, 14px, 0px);
2363 #urlbar-reload-button[disabled=true] {
2364 -moz-image-region: rect(28px, 14px, 42px, 0px);
2367 #urlbar-reload-button:not([disabled=true]):hover {
2368 -moz-image-region: rect(14px, 14px, 28px, 0px);
2371 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2372 transform: scaleX(-1);
2376 -moz-image-region: rect(0, 42px, 14px, 28px);
2379 #urlbar-go-button:hover {
2380 -moz-image-region: rect(14px, 42px, 28px, 28px);
2383 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2384 transform: scaleX(-1);
2387 #urlbar-stop-button {
2388 -moz-image-region: rect(0px, 28px, 14px, 14px);
2391 #urlbar-stop-button:hover {
2392 -moz-image-region: rect(14px, 28px, 28px, 14px);
2395 @media (min-resolution: 1.1dppx) {
2397 #urlbar-reload-button,
2398 #urlbar-stop-button {
2399 list-style-image: url("chrome://browser/skin/reload-stop-go@2x.png");
2402 #urlbar-go-button > .toolbarbutton-icon,
2403 #urlbar-reload-button > .toolbarbutton-icon,
2404 #urlbar-stop-button > .toolbarbutton-icon {
2409 -moz-image-region: rect(0, 84px, 28px, 56px);
2412 #urlbar-go-button:hover {
2413 -moz-image-region: rect(28px, 84px, 56px, 56px);
2416 #urlbar-go-button:hover:active {
2417 -moz-image-region: rect(56px, 84px, 84px, 56px);
2420 #urlbar-reload-button {
2421 -moz-image-region: rect(0, 28px, 28px, 0);
2424 #urlbar-reload-button:not([disabled]):hover {
2425 -moz-image-region: rect(28px, 28px, 56px, 0);
2428 #urlbar-reload-button:not([disabled]):hover:active {
2429 -moz-image-region: rect(56px, 28px, 84px, 0);
2432 #urlbar-stop-button {
2433 -moz-image-region: rect(0, 56px, 28px, 28px);
2436 #urlbar-stop-button:not([disabled]):hover {
2437 -moz-image-region: rect(28px, 56px, 56px, 28px);
2440 #urlbar-stop-button:hover:active {
2441 -moz-image-region: rect(56px, 56px, 84px, 28px);
2445 /* popup blocker button */
2447 #page-report-button {
2448 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2449 -moz-image-region: rect(0, 16px, 16px, 0);
2452 #page-report-button:hover ,
2453 #page-report-button:hover:active,
2454 #page-report-button[open="true"] {
2455 -moz-image-region: rect(0, 32px, 16px, 16px);
2458 /* Reader mode button */
2460 #reader-mode-button {
2461 list-style-image: url("chrome://browser/skin/readerMode.svg");
2462 -moz-image-region: rect(0, 16px, 16px, 0);
2465 #reader-mode-button:hover,
2466 #reader-mode-button[readeractive]:hover {
2467 -moz-image-region: rect(0, 32px, 16px, 16px);
2470 #reader-mode-button:hover:active,
2471 #reader-mode-button[readeractive] {
2472 -moz-image-region: rect(0, 48px, 16px, 32px);
2475 /* social share panel */
2477 .social-share-frame {
2484 background-color: white;
2485 background-repeat: no-repeat;
2486 background-position: center center;
2488 #share-container[loading] {
2489 background-image: url(chrome://browser/skin/tabbrowser/pendingpaint.png);
2491 #share-container > browser {
2492 transition: opacity 150ms ease-in-out;
2495 #share-container[loading] > browser {
2499 .social-share-toolbar {
2500 border-bottom: 1px solid #9C9CFF;
2504 #social-share-provider-buttons {
2509 .share-provider-button {
2514 .share-provider-button > .toolbarbutton-text {
2517 .share-provider-button > .toolbarbutton-icon {
2523 /* fixup corners for share panel */
2524 .social-panel > .social-panel-frame {
2525 border-radius: inherit;
2528 #social-share-panel {
2534 .social-share-frame {
2535 border-top-left-radius: 0;
2536 border-bottom-left-radius: inherit;
2537 border-top-right-radius: 0;
2538 border-bottom-right-radius: inherit;
2541 #social-share-panel > .social-share-toolbar {
2542 border-top-left-radius: inherit;
2543 border-top-right-radius: inherit;
2546 #social-share-provider-buttons {
2547 border-top-left-radius: inherit;
2548 border-top-right-radius: inherit;
2551 /* social recommending panel */
2553 #social-mark-button {
2554 -moz-image-region: rect(0, 16px, 16px, 0);
2557 /* bookmarks menu-button */
2559 #bookmarks-menu-button.bookmark-item {
2560 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2561 -moz-image-region: rect(0px 16px 16px 0px);
2564 #bookmarks-menu-button.bookmark-item[starred] {
2565 -moz-image-region: rect(0px 32px 16px 16px);
2568 #nav-bar #bookmarks-menu-button[cui-areatype="toolbar"]:not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2570 padding-bottom: 2px;
2573 #BMB_bookmarksPopup[side="top"],
2574 #BMB_bookmarksPopup[side="bottom"] {
2576 margin-right: -20px;
2579 #BMB_bookmarksPopup[side="left"],
2580 #BMB_bookmarksPopup[side="right"] {
2582 margin-bottom: -20px;
2585 /* bookmarking panel */
2587 #editBookmarkPanelStarIcon {
2588 list-style-image: url("chrome://browser/skin/places/starred48.png");
2593 #editBookmarkPanelStarIcon[unstarred] {
2594 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2597 #editBookmarkPanelTitle {
2601 #editBookmarkPanelHeader,
2602 #editBookmarkPanelContent {
2603 margin-bottom: .5em;
2606 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2607 #editBMPanel_folderTree {
2614 border-top: 1px solid #9C9CFF;
2615 border-bottom-left-radius: 5px;
2616 border-bottom-right-radius: 5px;
2620 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2621 -moz-margin-end: 10px;
2622 vertical-align: middle;
2625 .panel-promo-closebutton {
2626 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2627 -moz-margin-end: -3px;
2631 .panel-promo-closebutton:hover {
2632 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2635 .panel-promo-closebutton:hover:active {
2636 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2639 .panel-promo-closebutton > .toolbarbutton-text {
2643 /* ::::: content area ::::: */
2646 background-color: #9C9CFF;
2651 background-color: #000000;
2655 -moz-margin-start: 0;
2664 -moz-padding-start: 0px;
2667 #sidebar-header > .close-icon {
2668 /* padding: 4px 2px;
2671 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2674 #sidebar-header > .close-icon:hover,
2675 #sidebar-header > .close-icon:hover:active {
2676 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2679 #sidebar-splitter:-moz-locale-dir(ltr),
2680 #sidebar:-moz-locale-dir(ltr) {
2681 border-radius: 0 5px 0 0;
2684 #sidebar-splitter:-moz-locale-dir(rtl),
2685 #sidebar:-moz-locale-dir(rtl) {
2686 border-radius: 5px 0 0 0;
2689 .browserContainer > findbar {
2691 background-color: -moz-dialog;
2692 color: -moz-DialogText;
2701 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2704 #TabsToolbar .toolbar-holder {
2705 background-color: #000000; /* correct effect of being an actual toolbar */
2708 #main-window[disablechrome] #TabsToolbar,
2709 #TabsToolbar[tabsontop="false"] {
2710 border-bottom: 1px solid #008484;
2713 /* === BEGIN tabs.inc.css === */
2716 /* --tab-toolbar-navbar-overlap: 1px; */
2717 /* --navbar-tab-toolbar-highlight-overlap: 1px; */
2718 /* --tab-min-height: 31px; */
2721 /* --tab-stroke-background-size: auto 100%; */
2725 .tabs-newtab-button,
2726 #TabsToolbar > #new-tab-button {
2731 padding: 1px 4px 2px;
2734 .tabbrowser-tab:first-of-type {
2735 -moz-margin-start: 2px;
2738 .tabs-newtab-button,
2739 #TabsToolbar > #new-tab-button,
2740 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2741 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2742 border-radius: 8px 8px 0px 0px;
2743 -moz-margin-start: 0;
2746 .tabs-newtab-button:not(:hover),
2747 #TabsToolbar > #new-tab-button:not(:hover),
2748 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2749 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2750 background-color: #C09070;
2753 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2754 .tabbrowser-tab[visuallyselected=true] {
2755 /* position: relative;
2759 .tab-background-middle {
2765 .tab-content[pinned] {
2778 -moz-margin-end: 3px;
2782 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2789 -moz-margin-start: -15px;
2790 margin-inline-end: -1px;
2794 .tab-icon-overlay[crashed] {
2795 list-style-image: url("chrome://browser/skin/tabbrowser/crashed.svg");
2798 .tab-icon-overlay[soundplaying],
2799 .tab-icon-overlay[muted]:not([crashed]) {
2800 border-radius: 10px;
2803 .tab-icon-overlay[soundplaying]:hover,
2804 .tab-icon-overlay[muted]:hover {
2805 background-color: #FFCF00;
2808 .tab-icon-overlay[soundplaying] {
2810 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio");
2813 .tab-icon-overlay[muted]:not([crashed]) {
2814 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-muted");
2817 #TabsToolbar[brighttext] .tab-icon-overlay[soundplaying]:not(:hover) {
2818 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white");
2822 #TabsToolbar[brighttext] .tab-icon-overlay[muted]:not([crashed]):not(:hover) {
2823 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio-small.svg#tab-audio-white-muted");
2826 .tab-throbber[busy] {
2827 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2830 .tab-throbber[progress] {
2831 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2834 @media (min-resolution: 1.1dppx) {
2835 .tab-throbber[busy] {
2836 list-style-image: url("chrome://communicator/skin/brand/throbber-anim-connect.png");
2839 .tab-throbber[progress] {
2840 list-style-image: url("chrome://communicator/skin/brand/throbber-anim.png");
2844 .tab-throbber[pinned],
2845 .tab-icon-image[pinned] {
2846 -moz-margin-start: 2px;
2847 -moz-margin-end: 2px;
2851 /* this needs to add up to the 16px of the icon image */
2853 margin-top: 2px !important;
2854 margin-bottom: 2px !important;
2858 -moz-margin-start: 4px;
2864 .tab-icon-sound[muted] {
2865 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2868 .tab-icon-sound[muted]:hover {
2869 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2872 .tab-icon-sound[muted]:hover:active {
2873 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2876 .tab-icon-sound[soundplaying] {
2877 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab");
2880 .tab-icon-sound[soundplaying]:hover {
2881 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-hover");
2884 .tab-icon-sound[soundplaying]:hover:active {
2885 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-pressed");
2888 .tab-icon-sound[muted] {
2889 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted");
2892 .tab-icon-sound[muted]:hover {
2893 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-hover");
2896 .tab-icon-sound[muted]:hover:active {
2897 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-backgroundTab-muted-pressed");
2900 .tab-icon-sound[visuallyselected=true][soundplaying] {
2901 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
2904 .tab-icon-sound[visuallyselected=true][soundplaying]:hover {
2905 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-hover");
2908 .tab-icon-sound[visuallyselected=true][soundplaying]:hover:active {
2909 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-pressed");
2912 .tab-icon-sound[visuallyselected=true][muted] {
2913 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
2916 .tab-icon-sound[visuallyselected=true][muted]:hover {
2917 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-hover");
2920 .tab-icon-sound[visuallyselected=true][muted]:hover:active {
2921 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-pressed");
2924 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying] {
2925 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white");
2928 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover {
2929 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-hover");
2932 #TabsToolbar[brighttext] .tab-icon-sound[soundplaying]:hover:active {
2933 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-white-pressed");
2936 #TabsToolbar[brighttext] .tab-icon-sound[muted] {
2937 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white");
2940 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover {
2941 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-hover");
2944 #TabsToolbar[brighttext] .tab-icon-sound[muted]:hover:active {
2945 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted-white-pressed");
2954 .tabs-newtab-button {
2955 /* overlap the tab curves */
2958 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2962 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
2963 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2966 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:-moz-locale-dir(rtl),
2967 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:-moz-locale-dir(ltr) {
2970 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]) {
2973 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
2976 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator[collapsed],
2977 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator[collapsed] {
2980 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator,
2981 .tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator {
2984 .tab-background-start[visuallyselected=true]::after,
2985 .tab-background-start[visuallyselected=true]::before,
2986 .tab-background-start,
2987 .tab-background-end,
2988 .tab-background-end[visuallyselected=true]::after,
2989 .tab-background-end[visuallyselected=true]::before {
2992 .tabbrowser-tab:not([visuallyselected=true]),
2993 .tabbrowser-tab:-moz-lwtheme {
2996 /* tabbrowser-tab focus ring */
2997 .tabbrowser-tab:focus {
2998 outline: 1px dotted;
3003 .tabbrowser-tab[visuallyselected="true"] {
3006 /* End selected tab */
3008 /* User Context UI - change tab decoration depending on userContextId.
3009 Defaults to gray for unknown usercontextids. */
3010 .tabbrowser-tab[usercontextid] {
3011 background-image: linear-gradient(to right, transparent 20%, #A09090 30%, #A09090 70%, transparent 80%);
3012 background-size: auto 2px;
3013 background-repeat: no-repeat;
3016 /* Personal User Context */
3017 .tabbrowser-tab[usercontextid="1"] {
3018 background-image: linear-gradient(to right, transparent 20%, #9C9CFF 30%, #9C9CFF 70%, transparent 80%);
3020 /* Work User Context */
3021 .tabbrowser-tab[usercontextid="2"] {
3022 background-image: linear-gradient(to right, transparent 20%, #FF9F00 30%, #FF9F00 70%, transparent 80%);
3024 /* Banking User Context */
3025 .tabbrowser-tab[usercontextid="3"] {
3026 background-image: linear-gradient(to right, transparent 20%, #008484 30%, #008484 70%, transparent 80%);
3028 /* Shopping User Context */
3029 .tabbrowser-tab[usercontextid="4"] {
3030 background-image: linear-gradient(to right, transparent 20%, #E7ADE7 30%, #E7ADE7 70%, transparent 80%);
3033 /* Tab pointer-events */
3036 pointer-events: none;
3039 .tab-background-middle,
3040 .tabs-newtab-button,
3041 .tab-icon-overlay[soundplaying],
3042 .tab-icon-overlay[muted]:not([crashed]),
3045 pointer-events: auto;
3051 .tabbrowser-tab:-moz-any([image], [pinned]) > .tab-stack > .tab-content[attention]:not([visuallyselected="true"]),
3052 .tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([visuallyselected="true"]) {
3054 .tabbrowser-tab:-moz-any([image], [pinned]):-moz-any([attention], [titlechanged]):not([visuallyselected="true"]) {
3055 background-color: #E7ADE7;
3058 .tab-label[attention]:not([visuallyselected="true"]) {
3062 .tabbrowser-tab[pinned][titlechanged]:not([visuallyselected="true"]):hover {
3063 background-color: #3333FF;
3067 /* Tab separators */
3069 .tabbrowser-tab::after,
3070 .tabbrowser-tab::before {
3072 -moz-margin-start: -1px;
3073 background-image: linear-gradient(transparent 5px,
3075 currentColor calc(100% - 4px),
3076 transparent calc(100% - 4px));
3080 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::before,
3081 #TabsToolbar[brighttext] > #tabbrowser-tabs > .tabbrowser-tab::after {
3085 /* Also show separators beside the selected tab when dragging it. */
3087 #tabbrowser-tabs[movingtab] > .tabbrowser-tab[beforeselected]:not([last-visible-tab])::after,
3088 .tabbrowser-tab:not([visuallyselected]):not([afterselected-visible]):not([afterhovered]):not([first-visible-tab]):not(:hover)::before,
3089 #tabbrowser-tabs:not([overflow]) > .tabbrowser-tab[last-visible-tab]:not([visuallyselected]):not([beforehovered]):not(:hover)::after {
3094 /* New tab button */
3096 .tabs-newtab-button {
3098 /* width: calc(36px + var(--tab-curve-width)); */
3101 /* === END tabs.inc.css === */
3105 * Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
3106 * of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
3107 * the titlebar. We don't need this in fullscreen since window dragging is not an issue there.
3109 #main-window[tabsintitlebar][sizemode=normal] #toolbar-menubar[autohide="true"][inactive] + #TabsToolbar .tab-background-middle:not([visuallyselected=true]) {
3110 /* clip-path: url(chrome://browser/content/browser.xul#tab-hover-clip-path);*/
3113 /* Tab DnD indicator */
3114 .tab-drop-indicator {
3115 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
3116 margin-bottom: -11px;
3119 /* Tab close button */
3121 list-style-image: url("chrome://global/skin/icons/close-button.gif");
3124 .tab-close-button:hover,
3125 .tab-close-button:hover[selected="true"] {
3126 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3129 .tab-close-button:hover:active,
3130 .tab-close-button:hover:active[selected="true"] {
3131 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
3134 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
3136 .tabbrowser-arrowscrollbox > .scrollbutton-up,
3137 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3141 background-origin: border-box;
3144 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3145 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3146 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
3147 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
3150 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
3151 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
3154 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
3155 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
3156 /* transform: scaleX(-1);*/
3159 .tabbrowser-arrowscrollbox > .scrollbutton-down {
3160 transition: 1s background-color ease-out;
3163 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
3164 background-color: #008484;
3167 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
3168 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
3169 /* border-width: 0 2px 0 0;
3170 border-style: solid;
3171 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
3174 .tabs-newtab-button > .toolbarbutton-icon {
3176 margin-bottom: -1px;
3179 .tabs-newtab-button,
3180 #TabsToolbar > #new-tab-button,
3181 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
3182 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
3183 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.svg");
3184 -moz-image-region: auto;
3187 .tabs-newtab-button,
3188 .tabs-newtab-button:hover,
3189 #TabsToolbar > #new-tab-button,
3190 #TabsToolbar > #new-tab-button:hover {
3193 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3194 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3195 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3196 .tabs-newtab-button:-moz-lwtheme-brighttext,
3197 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
3198 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
3201 #TabsToolbar > #new-tab-button {
3206 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
3209 #alltabs-button:hover,
3210 #alltabs-button:hover:active,
3211 #alltabs-button[open="true"] {
3212 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
3215 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
3216 #alltabs-button:-moz-lwtheme-brighttext {
3219 #alltabs-button > .toolbarbutton-icon {
3223 #alltabs-button > .toolbarbutton-menu-dropmarker {
3227 /* All tabs menupopup */
3228 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
3229 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
3230 -moz-image-region: auto;
3233 .alltabs-item[selected="true"] {
3237 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3238 list-style-image: url("chrome://global/skin/icons/loading.png");
3241 @media (min-resolution: 1.1dppx) {
3242 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
3243 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3247 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
3248 background-color: #402800;
3251 .alltabs-endimage[muted] {
3252 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio-muted");
3255 .alltabs-endimage[soundplaying] {
3256 list-style-image: url("chrome://browser/skin/tabbrowser/tab-audio.svg#tab-audio");
3259 toolbarbutton.chevron {
3260 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
3263 toolbarbutton.chevron:hover {
3264 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
3267 toolbar[brighttext] toolbarbutton.chevron {
3268 list-style-image: url("chrome://global/skin/toolbar/chevron-inverted.png") !important;
3271 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
3272 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
3273 transform: scaleX(-1);
3276 toolbarbutton.chevron > .toolbarbutton-text,
3277 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
3281 toolbarbutton.chevron > .toolbarbutton-icon {
3285 #sidebar-throbber[loading="true"] {
3286 list-style-image: url("chrome://global/skin/icons/loading.png");
3287 -moz-margin-end: 4px;
3290 @media (min-resolution: 1.1dppx) {
3291 #sidebar-throbber[loading="true"] {
3292 list-style-image: url("chrome://global/skin/icons/loading@2x.png");
3297 /* Bookmarks toolbar */
3298 #PlacesToolbarDropIndicator {
3299 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
3302 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
3303 background-color: #008484 !important;
3304 color: #FFCF00 !important;
3307 /* rules for menupopup drop indicators */
3308 .menupopup-drop-indicator-bar {
3310 /* these two margins must together compensate the indicator's height */
3312 margin-bottom: -1px;
3315 .menupopup-drop-indicator {
3316 list-style-image: none;
3318 -moz-margin-end: -4em;
3319 background-color: #008484;
3322 /* === BEGIN notification-icons.inc.css === */
3324 .popup-notification-icon {
3327 -moz-margin-end: 10px;
3330 .popup-notification-icon[popupid="geolocation"] {
3331 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
3334 .popup-notification-icon[popupid="xpinstall-disabled"],
3335 .popup-notification-icon[popupid="addon-install-blocked"],
3336 .popup-notification-icon[popupid="addon-install-origin-blocked"] {
3337 list-style-image: url(chrome://browser/skin/addons/addon-install-blocked.svg);
3340 .popup-notification-icon[popupid="addon-progress"] {
3341 list-style-image: url(chrome://browser/skin/addons/addon-install-downloading.svg);
3344 .popup-notification-icon[popupid="addon-install-failed"] {
3345 list-style-image: url(chrome://browser/skin/addons/addon-install-error.svg);
3348 .popup-notification-icon[popupid="addon-install-confirmation"] {
3349 list-style-image: url(chrome://browser/skin/addons/addon-install-confirm.svg);
3352 #addon-install-confirmation-notification[warning] .popup-notification-icon[popupid="addon-install-confirmation"] {
3353 list-style-image: url(chrome://browser/skin/addons/addon-install-warning.svg);
3356 .popup-notification-icon[popupid="addon-install-complete"] {
3357 list-style-image: url(chrome://browser/skin/addons/addon-install-installed.svg);
3360 .popup-notification-icon[popupid="addon-install-restart"] {
3361 list-style-image: url(chrome://browser/skin/addons/addon-install-restart.svg);
3364 .popup-notification-icon[popupid="click-to-play-plugins"] {
3365 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
3368 .popup-notification-icon[popupid="web-notifications"] {
3369 list-style-image: url("chrome://browser/skin/web-notifications-icon.svg");
3372 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
3373 .popup-notification-icon[popupid*="offline-app-requested"],
3374 .popup-notification-icon[popupid="offline-app-usage"] {
3375 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
3378 .popup-notification-icon[popupid="password"] {
3379 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
3382 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3383 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3384 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
3387 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3388 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3389 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
3392 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3393 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3394 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64.png);
3397 .popup-notification-icon[popupid="pointerLock"] {
3398 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
3401 /* Notification icon box */
3402 #notification-popup .panel-promo-box {
3403 /* margin: 10px -10px -10px; */
3406 #notification-popup-box {
3408 background-color: #000000;
3409 background-clip: padding-box;
3412 border-radius: 3px 0 0 3px;
3413 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
3414 -moz-margin-end: -8px;
3415 border-right-width: 8px;
3418 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[disabled] + #urlbar > #notification-popup-box {
3419 /* padding-left: 7px; */
3422 /* This changes the direction of the main notification box on the url bar. */
3423 #notification-popup-box:-moz-locale-dir(rtl),
3424 /* This adds a second flip for the notification anchors, as they don't switch direction
3426 .notification-anchor-icon:-moz-locale-dir(rtl) {
3427 transform: scaleX(-1);
3430 /* For the anchor icons in the chat window, we don't have the notification popup box,
3431 so we need to cancel the RTL transform. */
3432 .notification-anchor-icon.chat-toolbarbutton:-moz-locale-dir(rtl) {
3436 .notification-anchor-icon {
3437 list-style-image: url("chrome://global/skin/icons/information-16.png");
3444 .notification-anchor-icon:-moz-focusring {
3445 outline: 1px dotted #008484;
3448 .geo-notification-icon,
3449 #geo-notification-icon {
3450 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
3453 #addons-notification-icon {
3454 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#default);
3457 #addons-notification-icon:hover {
3458 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#hover);
3461 #addons-notification-icon:hover:active {
3462 list-style-image: url(chrome://browser/skin/addons/addon-install-anchor.svg#active);
3465 .indexedDB-notification-icon,
3466 #indexedDB-notification-icon {
3467 list-style-image: url("chrome://global/skin/icons/question-16.png");
3470 #password-notification-icon {
3471 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3474 #login-fill-notification-icon {
3475 /* Temporary icon until the capture and fill doorhangers are unified. */
3476 list-style-image: url(chrome://mozapps/skin/passwordmgr/key-16.png);
3477 transform: scaleX(-1);
3480 #plugins-notification-icon {
3481 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3484 #plugins-notification-icon.plugin-hidden {
3485 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3488 #plugins-notification-icon.plugin-blocked {
3489 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3492 #plugins-notification-icon {
3493 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
3496 #plugins-notification-icon:hover {
3497 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
3500 #notification-popup-box[hidden] {
3501 /* Override display:none to make the pluginBlockedNotification animation work
3502 when showing the notification repeatedly. */
3504 visibility: collapse;
3507 #plugins-notification-icon.plugin-blocked[showing] {
3508 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3511 @keyframes pluginBlockedNotification {
3520 .webRTC-shareDevices-notification-icon,
3521 #webRTC-shareDevices-notification-icon {
3522 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3525 .webRTC-sharingDevices-notification-icon,
3526 #webRTC-sharingDevices-notification-icon {
3527 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3530 .webRTC-shareMicrophone-notification-icon,
3531 #webRTC-shareMicrophone-notification-icon {
3532 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3535 .webRTC-sharingMicrophone-notification-icon,
3536 #webRTC-sharingMicrophone-notification-icon {
3537 list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3540 .webRTC-shareScreen-notification-icon,
3541 #webRTC-shareScreen-notification-icon {
3542 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16.png);
3545 .webRTC-sharingScreen-notification-icon,
3546 #webRTC-sharingScreen-notification-icon {
3547 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16.png);
3550 .web-notifications-notification-icon,
3551 #web-notifications-notification-icon {
3552 list-style-image: url("chrome://browser/skin/web-notifications-tray.svg");
3553 -moz-image-region: rect(0, 16px, 16px, 0);
3556 .web-notifications-notification-icon:hover,
3557 #web-notifications-notification-icon:hover {
3558 -moz-image-region: rect(0, 32px, 16px, 16px);
3561 .web-notifications-notification-icon:hover:active,
3562 #web-notifications-notification-icon:hover:active {
3563 -moz-image-region: rect(0, 48px, 16px, 32px);
3566 #pointerLock-notification-icon {
3567 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3570 .translate-notification-icon,
3571 #translate-notification-icon {
3572 list-style-image: url("chrome://browser/skin/translation-16.png");
3573 -moz-image-region: rect(0px, 16px, 16px, 0px);
3576 .translated-notification-icon,
3577 #translated-notification-icon {
3578 list-style-image: url("chrome://browser/skin/translation-16.png");
3579 -moz-image-region: rect(0px, 32px, 16px, 16px);
3582 .popup-notification-icon[popupid="servicesInstall"] {
3583 list-style-image: url("chrome://browser/skin/social/services-64.png");
3585 #servicesInstall-notification-icon {
3586 list-style-image: url("chrome://browser/skin/social/services-16.png");
3589 /* EME notifications */
3591 .popup-notification-icon[popupid="drmContentPlaying"],
3592 #eme-notification-icon {
3593 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
3596 #eme-notification-icon:hover:active {
3597 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains-pressed");
3600 #eme-notification-icon[firstplay=true] {
3601 animation: emeTeachingMoment 0.2s linear 0s 5 normal;
3604 @keyframes emeTeachingMoment {
3605 0% {transform: translateX(0); }
3606 25% {transform: translateX(3px) }
3607 75% {transform: translateX(-3px) }
3608 100% { transform: translateX(0); }
3611 /* HiDPI notification icons */
3612 @media (min-resolution: 1.1dppx) {
3613 /* #notification-popup-box {
3614 border-image: url("chrome://browser/skin/urlbar-arrow@2x.png") 0 16 0 0 fill;
3617 .notification-anchor-icon {
3618 list-style-image: url(chrome://global/skin/icons/information-32.png);
3621 .webRTC-shareDevices-notification-icon,
3622 #webRTC-shareDevices-notification-icon {
3623 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-16@2x.png);
3626 .webRTC-sharingDevices-notification-icon,
3627 #webRTC-sharingDevices-notification-icon {
3628 list-style-image: url(chrome://browser/skin/webRTC-sharingDevice-16@2x.png);
3631 .webRTC-shareMicrophone-notification-icon,
3632 #webRTC-shareMicrophone-notification-icon {
3633 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-16@2x.png);
3636 .webRTC-sharingMicrophone-notification-icon,
3637 #webRTC-sharingMicrophone-notification-icon {
3638 list-style-image: url(chrome://browser/skin/webRTC-sharingMicrophone-16@2x.png);
3641 .webRTC-shareScreen-notification-icon,
3642 #webRTC-shareScreen-notification-icon {
3643 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-16@2x.png);
3646 .webRTC-sharingScreen-notification-icon,
3647 #webRTC-sharingScreen-notification-icon {
3648 list-style-image: url(chrome://browser/skin/webRTC-sharingScreen-16@2x.png);
3651 .popup-notification-icon[popupid="webRTC-sharingDevices"],
3652 .popup-notification-icon[popupid="webRTC-shareDevices"] {
3653 list-style-image: url(chrome://browser/skin/webRTC-shareDevice-64@2x.png);
3656 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
3657 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
3658 list-style-image: url(chrome://browser/skin/webRTC-shareMicrophone-64@2x.png);
3661 .popup-notification-icon[popupid="webRTC-sharingScreen"],
3662 .popup-notification-icon[popupid="webRTC-shareScreen"] {
3663 list-style-image: url(chrome://browser/skin/webRTC-shareScreen-64@2x.png);
3667 /* === END notification-icons.inc.css === */
3669 .popup-notification-body[popupid="addon-progress"],
3670 .popup-notification-body[popupid="addon-install-confirmation"] {
3675 /* Translation infobar */
3677 /* === BEGIN infobar.inc.css === */
3679 notification[value="translation"] .messageImage {
3680 list-style-image: url("chrome://browser/skin/translation-16.png");
3681 -moz-image-region: rect(0, 32px, 16px, 16px);
3684 @media (min-resolution: 1.25dppx) {
3685 notification[value="translation"] .messageImage {
3686 list-style-image: url("chrome://browser/skin/translation-16@2x.png");
3687 -moz-image-region: rect(0, 64px, 32px, 32px);
3691 notification[value="translation"][state="translating"] .messageImage {
3692 list-style-image: url("chrome://browser/skin/translating-16.png");
3693 -moz-image-region: auto;
3696 @media (min-resolution: 1.25dppx) {
3697 notification[value="translation"][state="translating"] .messageImage {
3698 list-style-image: url("chrome://browser/skin/translating-16@2x.png");
3702 notification[value="translation"] hbox[anonid="details"] {
3706 notification[value="translation"] button,
3707 notification[value="translation"] menulist {
3711 notification[value="translation"] menulist > .menulist-dropmarker {
3714 .translation-menupopup arrowscrollbox {
3718 .translation-attribution {
3720 -moz-box-align: end;
3724 .translation-attribution > label {
3728 .translation-attribution > image {
3732 .translation-welcome-panel {
3736 .translation-welcome-logo {
3739 list-style-image: url(chrome://browser/skin/translation-16@2x.png);
3740 -moz-image-region: rect(0, 64px, 32px, 32px);
3743 .translation-welcome-content {
3744 -moz-margin-start: 16px;
3747 .translation-welcome-headline {
3752 .translation-welcome-body {
3757 /* === END infobar.inc.css === */
3759 notification[value="translation"] {
3763 .translation-menupopup {
3764 -moz-appearance: none;
3767 /* Bookmarks roots menu-items */
3768 #subscribeToPageMenuitem:not([disabled]),
3769 #subscribeToPageMenupopup {
3770 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3773 #bookmarksToolbarFolderMenu,
3774 #BMB_bookmarksToolbar,
3775 #panelMenu_bookmarksToolbar {
3776 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3777 -moz-image-region: auto;
3780 #BMB_unsortedBookmarks,
3781 #panelMenu_unsortedBookmarks {
3782 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3783 -moz-image-region: auto;
3786 /* ::::: Keyboard UI Panel ::::: */
3791 border-radius: 20px;
3794 .KUI-panel[level="top"] {
3795 /*background-color: rgba(27%,27%,27%,.65);*/
3801 padding: 20px 10px 10px;
3805 .ctrlTab-favicon[src] {
3806 background-color: #000000;
3812 .ctrlTab-preview-inner > .tabPreview-canvas {
3815 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3819 .ctrlTab-preview-inner {
3820 padding-bottom: 10px;
3823 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3825 background-color: #000000;
3826 border-radius: .5em;
3829 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3831 background-color: #000000;
3834 border: 2px solid #9C9CFF;
3835 border-radius: .5em;
3838 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3839 margin: -10px -10px 0;
3851 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3859 .sync-panel-button-box {
3863 #sync-start-panel-title {
3869 #sync-start-panel-subtitle {
3875 .statuspanel-label {
3878 background: #404000;
3879 border: 1px none #9C9CFF;
3880 border-top-style: solid;
3885 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3886 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3887 border-right-style: solid;
3888 border-top-right-radius: .3em;
3892 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3893 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3894 border-left-style: solid;
3895 border-top-left-radius: .3em;
3899 /* HACK to abolish devily color on main content */
3902 background-color: transparent !important;
3905 /* === BEGIN fullscreen/warning.inc.css === */
3907 html|*#fullscreen-warning {
3908 align-items: center;
3909 background: rgba(0, 0, 0, 0.9);
3910 border: 2px solid #A09090;
3911 box-shadow: 0px 0px 5px 2px rgba(0, 0, 0, 0.5);
3914 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3917 html|*#fullscreen-warning::before {
3919 width: 24px; height: 24px;
3922 html|*#fullscreen-warning.verifiedIdentity::before,
3923 html|*#fullscreen-warning.verifiedDomain::before {
3924 content: url("chrome://browser/skin/fullscreen/secure.svg");
3927 html|*#fullscreen-warning.unknownIdentity::before {
3928 content: url("chrome://browser/skin/fullscreen/insecure.svg");
3931 html|*#fullscreen-domain-text,
3932 html|*#fullscreen-generic-text {
3934 font-weight: lighter;
3939 html|*#fullscreen-domain {
3944 html|*#fullscreen-exit-button {
3946 font-family: "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3948 font-weight: lighter;
3950 box-sizing: content-box;
3952 border-radius: 300px;
3954 background-color: #C09070;
3958 /* === END fullscreen/warning.inc.css === */
3960 /* === BEGIN commandline.inc.css === */
3962 /* NOTE: THESE NEED TO STAY IN SYNC WITH LIGHT-THEME.CSS AND DARK-THEME.CSS.
3963 We are copy/pasting variables from light-theme and dark-theme,
3964 since they aren't loaded in this context (within browser.css). */
3965 :root #developer-toolbar {
3966 --gcli-background-color: #000000; /* --theme-toolbar-background */
3967 --gcli-input-background: rgba(0, 0, 0, .75); /* --theme-tab-toolbar-background */
3968 --gcli-input-focused-background: #000000; /* --theme-sidebar-background */
3969 --gcli-input-color: #FF9F00; /* --theme-body-color-alt */
3970 --gcli-border-color: #9C9CFF; /* --theme-splitter-color */
3971 --selection-background: #008484; /* --theme-selection-background */
3972 --selection-color: #000000; /* --theme-selection-color */
3975 /* Developer toolbar */
3977 #developer-toolbar {
3978 border-top: 3px solid var(--gcli-background-color);
3979 border-bottom: none;
3982 #developer-toolbar .toolbar-holder {
3983 background-color: #8050B0;
3987 #developer-toolbar .toolbar-holder {
3988 background-color: #8050B0;
3992 #developer-toolbar .toolbar-startcap,
3993 #developer-toolbar .toolbar-endcap{
3994 background-color: #6000CF;
3997 #developer-toolbar {
3999 min-height: 32px; */
4002 #developer-toolbar > toolbarbutton {
4004 background-color: transparent;
4010 .developer-toolbar-button > image {
4011 /* margin: auto 10px; */
4014 #developer-toolbar-toolbox-button > label {
4018 .developer-toolbar-button > .toolbarbutton-icon {
4023 #developer-toolbar-toolbox-button {
4024 list-style-image: url("chrome://devtools/skin/images/toggle-tools.png");
4025 -moz-image-region: rect(0px, 16px, 16px, 0px);
4028 #developer-toolbar-toolbox-button > label {
4032 #developer-toolbar-toolbox-button:hover,
4033 #developer-toolbar-toolbox-button:hover:active,
4034 #developer-toolbar-toolbox-button[checked=true] {
4035 -moz-image-region: rect(0px, 32px, 16px, 16px);
4038 @media (min-resolution: 2dppx) {
4039 #developer-toolbar-toolbox-button {
4040 list-style-image: url("chrome://devtools/skin/images/toggle-tools@2x.png");
4041 -moz-image-region: rect(0px, 32px, 32px, 0px);
4044 #developer-toolbar-toolbox-button:hover,
4045 #developer-toolbar-toolbox-button:hover:active,
4046 #developer-toolbar-toolbox-button[checked=true] {
4047 -moz-image-region: rect(0px, 64px, 32px, 32px);
4053 html|*#gcli-tooltip-frame,
4054 html|*#gcli-output-frame {
4057 background-color: transparent;
4063 background-color: transparent;
4066 .gclitoolbar-input-node,
4067 .gclitoolbar-complete-node {
4069 -moz-box-align: center;
4073 background-color: transparent;
4076 .gclitoolbar-input-node {
4077 /* line-height: 32px;
4078 outline-style: none; */
4079 background-repeat: no-repeat;
4080 background-color: var(--gcli-input-background);
4083 .gclitoolbar-input-node[focused="true"] {
4084 background-color: var(--gcli-input-focused-background);
4087 .gclitoolbar-input-node::before {
4089 display: inline-block;
4090 -moz-box-ordinal-group: 0;
4094 background-image: url("chrome://devtools/skin/images/commandline-icon.png");
4095 background-position: 0 center;
4096 background-size: 32px 16px;
4099 .gclitoolbar-input-node[focused="true"]::before {
4100 background-position: -16px center;
4103 @media (min-resolution: 2dppx) {
4104 .gclitoolbar-input-node::before {
4105 background-image: url("chrome://devtools/skin/images/commandline-icon@2x.png");
4109 .gclitoolbar-input-node:not([focused="true"]) {
4110 border-color: transparent;
4113 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
4114 background-color: var(--selection-background);
4115 color: var(--selection-color);
4118 .gclitoolbar-complete-node {
4120 background-color: transparent;
4123 pointer-events: none;
4126 .gcli-in-incomplete,
4130 .gcli-in-closebrace,
4137 .gcli-in-incomplete {
4138 border-bottom: 2px dotted #8050B0;
4142 border-bottom: 2px dotted #FF0000;
4153 .gcli-in-closebrace {
4157 /* === END commandline.inc.css === */
4159 /* === BEGIN responsivedesign.inc.css === */
4161 /* Responsive Mode */
4163 .browserContainer[responsivemode] {
4164 background-color: #221500;
4165 padding: 0 20px 20px 20px;
4168 .browserStack[responsivemode] {
4169 box-shadow: 0 0 7px #9C9CFF;
4172 .devtools-responsiveui-toolbar {
4173 background: transparent;
4174 /* text color is textColor from dark theme, since no theme is applied to
4175 * the responsive toolbar.
4181 border-bottom-width: 0;
4184 .devtools-responsiveui-textinput {
4185 /* -moz-appearance: none;
4188 border: 1px solid #111;
4195 .devtools-responsiveui-textinput[attention] {
4196 /* border-color: #38ace6;
4197 background: rgba(56,172,230,0.4);*/
4200 .devtools-responsiveui-menulist,
4201 .devtools-responsiveui-toolbarbutton {
4202 -moz-box-align: center;
4204 /* min-height: 22px;*/
4205 /* margin: 0 3px; */
4208 .devtools-responsiveui-menulist .menulist-editable-box {
4209 background-color: transparent;
4212 .devtools-responsiveui-menulist html|*.menulist-editable-input {
4217 .devtools-responsiveui-menulist html|*.menulist-editable-input::-moz-selection {
4218 /* background: hsla(212,7%,57%,.35);*/
4221 .devtools-responsiveui-toolbarbutton > .toolbarbutton-icon {
4226 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
4227 -moz-box-orient: horizontal;
4230 .devtools-responsiveui-menulist:-moz-focusring,
4231 .devtools-responsiveui-toolbarbutton:-moz-focusring {
4232 /* outline: 1px dotted hsla(210,30%,85%,0.7);
4233 outline-offset: -4px;*/
4236 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
4240 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
4241 /* border-color: hsla(210,8%,5%,.6);
4242 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
4243 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); */
4246 .devtools-responsiveui-menulist[open=true],
4247 .devtools-responsiveui-toolbarbutton[open=true],
4248 .devtools-responsiveui-toolbarbutton[checked=true] {
4249 /* border-color: hsla(210,8%,5%,.6) !important;
4250 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
4251 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); */
4254 .devtools-responsiveui-toolbarbutton[checked=true] {
4255 /* color: hsl(208,100%,60%); */
4258 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
4259 /* background-color: transparent !important;*/
4262 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
4263 /* background-color: hsla(210,8%,5%,.2) !important;*/
4266 .devtools-responsiveui-menulist > .menulist-label-box {
4270 .devtools-responsiveui-menulist > .menulist-dropmarker {
4271 /* display: -moz-box;
4272 background-color: transparent;
4273 list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4274 -moz-box-align: center;
4279 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
4282 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
4283 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
4286 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
4287 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
4290 .devtools-responsiveui-toolbarbutton[type=menu-button] {
4291 /* padding: 0 1px;*/
4292 -moz-box-align: stretch;
4295 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
4296 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
4297 /* list-style-image: url("chrome://devtools/skin/dropmarker.svg");
4298 -moz-box-align: center;
4302 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
4303 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
4307 .devtools-responsiveui-close {
4308 list-style-image: url("chrome://devtools/skin/close.svg");
4311 .devtools-responsiveui-close:hover {
4312 filter: url(images/filters.svg#checked-icon-state);
4315 .devtools-responsiveui-rotate {
4316 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate.png");
4317 -moz-image-region: rect(0px,16px,16px,0px);
4320 .devtools-responsiveui-rotate:hover {
4321 -moz-image-region: rect(0px,32px,16px,16px);
4324 @media (min-resolution: 2dppx) {
4325 .devtools-responsiveui-rotate {
4326 list-style-image: url("chrome://devtools/skin/images/responsiveui-rotate@2x.png");
4329 .devtools-responsiveui-rotate:hover {
4330 -moz-image-region: rect(0px,64px,32px,32px);
4334 .devtools-responsiveui-touch {
4335 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch.png");
4336 -moz-image-region: rect(0px,16px,16px,0px);
4339 .devtools-responsiveui-touch:hover,
4340 .devtools-responsiveui-touch[checked],
4341 .devtools-responsiveui-touch[checked]:hover {
4342 -moz-image-region: rect(0px,32px,16px,16px);
4345 @media (min-resolution: 2dppx) {
4346 .devtools-responsiveui-touch {
4347 list-style-image: url("chrome://devtools/skin/images/responsiveui-touch@2x.png");
4348 -moz-image-region: rect(0px,32px,32px,0px);
4351 .devtools-responsiveui-touch:hover,
4352 .devtools-responsiveui-touch[checked],
4353 .devtools-responsiveui-touch[checked]:hover {
4354 -moz-image-region: rect(0px,64px,32px,32px);
4358 .devtools-responsiveui-screenshot {
4359 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot.png");
4360 -moz-image-region: rect(0px,16px,16px,0px);
4363 .devtools-responsiveui-screenshot:hover {
4364 -moz-image-region: rect(0px,32px,16px,16px);
4367 @media (min-resolution: 2dppx) {
4368 .devtools-responsiveui-screenshot {
4369 list-style-image: url("chrome://devtools/skin/images/responsiveui-screenshot@2x.png");
4372 .devtools-responsiveui-screenshot:hover {
4373 -moz-image-region: rect(0px,64px,32px,32px);
4377 .devtools-responsiveui-resizebarV {
4381 transform: translate(12px, -12px);
4382 background-size: cover;
4383 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer.png");
4386 .devtools-responsiveui-resizebarH {
4390 transform: translate(-12px, 12px);
4391 background-size: cover;
4392 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer.png");
4395 .devtools-responsiveui-resizehandle {
4399 transform: translate(12px, 12px);
4400 background-size: cover;
4401 background-image: url("chrome://devtools/skin/images/responsive-se-resizer.png");
4404 /* FxOS custom mode with additional buttons and phone look'n feel */
4406 /* Hide devtools manual resizer */
4407 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizehandle,
4408 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarH,
4409 .browserStack[responsivemode].fxos-mode .devtools-responsiveui-resizebarV {
4413 /* Gives responsive mode a phone look'n feel */
4414 .browserStack[responsivemode].fxos-mode {
4415 padding: 60px 15px 0;
4417 border-radius: 25px / 20px;
4418 border-bottom-left-radius: 0;
4419 border-bottom-right-radius: 0;
4420 border: 1px solid #FFFFFF;
4421 border-bottom-width: 0;
4423 background-color: #353535;
4425 box-shadow: 0 3px 0.7px 1px #777777, 0 5px rgba(0, 0, 0, 0.4) inset;
4427 background-image: linear-gradient(to right, #111 11%, #333 56%);
4431 .devtools-responsiveui-hardware-buttons {
4432 -moz-appearance: none;
4435 border: 1px solid #FFFFFF;
4436 border-bottom-left-radius: 25px;
4437 border-bottom-right-radius: 25px;
4438 border-top-width: 0;
4440 box-shadow: 0 3px 0.7px 1px #777777, 0 -7px rgba(0, 0, 0, 0.4) inset;
4442 background-image: linear-gradient(to right, #111 11%, #333 56%);
4445 .devtools-responsiveui-home-button {
4446 -moz-user-focus: ignore;
4449 list-style-image: url("chrome://devtools/skin/images/responsiveui-home.png");
4452 .devtools-responsiveui-sleep-button {
4453 -moz-user-focus: ignore;
4454 -moz-appearance: none;
4455 /* compensate browserStack top padding */
4463 border: 1px solid #444;
4464 border-top-right-radius: 12px;
4465 border-top-left-radius: 12px;
4466 border-bottom-color: transparent;
4468 background-image: linear-gradient(to top, #111 11%, #333 56%);
4471 .devtools-responsiveui-sleep-button:hover:active {
4472 background-image: linear-gradient(to top, #aaa 11%, #ddd 56%);
4475 .devtools-responsiveui-volume-buttons {
4479 .devtools-responsiveui-volume-up-button,
4480 .devtools-responsiveui-volume-down-button {
4481 -moz-user-focus: ignore;
4482 -moz-appearance: none;
4483 border: 1px solid red;
4487 border: 1px solid #444;
4488 border-right-color: transparent;
4490 background-image: linear-gradient(to right, #111 11%, #333 56%);
4493 .devtools-responsiveui-volume-up-button:hover:active,
4494 .devtools-responsiveui-volume-down-button:hover:active {
4495 background-image: linear-gradient(to right, #aaa 11%, #ddd 56%);
4498 .devtools-responsiveui-volume-up-button {
4499 border-top-left-radius: 12px;
4502 .devtools-responsiveui-volume-down-button {
4503 border-bottom-left-radius: 12px;
4506 @media (min-resolution: 2dppx) {
4507 .devtools-responsiveui-resizebarV {
4508 background-image: url("chrome://devtools/skin/images/responsive-vertical-resizer@2x.png");
4511 .devtools-responsiveui-resizebarH {
4512 background-image: url("chrome://devtools/skin/images/responsive-horizontal-resizer@2x.png");
4515 .devtools-responsiveui-resizehandle {
4516 background-image: url("chrome://devtools/skin/images/responsive-se-resizer@2x.png");
4520 /* === END responsivedesign.inc.css === */
4522 /* === including indicator.css is done at the start of the file === */
4526 #developer-toolbar-toolbox-button[error-count]:before {
4530 background-color: #FF0000;
4532 -moz-margin-end: 5px;
4535 /* Social toolbar item */
4537 #social-notification-icon-mentions {
4538 background-color: #000000;
4540 -moz-margin-start: 2px;
4543 #social-notification-icon-mentions:hover {
4544 background-color: #FFCF00;
4547 #social-notification-icon-mentions[open="true"] {
4548 background-color: #FF9F00;
4551 #social-sidebar-splitter {
4555 #socialActivatedNotification .popup-notification-button-container {
4559 .social-activation-icon {
4566 #social-activation-message {
4570 #social-activation-message > label {
4574 /* social toolbar provider menu */
4575 .social-statusarea-popup {
4578 margin-right: -12px;
4581 .social-statusarea-user {
4582 border-bottom: 1px solid #9C9CFF;
4583 background-color: #000000;
4589 .social-statusarea-user-portrait {
4596 .social-statusarea-loggedInStatus {
4597 background: transparent;
4602 list-style-image: none;
4605 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
4606 text-decoration: underline;
4609 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
4613 .social-panel-frame {
4614 border-radius: inherit;
4617 /* === BEGIN chat.inc.css === */
4619 #social-sidebar-header {
4623 #manage-share-providers,
4624 #social-sidebar-button {
4625 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4626 -moz-image-region: rect(0, 468px, 18px, 450px);
4629 #social-sidebar-button {
4630 -moz-appearance: none;
4635 #manage-share-providers > .toolbarbutton-icon,
4636 #social-sidebar-button > .toolbarbutton-icon {
4640 #manage-share-providers:hover,
4641 #manage-share-providers:hover:active,
4642 #social-sidebar-button:hover,
4643 #social-sidebar-button:hover:active {
4644 -moz-image-region: rect(18px, 468px, 36px, 450px);
4646 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
4650 #social-sidebar-button[loading="true"] {
4651 list-style-image: url("chrome://global/skin/icons/loading.png");
4654 #social-sidebar-favico {
4667 .chat-toolbarbutton {
4668 -moz-appearance: none;
4675 .chat-toolbarbutton > .toolbarbutton-text {
4679 .chat-toolbarbutton > .toolbarbutton-icon {
4684 .chat-close-button {
4685 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close");
4688 .chat-close-button:hover {
4689 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-hover");
4692 .chat-close-button:hover:active {
4693 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#close-active");
4696 .chat-minimize-button {
4697 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize");
4700 .chat-minimize-button:hover {
4701 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-hover");
4704 .chat-minimize-button:hover:active {
4705 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#minimize-active");
4709 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand");
4710 transform: rotate(180deg);
4713 .chat-swap-button:hover {
4714 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-hover");
4717 .chat-swap-button:hover:active {
4718 list-style-image: url("chrome://browser/skin/social/chat-icons.svg#expand-active");
4721 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
4732 background-color: #9C9CFF;
4739 border: 1px solid #008484;
4741 border-top-left-radius: 4px;
4742 border-top-right-radius: 4px;
4744 background-color: #A09090;
4747 .chat-titlebar[selected] {
4748 background-color: #008484;
4751 .chat-titlebar > .notification-anchor-icon {
4756 .chat-titlebar[minimized="true"] {
4757 border-bottom: none;
4760 .chat-titlebar[selected] {
4761 background-color: #008484;
4764 .chat-titlebar[activity] {
4765 background-color: #E7ADE7;
4775 list-style-image: url("chrome://browser/skin/social/services-16.png");
4776 background-color: #000000;
4782 border-top: 1px solid #008484;
4783 -moz-border-end: 1px solid #008484;
4786 @media (min-resolution: 2dppx) {
4788 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4792 .chatbar-button:hover {
4793 background-color: #FFCF00;
4795 .chatbar-button[open="true"] {
4796 background-color: #FF9F00;
4799 .chatbar-button[activity]:not([open]) {
4800 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%);
4803 .chatbar-button > .toolbarbutton-icon {
4807 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4814 .chatbar-button > .toolbarbutton-icon {
4818 .chatbar-button:hover > .toolbarbutton-icon,
4819 .chatbar-button[open="true"] > .toolbarbutton-icon {
4823 .chatbar-button:hover,
4824 .chatbar-button[open="true"] {
4827 .chatbar-button > .toolbarbutton-text,
4828 .chatbar-button > .toolbarbutton-menu-dropmarker {
4832 .chatbar-button[activity]:not([open="true"]) {
4833 background-color: #E7ADE7;
4836 .chatbar-button > menupopup > menuitem[activity] {
4841 background: transparent;
4846 -moz-margin-end: 20px;
4850 -moz-margin-start: 4px;
4851 background-color: transparent;
4855 /* Apply the same border-radius as the .chat-titlebar to make the box-shadow
4857 /* border-top-left-radius: 4px;
4858 border-top-right-radius: 4px;*/
4859 /* Offset the chatbox the same amount as the box-shadows' spread, to make it
4861 /* -moz-margin-end: 5px;*/
4864 chatbox[minimized="true"] {
4870 -moz-margin-start: 0px;
4876 /* === END chat.inc.css === */
4878 /* === BEGIN plugin-doorhanger.inc.css === */
4881 * Plugin Doorhanger Styles
4884 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4885 padding: 6px 1px 2px;
4888 .click-to-play-plugins-notification-center-box {
4891 .plugin-popupnotification-centeritem:nth-child(odd) {
4892 /* background-color: rgba(0,0,0,0.1);*/
4895 .center-item-label {
4897 text-overflow: ellipsis;
4900 .center-item-warning-icon {
4901 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4902 background-repeat: no-repeat;
4905 -moz-margin-start: 6px;
4908 .click-to-play-plugins-notification-button-container {
4911 .click-to-play-popup-button {
4915 .click-to-play-plugins-notification-description-box {
4919 padding-bottom: 3px;
4922 .click-to-play-plugins-outer-description {
4926 .click-to-play-plugins-notification-link,
4931 .messageImage[value="plugin-hidden"] {
4932 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
4935 /* Keep any changes to this style in sync with pluginProblem.css */
4936 notification.pluginVulnerable {
4939 notification.pluginVulnerable .messageImage {
4940 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
4943 /* === END plugin-doorhanger.inc.css === */
4945 /* === BEGIN login-doorhanger.inc.css === */
4947 #notification-popup[popupid="login-fill"] > .panel-arrowcontainer > .panel-arrowcontent {
4948 /* Since we display a sliding subview that extends to the border, we cannot
4949 * keep the default padding of arrow panels. We use the same padding in the
4950 * individual content views instead. Since we removed the padding, we also
4951 * have to ensure the contents are clipped to the border box. */
4956 #login-fill-mainview,
4957 #login-fill-details {
4958 padding: var(--panel-arrowcontent-padding);
4961 #login-fill-doorhanger[inDetailView] > #login-fill-mainview {
4962 transform: translateX(-14px);
4965 #login-fill-mainview,
4966 #login-fill-details {
4967 transition: transform 150ms;
4970 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details {
4971 transform: translateX(105%);
4974 #login-fill-doorhanger:not([inDetailView]) > #login-fill-details:-moz-locale-dir(rtl) {
4975 transform: translateX(-105%);
4978 #login-fill-doorhanger[inDetailView] > #login-fill-clickcapturer {
4979 background-color: hsla(240,39%,100%,.1);
4982 #login-fill-testing {
4988 border: 1px solid #9C9CFF;
4992 .login-fill-item[disabled] {
4994 background-color: #000000;
4997 .login-fill-item[disabled][selected] {
4998 background-color: #008484;
5006 .login-fill-item.different-hostname > .login-hostname {
5016 #login-fill-details {
5018 background: var(--panel-arrowcontent-background);
5019 color: var(--panel-arrowcontent-color);
5020 background-clip: padding-box;
5021 border-left: 1px solid #9C9CFF;
5022 -moz-margin-start: 38px;
5025 /* === END login-doorhanger.inc.css === */
5027 /* === BEGIN customizeMode.inc.css === */
5029 /* Customization mode */
5031 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
5035 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
5036 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5037 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
5042 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
5043 pointer-events: none;
5046 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5047 #PanelUI-contents > .panel-customization-placeholder {
5048 -moz-outline-radius: 2.5px;
5049 outline: 1px dashed transparent;
5052 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
5053 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
5054 -moz-box-ordinal-group: 0;
5059 outline-offset: -2px;
5060 pointer-events: none;
5066 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
5067 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
5068 offset from the bottom effectively the same as other targets (-2px). */
5069 #main-window[customize-entered] #TabsToolbar.customization-target::before {
5073 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
5074 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
5075 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
5076 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
5080 /* Most target outlines are shown on hover and drag over but the panel menu uses
5081 placeholders instead. */
5082 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
5083 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
5084 /* nav-bar and panel outlines are always shown */
5085 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5086 outline-color: #A09090;
5089 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
5090 transition: outline-color 250ms linear;
5093 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
5094 transition: outline-color 250ms linear;
5095 outline-color: #9C9CFF;
5098 #PanelUI-contents > .panel-customization-placeholder {
5100 outline-offset: -5px;
5103 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
5105 /* padding-left: 10px;
5106 padding-right: 10px;*/
5109 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
5113 #customization-container {
5114 background-color: #000000;
5118 #customization-palette,
5119 #customization-empty {
5120 padding: 0 15px 15px;
5123 #customization-header {
5125 line-height: 1.75em;
5128 margin: 25px 25px 12px;
5129 padding-bottom: 12px;
5130 border-bottom: 1px solid #A09090;
5133 #customization-panel-container {
5134 padding: 10px 10px 0px;
5137 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
5138 #customization-footer {
5139 /*background-color: rgb(236,236,236);*/
5142 #customization-footer {
5143 border-top: 1px solid #9C9CFF;
5147 .customizationmode-button {
5151 .customizationmode-button:hover {
5154 #customization-titlebar-visibility-button[checked],
5155 #customization-devedition-theme-button[checked] {
5156 background-color: #008484;
5159 #customization-titlebar-visibility-button[checked]:hover,
5160 #customization-devedition-theme-button[checked]:hover {
5161 background-color: #FFCF00;
5164 #customization-titlebar-visibility-button[checked]:hover:active,
5165 #customization-devedition-theme-button[checked]:hover:active {
5166 background-color: #FF9F00;
5169 .customizationmode-button[disabled="true"] {
5172 .customizationmode-button > .box-inherit > .box-inherit > .button-icon,
5173 .customizationmode-button > .button-box > .button-icon {
5177 #customization-titlebar-visibility-button {
5178 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
5179 -moz-image-region: rect(0, 16px, 16px, 0);
5182 #customization-titlebar-visibility-button:hover {
5183 -moz-image-region: rect(16px, 16px, 32px, 0);
5186 #customization-lwtheme-button,
5187 #customization-titlebar-visibility-button {
5191 #customization-titlebar-visibility-button > .button-box {
5193 padding-bottom: 1px;
5196 #customization-titlebar-visibility-button:hover:active > .button-box {
5201 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-text,
5202 #customization-titlebar-visibility-button > .button-box > .button-text {
5203 /* Sadly, button.css thinks its margins are perfect for everyone. */
5204 -moz-margin-start: 5px !important;
5207 #customization-lwtheme-button > .box-inherit > .box-inherit > .button-icon {
5211 background-size: contain;
5214 #customization-titlebar-visibility-button > .button-box > .button-icon {
5215 vertical-align: middle;
5218 #customization-titlebar-visibility-button[checked] {
5219 -moz-image-region: rect(0, 32px, 16px, 16px);
5220 background-color: #008484;
5223 #customization-titlebar-visibility-button[checked]:hover {
5224 -moz-image-region: rect(16px, 32px, 32px, 16px);
5225 background-color: #FFCF00;
5228 #customization-titlebar-visibility-button[checked]:hover:active {
5229 background-color: #FF9F00;
5232 @media (min-resolution: 1.1dppx) {
5233 #customization-titlebar-visibility-button {
5234 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle@2x.png");
5235 -moz-image-region: rect(0, 48px, 48px, 0);
5238 #customization-titlebar-visibility-button:hover {
5239 -moz-image-region: rect(48px, 48px, 96px, 0);
5242 #customization-titlebar-visibility-button[checked] {
5243 -moz-image-region: rect(0, 96px, 48px, 48px);
5246 #customization-titlebar-visibility-button[checked]:hover {
5247 -moz-image-region: rect(48px, 96px, 96px, 48px);
5251 #main-window[customize-entered] #customization-panel-container {
5252 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5253 background-position: left top;
5254 background-repeat: repeat;
5255 background-size: auto;
5256 background-attachment: fixed;
5259 toolbarpaletteitem[place="toolbar"] {
5260 transition: border-width 250ms ease-in-out;
5263 toolbarpaletteitem[mousedown] {
5264 outline: 1px solid #008484;
5265 cursor: -moz-grabbing;
5269 .panel-customization-placeholder,
5270 toolbarpaletteitem[place="palette"],
5271 toolbarpaletteitem[place="panel"] {
5272 transition: transform .3s ease-in-out;
5275 #customization-palette {
5276 transition: opacity .3s ease-in-out;
5280 #customization-palette[showing="true"] {
5284 toolbarpaletteitem[notransition].panel-customization-placeholder,
5285 toolbarpaletteitem[notransition][place="toolbar"],
5286 toolbarpaletteitem[notransition][place="palette"],
5287 toolbarpaletteitem[notransition][place="panel"] {
5291 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
5292 toolbarpaletteitem > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon,
5293 toolbarpaletteitem > toolbaritem.panel-wide-item,
5294 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
5295 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
5298 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon,
5299 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-badge-stack > .toolbarbutton-icon {
5300 transform: scale(1.3);
5303 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
5304 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
5305 transform: scale(1.1);
5308 /* Override the toolkit styling for items being dragged over. */
5309 toolbarpaletteitem[place="toolbar"] {
5310 border-left-width: 0;
5311 border-right-width: 0;
5316 #customization-palette:not([hidden]) {
5317 margin-bottom: 25px;
5320 toolbarpaletteitem[place="palette"]:-moz-focusring,
5321 toolbarpaletteitem[place="panel"]:-moz-focusring,
5322 toolbarpaletteitem[place="toolbar"]:-moz-focusring {
5323 outline: 1px dotted #A09090;
5324 outline-offset: -5px;
5325 -moz-outline-radius: 2.5px;
5328 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5329 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
5330 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
5331 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
5335 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
5336 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
5346 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
5347 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
5351 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
5352 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
5355 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
5356 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
5360 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
5361 -moz-box-pack: center;
5365 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
5366 -moz-margin-end: 5px;
5369 #customization-palette > toolbarpaletteitem > label {
5375 #customization-lwtheme-menu > .panel-arrowcontainer > .panel-arrowcontent {
5376 -moz-box-orient: vertical;
5377 /* Make the panel padding uniform across all platforms due to the
5378 styling of the section headers and footer. */
5382 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5387 .customization-lwtheme-menu-theme {
5388 -moz-appearance: none;
5391 -moz-padding-end: 5px;
5393 -moz-padding-start: 0;
5396 .customization-lwtheme-menu-theme[defaulttheme] {
5397 list-style-image: url(chrome://browser/skin/Fxtheme-switcher-icon.png);
5400 .customization-lwtheme-menu-theme[active="true"] {
5401 background-color: #008484;
5404 .customization-lwtheme-menu-theme > .toolbarbutton-icon {
5408 .customization-lwtheme-menu-theme > .toolbarbutton-text {
5412 #customization-lwtheme-menu-header,
5413 #customization-lwtheme-menu-recommended {
5418 #customization-lwtheme-menu-header,
5419 #customization-lwtheme-menu-recommended,
5420 #customization-lwtheme-menu-footer {
5421 background-color: #A09090;
5423 margin-right: -10px;
5427 #customization-lwtheme-menu-header {
5429 border-top-right-radius: 3px;
5430 border-top-left-radius: 3px;
5433 #customization-lwtheme-menu-recommended {
5436 #customization-lwtheme-menu-footer {
5437 margin-bottom: -10px;
5438 border-bottom-right-radius: 3px;
5439 border-bottom-left-radius: 3px;
5442 .customization-lwtheme-menu-footeritem {
5443 -moz-appearance: none;
5445 background-color: #C09070;
5447 border: 1px solid transparent;
5453 .customization-lwtheme-menu-footeritem:hover {
5454 background-color: #FFCF00;
5457 .customization-lwtheme-menu-footeritem:first-child {
5460 /* === END customizeMode.inc.css === */
5462 /* === BEGIN customizeTip.inc.css === */
5464 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
5471 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
5472 border: 1px solid #9C9CFF;
5476 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
5477 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
5480 .customization-tipPanel-infoBox {
5481 margin: 20px 25px 25px;
5483 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
5484 background-repeat: no-repeat;
5487 .customization-tipPanel-content {
5493 .customization-tipPanel-em {
5498 .customization-tipPanel-contentImage {
5500 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
5508 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
5509 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
5512 .customization-tipPanel-link {
5513 -moz-appearance: none;
5514 background: transparent;
5522 .customization-tipPanel-link > .button-box > .button-text {
5523 margin: 0 !important;
5526 .customization-tipPanel-closeBox > .close-icon {
5527 -moz-appearance: none;
5529 -moz-margin-end: -25px;
5532 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
5533 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5534 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
5537 /* === END customizeTip.inc.css === */
5540 * This next rule is a hack to disable subpixel anti-aliasing on all
5541 * labels during the customize mode transition. Subpixel anti-aliasing
5542 * on Windows with Direct2D layers acceleration is particularly slow to
5543 * paint, so this hack is how we sidestep that performance bottleneck.
5545 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
5546 transform: perspective(0.01px);
5549 #main-window[customize-entered] > #tab-view-deck {
5550 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5551 background-attachment: fixed;
5554 #main-window[customization-lwtheme] > #tab-view-deck:-moz-lwtheme {
5555 background-repeat: no-repeat;
5556 background-position: right top;
5557 background-attachment: fixed;
5558 /* The image will get set from CustomizeMode.jsm */
5559 background-image: none;
5560 background-color: transparent;
5563 #main-window[customization-lwtheme]:-moz-lwtheme {
5564 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
5565 background-repeat: repeat;
5566 background-attachment: fixed;
5567 background-position: left top;
5570 #main-window[customize-entered] #browser-bottombox,
5571 #main-window[customize-entered] #customization-container {
5572 border-left: 1px solid #9C9CFF;
5573 border-right: 1px solid #9C9CFF;
5574 background-clip: padding-box;
5577 #main-window[customize-entered] #browser-bottombox {
5578 border-bottom: 1px solid #9C9CFF;
5581 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
5585 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
5589 /* End customization mode */
5591 /* Private browsing indicators */
5594 * Currently, we have two places where we put private browsing indicators on
5595 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
5596 * When tabsintitlebar is disabled, we draw the indicator at the end of the
5597 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
5598 * want the bottom border of the image to line up with the bottom of the window
5599 * caption buttons. That's why there's so much special-casing going on in here.
5601 .private-browsing-indicator {
5603 pointer-events: none;
5606 #private-browsing-indicator-titlebar {
5611 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
5615 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
5619 #TabsToolbar > .private-browsing-indicator {
5620 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
5621 -moz-margin-start: 4px;
5625 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
5626 * mode, since the tabstrip "mimics" the titlebar in that case with its own
5627 * min/max/close window buttons.
5629 #private-browsing-indicator-titlebar > .private-browsing-indicator,
5630 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
5631 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
5632 -moz-margin-end: 4px;
5638 /* This one is for Linux */
5639 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
5640 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
5644 /* End private browsing indicators */
5646 /* === BEGIN UITour.inc.css === */
5650 #UITourHighlightContainer {
5651 -moz-appearance: none;
5653 background-color: transparent;
5654 /* This is a buffer to compensate for the movement in the "wobble" effect */
5659 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
5660 border-radius: 40px;
5661 border: 1px solid #9C9CFF;
5662 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
5663 on Linux without an X compositor where opacity is either 0 or 1. */
5664 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
5669 #UITourTooltipBody {
5670 -moz-margin-end: 14px;
5671 -moz-margin-start: 14px;
5676 #UITourTooltipIcon {
5679 -moz-margin-start: 14px;
5680 -moz-margin-end: 14px;
5683 #UITourTooltipTitle,
5684 #UITourTooltipDescription {
5688 #UITourTooltipTitle {
5691 -moz-margin-start: 0;
5692 /* Avoid the title overlapping the close button */
5693 -moz-margin-end: 14px;
5698 #UITourTooltipDescription {
5699 -moz-margin-start: 0;
5702 line-height: 1.8rem;
5703 margin-bottom: 0; /* Override global.css */
5706 #UITourTooltipClose {
5708 -moz-appearance: none;
5710 background-color: transparent;
5712 -moz-margin-start: 4px;
5716 #UITourTooltipClose > .toolbarbutton-text {
5720 #UITourTooltipButtons {
5722 background-color: rgba(0,0,0,.2);
5723 border-top: 1px solid rgba(0,0,0,.4);
5724 margin: 10px -16px -16px;
5728 #UITourTooltipButtons > label,
5729 #UITourTooltipButtons > button {
5733 #UITourTooltipButtons > label:first-child,
5734 #UITourTooltipButtons > button:first-child {
5735 -moz-margin-start: 0;
5738 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
5741 -moz-margin-end: 5px;
5744 #UITourTooltipButtons > label,
5745 #UITourTooltipButtons > button .button-text {
5749 #UITourTooltipButtons > button:not(.button-link) {
5750 -moz-appearance: none;
5751 background-color: #C09070;
5752 border-radius: 3000px;
5756 transition-property: background-color, color;
5757 transition-duration: 150ms;
5760 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
5761 background-color: #FFCF00;
5765 #UITourTooltipButtons > label,
5766 #UITourTooltipButtons > button.button-link {
5767 -moz-appearance: none;
5768 background: transparent;
5771 color: rgba(0,0,0,0.35);
5773 padding-right: 10px;
5776 #UITourTooltipButtons > button.button-link:hover {
5780 /* The primary button gets the same color as the customize button. */
5781 #UITourTooltipButtons > button.button-primary {
5782 background-color: #A06060; /* LCARS default button background color */
5785 padding-right: 30px;
5788 #UITourTooltipButtons > button.button-primary:not(:active):hover {
5789 background-color: #FFCF00;
5793 /* Notification overrides for Heartbeat UI */
5795 notification.heartbeat {
5796 background-color: #A09090;
5800 @keyframes pulse-onshow {
5803 transform: scale(1.0);
5807 transform: scale(1.1);
5810 transform: scale(1.0);
5813 transform: scale(1.1);
5816 transform: scale(1.0);
5820 @keyframes pulse-twice {
5822 transform: scale(1.1);
5825 transform: scale(0.8);
5828 transform: scale(1);
5832 .messageText.heartbeat {
5834 /* text-shadow: none; */
5835 -moz-margin-start: 0px;
5838 .messageImage.heartbeat {
5841 -moz-margin-start: 8px;
5842 -moz-margin-end: 8px;
5845 .messageImage.heartbeat.pulse-onshow {
5846 animation-name: pulse-onshow;
5847 animation-duration: 1.5s;
5848 animation-iteration-count: 1;
5849 animation-timing-function: cubic-bezier(.7,1.8,.9,1.1);
5852 .messageImage.heartbeat.pulse-twice {
5853 animation-name: pulse-twice;
5854 animation-duration: 1s;
5855 animation-iteration-count: 2;
5856 animation-timing-function: linear;
5859 /* Learn More link styles */
5860 .heartbeat > .text-link {
5862 -moz-margin-start: 0px;
5865 .heartbeat > .text-link:hover {
5867 text-decoration: none;
5870 .heartbeat > .text-link:hover:active {
5874 /* Heartbeat UI Rating Star Classes */
5875 .heartbeat > #star-rating-container {
5877 /* margin-bottom: 4px;*/
5880 .heartbeat > #star-rating-container > #star5 {
5881 -moz-box-ordinal-group: 5;
5884 .heartbeat > #star-rating-container > #star4 {
5885 -moz-box-ordinal-group: 4;
5888 .heartbeat > #star-rating-container > #star3 {
5889 -moz-box-ordinal-group: 3;
5892 .heartbeat > #star-rating-container > #star2 {
5893 -moz-box-ordinal-group: 2;
5896 .heartbeat > #star-rating-container > .star-x {
5897 background: url("chrome://browser/skin/heartbeat-star-off.svg");
5899 /* Overrides the -moz-margin-end for all platforms defined in the .plain class */
5900 -moz-margin-end: 4px !important;
5905 .heartbeat > #star-rating-container > .star-x:hover,
5906 .heartbeat > #star-rating-container > .star-x:hover ~ .star-x {
5907 background: url("chrome://browser/skin/heartbeat-star-lit.svg");
5910 /* === END UITour.inc.css === */
5912 #UITourTooltipButtons {
5914 * Override the --panel-arrowcontent-padding so the background extends
5915 * to the sides and bottom of the panel.
5918 margin-right: -10px;
5919 margin-bottom: -10px;
5922 /* === BEGIN contextmenu.inc.css === */
5924 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
5927 #context-navigation > .menuitem-iconic {
5929 -moz-box-pack: center;
5930 -moz-box-align: center;
5933 #context-navigation > .menuitem-iconic[disabled="true"] {
5934 background-color: transparent;
5937 #context-navigation > .menuitem-iconic > .menu-iconic-left {
5938 -moz-appearance: none;
5941 #context-back > .menu-iconic-left {
5942 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back"); */
5943 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5944 -moz-image-region: rect(0, 54px, 18px, 36px);
5947 #context-back:not([disabled="true"]):hover > .menu-iconic-left {
5948 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-active"); */
5949 -moz-image-region: rect(18px, 54px, 36px, 36px);
5952 #context-back[disabled="true"] > .menu-iconic-left {
5953 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#back-disabled"); */
5954 -moz-image-region: rect(36px, 54px, 54px, 36px);
5957 #context-forward > .menu-iconic-left {
5958 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward"); */
5959 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
5960 -moz-image-region: rect(0, 72px, 18px, 54px);
5963 #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
5964 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-active"); */
5965 -moz-image-region: rect(18px, 72px, 36px, 54px);
5968 #context-forward[disabled="true"] > .menu-iconic-left {
5969 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#forward-disabled"); */
5970 -moz-image-region: rect(36px, 72px, 54px, 54px);
5973 #context-reload > .menu-iconic-left {
5974 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload"); */
5975 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5976 -moz-image-region: rect(0, 14px, 14px, 0);
5979 #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
5980 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-active"); */
5981 -moz-image-region: rect(14px, 14px, 28px, 0);
5984 #context-reload[disabled="true"] > .menu-iconic-left {
5985 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#reload-disabled"); */
5986 -moz-image-region: rect(28px, 14px, 42px, 0);
5989 #context-stop > .menu-iconic-left {
5990 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop"); */
5991 list-style-image: url("chrome://browser/skin/reload-stop-goFx.png");
5992 -moz-image-region: rect(0, 28px, 14px, 14px);
5995 #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
5996 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-active"); */
5997 -moz-image-region: rect(14px, 28px, 28px, 14px);
6000 #context-stop[disabled="true"] > .menu-iconic-left {
6001 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#stop-disabled"); */
6002 -moz-image-region: rect(28px, 28px, 42px, 14px);
6005 #context-bookmarkpage > .menu-iconic-left {
6006 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark"); */
6007 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
6008 -moz-image-region: rect(0, 144px, 18px, 126px);
6011 #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
6012 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-active"); */
6013 -moz-image-region: rect(18px, 144px, 36px, 126px);
6016 #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
6017 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmark-disabled"); */
6018 -moz-image-region: rect(36px, 144px, 54px, 126px);
6021 #context-bookmarkpage[starred=true] {
6022 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked"); */
6023 -moz-image-region: rect(0px, 162px, 18px, 144px);
6026 #context-bookmarkpage[starred=true][_moz-menuactive=true] {
6027 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-active"); */
6028 -moz-image-region: rect(18px, 162px, 36px, 144px);
6031 #context-bookmarkpage[starred=true][disabled=true] {
6032 /* list-style-image: url("chrome://browser/skin/content-contextmenu.svg#bookmarked-disabled"); */
6033 -moz-image-region: rect(36px, 162px, 54px, 144px);
6036 #context-back:-moz-locale-dir(rtl),
6037 #context-forward:-moz-locale-dir(rtl),
6038 #context-reload:-moz-locale-dir(rtl) {
6039 transform: scaleX(-1);
6042 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
6043 width: 18px; /*16px;*/
6044 height: 18px; /*16px;*/
6048 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
6049 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
6055 #context-media-eme-learnmore {
6056 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6059 #context-media-eme-learnmore {
6060 list-style-image: url("chrome://browser/skin/drm-icon.svg#chains");
6063 /* === END contextmenu.inc.css === */
6065 #context-navigation {
6068 #context-sep-navigation {
6069 /* margin-top: -4px; */
6072 .browser-extension-panel > .panel-arrowcontainer > .panel-arrowcontent {
6077 /* === BEGIN usercontext.inc.css === */
6079 /* User Context UI browser styles */
6081 #menu_newUserContextTabPersonal {
6082 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6085 #menu_newUserContextTabWork {
6086 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6089 #menu_newUserContextTabBanking {
6090 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6093 #menu_newUserContextTabShopping {
6094 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6097 /* URL Bar Decoration */
6099 #userContext-indicator {
6104 #userContext-label {
6105 margin-inline-end: 3px;
6109 #userContext-icons:not([usercontextid]) {
6113 #userContext-icons {
6114 -moz-box-align: center;
6117 /* Personal User Context */
6118 #userContext-icons[usercontextid="1"] > #userContext-label {
6121 #userContext-icons[usercontextid="1"] > #userContext-indicator {
6122 list-style-image: url("chrome://browser/skin/usercontext/personal.svg");
6125 /* Work User Context */
6126 #userContext-icons[usercontextid="2"] > #userContext-label {
6129 #userContext-icons[usercontextid="2"] > #userContext-indicator {
6130 list-style-image: url("chrome://browser/skin/usercontext/work.svg");
6133 /* Banking User Context */
6134 #userContext-icons[usercontextid="3"] > #userContext-label {
6137 #userContext-icons[usercontextid="3"] > #userContext-indicator {
6138 list-style-image: url("chrome://browser/skin/usercontext/banking.svg");
6141 /* Shopping User Context */
6142 #userContext-icons[usercontextid="4"] > #userContext-label {
6145 #userContext-icons[usercontextid="4"] > #userContext-indicator {
6146 list-style-image: url("chrome://browser/skin/usercontext/shopping.svg");
6149 /* === END usercontext.inc.css === */