1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 @import url("chrome://global/skin/");
6 @import url("downloads/indicator.css");
8 @namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
9 @namespace html url("http://www.w3.org/1999/xhtml");
10 @namespace svg url("http://www.w3.org/2000/svg");
13 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar");
16 toolbar[customizable="true"] {
17 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-browsercustom");
20 toolbar[type="menubar"][autohide="true"] {
21 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide");
24 #toolbar-menubar[autohide="true"] {
25 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-menubar-autohide-browsercustom");
29 -moz-binding: url("chrome://global/skin/globalBindings.xml#menubar");
33 -moz-box-orient: vertical; /* for flex hack */
37 -moz-box-flex: 1; /* make menu items expand to fill toolbar height */
40 /* ::::: primary toolbar ::::: */
42 .toolbar-primary > .toolbar-box > .toolbar-holder {
43 background-color: #A09090;
46 .toolbar-primary > .toolbar-box > .toolbar-startcap,
47 .toolbar-primary > .toolbar-box > .toolbar-endcap {
48 background-color: #9C9CFF;
51 /* Hides the titlebar-placeholder underneath the window caption buttons when we
52 are not autohiding the menubar. */
53 #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-placeholder[type="caption-buttons"] {
57 /* We want a 4px gap between the TabsToolbar and the toolbar-menubar when the
58 toolbar-menu is displayed, and a 16px gap when it is not. 1px is taken care
59 of by the (light) outer shadow of the tab, the remaining 3/15 are these margins. */
60 #toolbar-menubar:not([moz-collapsed=true]):not([autohide=true]) ~ #TabsToolbar,
61 #toolbar-menubar:not([moz-collapsed=true])[autohide=true]:not([inactive]) ~ #TabsToolbar {
65 #main-window[tabsintitlebar][sizemode="normal"][chromehidden~="menubar"] #toolbar-menubar ~ #TabsToolbar,
66 #main-window[tabsintitlebar][sizemode="normal"] #toolbar-menubar[autohide="true"][inactive] ~ #TabsToolbar {
67 /* margin-top: 15px;*/
70 #toolbar-menubar:not([autohide="true"]) {
71 -moz-binding: url("chrome://global/skin/globalBindings.xml#toolbar-drag-browsercustom");
74 #main-window[tabsintitlebar] #toolbar-menubar .toolbar-endcap {
75 /* 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 */
79 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar[customizing-dragovertarget].customization-target::before,
80 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar[customizing-dragovertarget].customization-target::before,
81 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #toolbar-menubar.customization-target:hover::before,
82 #main-window[customize-entered][tabsintitlebar]:not([inFullscreen]) #TabsToolbar.customization-target:hover::before {
83 outline-color: #A09090;
89 #navigator-toolbox::after {
92 -moz-box-ordinal-group: 101; /* tabs toolbar is 100 */
96 #navigator-toolbox > toolbar:not(:-moz-lwtheme) {
99 /* indent due to non-applicable aero rule */
101 background-color: transparent !important;
104 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme),
105 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme) {
107 background-color: #6000CF;
111 #main-window[tabsintitlebar]:not([inFullscreen]) #toolbar-menubar:not(:-moz-lwtheme):-moz-window-inactive,
112 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar:not(:-moz-lwtheme):-moz-window-inactive {
113 background-color: #8050B0;
117 #TabsToolbar:-moz-lwtheme {
118 /*background: linear-gradient(to top, @toolbarShadowColor@ 2px, transparent 2px);*/
121 #main-window[tabsintitlebar] #titlebar:-moz-lwtheme {
125 #main-window[tabsintitlebar] #titlebar-content:-moz-lwtheme {
126 -moz-binding: url("chrome://global/content/bindings/general.xml#windowdragbox");
130 /* Make the menu inherit the toolbar's color. On non-compositor (Aero Basic, XP modern, classic)
131 * this is defined above, but only for tabsintitlebar. Otherwise (Aero Glass, Windows 8),
132 * this is hardcoded to black in browser-aero.css, even without tabsintitlebar. */
133 #main-window[tabsintitlebar] #main-menubar > menu:not(:-moz-lwtheme) {
134 /* color: inherit; */
138 /* Position the toolbar above the bottom of background tabs */
143 #personal-bookmarks {
144 /* min-height: 24px; */
147 #print-preview-toolbar:not(:-moz-lwtheme) {
148 /* -moz-appearance: toolbox; */
151 #browser-bottombox:not(:-moz-lwtheme) {
154 /* ::::: titlebar ::::: */
158 background-color: #6000CF;
161 #titlebar:-moz-window-inactive {
162 background-color: #8050B0;
166 #main-window[sizemode="normal"] > #titlebar {
171 #main-window[sizemode="maximized"] > #titlebar {
175 /* The button box must appear on top of the navigator-toolbox in order for
176 * click and hover mouse events to work properly for the button in the restored
177 * window state. Otherwise, elements in the navigator-toolbox, like the menubar,
178 * can swallow those events. It will also place the buttons above the fog on
179 * themes with Aero Glass.
181 #titlebar-buttonbox {
182 -moz-appearance: none;
185 -moz-margin-end: 3px;
189 .titlebar-placeholder[type="appmenu-button"] {
193 .titlebar-placeholder[type="caption-buttons"] {
197 /* titlebar command buttons */
200 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
203 #titlebar-min:hover {
204 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
208 list-style-image: url("chrome://browser/skin/win-maximize.gif");
211 #titlebar-max:hover {
212 list-style-image: url("chrome://browser/skin/win-maximize-hover.gif");
215 #main-window[sizemode="maximized"] #titlebar-max {
216 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
219 #main-window[sizemode="maximized"] #titlebar-max:hover {
220 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
224 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
227 #titlebar-close:hover {
228 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
231 /* ::::: bookmark buttons ::::: */
233 toolbarbutton.bookmark-item:not(.subviewbutton),
234 #personal-bookmarks[cui-areatype="toolbar"]:not([overflowedItem=true]) > #bookmarks-toolbar-placeholder {
239 toolbarbutton.bookmark-item:not([disabled="true"]):not(.subviewbutton):hover:active,
240 toolbarbutton.bookmark-item[open="true"] {
243 -moz-padding-start: 4px;
244 -moz-padding-end: 2px;*/
247 .bookmark-item > .toolbarbutton-icon,
248 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
253 /* Force the display of the label for bookmarks */
254 .bookmark-item > .toolbarbutton-text,
255 #personal-bookmarks[cui-areatype="toolbar"] > #bookmarks-toolbar-placeholder > .toolbarbutton-text {
256 display: -moz-box !important;
259 .bookmark-item > .toolbarbutton-menu-dropmarker {
263 #bookmarks-toolbar-placeholder {
264 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png") !important;
267 toolbarpaletteitem[place="palette"] > #personal-bookmarks > #bookmarks-toolbar-placeholder,
268 #personal-bookmarks[cui-areatype="menu-panel"] > #bookmarks-toolbar-placeholder {
269 list-style-image: url("chrome://browser/skin/places/bookmarksToolbar-menuPanel.png") !important;
272 /* ----- BOOKMARK STAR ANIMATION ----- */
274 @keyframes animation-bookmarkAdded {
275 from { transform: rotate(0deg) translateX(-16px) rotate(0deg) scale(1); opacity: 0; }
276 60% { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(2.2); opacity: 1; }
278 to { transform: rotate(180deg) translateX(-16px) rotate(-180deg) scale(1); opacity: 0; }
281 @keyframes animation-bookmarkPulse {
282 from { transform: scale(1); }
283 50% { transform: scale(1.3); }
284 to { transform: scale(1); }
287 #bookmarked-notification-container {
296 #bookmarked-notification {
297 background-size: 16px;
298 background-position: center;
299 background-repeat: no-repeat;
305 #bookmarked-notification-dropmarker-anchor {
310 #bookmarked-notification-dropmarker-icon {
316 #bookmarked-notification-anchor[notification="finish"] > #bookmarked-notification {
317 background-image: url("chrome://browser/skin/places/bookmarks-notification-finish.png");
318 animation: animation-bookmarkAdded 800ms;
319 animation-timing-function: ease, ease, ease;
322 #bookmarks-menu-button[notification="finish"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
323 list-style-image: none !important;
326 #bookmarked-notification-dropmarker-anchor[notification="finish"] > #bookmarked-notification-dropmarker-icon {
328 animation: animation-bookmarkPulse 300ms;
329 animation-delay: 600ms;
330 animation-timing-function: ease-out;
333 /* ::::: bookmark menus ::::: */
336 menuitem.bookmark-item {
341 .bookmark-item:not(.subviewbutton) > .menu-iconic-left {
346 .bookmark-item > .menu-iconic-left > .menu-iconic-icon {
347 -moz-padding-start: 0px;
350 /* ::::: bookmark items ::::: */
353 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
354 -moz-image-region: auto;
357 .bookmark-item[container] {
358 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
359 -moz-image-region: auto;
362 .bookmark-item[container][open] {
363 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
364 -moz-image-region: auto;
367 .bookmark-item[container][livemark] {
368 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-folder.png");
369 -moz-image-region: auto;
372 .bookmark-item[container][livemark] .bookmark-item {
373 list-style-image: url("chrome://communicator/skin/bookmarks/livemark-item.png");
374 -moz-image-region: rect(0px, 16px, 16px, 0px);
377 .bookmark-item[container][livemark] .bookmark-item[visited] {
378 -moz-image-region: rect(0px, 32px, 16px, 16px);
381 .bookmark-item[container][query] {
382 list-style-image: url("chrome://communicator/skin/bookmarks/query.png");
383 -moz-image-region: auto;
386 .bookmark-item[query][tagContainer] {
387 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
388 -moz-image-region: auto;
391 .bookmark-item[query][dayContainer] {
392 list-style-image: url("chrome://communicator/skin/history/calendar.png");
393 -moz-image-region: auto;
396 .bookmark-item[query][hostContainer] {
397 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-closed.gif");
398 -moz-image-region: auto;
401 .bookmark-item[query][hostContainer][open] {
402 list-style-image: url("chrome://communicator/skin/bookmarks/bookmark-folder-open.gif");
403 -moz-image-region: auto;
406 .bookmark-item[cutting] > .toolbarbutton-icon,
407 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-icon {
411 .bookmark-item[cutting] > .toolbarbutton-text,
412 .bookmark-item[cutting] > .menu-iconic-left > .menu-iconic-text {
416 /* ::::: primary toolbar buttons ::::: */
418 /* === BEGIN toolbarbuttons.inc.css === */
420 /* Whole section of this included file: */
421 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
422 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
423 #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button,
424 #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
425 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
426 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
427 #copy-button, #paste-button, #e10s-button),
429 #bookmarks-menu-button > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
430 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
434 -moz-image-region: rect(0, 36px, 18px, 18px);
437 #back-button:hover:not([disabled="true"]) {
438 -moz-image-region: rect(18px, 36px, 36px, 18px);
441 #back-button[disabled="true"] {
442 -moz-image-region: rect(36px, 36px, 54px, 18px);
446 -moz-image-region: rect(0, 72px, 18px, 54px);
449 #forward-button:hover:not([disabled="true"]) {
450 -moz-image-region: rect(18px, 72px, 36px, 54px);
453 #forward-button[disabled="true"] {
454 -moz-image-region: rect(36px, 72px, 54px, 54px);
457 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
458 #forward-button:-moz-locale-dir(rtl) {
459 transform: scaleX(-1);
462 #home-button[cui-areatype="toolbar"] {
463 -moz-image-region: rect(0, 126px, 18px, 108px);
466 #home-button[cui-areatype="toolbar"]:hover {
467 -moz-image-region: rect(18px, 126px, 36px, 108px);
470 #bookmarks-menu-button[cui-areatype="toolbar"] {
471 -moz-image-region: rect(0, 144px, 18px, 126px);
474 #bookmarks-menu-button[cui-areatype="toolbar"]:hover,
475 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] {
476 -moz-image-region: rect(18px, 144px, 36px, 126px);
479 /* When "new tab" page shows up, the menubutton-button (star button) is disabled */
480 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-button[disabled="true"] {
481 -moz-image-region: rect(36px, 144px, 54px, 126px) !important;
482 background-color: transparent !important;
485 #bookmarks-menu-button[cui-areatype="toolbar"][starred] {
486 -moz-image-region: rect(0, 162px, 18px, 144px);
489 #bookmarks-menu-button[cui-areatype="toolbar"][starred]:hover,
490 #bookmarks-menu-button[cui-areatype="toolbar"][starred][open="true"],
491 #bookmarks-menu-button[cui-areatype="toolbar"][starred] > .toolbarbutton-menubutton-button[open="true"] {
492 /* When starred and clicked (for edit/delete dialog),
493 * then only the menubutton-button itself is open, but not the whole menubutton. */
494 -moz-image-region: rect(18px, 162px, 36px, 144px);
497 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
498 -moz-image-region: rect(0, 630px, 18px, 612px);
501 #bookmarks-menu-button[cui-areatype="toolbar"] > .toolbarbutton-menubutton-dropmarker {
503 -moz-box-align: center;
506 #bookmarks-menu-button[cui-areatype="toolbar"]:hover > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
507 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
508 -moz-image-region: rect(18px, 630px, 36px, 612px);
511 #bookmarks-menu-button[cui-areatype="toolbar"]:hover:active > .toolbarbutton-menubutton-dropmarker,
512 #bookmarks-menu-button[cui-areatype="toolbar"][open="true"] > .toolbarbutton-menubutton-dropmarker {
515 -moz-padding-start: 2px;
516 -moz-padding-end: 0px;
519 #history-panelmenu[cui-areatype="toolbar"] {
520 -moz-image-region: rect(0, 180px, 18px, 162px);
523 #history-panelmenu[cui-areatype="toolbar"]:hover,
524 #history-panelmenu[cui-areatype="toolbar"][open="true"] {
525 -moz-image-region: rect(18px, 180px, 36px, 162px);
528 #downloads-button[cui-areatype="toolbar"] {
529 -moz-image-region: rect(0, 198px, 18px, 180px);
532 #downloads-button[cui-areatype="toolbar"]:hover,
533 #downloads-button[cui-areatype="toolbar"][open="true"] {
534 -moz-image-region: rect(18px, 198px, 36px, 180px);
537 #add-ons-button[cui-areatype="toolbar"] {
538 -moz-image-region: rect(0, 216px, 18px, 198px);
541 #add-ons-button[cui-areatype="toolbar"]:hover {
542 -moz-image-region: rect(18px, 216px, 36px, 198px);
545 #open-file-button[cui-areatype="toolbar"] {
546 -moz-image-region: rect(0, 234px, 18px, 216px);
549 #open-file-button[cui-areatype="toolbar"]:hover {
550 -moz-image-region: rect(18px, 234px, 36px, 216px);
553 #save-page-button[cui-areatype="toolbar"] {
554 -moz-image-region: rect(0, 252px, 18px, 234px);
557 #save-page-button[cui-areatype="toolbar"]:hover {
558 -moz-image-region: rect(18px, 252px, 36px, 234px);
561 #sync-button[cui-areatype="toolbar"] {
562 -moz-image-region: rect(0, 270px, 18px, 252px);
565 #sync-button[cui-areatype="toolbar"]:hover {
566 -moz-image-region: rect(18px, 270px, 36px, 252px);
569 #sync-button[cui-areatype="toolbar"][status="active"],
570 #sync-button[cui-areatype="toolbar"][status="active"]:hover:active:not([disabled="true"]) {
571 list-style-image: url("chrome://browser/skin/syncProgress-toolbar.png");
572 -moz-image-region: rect(0, 18px, 18px, 0px);
576 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext,
577 #sync-button[cui-areatype="toolbar"][status="active"]:-moz-lwtheme-brighttext:hover:active:not([disabled="true"]) {
578 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
582 #feed-button[cui-areatype="toolbar"] {
583 -moz-image-region: rect(0, 288px, 18px, 270px);
586 #feed-button[cui-areatype="toolbar"]:hover:not([disabled="true"]) {
587 -moz-image-region: rect(18px, 288px, 36px, 270px);
590 #feed-button[cui-areatype="toolbar"][disabled="true"] {
591 -moz-image-region: rect(36px, 288px, 54px, 270px);
594 #social-share-button[cui-areatype="toolbar"] {
595 -moz-image-region: rect(0px, 306px, 18px, 288px);
598 #social-share-button[cui-areatype="toolbar"]:hover {
599 -moz-image-region: rect(18px, 306px, 36px, 288px);
602 #characterencoding-button[cui-areatype="toolbar"] {
603 -moz-image-region: rect(0, 324px, 18px, 306px);
606 #characterencoding-button[cui-areatype="toolbar"]:hover:not([disabled="true"]),
607 #characterencoding-button[cui-areatype="toolbar"][open="true"] {
608 -moz-image-region: rect(18px, 324px, 36px, 306px);
611 #characterencoding-button[cui-areatype="toolbar"][disabled="true"] {
612 -moz-image-region: rect(36px, 324px, 54px, 306px);
615 #new-window-button[cui-areatype="toolbar"] {
616 -moz-image-region: rect(0, 342px, 18px, 324px);
619 #new-window-button[cui-areatype="toolbar"]:hover {
620 -moz-image-region: rect(18px, 342px, 36px, 324px);
623 #e10s-button[cui-areatype="toolbar"] {
624 -moz-image-region: rect(0, 342px, 18px, 324px);
627 #e10s-button[cui-areatype="toolbar"]:hover {
628 -moz-image-region: rect(18px, 342px, 36px, 324px);
631 #e10s-button > .toolbarbutton-icon {
632 transform: scaleY(-1);
635 #new-tab-button[cui-areatype="toolbar"] {
636 -moz-image-region: rect(0, 360px, 18px, 342px);
639 #new-tab-button[cui-areatype="toolbar"]:hover {
640 -moz-image-region: rect(18px, 360px, 36px, 342px);
643 #privatebrowsing-button[cui-areatype="toolbar"] {
644 -moz-image-region: rect(0, 378px, 18px, 360px);
647 #privatebrowsing-button[cui-areatype="toolbar"]:hover {
648 -moz-image-region: rect(18px, 378px, 36px, 360px);
651 #find-button[cui-areatype="toolbar"] {
652 -moz-image-region: rect(0, 396px, 18px, 378px);
655 #find-button[cui-areatype="toolbar"]:hover {
656 -moz-image-region: rect(18px, 396px, 36px, 378px);
659 #print-button[cui-areatype="toolbar"] {
660 -moz-image-region: rect(0, 414px, 18px, 396px);
663 #print-button[cui-areatype="toolbar"]:hover {
664 -moz-image-region: rect(18px, 414px, 36px, 396px);
667 #fullscreen-button[cui-areatype="toolbar"] {
668 -moz-image-region: rect(0, 432px, 18px, 414px);
671 #fullscreen-button[cui-areatype="toolbar"]:hover {
672 -moz-image-region: rect(18px, 432px, 36px, 414px);
675 #developer-button[cui-areatype="toolbar"] {
676 -moz-image-region: rect(0, 450px, 18px, 432px);
679 #developer-button[cui-areatype="toolbar"]:hover,
680 #developer-button[cui-areatype="toolbar"][open="true"] {
681 -moz-image-region: rect(18px, 450px, 36px, 432px);
684 #preferences-button[cui-areatype="toolbar"] {
685 -moz-image-region: rect(0, 468px, 18px, 450px);
688 #preferences-button[cui-areatype="toolbar"]:hover {
689 -moz-image-region: rect(18px, 468px, 36px, 450px);
692 #PanelUI-menu-button {
693 -moz-image-region: rect(0, 486px, 18px, 468px);
696 #PanelUI-menu-button:hover,
697 #PanelUI-menu-button[open="true"] {
698 -moz-image-region: rect(18px, 486px, 36px, 468px);
701 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button {
702 -moz-image-region: rect(0, 504px, 18px, 486px);
705 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button:hover:not([disabled="true"]) {
706 -moz-image-region: rect(18px, 504px, 36px, 486px);
709 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #cut-button[disabled="true"] {
710 -moz-image-region: rect(36px, 504px, 54px, 486px);
713 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button {
714 -moz-image-region: rect(0, 522px, 18px, 504px);
717 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button:hover:not([disabled="true"]) {
718 -moz-image-region: rect(18px, 522px, 36px, 504px);
721 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #copy-button[disabled="true"] {
722 -moz-image-region: rect(36px, 522px, 54px, 504px);
725 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button {
726 -moz-image-region: rect(0, 540px, 18px, 522px);
729 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button:hover:not([disabled="true"]) {
730 -moz-image-region: rect(18px, 540px, 36px, 522px);
733 #edit-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #paste-button[disabled="true"] {
734 -moz-image-region: rect(36px, 540px, 54px, 522px);
737 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button {
738 -moz-image-region: rect(0, 558px, 18px, 540px);
741 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button:hover:not([disabled="true"]) {
742 -moz-image-region: rect(18px, 558px, 36px, 540px);
745 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-out-button[disabled="true"] {
746 -moz-image-region: rect(36px, 558px, 54px, 540px);
749 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button {
750 -moz-image-region: rect(0, 576px, 18px, 558px);
753 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button:hover:not([disabled="true"]) {
754 -moz-image-region: rect(18px, 576px, 36px, 558px);
757 #zoom-controls:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) > #zoom-in-button[disabled="true"] {
758 -moz-image-region: rect(36px, 576px, 54px, 558px);
761 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])) {
762 -moz-image-region: rect(0, 594px, 18px, 576px);
765 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])):hover,
766 #webrtc-status-button:not(:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]))[open="true"] {
767 -moz-image-region: rect(18px, 594px, 36px, 576px);
770 #nav-bar-overflow-button {
771 -moz-image-region: rect(0, 612px, 18px, 594px);
774 #nav-bar-overflow-button:hover,
775 #nav-bar-overflow-button[open="true"] {
776 -moz-image-region: rect(18px, 612px, 36px, 594px);
779 #nav-bar-overflow-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
780 transform: scaleX(-1);
784 -moz-image-region: rect(0, 648px, 18px, 630px);
787 #tabview-button:hover {
788 -moz-image-region: rect(18px, 648px, 36px, 630px);
791 #email-link-button[cui-areatype="toolbar"] {
792 -moz-image-region: rect(0, 666px, 18px, 648px);
795 #email-button[cui-areatype="toolbar"]:hover {
796 -moz-image-region: rect(18px, 666px, 36px, 648px);
799 #sidebar-button[cui-areatype="toolbar"] {
800 -moz-image-region: rect(0, 684px, 18px, 666px);
803 #sidebar-button[cui-areatype="toolbar"]:hover {
804 -moz-image-region: rect(18px, 684px, 36px, 666px);
807 /* === END toolbarbuttons.inc.css === */
809 /* === BEGIN menupanel.inc.css === */
811 /* Menu panel and palette styles */
813 toolbaritem[sdkstylewidget="true"] > toolbarbutton,
814 :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
815 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
816 #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button,
817 #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
818 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
819 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
820 #copy-button, #paste-button, #e10s-button)[cui-areatype="menu-panel"],
821 toolbarpaletteitem[place="palette"] > :-moz-any(#back-button, #forward-button, #home-button, #print-button, #downloads-button, #bookmarks-menu-button,
822 #new-tab-button, #new-window-button, #fullscreen-button, #sync-button, #feed-button, #tabview-button,
823 #webrtc-status-button, #social-share-button, #open-file-button, #find-button, #developer-button,
824 #preferences-button, #privatebrowsing-button, #save-page-button, #switch-to-metro-button, #add-ons-button,
825 #history-panelmenu, #nav-bar-overflow-button, #PanelUI-menu-button, #characterencoding-button,
826 #email-link-button, #sidebar-button, #zoom-out-button, #zoom-reset-button, #zoom-in-button, #cut-button,
827 #copy-button, #paste-button, #e10s-button) {
828 list-style-image: url("chrome://browser/skin/menuPanel.png");
831 #home-button[cui-areatype="menu-panel"],
832 toolbarpaletteitem[place="palette"] > #home-button {
833 -moz-image-region: rect(0px, 128px, 32px, 96px);
836 #home-button[cui-areatype="menu-panel"]:hover,
837 toolbarpaletteitem[place="palette"] > #home-button:hover {
838 -moz-image-region: rect(32px, 128px, 64px, 96px);
841 #bookmarks-menu-button[cui-areatype="menu-panel"],
842 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button {
843 -moz-image-region: rect(0px, 192px, 32px, 160px);
846 #bookmarks-menu-button[cui-areatype="menu-panel"]:hover,
847 toolbarpaletteitem[place="palette"] > #bookmarks-menu-button:hover {
848 -moz-image-region: rect(32px, 192px, 64px, 160px);
851 #bookmarks-menu-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
852 -moz-image-region: rect(32px, 192px, 64px, 160px);
855 #history-panelmenu[cui-areatype="menu-panel"],
856 toolbarpaletteitem[place="palette"] > #history-panelmenu {
857 -moz-image-region: rect(0px, 224px, 32px, 192px);
860 #history-panelmenu[cui-areatype="menu-panel"]:hover,
861 toolbarpaletteitem[place="palette"] > #history-panelmenu:hover {
862 -moz-image-region: rect(32px, 224px, 64px, 192px);
865 #history-panelmenu[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
866 -moz-image-region: rect(32px, 224px, 64px, 192px);
869 #downloads-button[cui-areatype="menu-panel"],
870 toolbarpaletteitem[place="palette"] > #downloads-button {
871 -moz-image-region: rect(0px, 256px, 32px, 224px);
874 #downloads-button[cui-areatype="menu-panel"]:hover,
875 toolbarpaletteitem[place="palette"] > #downloads-button:hover {
876 -moz-image-region: rect(32px, 256px, 64px, 224px);
879 #add-ons-button[cui-areatype="menu-panel"],
880 toolbarpaletteitem[place="palette"] > #add-ons-button {
881 -moz-image-region: rect(0px, 288px, 32px, 256px);
884 #add-ons-button[cui-areatype="menu-panel"]:hover,
885 toolbarpaletteitem[place="palette"] > #add-ons-button:hover {
886 -moz-image-region: rect(32px, 288px, 64px, 256px);
889 #open-file-button[cui-areatype="menu-panel"],
890 toolbarpaletteitem[place="palette"] > #open-file-button {
891 -moz-image-region: rect(0px, 320px, 32px, 288px);
894 #open-file-button[cui-areatype="menu-panel"]:hover,
895 toolbarpaletteitem[place="palette"] > #open-file-button:hover {
896 -moz-image-region: rect(32px, 320px, 64px, 288px);
899 #save-page-button[cui-areatype="menu-panel"],
900 toolbarpaletteitem[place="palette"] > #save-page-button {
901 -moz-image-region: rect(0px, 352px, 32px, 320px);
904 #save-page-button[cui-areatype="menu-panel"]:hover,
905 toolbarpaletteitem[place="palette"] > #save-page-button:hover {
906 -moz-image-region: rect(32px, 352px, 64px, 320px);
909 #sync-button[cui-areatype="menu-panel"],
910 toolbarpaletteitem[place="palette"] > #sync-button {
911 -moz-image-region: rect(0px, 384px, 32px, 352px);
914 #sync-button[cui-areatype="menu-panel"]:hover,
915 toolbarpaletteitem[place="palette"] > #sync-button:hover {
916 -moz-image-region: rect(32px, 384px, 64px, 352px);
919 #sync-button[cui-areatype="menu-panel"][status="active"] {
920 list-style-image: url("chrome://browser/skin/syncProgress-menuPanel.png");
921 -moz-image-region: rect(0px, 32px, 32px, 0px);
924 #feed-button[cui-areatype="menu-panel"],
925 toolbarpaletteitem[place="palette"] > #feed-button {
926 -moz-image-region: rect(0px, 416px, 32px, 384px);
929 #feed-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
930 toolbarpaletteitem[place="palette"] > #feed-button:hover:not([disabled="true"]) {
931 -moz-image-region: rect(32px, 416px, 64px, 384px);
934 #feed-button[cui-areatype="menu-panel"][disabled="true"],
935 toolbarpaletteitem[place="palette"] > #feed-button[disabled="true"] {
936 -moz-image-region: rect(64px, 416px, 96px, 384px);
939 #social-share-button[cui-areatype="menu-panel"],
940 toolbarpaletteitem[place="palette"] > #social-share-button {
941 -moz-image-region: rect(0px, 448px, 32px, 416px);
944 #social-share-button[cui-areatype="menu-panel"]:hover,
945 toolbarpaletteitem[place="palette"] > #social-share-button:hover {
946 -moz-image-region: rect(32px, 448px, 64px, 416px);
949 #characterencoding-button[cui-areatype="menu-panel"],
950 toolbarpaletteitem[place="palette"] > #characterencoding-button {
951 -moz-image-region: rect(0px, 480px, 32px, 448px);
954 #characterencoding-button[cui-areatype="menu-panel"]:hover:not([disabled="true"]),
955 toolbarpaletteitem[place="palette"] > #characterencoding-button:hover:not([disabled="true"]) {
956 -moz-image-region: rect(32px, 480px, 64px, 448px);
959 #characterencoding-button[cui-areatype="menu-panel"][disabled="true"],
960 toolbarpaletteitem[place="palette"] > #characterencoding-button[disabled="true"] {
961 -moz-image-region: rect(64px, 480px, 96px, 448px);
964 #characterencoding-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
965 -moz-image-region: rect(32px, 480px, 64px, 448px);
968 #new-window-button[cui-areatype="menu-panel"],
969 toolbarpaletteitem[place="palette"] > #new-window-button {
970 -moz-image-region: rect(0px, 512px, 32px, 480px);
973 #new-window-button[cui-areatype="menu-panel"]:hover,
974 toolbarpaletteitem[place="palette"] > #new-window-button:hover {
975 -moz-image-region: rect(32px, 512px, 64px, 480px);
978 #e10s-button[cui-areatype="menu-panel"],
979 toolbarpaletteitem[place="palette"] > #e10s-button {
980 -moz-image-region: rect(0px, 512px, 32px, 480px);
983 #e10s-button[cui-areatype="menu-panel"]:hover,
984 toolbarpaletteitem[place="palette"] > #e10s-button:hover {
985 -moz-image-region: rect(32px, 512px, 64px, 480px);
988 #new-tab-button[cui-areatype="menu-panel"],
989 toolbarpaletteitem[place="palette"] > #new-tab-button {
990 -moz-image-region: rect(0px, 544px, 32px, 512px);
993 #new-tab-button[cui-areatype="menu-panel"]:hover,
994 toolbarpaletteitem[place="palette"] > #new-tab-button:hover {
995 -moz-image-region: rect(32px, 544px, 64px, 512px);
998 #privatebrowsing-button[cui-areatype="menu-panel"],
999 toolbarpaletteitem[place="palette"] > #privatebrowsing-button {
1000 -moz-image-region: rect(0px, 576px, 32px, 544px);
1003 #privatebrowsing-button[cui-areatype="menu-panel"]:hover,
1004 toolbarpaletteitem[place="palette"] > #privatebrowsing-button:hover {
1005 -moz-image-region: rect(32px, 576px, 64px, 544px);
1008 #tabview-button[cui-areatype="menu-panel"],
1009 toolbarpaletteitem[place="palette"] > #tabview-button {
1010 -moz-image-region: rect(0px, 608px, 32px, 576px);
1013 #tabview-button[cui-areatype="menu-panel"]:hover,
1014 toolbarpaletteitem[place="palette"] > #tabview-button:hover {
1015 -moz-image-region: rect(32px, 608px, 64px, 576px);
1018 #find-button[cui-areatype="menu-panel"],
1019 toolbarpaletteitem[place="palette"] > #find-button {
1020 -moz-image-region: rect(0px, 640px, 32px, 608px);
1023 #find-button[cui-areatype="menu-panel"]:hover,
1024 toolbarpaletteitem[place="palette"] > #find-button:hover {
1025 -moz-image-region: rect(32px, 640px, 64px, 608px);
1028 #print-button[cui-areatype="menu-panel"],
1029 toolbarpaletteitem[place="palette"] > #print-button {
1030 -moz-image-region: rect(0px, 672px, 32px, 640px);
1033 #print-button[cui-areatype="menu-panel"]:hover,
1034 toolbarpaletteitem[place="palette"] > #print-button:hover {
1035 -moz-image-region: rect(32px, 672px, 64px, 640px);
1038 #fullscreen-button[cui-areatype="menu-panel"],
1039 toolbarpaletteitem[place="palette"] > #fullscreen-button {
1040 -moz-image-region: rect(0px, 704px, 32px, 672px);
1043 #fullscreen-button[cui-areatype="menu-panel"]:hover,
1044 toolbarpaletteitem[place="palette"] > #fullscreen-button:hover {
1045 -moz-image-region: rect(32px, 704px, 64px, 672px);
1048 #developer-button[cui-areatype="menu-panel"],
1049 toolbarpaletteitem[place="palette"] > #developer-button {
1050 -moz-image-region: rect(0px, 736px, 32px, 704px);
1053 #developer-button[cui-areatype="menu-panel"]:hover,
1054 toolbarpaletteitem[place="palette"] > #developer-button:hover {
1055 -moz-image-region: rect(32px, 736px, 64px, 704px);
1058 #developer-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1059 -moz-image-region: rect(32px, 736px, 64px, 704px);
1062 #preferences-button[cui-areatype="menu-panel"],
1063 toolbarpaletteitem[place="palette"] > #preferences-button {
1064 -moz-image-region: rect(0px, 768px, 32px, 736px);
1067 #preferences-button[cui-areatype="menu-panel"]:hover,
1068 toolbarpaletteitem[place="palette"] > #preferences-button:hover {
1069 -moz-image-region: rect(32px, 768px, 64px, 736px);
1072 #email-link-button[cui-areatype="menu-panel"],
1073 toolbarpaletteitem[place="palette"] > #email-link-button {
1074 -moz-image-region: rect(0, 800px, 32px, 768px);
1077 #email-link-button[cui-areatype="menu-panel"]:hover,
1078 toolbarpaletteitem[place="palette"] > #email-link-button:hover {
1079 -moz-image-region: rect(32px, 800px, 64px, 768px);
1082 #sidebar-button[cui-areatype="menu-panel"],
1083 toolbarpaletteitem[place="palette"] > #sidebar-button {
1084 -moz-image-region: rect(0, 864px, 32px, 832px);
1087 #sidebar-button[cui-areatype="menu-panel"]:hover,
1088 toolbarpaletteitem[place="palette"] > #sidebar-button:hover {
1089 -moz-image-region: rect(32px, 864px, 64px, 832px);
1092 #sidebar-button[cui-areatype="menu-panel"][panel-multiview-anchor=true] {
1093 -moz-image-region: rect(32px, 864px, 64px, 832px);
1096 toolbaritem[sdkstylewidget="true"] > toolbarbutton {
1097 -moz-image-region: rect(0, 832px, 32px, 800px);
1100 /* Wide panel control icons */
1102 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1103 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton,
1104 toolbarpaletteitem[place="palette"] > #edit-controls > toolbarbutton,
1105 toolbarpaletteitem[place="palette"] > #zoom-controls > toolbarbutton {
1106 list-style-image: url("chrome://browser/skin/menuPanel-small.png");
1109 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button,
1110 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button {
1111 -moz-image-region: rect(0px, 32px, 16px, 16px);
1114 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:hover:not([disabled="true"]),
1115 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button:hover:not([disabled="true"]) {
1116 -moz-image-region: rect(16px, 32px, 32px, 16px);
1119 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button[disabled="true"],
1120 toolbarpaletteitem[place="palette"] > #edit-controls > #cut-button[disabled="true"] {
1121 -moz-image-region: rect(32px, 32px, 48px, 16px);
1124 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1125 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button {
1126 -moz-image-region: rect(0px, 48px, 16px, 32px);
1129 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button:hover:not([disabled="true"]),
1130 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button:hover:not([disabled="true"]) {
1131 -moz-image-region: rect(16px, 48px, 32px, 32px);
1134 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button[disabled="true"],
1135 toolbarpaletteitem[place="palette"] > #edit-controls > #copy-button[disabled="true"] {
1136 -moz-image-region: rect(32px, 48px, 48px, 32px);
1139 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button,
1140 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button {
1141 -moz-image-region: rect(0px, 64px, 16px, 48px);
1144 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:hover:not([disabled="true"]),
1145 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button:hover:not([disabled="true"]) {
1146 -moz-image-region: rect(16px, 64px, 32px, 48px);
1149 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button[disabled="true"],
1150 toolbarpaletteitem[place="palette"] > #edit-controls > #paste-button[disabled="true"] {
1151 -moz-image-region: rect(32px, 64px, 48px, 48px);
1154 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button,
1155 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button {
1156 -moz-image-region: rect(0px, 80px, 16px, 64px);
1159 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:hover:not([disabled="true"]),
1160 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button:hover:not([disabled="true"]) {
1161 -moz-image-region: rect(16px, 80px, 32px, 64px);
1164 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button[disabled="true"],
1165 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-out-button[disabled="true"] {
1166 -moz-image-region: rect(32px, 80px, 48px, 64px);
1169 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button,
1170 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button {
1171 -moz-image-region: rect(0px, 96px, 16px, 80px);
1174 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:hover:not([disabled="true"]),
1175 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button:hover:not([disabled="true"]) {
1176 -moz-image-region: rect(16px, 96px, 32px, 80px);
1179 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button[disabled="true"],
1180 toolbarpaletteitem[place="palette"] > #zoom-controls > #zoom-in-button[disabled="true"] {
1181 -moz-image-region: rect(32px, 96px, 48px, 80px);
1184 /* === END menupanel.inc.css === */
1186 .toolbarbutton-1:not([type="menu-button"]) {
1187 -moz-box-orient: vertical;
1191 .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1197 .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1198 .toolbarbutton-1[disabled="true"]:hover:active,
1199 .toolbarbutton-1[disabled="true"]:hover:active > .toolbarbutton-menubutton-button {
1203 .toolbarbutton-1:hover:active,
1204 .toolbarbutton-1[open="true"],
1205 .toolbarbutton-1:hover:active > .toolbarbutton-menubutton-button {
1207 padding-bottom: 0px;
1208 -moz-padding-start: 3px;
1209 -moz-padding-end: 1px;
1212 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-icon,
1213 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menu-dropmarker,
1214 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-dropmarker,
1215 #main-window:not([customizing]) .toolbarbutton-1[disabled=true] > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1216 #main-window:not([customizing]) .toolbarbutton-1 > .toolbarbutton-menubutton-button[disabled=true] > .toolbarbutton-icon {
1219 .toolbarbutton-1 > .toolbarbutton-menu-dropmarker,
1220 .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1223 toolbar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker:-moz-lwtheme-brighttext,
1224 toolbar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker:-moz-lwtheme-brighttext {
1227 .toolbarbutton-1 > .toolbarbutton-icon,
1228 .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1231 #nav-bar .toolbarbutton-1,
1232 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1235 #nav-bar .toolbarbutton-1:not([type=menu-button]),
1236 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1237 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1240 #nav-bar #PanelUI-menu-button {
1241 /* -moz-padding-start: 7px;
1242 -moz-padding-end: 5px;*/
1245 #nav-bar .toolbarbutton-1[type=menu]:not(#back-button):not(#forward-button):not(#feed-button):not(#social-provider-button):not(#PanelUI-menu-button) {
1246 /* padding-left: 5px;
1247 padding-right: 5px;*/
1250 #nav-bar .toolbarbutton-1 > menupopup {
1251 /* margin-top: -3px;*/
1254 #nav-bar .toolbarbutton-1 > menupopup.cui-widget-panel {
1258 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1259 /* -moz-padding-end: 0;*/
1262 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1263 /* -moz-padding-start: 0;
1264 -moz-box-align: center;*/
1267 #nav-bar .toolbarbutton-1 > .toolbarbutton-icon,
1268 #nav-bar .toolbarbutton-1 > .toolbarbutton-text,
1269 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container,
1270 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1271 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1272 window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1273 /* padding: 2px 6px;
1275 border-color: transparent;
1276 transition-property: background-color, border-color;
1277 transition-duration: 150ms;*/
1280 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-icon,
1281 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-badge-container,
1282 #nav-bar .toolbarbutton-1:not(:-moz-any(@primaryToolbarButtons@)) > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1287 /* Help SDK icons fit: */
1288 toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1292 #nav-bar toolbarbutton[sdk-button="true"][cui-areatype="toolbar"] > .toolbarbutton-icon {
1293 /* XXXgijs box models strike again: this is 16px + 2 * 7px padding + 2 * 1px border (from the rules above) */
1297 #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,
1298 #nav-bar .toolbarbutton-1[type=menu] > .toolbarbutton-text /* hack for add-ons that forcefully display the label */ {
1299 /* -moz-padding-end: 17px;*/
1302 #nav-bar .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
1305 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
1308 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1311 #nav-bar .toolbaritem-combined-buttons {
1312 /* margin-left: 2px;
1313 margin-right: 2px;*/
1316 #nav-bar .toolbaritem-combined-buttons > .toolbarbutton-1 {
1321 #nav-bar .toolbarbutton-1:not(:hover):not(:active):not([open]) > .toolbarbutton-menubutton-dropmarker::before,
1322 #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 {
1328 -moz-margin-end: -1px;
1332 window:not([chromehidden~="toolbar"]) #urlbar-container > .toolbarbutton-1:-moz-any([disabled=true],:not([open]):not([disabled=true]):not(:active)) > .toolbarbutton-icon {
1335 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
1336 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any(:hover,[open]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon,
1337 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-icon,
1338 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-text,
1339 #nav-bar .toolbarbutton-1:not([disabled=true]):not([checked]):not([open]):not(:active):hover > .toolbarbutton-badge-container,
1340 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button:not([open]):not(:active):not([disabled=true]):hover > .toolbarbutton-icon,
1341 #nav-bar .toolbarbutton-1:not([buttonover]):not([open]):not(:active):hover > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon {
1344 #nav-bar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover:active > .toolbarbutton-icon,
1345 #nav-bar .toolbarbutton-1[open] > .toolbarbutton-menubutton-dropmarker:not([disabled=true]) > .dropmarker-icon,
1346 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-icon,
1347 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-text,
1348 #nav-bar .toolbarbutton-1:not([disabled=true]):-moz-any([open],[checked],:hover:active) > .toolbarbutton-badge-container {
1351 #TabsToolbar .toolbarbutton-1,
1352 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1353 .tabbrowser-arrowscrollbox > .scrollbutton-up,
1354 .tabbrowser-arrowscrollbox > .scrollbutton-down {
1357 #TabsToolbar .toolbarbutton-1:not([disabled=true]):hover,
1358 #TabsToolbar .toolbarbutton-1[open],
1359 #TabsToolbar .toolbarbutton-1 > .toolbarbutton-menubutton-button:not([disabled=true]):hover,
1360 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled=true]):hover,
1361 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled=true]):hover {
1364 /* unified back/forward button */
1369 #forward-button > menupopup {
1370 margin-top: 1px !important;
1373 #forward-button > .toolbarbutton-icon {
1374 background-clip: padding-box !important;
1375 /*mask: url(keyhole-forward-mask.svg#mask); XXX: this regresses twinopen */
1376 /*clip-path: url(chrome://browser/content/browser.xul#keyhole-forward-clip-path) !important;*/
1380 -moz-margin-start: -6px !important;
1385 border-radius: 0 10000px 10000px 0;
1388 #forward-button:-moz-locale-dir(rtl) {
1389 border-radius: 10000px 0 0 10000px;
1392 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #forward-button,
1393 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #forward-button {
1394 transition: opacity 150ms ease-out;
1397 window:not([chromehidden~="toolbar"]) #urlbar-container:not(:hover) > #forward-button[disabled=true],
1398 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not(:hover) > #forward-button[disabled=true] {
1402 window:not([chromehidden~="toolbar"]) #urlbar-container > #forward-button[occluded-by-urlbar],
1403 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #forward-button[occluded-by-urlbar] {
1408 /* padding-top: 3px !important;
1409 padding-bottom: 3px !important;
1410 -moz-padding-start: 5px !important;
1411 -moz-padding-end: 0 !important;*/
1414 border-radius: 10000px;
1418 margin-bottom: -2px;
1421 #back-button:-moz-locale-dir(rtl) {
1424 #back-button > menupopup {
1425 margin-top: -1px !important;
1428 #back-button > .toolbarbutton-icon {
1429 border-radius: 10000px !important;
1430 background-clip: padding-box !important;
1431 /* background-color: hsla(210,25%,98%,.08) !important;
1432 padding: 6px !important;
1433 border-color: hsla(210,4%,10%,.25) !important;*/
1434 transition-property: background-color, border-color !important;
1435 transition-duration: 250ms !important;
1438 #back-button:not([disabled="true"]):not([open="true"]):not(:active):hover > .toolbarbutton-icon {
1439 /* background-color: hsla(210,4%,10%,.08) !important;
1440 box-shadow: none !important;*/
1443 #back-button:not([disabled="true"]):hover:active > .toolbarbutton-icon,
1444 #back-button[open="true"] > .toolbarbutton-icon {
1445 /* background-color: hsla(210,4%,10%,.12) !important;
1446 box-shadow: 0 1px 0 0 hsla(210,80%,20%,.1) inset !important;*/
1449 #back-button:-moz-locale-dir(rtl) > .toolbarbutton-icon,
1450 #forward-button:-moz-locale-dir(rtl) {
1451 transform: scaleX(-1);
1454 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(ltr),
1455 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(rtl) {
1456 list-style-image: url("chrome://browser/skin/menu-back.png") !important;
1459 .unified-nav-forward[_moz-menuactive]:-moz-locale-dir(ltr),
1460 .unified-nav-back[_moz-menuactive]:-moz-locale-dir(rtl) {
1461 list-style-image: url("chrome://browser/skin/menu-forward.png") !important;
1464 #home-button.bookmark-item {
1465 list-style-image: url("chrome://browser/skin/Toolbar.png");
1468 #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),
1469 #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),
1470 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1471 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbaritem > :-moz-any(@nestedButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1472 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1473 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > :-moz-any(@primaryToolbarButtons@):-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1474 #home-button.bookmark-item:-moz-lwtheme-brighttext {
1477 list-style-image: url("chrome://browser/skin/Toolbar-inverted.png");
1480 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
1481 #main-window[tabsintitlebar]:not([inFullscreen]) :-moz-any(#TabsToolbar, #toolbar-menubar) > toolbarpaletteitem > #sync-button[status="active"]:-moz-system-metric(windows-classic):not(:-moz-lwtheme) {
1482 list-style-image: url("chrome://browser/skin/syncProgress-toolbar-inverted.png");
1486 #downloads-button > .toolbarbutton-icon {
1490 /* tabview button & menu item */
1493 list-style-image: url("chrome://browser/skin/tabview/tabview.png");
1494 -moz-image-region: rect(1px, 89px, 17px, 73px);
1497 #menu_tabview[groups="0"] {
1498 -moz-image-region: rect(1px, 17px, 17px, 1px);
1501 #menu_tabview[groups="1"] {
1502 -moz-image-region: rect(1px, 35px, 17px, 19px);
1505 #menu_tabview[groups="2"] {
1506 -moz-image-region: rect(1px, 53px, 17px, 37px);
1509 #menu_tabview[groups="3"] {
1510 -moz-image-region: rect(1px, 71px, 17px, 55px);
1513 /* zoom control text (reset) button special case: */
1515 #nav-bar #zoom-reset-button > .toolbarbutton-text {
1516 /* To make this line up with the icons, it needs the same height (18px) +
1517 * padding (2 * 2px) + border (2 * 1px), but as a minimum because otherwise
1518 * increase in text sizes would break things...
1523 /* ::::: fullscreen window controls ::::: */
1526 -moz-margin-start: 4px;
1532 /* list-style-image: url("chrome://global/skin/icons/windowControls.png");
1537 list-style-image: url("chrome://navigator/skin/icons/win-minimize.gif");
1540 #minimize-button:hover {
1541 list-style-image: url("chrome://navigator/skin/icons/win-minimize-hover.gif");
1545 list-style-image: url("chrome://navigator/skin/icons/win-restore.gif");
1548 #restore-button:hover {
1549 list-style-image: url("chrome://navigator/skin/icons/win-restore-hover.gif");
1553 list-style-image: url("chrome://navigator/skin/icons/win-close.gif");
1556 #close-button:hover {
1557 list-style-image: url("chrome://navigator/skin/icons/win-close-hover.gif");
1560 /* ::::: Location Bar ::::: */
1563 .searchbar-textbox {
1566 -moz-margin-start: 3px;
1570 /* make color as light as possible to deal with dark non-domain parts */
1574 #urlbar:-moz-lwtheme,
1575 .searchbar-textbox:-moz-lwtheme {
1576 /* background-color: rgba(255,255,255,.8);
1577 @navbarTextboxCustomBorder@
1581 #urlbar:-moz-lwtheme:hover:not([focused]):not([readonly]),
1582 .searchbar-textbox:-moz-lwtheme:hover:not([focused]) {
1583 /* background-color: rgba(255,255,255,.9);*/
1586 #urlbar:-moz-lwtheme[focused]:not([readonly]),
1587 .searchbar-textbox:-moz-lwtheme[focused] {
1588 /* background-color: white;*/
1591 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper,
1592 window:not([chromehidden~="toolbar"]) #urlbar-wrapper {
1594 -moz-margin-start: -22px;
1596 pointer-events: none;
1599 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar,
1600 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar {
1601 /* -moz-border-start: none;
1603 pointer-events: all;
1606 window:not([chromehidden~="toolbar"]) #urlbar-container:not([switchingtabs]) > #urlbar-wrapper > #urlbar,
1607 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:not([switchingtabs]) > #urlbar {
1608 transition: margin-left 150ms ease-out;
1611 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr),
1612 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(ltr) {
1613 /* border-top-left-radius: 0;
1614 border-bottom-left-radius: 0; */
1617 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl),
1618 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1619 /* border-top-right-radius: 0;
1620 border-bottom-right-radius: 0; */
1623 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper,
1624 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] {
1625 /* clip-path: url("chrome://browser/content/browser.xul#urlbar-back-button-clip-path");*/
1628 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar,
1629 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar {
1633 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar,
1634 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:hover:not([switchingtabs]) > #urlbar {
1635 /* delay the hiding of the forward button when hovered to avoid accidental clicks on the url bar */
1636 transition-delay: 100s;
1639 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar,
1640 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hover) > #urlbar {
1641 /* when not hovered anymore, trigger a new transition to hide the forward button immediately */
1642 margin-left: -22.01px;
1645 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper:-moz-locale-dir(rtl),
1646 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl),
1647 window:not([chromehidden~="toolbar"]) #urlbar-wrapper:-moz-locale-dir(rtl),
1648 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar:-moz-locale-dir(rtl) {
1649 /* let windows-urlbar-back-button-mask clip the urlbar's right side for RTL */
1650 transform: scaleX(-1);
1653 html|*.urlbar-input:-moz-lwtheme::-moz-placeholder,
1654 .searchbar-textbox:-moz-lwtheme > .autocomplete-textbox-container > .textbox-input-box > html|*.textbox-input::-moz-placeholder {
1659 -moz-box-orient: horizontal;
1660 -moz-box-align: stretch;
1663 .urlbar-textbox-container {
1664 -moz-box-align: stretch;
1668 -moz-margin-start: 0;
1672 -moz-box-align: center;
1679 .searchbar-engine-button,
1680 .search-go-container {
1684 .search-go-container > .search-go-button {
1688 .urlbar-icon:hover {
1691 .urlbar-icon[open="true"],
1692 .urlbar-icon:hover:active {
1695 #urlbar-search-splitter {
1697 -moz-margin-start: -3px;
1699 background: transparent;
1702 #urlbar-search-splitter + #urlbar-container > #urlbar,
1703 #urlbar-search-splitter + #search-container > #searchbar > .searchbar-textbox {
1704 -moz-margin-start: 0;
1707 #urlbar-display-box {
1711 -moz-border-end: 1px solid #9C9CFF;
1712 -moz-margin-end: 3px;
1715 -moz-margin-start: 0;
1720 min-width: calc(54px + 11ch);
1730 #identity-box:-moz-locale-dir(ltr) {
1731 /* border-top-left-radius: 1.5px;
1732 border-bottom-left-radius: 1.5px;*/
1735 #identity-box:-moz-locale-dir(rtl) {
1736 /* border-top-right-radius: 1.5px;
1737 border-bottom-right-radius: 1.5px;*/
1740 #notification-popup-box:not([hidden]) + #identity-box {
1741 -moz-padding-start: 10px !important;
1745 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box,
1746 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box {
1747 /* border-radius: 0; */
1748 -moz-padding-start: 2px;
1749 -moz-padding-end: 2px;
1750 -moz-margin-end: 1px;
1753 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1754 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr),
1755 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar >
1756 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1758 transition: padding-left;
1761 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar >
1762 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl),
1763 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar >
1764 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1766 transition: padding-right;
1769 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:hover:not([switchingtabs]) > #urlbar-wrapper > #urlbar >
1770 #notification-popup-box[hidden] + #identity-box,
1771 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:hover:not([switchingtabs]) > #urlbar >
1772 #notification-popup-box[hidden] + #identity-box {
1773 /* forward button hiding is delayed when hovered */
1774 transition-delay: 100s;
1777 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1778 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr),
1779 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hover) > #urlbar >
1780 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(ltr) {
1781 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1782 padding-left: 2.01px;
1785 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled]:not(:hover) > #urlbar-wrapper > #urlbar >
1786 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl),
1787 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled]:not(:hover) > #urlbar >
1788 #notification-popup-box[hidden] + #identity-box:-moz-locale-dir(rtl) {
1789 /* when not hovered anymore, trigger a new non-delayed transition to react to the forward button hiding */
1790 padding-right: 2.01px;
1793 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1794 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1795 -moz-margin-end: 3px;
1798 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(ltr),
1799 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(ltr) {
1800 border-top-right-radius: 0;
1801 border-bottom-right-radius: 0;
1804 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:-moz-locale-dir(rtl),
1805 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:-moz-locale-dir(rtl) {
1806 border-top-left-radius: 0;
1807 border-bottom-left-radius: 0;
1810 #identity-box.verifiedIdentity:not(:-moz-lwtheme) {
1811 background-color: #000000;
1814 #identity-box:-moz-focusring {
1815 outline: 1px dotted #008484;
1816 outline-offset: -1px;
1819 #identity-box.verifiedDomain:-moz-focusring,
1820 #identity-box.verifiedIdentity:-moz-focusring {
1821 outline-color: #000000;
1824 #identity-icon-labels {
1825 -moz-margin-start: 1px;
1826 -moz-margin-end: 3px;
1829 /* Location bar dropmarker */
1831 .urlbar-history-dropmarker:not(:hover):not([open="true"]) {
1832 background-color: transparent;
1835 #urlbar-container[combined="true"] > #urlbar > .urlbar-history-dropmarker,
1836 #urlbar-wrapper > #urlbar > .urlbar-history-dropmarker {
1841 .urlbar-history-dropmarker:hover {
1844 .urlbar-history-dropmarker:hover:active,
1845 .urlbar-history-dropmarker[open="true"] {
1848 /* page proxy icon */
1850 /* === BEGIN identity-block.inc.css === */
1852 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI {
1853 /* Default theme does different color per channel, we can't as they do it build-time. */
1855 -moz-border-end: 1px solid #9C9CFF;
1858 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1860 -moz-border-end: 1px solid #008484;
1863 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI,
1864 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity {
1865 background-position: right;
1866 background-size: 1px;
1867 background-repeat: no-repeat;
1870 /* page proxy icon */
1872 #page-proxy-favicon {
1875 list-style-image: url("chrome://browser/skin/identity-icons-generic.png");
1879 .chromeUI > #page-proxy-favicon[pageproxystate="valid"] {
1880 list-style-image: url("chrome://branding/content/identity-icons-brand.png");
1883 .verifiedDomain > #page-proxy-favicon[pageproxystate="valid"] {
1884 list-style-image: url("chrome://browser/skin/identity-icons-https.png");
1887 .verifiedIdentity > #page-proxy-favicon[pageproxystate="valid"] {
1888 list-style-image: url("chrome://browser/skin/identity-icons-https-ev.png");
1891 .mixedActiveContent > #page-proxy-favicon[pageproxystate="valid"] {
1892 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-active.png");
1895 .mixedDisplayContent > #page-proxy-favicon[pageproxystate="valid"] {
1896 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1899 .mixedDisplayContentLoadedActiveBlocked > #page-proxy-favicon[pageproxystate="valid"] {
1900 list-style-image: url("chrome://browser/skin/identity-icons-https-mixed-display.png");
1903 #page-proxy-favicon[pageproxystate="invalid"] {
1907 #identity-popup.chromeUI > #identity-popup-container > #identity-popup-icon {
1908 list-style-image: url("chrome://branding/content/icon64.png");
1911 #identity-popup-brandName {
1915 margin-bottom: .5em;
1918 #identity-popup-content-box {
1922 /* === END identity-block.inc.css === */
1924 #page-proxy-favicon {
1925 -moz-image-region: rect(0, 16px, 16px, 0);
1928 window:not([chromehidden~="toolbar"]) #urlbar-container > #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon,
1929 window:not([chromehidden~="toolbar"]) #urlbar-wrapper > #urlbar > #identity-box > #page-proxy-favicon {
1930 /* -moz-margin-end: 1px;*/
1933 #identity-box:hover > #page-proxy-favicon {
1934 -moz-image-region: rect(0, 32px, 16px, 16px);
1937 #identity-box:hover:active > #page-proxy-favicon,
1938 #identity-box[open=true] > #page-proxy-favicon {
1939 -moz-image-region: rect(0, 48px, 16px, 32px);
1942 #identity-box:hover {
1943 background-color: #FFCF00;
1947 #identity-box:hover:active,
1948 #identity-box[open=true] {
1949 background-color: #FF9F00;
1953 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover,
1954 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI:hover:active,
1955 #urlbar[pageproxystate="valid"] > #identity-box.chromeUI[open=true] {
1956 background-color: #9C9CFF;
1960 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover,
1961 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity:hover:active,
1962 #urlbar[pageproxystate="valid"] > #identity-box.verifiedIdentity[open=true] {
1963 background-color: #008484;
1969 #treecolAutoCompleteImage {
1973 .ac-result-type-bookmark,
1974 .autocomplete-treebody::-moz-tree-image(bookmark, treecolAutoCompleteImage) {
1975 list-style-image: url("chrome://browser/skin/places/bookmark.png");
1976 -moz-image-region: rect(0px 16px 16px 0px);
1981 richlistitem[selected="true"][current="true"] > .ac-title-box > .ac-result-type-bookmark,
1982 .autocomplete-treebody::-moz-tree-image(selected, current, bookmark, treecolAutoCompleteImage) {
1983 /* -moz-image-region: rect(0px 48px 16px 32px);*/
1986 .ac-result-type-keyword,
1987 .autocomplete-treebody::-moz-tree-image(keyword, treecolAutoCompleteImage) {
1988 list-style-image: url("chrome://global/skin/icons/Search-glass.png");
1989 -moz-image-region: rect(0px 32px 16px 16px);
1994 .ac-result-type-tag,
1995 .autocomplete-treebody::-moz-tree-image(tag, treecolAutoCompleteImage) {
1996 list-style-image: url("chrome://mozapps/skin/places/tagContainerIcon.png");
2005 .ac-extra > .ac-comment {
2015 richlistitem[type~="action"][actiontype="switchtab"] > .ac-url-box > .ac-action-icon {
2016 list-style-image: url("chrome://browser/skin/actionicon-tab.png");
2017 -moz-image-region: rect(0, 16px, 16px, 0);
2021 richlistitem[type~="action"][actiontype="switchtab"][selected="true"] > .ac-url-box > .ac-action-icon {
2022 -moz-image-region: rect(16px, 16px, 32px, 0);
2025 .autocomplete-treebody::-moz-tree-cell-text(treecolAutoCompleteComment) {
2029 .ac-comment[selected="true"],
2030 .ac-url-text[selected="true"],
2031 .ac-action-text[selected="true"] {
2032 color: inherit !important;
2035 .autocomplete-treebody::-moz-tree-cell-text(suggesthint, treecolAutoCompleteComment),
2036 .autocomplete-treebody::-moz-tree-cell-text(suggestfirst, treecolAutoCompleteComment)
2042 .autocomplete-treebody::-moz-tree-cell(suggesthint) {
2043 border-top: 1px solid #9C9CFF;
2046 /* combined go/reload/stop button in location bar */
2048 #urlbar > toolbarbutton {
2049 -moz-margin-start: 0;
2051 background-origin: border-box;
2053 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
2054 -moz-border-start: 1px solid #9C9CFF;
2057 #urlbar:-moz-locale-dir(ltr) > toolbarbutton {
2058 border-top-left-radius: 0px;
2059 border-bottom-left-radius: 0px;
2062 #urlbar:-moz-locale-dir(rtl) > toolbarbutton {
2063 border-top-right-radius: 0px;
2064 border-bottom-right-radius: 0px;
2067 #urlbar > toolbarbutton:not([disabled=true]):active:hover,
2068 #urlbar-reload-button:not(:hover) {
2069 -moz-border-start-style: none;
2070 -moz-padding-start: 3px;
2073 #urlbar-reload-button {
2074 -moz-image-region: rect(0px, 14px, 14px, 0px);
2077 #urlbar-reload-button[disabled=true] {
2078 -moz-image-region: rect(28px, 14px, 42px, 0px);
2081 #urlbar-reload-button:not([disabled=true]):hover {
2082 -moz-image-region: rect(14px, 14px, 28px, 0px);
2085 #urlbar-reload-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2086 transform: scaleX(-1);
2090 -moz-image-region: rect(0, 42px, 14px, 28px);
2093 #urlbar-go-button:hover {
2094 -moz-image-region: rect(14px, 42px, 28px, 28px);
2097 #urlbar-go-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
2098 transform: scaleX(-1);
2101 #urlbar-stop-button {
2102 -moz-image-region: rect(0px, 28px, 14px, 14px);
2105 #urlbar-stop-button:hover {
2106 -moz-image-region: rect(14px, 28px, 28px, 14px);
2109 /* popup blocker button */
2111 #page-report-button {
2112 list-style-image: url("chrome://browser/skin/urlbar-popup-blocked.png");
2113 -moz-image-region: rect(0, 16px, 16px, 0);
2116 #page-report-button:hover ,
2117 #page-report-button:hover:active,
2118 #page-report-button[open="true"] {
2119 -moz-image-region: rect(0, 32px, 16px, 16px);
2122 /* social share panel */
2124 #social-share-panel > iframe {
2125 /* background: linear-gradient(to bottom, #f0f4f7, #fafbfc);*/
2130 .social-share-toolbar {
2131 border-right: 1px solid #9C9CFF;
2132 /* background-color: #000000; */
2135 #social-share-provider-buttons {
2139 #social-share-provider-buttons > .share-provider-button {
2140 -moz-appearance: none;
2148 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]),
2149 #social-share-provider-buttons > .share-provider-button:hover,
2150 #social-share-provider-buttons > .share-provider-button:active {
2154 #social-share-provider-buttons > .share-provider-button[checked="true"]:not([disabled="true"]) {
2157 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-text {
2160 #social-share-provider-buttons > .share-provider-button > .toolbarbutton-icon {
2166 toolbarbutton[type="socialmark"] > .toolbarbutton-icon {
2173 /* fixup corners for share panel */
2174 .social-panel > .social-panel-frame {
2175 border-radius: inherit;
2178 #social-share-panel {
2185 .social-share-frame {
2186 /* background: linear-gradient(to bottom, #f0f4f7, #fafbfc); */
2189 /* we resize our panels dynamically, make it look nice */
2190 transition: height 100ms ease-out, width 100ms ease-out;
2193 .social-share-frame:-moz-locale-dir(ltr) {
2194 border-top-left-radius: 0;
2195 border-bottom-left-radius: 0;
2196 border-top-right-radius: inherit;
2197 border-bottom-right-radius: inherit;
2200 .social-share-frame:-moz-locale-dir(rtl) {
2201 border-top-left-radius: inherit;
2202 border-bottom-left-radius: inherit;
2203 border-top-right-radius: 0;
2204 border-bottom-right-radius: 0;
2207 #social-share-panel > .social-share-toolbar:-moz-locale-dir(ltr) {
2208 border-top-left-radius: inherit;
2209 border-bottom-left-radius: inherit;
2212 #social-share-panel > .social-share-toolbar:-moz-locale-dir(rtl) {
2213 border-top-right-radius: inherit;
2214 border-bottom-right-radius: inherit;
2217 #social-share-provider-buttons:-moz-locale-dir(ltr) {
2218 border-top-left-radius: inherit;
2219 border-bottom-left-radius: inherit;
2222 #social-share-provider-buttons:-moz-locale-dir(rtl) {
2223 border-top-right-radius: inherit;
2224 border-bottom-right-radius: inherit;
2227 /* social recommending panel */
2229 #social-mark-button {
2230 -moz-image-region: rect(0, 16px, 16px, 0);
2233 /* bookmarks menu-button */
2235 #bookmarks-menu-button.bookmark-item {
2236 list-style-image: url("chrome://browser/skin/places/bookmark.png");
2237 -moz-image-region: rect(0px 16px 16px 0px);
2240 #bookmarks-menu-button.bookmark-item[starred] {
2241 -moz-image-region: rect(0px 32px 16px 16px);
2244 #bookmarks-menu-button.bookmark-item > .toolbarbutton-menubutton-button > .toolbarbutton-icon {
2245 -moz-margin-start: 5px;
2248 #bookmarks-menu-button[cui-areatype="toolbar"]:not(.bookmark-item):not([overflowedItem=true]) > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
2250 padding-bottom: 2px;
2253 #BMB_bookmarksPopup[side="top"],
2254 #BMB_bookmarksPopup[side="bottom"] {
2256 margin-right: -20px;
2259 #BMB_bookmarksPopup[side="left"],
2260 #BMB_bookmarksPopup[side="right"] {
2262 margin-bottom: -20px;
2265 /* bookmarking panel */
2267 #editBookmarkPanelStarIcon {
2268 list-style-image: url("chrome://browser/skin/places/starred48.png");
2273 #editBookmarkPanelStarIcon[unstarred] {
2274 list-style-image: url("chrome://browser/skin/places/unstarred48.png");
2277 #editBookmarkPanelTitle {
2281 #editBookmarkPanelHeader,
2282 #editBookmarkPanelContent {
2283 margin-bottom: .5em;
2286 /* Implements editBookmarkPanel resizing on folderTree un-collapse. */
2287 #editBMPanel_folderTree {
2294 border-top: 1px solid #9C9CFF;
2295 border-bottom-left-radius: 5px;
2296 border-bottom-right-radius: 5px;
2300 list-style-image: url("chrome://browser/skin/sync-notification-24.png");
2301 -moz-margin-end: 10px;
2302 vertical-align: middle;
2305 .panel-promo-closebutton {
2306 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2307 -moz-margin-end: -3px;
2311 .panel-promo-closebutton:hover {
2312 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2315 .panel-promo-closebutton:hover:active {
2316 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2319 .panel-promo-closebutton > .toolbarbutton-text {
2324 /* ::::: content area ::::: */
2327 background-color: Window;
2331 -moz-padding-start: 0px;
2334 .browserContainer > findbar {
2336 background-color: -moz-dialog;
2337 color: -moz-DialogText;
2346 -moz-binding: url("chrome://browser/content/customizableui/toolbar.xml#toolbar");
2349 #TabsToolbar .toolbar-holder {
2350 background-color: #000000; /* correct effect of being an actual toolbar */
2353 #main-window[disablechrome] #TabsToolbar,
2354 #TabsToolbar[tabsontop="false"] {
2355 border-bottom: 1px solid #008484;
2358 #main-window:not([customizing]) #TabsToolbar:not(:-moz-lwtheme) {
2361 #main-window[tabsintitlebar] #TabsToolbar {
2362 background-color: transparent;
2365 /* === BEGIN tabs.inc.css === */
2368 .tabs-newtab-button,
2369 #TabsToolbar > #new-tab-button {
2374 padding: 1px 4px 2px;
2377 .tabbrowser-tab:first-of-type {
2378 -moz-margin-start: 2px;
2381 .tabs-newtab-button,
2382 #TabsToolbar > #new-tab-button {
2383 border-radius: 8px 8px 0px 0px;
2384 -moz-margin-start: 0;
2387 .tabs-newtab-button:not(:hover),
2388 #TabsToolbar > #new-tab-button:not(:hover) {
2389 background-color: #C09070;
2392 .tabbrowser-tab[remote] {
2393 text-decoration: underline;
2396 /* The selected tab should appear above adjacent tabs, .tabs-newtab-button and the highlight of #nav-bar */
2397 .tabbrowser-tab[selected=true] {
2398 /* position: relative;
2402 .tab-background-middle {
2420 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2424 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim-connect.png");
2427 .tab-throbber[progress] {
2428 list-style-image: url("chrome://communicator/skin/brand/throbber16-anim.png");
2431 .tab-throbber:not([pinned]),
2432 .tab-icon-image:not([pinned]) {
2433 -moz-margin-end: 3px;
2436 .tab-throbber[pinned],
2437 .tab-icon-image[pinned] {
2438 -moz-margin-start: 2px;
2439 -moz-margin-end: 2px;
2451 .tabs-newtab-button {
2452 /* overlap the tab curves */
2455 .tabbrowser-arrowscrollbox > .arrowscrollbox-scrollbox {
2458 .tab-background-start[selected=true]::after,
2459 .tab-background-start[selected=true]::before,
2460 .tab-background-start,
2461 .tab-background-end,
2462 .tab-background-end[selected=true]::after,
2463 .tab-background-end[selected=true]::before {
2466 .tabbrowser-tab:not([selected=true]),
2467 .tabbrowser-tab:-moz-lwtheme {
2470 /* tabbrowser-tab focus ring */
2471 .tabbrowser-tab:focus {
2472 outline: 1px dotted;
2477 .tabbrowser-tab[selected="true"] {
2480 /* End selected tab */
2482 /* Background tabs */
2484 /* Decrease the height of the hoverable region of background tabs whenever the tabs are at the top
2485 of the window (e.g. no menubar, tabs in titlebar, etc.) to make it easier to drag the window by
2486 the titlebar. We don't need this in fullscreen since window dragging is not an issue there. */
2487 #main-window[tabsintitlebar]:not([sizemode="maximized"]):not([inFullscreen]) #toolbar-menubar:-moz-any([autohide="true"][inactive], :not([autohide])) + #TabsToolbar .tab-background-middle:not([selected=true]) {
2490 /* End background tabs */
2492 /* Tab pointer-events */
2495 pointer-events: none;
2498 .tab-background-middle,
2499 .tabs-newtab-button,
2501 pointer-events: auto;
2506 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]) {
2507 background-color: #E7ADE7;
2510 .tabbrowser-tab[pinned][titlechanged]:not([selected="true"]):hover {
2511 background-color: #3333FF;
2515 /* New tab button */
2517 .tabs-newtab-button {
2521 /* === END tabs.inc.css === */
2523 /* Tab DnD indicator */
2524 .tab-drop-indicator {
2525 list-style-image: url("chrome://browser/skin/tabbrowser/tabDragIndicator.png");
2526 margin-bottom: -11px;
2529 /* Tab close button */
2531 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2534 .tab-close-button:hover,
2535 .tab-close-button:hover[selected="true"] {
2536 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2539 .tab-close-button:hover:active,
2540 .tab-close-button:hover:active[selected="true"] {
2541 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2544 /* Tab scrollbox arrow, tabstrip new tab and all-tabs buttons */
2546 .tabbrowser-arrowscrollbox > .scrollbutton-up,
2547 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2551 background-origin: border-box;
2554 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2555 #main-window[tabsintitlebar]:not([inFullscreen]) .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2556 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-lwtheme-brighttext,
2557 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-lwtheme-brighttext {
2560 .tabbrowser-arrowscrollbox > .scrollbutton-up[disabled],
2561 .tabbrowser-arrowscrollbox > .scrollbutton-down[disabled] {
2564 .tabbrowser-arrowscrollbox > .scrollbutton-up:-moz-locale-dir(rtl),
2565 .tabbrowser-arrowscrollbox > .scrollbutton-down:-moz-locale-dir(ltr) {
2566 /* transform: scaleX(-1);*/
2569 .tabbrowser-arrowscrollbox > .scrollbutton-down {
2570 transition: 1s background-color ease-out;
2573 .tabbrowser-arrowscrollbox > .scrollbutton-down[notifybgtab] {
2574 background-color: #008484;
2577 .tabbrowser-arrowscrollbox > .scrollbutton-up:not([disabled]),
2578 .tabbrowser-arrowscrollbox > .scrollbutton-down:not([disabled]) {
2579 /* border-width: 0 2px 0 0;
2580 border-style: solid;
2581 border-image: url("chrome://browser/skin/tabbrowser/tab-overflow-border.png") 0 2 0 2 fill;*/
2584 .tabs-newtab-button > .toolbarbutton-icon {
2586 margin-bottom: -1px;
2589 .tabs-newtab-button,
2590 #TabsToolbar > #new-tab-button,
2591 #TabsToolbar > toolbarpaletteitem > #new-tab-button,
2592 #TabsToolbar > toolbarpaletteitem > #new-tab-button[cui-areatype="toolbar"] {
2593 list-style-image: url("chrome://browser/skin/tabbrowser/newtab.png");
2594 -moz-image-region: rect(0, 16px, 18px, 0);
2597 .tabs-newtab-button,
2598 .tabs-newtab-button:hover,
2599 #TabsToolbar > #new-tab-button,
2600 #TabsToolbar > #new-tab-button:hover {
2601 -moz-image-region: rect(0, 32px, 18px, 16px);
2604 #main-window[tabsintitlebar]:not([inFullscreen]) .tabs-newtab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2605 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2606 #main-window[tabsintitlebar]:not([inFullscreen]) #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2607 .tabs-newtab-button:-moz-lwtheme-brighttext,
2608 #TabsToolbar > #new-tab-button:-moz-lwtheme-brighttext,
2609 #TabsToolbar > toolbarpaletteitem > #new-tab-button:-moz-lwtheme-brighttext {
2612 #TabsToolbar > #new-tab-button {
2617 list-style-image: url("chrome://global/skin/arrow/arrow-down.gif");
2620 #alltabs-button:hover,
2621 #alltabs-button:hover:active,
2622 #alltabs-button[open="true"] {
2623 list-style-image: url("chrome://global/skin/arrow/arrow-down-hover.gif");
2626 #main-window[tabsintitlebar]:not([inFullscreen]) #alltabs-button:-moz-system-metric(windows-classic):not(:-moz-lwtheme),
2627 #alltabs-button:-moz-lwtheme-brighttext {
2630 #alltabs-button > .toolbarbutton-icon {
2634 #alltabs-button > .toolbarbutton-menu-dropmarker {
2638 /* All tabs menupopup */
2639 .alltabs-item > .menu-iconic-left > .menu-iconic-icon {
2640 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
2641 -moz-image-region: auto;
2644 .alltabs-item[selected="true"] {
2648 .alltabs-item[busy] > .menu-iconic-left > .menu-iconic-icon {
2649 list-style-image: url("chrome://global/skin/icons/loading.gif");
2652 .alltabs-item[tabIsVisible]:not([_moz-menuactive="true"]) {
2653 background-color: #402800;
2656 /* Tabstrip close button */
2661 list-style-image: url("chrome://global/skin/icons/close-button.gif");
2664 .tabs-closebutton > .toolbarbutton-icon {
2667 .tabs-closebutton > .toolbarbutton-text {
2671 .tabs-closebutton:hover,
2672 .tabs-closebutton:hover:active {
2673 list-style-image: url("chrome://global/skin/icons/close-button-hover.gif");
2676 toolbarbutton.chevron {
2677 list-style-image: url("chrome://global/skin/toolbar/chevron.gif") !important;
2680 toolbarbutton.chevron:hover {
2681 list-style-image: url("chrome://global/skin/toolbar/chevron-hover.gif") !important;
2684 toolbarbutton.chevron:-moz-locale-dir(rtl) > .toolbarbutton-icon,
2685 toolbarbutton.chevron:-moz-locale-dir(rtl):hover > .toolbarbutton-icon {
2686 transform: scaleX(-1);
2689 toolbarbutton.chevron > .toolbarbutton-text,
2690 toolbarbutton.chevron > .toolbarbutton-menu-dropmarker {
2694 toolbarbutton.chevron > .toolbarbutton-icon {
2698 #sidebar-throbber[loading="true"] {
2699 list-style-image: url("chrome://global/skin/icons/loading.gif");
2700 -moz-margin-end: 4px;
2703 /* Bookmarks toolbar */
2704 #PlacesToolbarDropIndicator {
2705 list-style-image: url("chrome://communicator/skin/bookmarks/toolbarDropMarker.png");
2708 toolbarbutton.bookmark-item[dragover="true"][open="true"] {
2709 background-color: #008484 !important;
2710 color: #FFCF00 !important;
2713 /* rules for menupopup drop indicators */
2714 .menupopup-drop-indicator-bar {
2716 /* these two margins must together compensate the indicator's height */
2718 margin-bottom: -1px;
2721 .menupopup-drop-indicator {
2722 list-style-image: none;
2724 -moz-margin-end: -4em;
2725 background-color: #008484;
2728 /* ::::: Identity Indicator Styling ::::: */
2731 #identity-popup-icon {
2735 list-style-image: url("chrome://browser/skin/identity.png");
2736 -moz-image-region: rect(0px, 64px, 64px, 0px);
2739 #identity-popup.verifiedDomain > #identity-popup-container > #identity-popup-icon {
2740 -moz-image-region: rect(64px, 64px, 128px, 0px);
2743 #identity-popup.verifiedIdentity > #identity-popup-container > #identity-popup-icon {
2744 -moz-image-region: rect(128px, 64px, 192px, 0px);
2747 /* Popup Body Text */
2748 .identity-popup-description {
2749 white-space: pre-wrap;
2750 -moz-padding-start: 15px;
2754 .identity-popup-label {
2755 white-space: pre-wrap;
2756 -moz-padding-start: 15px;
2760 #identity-popup-content-host,
2761 #identity-popup-content-box.verifiedIdentity > #identity-popup-content-owner {
2765 #identity-popup-content-host {
2772 #identity-popup-content-owner {
2774 margin-bottom: 0 !important;
2779 .verifiedDomain > #identity-popup-content-owner {
2780 font-weight: normal;
2783 #identity-popup-content-verifier {
2787 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption ,
2788 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption {
2790 -moz-margin-start: -24px;
2793 #identity-popup-content-box.verifiedIdentity > #identity-popup-encryption > vbox > #identity-popup-encryption-icon ,
2794 #identity-popup-content-box.verifiedDomain > #identity-popup-encryption > vbox > #identity-popup-encryption-icon {
2795 list-style-image: url("chrome://browser/skin/Secure24.png");
2798 #identity-popup-help-icon {
2800 margin: 7px 0 0 -3px;
2803 list-style-image: url("chrome://global/skin/icons/question-16.png");
2807 #identity-popup-help-icon > .button-box > .button-text {
2811 #identity-popup-help-icon > .button-box > .button-icon {
2816 #identity-popup-more-info-button {
2822 #identity-popup > .panel-arrowcontainer > .panel-arrowcontent {
2826 #identity-popup-container {
2831 #identity-popup-button-container {
2832 /* background: linear-gradient(to bottom, rgba(0,0,0,0.04) 60%, transparent);*/
2837 .popup-notification-icon {
2840 -moz-margin-end: 10px;
2843 .popup-notification-icon[popupid="geolocation"] {
2844 list-style-image: url("chrome://browser/skin/Geolocation-64.png");
2847 .popup-notification-icon[popupid="xpinstall-disabled"],
2848 .popup-notification-icon[popupid="addon-progress"],
2849 .popup-notification-icon[popupid="addon-install-cancelled"],
2850 .popup-notification-icon[popupid="addon-install-blocked"],
2851 .popup-notification-icon[popupid="addon-install-failed"],
2852 .popup-notification-icon[popupid="addon-install-complete"] {
2853 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric.png");
2858 .popup-notification-icon[popupid="click-to-play-plugins"] {
2859 list-style-image: url("chrome://mozapps/skin/plugins/pluginBlocked-64.png");
2862 .popup-notification-icon[popupid="plugins-not-found"] {
2863 list-style-image: url("chrome://browser/skin/pluginInstall-64.png");
2866 .popup-notification-icon[popupid="web-notifications"] {
2867 list-style-image: url("chrome://browser/skin/notification-64.png");
2870 .addon-progress-description {
2875 .popup-progress-label,
2876 .popup-progress-meter {
2877 -moz-margin-start: 0;
2881 .popup-progress-cancel {
2882 -moz-appearance: none;
2883 background: transparent;
2889 list-style-image: url("chrome://mozapps/skin/downloads/downloadButtons.png");
2890 -moz-image-region: rect(0px, 32px, 16px, 16px);
2893 .popup-progress-cancel:hover {
2894 -moz-image-region: rect(16px, 32px, 32px, 16px);
2897 .popup-progress-cancel:active {
2898 -moz-image-region: rect(32px, 32px, 48px, 16px);
2901 .popup-notification-icon[popupid="indexedDB-permissions-prompt"],
2902 .popup-notification-icon[popupid="indexedDB-quota-prompt"],
2903 .popup-notification-icon[popupid*="offline-app-requested"],
2904 .popup-notification-icon[popupid="offline-app-usage"] {
2905 list-style-image: url("chrome://global/skin/icons/alert-question.gif");
2908 .popup-notification-icon[popupid="password-save"],
2909 .popup-notification-icon[popupid="password-change"] {
2910 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-64.png");
2913 .popup-notification-icon[popupid="webapps-install-progress"],
2914 .popup-notification-icon[popupid="webapps-install"] {
2915 list-style-image: url("chrome://global/skin/icons/webapps-64.png");
2918 .popup-notification-icon[popupid="mixed-content-blocked"] {
2919 list-style-image: url("chrome://browser/skin/mixed-content-blocked-64.png");
2922 .popup-notification-icon[popupid="webRTC-sharingDevices"],
2923 .popup-notification-icon[popupid="webRTC-shareDevices"] {
2924 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-64.png");
2927 .popup-notification-icon[popupid="webRTC-sharingMicrophone"],
2928 .popup-notification-icon[popupid="webRTC-shareMicrophone"] {
2929 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-64.png");
2932 .popup-notification-icon[popupid="pointerLock"] {
2933 list-style-image: url("chrome://browser/skin/pointerLock-64.png");
2936 /* Notification icon box */
2937 #notification-popup .panel-promo-box {
2938 /* margin: 10px -10px -10px; */
2941 #notification-popup-box {
2943 background-color: #000000;
2944 background-clip: padding-box;
2947 border-radius: 3px 0 0 3px;
2948 border-image: url("chrome://browser/skin/urlbar-arrow.png") 0 8 0 0 / 0 8px 0 0;
2949 -moz-margin-end: -8px;
2950 border-right-width: 8px;
2953 window:not([chromehidden~="toolbar"]) #urlbar-container[forwarddisabled] > #urlbar-wrapper > #urlbar > #notification-popup-box,
2954 window:not([chromehidden~="toolbar"]) #urlbar-wrapper[forwarddisabled] > #urlbar > #notification-popup-box {
2955 /* padding-left: 5px; */
2958 #notification-popup-box:-moz-locale-dir(rtl),
2959 .notification-anchor-icon:-moz-locale-dir(rtl) {
2960 transform: scaleX(-1);
2963 .notification-anchor-icon {
2969 .notification-anchor-icon:-moz-focusring {
2970 outline: 1px dotted #008484;
2971 /* outline-offset: -3px; */
2974 .default-notification-icon,
2975 #default-notification-icon {
2976 list-style-image: url("chrome://global/skin/icons/information-16.png");
2979 .identity-notification-icon,
2980 #identity-notification-icon {
2981 list-style-image: url("chrome://mozapps/skin/profile/profileicon.png");
2984 .geo-notification-icon,
2985 #geo-notification-icon {
2986 list-style-image: url("chrome://browser/skin/Geolocation-16.png");
2989 #addons-notification-icon {
2990 list-style-image: url("chrome://mozapps/skin/extensions/extensionGeneric-16.png");
2993 .indexedDB-notification-icon,
2994 #indexedDB-notification-icon {
2995 list-style-image: url("chrome://global/skin/icons/question-16.png");
2998 #password-notification-icon {
2999 list-style-image: url("chrome://mozapps/skin/passwordmgr/key-16.png");
3002 #webapps-notification-icon {
3003 list-style-image: url("chrome://gobal/skin/icons/webapps-16.png");
3006 #plugins-notification-icon {
3007 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
3010 #plugins-notification-icon.plugin-hidden {
3011 list-style-image: url("chrome://browser/skin/notification-pluginAlert.png");
3014 #plugins-notification-icon.plugin-blocked {
3015 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
3018 #plugins-notification-icon {
3019 /* -moz-image-region: rect(0, 16px, 16px, 0);*/
3022 #plugins-notification-icon:hover {
3023 /* -moz-image-region: rect(0, 32px, 16px, 16px);*/
3026 #plugin-install-notification-icon {
3027 list-style-image: url("chrome://browser/skin/pluginInstall-16.png");
3030 #notification-popup-box[hidden] {
3031 /* Override display:none to make the pluginBlockedNotification animation work
3032 when showing the notification repeatedly. */
3034 visibility: collapse;
3037 #plugins-notification-icon.plugin-blocked[showing] {
3038 animation: pluginBlockedNotification 500ms ease 0s 5 alternate both;
3041 @keyframes pluginBlockedNotification {
3050 .mixed-content-blocked-notification-icon,
3051 #mixed-content-blocked-notification-icon {
3052 list-style-image: url("chrome://browser/skin/mixed-content-blocked-16.png");
3055 .webRTC-shareDevices-notification-icon,
3056 #webRTC-shareDevices-notification-icon {
3057 list-style-image: url("chrome://browser/skin/webRTC-shareDevice-16.png");
3060 .webRTC-sharingDevices-notification-icon,
3061 #webRTC-sharingDevices-notification-icon {
3062 list-style-image: url("chrome://browser/skin/webRTC-sharingDevice-16.png");
3065 .webRTC-shareMicrophone-notification-icon,
3066 #webRTC-shareMicrophone-notification-icon {
3067 list-style-image: url("chrome://browser/skin/webRTC-shareMicrophone-16.png");
3070 .webRTC-sharingMicrophone-notification-icon,
3071 #webRTC-sharingMicrophone-notification-icon {
3072 list-style-image: url("chrome://browser/skin/webRTC-sharingMicrophone-16.png");
3075 .web-notifications-notification-icon,
3076 #web-notifications-notification-icon {
3077 list-style-image: url("chrome://browser/skin/notification-16.png");
3080 #pointerLock-notification-icon {
3081 list-style-image: url("chrome://browser/skin/pointerLock-16.png");
3083 #pointerLock-cancel {
3087 /* Bookmarks roots menu-items */
3088 #subscribeToPageMenuitem:not([disabled]),
3089 #subscribeToPageMenupopup,
3090 #BMB_subscribeToPageMenuitem:not([disabled]),
3091 #BMB_subscribeToPageMenupopup {
3092 list-style-image: url("chrome://browser/skin/feeds/feedIcon16.png");
3095 #bookmarksToolbarFolderMenu,
3096 #BMB_bookmarksToolbar,
3097 #panelMenu_bookmarksToolbar {
3098 list-style-image: url("chrome://communicator/skin/bookmarks/bookmarksToolbar.png");
3099 -moz-image-region: auto;
3102 #BMB_unsortedBookmarks,
3103 #panelMenu_unsortedBookmarks {
3104 list-style-image: url("chrome://communicator/skin/bookmarks/unsortedBookmarks.png");
3105 -moz-image-region: auto;
3108 /* ::::: Keyboard UI Panel ::::: */
3113 border-radius: 20px;
3116 .KUI-panel[level="top"] {
3117 /*background-color: rgba(27%,27%,27%,.65);*/
3123 padding: 20px 10px 10px;
3127 .ctrlTab-favicon[src] {
3128 background-color: #000000;
3134 .ctrlTab-preview-inner > .tabPreview-canvas {
3137 .ctrlTab-preview:not(#ctrlTab-showAll) > * > .ctrlTab-preview-inner > .tabPreview-canvas {
3141 .ctrlTab-preview-inner {
3142 padding-bottom: 10px;
3145 #ctrlTab-showAll:not(:focus) > * > .ctrlTab-preview-inner {
3147 background-color: #000000;
3148 border-radius: .5em;
3151 .ctrlTab-preview:focus > * > .ctrlTab-preview-inner {
3153 background-color: #000000;
3156 border: 2px solid #9C9CFF;
3157 border-radius: .5em;
3160 .ctrlTab-preview:not(#ctrlTab-showAll):focus > * > .ctrlTab-preview-inner {
3161 margin: -10px -10px 0;
3173 background: url("chrome://browser/content/abouthome/sync.png") top left no-repeat;
3181 .sync-panel-button-box {
3185 #sync-error-panel-title,
3186 #sync-start-panel-title {
3192 #sync-start-panel-subtitle,
3193 #sync-error-panel-subtitle {
3199 .statuspanel-label {
3202 background: #404000;
3203 border: 1px none #9C9CFF;
3204 border-top-style: solid;
3209 .statuspanel-label:-moz-locale-dir(ltr):not([mirror]),
3210 .statuspanel-label:-moz-locale-dir(rtl)[mirror] {
3211 border-right-style: solid;
3212 border-top-right-radius: .3em;
3216 .statuspanel-label:-moz-locale-dir(rtl):not([mirror]),
3217 .statuspanel-label:-moz-locale-dir(ltr)[mirror] {
3218 border-left-style: solid;
3219 border-top-left-radius: .3em;
3223 /* HACK to abolish devily color on main content */
3226 background-color: transparent !important;
3229 /* === BEGIN highlighter.inc.css === */
3231 /* Box model highlighter */
3232 svg|g.box-model-container {
3236 svg|polygon.box-model-content {
3240 svg|polygon.box-model-padding {
3244 svg|polygon.box-model-border {
3248 svg|polygon.box-model-margin {
3252 svg|polygon.box-model-content,
3253 svg|polygon.box-model-padding,
3254 svg|polygon.box-model-border,
3255 svg|polygon.box-model-margin {
3259 svg|line.box-model-guide-top,
3260 svg|line.box-model-guide-right,
3261 svg|line.box-model-guide-bottom,
3262 svg|line.box-model-guide-left {
3264 stroke-dasharray: 5 3;
3267 /* Highlighter - Node Infobar */
3269 .highlighter-nodeinfobar {
3272 background-color: #000000;
3273 background-clip: padding-box;
3274 border: 1px solid #008484;
3276 /* Avoid cases where the infobar is smaller than the arrow, when the text is
3281 /* Highlighter - Node Infobar - text */
3283 .highlighter-nodeinfobar-text {
3285 /* 100% - size of the buttons and margins */
3286 max-width: calc(100% - 2 * (26px + 6px));
3287 padding-bottom: 1px;
3290 html|*.highlighter-nodeinfobar-tagname {
3294 html|*.highlighter-nodeinfobar-id {
3298 html|*.highlighter-nodeinfobar-pseudo-classes {
3302 /* Highlighter - Node Infobar - box & arrow */
3304 .highlighter-nodeinfobar-arrow {
3307 -moz-margin-start: calc(50% - 7px);
3308 transform: rotate(-45deg);
3309 background-clip: padding-box;
3310 background-repeat: no-repeat;
3313 .highlighter-nodeinfobar-arrow-top {
3314 margin-bottom: -8px;
3316 background-image: linear-gradient(to bottom left, transparent 50%, rgb(0, 132, 132) 50%);
3319 .highlighter-nodeinfobar-arrow-bottom {
3322 background-image: linear-gradient(to top right, transparent 50%, rgb(0, 132, 132) 50%);
3325 .highlighter-nodeinfobar-container[hide-arrow] > .highlighter-nodeinfobar {
3329 /* === END highlighter.inc.css === */
3331 #full-screen-warning-message {
3332 background-color: #000000;
3337 box-shadow: 0 0 2px #9C9CFF;
3340 #full-screen-warning-container[obscure-browser] {
3341 background-color: rgba(0,0,0,0.3);
3344 .full-screen-description {
3348 #full-screen-domain-text {
3352 .full-screen-approval-button,
3353 #full-screen-remember-decision {
3357 /* === BEGIN commandline.inc.css === */
3359 /* Developer toolbar */
3361 #developer-toolbar {
3362 border-top: 3px solid #000000;
3363 border-bottom: none;
3366 #developer-toolbar .toolbar-holder {
3367 background-color: #8050B0;
3371 #developer-toolbar .toolbar-holder {
3372 background-color: #8050B0;
3376 #developer-toolbar .toolbar-startcap,
3377 #developer-toolbar .toolbar-endcap{
3378 background-color: #6000CF;
3381 #developer-toolbar {
3383 min-height: 32px; */
3386 #developer-toolbar > toolbarbutton {
3392 .developer-toolbar-button > image {
3393 /* margin: auto 10px; */
3396 #developer-toolbar-toolbox-button > label {
3400 #developer-toolbar-toolbox-button {
3401 list-style-image: url("chrome://browser/skin/devtools/toggle-tools.png");
3402 -moz-image-region: rect(0px, 16px, 16px, 0px);
3405 #developer-toolbar-toolbox-button > label {
3409 #developer-toolbar-toolbox-button:hover,
3410 #developer-toolbar-toolbox-button:hover:active,
3411 #developer-toolbar-toolbox-button[checked=true] {
3412 -moz-image-region: rect(0px, 32px, 16px, 16px);
3415 #developer-toolbar-closebutton {
3416 list-style-image: url("chrome://browser/skin/devtools/close.png");
3417 -moz-image-region: rect(0px, 16px, 16px, 0px);
3422 #developer-toolbar-closebutton > .toolbarbutton-icon {
3425 #developer-toolbar-closebutton > .toolbarbutton-text {
3429 #developer-toolbar-closebutton:hover,
3430 #developer-toolbar-closebutton:hover:active {
3431 -moz-image-region: rect(0px, 32px, 16px, 16px);
3436 html|*#gcli-tooltip-frame,
3437 html|*#gcli-output-frame {
3440 background-color: transparent;
3446 background-color: transparent;
3449 .gclitoolbar-input-node,
3450 .gclitoolbar-complete-node {
3452 -moz-box-align: center;
3456 background-color: transparent;
3459 .gclitoolbar-input-node {
3461 /* line-height: 32px;
3462 outline-style: none; */
3463 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 16, 16, 0);
3464 background-repeat: no-repeat;
3465 background-color: rgba(0, 0, 0, .75);
3468 .gclitoolbar-input-node[focused="true"] {
3469 background-image: -moz-image-rect(url("chrome://browser/skin/devtools/commandline-icon.png"), 0, 32, 16, 16);
3470 background-color: #000000;
3473 .gclitoolbar-input-node:not([focused="true"]) {
3474 border-color: transparent;
3477 .gclitoolbar-input-node > .textbox-input-box > html|*.textbox-input::-moz-selection {
3478 background-color: #008484;
3483 .gclitoolbar-complete-node {
3485 background-color: transparent;
3488 pointer-events: none;
3491 .gcli-in-incomplete,
3495 .gcli-in-closebrace,
3502 .gcli-in-incomplete {
3503 border-bottom: 2px dotted #8050B0;
3507 border-bottom: 2px dotted #FF0000;
3518 .gcli-in-closebrace {
3522 /* === END commandline.inc.css === */
3524 /* === BEGIN responsivedesign.inc.css === */
3526 /* Responsive Mode */
3528 .browserContainer[responsivemode] {
3529 background: #221500 url("chrome://browser/skin/devtools/responsive-background.png");
3530 padding: 0 20px 20px 20px;
3533 .browserStack[responsivemode] {
3534 box-shadow: 0 0 7px #9C9CFF;
3537 .devtools-responsiveui-toolbar {
3538 background: transparent;
3539 /* text color is textColor from dark theme, since no theme is applied to
3540 * the responsive toolbar.
3546 border-bottom-width: 0;
3549 .devtools-responsiveui-menulist,
3550 .devtools-responsiveui-toolbarbutton {
3551 -moz-box-align: center;
3553 /* min-height: 22px;*/
3554 /* margin: 0 3px; */
3557 .devtools-responsiveui-toolbarbutton > .toolbarbutton-menubutton-button {
3558 -moz-box-orient: horizontal;
3561 .devtools-responsiveui-menulist:-moz-focusring,
3562 .devtools-responsiveui-toolbarbutton:-moz-focusring {
3563 /* outline: 1px dotted hsla(210,30%,85%,0.7);
3564 outline-offset: -4px;*/
3567 .devtools-responsiveui-toolbarbutton:not([label]) > .toolbarbutton-text {
3571 .devtools-responsiveui-toolbarbutton:not([checked=true]):hover:active {
3572 /* border-color: hsla(210,8%,5%,.6);
3573 background: linear-gradient(hsla(220,6%,10%,.3), hsla(212,7%,57%,.15) 65%, hsla(212,7%,57%,.3));
3574 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); */
3577 .devtools-responsiveui-menulist[open=true],
3578 .devtools-responsiveui-toolbarbutton[open=true],
3579 .devtools-responsiveui-toolbarbutton[checked=true] {
3580 /* border-color: hsla(210,8%,5%,.6) !important;
3581 background: linear-gradient(hsla(220,6%,10%,.6), hsla(210,11%,18%,.45) 75%, hsla(210,11%,30%,.4));
3582 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); */
3585 .devtools-responsiveui-toolbarbutton[checked=true] {
3586 /* color: hsl(208,100%,60%); */
3589 .devtools-responsiveui-toolbarbutton[checked=true]:hover {
3590 /* background-color: transparent !important;*/
3593 .devtools-responsiveui-toolbarbutton[checked=true]:hover:active {
3594 /* background-color: hsla(210,8%,5%,.2) !important;*/
3597 .devtools-responsiveui-menulist > .menulist-label-box {
3601 .devtools-responsiveui-menulist > .menulist-dropmarker {
3602 /* display: -moz-box;
3603 background-color: transparent;
3604 list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3605 -moz-box-align: center;
3610 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-button {
3613 -moz-border-end: 1px solid hsla(210,8%,5%,.45);
3614 box-shadow: -1px 0 0 hsla(210,16%,76%,.15) inset, 1px 0 0 hsla(210,16%,76%,.15);*/
3617 .devtools-responsiveui-toolbarbutton[type=menu-button]:-moz-locale-dir(rtl) > .toolbarbutton-menubutton-button {
3618 /* box-shadow: 1px 0 0 hsla(210,16%,76%,.15) inset, -1px 0 0 hsla(210,16%,76%,.15);*/
3621 .devtools-responsiveui-toolbarbutton[type=menu-button] {
3622 /* padding: 0 1px;*/
3623 -moz-box-align: stretch;
3626 .devtools-responsiveui-toolbarbutton[type=menu] > .toolbarbutton-menu-dropmarker,
3627 .devtools-responsiveui-toolbarbutton[type=menu-button] > .toolbarbutton-menubutton-dropmarker {
3628 /* list-style-image: url("chrome://browser/skin/devtools/dropmarker.png");
3629 -moz-box-align: center;
3633 .devtools-responsiveui-toolbar:-moz-locale-dir(ltr) > *:first-child,
3634 .devtools-responsiveui-toolbar:-moz-locale-dir(rtl) > *:last-child {
3638 .devtools-responsiveui-close {
3639 list-style-image: url("chrome://browser/skin/devtools/close.png");
3640 -moz-image-region: rect(0px,16px,16px,0px);
3643 .devtools-responsiveui-close:hover {
3644 -moz-image-region: rect(0px,32px,16px,16px);
3647 .devtools-responsiveui-rotate {
3648 list-style-image: url("chrome://browser/skin/devtools/responsiveui-rotate.png");
3649 -moz-image-region: rect(0px,16px,16px,0px);
3652 .devtools-responsiveui-rotate:hover {
3653 -moz-image-region: rect(0px,32px,16px,16px);
3656 .devtools-responsiveui-touch {
3657 list-style-image: url("chrome://browser/skin/devtools/responsiveui-touch.png");
3658 -moz-image-region: rect(0px,16px,16px,0px);
3661 .devtools-responsiveui-touch:hover,
3662 .devtools-responsiveui-touch[checked],
3663 .devtools-responsiveui-touch[checked]:hover {
3664 -moz-image-region: rect(0px,32px,16px,16px);
3667 .devtools-responsiveui-screenshot {
3668 list-style-image: url("chrome://browser/skin/devtools/responsiveui-screenshot.png");
3669 -moz-image-region: rect(0px,16px,16px,0px);
3672 .devtools-responsiveui-screenshot:hover {
3673 -moz-image-region: rect(0px,32px,16px,16px);
3676 .devtools-responsiveui-resizebarV {
3680 transform: translate(12px, -12px);
3681 background-image: url("chrome://browser/skin/devtools/responsive-vertical-resizer.png");
3684 .devtools-responsiveui-resizebarH {
3688 transform: translate(-12px, 12px);
3689 background-image: url("chrome://browser/skin/devtools/responsive-horizontal-resizer.png");
3692 .devtools-responsiveui-resizehandle {
3696 transform: translate(12px, 12px);
3697 background-image: url("chrome://browser/skin/devtools/responsive-se-resizer.png");
3700 /* === END responsivedesign.inc.css === */
3702 /* === including indicator.css is done at the start of the file === */
3706 #developer-toolbar-toolbox-button[error-count]:before {
3710 background-color: #FF0000;
3712 -moz-margin-end: 5px;
3715 /* Social toolbar item */
3717 #social-provider-button {
3718 -moz-image-region: rect(0, 16px, 16px, 0);
3719 list-style-image: url("chrome://browser/skin/social/services-16.png");
3722 #social-provider-button > .toolbarbutton-menu-dropmarker {
3726 .toolbarbutton-badge-container {
3732 #nav-bar .toolbarbutton-1 > .toolbarbutton-badge-container {
3736 .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbar-icon {
3742 .toolbarbutton-badge-container > .toolbarbutton-icon[label]:not([label=""]) {
3746 .toolbarbutton-badge[badge=""] {
3749 .toolbarbutton-badge[badge]:not([badge=""])::after {
3750 /* The |content| property is set in the content stylesheet. */
3755 background-color: #000000;
3756 border: 1px solid #9C9CFF;
3763 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""])::after {
3768 .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3773 #nav-bar *|* > .toolbarbutton-badge[badge]:not([badge=""]):-moz-locale-dir(rtl)::after {
3778 #social-notification-icon-mentions {
3779 background-color: #000000;
3781 -moz-margin-start: 2px;
3784 #social-notification-icon-mentions:hover {
3785 background-color: #FFCF00;
3788 #social-notification-icon-mentions[open="true"] {
3789 background-color: #FF9F00;
3792 #social-sidebar-splitter {
3796 .popup-notification-icon[popupid="servicesInstall"] {
3797 list-style-image: url("chrome://browser/skin/social/services-64.png");
3799 #servicesInstall-notification-icon {
3800 list-style-image: url("chrome://browser/skin/social/services-16.png");
3802 #social-undoactivation-button {
3803 -moz-margin-start: 0; /* override default label margin to match description margin */
3806 #socialActivatedNotification .popup-notification-button-container {
3810 .social-activation-icon {
3817 #social-activation-message {
3821 #social-activation-message > label {
3825 /* social toolbar provider menu */
3826 .social-statusarea-popup {
3829 margin-right: -12px;
3832 .social-statusarea-user {
3833 border-bottom: 1px solid #9C9CFF;
3834 background-color: #000000;
3840 .social-statusarea-user-portrait {
3847 .social-statusarea-loggedInStatus {
3848 background: transparent;
3853 list-style-image: none;
3856 #social-statusarea-user[_moz-menuactive] > vbox > .social-statusarea-loggedInStatus {
3857 text-decoration: underline;
3860 .social-panel > .panel-arrowcontainer > .panel-arrowcontent {
3864 .social-panel-frame {
3865 border-radius: inherit;
3868 /* === BEGIN chat.inc.css === */
3870 #social-sidebar-header {
3874 #social-sidebar-button {
3875 -moz-appearance: none;
3876 list-style-image: url("chrome://browser/skin/social/gear_default.png");
3881 #social-sidebar-button > .toolbarbutton-icon {
3885 #social-sidebar-button:hover,
3886 #social-sidebar-button:hover:active {
3887 list-style-image: url("chrome://browser/skin/social/gear_clicked.png");
3889 #social-sidebar-button > .toolbarbutton-menu-dropmarker {
3893 #social-sidebar-button[loading="true"] {
3894 list-style-image: url("chrome://global/skin/icons/loading.gif");
3897 #social-sidebar-favico {
3910 .chat-toolbarbutton {
3911 -moz-appearance: none;
3919 .chat-toolbarbutton > .toolbarbutton-text {
3923 .chat-toolbarbutton > .toolbarbutton-icon {
3927 .chat-toolbarbutton.notification-anchor-icon > .toolbarbutton-icon {
3932 .chat-close-button {
3933 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3934 -moz-image-region: rect(0, 16px, 16px, 0);
3937 .chat-close-button:hover,
3938 .chat-close-button:hover:active {
3939 -moz-image-region: rect(0, 32px, 16px, 16px);
3942 .chat-minimize-button {
3943 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3944 -moz-image-region: rect(16px, 16px, 32px, 0);
3947 .chat-minimize-button:hover:active,
3948 .chat-minimize-button:hover {
3949 -moz-image-region: rect(16px, 32px, 32px, 16px);
3953 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3954 -moz-image-region: rect(48px, 16px, 64px, 0);
3957 .chat-swap-button:hover:active,
3958 .chat-swap-button:hover {
3959 -moz-image-region: rect(48px, 32px, 64px, 16px);
3962 chatbar > chatbox > .chat-titlebar > .chat-swap-button {
3963 list-style-image: url('chrome://browser/skin/social/chat-icons.png');
3964 -moz-image-region: rect(32px, 16px, 48px, 0);
3967 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover:active,
3968 chatbar > chatbox > .chat-titlebar > .chat-swap-button:hover {
3969 -moz-image-region: rect(32px, 32px, 48px, 16px);
3974 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
3980 background-color: #9C9CFF;
3987 -moz-padding-start: 6px;
3989 border-bottom: 1px solid #008484;
3993 .chat-titlebar > .notification-anchor-icon {
3998 .chat-titlebar[minimized="true"] {
3999 border-bottom: none;
4002 .chat-titlebar[selected] {
4003 background-color: #008484;
4006 .chat-titlebar[activity] {
4007 background-color: #E7ADE7;
4017 list-style-image: url("chrome://browser/skin/social/services-16.png");
4018 background-color: #000000;
4024 border-top: 1px solid #008484;
4025 -moz-border-end: 1px solid #008484;
4028 @media (min-resolution: 2dppx) {
4030 list-style-image: url("chrome://browser/skin/social/services-16@2x.png");
4034 .chatbar-button > .toolbarbutton-icon {
4038 .chatbar-button > menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4045 .chatbar-button > .toolbarbutton-icon {
4049 .chatbar-button:hover > .toolbarbutton-icon,
4050 .chatbar-button[open="true"] > .toolbarbutton-icon {
4054 .chatbar-button:hover,
4055 .chatbar-button[open="true"] {
4058 .chatbar-button > .toolbarbutton-text,
4059 .chatbar-button > .toolbarbutton-menu-dropmarker {
4063 .chatbar-button[activity]:not([open="true"]) {
4064 background-color: #E7ADE7;
4067 .chatbar-button > menupopup > menuitem[activity] {
4072 background: transparent;
4078 -moz-margin-end: 20px;
4084 -moz-margin-start: 4px;
4085 background-color: #000000;
4086 border: 1px solid #9C9CFF;
4087 border-bottom: none;
4088 border-top-left-radius: 2.5px;
4089 border-top-right-radius: 2.5px;
4092 chatbox[minimized="true"] {
4098 -moz-margin-start: 0px;
4104 /* === END chat.inc.css === */
4107 /* background-color: #c4cfde; */
4110 .chat-titlebar[selected] {
4111 /* background-color: #dae3f0; */
4115 -moz-appearance: none;
4116 /* background-color: #c4cfde; */
4119 .chatbar-button > .toolbarbutton-icon {
4120 /* -moz-margin-end: 0; */
4123 .chatbar-button:hover,
4124 .chatbar-button[open="true"] {
4125 /* background-color: #dae3f0; */
4128 .chatbar-button[activity]:not([open="true"]) {
4132 /* border-top-left-radius: 2.5px;
4133 border-top-right-radius: 2.5px; */
4136 /* === BEGIN plugin-doorhanger.inc.css === */
4139 * Plugin Doorhanger Styles
4142 #notification-popup[popupid="click-to-play-plugins"] > .panel-arrowcontainer > .panel-arrowcontent {
4143 padding: 6px 1px 2px;
4146 .click-to-play-plugins-notification-center-box {
4149 .plugin-popupnotification-centeritem:nth-child(odd) {
4150 /* background-color: rgba(0,0,0,0.1);*/
4153 .center-item-label {
4155 text-overflow: ellipsis;
4158 .center-item-warning-icon {
4159 background-image: url("chrome://mozapps/skin/extensions/alerticon-info-negative.png");
4160 background-repeat: no-repeat;
4163 -moz-margin-start: 6px;
4166 .click-to-play-plugins-notification-button-container {
4169 .click-to-play-popup-button {
4173 .click-to-play-plugins-notification-description-box {
4177 padding-bottom: 3px;
4180 .click-to-play-plugins-outer-description {
4184 .click-to-play-plugins-notification-link,
4189 .messageImage[value="plugin-hidden"] {
4190 list-style-image: url("chrome://browser/skin/notification-pluginNormal.png");
4193 /* Keep any changes to this style in sync with pluginProblem.css */
4194 notification.pluginVulnerable {
4197 notification.pluginVulnerable .messageImage {
4198 list-style-image: url("chrome://browser/skin/notification-pluginBlocked.png");
4201 /* === END plugin-doorhanger.inc.css === */
4203 /* === BEGIN customizeMode.inc.css === */
4205 /* Customization mode */
4207 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox {
4211 #main-window:-moz-any([customize-entering],[customize-entered]) #content-deck,
4212 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4213 #main-window:-moz-any([customize-entering],[customize-entered]) #navigator-toolbox {
4218 #main-window:-moz-any([customize-entering],[customize-exiting]) #tab-view-deck {
4219 pointer-events: none;
4222 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4223 #PanelUI-contents > .panel-customization-placeholder {
4224 -moz-outline-radius: 2.5px;
4225 outline: 1px dashed transparent;
4228 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before {
4229 /* Prevent jumping of tabs when switching a window between inactive and active (bug 853415). */
4230 -moz-box-ordinal-group: 0;
4235 outline-offset: -2px;
4236 pointer-events: none;
4242 /* Shift the TabsToolbar outline up 2px since the #nav-bar is shifted up by 1px and the
4243 #TabsToolbar::after is a pixel higher to draw the bottom border of the tabstrip so this makes the
4244 offset from the bottom effectively the same as other targets (-2px). */
4245 #main-window[customize-entered] #TabsToolbar.customization-target::before {
4249 /* The parents of the outline pseudo-elements need to be positioned so that the outline is positioned relative to it. */
4250 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover,
4251 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)),
4252 #main-window[customize-entered] #nav-bar-customization-target.customization-target {
4256 /* Most target outlines are shown on hover and drag over but the panel menu uses
4257 placeholders instead. */
4258 #main-window[customize-entered] .customization-target:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar)):hover::before,
4259 #main-window[customize-entered] .customization-target[customizing-dragovertarget]:not(:-moz-any(#PanelUI-contents, #TabsToolbar, #toolbar-menubar))::before,
4260 /* nav-bar and panel outlines are always shown */
4261 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4262 outline-color: #A09090;
4265 #nav-bar[showoutline=true] > #nav-bar-customization-target.customization-target::before {
4266 transition: outline-color 250ms linear;
4269 #PanelUI-contents[showoutline=true] > .panel-customization-placeholder {
4270 transition: outline-color 250ms linear;
4271 outline-color: #9C9CFF;
4274 #PanelUI-contents > .panel-customization-placeholder {
4276 outline-offset: -5px;
4279 #main-window[customizing] .customization-target:not(#PanelUI-contents) {
4281 /* padding-left: 10px;
4282 padding-right: 10px;*/
4285 #main-window:-moz-any([customize-entering],[customize-entered]) #tab-view-deck {
4289 #customization-container {
4290 background-color: #000000;
4293 #customization-palette,
4294 #customization-empty {
4295 padding: 0 15px 15px;
4298 #customization-header {
4302 font-weight: lighter;
4304 padding: 15px 15px 0;
4307 #customization-panel-container {
4308 padding: 10px 10px 0px;
4311 #main-window:-moz-any([customize-entering],[customize-entered]) #browser-bottombox,
4312 #customization-footer {
4313 /*background-color: rgb(236,236,236);*/
4316 #customization-footer {
4317 border-top: 1px solid #9C9CFF;
4321 .customizationmode-button {
4325 .customizationmode-button:hover {
4328 .customizationmode-button[disabled="true"] {
4331 #customization-titlebar-visibility-button {
4332 list-style-image: url("chrome://browser/skin/customizableui/customize-titleBar-toggle.png");
4333 -moz-image-region: rect(0, 16px, 16px, 0);
4335 -moz-margin-end: 10px;
4338 #customization-titlebar-visibility-button:hover {
4339 -moz-image-region: rect(16px, 16px, 32px, 0);
4342 #customization-titlebar-visibility-button > .button-box {
4344 padding-bottom: 1px;
4347 #customization-titlebar-visibility-button:hover:active > .button-box {
4352 #customization-titlebar-visibility-button > .button-box > .button-text {
4353 /* Sadly, button.css thinks its margins are perfect for everyone. */
4354 -moz-margin-start: 5px !important;
4357 #customization-titlebar-visibility-button[checked] {
4358 -moz-image-region: rect(0, 32px, 16px, 16px);
4359 background-color: #008484;
4362 #customization-titlebar-visibility-button[checked]:hover {
4363 -moz-image-region: rect(16px, 32px, 32px, 16px);
4364 background-color: #FFCF00;
4367 #customization-titlebar-visibility-button[checked]:hover:active {
4368 background-color: #FF9F00;
4371 #customization-undo-reset-button {
4372 -moz-margin-end: 10px;
4375 #main-window[customize-entered] #customization-panel-container {
4376 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4377 background-position: left top;
4378 background-repeat: repeat;
4379 background-size: auto;
4380 background-attachment: fixed;
4383 toolbarpaletteitem[place="toolbar"] {
4384 transition: border-width 250ms ease-in-out;
4387 toolbarpaletteitem[mousedown] {
4388 outline: 1px solid #008484;
4389 cursor: -moz-grabbing;
4393 .panel-customization-placeholder,
4394 toolbarpaletteitem[place="palette"],
4395 toolbarpaletteitem[place="panel"] {
4396 transition: transform .3s ease-in-out;
4399 #customization-palette {
4400 transition: opacity .3s ease-in-out;
4404 #customization-palette[showing="true"] {
4408 toolbarpaletteitem[notransition].panel-customization-placeholder,
4409 toolbarpaletteitem[notransition][place="toolbar"],
4410 toolbarpaletteitem[notransition][place="palette"],
4411 toolbarpaletteitem[notransition][place="panel"] {
4415 toolbarpaletteitem > toolbarbutton > .toolbarbutton-icon,
4416 toolbarpaletteitem > toolbaritem.panel-wide-item,
4417 toolbarpaletteitem > toolbarbutton[type="menu-button"] {
4418 transition: transform .3s cubic-bezier(.6, 2, .75, 1.5) !important;
4421 toolbarpaletteitem[mousedown] > toolbarbutton > .toolbarbutton-icon {
4422 transform: scale(1.3);
4425 toolbarpaletteitem[mousedown] > toolbaritem.panel-wide-item,
4426 toolbarpaletteitem[mousedown] > toolbarbutton[type="menu-button"] {
4427 transform: scale(1.1);
4430 /* Override the toolkit styling for items being dragged over. */
4431 toolbarpaletteitem[place="toolbar"] {
4432 border-left-width: 0;
4433 border-right-width: 0;
4438 #customization-palette:not([hidden]) {
4439 margin-bottom: 25px;
4442 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4443 #wrapper-edit-controls[place="palette"] > #edit-controls > separator,
4444 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton,
4445 #wrapper-zoom-controls[place="palette"] > #zoom-controls > separator {
4449 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton,
4450 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton {
4460 #wrapper-edit-controls[place="palette"] > #edit-controls > toolbarbutton > .toolbarbutton-icon,
4461 #wrapper-zoom-controls[place="palette"] > #zoom-controls > toolbarbutton > .toolbarbutton-icon {
4465 #wrapper-edit-controls > #edit-controls > toolbarbutton > .toolbarbutton-icon {
4466 opacity: 1; /* To ensure these buttons always look enabled in customize mode */
4469 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button,
4470 #wrapper-zoom-controls[place="palette"] > #zoom-controls > #zoom-reset-button + separator {
4474 #wrapper-personal-bookmarks:not([place="toolbar"]) > #personal-bookmarks {
4475 -moz-box-pack: center;
4479 #customization-palette > toolbarpaletteitem > label {
4485 /* === END customizeMode.inc.css === */
4487 /* === BEGIN customizeTip.inc.css === */
4489 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent {
4496 /* background-image: linear-gradient(90deg, #a0dfff 0%, #ceeeff 100%);*/
4497 border: 1px solid #9C9CFF;
4500 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowcontent:-moz-locale-dir(rtl) {
4501 /* background-image: linear-gradient(90deg, #ceeeff 0%, #a0dfff 100%);*/
4504 .customization-tipPanel-infoBox {
4505 margin: 20px 25px 25px;
4507 background-image: url("chrome://browser/skin/customizableui/info-icon-customizeTip.png");
4508 background-repeat: no-repeat;
4511 .customization-tipPanel-content {
4517 .customization-tipPanel-em {
4522 .customization-tipPanel-contentImage {
4524 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration.png");
4532 .customization-tipPanel-contentImage:-moz-locale-dir(rtl) {
4533 list-style-image: url("chrome://browser/skin/customizableui/customize-illustration-rtl.png");
4536 .customization-tipPanel-link {
4537 -moz-appearance: none;
4538 background: transparent;
4546 .customization-tipPanel-link > .button-box > .button-text {
4547 margin: 0 !important;
4550 .customization-tipPanel-closeBox > .close-icon {
4551 -moz-appearance: none;
4553 -moz-margin-end: -25px;
4556 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"],
4557 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4558 list-style-image: url("chrome://browser/skin/customizableui/panelarrow-customizeTip.png");
4561 /* === END customizeTip.inc.css === */
4564 * This next rule is a hack to disable subpixel anti-aliasing on all
4565 * labels during the customize mode transition. Subpixel anti-aliasing
4566 * on Windows with Direct2D layers acceleration is particularly slow to
4567 * paint, so this hack is how we sidestep that performance bottleneck.
4569 #main-window:-moz-any([customize-entering],[customize-exiting]) label {
4570 transform: perspective(0.01px);
4573 #main-window[customize-entered] {
4574 background-image: url("chrome://browser/skin/customizableui/customizeMode-gridTexture.png");
4575 background-attachment: fixed;
4578 #main-window[customize-entered] #browser-bottombox,
4579 #main-window[customize-entered] #customization-container {
4580 border-left: 1px solid #9C9CFF;
4581 border-right: 1px solid #9C9CFF;
4582 background-clip: padding-box;
4585 #main-window[customize-entered] #browser-bottombox {
4586 border-bottom: 1px solid #9C9CFF;
4589 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="left"] {
4593 #customization-tipPanel > .panel-arrowcontainer > .panel-arrowbox > .panel-arrow[side="right"] {
4597 /* End customization mode */
4599 /* Private browsing indicators */
4602 * Currently, we have two places where we put private browsing indicators on
4603 * Windows. When tabsintitlebar is enabled, we draw the indicator in the titlebar.
4604 * When tabsintitlebar is disabled, we draw the indicator at the end of the
4605 * tabstrip. The titlebar indicator is the fiddliest of the bunch, since we
4606 * want the bottom border of the image to line up with the bottom of the window
4607 * caption buttons. That's why there's so much special-casing going on in here.
4609 .private-browsing-indicator {
4611 pointer-events: none;
4614 #private-browsing-indicator-titlebar {
4619 #main-window[privatebrowsingmode=temporary][tabsintitlebar] #private-browsing-indicator-titlebar > .private-browsing-indicator {
4623 #main-window[privatebrowsingmode=temporary]:-moz-any([inFullscreen],:not([tabsintitlebar])) #TabsToolbar > .private-browsing-indicator {
4627 #TabsToolbar > .private-browsing-indicator {
4628 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") no-repeat center -3px;
4629 -moz-margin-start: 4px;
4633 /* Bug 1008183: We're intentionally using the titlebar asset here for fullscreen
4634 * mode, since the tabstrip "mimics" the titlebar in that case with its own
4635 * min/max/close window buttons.
4637 #private-browsing-indicator-titlebar > .private-browsing-indicator,
4638 #main-window[inFullscreen] #TabsToolbar > .private-browsing-indicator {
4639 background: url("chrome://browser/skin/privatebrowsing-mask-titlebar.png") no-repeat center 0px;
4640 -moz-margin-end: 4px;
4646 /* This one is for Linux */
4647 #main-window[privatebrowsingmode=temporary] #private-browsing-indicator {
4648 background: url("chrome://browser/skin/privatebrowsing-mask-tabstrip.png") center no-repeat;
4652 /* End private browsing indicators */
4654 /* === BEGIN UITour.inc.css === */
4658 #UITourHighlightContainer {
4659 -moz-appearance: none;
4661 background-color: transparent;
4662 /* This is a buffer to compensate for the movement in the "wobble" effect */
4667 background-image: radial-gradient(50% 100%, rgba(0,132,132,0.4) 50%, rgba(0,132,132,0.6) 100%);
4668 border-radius: 40px;
4669 border: 1px solid #9C9CFF;
4670 /* The box-shadow opacity needs to be < 0.5 so it doesn't appear at 100% opacity
4671 on Linux without an X compositor where opacity is either 0 or 1. */
4672 box-shadow: 0 0 3px 0 rgba(0,0,0,0.49);
4677 #UITourTooltipBody {
4678 -moz-margin-end: 14px;
4681 #UITourTooltipBody > vbox {
4685 #UITourTooltipIconContainer {
4686 -moz-margin-start: -16px;
4689 #UITourTooltipIcon {
4692 -moz-margin-start: 28px;
4693 -moz-margin-end: 28px;
4696 #UITourTooltipTitle,
4697 #UITourTooltipDescription {
4701 #UITourTooltipTitle {
4704 -moz-margin-start: 0;
4709 #UITourTooltipDescription {
4710 -moz-margin-start: 0;
4713 line-height: 1.8rem;
4714 margin-bottom: 0; /* Override global.css */
4717 #UITourTooltipClose {
4718 -moz-appearance: none;
4720 background-color: transparent;
4722 -moz-margin-start: 4px;
4726 #UITourTooltipClose > .toolbarbutton-text {
4730 #UITourTooltipButtons {
4732 background-color: rgba(0,0,0,.2);
4733 border-top: 1px solid rgba(0,0,0,.4);
4734 margin: 24px -16px -16px;
4738 #UITourTooltipButtons > button {
4742 #UITourTooltipButtons > button:first-child {
4743 -moz-margin-start: 0;
4746 #UITourTooltipButtons > button[image] > .button-box > .button-icon {
4749 -moz-margin-end: 5px;
4752 #UITourTooltipButtons > button .button-text {
4756 #UITourTooltipButtons > button:not(.button-link) {
4757 -moz-appearance: none;
4758 background-color: #C09070;
4759 border-radius: 3000px;
4763 transition-property: background-color, color;
4764 transition-duration: 150ms;
4767 #UITourTooltipButtons > button:not(.button-link):not(:active):hover {
4768 background-color: #FFCF00;
4772 #UITourTooltipButtons > button.button-link {
4773 -moz-appearance: none;
4774 background: transparent;
4777 color: rgba(0,0,0,0.35);
4779 padding-right: 10px;
4782 #UITourTooltipButtons > button.button-link:hover {
4786 /* The primary button gets the same color as the customize button. */
4787 #UITourTooltipButtons > button.button-primary {
4788 background-color: #A06060; /* LCARS default button background color */
4791 padding-right: 30px;
4794 #UITourTooltipButtons > button.button-primary:not(:active):hover {
4795 background-color: #FFCF00;
4799 /* === END UITour.inc.css === */
4801 #UITourTooltipButtons {
4802 margin: 24px -4px -4px;
4805 /* === BEGIN contextmenu.inc.css === */
4807 menugroup > .menuitem-iconic[disabled="true"] > .menu-iconic-left {
4810 #context-navigation > .menuitem-iconic {
4812 -moz-box-pack: center;
4813 -moz-box-align: center;
4816 #context-navigation > .menuitem-iconic[disabled="true"] {
4817 background-color: transparent;
4820 #context-navigation > .menuitem-iconic > .menu-iconic-left {
4821 -moz-appearance: none;
4824 #context-navigation > #context-back > .menu-iconic-left {
4825 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4826 -moz-image-region: rect(0, 54px, 18px, 36px);
4829 #context-navigation > #context-back:not([disabled="true"]):hover > .menu-iconic-left {
4830 -moz-image-region: rect(18px, 54px, 36px, 36px);
4833 #context-navigation > #context-back[disabled="true"] > .menu-iconic-left {
4834 -moz-image-region: rect(36px, 54px, 54px, 36px);
4837 #context-navigation > #context-forward > .menu-iconic-left {
4838 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4839 -moz-image-region: rect(0, 72px, 18px, 54px);
4842 #context-navigation > #context-forward:not([disabled="true"]):hover > .menu-iconic-left {
4843 -moz-image-region: rect(18px, 72px, 36px, 54px);
4846 #context-navigation > #context-forward[disabled="true"] > .menu-iconic-left {
4847 -moz-image-region: rect(36px, 72px, 54px, 54px);
4850 #context-navigation > #context-reload > .menu-iconic-left {
4851 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
4852 -moz-image-region: rect(0, 14px, 14px, 0);
4855 #context-navigation > #context-reload:not([disabled="true"]):hover > .menu-iconic-left {
4856 -moz-image-region: rect(14px, 14px, 28px, 0);
4859 #context-navigation > #context-reload[disabled="true"] > .menu-iconic-left {
4860 -moz-image-region: rect(28px, 14px, 42px, 0);
4863 #context-navigation > #context-stop > .menu-iconic-left {
4864 list-style-image: url("chrome://browser/skin/reload-stop-go.png");
4865 -moz-image-region: rect(0, 28px, 14px, 14px);
4868 #context-navigation > #context-stop:not([disabled="true"]):hover > .menu-iconic-left {
4869 -moz-image-region: rect(14px, 28px, 28px, 14px);
4872 #context-navigation > #context-stop[disabled="true"] > .menu-iconic-left {
4873 -moz-image-region: rect(28px, 28px, 42px, 14px);
4876 #context-navigation > #context-bookmarkpage > .menu-iconic-left {
4877 list-style-image: url("chrome://browser/skin/ToolbarFx.png");
4878 -moz-image-region: rect(0, 144px, 18px, 126px);
4881 #context-navigation > #context-bookmarkpage:not([disabled="true"]):hover > .menu-iconic-left {
4882 -moz-image-region: rect(18px, 144px, 36px, 126px);
4885 #context-navigation > #context-bookmarkpage[disabled="true"] > .menu-iconic-left {
4886 -moz-image-region: rect(36px, 144px, 54px, 126px);
4889 #context-back:-moz-locale-dir(rtl),
4890 #context-forward:-moz-locale-dir(rtl),
4891 #context-reload:-moz-locale-dir(rtl) {
4892 transform: scaleX(-1);
4895 #context-navigation > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
4901 #context-navigation > #context-reload > .menu-iconic-left > .menu-iconic-icon,
4902 #context-navigation > #context-stop > .menu-iconic-left > .menu-iconic-icon {
4908 /* === END contextmenu.inc.css === */