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 /* === BEGIN panelUIOverlay.inc.css === */
7 #PanelUI-popup #PanelUI-contents:empty {
11 #PanelUI-popup #PanelUI-contents:empty::before {
13 background-image: url("chrome://browser/skin/customizableui/whimsy-bw.png");
18 animation: moveX 3.05s linear 0s infinite alternate,
19 moveY 3.4s linear 0s infinite alternate;
22 #PanelUI-popup #PanelUI-contents:empty:hover::before {
23 background-image: url("chrome://browser/skin/customizableui/whimsy.png");
26 @media (min-resolution: 2dppx) {
27 #PanelUI-popup #PanelUI-contents:empty::before {
28 background-image: url("chrome://browser/skin/customizableui/whimsy-bw@2x.png");
29 background-size: 64px 64px;
31 #PanelUI-popup #PanelUI-contents:empty:hover::before {
32 background-image: url("chrome://browser/skin/customizableui/whimsy@2x.png");
37 /* These values are adjusted for the padding on the panel. */
38 from { margin-left: -15px; } to { margin-left: calc(100% - 49px); }
41 /* These values are adjusted for the padding and height of the panel. */
42 from { margin-top: -6px; } to { margin-top: 58px; }
45 #customization-panelHolder {
50 -moz-margin-start: 3px;
53 #PanelUI-button:-moz-locale-dir(rtl) {
58 background-color: #000000;
59 -moz-margin-start: 38px;
62 .panel-viewstack[viewtype="main"] > .panel-subviews {
63 transform: translateX(22.35em);
66 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
67 transform: translateX(-22.35em);
70 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
74 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
84 #PanelUI-popup .panel-subview-body {
89 .panel-subview-header,
90 .subviewbutton.panel-subview-footer {
94 .panel-subview-header {
96 background-color: #A09090;
101 .panel-subview-footer {
102 border-top: 1px solid #A09090;
105 .cui-widget-panelview .panel-subview-header {
109 .cui-widget-panelview .subviewbutton.panel-subview-footer {
111 -moz-box-pack: center;
116 flex-direction: column;
120 #app-extension-point-end > #PanelUI-menu-button {
123 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
126 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
130 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
133 #PanelUI-popup > arrowscrollbox > scrollbox {
137 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
146 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
147 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
153 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
154 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
155 -moz-margin-start: 0;
163 .panel-mainview:not([panelid="PanelUI-popup"]) {
167 panelview:not([mainview]) .toolbarbutton-text,
168 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
170 -moz-padding-start: 8px;
174 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
178 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
190 #PanelUI-contents-scroller {
197 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
203 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
204 .panelUI-grid .toolbarbutton-1,
205 .panel-customization-placeholder-child {
206 -moz-appearance: none;
207 -moz-box-orient: vertical;
208 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
209 height: calc(51px + 2.2em);
212 /* Help SDK buttons fit in. */
213 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
214 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
219 .customization-palette .toolbarbutton-1 {
220 -moz-appearance: none;
221 -moz-box-orient: vertical;
224 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
225 -moz-appearance: none;
226 -moz-box-orient: vertical;
227 width: calc(22.35em / 3 - 0.1px - 2px);
228 height: calc(49px + 2.2em);
232 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
233 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
234 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
237 .panel-customization-placeholder-child {
239 /* padding: 2px 6px;*/
242 .panelUI-grid .toolbarbutton-1[type="menu"] {
243 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
244 background-position: right 3px top 16px;
245 background-repeat: no-repeat;
248 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
249 background-position: left 3px top 16px;
252 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
256 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
257 -moz-box-align: center;
259 -moz-margin-start: -16px;
261 margin-bottom: 2.2em;
265 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
266 border-radius: 0 0 0 2px;
269 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
270 border-radius: 0 0 2px 0;
273 .panel-combined-button[disabled] > .toolbarbutton-icon {
277 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
278 width: calc(22.35em / 3 - 0.1px);
279 margin: 0 !important;
282 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
283 -moz-box-align: center;
284 -moz-box-pack: center;
287 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
292 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
293 * which was affecting subview display. Because of this, we're hiding the iframe *only*
294 * when displaying a subview. The discerning user might notice this, but it's not nearly
295 * as bad as the brokenness.
296 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
299 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
303 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
307 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
308 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
309 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
310 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
311 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
312 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
313 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
314 .panel-customization-placeholder-child > .toolbarbutton-icon {
317 /* Explanation for the below formula (A / B - C)
319 Each button is 22.35em / 3 - 0.1px wide
321 Each button has two margins.
323 The button icon is 32 pixels wide.
324 The button has 12px of horizontal padding (6 on each side).
325 The button has 0px of horizontal border (0 on each side).
326 Total width of button's icon + button padding should therefore be 44px,
327 which means each horizontal margin should be the half the button's width - (44/2) px.
329 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
332 /* above we treat the container as the icon for the margins, that is so the
333 /* badge itself is positioned correctly. Here we make sure that the icon itself
334 /* has the minum size we want, but no padding/margin. */
335 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
342 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
346 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
350 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
351 -moz-margin-end: 2px;
354 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
355 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
361 #zoom-in-button > .toolbarbutton-text,
362 #zoom-out-button > .toolbarbutton-text,
363 #zoom-reset-button > .toolbarbutton-icon {
370 flex-direction: column;
371 /* background-color: hsla(210,4%,10%,.07);*/
374 /* min-height: 4em;*/
375 border-bottom-right-radius: 4px;
376 border-bottom-left-radius: 4px;
379 #PanelUI-footer-inner {
381 border-top: 1px solid #9C9CFF;
384 #PanelUI-footer-inner > toolbarseparator {
386 border-left: 1px solid #9C9CFF;
390 #PanelUI-footer-inner:hover > toolbarseparator {
402 background-image: none;
405 transition: background-color;
406 -moz-box-orient: horizontal;
409 #PanelUI-fxa-status {
410 border-top: 1px solid #9C9CFF;
411 border-bottom: 1px solid transparent;
415 #PanelUI-fxa-status > .toolbarbutton-text {
416 width: 0; /* Fancy cropping solution for flexbox. */
424 #PanelUI-fxa-status > .toolbarbutton-text,
425 #PanelUI-customize > .toolbarbutton-text {
431 #PanelUI-help > .toolbarbutton-text,
432 #PanelUI-quit > .toolbarbutton-text {
436 #PanelUI-help > .toolbarbutton-icon,
437 #PanelUI-quit > .toolbarbutton-icon {
443 -moz-padding-start: 15px;
444 -moz-border-start-style: none;
447 #PanelUI-fxa-status {
448 list-style-image: url("chrome://browser/skin/sync-horizontalbar.png");
451 #PanelUI-fxa-status[status="active"] {
452 list-style-image: url("chrome://browser/skin/syncProgress-horizontalbar.png");
456 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
459 #customization-panelHolder #PanelUI-customize {
460 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
464 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
468 -moz-border-end-style: none;
469 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
476 -moz-image-region: rect(0, 16px, 16px, 0);
479 #PanelUI-customize:hover,
480 #PanelUI-help:not([disabled]):hover,
481 #PanelUI-quit:not([disabled]):hover,
482 #PanelUI-customize:hover:active,
483 #PanelUI-help:not([disabled]):hover:active,
484 #PanelUI-quit:not([disabled]):hover:active {
485 -moz-image-region: rect(0, 32px, 16px, 16px);
488 #PanelUI-help[disabled],
489 #PanelUI-quit[disabled] {
490 -moz-image-region: rect(0, 48px, 16px, 32px);
493 #PanelUI-fxa-status:not([disabled]):hover,
494 #PanelUI-help:not([disabled]):hover,
495 #PanelUI-customize:hover,
496 #PanelUI-quit:not([disabled]):hover {
499 #PanelUI-fxa-status:not([disabled]):hover:active,
500 #PanelUI-help:not([disabled]):hover:active,
501 #PanelUI-customize:hover:active,
502 #PanelUI-quit:not([disabled]):hover:active {
505 #PanelUI-fxa-status:not([disabled]):hover,
506 #PanelUI-fxa-status:not([disabled]):hover:active {
509 #PanelUI-quit:not([disabled]):hover {
510 background-color: #FF0000;
513 #PanelUI-quit:not([disabled]):hover:active {
514 background-color: #FF9F00;
517 #customization-panelHolder #PanelUI-customize {
519 background-color: #008484;
524 #customization-panelHolder #PanelUI-customize + toolbarseparator {
528 #customization-panelHolder #PanelUI-customize:hover,
529 #customization-panelHolder #PanelUI-customize:hover:active {
530 background-color: #FFCF00;
534 #customization-palette .toolbarbutton-multiline-text,
535 #customization-palette .toolbarbutton-text {
539 panelview .toolbarbutton-1,
541 .widget-overflow-list .toolbarbutton-1,
542 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
543 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
545 background-color: hsla(210,4%,10%,0);
548 border-color: hsla(210,4%,10%,0);*/
549 transition-property: background-color, border-color;
550 transition-duration: 150ms;
553 panelview .toolbarbutton-1,
555 .widget-overflow-list .toolbarbutton-1,
556 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
560 .subviewbutton.panel-subview-footer {
561 /* border-radius: 0;*/
565 .subviewbutton.panel-subview-footer > .menu-text {
566 -moz-margin-start: 0px !important;
567 -moz-padding-start: 6px;
568 -moz-padding-end: 6px;
573 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
577 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
582 .subviewbutton.panel-subview-footer > .menu-accel-container {
583 -moz-padding-start: 6px;
586 .subviewbutton:not(.panel-subview-footer) {
590 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
591 /* Bookmark items need a more specific selector. */
592 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
593 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
594 /* font-size: 1.1em;*/
597 .PanelUI-subView .subviewbutton[shortcut]::after {
598 content: attr(shortcut);
603 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
604 -moz-margin-start: 10px;
607 /* This is a <label> but it should fit in with the menu font- and colorwise. */
608 #PanelUI-characterEncodingView-autodetect-label {
613 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
618 panelview .toolbarbutton-1,
619 .widget-overflow-list .toolbarbutton-1 {
624 panelview .toolbarbutton-1:not(:-moz-any([disabled],[checked="true"],[open],:active)):-moz-any(:hover,[_moz-menuactive]),
625 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):-moz-any(:hover,[_moz-menuactive]),
626 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
627 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
628 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[checked="true"],[open],:active)):-moz-any(:hover,[_moz-menuactive]),
629 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
630 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
631 background-color: hsla(210,4%,10%,.08);
632 border-color: hsla(210,4%,10%,.11);
635 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[checked="true"],[open],:active)):-moz-any(:hover,[_moz-menuactive]) {
636 border-color: hsla(210,4%,10%,.11);
639 panelview .toolbarbutton-1:not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)),
640 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)),
641 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
642 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
643 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)),
644 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
645 > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)) {
646 background-color: hsla(210,4%,10%,.12);
647 border-color: hsla(210,4%,10%,.14);
648 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
651 .subviewbutton.panel-subview-footer {
652 margin: 4px -4px -4px;
653 background-color: hsla(210,4%,10%,.07);
654 border-top: 1px solid hsla(210,4%,10%,.12);
659 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
660 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
661 background-color: hsla(210,4%,10%,.1);
662 border-top: 1px solid hsla(210,4%,10%,.12);
665 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
666 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],[checked="true"],:hover:active) {
667 background-color: hsla(210,4%,10%,.15);
668 border-top: 1px solid hsla(210,4%,10%,.12);
669 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
672 #BMB_bookmarksPopup .subviewbutton {
677 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
681 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
682 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
683 -moz-appearance: none;
688 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
689 #BMB_bookmarksPopup arrowscrollbox {
693 #BMB_bookmarksPopup menupopup {
697 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
698 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
703 .PanelUI-subView menuseparator,
704 .PanelUI-subView toolbarseparator,
705 .cui-widget-panelview menuseparator {
706 -moz-appearance: none;
708 border-top: 1px solid #9C9CFF;
713 .PanelUI-subView menuseparator,
714 .PanelUI-subView toolbarseparator {
715 /* -moz-margin-start: -5px;
716 -moz-margin-end: -4px;*/
719 .PanelUI-subView menuseparator.small-separator,
720 .PanelUI-subView toolbarseparator.small-separator {
725 .cui-widget-panelview menuseparator.small-separator {
730 .subviewbutton > .menu-accel-container {
731 -moz-box-pack: start;
732 -moz-margin-start: 10px;
733 -moz-margin-end: auto;
734 /* color: hsl(0,0%,50%);*/
737 #PanelUI-historyItems > toolbarbutton {
738 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
741 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
742 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
743 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
748 #PanelUI-footer > #PanelUI-footer-inner[panel-multiview-anchor=true],
749 toolbarbutton[panel-multiview-anchor=true] {
750 background-color: #008484;
753 toolbarbutton[panel-multiview-anchor=true] {
754 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
755 background-position: right 5px center;
756 background-repeat: no-repeat;
759 toolbarbutton[panel-multiview-anchor=true]:-moz-locale-dir(rtl) {
760 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
761 background-position: left 5px center;
764 #PanelUI-footer > #PanelUI-footer-inner[panel-multiview-anchor=true],
765 toolbarbutton[panel-multiview-anchor=true],
766 toolbarbutton[panel-multiview-anchor=true] > .toolbarbutton-menubutton-button {
770 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
771 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
775 #search-container[cui-areatype="menu-panel"],
776 #wrapper-search-container[place="panel"] {
780 #search-container[cui-areatype="menu-panel"] {
785 toolbarpaletteitem[place="palette"] > #search-container {
790 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
792 transition-property: background-color, border-color;
793 transition-duration: 150ms;
796 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
801 min-width: calc(22.35em / 3 - 0.1px);
802 max-width: calc(22.35em / 3 - 0.1px);
803 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
804 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
805 height: calc(2.2em + 4px);
807 -moz-box-orient: horizontal;
810 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
811 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
812 /* reduce the width with 2px for this button to compensate for two separators
814 min-width: calc(22.35em / 3 - 0.1px - 2px);
815 max-width: calc(22.35em / 3 - 0.1px - 2px);
818 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
822 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
826 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
827 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
828 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
829 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
830 border-top-right-radius: 0;
831 border-bottom-right-radius: 0;
834 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
835 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
836 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
837 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
838 border-top-left-radius: 0;
839 border-bottom-left-radius: 0;
842 .toolbaritem-combined-buttons > separator {
843 -moz-appearance: none;
845 -moz-box-align: stretch;
848 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
852 /* background: hsla(210,4%,10%,.15);*/
853 transition-property: margin;
854 transition-duration: 10ms;
855 transition-timing-function: ease;
858 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
862 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
866 .cui-widget-panelview,
867 #widget-overflow-scroller {
872 #widget-overflow-scroller {
878 #widget-overflow-list {
884 toolbaritem[overflowedItem=true],
885 toolbarbutton[overflowedItem=true] {
889 background-repeat: no-repeat;
890 background-position: 0 center;
893 .widget-overflow-list .toolbarbutton-1,
894 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
895 -moz-box-align: center;
896 -moz-box-orient: horizontal;
899 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
900 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
902 -moz-padding-start: .5em;
905 #widget-overflow-list > .toolbaritem-combined-buttons {
909 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
914 -moz-margin-end: -1px;
917 .subviewbutton[checked="true"] {
918 background-image: url("chrome://global/skin/menu/menu-check.gif");
919 background-position: top 5px left 4px;
920 background-repeat: no-repeat;
923 .subviewbutton[checked="true"]:hover {
924 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
927 .PanelUI-subView .menu-iconic-left {
928 -moz-appearance: none;
929 -moz-margin-end: 3px;
932 .PanelUI-subView menuitem[checked="true"] > .menu-iconic-left {
936 /* === END panelUIOverlay.inc.css === */
938 #PanelUI-contents #zoom-out-btn {
943 #PanelUI-contents #zoom-in-btn {
948 /* bookmark panel submenus */
950 #BMB_bookmarksPopup menupopup[placespopup=true] {
951 /* background: transparent;
956 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
957 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
959 border: 1px solid rgba(0,0,0,0.25);
960 border-radius: 3.5px;
964 #BMB_bookmarksPopup menupopup {
965 /* padding-top: 2px;*/
968 /* Add some space at the top because there are no headers: */
969 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
970 /* padding-top: 4px;*/
973 #BMB_bookmarksPopup .menu-text {
977 /* bookmark panel separator */
978 #BMB_bookmarksPopup menuseparator {
983 .subviewbutton > .menu-right,
984 .subviewbutton > .menu-iconic-left {
987 margin-bottom: 2px;*/
990 /* Disabled empty item looks too small otherwise, because it has no icon. */
991 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
992 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
993 menuitem[type="checkbox"].subviewbutton {
994 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
995 * 2px for its border, see above */
996 /* min-height: 22px;*/
999 .subviewbutton > .toolbarbutton-text {
1000 /* padding-top: 3px;
1001 padding-bottom: 3px;*/
1004 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1005 -moz-appearance: none;
1007 -moz-margin-start: 3px;
1010 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1012 -moz-padding-start: 0;
1016 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1020 .subviewbutton > .toolbarbutton-text {
1021 -moz-padding-start: 16px;
1024 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1025 -moz-padding-start: 0;
1028 .subviewbutton.bookmark-item > .toolbarbutton-icon {
1029 -moz-margin-start: 3px;
1032 /* subviewbutton entries for social sidebars have images that come from external
1033 /* sources, and are not guaranteed to be the size we want, so force the size on
1035 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1040 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1044 menu.subviewbutton > .menu-right {
1045 -moz-appearance: none;
1046 list-style-image: url("chrome://browser/skin/places/bookmarks-menu-arrow.png");
1047 -moz-image-region: rect(0, 16px, 16px, 0);
1050 menu[disabled="true"].subviewbutton > .menu-right {
1051 -moz-image-region: rect(0, 32px, 16px, 16px);