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 #customization-panelHolder {
14 #PanelUI-button:-moz-locale-dir(rtl) {
19 background-color: #000000;
20 -moz-margin-start: 38px;
23 .panel-viewstack[viewtype="main"] > .panel-subviews {
24 transform: translateX(21em);
27 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
28 transform: translateX(-21em);
31 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
41 #PanelUI-popup .panel-subview-body {
46 .panel-subview-header,
47 .subviewbutton.panel-subview-footer {
51 .panel-subview-header {
53 background-color: #A09090;
58 .panel-subview-footer {
59 border-top: 1px solid #A09090;
62 .cui-widget-panelview .panel-subview-header {
66 .cui-widget-panelview .subviewbutton.panel-subview-footer {
68 -moz-box-pack: center;
73 flex-direction: column;
77 #app-extension-point-end > #PanelUI-menu-button {
80 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
83 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
87 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
90 #PanelUI-popup > arrowscrollbox > scrollbox {
94 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
103 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text,
104 #bookmarks-menu-button > toolbarbutton > .toolbarbutton-text,
105 :-moz-any(#PanelUI-contents,#widget-overflow-list) > toolbarpaletteitem > toolbaritem > toolbarbutton > .toolbarbutton-text,
106 :-moz-any(#PanelUI-contents,#widget-overflow-list) > toolbaritem > toolbarbutton > .toolbarbutton-text,
107 :-moz-any(#PanelUI-contents,#widget-overflow-list) > toolbarpaletteitem > toolbarbutton > .toolbarbutton-text,
108 :-moz-any(#PanelUI-contents,#widget-overflow-list) > toolbarbutton > .toolbarbutton-text {
112 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
113 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
114 -moz-margin-start: 0;
118 .panel-mainview:not([panelid="PanelUI-popup"]) {
122 panelview:not([mainview]) .toolbarbutton-text,
123 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
125 -moz-padding-start: 8px;
129 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
133 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
145 #PanelUI-contents-scroller {
152 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton > .toolbarbutton-icon {
158 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
159 .panelUI-grid .toolbarbutton-1,
160 .panel-customization-placeholder-child {
161 -moz-appearance: none;
162 -moz-box-orient: vertical;
163 width: calc(7em - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
164 height: calc(51px + 2.2em);
167 /* Help SDK buttons fit in. */
168 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
169 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
174 .customization-palette .toolbarbutton-1 {
175 -moz-appearance: none;
176 -moz-box-orient: vertical;
179 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
180 -moz-appearance: none;
181 -moz-box-orient: vertical;
182 width: calc(7em - 2px);
183 height: calc(49px + 2.2em);
187 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
188 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
189 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
192 .panel-customization-placeholder-child {
194 /* padding: 2px 6px;*/
197 .panelUI-grid .toolbarbutton-1[type="menu"] {
198 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
199 background-position: right 3px top 16px;
200 background-repeat: no-repeat;
203 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
204 background-position: left 3px top 16px;
207 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
211 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
212 -moz-box-align: center;
214 -moz-margin-start: -16px;
216 margin-bottom: 2.2em;
220 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
221 border-radius: 0 0 0 2px;
224 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
225 border-radius: 0 0 2px 0;
228 .panel-combined-button[disabled] > .toolbarbutton-icon {
232 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
234 margin: 0 !important;
237 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
238 -moz-box-align: center;
239 -moz-box-pack: center;
242 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
247 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
248 * which was affecting subview display. Because of this, we're hiding the iframe *only*
249 * when displaying a subview. The discerning user might notice this, but it's not nearly
250 * as bad as the brokenness.
251 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
254 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
258 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
262 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
263 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
264 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
265 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
266 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
267 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
268 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
269 .panel-customization-placeholder-child > .toolbarbutton-icon {
272 /* Explanation for the below formula (A / B - C)
274 Each button is 7em (menuPanelButtonWidth) wide
276 Each button has two margins.
278 The button icon is 32 pixels wide.
279 The button has 12px of horizontal padding (6 on each side).
280 The button has 0px of horizontal border (0 on each side).
281 Total width of button's icon + button padding should therefore be 44px,
282 which means each horizontal margin should be the half the button's width - (44/2) px.
284 margin: 4px calc(7em / 2 - 22px);
287 /* above we treat the container as the icon for the margins, that is so the
288 /* badge itself is positioned correctly. Here we make sure that the icon itself
289 /* has the minum size we want, but no padding/margin. */
290 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
297 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
301 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
305 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
306 -moz-margin-end: 2px;
309 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button,
310 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-reset-button {
316 #zoom-in-button > .toolbarbutton-text,
317 #zoom-out-button > .toolbarbutton-text,
318 #zoom-reset-button > .toolbarbutton-icon {
325 flex-direction: column;
326 /* background-color: hsla(210,4%,10%,.07);*/
329 /* min-height: 4em;*/
330 border-bottom-right-radius: 4px;
331 border-bottom-left-radius: 4px;
334 #PanelUI-footer-inner {
336 border-top: 1px solid #9C9CFF;
339 #PanelUI-footer-inner > toolbarseparator {
341 border-left: 1px solid #9C9CFF;
345 #PanelUI-footer-inner:hover > toolbarseparator {
357 background-image: none;
360 transition: background-color;
361 -moz-box-orient: horizontal;
364 #PanelUI-fxa-status {
365 border-top: 1px solid #9C9CFF;
366 border-bottom: 1px solid transparent;
370 #PanelUI-fxa-status > .toolbarbutton-text {
371 width: 0; /* Fancy cropping solution for flexbox. */
379 #PanelUI-fxa-status > .toolbarbutton-text,
380 #PanelUI-customize > .toolbarbutton-text {
386 #PanelUI-help > .toolbarbutton-text,
387 #PanelUI-quit > .toolbarbutton-text {
391 #PanelUI-help > .toolbarbutton-icon,
392 #PanelUI-quit > .toolbarbutton-icon {
398 -moz-padding-start: 15px;
399 -moz-border-start-style: none;
402 #PanelUI-fxa-status {
403 list-style-image: url("chrome://browser/skin/sync-horizontalbar.png");
406 #PanelUI-fxa-status[status="active"] {
407 list-style-image: url("chrome://browser/skin/syncProgress-horizontalbar.png");
411 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
414 #customization-panelHolder #PanelUI-customize {
415 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
419 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
423 -moz-border-end-style: none;
424 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
431 -moz-image-region: rect(0, 16px, 16px, 0);
434 #PanelUI-customize:hover,
435 #PanelUI-help:not([disabled]):hover,
436 #PanelUI-quit:not([disabled]):hover,
437 #PanelUI-customize:hover:active,
438 #PanelUI-help:not([disabled]):hover:active,
439 #PanelUI-quit:not([disabled]):hover:active {
440 -moz-image-region: rect(0, 32px, 16px, 16px);
443 #PanelUI-help[disabled],
444 #PanelUI-quit[disabled] {
445 -moz-image-region: rect(0, 48px, 16px, 32px);
448 #PanelUI-fxa-status:not([disabled]):hover,
449 #PanelUI-help:not([disabled]):hover,
450 #PanelUI-customize:hover,
451 #PanelUI-quit:not([disabled]):hover {
454 #PanelUI-fxa-status:not([disabled]):hover:active,
455 #PanelUI-help:not([disabled]):hover:active,
456 #PanelUI-customize:hover:active,
457 #PanelUI-quit:not([disabled]):hover:active {
460 #PanelUI-fxa-status:not([disabled]):hover,
461 #PanelUI-fxa-status:not([disabled]):hover:active {
464 #PanelUI-quit:not([disabled]):hover {
465 /* background-color: #d94141;
466 outline-color: #c23a3a;*/
469 #PanelUI-quit:not([disabled]):hover:active {
470 /* background-color: #ad3434;
471 outline-color: #992e2e;*/
474 #customization-panelHolder #PanelUI-customize {
476 background-color: #008484;
481 #customization-panelHolder #PanelUI-customize + toolbarseparator {
485 #customization-panelHolder #PanelUI-customize:hover,
486 #customization-panelHolder #PanelUI-customize:hover:active {
487 background-color: #FFCF00;
491 #customization-palette .toolbarbutton-multiline-text,
492 #customization-palette .toolbarbutton-text {
496 panelview .toolbarbutton-1,
498 .widget-overflow-list .toolbarbutton-1,
499 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
500 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton {
502 background-color: hsla(210,4%,10%,0);
505 border-color: hsla(210,4%,10%,0);*/
506 transition-property: background-color, border-color;
507 transition-duration: 150ms;
510 panelview .toolbarbutton-1,
512 .widget-overflow-list .toolbarbutton-1,
513 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton {
517 .subviewbutton.panel-subview-footer {
522 .subviewbutton.panel-subview-footer > .toolbarbutton-text,
523 .subviewbutton.panel-subview-footer > .menu-text {
524 -moz-padding-start: 0;
525 -moz-padding-end: 12px;
529 .subviewbutton:not(.panel-subview-footer) {
533 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
534 /* Bookmark items need a more specific selector. */
535 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
536 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
537 /* font-size: 1.1em;*/
540 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
545 panelview .toolbarbutton-1,
546 .widget-overflow-list .toolbarbutton-1 {
551 panelview toolbarbutton-1:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
552 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
553 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
554 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
555 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover,
556 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)
557 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
558 background-color: hsla(210,4%,10%,.08);
559 border-color: hsla(210,4%,10%,.11);
562 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem):not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
563 border-color: hsla(210,4%,10%,.11);
566 panelview .toolbarbutton-1:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
567 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
568 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
569 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
570 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
571 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem)
572 > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active) {
573 background-color: hsla(210,4%,10%,.12);
574 border-color: hsla(210,4%,10%,.14);
575 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
578 .subviewbutton.panel-subview-footer {
579 margin: 4px -4px -4px;
580 background-color: hsla(210,4%,10%,.07);
581 border-top: 1px solid hsla(210,4%,10%,.12);
586 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
587 background-color: hsla(210,4%,10%,.1);
588 border-top: 1px solid hsla(210,4%,10%,.12);
591 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],[checked="true"],:hover:active) {
592 background-color: hsla(210,4%,10%,.15);
593 border-top: 1px solid hsla(210,4%,10%,.12);
594 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
597 #BMB_bookmarksPopup .subviewbutton {
602 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
606 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
607 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
608 -moz-appearance: none;
613 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
614 #BMB_bookmarksPopup arrowscrollbox {
618 #BMB_bookmarksPopup menupopup {
622 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
623 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
628 .PanelUI-subView menuseparator,
629 .PanelUI-subView toolbarseparator,
630 .cui-widget-panelview menuseparator {
631 -moz-appearance: none;
633 border-top: 1px solid #9C9CFF;
638 .PanelUI-subView menuseparator,
639 .PanelUI-subView toolbarseparator {
640 /* -moz-margin-start: -5px;
641 -moz-margin-end: -4px;*/
644 .PanelUI-subView menuseparator.small-separator,
645 .PanelUI-subView toolbarseparator.small-separator {
650 .cui-widget-panelview menuseparator.small-separator {
655 .subviewbutton > .menu-accel-container {
656 -moz-box-pack: start;
657 -moz-margin-start: 10px;
658 -moz-margin-end: auto;
659 /* color: hsl(0,0%,50%);*/
662 #PanelUI-historyItems > toolbarbutton {
663 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
666 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
667 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
668 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
673 #PanelUI-footer > #PanelUI-footer-inner[panel-multiview-anchor=true],
674 toolbarbutton[panel-multiview-anchor=true] {
675 background-color: #008484;
678 toolbarbutton[panel-multiview-anchor=true] {
679 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
680 background-position: right 5px center;
681 background-repeat: no-repeat;
684 toolbarbutton[panel-multiview-anchor=true]:-moz-locale-dir(rtl) {
685 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
686 background-position: left 5px center;
689 #PanelUI-footer > #PanelUI-footer-inner[panel-multiview-anchor=true],
690 toolbarbutton[panel-multiview-anchor=true],
691 toolbarbutton[panel-multiview-anchor=true] > .toolbarbutton-menubutton-button {
695 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
696 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
700 #search-container[cui-areatype="menu-panel"],
701 #wrapper-search-container[place="panel"] {
705 #search-container[cui-areatype="menu-panel"] {
710 toolbarpaletteitem[place="palette"] > #search-container {
715 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) {
717 transition-property: background-color, border-color;
718 transition-duration: 150ms;
721 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton {
728 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
729 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
730 height: calc(2.2em + 4px);
732 -moz-box-orient: horizontal;
735 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #copy-button,
736 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-reset-button {
737 /* reduce the width with 2px for this button to compensate for two separators
739 min-width: calc(7em - 2px);
740 max-width: calc(7em - 2px);
743 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > toolbarbutton[disabled] > .toolbarbutton-icon {
747 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
751 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button:-moz-locale-dir(ltr),
752 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button:-moz-locale-dir(rtl),
753 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button:-moz-locale-dir(ltr),
754 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button:-moz-locale-dir(rtl) {
755 border-top-right-radius: 0;
756 border-bottom-right-radius: 0;
759 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #cut-button:-moz-locale-dir(rtl),
760 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #paste-button:-moz-locale-dir(ltr),
761 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-out-button:-moz-locale-dir(rtl),
762 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > #zoom-in-button:-moz-locale-dir(ltr) {
763 border-top-left-radius: 0;
764 border-bottom-left-radius: 0;
767 .toolbaritem-combined-buttons > separator {
768 -moz-appearance: none;
770 -moz-box-align: stretch;
773 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem) > separator {
777 /* background: hsla(210,4%,10%,.15);*/
778 transition-property: margin;
779 transition-duration: 10ms;
780 transition-timing-function: ease;
783 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]),.overflowedItem):hover > separator {
787 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
791 .cui-widget-panelview,
792 #widget-overflow-scroller {
797 #widget-overflow-scroller {
803 #widget-overflow-list {
809 #widget-overflow-list > .overflowedItem {
813 background-repeat: no-repeat;
814 background-position: 0 center;
817 .widget-overflow-list .toolbarbutton-1,
818 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
819 -moz-box-align: center;
820 -moz-box-orient: horizontal;
823 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-text,
824 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
826 -moz-padding-start: .5em;
829 #widget-overflow-list > .toolbaritem-combined-buttons {
833 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
838 -moz-margin-end: -1px;
841 .subviewbutton[checked="true"] {
842 background-image: url("chrome://global/skin/menu/menu-check.gif");
843 background-position: top 5px left 4px;
844 background-repeat: no-repeat;
847 .subviewbutton[checked="true"]:hover {
848 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
851 .PanelUI-subView .menu-iconic-left {
852 -moz-appearance: none;
853 -moz-margin-end: 3px;
856 .PanelUI-subView menuitem[checked="true"] > .menu-iconic-left {
860 /* === END panelUIOverlay.inc.css === */
862 #PanelUI-contents #zoom-out-btn {
867 #PanelUI-contents #zoom-in-btn {
872 /* bookmark panel submenus */
874 #BMB_bookmarksPopup menupopup {
875 background: transparent;
880 #BMB_bookmarksPopup menupopup > hbox {
881 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
883 border: 1px solid rgba(0,0,0,0.25);
884 border-radius: 3.5px;
888 #BMB_bookmarksPopup .menu-text {
892 /* bookmark panel separator */
893 #BMB_bookmarksPopup menuseparator {
898 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
899 -moz-appearance: none;
901 -moz-margin-start: 3px;
904 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
906 -moz-padding-start: 0;
910 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
914 .subviewbutton > .toolbarbutton-text {
915 -moz-padding-start: 16px;
918 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
919 -moz-padding-start: 0;
922 .subviewbutton.bookmark-item > .toolbarbutton-icon {
923 -moz-margin-start: 3px;
926 /* subviewbutton entries for social sidebars have images that come from external
927 /* sources, and are not guaranteed to be the size we want, so force the size on
929 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
934 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
938 menu.subviewbutton > .menu-right {
939 -moz-appearance: none;
940 list-style-image: url("chrome://browser/skin/places/bookmarks-menu-arrow.png");
941 -moz-image-region: rect(0, 16px, 16px, 0);
944 menu[disabled="true"].subviewbutton > .menu-right {
945 -moz-image-region: rect(0, 32px, 16px, 16px);