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");
12 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
15 toolbar[customizable="true"] {
16 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
19 toolbar[type="menubar"][autohide="true"] {
20 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
23 #toolbar-menubar[autohide="true"] {
24 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
28 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
32 -moz-box-orient: vertical; /* for flex hack */
36 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
39 /* ::::: primary toolbar ::::: */
41 .toolbar-primary > .toolbar-box > .toolbar-holder {
42 background-color: #A09090;
45 .toolbar-primary > .toolbar-box > .toolbar-startcap,
46 .toolbar-primary > .toolbar-box > .toolbar-endcap {
47 background-color: #9C9CFF;
50 /* Hides the titlebar-placeholder underneath the window caption buttons when we
51 are not autohiding the menubar. */
52 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
56 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
57 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
58 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
59 #toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
60 #toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
64 #main-window[tabsintitlebar][sizemode="normal"][chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
65 #main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
66 /* margin-top: 15px;*/
69 #toolbar-menubar:not([autohide="true"]) {
70 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
73 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
74 /* 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 */
78 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
79 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
80 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
81 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
82 outline-color: #A09090;
88 #navigator-toolbox::after {
91 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
95 #navigator-toolbox > toolbar:not(:-moz-lwtheme) {
98 /* indent due to non-applicable aero rule */
100 background-color: transparent !important;
103 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
104 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
106 background-color: #6000CF;
110 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
111 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
112 background-color: #8050B0;
116 #TabsToolbar:-moz-lwtheme {
117 /*background: linear-gradient(to top, @toolbarShadowColor@ 2px, transparent 2px);*/
120 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
124 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
125 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
129 /* Make the menu inherit the toolbar's color. On non-compositor (Aero Basic, XP modern, classic)
130 * this is defined above, but only for tabsintitlebar. Otherwise (Aero Glass, Windows 8),
131 * this is hardcoded to black in browser-aero.css, even without tabsintitlebar. */
132 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
133 /* color: inherit; */
137 /* Position the toolbar above the bottom of background tabs */
142 #personal-bookmarks {
143 /* min-height: 24px; */
146 #print-preview-toolbar:not(:-moz-lwtheme) {
147 /* -moz-appearance: toolbox; */
150 #browser-bottombox:not(:-moz-lwtheme) {
153 /* ::::: titlebar ::::: */
157 background-color: #6000CF;
160 #titlebar:-moz-window-inactive {
161 background-color: #8050B0;
165 #main-window[sizemode="normal"] > #titlebar {
170 #main-window[sizemode="maximized"] > #titlebar {
174 /* The button box must appear on top of the navigator-toolbox in order for
175 * click and hover mouse events to work properly for the button in the restored
176 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
177 * can swallow those events. It will also place the buttons above the fog on
178 * themes with Aero Glass.
180 #titlebar-buttonbox {
181 -moz-appearance: none;
184 -moz-margin-end: 3px;
188 .titlebar-placeholder[type="appmenu-button"] {
192 .titlebar-placeholder[type="caption-buttons"] {
196 /* titlebar command buttons */
199 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
202 #titlebar-min:hover {
203 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
207 list-style-image: url("chrome://browser/skin/win-maximize.gif");
210 #titlebar-max:hover {
211 list-style-image: url("chrome://browser/skin/win-maximize-hover.gif");
214 #main-window[sizemode="maximized"] #titlebar-max {
215 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
218 #main-window[sizemode="maximized"] #titlebar-max:hover {
219 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
223 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
226 #titlebar-close:hover {
227 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
230 /* ::::: bookmark buttons ::::: */
232 toolbarbutton.bookmark-item:not(.subviewbutton),
233 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
238 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
239 toolbarbutton.bookmark-item[open="true"] {
242 -moz-padding-start: 4px;
243 -moz-padding-end: 2px;*/
246 .bookmark-item > .toolbarbutton-icon,
247 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
252 /* Force the display of the label for bookmarks */
253 .bookmark-item > .toolbarbutton-text,
254 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
255 display: -moz-box !important;
258 .bookmark-item > .toolbarbutton-menu-dropmarker {
262 #bookmarks-toolbar-placeholder {
263 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
266 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
267 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
268 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
271 /* ----- BOOKMARK STAR ANIMATION ----- */
273 @keyframes animation-bookmarkAdded {
274 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
275 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
277 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
280 @keyframes animation-bookmarkPulse {
281 from { transform: scale(1); }
282 50% { transform: scale(1.3); }
283 to { transform: scale(1); }
286 #bookmarked-notification-container {
295 #bookmarked-notification {
296 background-size: 16px;
297 background-position: center;
298 background-repeat: no-repeat;
304 #bookmarked-notification-dropmarker-anchor {
309 #bookmarked-notification-dropmarker-icon {
315 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
316 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
317 animation: animation-bookmarkAdded 800ms;
318 animation-timing-function: ease, ease, ease;
321 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
322 list-style-image: none !important;
325 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
327 animation: animation-bookmarkPulse 300ms;
328 animation-delay: 600ms;
329 animation-timing-function: ease-out;
332 /* ::::: bookmark menus ::::: */
335 menuitem.bookmark-item {
340 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
345 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
346 -moz-padding-start: 0px;
349 /* ::::: bookmark items ::::: */
352 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
353 -moz-image-region: auto;
356 .bookmark-item[container] {
357 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
358 -moz-image-region: auto;
361 .bookmark-item[container][open] {
362 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
363 -moz-image-region: auto;
366 .bookmark-item[container][livemark] {
367 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
368 -moz-image-region: auto;
371 .bookmark-item[container][livemark] .bookmark-item {
372 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
373 -moz-image-region: rect(0px, 16px, 16px, 0px);
376 .bookmark-item[container][livemark] .bookmark-item[visited] {
377 -moz-image-region: rect(0px, 32px, 16px, 16px);
380 .bookmark-item[container][query] {
381 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
382 -moz-image-region: auto;
385 .bookmark-item[query][tagContainer] {
386 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
387 -moz-image-region: auto;
390 .bookmark-item[query][dayContainer] {
391 list-style-image: url("chrome://communicator/skin/history/calendar.png");
392 -moz-image-region: auto;
395 .bookmark-item[query][hostContainer] {
396 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
397 -moz-image-region: auto;
400 .bookmark-item[query][hostContainer][open] {
401 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
402 -moz-image-region: auto;
405 .bookmark-item[cutting] > .toolbarbutton-icon,
406 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
410 .bookmark-item[cutting] > .toolbarbutton-text,
411 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
415 /* ::::: primary toolbar buttons ::::: */
417 /* === BEGIN toolbarbuttons.inc.css === */
419 /* Whole section of this included file: */
420 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
421 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
422 #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button,
423 #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
424 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
425 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
426 #copy-button, #paste-button, #e10s-button),
428 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
429 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
433 -moz-image-region: rect(0, 36px, 18px, 18px);
436 #back-button:hover:not([disabled="true"]) {
437 -moz-image-region: rect(18px, 36px, 36px, 18px);
440 #back-button[disabled="true"] {
441 -moz-image-region: rect(36px, 36px, 54px, 18px);
445 -moz-image-region: rect(0, 72px, 18px, 54px);
448 #forward-button:hover:not([disabled="true"]) {
449 -moz-image-region: rect(18px, 72px, 36px, 54px);
452 #forward-button[disabled="true"] {
453 -moz-image-region: rect(36px, 72px, 54px, 54px);
456 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
457 #forward-button:-moz-locale-dir(rtl) {
458 transform: scaleX(-1);
461 #home-button[cui-areatype="toolbar"] {
462 -moz-image-region: rect(0, 126px, 18px, 108px);
465 #home-button[cui-areatype="toolbar"]:hover {
466 -moz-image-region: rect(18px, 126px, 36px, 108px);
469 #bookmarks-menu-button[cui-areatype="toolbar"] {
470 -moz-image-region: rect(0, 144px, 18px, 126px);
473 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
474 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
475 -moz-image-region: rect(18px, 144px, 36px, 126px);
478 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
479 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
480 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
481 background-color: transparent !important;
484 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
485 -moz-image-region: rect(0, 162px, 18px, 144px);
488 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
489 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
490 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
491 /* When starred and clicked (for edit/delete dialog),
492 * then only the menubutton-button itself is open, but not the whole menubutton. */
493 -moz-image-region: rect(18px, 162px, 36px, 144px);
496 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
497 -moz-image-region: rect(0, 630px, 18px, 612px);
500 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
502 -moz-box-align: center;
505 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
506 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
507 -moz-image-region: rect(18px, 630px, 36px, 612px);
510 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
511 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
514 -moz-padding-start: 2px;
515 -moz-padding-end: 0px;
518 #history-panelmenu[cui-areatype="toolbar"] {
519 -moz-image-region: rect(0, 180px, 18px, 162px);
522 #history-panelmenu[cui-areatype="toolbar"]:hover,
523 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
524 -moz-image-region: rect(18px, 180px, 36px, 162px);
527 #downloads-button[cui-areatype="toolbar"] {
528 -moz-image-region: rect(0, 198px, 18px, 180px);
531 #downloads-button[cui-areatype="toolbar"]:hover,
532 #downloads-button[cui-areatype="toolbar"][open="true"] {
533 -moz-image-region: rect(18px, 198px, 36px, 180px);
536 #add-ons-button[cui-areatype="toolbar"] {
537 -moz-image-region: rect(0, 216px, 18px, 198px);
540 #add-ons-button[cui-areatype="toolbar"]:hover {
541 -moz-image-region: rect(18px, 216px, 36px, 198px);
544 #open-file-button[cui-areatype="toolbar"] {
545 -moz-image-region: rect(0, 234px, 18px, 216px);
548 #open-file-button[cui-areatype="toolbar"]:hover {
549 -moz-image-region: rect(18px, 234px, 36px, 216px);
552 #save-page-button[cui-areatype="toolbar"] {
553 -moz-image-region: rect(0, 252px, 18px, 234px);
556 #save-page-button[cui-areatype="toolbar"]:hover {
557 -moz-image-region: rect(18px, 252px, 36px, 234px);
560 #sync-button[cui-areatype="toolbar"] {
561 -moz-image-region: rect(0, 270px, 18px, 252px);
564 #sync-button[cui-areatype="toolbar"]:hover {
565 -moz-image-region: rect(18px, 270px, 36px, 252px);
568 #sync-button[cui-areatype="toolbar"][status="active"],
569 #sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) {
570 list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
571 -moz-image-region: rect(0, 18px, 18px, 0px);
575 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext,
576 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext:hover:active:not([disabled="true"]) {
577 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
581 #feed-button[cui-areatype="toolbar"] {
582 -moz-image-region: rect(0, 288px, 18px, 270px);
585 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
586 -moz-image-region: rect(18px, 288px, 36px, 270px);
589 #feed-button[cui-areatype="toolbar"][disabled="true"] {
590 -moz-image-region: rect(36px, 288px, 54px, 270px);
593 #social-share-button[cui-areatype="toolbar"] {
594 -moz-image-region: rect(0px, 306px, 18px, 288px);
597 #social-share-button[cui-areatype="toolbar"]:hover {
598 -moz-image-region: rect(18px, 306px, 36px, 288px);
601 #characterencoding-button[cui-areatype="toolbar"] {
602 -moz-image-region: rect(0, 324px, 18px, 306px);
605 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
606 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
607 -moz-image-region: rect(18px, 324px, 36px, 306px);
610 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
611 -moz-image-region: rect(36px, 324px, 54px, 306px);
614 #new-window-button[cui-areatype="toolbar"] {
615 -moz-image-region: rect(0, 342px, 18px, 324px);
618 #new-window-button[cui-areatype="toolbar"]:hover {
619 -moz-image-region: rect(18px, 342px, 36px, 324px);
622 #e10s-button[cui-areatype="toolbar"] {
623 -moz-image-region: rect(0, 342px, 18px, 324px);
626 #e10s-button[cui-areatype="toolbar"]:hover {
627 -moz-image-region: rect(18px, 342px, 36px, 324px);
630 #e10s-button > .toolbarbutton-icon {
631 transform: scaleY(-1);
634 #new-tab-button[cui-areatype="toolbar"] {
635 -moz-image-region: rect(0, 360px, 18px, 342px);
638 #new-tab-button[cui-areatype="toolbar"]:hover {
639 -moz-image-region: rect(18px, 360px, 36px, 342px);
642 #privatebrowsing-button[cui-areatype="toolbar"] {
643 -moz-image-region: rect(0, 378px, 18px, 360px);
646 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
647 -moz-image-region: rect(18px, 378px, 36px, 360px);
650 #find-button[cui-areatype="toolbar"] {
651 -moz-image-region: rect(0, 396px, 18px, 378px);
654 #find-button[cui-areatype="toolbar"]:hover {
655 -moz-image-region: rect(18px, 396px, 36px, 378px);
658 #print-button[cui-areatype="toolbar"] {
659 -moz-image-region: rect(0, 414px, 18px, 396px);
662 #print-button[cui-areatype="toolbar"]:hover {
663 -moz-image-region: rect(18px, 414px, 36px, 396px);
666 #fullscreen-button[cui-areatype="toolbar"] {
667 -moz-image-region: rect(0, 432px, 18px, 414px);
670 #fullscreen-button[cui-areatype="toolbar"]:hover {
671 -moz-image-region: rect(18px, 432px, 36px, 414px);
674 #developer-button[cui-areatype="toolbar"] {
675 -moz-image-region: rect(0, 450px, 18px, 432px);
678 #developer-button[cui-areatype="toolbar"]:hover,
679 #developer-button[cui-areatype="toolbar"][open="true"] {
680 -moz-image-region: rect(18px, 450px, 36px, 432px);
683 #preferences-button[cui-areatype="toolbar"] {
684 -moz-image-region: rect(0, 468px, 18px, 450px);
687 #preferences-button[cui-areatype="toolbar"]:hover {
688 -moz-image-region: rect(18px, 468px, 36px, 450px);
691 #PanelUI-menu-button {
692 -moz-image-region: rect(0, 486px, 18px, 468px);
695 #PanelUI-menu-button:hover,
696 #PanelUI-menu-button[open="true"] {
697 -moz-image-region: rect(18px, 486px, 36px, 468px);
700 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
701 -moz-image-region: rect(0, 504px, 18px, 486px);
704 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
705 -moz-image-region: rect(18px, 504px, 36px, 486px);
708 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
709 -moz-image-region: rect(36px, 504px, 54px, 486px);
712 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
713 -moz-image-region: rect(0, 522px, 18px, 504px);
716 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
717 -moz-image-region: rect(18px, 522px, 36px, 504px);
720 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
721 -moz-image-region: rect(36px, 522px, 54px, 504px);
724 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
725 -moz-image-region: rect(0, 540px, 18px, 522px);
728 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
729 -moz-image-region: rect(18px, 540px, 36px, 522px);
732 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
733 -moz-image-region: rect(36px, 540px, 54px, 522px);
736 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
737 -moz-image-region: rect(0, 558px, 18px, 540px);
740 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
741 -moz-image-region: rect(18px, 558px, 36px, 540px);
744 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
745 -moz-image-region: rect(36px, 558px, 54px, 540px);
748 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
749 -moz-image-region: rect(0, 576px, 18px, 558px);
752 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
753 -moz-image-region: rect(18px, 576px, 36px, 558px);
756 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
757 -moz-image-region: rect(36px, 576px, 54px, 558px);
760 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) {
761 -moz-image-region: rect(0, 594px, 18px, 576px);
764 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])):hover,
765 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]))[open="true"] {
766 -moz-image-region: rect(18px, 594px, 36px, 576px);
769 #nav-bar-overflow-button {
770 -moz-image-region: rect(0, 612px, 18px, 594px);
773 #nav-bar-overflow-button:hover,
774 #nav-bar-overflow-button[open="true"] {
775 -moz-image-region: rect(18px, 612px, 36px, 594px);
778 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
779 transform: scaleX(-1);
783 -moz-image-region: rect(0, 648px, 18px, 630px);
786 #tabview-button:hover {
787 -moz-image-region: rect(18px, 648px, 36px, 630px);
790 #email-link-button[cui-areatype="toolbar"] {
791 -moz-image-region: rect(0, 666px, 18px, 648px);
794 #email-button[cui-areatype="toolbar"]:hover {
795 -moz-image-region: rect(18px, 666px, 36px, 648px);
798 #sidebar-button[cui-areatype="toolbar"] {
799 -moz-image-region: rect(0, 684px, 18px, 666px);
802 #sidebar-button[cui-areatype="toolbar"]:hover {
803 -moz-image-region: rect(18px, 684px, 36px, 666px);
806 /* === END toolbarbuttons.inc.css === */
808 /* === BEGIN menupanel.inc.css === */
810 /* Menu panel and palette styles */
812 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
813 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
814 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
815 #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button,
816 #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
817 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
818 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
819 #copy-button, #paste-button, #e10s-button)[cui-areatype="menu-panel"],
820 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
821 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
822 #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button,
823 #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
824 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
825 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
826 #copy-button, #paste-button, #e10s-button) {
827 list-style-image: url("chrome://browser/skin/menuPanel.png");
830 #home-button[cui-areatype="menu-panel"],
831 toolbarpaletteitem[place="palette"] > #home-button {
832 -moz-image-region: rect(0px, 128px, 32px, 96px);
835 #home-button[cui-areatype="menu-panel"]:hover,
836 toolbarpaletteitem[place="palette"] > #home-button:hover {
837 -moz-image-region: rect(32px, 128px, 64px, 96px);
840 #bookmarks-menu-button[cui-areatype="menu-panel"],
841 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
842 -moz-image-region: rect(0px, 192px, 32px, 160px);
845 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
846 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
847 -moz-image-region: rect(32px, 192px, 64px, 160px);
850 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
851 -moz-image-region: rect(32px, 192px, 64px, 160px);
854 #history-panelmenu[cui-areatype="menu-panel"],
855 toolbarpaletteitem[place="palette"] > #history-panelmenu {
856 -moz-image-region: rect(0px, 224px, 32px, 192px);
859 #history-panelmenu[cui-areatype="menu-panel"]:hover,
860 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
861 -moz-image-region: rect(32px, 224px, 64px, 192px);
864 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
865 -moz-image-region: rect(32px, 224px, 64px, 192px);
868 #downloads-button[cui-areatype="menu-panel"],
869 toolbarpaletteitem[place="palette"] > #downloads-button {
870 -moz-image-region: rect(0px, 256px, 32px, 224px);
873 #downloads-button[cui-areatype="menu-panel"]:hover,
874 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
875 -moz-image-region: rect(32px, 256px, 64px, 224px);
878 #add-ons-button[cui-areatype="menu-panel"],
879 toolbarpaletteitem[place="palette"] > #add-ons-button {
880 -moz-image-region: rect(0px, 288px, 32px, 256px);
883 #add-ons-button[cui-areatype="menu-panel"]:hover,
884 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
885 -moz-image-region: rect(32px, 288px, 64px, 256px);
888 #open-file-button[cui-areatype="menu-panel"],
889 toolbarpaletteitem[place="palette"] > #open-file-button {
890 -moz-image-region: rect(0px, 320px, 32px, 288px);
893 #open-file-button[cui-areatype="menu-panel"]:hover,
894 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
895 -moz-image-region: rect(32px, 320px, 64px, 288px);
898 #save-page-button[cui-areatype="menu-panel"],
899 toolbarpaletteitem[place="palette"] > #save-page-button {
900 -moz-image-region: rect(0px, 352px, 32px, 320px);
903 #save-page-button[cui-areatype="menu-panel"]:hover,
904 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
905 -moz-image-region: rect(32px, 352px, 64px, 320px);
908 #sync-button[cui-areatype="menu-panel"],
909 toolbarpaletteitem[place="palette"] > #sync-button {
910 -moz-image-region: rect(0px, 384px, 32px, 352px);
913 #sync-button[cui-areatype="menu-panel"]:hover,
914 toolbarpaletteitem[place="palette"] > #sync-button:hover {
915 -moz-image-region: rect(32px, 384px, 64px, 352px);
918 #sync-button[cui-areatype="menu-panel"][status="active"] {
919 list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
920 -moz-image-region: rect(0px, 32px, 32px, 0px);
923 #feed-button[cui-areatype="menu-panel"],
924 toolbarpaletteitem[place="palette"] > #feed-button {
925 -moz-image-region: rect(0px, 416px, 32px, 384px);
928 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
929 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
930 -moz-image-region: rect(32px, 416px, 64px, 384px);
933 #feed-button[cui-areatype="menu-panel"][disabled="true"],
934 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
935 -moz-image-region: rect(64px, 416px, 96px, 384px);
938 #social-share-button[cui-areatype="menu-panel"],
939 toolbarpaletteitem[place="palette"] > #social-share-button {
940 -moz-image-region: rect(0px, 448px, 32px, 416px);
943 #social-share-button[cui-areatype="menu-panel"]:hover,
944 toolbarpaletteitem[place="palette"] > #social-share-button:hover {
945 -moz-image-region: rect(32px, 448px, 64px, 416px);
948 #characterencoding-button[cui-areatype="menu-panel"],
949 toolbarpaletteitem[place="palette"] > #characterencoding-button {
950 -moz-image-region: rect(0px, 480px, 32px, 448px);
953 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
954 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
955 -moz-image-region: rect(32px, 480px, 64px, 448px);
958 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
959 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
960 -moz-image-region: rect(64px, 480px, 96px, 448px);
963 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
964 -moz-image-region: rect(32px, 480px, 64px, 448px);
967 #new-window-button[cui-areatype="menu-panel"],
968 toolbarpaletteitem[place="palette"] > #new-window-button {
969 -moz-image-region: rect(0px, 512px, 32px, 480px);
972 #new-window-button[cui-areatype="menu-panel"]:hover,
973 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
974 -moz-image-region: rect(32px, 512px, 64px, 480px);
977 #e10s-button[cui-areatype="menu-panel"],
978 toolbarpaletteitem[place="palette"] > #e10s-button {
979 -moz-image-region: rect(0px, 512px, 32px, 480px);
982 #e10s-button[cui-areatype="menu-panel"]:hover,
983 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
984 -moz-image-region: rect(32px, 512px, 64px, 480px);
987 #new-tab-button[cui-areatype="menu-panel"],
988 toolbarpaletteitem[place="palette"] > #new-tab-button {
989 -moz-image-region: rect(0px, 544px, 32px, 512px);
992 #new-tab-button[cui-areatype="menu-panel"]:hover,
993 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
994 -moz-image-region: rect(32px, 544px, 64px, 512px);
997 #privatebrowsing-button[cui-areatype="menu-panel"],
998 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
999 -moz-image-region: rect(0px, 576px, 32px, 544px);
1002 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1003 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1004 -moz-image-region: rect(32px, 576px, 64px, 544px);
1007 #tabview-button[cui-areatype="menu-panel"],
1008 toolbarpaletteitem[place="palette"] > #tabview-button {
1009 -moz-image-region: rect(0px, 608px, 32px, 576px);
1012 #tabview-button[cui-areatype="menu-panel"]:hover,
1013 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1014 -moz-image-region: rect(32px, 608px, 64px, 576px);
1017 #find-button[cui-areatype="menu-panel"],
1018 toolbarpaletteitem[place="palette"] > #find-button {
1019 -moz-image-region: rect(0px, 640px, 32px, 608px);
1022 #find-button[cui-areatype="menu-panel"]:hover,
1023 toolbarpaletteitem[place="palette"] > #find-button:hover {
1024 -moz-image-region: rect(32px, 640px, 64px, 608px);
1027 #print-button[cui-areatype="menu-panel"],
1028 toolbarpaletteitem[place="palette"] > #print-button {
1029 -moz-image-region: rect(0px, 672px, 32px, 640px);
1032 #print-button[cui-areatype="menu-panel"]:hover,
1033 toolbarpaletteitem[place="palette"] > #print-button:hover {
1034 -moz-image-region: rect(32px, 672px, 64px, 640px);
1037 #fullscreen-button[cui-areatype="menu-panel"],
1038 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1039 -moz-image-region: rect(0px, 704px, 32px, 672px);
1042 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1043 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1044 -moz-image-region: rect(32px, 704px, 64px, 672px);
1047 #developer-button[cui-areatype="menu-panel"],
1048 toolbarpaletteitem[place="palette"] > #developer-button {
1049 -moz-image-region: rect(0px, 736px, 32px, 704px);
1052 #developer-button[cui-areatype="menu-panel"]:hover,
1053 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1054 -moz-image-region: rect(32px, 736px, 64px, 704px);
1057 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1058 -moz-image-region: rect(32px, 736px, 64px, 704px);
1061 #preferences-button[cui-areatype="menu-panel"],
1062 toolbarpaletteitem[place="palette"] > #preferences-button {
1063 -moz-image-region: rect(0px, 768px, 32px, 736px);
1066 #preferences-button[cui-areatype="menu-panel"]:hover,
1067 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1068 -moz-image-region: rect(32px, 768px, 64px, 736px);
1071 #email-link-button[cui-areatype="menu-panel"],
1072 toolbarpaletteitem[place="palette"] > #email-link-button {
1073 -moz-image-region: rect(0, 800px, 32px, 768px);
1076 #email-link-button[cui-areatype="menu-panel"]:hover,
1077 toolbarpaletteitem[place="palette"] > #email-link-button:hover {
1078 -moz-image-region: rect(32px, 800px, 64px, 768px);
1081 #sidebar-button[cui-areatype="menu-panel"],
1082 toolbarpaletteitem[place="palette"] > #sidebar-button {
1083 -moz-image-region: rect(0, 864px, 32px, 832px);
1086 #sidebar-button[cui-areatype="menu-panel"]:hover,
1087 toolbarpaletteitem[place="palette"] > #sidebar-button:hover {
1088 -moz-image-region: rect(32px, 864px, 64px, 832px);
1091 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1092 -moz-image-region: rect(32px, 864px, 64px, 832px);
1095 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1096 -moz-image-region: rect(0, 832px, 32px, 800px);
1099 /* Wide panel control icons */
1101 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1102 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1103 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1104 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1105 list-style-image: url("chrome://browser/skin/menuPanel-small.png");
1108 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1109 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1110 -moz-image-region: rect(0px, 32px, 16px, 16px);
1113 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1114 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1115 -moz-image-region: rect(16px, 32px, 32px, 16px);
1118 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1119 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1120 -moz-image-region: rect(32px, 32px, 48px, 16px);
1123 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1124 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1125 -moz-image-region: rect(0px, 48px, 16px, 32px);
1128 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1129 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1130 -moz-image-region: rect(16px, 48px, 32px, 32px);
1133 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1134 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1135 -moz-image-region: rect(32px, 48px, 48px, 32px);
1138 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1139 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1140 -moz-image-region: rect(0px, 64px, 16px, 48px);
1143 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1144 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1145 -moz-image-region: rect(16px, 64px, 32px, 48px);
1148 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1149 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1150 -moz-image-region: rect(32px, 64px, 48px, 48px);
1153 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1154 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1155 -moz-image-region: rect(0px, 80px, 16px, 64px);
1158 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1159 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1160 -moz-image-region: rect(16px, 80px, 32px, 64px);
1163 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1164 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1165 -moz-image-region: rect(32px, 80px, 48px, 64px);
1168 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1169 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1170 -moz-image-region: rect(0px, 96px, 16px, 80px);
1173 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1174 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1175 -moz-image-region: rect(16px, 96px, 32px, 80px);
1178 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1179 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1180 -moz-image-region: rect(32px, 96px, 48px, 80px);
1183 /* === END menupanel.inc.css === */
1185 .toolbarbutton-1:not([type="menu-button"]) {
1186 -moz-box-orient: vertical;
1190 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1196 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1197 .toolbarbutton-1[disabled="true"]:hover:active,
1198 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1202 .toolbarbutton-1:hover:active,
1203 .toolbarbutton-1[open="true"],
1204 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1206 padding-bottom: 0px;
1207 -moz-padding-start: 3px;
1208 -moz-padding-end: 1px;
1211 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1212 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1213 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1214 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1215 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1218 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1219 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1222 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1223 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1226 .toolbarbutton-1 > .toolbarbutton-icon,
1227 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1230 #nav-bar .toolbarbutton-1,
1231 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1234 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1235 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1236 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1239 #nav-bar #PanelUI-menu-button {
1240 /* -moz-padding-start: 7px;
1241 -moz-padding-end: 5px;*/
1244 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button):not(#PanelUI-menu-button) {
1245 /* padding-left: 5px;
1246 padding-right: 5px;*/
1249 #nav-bar .toolbarbutton-1 > menupopup {
1250 /* margin-top: -3px;*/
1253 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1254 /* margin-top: -8px;*/
1257 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1258 /* -moz-padding-end: 0;*/
1261 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1262 /* -moz-padding-start: 0;
1263 -moz-box-align: center;*/
1266 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1267 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1268 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container,
1269 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1270 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1271 window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1272 /* padding: 2px 6px;
1274 border-color: transparent;
1275 transition-property: background-color, border-color;
1276 transition-duration: 150ms;*/
1279 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1280 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-container,
1281 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1286 /* Help SDK icons fit: */
1287 toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1291 #nav-bar toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1292 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1296 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button):not(#PanelUI-menu-button) > .toolbarbutton-icon,
1297 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1298 /* -moz-padding-end: 17px;*/
1301 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1304 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1307 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1310 #nav-bar .toolbaritem-combined-buttons {
1311 /* margin-left: 2px;
1312 margin-right: 2px;*/
1315 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1320 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1321 #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 {
1327 -moz-margin-end: -1px;
1331 window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1334 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1335 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1336 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1337 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1338 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container,
1339 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1340 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1343 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover:active > .toolbarbutton-icon,
1344 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1345 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1346 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1347 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container {
1350 #TabsToolbar .toolbarbutton-1,
1351 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1352 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1353 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1356 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1357 #TabsToolbar .toolbarbutton-1[open],
1358 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1359 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1360 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1363 /* unified back/forward button */
1368 #forward-button > menupopup {
1369 margin-top: 1px !important;
1372 #forward-button > .toolbarbutton-icon {
1373 background-clip: padding-box !important;
1374 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1375 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1379 -moz-margin-start: -6px !important;
1384 border-radius: 0 10000px 10000px 0;
1387 #forward-button:-moz-locale-dir(rtl) {
1388 border-radius: 10000px 0 0 10000px;
1391 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #forward-button,
1392 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1393 transition: opacity 150ms ease-out;
1396 window:not([chromehidden~="toolbar"]) #urlbar-container:not(:hover) > #forward-button[disabled=true],
1397 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled=true] {
1401 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button[occluded-by-urlbar],
1402 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[occluded-by-urlbar] {
1407 /* padding-top: 3px !important;
1408 padding-bottom: 3px !important;
1409 -moz-padding-start: 5px !important;
1410 -moz-padding-end: 0 !important;*/
1413 border-radius: 10000px;
1417 margin-bottom: -2px;
1420 #back-button:-moz-locale-dir(rtl) {
1423 #back-button > menupopup {
1424 margin-top: -1px !important;
1427 #back-button > .toolbarbutton-icon {
1428 border-radius: 10000px !important;
1429 background-clip: padding-box !important;
1430 /* background-color: hsla(210,25%,98%,.08) !important;
1431 padding: 6px !important;
1432 border-color: hsla(210,4%,10%,.25) !important;*/
1433 transition-property: background-color, border-color !important;
1434 transition-duration: 250ms !important;
1437 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1438 /* background-color: hsla(210,4%,10%,.08) !important;
1439 box-shadow: none !important;*/
1442 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1443 #back-button[open="true"] > .toolbarbutton-icon {
1444 /* background-color: hsla(210,4%,10%,.12) !important;
1445 box-shadow: 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1448 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
1449 #forward-button:-moz-locale-dir(rtl) {
1450 transform: scaleX(-1);
1453 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1454 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1455 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1458 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1459 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1460 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1463 #home-button.bookmark-item {
1464 list-style-image: url("chrome://browser/skin/Toolbar.png");
1467 #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),
1468 #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),
1469 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1470 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1471 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1472 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1473 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1476 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1479 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1480 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1481 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1485 #downloads-button > .toolbarbutton-icon {
1489 /* tabview button & menu item */
1492 list-style-image: url("chrome://browser/skin/tabview/tabview.png");
1493 -moz-image-region: rect(1px, 89px, 17px, 73px);
1496 #menu_tabview[groups="0"] {
1497 -moz-image-region: rect(1px, 17px, 17px, 1px);
1500 #menu_tabview[groups="1"] {
1501 -moz-image-region: rect(1px, 35px, 17px, 19px);
1504 #menu_tabview[groups="2"] {
1505 -moz-image-region: rect(1px, 53px, 17px, 37px);
1508 #menu_tabview[groups="3"] {
1509 -moz-image-region: rect(1px, 71px, 17px, 55px);
1512 /* zoom control text (reset) button special case: */
1514 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1515 /* To make this line up with the icons, it needs the same height (18px) +
1516 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1517 * increase in text sizes would break things...
1522 /* ::::: fullscreen window controls ::::: */
1525 -moz-margin-start: 4px;
1531 /* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1536 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1539 #minimize-button:hover {
1540 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1544 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1547 #restore-button:hover {
1548 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1552 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1555 #close-button:hover {
1556 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1559 /* ::::: Location Bar ::::: */
1562 .searchbar-textbox {
1565 -moz-margin-start: 3px;
1569 /* make color as light as possible to deal with dark non-domain parts */
1573 #urlbar:-moz-lwtheme,
1574 .searchbar-textbox:-moz-lwtheme {
1575 /* background-color: rgba(255,255,255,.8);
1576 @navbarTextboxCustomBorder@
1580 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1581 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1582 /* background-color: rgba(255,255,255,.9);*/
1585 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1586 .searchbar-textbox:-moz-lwtheme[focused] {
1587 /* background-color: white;*/
1590 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper,
1591 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1593 -moz-margin-start: -22px;
1595 pointer-events: none;
1598 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar,
1599 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1600 /* -moz-border-start: none;
1602 pointer-events: all;
1605 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #urlbar-wrapper > #urlbar,
1606 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #urlbar {
1607 transition: margin-left 150ms ease-out;
1610 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr),
1611 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1612 /* border-top-left-radius: 0;
1613 border-bottom-left-radius: 0; */
1616 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl),
1617 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1618 /* border-top-right-radius: 0;
1619 border-bottom-right-radius: 0; */
1622 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper,
1623 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] {
1624 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1627 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar,
1628 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar {
1632 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar,
1633 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:hover:not([switchingtabs]) > #urlbar {
1634 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1635 transition-delay: 100s;
1638 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar,
1639 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hover) > #urlbar {
1640 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1641 margin-left: -22.01px;
1644 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper:-moz-locale-dir(rtl),
1645 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl),
1646 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1647 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1648 /* let windows-urlbar-back-button-mask clip the urlbar's right side for RTL */
1649 transform: scaleX(-1);
1652 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1653 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1658 -moz-box-orient: horizontal;
1659 -moz-box-align: stretch;
1662 .urlbar-textbox-container {
1663 -moz-box-align: stretch;
1667 -moz-margin-start: 0;
1671 -moz-box-align: center;
1678 .searchbar-engine-button,
1679 .search-go-container {
1683 .search-go-container > .search-go-button {
1687 .urlbar-icon:hover {
1690 .urlbar-icon[open="true"],
1691 .urlbar-icon:hover:active {
1694 #urlbar-search-splitter {
1696 -moz-margin-start: -3px;
1698 background: transparent;
1701 #urlbar-search-splitter + #urlbar-container > #urlbar,
1702 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1703 -moz-margin-start: 0;
1706 #urlbar-display-box {
1710 -moz-border-end: 1px solid #9C9CFF;
1711 -moz-margin-end: 3px;
1714 -moz-margin-start: 0;
1719 min-width: calc(54px + 11ch);
1729 #identity-box:-moz-locale-dir(ltr) {
1730 /* border-top-left-radius: 1.5px;
1731 border-bottom-left-radius: 1.5px;*/
1734 #identity-box:-moz-locale-dir(rtl) {
1735 /* border-top-right-radius: 1.5px;
1736 border-bottom-right-radius: 1.5px;*/
1739 #notification-popup-box:not([hidden]) + #identity-box {
1740 -moz-padding-start: 10px !important;
1744 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box,
1745 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
1746 /* border-radius: 0; */
1747 -moz-padding-start: 2px;
1748 -moz-padding-end: 2px;
1749 -moz-margin-end: 1px;
1752 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1753 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr),
1754 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar >
1755 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1757 transition: padding-left;
1760 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1761 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl),
1762 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar >
1763 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1765 transition: padding-right;
1768 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar >
1769 #notification-popup-box[hidden] + #identity-box,
1770 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:hover:not([switchingtabs]) > #urlbar >
1771 #notification-popup-box[hidden] + #identity-box {
1772 /* forward button hiding is delayed when hovered */
1773 transition-delay: 100s;
1776 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1777 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr),
1778 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hover) > #urlbar >
1779 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1780 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1781 padding-left: 2.01px;
1784 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1785 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl),
1786 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hover) > #urlbar >
1787 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1788 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1789 padding-right: 2.01px;
1792 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1793 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1794 -moz-margin-end: 3px;
1797 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(ltr),
1798 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(ltr) {
1799 border-top-right-radius: 0;
1800 border-bottom-right-radius: 0;
1803 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl),
1804 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) {
1805 border-top-left-radius: 0;
1806 border-bottom-left-radius: 0;
1809 #identity-box.verifiedIdentity:not(:-moz-lwtheme) {
1810 background-color: #000000;
1813 #identity-box:-moz-focusring {
1814 outline: 1px dotted #008484;
1815 outline-offset: -1px;
1818 #identity-box.verifiedDomain:-moz-focusring,
1819 #identity-box.verifiedIdentity:-moz-focusring {
1820 outline-color: #000000;
1823 #identity-icon-labels {
1824 -moz-margin-start: 1px;
1825 -moz-margin-end: 3px;
1828 /* Location bar dropmarker */
1830 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1831 background-color: transparent;
1834 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1835 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker {
1840 .urlbar-history-dropmarker:hover {
1843 .urlbar-history-dropmarker:hover:active,
1844 .urlbar-history-dropmarker[open="true"] {
1847 /* page proxy icon */
1849 /* === BEGIN identity-block.inc.css === */
1851 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1852 /* Default theme does different color per channel, we can't as they do it build-time. */
1854 -moz-border-end: 1px solid #9C9CFF;
1857 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1859 -moz-border-end: 1px solid #008484;
1862 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1863 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1864 background-position: right;
1865 background-size: 1px;
1866 background-repeat: no-repeat;
1869 /* page proxy icon */
1871 #page-proxy-favicon {
1874 list-style-image: url("chrome://browser/skin/identity-icons-generic.png");
1878 .chromeUI > #page-proxy-favicon[pageproxystate="valid"] {
1879 list-style-image: url("chrome://branding/content/identity-icons-brand.png");
1882 .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] {
1883 list-style-image: url("chrome://browser/skin/identity-icons-https.png");
1886 .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] {
1887 list-style-image: url("chrome://browser/skin/identity-icons-https-ev.png");
1890 .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] {
1891 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-active.png");
1894 .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] {
1895 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1898 .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] {
1899 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1902 #page-proxy-favicon[pageproxystate="invalid"] {
1906 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
1907 list-style-image: url("chrome://branding/content/icon64.png");
1910 #identity-popup-brandName {
1914 margin-bottom: .5em;
1917 #identity-popup-content-box {
1921 /* === END identity-block.inc.css === */
1923 #page-proxy-favicon {
1924 -moz-image-region: rect(0, 16px, 16px, 0);
1927 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon,
1928 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
1929 /* -moz-margin-end: 1px;*/
1932 #identity-box:hover > #page-proxy-favicon {
1933 -moz-image-region: rect(0, 32px, 16px, 16px);
1936 #identity-box:hover:active > #page-proxy-favicon,
1937 #identity-box[open=true] > #page-proxy-favicon {
1938 -moz-image-region: rect(0, 48px, 16px, 32px);
1941 #identity-box:hover {
1942 background-color: #FFCF00;
1946 #identity-box:hover:active,
1947 #identity-box[open=true] {
1948 background-color: #FF9F00;
1952 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
1953 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
1954 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
1955 background-color: #9C9CFF;
1959 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
1960 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
1961 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
1962 background-color: #008484;
1968 #treecolAutoCompleteImage {
1972 .ac-result-type-bookmark,
1973 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
1974 list-style-image: url("chrome://browser/skin/places/bookmark.png");
1975 -moz-image-region: rect(0px 16px 16px 0px);
1980 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
1981 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
1982 /* -moz-image-region: rect(0px 48px 16px 32px);*/
1985 .ac-result-type-keyword,
1986 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
1987 list-style-image: url("chrome://global/skin/icons/Search-glass.png");
1988 -moz-image-region: rect(0px 32px 16px 16px);
1993 .ac-result-type-tag,
1994 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
1995 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2004 .ac-extra > .ac-comment {
2014 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2015 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2016 -moz-image-region: rect(0, 16px, 16px, 0);
2020 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2021 -moz-image-region: rect(16px, 16px, 32px, 0);
2024 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2028 .ac-comment[selected="true"],
2029 .ac-url-text[selected="true"],
2030 .ac-action-text[selected="true"] {
2031 color: inherit !important;
2034 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2035 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2041 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2042 border-top: 1px solid #9C9CFF;
2045 /* combined go/reload/stop button in location bar */
2047 #urlbar > toolbarbutton {
2048 -moz-margin-start: 0;
2050 background-origin: border-box;
2052 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
2053 -moz-border-start: 1px solid #9C9CFF;
2056 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2057 border-top-left-radius: 0px;
2058 border-bottom-left-radius: 0px;
2061 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2062 border-top-right-radius: 0px;
2063 border-bottom-right-radius: 0px;
2066 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2067 #urlbar-reload-button:not(:hover) {
2068 -moz-border-start-style: none;
2069 -moz-padding-start: 3px;
2072 #urlbar-reload-button {
2073 -moz-image-region: rect(0px, 14px, 14px, 0px);
2076 #urlbar-reload-button[disabled=true] {
2077 -moz-image-region: rect(28px, 14px, 42px, 0px);
2080 #urlbar-reload-button:not([disabled=true]):hover {
2081 -moz-image-region: rect(14px, 14px, 28px, 0px);
2084 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2085 transform: scaleX(-1);
2089 -moz-image-region: rect(0, 42px, 14px, 28px);
2092 #urlbar-go-button:hover {
2093 -moz-image-region: rect(14px, 42px, 28px, 28px);
2096 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2097 transform: scaleX(-1);
2100 #urlbar-stop-button {
2101 -moz-image-region: rect(0px, 28px, 14px, 14px);
2104 #urlbar-stop-button:hover {
2105 -moz-image-region: rect(14px, 28px, 28px, 14px);
2108 /* popup blocker button */
2110 #page-report-button {
2111 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2112 -moz-image-region: rect(0, 16px, 16px, 0);
2115 #page-report-button:hover ,
2116 #page-report-button:hover:active,
2117 #page-report-button[open="true"] {
2118 -moz-image-region: rect(0, 32px, 16px, 16px);
2121 /* social share panel */
2123 #social-share-panel > iframe {
2124 /* background: linear-gradient(to bottom, #f0f4f7, #fafbfc);*/
2129 .social-share-toolbar {
2130 border-right: 1px solid #9C9CFF;
2131 /* background-color: #000000; */
2134 #social-share-provider-buttons {
2138 #social-share-provider-buttons > .share-provider-button {
2139 -moz-appearance: none;
2147 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]),
2148 #social-share-provider-buttons > .share-provider-button:hover,
2149 #social-share-provider-buttons > .share-provider-button:active {
2153 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]) {
2156 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-text {
2159 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon {
2165 toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
2172 /* fixup corners for share panel */
2173 .social-panel > .social-panel-frame {
2174 border-radius: inherit;
2177 #social-share-panel {
2184 .social-share-frame {
2185 /* background: linear-gradient(to bottom, #f0f4f7, #fafbfc); */
2188 /* we resize our panels dynamically, make it look nice */
2189 transition: height 100ms ease-out, width 100ms ease-out;
2192 .social-share-frame:-moz-locale-dir(ltr) {
2193 border-top-left-radius: 0;
2194 border-bottom-left-radius: 0;
2195 border-top-right-radius: inherit;
2196 border-bottom-right-radius: inherit;
2199 .social-share-frame:-moz-locale-dir(rtl) {
2200 border-top-left-radius: inherit;
2201 border-bottom-left-radius: inherit;
2202 border-top-right-radius: 0;
2203 border-bottom-right-radius: 0;
2206 #social-share-panel > .social-share-toolbar:-moz-locale-dir(ltr) {
2207 border-top-left-radius: inherit;
2208 border-bottom-left-radius: inherit;
2211 #social-share-panel > .social-share-toolbar:-moz-locale-dir(rtl) {
2212 border-top-right-radius: inherit;
2213 border-bottom-right-radius: inherit;
2216 #social-share-provider-buttons:-moz-locale-dir(ltr) {
2217 border-top-left-radius: inherit;
2218 border-bottom-left-radius: inherit;
2221 #social-share-provider-buttons:-moz-locale-dir(rtl) {
2222 border-top-right-radius: inherit;
2223 border-bottom-right-radius: inherit;
2226 /* social recommending panel */
2228 #social-mark-button {
2229 -moz-image-region: rect(0, 16px, 16px, 0);
2232 /* bookmarks menu-button */
2234 #bookmarks-menu-button.bookmark-item {
2235 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2236 -moz-image-region: rect(0px 16px 16px 0px);
2239 #bookmarks-menu-button.bookmark-item[starred] {
2240 -moz-image-region: rect(0px 32px 16px 16px);
2243 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
2244 -moz-margin-start: 5px;
2247 #bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2249 padding-bottom: 2px;
2252 #BMB_bookmarksPopup[side="top"],
2253 #BMB_bookmarksPopup[side="bottom"] {
2255 margin-right: -20px;
2258 #BMB_bookmarksPopup[side="left"],
2259 #BMB_bookmarksPopup[side="right"] {
2261 margin-bottom: -20px;
2264 /* bookmarking panel */
2266 #editBookmarkPanelStarIcon {
2267 list-style-image: url("chrome://browser/skin/places/starred48.png");
2272 #editBookmarkPanelStarIcon[unstarred] {
2273 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2276 #editBookmarkPanelTitle {
2280 #editBookmarkPanelHeader,
2281 #editBookmarkPanelContent {
2282 margin-bottom: .5em;
2285 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2286 #editBMPanel_folderTree {
2293 border-top: 1px solid #9C9CFF;
2294 border-bottom-left-radius: 5px;
2295 border-bottom-right-radius: 5px;
2299 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2300 -moz-margin-end: 10px;
2301 vertical-align: middle;
2304 .panel-promo-closebutton {
2305 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2306 -moz-margin-end: -3px;
2310 .panel-promo-closebutton:hover {
2311 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2314 .panel-promo-closebutton:hover:active {
2315 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2318 .panel-promo-closebutton > .toolbarbutton-text {
2323 /* ::::: content area ::::: */
2326 background-color: Window;
2330 -moz-padding-start: 0px;
2333 .browserContainer > findbar {
2335 background-color: -moz-dialog;
2336 color: -moz-DialogText;
2345 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2348 #TabsToolbar .toolbar-holder {
2349 background-color: #000000; /* correct effect of being an actual toolbar */
2352 #main-window[disablechrome] #TabsToolbar,
2353 #TabsToolbar[tabsontop="false"] {
2354 border-bottom: 1px solid #008484;
2357 #main-window:not([customizing]) #TabsToolbar:not(:-moz-lwtheme) {
2360 #main-window[tabsintitlebar] #TabsToolbar {
2361 background-color: transparent;
2364 /* === BEGIN tabs.inc.css === */
2367 .tabs-newtab-button,
2368 #TabsToolbar > #new-tab-button {
2373 padding: 1px 4px 2px;
2376 .tabbrowser-tab:first-of-type {
2377 -moz-margin-start: 2px;
2380 .tabs-newtab-button,
2381 #TabsToolbar > #new-tab-button {
2382 border-radius: 8px 8px 0px 0px;
2383 -moz-margin-start: 0;
2386 .tabs-newtab-button:not(:hover),
2387 #TabsToolbar > #new-tab-button:not(:hover) {
2388 background-color: #C09070;
2391 .tabbrowser-tab[remote] {
2392 text-decoration: underline;
2395 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2396 .tabbrowser-tab[selected=true] {
2397 /* position: relative;
2401 .tab-background-middle {
2419 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2423 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2426 .tab-throbber[progress] {
2427 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2430 .tab-throbber:not([pinned]),
2431 .tab-icon-image:not([pinned]) {
2432 -moz-margin-end: 3px;
2435 .tab-throbber[pinned],
2436 .tab-icon-image[pinned] {
2437 -moz-margin-start: 2px;
2438 -moz-margin-end: 2px;
2450 .tabs-newtab-button {
2451 /* overlap the tab curves */
2454 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2457 .tab-background-start[selected=true]::after,
2458 .tab-background-start[selected=true]::before,
2459 .tab-background-start,
2460 .tab-background-end,
2461 .tab-background-end[selected=true]::after,
2462 .tab-background-end[selected=true]::before {
2465 .tabbrowser-tab:not([selected=true]),
2466 .tabbrowser-tab:-moz-lwtheme {
2469 /* tabbrowser-tab focus ring */
2470 .tabbrowser-tab:focus {
2471 outline: 1px dotted;
2476 .tabbrowser-tab[selected="true"] {
2479 /* End selected tab */
2481 /* Background tabs */
2483 /* Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
2484 of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
2485 the titlebar. We don't need this in fullscreen since window dragging is not an issue there. */
2486 #main-window[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) #toolbar-menubar:-moz-any([autohide="true"][inactive], :not([autohide])) + #TabsToolbar .tab-background-middle:not([selected=true]) {
2489 /* End background tabs */
2491 /* Tab pointer-events */
2494 pointer-events: none;
2497 .tab-background-middle,
2498 .tabs-newtab-button,
2500 pointer-events: auto;
2505 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
2506 background-color: #E7ADE7;
2509 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
2510 background-color: #3333FF;
2514 /* New tab button */
2516 .tabs-newtab-button {
2520 /* === END tabs.inc.css === */
2522 /* Tab DnD indicator */
2523 .tab-drop-indicator {
2524 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
2525 margin-bottom: -11px;
2528 /* Tab close button */
2530 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2533 .tab-close-button:hover,
2534 .tab-close-button:hover[selected="true"] {
2535 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2538 .tab-close-button:hover:active,
2539 .tab-close-button:hover:active[selected="true"] {
2540 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2543 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
2545 .tabbrowser-arrowscrollbox > .scrollbutton-up,
2546 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2550 background-origin: border-box;
2553 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2554 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2555 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
2556 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
2559 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
2560 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
2563 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
2564 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
2565 /* transform: scaleX(-1);*/
2568 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2569 transition: 1s background-color ease-out;
2572 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
2573 background-color: #008484;
2576 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
2577 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
2578 /* border-width: 0 2px 0 0;
2579 border-style: solid;
2580 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
2583 .tabs-newtab-button > .toolbarbutton-icon {
2585 margin-bottom: -1px;
2588 .tabs-newtab-button,
2589 #TabsToolbar > #new-tab-button,
2590 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2591 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2592 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.png");
2593 -moz-image-region: rect(0, 16px, 18px, 0);
2596 .tabs-newtab-button,
2597 .tabs-newtab-button:hover,
2598 #TabsToolbar > #new-tab-button,
2599 #TabsToolbar > #new-tab-button:hover {
2600 -moz-image-region: rect(0, 32px, 18px, 16px);
2603 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2604 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2605 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2606 .tabs-newtab-button:-moz-lwtheme-brighttext,
2607 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
2608 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
2611 #TabsToolbar > #new-tab-button {
2616 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
2619 #alltabs-button:hover,
2620 #alltabs-button:hover:active,
2621 #alltabs-button[open="true"] {
2622 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
2625 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2626 #alltabs-button:-moz-lwtheme-brighttext {
2629 #alltabs-button > .toolbarbutton-icon {
2633 #alltabs-button > .toolbarbutton-menu-dropmarker {
2637 /* All tabs menupopup */
2638 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
2639 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2640 -moz-image-region: auto;
2643 .alltabs-item[selected="true"] {
2647 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
2648 list-style-image: url("chrome://global/skin/icons/loading.gif");
2651 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
2652 background-color: #402800;
2655 /* Tabstrip close button */
2660 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2663 .tabs-closebutton > .toolbarbutton-icon {
2666 .tabs-closebutton > .toolbarbutton-text {
2670 .tabs-closebutton:hover,
2671 .tabs-closebutton:hover:active {
2672 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2675 toolbarbutton.chevron {
2676 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
2679 toolbarbutton.chevron:hover {
2680 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
2683 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2684 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
2685 transform: scaleX(-1);
2688 toolbarbutton.chevron > .toolbarbutton-text,
2689 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
2693 toolbarbutton.chevron > .toolbarbutton-icon {
2697 #sidebar-throbber[loading="true"] {
2698 list-style-image: url("chrome://global/skin/icons/loading.gif");
2699 -moz-margin-end: 4px;
2702 /* Bookmarks toolbar */
2703 #PlacesToolbarDropIndicator {
2704 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
2707 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
2708 background-color: #008484 !important;
2709 color: #FFCF00 !important;
2712 /* rules for menupopup drop indicators */
2713 .menupopup-drop-indicator-bar {
2715 /* these two margins must together compensate the indicator's height */
2717 margin-bottom: -1px;
2720 .menupopup-drop-indicator {
2721 list-style-image: none;
2723 -moz-margin-end: -4em;
2724 background-color: #008484;
2727 /* ::::: Identity Indicator Styling ::::: */
2730 #identity-popup-icon {
2734 list-style-image: url("chrome://browser/skin/identity.png");
2735 -moz-image-region: rect(0px, 64px, 64px, 0px);
2738 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
2739 -moz-image-region: rect(64px, 64px, 128px, 0px);
2742 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
2743 -moz-image-region: rect(128px, 64px, 192px, 0px);
2746 /* Popup Body Text */
2747 .identity-popup-description {
2748 white-space: pre-wrap;
2749 -moz-padding-start: 15px;
2753 .identity-popup-label {
2754 white-space: pre-wrap;
2755 -moz-padding-start: 15px;
2759 #identity-popup-content-host,
2760 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
2764 #identity-popup-content-host {
2771 #identity-popup-content-owner {
2773 margin-bottom: 0 !important;
2778 .verifiedDomain > #identity-popup-content-owner {
2779 font-weight: normal;
2782 #identity-popup-content-verifier {
2786 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
2787 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
2789 -moz-margin-start: -24px;
2792 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
2793 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
2794 list-style-image: url("chrome://browser/skin/Secure24.png");
2797 #identity-popup-help-icon {
2799 margin: 7px 0 0 -3px;
2802 list-style-image: url("chrome://global/skin/icons/question-16.png");
2806 #identity-popup-help-icon > .button-box > .button-text {
2810 #identity-popup-help-icon > .button-box > .button-icon {
2815 #identity-popup-more-info-button {
2821 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
2825 #identity-popup-container {
2830 #identity-popup-button-container {
2831 /* background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent);*/
2836 .popup-notification-icon {
2839 -moz-margin-end: 10px;
2842 .popup-notification-icon[popupid="geolocation"] {
2843 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
2846 .popup-notification-icon[popupid="xpinstall-disabled"],
2847 .popup-notification-icon[popupid="addon-progress"],
2848 .popup-notification-icon[popupid="addon-install-cancelled"],
2849 .popup-notification-icon[popupid="addon-install-blocked"],
2850 .popup-notification-icon[popupid="addon-install-failed"],
2851 .popup-notification-icon[popupid="addon-install-complete"] {
2852 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
2857 .popup-notification-icon[popupid="click-to-play-plugins"] {
2858 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
2861 .popup-notification-icon[popupid="plugins-not-found"] {
2862 list-style-image: url("chrome://browser/skin/pluginInstall-64.png");
2865 .popup-notification-icon[popupid="web-notifications"] {
2866 list-style-image: url("chrome://browser/skin/notification-64.png");
2869 .addon-progress-description {
2874 .popup-progress-label,
2875 .popup-progress-meter {
2876 -moz-margin-start: 0;
2880 .popup-progress-cancel {
2881 -moz-appearance: none;
2882 background: transparent;
2888 list-style-image: url("chrome://mozapps/skin/downloads/downloadButtons.png");
2889 -moz-image-region: rect(0px, 32px, 16px, 16px);
2892 .popup-progress-cancel:hover {
2893 -moz-image-region: rect(16px, 32px, 32px, 16px);
2896 .popup-progress-cancel:active {
2897 -moz-image-region: rect(32px, 32px, 48px, 16px);
2900 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
2901 .popup-notification-icon[popupid="indexedDB-quota-prompt"],
2902 .popup-notification-icon[popupid*="offline-app-requested"],
2903 .popup-notification-icon[popupid="offline-app-usage"] {
2904 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
2907 .popup-notification-icon[popupid="password-save"],
2908 .popup-notification-icon[popupid="password-change"] {
2909 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
2912 .popup-notification-icon[popupid="webapps-install-progress"],
2913 .popup-notification-icon[popupid="webapps-install"] {
2914 list-style-image: url("chrome://global/skin/icons/webapps-64.png");
2917 .popup-notification-icon[popupid="mixed-content-blocked"] {
2918 list-style-image: url("chrome://browser/skin/mixed-content-blocked-64.png");
2921 .popup-notification-icon[popupid="webRTC-sharingDevices"],
2922 .popup-notification-icon[popupid="webRTC-shareDevices"] {
2923 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
2926 .popup-notification-icon[popupid="pointerLock"] {
2927 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
2930 /* Notification icon box */
2931 #notification-popup-box {
2933 background-color: #000000;
2934 background-clip: padding-box;
2937 border-radius: 3px 0 0 3px;
2938 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
2939 -moz-margin-end: -8px;
2940 border-right-width: 8px;
2943 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #notification-popup-box,
2944 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar > #notification-popup-box {
2945 /* padding-left: 5px; */
2948 #notification-popup-box:-moz-locale-dir(rtl),
2949 .notification-anchor-icon:-moz-locale-dir(rtl) {
2950 transform: scaleX(-1);
2953 .notification-anchor-icon {
2959 .notification-anchor-icon:-moz-focusring {
2960 outline: 1px dotted #008484;
2961 /* outline-offset: -3px; */
2964 .default-notification-icon,
2965 #default-notification-icon {
2966 list-style-image: url("chrome://global/skin/icons/information-16.png");
2969 .identity-notification-icon,
2970 #identity-notification-icon {
2971 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
2974 .geo-notification-icon,
2975 #geo-notification-icon {
2976 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
2979 #addons-notification-icon {
2980 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png");
2983 .indexedDB-notification-icon,
2984 #indexedDB-notification-icon {
2985 list-style-image: url("chrome://global/skin/icons/question-16.png");
2988 #password-notification-icon {
2989 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
2992 #webapps-notification-icon {
2993 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
2996 #plugins-notification-icon {
2997 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3000 #plugins-notification-icon.plugin-hidden {
3001 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3004 #plugins-notification-icon.plugin-blocked {
3005 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3008 #plugins-notification-icon {
3009 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
3012 #plugins-notification-icon:hover {
3013 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
3016 #plugin-install-notification-icon {
3017 list-style-image: url("chrome://browser/skin/pluginInstall-16.png");
3020 #notification-popup-box[hidden] {
3021 /* Override display:none to make the pluginBlockedNotification animation work
3022 when showing the notification repeatedly. */
3024 visibility: collapse;
3027 #plugins-notification-icon.plugin-blocked[showing] {
3028 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3031 @keyframes pluginBlockedNotification {
3040 .mixed-content-blocked-notification-icon,
3041 #mixed-content-blocked-notification-icon {
3042 list-style-image: url("chrome://browser/skin/mixed-content-blocked-16.png");
3045 .webRTC-shareDevices-notification-icon,
3046 #webRTC-shareDevices-notification-icon {
3047 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3050 .webRTC-sharingDevices-notification-icon,
3051 #webRTC-sharingDevices-notification-icon {
3052 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3055 .web-notifications-notification-icon,
3056 #web-notifications-notification-icon {
3057 list-style-image: url("chrome://browser/skin/notification-16.png");
3060 #pointerLock-notification-icon {
3061 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3063 #pointerLock-cancel {
3067 /* Bookmarks roots menu-items */
3068 #subscribeToPageMenuitem:not([disabled]),
3069 #subscribeToPageMenupopup,
3070 #BMB_subscribeToPageMenuitem:not([disabled]),
3071 #BMB_subscribeToPageMenupopup {
3072 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3075 #bookmarksToolbarFolderMenu,
3076 #BMB_bookmarksToolbar,
3077 #panelMenu_bookmarksToolbar {
3078 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3079 -moz-image-region: auto;
3082 #BMB_unsortedBookmarks,
3083 #panelMenu_unsortedBookmarks {
3084 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3085 -moz-image-region: auto;
3088 /* ::::: Keyboard UI Panel ::::: */
3093 border-radius: 20px;
3096 .KUI-panel[level="top"] {
3097 /*background-color: rgba(27%,27%,27%,.65);*/
3103 padding: 20px 10px 10px;
3107 .ctrlTab-favicon[src] {
3108 background-color: #000000;
3114 .ctrlTab-preview-inner > .tabPreview-canvas {
3117 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3121 .ctrlTab-preview-inner {
3122 padding-bottom: 10px;
3125 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3127 background-color: #000000;
3128 border-radius: .5em;
3131 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3133 background-color: #000000;
3136 border: 2px solid #9C9CFF;
3137 border-radius: .5em;
3140 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3141 margin: -10px -10px 0;
3152 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3160 .sync-panel-button-box {
3164 #sync-error-panel-title,
3165 #sync-start-panel-title {
3169 #sync-start-panel-subtitle,
3170 #sync-error-panel-subtitle {
3176 .statuspanel-label {
3179 background: #404000;
3180 border: 1px none #9C9CFF;
3181 border-top-style: solid;
3186 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3187 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3188 border-right-style: solid;
3189 border-top-right-radius: .3em;
3193 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3194 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3195 border-left-style: solid;
3196 border-top-left-radius: .3em;
3200 /* HACK to abolish devily color on main content */
3203 background-color: transparent !important;
3206 /* === BEGIN highlighter.inc.css === */
3210 .highlighter-outline {
3211 box-shadow: 0 0 0 1px black;
3212 outline: 1px dashed #A09090;
3215 /* Highlighter - Node Infobar */
3217 .highlighter-nodeinfobar {
3220 background-color: #000000;
3221 background-clip: padding-box;
3222 border: 1px solid #008484;
3224 /* Avoid cases where the infobar is smaller than the arrow, when the text is
3229 /* Highlighter - Node Infobar - text */
3231 .highlighter-nodeinfobar-text {
3233 /* 100% - size of the buttons and margins */
3234 max-width: calc(100% - 2 * (26px + 6px));
3235 padding-bottom: 1px;
3238 html|*.highlighter-nodeinfobar-tagname {
3242 html|*.highlighter-nodeinfobar-id {
3246 html|*.highlighter-nodeinfobar-pseudo-classes {
3250 /* Highlighter - Node Infobar - box & arrow */
3252 .highlighter-nodeinfobar-arrow {
3255 -moz-margin-start: calc(50% - 7px);
3256 transform: rotate(-45deg);
3257 background-clip: padding-box;
3258 background-repeat: no-repeat;
3261 .highlighter-nodeinfobar-arrow-top {
3262 margin-bottom: -8px;
3264 background-image: linear-gradient(to bottom left, transparent 50%, rgb(0, 132, 132) 50%);
3267 .highlighter-nodeinfobar-arrow-bottom {
3270 background-image: linear-gradient(to top right, transparent 50%, rgb(0, 132, 132) 50%);
3273 .highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
3277 /* === END highlighter.inc.css === */
3279 #full-screen-warning-message {
3280 background-color: #000000;
3285 box-shadow: 0 0 2px #9C9CFF;
3288 #full-screen-warning-container[obscure-browser] {
3289 background-color: rgba(0,0,0,0.3);
3292 .full-screen-description {
3296 #full-screen-domain-text {
3300 .full-screen-approval-button,
3301 #full-screen-remember-decision {
3305 /* === BEGIN commandline.inc.css === */
3307 /* Developer toolbar */
3309 #developer-toolbar {
3310 border-top: 3px solid #000000;
3311 border-bottom: none;
3314 #developer-toolbar .toolbar-holder {
3315 background-color: #8050B0;
3319 #developer-toolbar .toolbar-holder {
3320 background-color: #8050B0;
3324 #developer-toolbar .toolbar-startcap,
3325 #developer-toolbar .toolbar-endcap{
3326 background-color: #6000CF;
3329 #developer-toolbar {
3331 min-height: 32px; */
3334 #developer-toolbar > toolbarbutton {
3340 .developer-toolbar-button > image {
3341 /* margin: auto 10px; */
3344 #developer-toolbar-toolbox-button > label {
3348 #developer-toolbar-toolbox-button {
3349 list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
3350 -moz-image-region: rect(0px, 16px, 16px, 0px);
3353 #developer-toolbar-toolbox-button > label {
3357 #developer-toolbar-toolbox-button:hover,
3358 #developer-toolbar-toolbox-button:hover:active,
3359 #developer-toolbar-toolbox-button[checked=true] {
3360 -moz-image-region: rect(0px, 32px, 16px, 16px);
3363 #developer-toolbar-closebutton {
3364 list-style-image: url("chrome://browser/skin/devtools/close.png");
3365 -moz-image-region: rect(0px, 16px, 16px, 0px);
3370 #developer-toolbar-closebutton > .toolbarbutton-icon {
3373 #developer-toolbar-closebutton > .toolbarbutton-text {
3377 #developer-toolbar-closebutton:hover,
3378 #developer-toolbar-closebutton:hover:active {
3379 -moz-image-region: rect(0px, 32px, 16px, 16px);
3384 html|*#gcli-tooltip-frame,
3385 html|*#gcli-output-frame {
3388 background-color: transparent;
3394 background-color: transparent;
3397 .gclitoolbar-input-node,
3398 .gclitoolbar-complete-node {
3400 -moz-box-align: center;
3404 background-color: transparent;
3407 .gclitoolbar-input-node {
3409 /* line-height: 32px;
3410 outline-style: none; */
3411 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0);
3412 background-repeat: no-repeat;
3413 background-color: rgba(0, 0, 0, .75);
3416 .gclitoolbar-input-node[focused="true"] {
3417 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
3418 background-color: #000000;
3421 .gclitoolbar-input-node:not([focused="true"]) {
3422 border-color: transparent;
3425 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3426 background-color: #008484;
3431 .gclitoolbar-complete-node {
3433 background-color: transparent;
3436 pointer-events: none;
3439 .gcli-in-incomplete,
3443 .gcli-in-closebrace,
3450 .gcli-in-incomplete {
3451 border-bottom: 2px dotted #8050B0;
3455 border-bottom: 2px dotted #FF0000;
3466 .gcli-in-closebrace {
3470 /* === END commandline.inc.css === */
3472 /* === BEGIN responsivedesign.inc.css === */
3474 /* Responsive Mode */
3476 .browserContainer[responsivemode] {
3477 background: #221500 url("chrome://browser/skin/devtools/responsive-background.png");
3478 padding: 0 20px 20px 20px;
3481 .browserStack[responsivemode] {
3482 box-shadow: 0 0 7px #9C9CFF;
3485 .devtools-responsiveui-toolbar {
3486 background: transparent;
3487 /* text color is textColor from dark theme, since no theme is applied to
3488 * the responsive toolbar.
3494 border-bottom-width: 0;
3497 .devtools-responsiveui-menulist,
3498 .devtools-responsiveui-toolbarbutton {
3499 -moz-box-align: center;
3501 /* min-height: 22px;*/
3502 /* margin: 0 3px; */
3505 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
3506 -moz-box-orient: horizontal;
3509 .devtools-responsiveui-menulist:-moz-focusring,
3510 .devtools-responsiveui-toolbarbutton:-moz-focusring {
3511 /* outline: 1px dotted hsla(210,30%,85%,0.7);
3512 outline-offset: -4px;*/
3515 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
3519 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
3520 /* border-color: hsla(210,8%,5%,.6);
3521 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
3522 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); */
3525 .devtools-responsiveui-menulist[open=true],
3526 .devtools-responsiveui-toolbarbutton[open=true],
3527 .devtools-responsiveui-toolbarbutton[checked=true] {
3528 /* border-color: hsla(210,8%,5%,.6) !important;
3529 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
3530 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); */
3533 .devtools-responsiveui-toolbarbutton[checked=true] {
3534 /* color: hsl(208,100%,60%); */
3537 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
3538 /* background-color: transparent !important;*/
3541 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
3542 /* background-color: hsla(210,8%,5%,.2) !important;*/
3545 .devtools-responsiveui-menulist > .menulist-label-box {
3549 .devtools-responsiveui-menulist > .menulist-dropmarker {
3550 /* display: -moz-box;
3551 background-color: transparent;
3552 list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3553 -moz-box-align: center;
3558 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
3561 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
3562 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
3565 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
3566 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
3569 .devtools-responsiveui-toolbarbutton[type=menu-button] {
3570 /* padding: 0 1px;*/
3571 -moz-box-align: stretch;
3574 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
3575 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
3576 /* list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3577 -moz-box-align: center;
3581 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
3582 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
3586 .devtools-responsiveui-close {
3587 list-style-image: url("chrome://browser/skin/devtools/close.png");
3588 -moz-image-region: rect(0px,16px,16px,0px);
3591 .devtools-responsiveui-close:hover {
3592 -moz-image-region: rect(0px,32px,16px,16px);
3595 .devtools-responsiveui-rotate {
3596 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
3597 -moz-image-region: rect(0px,16px,16px,0px);
3600 .devtools-responsiveui-rotate:hover {
3601 -moz-image-region: rect(0px,32px,16px,16px);
3604 .devtools-responsiveui-touch {
3605 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
3606 -moz-image-region: rect(0px,16px,16px,0px);
3609 .devtools-responsiveui-touch:hover,
3610 .devtools-responsiveui-touch[checked],
3611 .devtools-responsiveui-touch[checked]:hover {
3612 -moz-image-region: rect(0px,32px,16px,16px);
3615 .devtools-responsiveui-screenshot {
3616 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
3617 -moz-image-region: rect(0px,16px,16px,0px);
3620 .devtools-responsiveui-screenshot:hover {
3621 -moz-image-region: rect(0px,32px,16px,16px);
3624 .devtools-responsiveui-resizebarV {
3628 transform: translate(12px, -12px);
3629 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
3632 .devtools-responsiveui-resizebarH {
3636 transform: translate(-12px, 12px);
3637 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
3640 .devtools-responsiveui-resizehandle {
3644 transform: translate(12px, 12px);
3645 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
3648 /* === END responsivedesign.inc.css === */
3650 /* === including indicator.css is done at the start of the file === */
3654 #developer-toolbar-toolbox-button[error-count]:before {
3658 background-color: #FF0000;
3660 -moz-margin-end: 5px;
3663 /* Social toolbar item */
3665 #social-provider-button {
3666 -moz-image-region: rect(0, 16px, 16px, 0);
3667 list-style-image: url("chrome://browser/skin/social/services-16.png");
3670 #social-provider-button > .toolbarbutton-menu-dropmarker {
3674 .toolbarbutton-badge-container {
3680 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container {
3684 .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbar-icon {
3690 .toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
3694 .toolbarbutton-badge[badge=""] {
3697 .toolbarbutton-badge[badge]:not([badge=""])::after {
3698 /* The |content| property is set in the content stylesheet. */
3703 background-color: #000000;
3704 border: 1px solid #9C9CFF;
3711 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""])::after {
3716 .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3721 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3726 #social-notification-icon-mentions {
3727 background-color: #000000;
3729 -moz-margin-start: 2px;
3732 #social-notification-icon-mentions:hover {
3733 background-color: #FFCF00;
3736 #social-notification-icon-mentions[open="true"] {
3737 background-color: #FF9F00;
3740 #social-sidebar-splitter {
3744 .popup-notification-icon[popupid="servicesInstall"] {
3745 list-style-image: url("chrome://browser/skin/social/services-64.png");
3747 #servicesInstall-notification-icon {
3748 list-style-image: url("chrome://browser/skin/social/services-16.png");
3750 #social-undoactivation-button,
3751 #servicesInstall-learnmore-link {
3752 -moz-margin-start: 0; /* override default label margin to match description margin */
3755 #socialActivatedNotification .popup-notification-button-container {
3759 .social-activation-icon {
3766 #social-activation-message {
3770 #social-activation-message > label {
3774 /* social toolbar provider menu */
3775 .social-statusarea-popup {
3778 margin-right: -12px;
3781 .social-statusarea-user {
3782 border-bottom: 1px solid #9C9CFF;
3783 background-color: #000000;
3789 .social-statusarea-user-portrait {
3796 .social-statusarea-loggedInStatus {
3797 background: transparent;
3802 list-style-image: none;
3805 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
3806 text-decoration: underline;
3809 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
3813 .social-panel-frame {
3814 border-radius: inherit;
3817 /* === BEGIN chat.inc.css === */
3819 #social-sidebar-header {
3823 #social-sidebar-button {
3824 -moz-appearance: none;
3825 list-style-image: url("chrome://browser/skin/social/gear_default.png");
3830 #social-sidebar-button > .toolbarbutton-icon {
3834 #social-sidebar-button:hover,
3835 #social-sidebar-button:hover:active {
3836 list-style-image: url("chrome://browser/skin/social/gear_clicked.png");
3838 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
3842 #social-sidebar-button[loading="true"] {
3843 list-style-image: url("chrome://global/skin/icons/loading.gif");
3846 #social-sidebar-favico {
3859 .chat-toolbarbutton {
3860 -moz-appearance: none;
3868 .chat-toolbarbutton > .toolbarbutton-text {
3872 .chat-toolbarbutton > .toolbarbutton-icon {
3876 .chat-toolbarbutton.notification-anchor-icon > .toolbarbutton-icon {
3881 .chat-close-button {
3882 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3883 -moz-image-region: rect(0, 16px, 16px, 0);
3886 .chat-close-button:hover,
3887 .chat-close-button:hover:active {
3888 -moz-image-region: rect(0, 32px, 16px, 16px);
3891 .chat-minimize-button {
3892 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3893 -moz-image-region: rect(16px, 16px, 32px, 0);
3896 .chat-minimize-button:hover:active,
3897 .chat-minimize-button:hover {
3898 -moz-image-region: rect(16px, 32px, 32px, 16px);
3902 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3903 -moz-image-region: rect(48px, 16px, 64px, 0);
3906 .chat-swap-button:hover:active,
3907 .chat-swap-button:hover {
3908 -moz-image-region: rect(48px, 32px, 64px, 16px);
3911 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
3912 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3913 -moz-image-region: rect(32px, 16px, 48px, 0);
3916 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover:active,
3917 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover {
3918 -moz-image-region: rect(32px, 32px, 48px, 16px);
3923 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3929 background-color: #9C9CFF;
3936 -moz-padding-start: 6px;
3938 border-bottom: 1px solid #008484;
3942 .chat-titlebar > .notification-anchor-icon {
3947 .chat-titlebar[minimized="true"] {
3948 border-bottom: none;
3951 .chat-titlebar[selected] {
3952 background-color: #008484;
3955 .chat-titlebar[activity] {
3956 background-color: #E7ADE7;
3966 list-style-image: url("chrome://browser/skin/social/services-16.png");
3967 background-color: #000000;
3973 border-top: 1px solid #008484;
3974 -moz-border-end: 1px solid #008484;
3977 @media (min-resolution: 2dppx) {
3979 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
3983 .chatbar-button > .toolbarbutton-icon {
3987 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
3994 .chatbar-button > .toolbarbutton-icon {
3998 .chatbar-button:hover > .toolbarbutton-icon,
3999 .chatbar-button[open="true"] > .toolbarbutton-icon {
4003 .chatbar-button:hover,
4004 .chatbar-button[open="true"] {
4007 .chatbar-button > .toolbarbutton-text,
4008 .chatbar-button > .toolbarbutton-menu-dropmarker {
4012 .chatbar-button[activity]:not([open="true"]) {
4013 background-color: #E7ADE7;
4016 .chatbar-button > menupopup > menuitem[activity] {
4021 background: transparent;
4027 -moz-margin-end: 20px;
4033 -moz-margin-start: 4px;
4034 background-color: #000000;
4035 border: 1px solid #9C9CFF;
4036 border-bottom: none;
4037 border-top-left-radius: 2.5px;
4038 border-top-right-radius: 2.5px;
4041 chatbox[minimized="true"] {
4047 -moz-margin-start: 0px;
4053 /* === END chat.inc.css === */
4056 /* background-color: #c4cfde; */
4059 .chat-titlebar[selected] {
4060 /* background-color: #dae3f0; */
4064 -moz-appearance: none;
4065 /* background-color: #c4cfde; */
4068 .chatbar-button > .toolbarbutton-icon {
4069 /* -moz-margin-end: 0; */
4072 .chatbar-button:hover,
4073 .chatbar-button[open="true"] {
4074 /* background-color: #dae3f0; */
4077 .chatbar-button[activity]:not([open="true"]) {
4081 /* border-top-left-radius: 2.5px;
4082 border-top-right-radius: 2.5px; */
4085 /* === BEGIN plugin-doorhanger.inc.css === */
4088 * Plugin Doorhanger Styles
4091 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4092 padding: 6px 1px 2px;
4095 .click-to-play-plugins-notification-center-box {
4098 .plugin-popupnotification-centeritem:nth-child(odd) {
4099 /* background-color: rgba(0,0,0,0.1);*/
4102 .center-item-label {
4104 text-overflow: ellipsis;
4107 .center-item-warning-icon {
4108 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4109 background-repeat: no-repeat;
4112 -moz-margin-start: 6px;
4115 .click-to-play-plugins-notification-button-container {
4118 .click-to-play-popup-button {
4122 .click-to-play-plugins-notification-description-box {
4126 padding-bottom: 3px;
4129 .click-to-play-plugins-outer-description {
4133 .click-to-play-plugins-notification-link,
4138 .messageImage[value="plugin-hidden"] {
4139 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
4142 /* Keep any changes to this style in sync with pluginProblem.css */
4143 notification.pluginVulnerable {
4146 notification.pluginVulnerable .messageImage {
4147 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
4150 /* === END plugin-doorhanger.inc.css === */
4152 /* === BEGIN customizeMode.inc.css === */
4154 /* Customization mode */
4156 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4160 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4161 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4162 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4167 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4168 pointer-events: none;
4171 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4172 #PanelUI-contents > .panel-customization-placeholder {
4173 -moz-outline-radius: 2.5px;
4174 outline: 1px dashed transparent;
4177 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4178 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4179 -moz-box-ordinal-group: 0;
4184 outline-offset: -2px;
4185 pointer-events: none;
4191 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4192 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4193 offset from the bottom effectively the same as other targets (-2px). */
4194 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4198 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4199 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4200 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4201 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4205 /* Most target outlines are shown on hover and drag over but the panel menu uses
4206 placeholders instead. */
4207 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4208 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4209 /* nav-bar and panel outlines are always shown */
4210 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4211 outline-color: #A09090;
4214 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4215 transition: outline-color 250ms linear;
4218 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4219 transition: outline-color 250ms linear;
4220 outline-color: #9C9CFF;
4223 #PanelUI-contents > .panel-customization-placeholder {
4225 outline-offset: -5px;
4228 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4230 /* padding-left: 10px;
4231 padding-right: 10px;*/
4234 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4238 #customization-container {
4239 background-color: #000000;
4242 #customization-palette,
4243 #customization-empty {
4244 padding: 0 15px 15px;
4247 #customization-header {
4251 font-weight: lighter;
4253 padding: 15px 15px 0;
4256 #customization-panel-container {
4257 padding: 10px 10px 0px;
4260 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4261 #customization-footer {
4262 /*background-color: rgb(236,236,236);*/
4265 #customization-footer {
4266 border-top: 1px solid #9C9CFF;
4270 .customizationmode-button {
4274 .customizationmode-button:hover {
4277 .customizationmode-button[disabled="true"] {
4280 #customization-titlebar-visibility-button {
4281 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4282 -moz-image-region: rect(0, 16px, 16px, 0);
4284 -moz-margin-end: 10px;
4287 #customization-titlebar-visibility-button:hover {
4288 -moz-image-region: rect(16px, 16px, 32px, 0);
4291 #customization-titlebar-visibility-button > .button-box {
4293 padding-bottom: 1px;
4296 #customization-titlebar-visibility-button:hover:active > .button-box {
4301 #customization-titlebar-visibility-button > .button-box > .button-text {
4302 /* Sadly, button.css thinks its margins are perfect for everyone. */
4303 -moz-margin-start: 5px !important;
4306 #customization-titlebar-visibility-button[checked] {
4307 -moz-image-region: rect(0, 32px, 16px, 16px);
4308 background-color: #008484;
4311 #customization-titlebar-visibility-button[checked]:hover {
4312 -moz-image-region: rect(16px, 32px, 32px, 16px);
4313 background-color: #FFCF00;
4316 #customization-titlebar-visibility-button[checked]:hover:active {
4317 background-color: #FF9F00;
4320 #customization-undo-reset-button {
4321 -moz-margin-end: 10px;
4324 #main-window[customize-entered] #customization-panel-container {
4325 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4326 background-position: left top;
4327 background-repeat: repeat;
4328 background-size: auto;
4329 background-attachment: fixed;
4332 toolbarpaletteitem[place="toolbar"] {
4333 transition: border-width 250ms ease-in-out;
4336 toolbarpaletteitem[mousedown] {
4337 outline: 1px solid #008484;
4338 cursor: -moz-grabbing;
4342 .panel-customization-placeholder,
4343 toolbarpaletteitem[place="palette"],
4344 toolbarpaletteitem[place="panel"] {
4345 transition: transform .3s ease-in-out;
4348 #customization-palette {
4349 transition: opacity .3s ease-in-out;
4353 #customization-palette[showing="true"] {
4357 toolbarpaletteitem[notransition].panel-customization-placeholder,
4358 toolbarpaletteitem[notransition][place="toolbar"],
4359 toolbarpaletteitem[notransition][place="palette"],
4360 toolbarpaletteitem[notransition][place="panel"] {
4364 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4365 toolbarpaletteitem > toolbaritem.panel-wide-item,
4366 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4367 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
4370 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon {
4371 transform: scale(1.3);
4374 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4375 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4376 transform: scale(1.1);
4379 /* Override the toolkit styling for items being dragged over. */
4380 toolbarpaletteitem[place="toolbar"] {
4381 border-left-width: 0;
4382 border-right-width: 0;
4387 #customization-palette:not([hidden]) {
4388 margin-bottom: 25px;
4391 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4392 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4393 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4394 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4398 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4399 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4409 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4410 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4414 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4415 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4418 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4419 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4423 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4424 -moz-box-pack: center;
4428 #customization-palette > toolbarpaletteitem > label {
4434 /* === END customizeMode.inc.css === */
4436 /* === BEGIN customizeTip.inc.css === */
4438 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4445 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4446 border: 1px solid #9C9CFF;
4449 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4450 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4453 .customization-tipPanel-infoBox {
4454 margin: 20px 25px 25px;
4456 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4457 background-repeat: no-repeat;
4460 .customization-tipPanel-content {
4466 .customization-tipPanel-em {
4471 .customization-tipPanel-contentImage {
4473 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4481 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4482 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4485 .customization-tipPanel-link {
4486 -moz-appearance: none;
4487 background: transparent;
4495 .customization-tipPanel-link > .button-box > .button-text {
4496 margin: 0 !important;
4499 .customization-tipPanel-closeBox > .close-icon {
4500 -moz-appearance: none;
4502 -moz-margin-end: -25px;
4505 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4506 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4507 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4510 /* === END customizeTip.inc.css === */
4513 * This next rule is a hack to disable subpixel anti-aliasing on all
4514 * labels during the customize mode transition. Subpixel anti-aliasing
4515 * on Windows with Direct2D layers acceleration is particularly slow to
4516 * paint, so this hack is how we sidestep that performance bottleneck.
4518 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
4519 transform: perspective(0.01px);
4522 #main-window[customize-entered] {
4523 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4524 background-attachment: fixed;
4527 #main-window[customize-entered] #browser-bottombox,
4528 #main-window[customize-entered] #customization-container {
4529 border-left: 1px solid #9C9CFF;
4530 border-right: 1px solid #9C9CFF;
4531 background-clip: padding-box;
4534 #main-window[customize-entered] #browser-bottombox {
4535 border-bottom: 1px solid #9C9CFF;
4538 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4542 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4546 /* End customization mode */
4548 /* Private browsing indicators */
4551 * Currently, we have two places where we put private browsing indicators on
4552 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
4553 * When tabsintitlebar is disabled, we draw the indicator at the end of the
4554 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
4555 * want the bottom border of the image to line up with the bottom of the window
4556 * caption buttons. That's why there's so much special-casing going on in here.
4558 .private-browsing-indicator {
4560 pointer-events: none;
4563 #private-browsing-indicator-titlebar {
4568 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
4572 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
4576 #TabsToolbar > .private-browsing-indicator {
4577 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
4578 -moz-margin-start: 4px;
4582 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
4583 * mode, since the tabstrip "mimics" the titlebar in that case with its own
4584 * min/max/close window buttons.
4586 #private-browsing-indicator-titlebar > .private-browsing-indicator,
4587 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
4588 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
4589 -moz-margin-end: 4px;
4595 /* This one is for Linux */
4596 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
4597 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
4601 /* End private browsing indicators */
4603 /* === BEGIN UITour.inc.css === */
4607 #UITourHighlightContainer {
4608 -moz-appearance: none;
4610 background-color: transparent;
4611 /* This is a buffer to compensate for the movement in the "wobble" effect */
4616 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
4617 border-radius: 40px;
4618 border: 1px solid #9C9CFF;
4619 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
4620 on Linux without an X compositor where opacity is either 0 or 1. */
4621 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
4626 #UITourTooltipBody {
4627 -moz-margin-end: 14px;
4630 #UITourTooltipBody > vbox {
4634 #UITourTooltipIconContainer {
4635 -moz-margin-start: -16px;
4638 #UITourTooltipIcon {
4641 -moz-margin-start: 28px;
4642 -moz-margin-end: 28px;
4645 #UITourTooltipTitle,
4646 #UITourTooltipDescription {
4650 #UITourTooltipTitle {
4653 -moz-margin-start: 0;
4658 #UITourTooltipDescription {
4659 -moz-margin-start: 0;
4662 line-height: 1.8rem;
4663 margin-bottom: 0; /* Override global.css */
4666 #UITourTooltipClose {
4667 -moz-appearance: none;
4669 background-color: transparent;
4671 -moz-margin-start: 4px;
4675 #UITourTooltipClose > .toolbarbutton-text {
4679 #UITourTooltipButtons {
4681 background-color: rgba(0,0,0,.2);
4682 border-top: 1px solid rgba(0,0,0,.4);
4683 margin: 24px -16px -16px;
4687 #UITourTooltipButtons > button {
4691 #UITourTooltipButtons > button:first-child {
4692 -moz-margin-start: 0;
4695 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
4698 -moz-margin-end: 5px;
4701 #UITourTooltipButtons > button .button-text {
4705 #UITourTooltipButtons > button:not(.button-link) {
4706 -moz-appearance: none;
4707 background-color: #C09070;
4708 border-radius: 3000px;
4712 transition-property: background-color, color;
4713 transition-duration: 150ms;
4716 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
4717 background-color: #FFCF00;
4721 #UITourTooltipButtons > button.button-link {
4722 -moz-appearance: none;
4723 background: transparent;
4726 color: rgba(0,0,0,0.35);
4728 padding-right: 10px;
4731 #UITourTooltipButtons > button.button-link:hover {
4735 /* The primary button gets the same color as the customize button. */
4736 #UITourTooltipButtons > button.button-primary {
4737 background-color: #A06060; /* LCARS default button background color */
4740 padding-right: 30px;
4743 #UITourTooltipButtons > button.button-primary:not(:active):hover {
4744 background-color: #FFCF00;
4748 /* === END UITour.inc.css === */
4750 #UITourTooltipButtons {
4751 margin: 24px -4px -4px;
4754 /* === BEGIN contextmenu.inc.css === */
4756 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
4759 #context-navigation > .menuitem-iconic {
4761 -moz-box-pack: center;
4762 -moz-box-align: center;
4765 #context-navigation > .menuitem-iconic[disabled="true"] {
4766 background-color: transparent;
4769 #context-navigation > .menuitem-iconic > .menu-iconic-left {
4770 -moz-appearance: none;
4773 #context-navigation > #context-back > .menu-iconic-left {
4774 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4775 -moz-image-region: rect(0, 54px, 18px, 36px);
4778 #context-navigation > #context-back:not([disabled="true"]):hover > .menu-iconic-left {
4779 -moz-image-region: rect(18px, 54px, 36px, 36px);
4782 #context-navigation > #context-back[disabled="true"] > .menu-iconic-left {
4783 -moz-image-region: rect(36px, 54px, 54px, 36px);
4786 #context-navigation > #context-forward > .menu-iconic-left {
4787 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4788 -moz-image-region: rect(0, 72px, 18px, 54px);
4791 #context-navigation > #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
4792 -moz-image-region: rect(18px, 72px, 36px, 54px);
4795 #context-navigation > #context-forward[disabled="true"] > .menu-iconic-left {
4796 -moz-image-region: rect(36px, 72px, 54px, 54px);
4799 #context-navigation > #context-reload > .menu-iconic-left {
4800 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
4801 -moz-image-region: rect(0, 14px, 14px, 0);
4804 #context-navigation > #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
4805 -moz-image-region: rect(14px, 14px, 28px, 0);
4808 #context-navigation > #context-reload[disabled="true"] > .menu-iconic-left {
4809 -moz-image-region: rect(28px, 14px, 42px, 0);
4812 #context-navigation > #context-stop > .menu-iconic-left {
4813 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
4814 -moz-image-region: rect(0, 28px, 14px, 14px);
4817 #context-navigation > #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
4818 -moz-image-region: rect(14px, 28px, 28px, 14px);
4821 #context-navigation > #context-stop[disabled="true"] > .menu-iconic-left {
4822 -moz-image-region: rect(28px, 28px, 42px, 14px);
4825 #context-navigation > #context-bookmarkpage > .menu-iconic-left {
4826 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4827 -moz-image-region: rect(0, 144px, 18px, 126px);
4830 #context-navigation > #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
4831 -moz-image-region: rect(18px, 144px, 36px, 126px);
4834 #context-navigation > #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
4835 -moz-image-region: rect(36px, 144px, 54px, 126px);
4838 #context-back:-moz-locale-dir(rtl),
4839 #context-forward:-moz-locale-dir(rtl),
4840 #context-reload:-moz-locale-dir(rtl) {
4841 transform: scaleX(-1);
4844 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4850 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
4851 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
4857 /* === END contextmenu.inc.css === */