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:-moz-locale-dir(rtl):empty::before {
23 animation: moveXRTL 3.05s linear 0s infinite alternate,
24 moveY 3.4s linear 0s infinite alternate;
27 #PanelUI-popup #PanelUI-contents:empty:hover::before {
28 background-image: url("chrome://browser/skin/customizableui/whimsy.png");
31 @media (min-resolution: 2dppx) {
32 #PanelUI-popup #PanelUI-contents:empty::before {
33 background-image: url("chrome://browser/skin/customizableui/whimsy-bw@2x.png");
34 background-size: 64px 64px;
36 #PanelUI-popup #PanelUI-contents:empty:hover::before {
37 background-image: url("chrome://browser/skin/customizableui/whimsy@2x.png");
42 /* These values are adjusted for the padding on the panel. */
43 from { margin-left: -9px; } to { margin-left: calc(100% - 55px); }
46 /* These values are adjusted for the padding on the panel. */
47 from { margin-right: -9px; } to { margin-right: calc(100% - 55px); }
50 /* These values are adjusted for the padding and height of the panel. */
51 from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
54 #customization-panelHolder {
59 -moz-margin-start: 3px;
62 #PanelUI-button:-moz-locale-dir(rtl) {
67 background-color: #000000;
68 -moz-margin-start: 38px;
71 .panel-viewstack[viewtype="main"] > .panel-subviews {
72 transform: translateX(22.35em);
75 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
76 transform: translateX(-22.35em);
79 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
83 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
93 #PanelUI-popup .panel-subview-body {
98 .panel-subview-header,
99 .subviewbutton.panel-subview-footer {
103 .panel-subview-header {
105 background-color: #A09090;
110 .panel-subview-footer {
111 border-top: 1px solid #A09090;
114 .cui-widget-panelview .panel-subview-header {
118 .cui-widget-panelview .subviewbutton.panel-subview-footer {
120 -moz-box-pack: center;
125 flex-direction: column;
129 #app-extension-point-end > #PanelUI-menu-button {
132 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
135 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
139 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
142 #PanelUI-popup > arrowscrollbox > scrollbox {
146 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
155 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
156 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
157 /* line-height: 1.1;*/
161 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
162 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
166 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
167 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
169 clip: rect(auto, auto, 2.3em, auto);
172 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
173 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
175 /* Need to override toolkit theming which sets margin: 0 !important; */
176 margin: 2px 0 0 !important;
179 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
184 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
185 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
186 -moz-margin-start: 0;
194 .panel-mainview:not([panelid="PanelUI-popup"]) {
198 panelview:not([mainview]) .toolbarbutton-text,
199 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
204 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
208 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
212 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
213 border-radius: 4px 4px 0 0;
216 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
217 border-radius: 0 0 4px 4px;
228 #PanelUI-contents-scroller {
235 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
241 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
242 .panelUI-grid .toolbarbutton-1,
243 .panel-customization-placeholder-child {
244 -moz-appearance: none;
245 -moz-box-orient: vertical;
246 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
247 height: calc(51px + 2.2em);
250 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
251 * should have a min-width set so they abide by the width set above (which they do outside of
252 * customize mode because they're in a flexed container) */
253 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
257 /* Help SDK buttons fit in. */
258 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
259 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
264 .customization-palette .toolbarbutton-1 {
265 -moz-appearance: none;
266 -moz-box-orient: vertical;
269 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
270 -moz-appearance: none;
271 -moz-box-orient: vertical;
272 width: calc(22.35em / 3 - 0.1px - 2px);
273 height: calc(49px + 2.2em);
277 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
278 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
279 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
282 .panel-customization-placeholder-child {
284 /* padding: 2px 6px;*/
287 .panelUI-grid .toolbarbutton-1[type="menu"] {
288 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
289 background-position: right 3px top 16px;
290 background-repeat: no-repeat;
293 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
294 background-position: left 3px top 16px;
297 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
301 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
302 -moz-box-align: center;
304 -moz-margin-start: -16px;
306 margin-bottom: 2.2em;
310 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
311 border-radius: 0 0 0 2px;
314 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
315 border-radius: 0 0 2px 0;
318 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
322 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
323 width: calc(22.35em / 3 - 0.1px);
324 margin: 0 !important;
327 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
328 -moz-box-align: center;
329 -moz-box-pack: center;
332 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
336 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
339 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
340 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
341 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
342 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
343 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
344 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
349 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
350 * which was affecting subview display. Because of this, we're hiding the iframe *only*
351 * when displaying a subview. The discerning user might notice this, but it's not nearly
352 * as bad as the brokenness.
353 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
356 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
360 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
364 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
365 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
366 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
367 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
368 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
369 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
370 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
371 .panel-customization-placeholder-child > .toolbarbutton-icon {
374 /* Explanation for the below formula (A / B - C)
376 Each button is 22.35em / 3 - 0.1px wide
378 Each button has two margins.
380 The button icon is 32 pixels wide.
381 The button has 12px of horizontal padding (6 on each side).
382 The button has 0px of horizontal border (0 on each side).
383 Total width of button's icon + button padding should therefore be 44px,
384 which means each horizontal margin should be the half the button's width - (44/2) px.
386 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
389 /* above we treat the container as the icon for the margins, that is so the
390 /* badge itself is positioned correctly. Here we make sure that the icon itself
391 /* has the minum size we want, but no padding/margin. */
392 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
399 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
403 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
407 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
408 -moz-margin-end: 2px;
411 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
412 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
418 #zoom-in-button > .toolbarbutton-text,
419 #zoom-out-button > .toolbarbutton-text,
420 #zoom-reset-button > .toolbarbutton-icon {
427 flex-direction: column;
428 /* background-color: hsla(210,4%,10%,.07);*/
431 /* min-height: 4em;*/
432 border-bottom-right-radius: 4px;
433 border-bottom-left-radius: 4px;
436 #PanelUI-footer-inner {
438 border-top: 1px solid #9C9CFF;
441 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
445 #PanelUI-footer-inner > toolbarseparator {
447 border-left: 1px solid #9C9CFF;
451 #PanelUI-footer-inner:hover > toolbarseparator {
465 transition: background-color;
466 -moz-box-orient: horizontal;
469 #PanelUI-fxa-status {
470 border-top: 1px solid #9C9CFF;
471 border-bottom: 1px solid transparent;
475 #PanelUI-fxa-status > .toolbarbutton-text {
476 width: 0; /* Fancy cropping solution for flexbox. */
479 #PanelUI-help[panel-multiview-anchor="true"] {
480 -moz-image-region: rect(0, 32px, 16px, 16px);
488 #PanelUI-fxa-status > .toolbarbutton-text,
489 #PanelUI-customize > .toolbarbutton-text {
495 #PanelUI-help > .toolbarbutton-text,
496 #PanelUI-quit > .toolbarbutton-text {
500 #PanelUI-help > .toolbarbutton-icon,
501 #PanelUI-quit > .toolbarbutton-icon {
507 -moz-padding-start: 15px;
508 -moz-border-start-style: none;
511 #PanelUI-fxa-status {
512 list-style-image: url("chrome://browser/skin/sync-horizontalbar.png");
515 #PanelUI-fxa-status[status="active"] {
516 list-style-image: url("chrome://browser/skin/syncProgress-horizontalbar.png");
520 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
523 #customization-panelHolder #PanelUI-customize {
524 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
528 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
532 -moz-border-end-style: none;
533 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
540 -moz-image-region: rect(0, 16px, 16px, 0);
543 #PanelUI-customize:hover,
544 #PanelUI-help:not([disabled]):hover,
545 #PanelUI-quit:not([disabled]):hover,
546 #PanelUI-customize:hover:active,
547 #PanelUI-help:not([disabled]):hover:active,
548 #PanelUI-quit:not([disabled]):hover:active {
549 -moz-image-region: rect(0, 32px, 16px, 16px);
552 #PanelUI-help[disabled],
553 #PanelUI-quit[disabled] {
554 -moz-image-region: rect(0, 48px, 16px, 32px);
557 #PanelUI-fxa-status:not([disabled]):hover,
558 #PanelUI-help:not([disabled]):hover,
559 #PanelUI-customize:hover,
560 #PanelUI-quit:not([disabled]):hover {
563 #PanelUI-fxa-status:not([disabled]):hover:active,
564 #PanelUI-help:not([disabled]):hover:active,
565 #PanelUI-customize:hover:active,
566 #PanelUI-quit:not([disabled]):hover:active {
569 #PanelUI-fxa-status:not([disabled]):hover,
570 #PanelUI-fxa-status:not([disabled]):hover:active {
573 #PanelUI-quit:not([disabled]):hover {
574 background-color: #FF0000;
577 #PanelUI-quit:not([disabled]):hover:active {
578 background-color: #FF9F00;
581 #customization-panelHolder #PanelUI-customize {
583 background-color: #008484;
588 #customization-panelHolder #PanelUI-customize + toolbarseparator {
592 #customization-panelHolder #PanelUI-customize:hover,
593 #customization-panelHolder #PanelUI-customize:hover:active {
594 background-color: #FFCF00;
598 #customization-palette .toolbarbutton-multiline-text,
599 #customization-palette .toolbarbutton-text {
603 panelview .toolbarbutton-1,
605 .widget-overflow-list .toolbarbutton-1,
606 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
607 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
609 background-color: hsla(210,4%,10%,0);
612 border-color: hsla(210,4%,10%,0);*/
615 panelview .toolbarbutton-1,
617 .widget-overflow-list .toolbarbutton-1,
618 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
622 .subviewbutton.panel-subview-footer {
623 /* border-radius: 0; */
627 .subviewbutton.panel-subview-footer > .menu-text {
628 -moz-margin-start: 0px !important;
629 -moz-padding-start: 6px;
630 -moz-padding-end: 6px;
635 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
639 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
644 .subviewbutton.panel-subview-footer > .menu-accel-container {
645 -moz-padding-start: 6px;
648 .subviewbutton:not(.panel-subview-footer) {
652 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
653 /* Bookmark items need a more specific selector. */
654 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
655 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
659 .PanelUI-subView .subviewbutton[shortcut]::after {
660 content: attr(shortcut);
665 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
666 -moz-margin-start: 10px;
669 /* This is a <label> but it should fit in with the menu font- and colorwise. */
670 #PanelUI-characterEncodingView-autodetect-label {
675 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
680 panelview .toolbarbutton-1,
681 .widget-overflow-list .toolbarbutton-1 {
686 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
687 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
688 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
689 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
690 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
691 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
692 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
693 background-color: hsla(210,4%,10%,.08);
694 border-color: hsla(210,4%,10%,.11);
697 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
698 border-color: hsla(210,4%,10%,.11);
701 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
702 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
703 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
704 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
705 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
706 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
707 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
708 background-color: hsla(210,4%,10%,.12);
709 border-color: hsla(210,4%,10%,.14);
710 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
713 .subviewbutton.panel-subview-footer {
714 margin: 4px -4px -4px;
715 background-color: hsla(210,4%,10%,.07);
716 border-top: 1px solid hsla(210,4%,10%,.12);
721 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
722 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
723 background-color: hsla(210,4%,10%,.1);
724 border-top: 1px solid hsla(210,4%,10%,.12);
727 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
728 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
729 background-color: hsla(210,4%,10%,.15);
730 border-top: 1px solid hsla(210,4%,10%,.12);
731 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
734 #BMB_bookmarksPopup .subviewbutton {
739 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
743 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
744 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
745 -moz-appearance: none;
750 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
751 #BMB_bookmarksPopup arrowscrollbox {
755 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
756 / Hide bottom separator as the styled footer includes a top border serving the same purpose.
757 * We can't just use display: none here, otherwise scrollbox.xml will flip out and sometimes
758 * refuse to scroll for us (see bug 984156). Instead, we set it to visibility hidden, force
759 * a minimum height, and then negative-margin that single pixel into oblivion. That seems
760 * to be enough to make scrollbox happy.
762 -moz-appearance: none;
769 / Popups with only one item don't have a footer /
770 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
771 / These popups never have a footer /
772 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
773 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
774 / And so they need some bottom padding: /
778 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
779 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
784 .PanelUI-subView menuseparator,
785 .PanelUI-subView toolbarseparator,
786 .cui-widget-panelview menuseparator {
787 -moz-appearance: none;
789 border-top: 1px solid #9C9CFF;
794 .PanelUI-subView menuseparator,
795 .PanelUI-subView toolbarseparator {
796 /* -moz-margin-start: -5px;
797 -moz-margin-end: -4px;*/
800 .PanelUI-subView menuseparator.small-separator,
801 .PanelUI-subView toolbarseparator.small-separator {
806 .cui-widget-panelview menuseparator.small-separator {
807 /* margin-left: 10px;
808 margin-right: 10px;*/
811 .subviewbutton > .menu-accel-container {
812 -moz-box-pack: start;
813 -moz-margin-start: 10px;
814 -moz-margin-end: auto;
818 #PanelUI-historyItems > toolbarbutton {
819 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
822 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
823 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
824 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
829 toolbarbutton[panel-multiview-anchor="true"],
830 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
832 background-color: #008484;
835 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
839 #PanelUI-help[panel-multiview-anchor="true"] {
840 background-image: none;
843 #PanelUI-help[panel-multiview-anchor="true"]::after {
849 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
850 background-repeat: no-repeat;
851 background-color: #008484;
852 background-position: left 10px center, 0; /* this doesn't need to be changed for RTL */
855 toolbarbutton[panel-multiview-anchor="true"] {
856 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
857 background-position: right 5px center;
858 background-repeat: no-repeat;
861 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
862 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
863 background-position: left 5px center;
866 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
867 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
871 #search-container[cui-areatype="menu-panel"],
872 #wrapper-search-container[place="panel"] {
876 #search-container[cui-areatype="menu-panel"] {
881 toolbarpaletteitem[place="palette"] > #search-container {
886 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
888 transition-property: background-color, border-color;
889 transition-duration: 150ms;
892 /* Make direct siblings overlap borders: */
893 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
894 /* border-top-color: transparent !important; */
897 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
898 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
899 /* margin-top: -1px; */
902 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
907 min-width: calc(22.35em / 3 - 0.1px);
908 max-width: calc(22.35em / 3 - 0.1px);
909 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
910 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
911 height: calc(2.2em + 4px);
913 -moz-box-orient: horizontal;
916 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
917 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
918 /* reduce the width with 2px for this button to compensate for two separators
920 min-width: calc(22.35em / 3 - 0.1px - 2px);
921 max-width: calc(22.35em / 3 - 0.1px - 2px);
924 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
928 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
932 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
933 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
934 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
935 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
936 border-top-right-radius: 0;
937 border-bottom-right-radius: 0;
940 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
941 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
942 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
943 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
944 border-top-left-radius: 0;
945 border-bottom-left-radius: 0;
948 .toolbaritem-combined-buttons > separator {
949 -moz-appearance: none;
951 -moz-box-align: stretch;
954 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
958 /* background: hsla(210,4%,10%,.15);*/
959 transition-property: margin;
960 transition-duration: 10ms;
961 transition-timing-function: ease;
964 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
968 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
972 .cui-widget-panelview,
973 #widget-overflow-scroller {
978 #widget-overflow-scroller {
984 #widget-overflow-list {
990 toolbaritem[overflowedItem=true],
991 toolbarbutton[overflowedItem=true] {
995 background-repeat: no-repeat;
996 background-position: 0 center;
999 .widget-overflow-list .toolbarbutton-1,
1000 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1001 -moz-box-align: center;
1002 -moz-box-orient: horizontal;
1005 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1006 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1008 -moz-padding-start: .5em;
1011 #widget-overflow-list > .toolbaritem-combined-buttons {
1015 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1020 -moz-margin-end: -1px;
1023 .subviewbutton[checked="true"] {
1024 background-image: url("chrome://global/skin/menu/menu-check.gif");
1025 background-position: top 5px left 4px;
1026 background-repeat: no-repeat;
1029 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1030 background-position: top 5px right 4px;
1033 .subviewbutton[checked="true"]:hover {
1034 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1037 .subbiewbutton > .menu-iconic-left {
1038 -moz-margin-end: 3px;
1041 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1045 /* === END panelUIOverlay.inc.css === */
1047 #PanelUI-contents #zoom-out-btn {
1049 padding-right: 12px;
1052 #PanelUI-contents #zoom-in-btn {
1054 padding-right: 12px;
1057 /* bookmark panel submenus */
1059 #BMB_bookmarksPopup menupopup[placespopup=true] {
1060 /* background: transparent;
1065 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1066 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1067 /* background: #FFF;
1068 border: 1px solid rgba(0,0,0,0.25);
1069 border-radius: 3.5px;
1073 #BMB_bookmarksPopup menupopup {
1074 /* padding-top: 2px;*/
1077 /* Add some space at the top because there are no headers: */
1078 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1079 /* padding-top: 4px;*/
1082 #BMB_bookmarksPopup .menu-text {
1086 /* bookmark panel separator */
1087 #BMB_bookmarksPopup menuseparator {
1092 .subviewbutton > .menu-right,
1093 .subviewbutton > .menu-iconic-left {
1094 /* padding-top: 1px;
1096 margin-bottom: 2px;*/
1099 /* Disabled empty item looks too small otherwise, because it has no icon. */
1100 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1101 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1102 menuitem[type="checkbox"].subviewbutton {
1103 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1104 * 2px for its border, see above */
1105 /* min-height: 22px;*/
1108 .subviewbutton > .toolbarbutton-text {
1109 /* padding-top: 3px;
1110 padding-bottom: 3px;*/
1113 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1114 -moz-appearance: none;
1116 -moz-margin-start: 3px;
1119 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1121 -moz-padding-start: 0;
1125 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1129 .subviewbutton > .toolbarbutton-text {
1130 -moz-padding-start: 16px;
1133 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1134 -moz-padding-start: 0;
1137 .subviewbutton.bookmark-item > .toolbarbutton-icon {
1138 -moz-margin-start: 3px;
1141 /* subviewbutton entries for social sidebars have images that come from external
1142 /* sources, and are not guaranteed to be the size we want, so force the size on
1144 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1149 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1153 menu.subviewbutton > .menu-right {
1154 list-style-image: url("chrome://global/skin/menu/menu-arrow.gif");
1156 menu.subviewbutton:hover > .menu-right,
1157 menu.subviewbutton[_moz-menuactive="true"] > .menu-right {
1158 list-style-image: url("chrome://global/skin/menu/menu-arrow-hover.gif");
1160 menu[disabled="true"].subviewbutton > .menu-right {
1161 list-style-image: url("chrome://global/skin/menu/menu-arrow-disabled.gif");