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 {
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="webRTC-sharingMicrophone"],
2927 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
2928 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
2931 .popup-notification-icon[popupid="pointerLock"] {
2932 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
2935 /* Notification icon box */
2936 #notification-popup-box {
2938 background-color: #000000;
2939 background-clip: padding-box;
2942 border-radius: 3px 0 0 3px;
2943 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
2944 -moz-margin-end: -8px;
2945 border-right-width: 8px;
2948 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #notification-popup-box,
2949 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar > #notification-popup-box {
2950 /* padding-left: 5px; */
2953 #notification-popup-box:-moz-locale-dir(rtl),
2954 .notification-anchor-icon:-moz-locale-dir(rtl) {
2955 transform: scaleX(-1);
2958 .notification-anchor-icon {
2964 .notification-anchor-icon:-moz-focusring {
2965 outline: 1px dotted #008484;
2966 /* outline-offset: -3px; */
2969 .default-notification-icon,
2970 #default-notification-icon {
2971 list-style-image: url("chrome://global/skin/icons/information-16.png");
2974 .identity-notification-icon,
2975 #identity-notification-icon {
2976 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
2979 .geo-notification-icon,
2980 #geo-notification-icon {
2981 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
2984 #addons-notification-icon {
2985 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png");
2988 .indexedDB-notification-icon,
2989 #indexedDB-notification-icon {
2990 list-style-image: url("chrome://global/skin/icons/question-16.png");
2993 #password-notification-icon {
2994 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
2997 #webapps-notification-icon {
2998 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
3001 #plugins-notification-icon {
3002 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3005 #plugins-notification-icon.plugin-hidden {
3006 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3009 #plugins-notification-icon.plugin-blocked {
3010 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3013 #plugins-notification-icon {
3014 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
3017 #plugins-notification-icon:hover {
3018 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
3021 #plugin-install-notification-icon {
3022 list-style-image: url("chrome://browser/skin/pluginInstall-16.png");
3025 #notification-popup-box[hidden] {
3026 /* Override display:none to make the pluginBlockedNotification animation work
3027 when showing the notification repeatedly. */
3029 visibility: collapse;
3032 #plugins-notification-icon.plugin-blocked[showing] {
3033 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3036 @keyframes pluginBlockedNotification {
3045 .mixed-content-blocked-notification-icon,
3046 #mixed-content-blocked-notification-icon {
3047 list-style-image: url("chrome://browser/skin/mixed-content-blocked-16.png");
3050 .webRTC-shareDevices-notification-icon,
3051 #webRTC-shareDevices-notification-icon {
3052 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3055 .webRTC-sharingDevices-notification-icon,
3056 #webRTC-sharingDevices-notification-icon {
3057 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3060 .webRTC-shareMicrophone-notification-icon,
3061 #webRTC-shareMicrophone-notification-icon {
3062 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3065 .webRTC-sharingMicrophone-notification-icon,
3066 #webRTC-sharingMicrophone-notification-icon {
3067 list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3070 .web-notifications-notification-icon,
3071 #web-notifications-notification-icon {
3072 list-style-image: url("chrome://browser/skin/notification-16.png");
3075 #pointerLock-notification-icon {
3076 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3078 #pointerLock-cancel {
3082 /* Bookmarks roots menu-items */
3083 #subscribeToPageMenuitem:not([disabled]),
3084 #subscribeToPageMenupopup,
3085 #BMB_subscribeToPageMenuitem:not([disabled]),
3086 #BMB_subscribeToPageMenupopup {
3087 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3090 #bookmarksToolbarFolderMenu,
3091 #BMB_bookmarksToolbar,
3092 #panelMenu_bookmarksToolbar {
3093 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3094 -moz-image-region: auto;
3097 #BMB_unsortedBookmarks,
3098 #panelMenu_unsortedBookmarks {
3099 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3100 -moz-image-region: auto;
3103 /* ::::: Keyboard UI Panel ::::: */
3108 border-radius: 20px;
3111 .KUI-panel[level="top"] {
3112 /*background-color: rgba(27%,27%,27%,.65);*/
3118 padding: 20px 10px 10px;
3122 .ctrlTab-favicon[src] {
3123 background-color: #000000;
3129 .ctrlTab-preview-inner > .tabPreview-canvas {
3132 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3136 .ctrlTab-preview-inner {
3137 padding-bottom: 10px;
3140 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3142 background-color: #000000;
3143 border-radius: .5em;
3146 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3148 background-color: #000000;
3151 border: 2px solid #9C9CFF;
3152 border-radius: .5em;
3155 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3156 margin: -10px -10px 0;
3167 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3175 .sync-panel-button-box {
3179 #sync-error-panel-title,
3180 #sync-start-panel-title {
3184 #sync-start-panel-subtitle,
3185 #sync-error-panel-subtitle {
3191 .statuspanel-label {
3194 background: #404000;
3195 border: 1px none #9C9CFF;
3196 border-top-style: solid;
3201 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3202 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3203 border-right-style: solid;
3204 border-top-right-radius: .3em;
3208 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3209 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3210 border-left-style: solid;
3211 border-top-left-radius: .3em;
3215 /* HACK to abolish devily color on main content */
3218 background-color: transparent !important;
3221 /* === BEGIN highlighter.inc.css === */
3225 .highlighter-outline {
3226 box-shadow: 0 0 0 1px black;
3227 outline: 1px dashed #A09090;
3230 /* Highlighter - Node Infobar */
3232 .highlighter-nodeinfobar {
3235 background-color: #000000;
3236 background-clip: padding-box;
3237 border: 1px solid #008484;
3239 /* Avoid cases where the infobar is smaller than the arrow, when the text is
3244 /* Highlighter - Node Infobar - text */
3246 .highlighter-nodeinfobar-text {
3248 /* 100% - size of the buttons and margins */
3249 max-width: calc(100% - 2 * (26px + 6px));
3250 padding-bottom: 1px;
3253 html|*.highlighter-nodeinfobar-tagname {
3257 html|*.highlighter-nodeinfobar-id {
3261 html|*.highlighter-nodeinfobar-pseudo-classes {
3265 /* Highlighter - Node Infobar - box & arrow */
3267 .highlighter-nodeinfobar-arrow {
3270 -moz-margin-start: calc(50% - 7px);
3271 transform: rotate(-45deg);
3272 background-clip: padding-box;
3273 background-repeat: no-repeat;
3276 .highlighter-nodeinfobar-arrow-top {
3277 margin-bottom: -8px;
3279 background-image: linear-gradient(to bottom left, transparent 50%, rgb(0, 132, 132) 50%);
3282 .highlighter-nodeinfobar-arrow-bottom {
3285 background-image: linear-gradient(to top right, transparent 50%, rgb(0, 132, 132) 50%);
3288 .highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
3292 /* === END highlighter.inc.css === */
3294 #full-screen-warning-message {
3295 background-color: #000000;
3300 box-shadow: 0 0 2px #9C9CFF;
3303 #full-screen-warning-container[obscure-browser] {
3304 background-color: rgba(0,0,0,0.3);
3307 .full-screen-description {
3311 #full-screen-domain-text {
3315 .full-screen-approval-button,
3316 #full-screen-remember-decision {
3320 /* === BEGIN commandline.inc.css === */
3322 /* Developer toolbar */
3324 #developer-toolbar {
3325 border-top: 3px solid #000000;
3326 border-bottom: none;
3329 #developer-toolbar .toolbar-holder {
3330 background-color: #8050B0;
3334 #developer-toolbar .toolbar-holder {
3335 background-color: #8050B0;
3339 #developer-toolbar .toolbar-startcap,
3340 #developer-toolbar .toolbar-endcap{
3341 background-color: #6000CF;
3344 #developer-toolbar {
3346 min-height: 32px; */
3349 #developer-toolbar > toolbarbutton {
3355 .developer-toolbar-button > image {
3356 /* margin: auto 10px; */
3359 #developer-toolbar-toolbox-button > label {
3363 #developer-toolbar-toolbox-button {
3364 list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
3365 -moz-image-region: rect(0px, 16px, 16px, 0px);
3368 #developer-toolbar-toolbox-button > label {
3372 #developer-toolbar-toolbox-button:hover,
3373 #developer-toolbar-toolbox-button:hover:active,
3374 #developer-toolbar-toolbox-button[checked=true] {
3375 -moz-image-region: rect(0px, 32px, 16px, 16px);
3378 #developer-toolbar-closebutton {
3379 list-style-image: url("chrome://browser/skin/devtools/close.png");
3380 -moz-image-region: rect(0px, 16px, 16px, 0px);
3385 #developer-toolbar-closebutton > .toolbarbutton-icon {
3388 #developer-toolbar-closebutton > .toolbarbutton-text {
3392 #developer-toolbar-closebutton:hover,
3393 #developer-toolbar-closebutton:hover:active {
3394 -moz-image-region: rect(0px, 32px, 16px, 16px);
3399 html|*#gcli-tooltip-frame,
3400 html|*#gcli-output-frame {
3403 background-color: transparent;
3409 background-color: transparent;
3412 .gclitoolbar-input-node,
3413 .gclitoolbar-complete-node {
3415 -moz-box-align: center;
3419 background-color: transparent;
3422 .gclitoolbar-input-node {
3424 /* line-height: 32px;
3425 outline-style: none; */
3426 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0);
3427 background-repeat: no-repeat;
3428 background-color: rgba(0, 0, 0, .75);
3431 .gclitoolbar-input-node[focused="true"] {
3432 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
3433 background-color: #000000;
3436 .gclitoolbar-input-node:not([focused="true"]) {
3437 border-color: transparent;
3440 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3441 background-color: #008484;
3446 .gclitoolbar-complete-node {
3448 background-color: transparent;
3451 pointer-events: none;
3454 .gcli-in-incomplete,
3458 .gcli-in-closebrace,
3465 .gcli-in-incomplete {
3466 border-bottom: 2px dotted #8050B0;
3470 border-bottom: 2px dotted #FF0000;
3481 .gcli-in-closebrace {
3485 /* === END commandline.inc.css === */
3487 /* === BEGIN responsivedesign.inc.css === */
3489 /* Responsive Mode */
3491 .browserContainer[responsivemode] {
3492 background: #221500 url("chrome://browser/skin/devtools/responsive-background.png");
3493 padding: 0 20px 20px 20px;
3496 .browserStack[responsivemode] {
3497 box-shadow: 0 0 7px #9C9CFF;
3500 .devtools-responsiveui-toolbar {
3501 background: transparent;
3502 /* text color is textColor from dark theme, since no theme is applied to
3503 * the responsive toolbar.
3509 border-bottom-width: 0;
3512 .devtools-responsiveui-menulist,
3513 .devtools-responsiveui-toolbarbutton {
3514 -moz-box-align: center;
3516 /* min-height: 22px;*/
3517 /* margin: 0 3px; */
3520 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
3521 -moz-box-orient: horizontal;
3524 .devtools-responsiveui-menulist:-moz-focusring,
3525 .devtools-responsiveui-toolbarbutton:-moz-focusring {
3526 /* outline: 1px dotted hsla(210,30%,85%,0.7);
3527 outline-offset: -4px;*/
3530 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
3534 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
3535 /* border-color: hsla(210,8%,5%,.6);
3536 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
3537 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); */
3540 .devtools-responsiveui-menulist[open=true],
3541 .devtools-responsiveui-toolbarbutton[open=true],
3542 .devtools-responsiveui-toolbarbutton[checked=true] {
3543 /* border-color: hsla(210,8%,5%,.6) !important;
3544 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
3545 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); */
3548 .devtools-responsiveui-toolbarbutton[checked=true] {
3549 /* color: hsl(208,100%,60%); */
3552 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
3553 /* background-color: transparent !important;*/
3556 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
3557 /* background-color: hsla(210,8%,5%,.2) !important;*/
3560 .devtools-responsiveui-menulist > .menulist-label-box {
3564 .devtools-responsiveui-menulist > .menulist-dropmarker {
3565 /* display: -moz-box;
3566 background-color: transparent;
3567 list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3568 -moz-box-align: center;
3573 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
3576 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
3577 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
3580 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
3581 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
3584 .devtools-responsiveui-toolbarbutton[type=menu-button] {
3585 /* padding: 0 1px;*/
3586 -moz-box-align: stretch;
3589 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
3590 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
3591 /* list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3592 -moz-box-align: center;
3596 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
3597 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
3601 .devtools-responsiveui-close {
3602 list-style-image: url("chrome://browser/skin/devtools/close.png");
3603 -moz-image-region: rect(0px,16px,16px,0px);
3606 .devtools-responsiveui-close:hover {
3607 -moz-image-region: rect(0px,32px,16px,16px);
3610 .devtools-responsiveui-rotate {
3611 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
3612 -moz-image-region: rect(0px,16px,16px,0px);
3615 .devtools-responsiveui-rotate:hover {
3616 -moz-image-region: rect(0px,32px,16px,16px);
3619 .devtools-responsiveui-touch {
3620 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
3621 -moz-image-region: rect(0px,16px,16px,0px);
3624 .devtools-responsiveui-touch:hover,
3625 .devtools-responsiveui-touch[checked],
3626 .devtools-responsiveui-touch[checked]:hover {
3627 -moz-image-region: rect(0px,32px,16px,16px);
3630 .devtools-responsiveui-screenshot {
3631 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
3632 -moz-image-region: rect(0px,16px,16px,0px);
3635 .devtools-responsiveui-screenshot:hover {
3636 -moz-image-region: rect(0px,32px,16px,16px);
3639 .devtools-responsiveui-resizebarV {
3643 transform: translate(12px, -12px);
3644 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
3647 .devtools-responsiveui-resizebarH {
3651 transform: translate(-12px, 12px);
3652 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
3655 .devtools-responsiveui-resizehandle {
3659 transform: translate(12px, 12px);
3660 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
3663 /* === END responsivedesign.inc.css === */
3665 /* === including indicator.css is done at the start of the file === */
3669 #developer-toolbar-toolbox-button[error-count]:before {
3673 background-color: #FF0000;
3675 -moz-margin-end: 5px;
3678 /* Social toolbar item */
3680 #social-provider-button {
3681 -moz-image-region: rect(0, 16px, 16px, 0);
3682 list-style-image: url("chrome://browser/skin/social/services-16.png");
3685 #social-provider-button > .toolbarbutton-menu-dropmarker {
3689 .toolbarbutton-badge-container {
3695 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container {
3699 .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbar-icon {
3705 .toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
3709 .toolbarbutton-badge[badge=""] {
3712 .toolbarbutton-badge[badge]:not([badge=""])::after {
3713 /* The |content| property is set in the content stylesheet. */
3718 background-color: #000000;
3719 border: 1px solid #9C9CFF;
3726 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""])::after {
3731 .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3736 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3741 #social-notification-icon-mentions {
3742 background-color: #000000;
3744 -moz-margin-start: 2px;
3747 #social-notification-icon-mentions:hover {
3748 background-color: #FFCF00;
3751 #social-notification-icon-mentions[open="true"] {
3752 background-color: #FF9F00;
3755 #social-sidebar-splitter {
3759 .popup-notification-icon[popupid="servicesInstall"] {
3760 list-style-image: url("chrome://browser/skin/social/services-64.png");
3762 #servicesInstall-notification-icon {
3763 list-style-image: url("chrome://browser/skin/social/services-16.png");
3765 #social-undoactivation-button {
3766 -moz-margin-start: 0; /* override default label margin to match description margin */
3769 #socialActivatedNotification .popup-notification-button-container {
3773 .social-activation-icon {
3780 #social-activation-message {
3784 #social-activation-message > label {
3788 /* social toolbar provider menu */
3789 .social-statusarea-popup {
3792 margin-right: -12px;
3795 .social-statusarea-user {
3796 border-bottom: 1px solid #9C9CFF;
3797 background-color: #000000;
3803 .social-statusarea-user-portrait {
3810 .social-statusarea-loggedInStatus {
3811 background: transparent;
3816 list-style-image: none;
3819 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
3820 text-decoration: underline;
3823 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
3827 .social-panel-frame {
3828 border-radius: inherit;
3831 /* === BEGIN chat.inc.css === */
3833 #social-sidebar-header {
3837 #social-sidebar-button {
3838 -moz-appearance: none;
3839 list-style-image: url("chrome://browser/skin/social/gear_default.png");
3844 #social-sidebar-button > .toolbarbutton-icon {
3848 #social-sidebar-button:hover,
3849 #social-sidebar-button:hover:active {
3850 list-style-image: url("chrome://browser/skin/social/gear_clicked.png");
3852 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
3856 #social-sidebar-button[loading="true"] {
3857 list-style-image: url("chrome://global/skin/icons/loading.gif");
3860 #social-sidebar-favico {
3873 .chat-toolbarbutton {
3874 -moz-appearance: none;
3882 .chat-toolbarbutton > .toolbarbutton-text {
3886 .chat-toolbarbutton > .toolbarbutton-icon {
3890 .chat-toolbarbutton.notification-anchor-icon > .toolbarbutton-icon {
3895 .chat-close-button {
3896 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3897 -moz-image-region: rect(0, 16px, 16px, 0);
3900 .chat-close-button:hover,
3901 .chat-close-button:hover:active {
3902 -moz-image-region: rect(0, 32px, 16px, 16px);
3905 .chat-minimize-button {
3906 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3907 -moz-image-region: rect(16px, 16px, 32px, 0);
3910 .chat-minimize-button:hover:active,
3911 .chat-minimize-button:hover {
3912 -moz-image-region: rect(16px, 32px, 32px, 16px);
3916 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3917 -moz-image-region: rect(48px, 16px, 64px, 0);
3920 .chat-swap-button:hover:active,
3921 .chat-swap-button:hover {
3922 -moz-image-region: rect(48px, 32px, 64px, 16px);
3925 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
3926 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3927 -moz-image-region: rect(32px, 16px, 48px, 0);
3930 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover:active,
3931 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover {
3932 -moz-image-region: rect(32px, 32px, 48px, 16px);
3937 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3943 background-color: #9C9CFF;
3950 -moz-padding-start: 6px;
3952 border-bottom: 1px solid #008484;
3956 .chat-titlebar > .notification-anchor-icon {
3961 .chat-titlebar[minimized="true"] {
3962 border-bottom: none;
3965 .chat-titlebar[selected] {
3966 background-color: #008484;
3969 .chat-titlebar[activity] {
3970 background-color: #E7ADE7;
3980 list-style-image: url("chrome://browser/skin/social/services-16.png");
3981 background-color: #000000;
3987 border-top: 1px solid #008484;
3988 -moz-border-end: 1px solid #008484;
3991 @media (min-resolution: 2dppx) {
3993 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
3997 .chatbar-button > .toolbarbutton-icon {
4001 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4008 .chatbar-button > .toolbarbutton-icon {
4012 .chatbar-button:hover > .toolbarbutton-icon,
4013 .chatbar-button[open="true"] > .toolbarbutton-icon {
4017 .chatbar-button:hover,
4018 .chatbar-button[open="true"] {
4021 .chatbar-button > .toolbarbutton-text,
4022 .chatbar-button > .toolbarbutton-menu-dropmarker {
4026 .chatbar-button[activity]:not([open="true"]) {
4027 background-color: #E7ADE7;
4030 .chatbar-button > menupopup > menuitem[activity] {
4035 background: transparent;
4041 -moz-margin-end: 20px;
4047 -moz-margin-start: 4px;
4048 background-color: #000000;
4049 border: 1px solid #9C9CFF;
4050 border-bottom: none;
4051 border-top-left-radius: 2.5px;
4052 border-top-right-radius: 2.5px;
4055 chatbox[minimized="true"] {
4061 -moz-margin-start: 0px;
4067 /* === END chat.inc.css === */
4070 /* background-color: #c4cfde; */
4073 .chat-titlebar[selected] {
4074 /* background-color: #dae3f0; */
4078 -moz-appearance: none;
4079 /* background-color: #c4cfde; */
4082 .chatbar-button > .toolbarbutton-icon {
4083 /* -moz-margin-end: 0; */
4086 .chatbar-button:hover,
4087 .chatbar-button[open="true"] {
4088 /* background-color: #dae3f0; */
4091 .chatbar-button[activity]:not([open="true"]) {
4095 /* border-top-left-radius: 2.5px;
4096 border-top-right-radius: 2.5px; */
4099 /* === BEGIN plugin-doorhanger.inc.css === */
4102 * Plugin Doorhanger Styles
4105 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4106 padding: 6px 1px 2px;
4109 .click-to-play-plugins-notification-center-box {
4112 .plugin-popupnotification-centeritem:nth-child(odd) {
4113 /* background-color: rgba(0,0,0,0.1);*/
4116 .center-item-label {
4118 text-overflow: ellipsis;
4121 .center-item-warning-icon {
4122 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4123 background-repeat: no-repeat;
4126 -moz-margin-start: 6px;
4129 .click-to-play-plugins-notification-button-container {
4132 .click-to-play-popup-button {
4136 .click-to-play-plugins-notification-description-box {
4140 padding-bottom: 3px;
4143 .click-to-play-plugins-outer-description {
4147 .click-to-play-plugins-notification-link,
4152 .messageImage[value="plugin-hidden"] {
4153 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
4156 /* Keep any changes to this style in sync with pluginProblem.css */
4157 notification.pluginVulnerable {
4160 notification.pluginVulnerable .messageImage {
4161 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
4164 /* === END plugin-doorhanger.inc.css === */
4166 /* === BEGIN customizeMode.inc.css === */
4168 /* Customization mode */
4170 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4174 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4175 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4176 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4181 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4182 pointer-events: none;
4185 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4186 #PanelUI-contents > .panel-customization-placeholder {
4187 -moz-outline-radius: 2.5px;
4188 outline: 1px dashed transparent;
4191 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4192 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4193 -moz-box-ordinal-group: 0;
4198 outline-offset: -2px;
4199 pointer-events: none;
4205 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4206 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4207 offset from the bottom effectively the same as other targets (-2px). */
4208 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4212 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4213 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4214 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4215 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4219 /* Most target outlines are shown on hover and drag over but the panel menu uses
4220 placeholders instead. */
4221 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4222 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4223 /* nav-bar and panel outlines are always shown */
4224 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4225 outline-color: #A09090;
4228 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4229 transition: outline-color 250ms linear;
4232 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4233 transition: outline-color 250ms linear;
4234 outline-color: #9C9CFF;
4237 #PanelUI-contents > .panel-customization-placeholder {
4239 outline-offset: -5px;
4242 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4244 /* padding-left: 10px;
4245 padding-right: 10px;*/
4248 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4252 #customization-container {
4253 background-color: #000000;
4256 #customization-palette,
4257 #customization-empty {
4258 padding: 0 15px 15px;
4261 #customization-header {
4265 font-weight: lighter;
4267 padding: 15px 15px 0;
4270 #customization-panel-container {
4271 padding: 10px 10px 0px;
4274 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4275 #customization-footer {
4276 /*background-color: rgb(236,236,236);*/
4279 #customization-footer {
4280 border-top: 1px solid #9C9CFF;
4284 .customizationmode-button {
4288 .customizationmode-button:hover {
4291 .customizationmode-button[disabled="true"] {
4294 #customization-titlebar-visibility-button {
4295 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4296 -moz-image-region: rect(0, 16px, 16px, 0);
4298 -moz-margin-end: 10px;
4301 #customization-titlebar-visibility-button:hover {
4302 -moz-image-region: rect(16px, 16px, 32px, 0);
4305 #customization-titlebar-visibility-button > .button-box {
4307 padding-bottom: 1px;
4310 #customization-titlebar-visibility-button:hover:active > .button-box {
4315 #customization-titlebar-visibility-button > .button-box > .button-text {
4316 /* Sadly, button.css thinks its margins are perfect for everyone. */
4317 -moz-margin-start: 5px !important;
4320 #customization-titlebar-visibility-button[checked] {
4321 -moz-image-region: rect(0, 32px, 16px, 16px);
4322 background-color: #008484;
4325 #customization-titlebar-visibility-button[checked]:hover {
4326 -moz-image-region: rect(16px, 32px, 32px, 16px);
4327 background-color: #FFCF00;
4330 #customization-titlebar-visibility-button[checked]:hover:active {
4331 background-color: #FF9F00;
4334 #customization-undo-reset-button {
4335 -moz-margin-end: 10px;
4338 #main-window[customize-entered] #customization-panel-container {
4339 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4340 background-position: left top;
4341 background-repeat: repeat;
4342 background-size: auto;
4343 background-attachment: fixed;
4346 toolbarpaletteitem[place="toolbar"] {
4347 transition: border-width 250ms ease-in-out;
4350 toolbarpaletteitem[mousedown] {
4351 outline: 1px solid #008484;
4352 cursor: -moz-grabbing;
4356 .panel-customization-placeholder,
4357 toolbarpaletteitem[place="palette"],
4358 toolbarpaletteitem[place="panel"] {
4359 transition: transform .3s ease-in-out;
4362 #customization-palette {
4363 transition: opacity .3s ease-in-out;
4367 #customization-palette[showing="true"] {
4371 toolbarpaletteitem[notransition].panel-customization-placeholder,
4372 toolbarpaletteitem[notransition][place="toolbar"],
4373 toolbarpaletteitem[notransition][place="palette"],
4374 toolbarpaletteitem[notransition][place="panel"] {
4378 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4379 toolbarpaletteitem > toolbaritem.panel-wide-item,
4380 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4381 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
4384 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon {
4385 transform: scale(1.3);
4388 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4389 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4390 transform: scale(1.1);
4393 /* Override the toolkit styling for items being dragged over. */
4394 toolbarpaletteitem[place="toolbar"] {
4395 border-left-width: 0;
4396 border-right-width: 0;
4401 #customization-palette:not([hidden]) {
4402 margin-bottom: 25px;
4405 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4406 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4407 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4408 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4412 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4413 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4423 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4424 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4428 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4429 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4432 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4433 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4437 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4438 -moz-box-pack: center;
4442 #customization-palette > toolbarpaletteitem > label {
4448 /* === END customizeMode.inc.css === */
4450 /* === BEGIN customizeTip.inc.css === */
4452 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4459 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4460 border: 1px solid #9C9CFF;
4463 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4464 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4467 .customization-tipPanel-infoBox {
4468 margin: 20px 25px 25px;
4470 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4471 background-repeat: no-repeat;
4474 .customization-tipPanel-content {
4480 .customization-tipPanel-em {
4485 .customization-tipPanel-contentImage {
4487 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4495 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4496 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4499 .customization-tipPanel-link {
4500 -moz-appearance: none;
4501 background: transparent;
4509 .customization-tipPanel-link > .button-box > .button-text {
4510 margin: 0 !important;
4513 .customization-tipPanel-closeBox > .close-icon {
4514 -moz-appearance: none;
4516 -moz-margin-end: -25px;
4519 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4520 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4521 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4524 /* === END customizeTip.inc.css === */
4527 * This next rule is a hack to disable subpixel anti-aliasing on all
4528 * labels during the customize mode transition. Subpixel anti-aliasing
4529 * on Windows with Direct2D layers acceleration is particularly slow to
4530 * paint, so this hack is how we sidestep that performance bottleneck.
4532 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
4533 transform: perspective(0.01px);
4536 #main-window[customize-entered] {
4537 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4538 background-attachment: fixed;
4541 #main-window[customize-entered] #browser-bottombox,
4542 #main-window[customize-entered] #customization-container {
4543 border-left: 1px solid #9C9CFF;
4544 border-right: 1px solid #9C9CFF;
4545 background-clip: padding-box;
4548 #main-window[customize-entered] #browser-bottombox {
4549 border-bottom: 1px solid #9C9CFF;
4552 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4556 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4560 /* End customization mode */
4562 /* Private browsing indicators */
4565 * Currently, we have two places where we put private browsing indicators on
4566 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
4567 * When tabsintitlebar is disabled, we draw the indicator at the end of the
4568 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
4569 * want the bottom border of the image to line up with the bottom of the window
4570 * caption buttons. That's why there's so much special-casing going on in here.
4572 .private-browsing-indicator {
4574 pointer-events: none;
4577 #private-browsing-indicator-titlebar {
4582 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
4586 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
4590 #TabsToolbar > .private-browsing-indicator {
4591 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
4592 -moz-margin-start: 4px;
4596 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
4597 * mode, since the tabstrip "mimics" the titlebar in that case with its own
4598 * min/max/close window buttons.
4600 #private-browsing-indicator-titlebar > .private-browsing-indicator,
4601 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
4602 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
4603 -moz-margin-end: 4px;
4609 /* This one is for Linux */
4610 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
4611 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
4615 /* End private browsing indicators */
4617 /* === BEGIN UITour.inc.css === */
4621 #UITourHighlightContainer {
4622 -moz-appearance: none;
4624 background-color: transparent;
4625 /* This is a buffer to compensate for the movement in the "wobble" effect */
4630 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
4631 border-radius: 40px;
4632 border: 1px solid #9C9CFF;
4633 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
4634 on Linux without an X compositor where opacity is either 0 or 1. */
4635 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
4640 #UITourTooltipBody {
4641 -moz-margin-end: 14px;
4644 #UITourTooltipBody > vbox {
4648 #UITourTooltipIconContainer {
4649 -moz-margin-start: -16px;
4652 #UITourTooltipIcon {
4655 -moz-margin-start: 28px;
4656 -moz-margin-end: 28px;
4659 #UITourTooltipTitle,
4660 #UITourTooltipDescription {
4664 #UITourTooltipTitle {
4667 -moz-margin-start: 0;
4672 #UITourTooltipDescription {
4673 -moz-margin-start: 0;
4676 line-height: 1.8rem;
4677 margin-bottom: 0; /* Override global.css */
4680 #UITourTooltipClose {
4681 -moz-appearance: none;
4683 background-color: transparent;
4685 -moz-margin-start: 4px;
4689 #UITourTooltipClose > .toolbarbutton-text {
4693 #UITourTooltipButtons {
4695 background-color: rgba(0,0,0,.2);
4696 border-top: 1px solid rgba(0,0,0,.4);
4697 margin: 24px -16px -16px;
4701 #UITourTooltipButtons > button {
4705 #UITourTooltipButtons > button:first-child {
4706 -moz-margin-start: 0;
4709 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
4712 -moz-margin-end: 5px;
4715 #UITourTooltipButtons > button .button-text {
4719 #UITourTooltipButtons > button:not(.button-link) {
4720 -moz-appearance: none;
4721 background-color: #C09070;
4722 border-radius: 3000px;
4726 transition-property: background-color, color;
4727 transition-duration: 150ms;
4730 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
4731 background-color: #FFCF00;
4735 #UITourTooltipButtons > button.button-link {
4736 -moz-appearance: none;
4737 background: transparent;
4740 color: rgba(0,0,0,0.35);
4742 padding-right: 10px;
4745 #UITourTooltipButtons > button.button-link:hover {
4749 /* The primary button gets the same color as the customize button. */
4750 #UITourTooltipButtons > button.button-primary {
4751 background-color: #A06060; /* LCARS default button background color */
4754 padding-right: 30px;
4757 #UITourTooltipButtons > button.button-primary:not(:active):hover {
4758 background-color: #FFCF00;
4762 /* === END UITour.inc.css === */
4764 #UITourTooltipButtons {
4765 margin: 24px -4px -4px;
4768 /* === BEGIN contextmenu.inc.css === */
4770 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
4773 #context-navigation > .menuitem-iconic {
4775 -moz-box-pack: center;
4776 -moz-box-align: center;
4779 #context-navigation > .menuitem-iconic[disabled="true"] {
4780 background-color: transparent;
4783 #context-navigation > .menuitem-iconic > .menu-iconic-left {
4784 -moz-appearance: none;
4787 #context-navigation > #context-back > .menu-iconic-left {
4788 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4789 -moz-image-region: rect(0, 54px, 18px, 36px);
4792 #context-navigation > #context-back:not([disabled="true"]):hover > .menu-iconic-left {
4793 -moz-image-region: rect(18px, 54px, 36px, 36px);
4796 #context-navigation > #context-back[disabled="true"] > .menu-iconic-left {
4797 -moz-image-region: rect(36px, 54px, 54px, 36px);
4800 #context-navigation > #context-forward > .menu-iconic-left {
4801 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4802 -moz-image-region: rect(0, 72px, 18px, 54px);
4805 #context-navigation > #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
4806 -moz-image-region: rect(18px, 72px, 36px, 54px);
4809 #context-navigation > #context-forward[disabled="true"] > .menu-iconic-left {
4810 -moz-image-region: rect(36px, 72px, 54px, 54px);
4813 #context-navigation > #context-reload > .menu-iconic-left {
4814 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
4815 -moz-image-region: rect(0, 14px, 14px, 0);
4818 #context-navigation > #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
4819 -moz-image-region: rect(14px, 14px, 28px, 0);
4822 #context-navigation > #context-reload[disabled="true"] > .menu-iconic-left {
4823 -moz-image-region: rect(28px, 14px, 42px, 0);
4826 #context-navigation > #context-stop > .menu-iconic-left {
4827 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
4828 -moz-image-region: rect(0, 28px, 14px, 14px);
4831 #context-navigation > #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
4832 -moz-image-region: rect(14px, 28px, 28px, 14px);
4835 #context-navigation > #context-stop[disabled="true"] > .menu-iconic-left {
4836 -moz-image-region: rect(28px, 28px, 42px, 14px);
4839 #context-navigation > #context-bookmarkpage > .menu-iconic-left {
4840 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4841 -moz-image-region: rect(0, 144px, 18px, 126px);
4844 #context-navigation > #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
4845 -moz-image-region: rect(18px, 144px, 36px, 126px);
4848 #context-navigation > #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
4849 -moz-image-region: rect(36px, 144px, 54px, 126px);
4852 #context-back:-moz-locale-dir(rtl),
4853 #context-forward:-moz-locale-dir(rtl),
4854 #context-reload:-moz-locale-dir(rtl) {
4855 transform: scaleX(-1);
4858 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4864 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
4865 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
4871 /* === END contextmenu.inc.css === */