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: -9px; } to { margin-left: calc(100% - 55px); }
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 {
148 /* line-height: 1.1;*/
152 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
153 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
157 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
158 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
160 clip: rect(auto, auto, 2.3em, auto);
163 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
164 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
166 /* Need to override toolkit theming which sets margin: 0 !important; */
167 margin: 2px 0 0 !important;
170 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
175 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
176 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
177 -moz-margin-start: 0;
185 .panel-mainview:not([panelid="PanelUI-popup"]) {
189 panelview:not([mainview]) .toolbarbutton-text,
190 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
195 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
199 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
203 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
204 border-radius: 4px 4px 0 0;
207 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
208 border-radius: 0 0 4px 4px;
219 #PanelUI-contents-scroller {
226 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
232 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
233 .panelUI-grid .toolbarbutton-1,
234 .panel-customization-placeholder-child {
235 -moz-appearance: none;
236 -moz-box-orient: vertical;
237 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
238 height: calc(51px + 2.2em);
241 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
242 * should have a min-width set so they abide by the width set above (which they do outside of
243 * customize mode because they're in a flexed container) */
244 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
248 /* Help SDK buttons fit in. */
249 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
250 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
255 .customization-palette .toolbarbutton-1 {
256 -moz-appearance: none;
257 -moz-box-orient: vertical;
260 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
261 -moz-appearance: none;
262 -moz-box-orient: vertical;
263 width: calc(22.35em / 3 - 0.1px - 2px);
264 height: calc(49px + 2.2em);
268 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
269 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
270 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
273 .panel-customization-placeholder-child {
275 /* padding: 2px 6px;*/
278 .panelUI-grid .toolbarbutton-1[type="menu"] {
279 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
280 background-position: right 3px top 16px;
281 background-repeat: no-repeat;
284 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
285 background-position: left 3px top 16px;
288 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
292 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
293 -moz-box-align: center;
295 -moz-margin-start: -16px;
297 margin-bottom: 2.2em;
301 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
302 border-radius: 0 0 0 2px;
305 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
306 border-radius: 0 0 2px 0;
309 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
313 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
314 width: calc(22.35em / 3 - 0.1px);
315 margin: 0 !important;
318 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
319 -moz-box-align: center;
320 -moz-box-pack: center;
323 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
327 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
330 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
331 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
332 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
333 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
334 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
335 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
340 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
341 * which was affecting subview display. Because of this, we're hiding the iframe *only*
342 * when displaying a subview. The discerning user might notice this, but it's not nearly
343 * as bad as the brokenness.
344 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
347 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
351 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
355 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
356 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
357 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
358 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
359 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
360 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
361 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
362 .panel-customization-placeholder-child > .toolbarbutton-icon {
365 /* Explanation for the below formula (A / B - C)
367 Each button is 22.35em / 3 - 0.1px wide
369 Each button has two margins.
371 The button icon is 32 pixels wide.
372 The button has 12px of horizontal padding (6 on each side).
373 The button has 0px of horizontal border (0 on each side).
374 Total width of button's icon + button padding should therefore be 44px,
375 which means each horizontal margin should be the half the button's width - (44/2) px.
377 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
380 /* above we treat the container as the icon for the margins, that is so the
381 /* badge itself is positioned correctly. Here we make sure that the icon itself
382 /* has the minum size we want, but no padding/margin. */
383 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
390 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
394 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
398 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
399 -moz-margin-end: 2px;
402 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
403 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
409 #zoom-in-button > .toolbarbutton-text,
410 #zoom-out-button > .toolbarbutton-text,
411 #zoom-reset-button > .toolbarbutton-icon {
418 flex-direction: column;
419 /* background-color: hsla(210,4%,10%,.07);*/
422 /* min-height: 4em;*/
423 border-bottom-right-radius: 4px;
424 border-bottom-left-radius: 4px;
427 #PanelUI-footer-inner {
429 border-top: 1px solid #9C9CFF;
432 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
436 #PanelUI-footer-inner > toolbarseparator {
438 border-left: 1px solid #9C9CFF;
442 #PanelUI-footer-inner:hover > toolbarseparator {
456 transition: background-color;
457 -moz-box-orient: horizontal;
460 #PanelUI-fxa-status {
461 border-top: 1px solid #9C9CFF;
462 border-bottom: 1px solid transparent;
466 #PanelUI-fxa-status > .toolbarbutton-text {
467 width: 0; /* Fancy cropping solution for flexbox. */
470 #PanelUI-help[panel-multiview-anchor="true"] {
471 -moz-image-region: rect(0, 32px, 16px, 16px);
479 #PanelUI-fxa-status > .toolbarbutton-text,
480 #PanelUI-customize > .toolbarbutton-text {
486 #PanelUI-help > .toolbarbutton-text,
487 #PanelUI-quit > .toolbarbutton-text {
491 #PanelUI-help > .toolbarbutton-icon,
492 #PanelUI-quit > .toolbarbutton-icon {
498 -moz-padding-start: 15px;
499 -moz-border-start-style: none;
502 #PanelUI-fxa-status {
503 list-style-image: url("chrome://browser/skin/sync-horizontalbar.png");
506 #PanelUI-fxa-status[status="active"] {
507 list-style-image: url("chrome://browser/skin/syncProgress-horizontalbar.png");
511 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
514 #customization-panelHolder #PanelUI-customize {
515 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
519 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
523 -moz-border-end-style: none;
524 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
531 -moz-image-region: rect(0, 16px, 16px, 0);
534 #PanelUI-customize:hover,
535 #PanelUI-help:not([disabled]):hover,
536 #PanelUI-quit:not([disabled]):hover,
537 #PanelUI-customize:hover:active,
538 #PanelUI-help:not([disabled]):hover:active,
539 #PanelUI-quit:not([disabled]):hover:active {
540 -moz-image-region: rect(0, 32px, 16px, 16px);
543 #PanelUI-help[disabled],
544 #PanelUI-quit[disabled] {
545 -moz-image-region: rect(0, 48px, 16px, 32px);
548 #PanelUI-fxa-status:not([disabled]):hover,
549 #PanelUI-help:not([disabled]):hover,
550 #PanelUI-customize:hover,
551 #PanelUI-quit:not([disabled]):hover {
554 #PanelUI-fxa-status:not([disabled]):hover:active,
555 #PanelUI-help:not([disabled]):hover:active,
556 #PanelUI-customize:hover:active,
557 #PanelUI-quit:not([disabled]):hover:active {
560 #PanelUI-fxa-status:not([disabled]):hover,
561 #PanelUI-fxa-status:not([disabled]):hover:active {
564 #PanelUI-quit:not([disabled]):hover {
565 background-color: #FF0000;
568 #PanelUI-quit:not([disabled]):hover:active {
569 background-color: #FF9F00;
572 #customization-panelHolder #PanelUI-customize {
574 background-color: #008484;
579 #customization-panelHolder #PanelUI-customize + toolbarseparator {
583 #customization-panelHolder #PanelUI-customize:hover,
584 #customization-panelHolder #PanelUI-customize:hover:active {
585 background-color: #FFCF00;
589 #customization-palette .toolbarbutton-multiline-text,
590 #customization-palette .toolbarbutton-text {
594 panelview .toolbarbutton-1,
596 .widget-overflow-list .toolbarbutton-1,
597 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
598 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
600 background-color: hsla(210,4%,10%,0);
603 border-color: hsla(210,4%,10%,0);*/
606 panelview .toolbarbutton-1,
608 .widget-overflow-list .toolbarbutton-1,
609 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
613 .subviewbutton.panel-subview-footer {
614 /* border-radius: 0; */
618 .subviewbutton.panel-subview-footer > .menu-text {
619 -moz-margin-start: 0px !important;
620 -moz-padding-start: 6px;
621 -moz-padding-end: 6px;
626 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
630 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
635 .subviewbutton.panel-subview-footer > .menu-accel-container {
636 -moz-padding-start: 6px;
639 .subviewbutton:not(.panel-subview-footer) {
643 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
644 /* Bookmark items need a more specific selector. */
645 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
646 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
650 .PanelUI-subView .subviewbutton[shortcut]::after {
651 content: attr(shortcut);
656 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
657 -moz-margin-start: 10px;
660 /* This is a <label> but it should fit in with the menu font- and colorwise. */
661 #PanelUI-characterEncodingView-autodetect-label {
666 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
671 panelview .toolbarbutton-1,
672 .widget-overflow-list .toolbarbutton-1 {
677 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
678 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
679 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
680 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
681 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
682 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
683 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
684 background-color: hsla(210,4%,10%,.08);
685 border-color: hsla(210,4%,10%,.11);
688 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
689 border-color: hsla(210,4%,10%,.11);
692 panelview .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
693 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
694 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
695 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
696 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
697 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
698 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
699 background-color: hsla(210,4%,10%,.12);
700 border-color: hsla(210,4%,10%,.14);
701 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
704 .subviewbutton.panel-subview-footer {
705 margin: 4px -4px -4px;
706 background-color: hsla(210,4%,10%,.07);
707 border-top: 1px solid hsla(210,4%,10%,.12);
712 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
713 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
714 background-color: hsla(210,4%,10%,.1);
715 border-top: 1px solid hsla(210,4%,10%,.12);
718 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
719 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
720 background-color: hsla(210,4%,10%,.15);
721 border-top: 1px solid hsla(210,4%,10%,.12);
722 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
725 #BMB_bookmarksPopup .subviewbutton {
730 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
734 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
735 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
736 -moz-appearance: none;
741 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
742 #BMB_bookmarksPopup arrowscrollbox {
746 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
747 / Hide bottom separator as the styled footer includes a top border serving the same purpose.
748 * We can't just use display: none here, otherwise scrollbox.xml will flip out and sometimes
749 * refuse to scroll for us (see bug 984156). Instead, we set it to visibility hidden, force
750 * a minimum height, and then negative-margin that single pixel into oblivion. That seems
751 * to be enough to make scrollbox happy.
753 -moz-appearance: none;
760 / Popups with only one item don't have a footer /
761 menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
762 / These popups never have a footer /
763 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
764 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
765 / And so they need some bottom padding: /
769 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
770 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
775 .PanelUI-subView menuseparator,
776 .PanelUI-subView toolbarseparator,
777 .cui-widget-panelview menuseparator {
778 -moz-appearance: none;
780 border-top: 1px solid #9C9CFF;
785 .PanelUI-subView menuseparator,
786 .PanelUI-subView toolbarseparator {
787 /* -moz-margin-start: -5px;
788 -moz-margin-end: -4px;*/
791 .PanelUI-subView menuseparator.small-separator,
792 .PanelUI-subView toolbarseparator.small-separator {
797 .cui-widget-panelview menuseparator.small-separator {
798 /* margin-left: 10px;
799 margin-right: 10px;*/
802 .subviewbutton > .menu-accel-container {
803 -moz-box-pack: start;
804 -moz-margin-start: 10px;
805 -moz-margin-end: auto;
809 #PanelUI-historyItems > toolbarbutton {
810 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
813 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
814 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
815 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
820 toolbarbutton[panel-multiview-anchor="true"],
821 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
823 background-color: #008484;
826 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
830 #PanelUI-help[panel-multiview-anchor="true"] {
831 background-image: none;
834 #PanelUI-help[panel-multiview-anchor="true"]::after {
840 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
841 background-repeat: no-repeat;
842 background-color: #008484;
843 background-position: left 10px center, 0; /* this doesn't need to be changed for RTL */
846 toolbarbutton[panel-multiview-anchor="true"] {
847 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
848 background-position: right 5px center;
849 background-repeat: no-repeat;
852 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
853 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
854 background-position: left 5px center;
857 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
858 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
862 #search-container[cui-areatype="menu-panel"],
863 #wrapper-search-container[place="panel"] {
867 #search-container[cui-areatype="menu-panel"] {
872 toolbarpaletteitem[place="palette"] > #search-container {
877 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
879 transition-property: background-color, border-color;
880 transition-duration: 150ms;
883 /* Make direct siblings overlap borders: */
884 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
885 /* border-top-color: transparent !important; */
888 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
889 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
890 /* margin-top: -1px; */
893 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
898 min-width: calc(22.35em / 3 - 0.1px);
899 max-width: calc(22.35em / 3 - 0.1px);
900 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
901 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
902 height: calc(2.2em + 4px);
904 -moz-box-orient: horizontal;
907 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
908 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
909 /* reduce the width with 2px for this button to compensate for two separators
911 min-width: calc(22.35em / 3 - 0.1px - 2px);
912 max-width: calc(22.35em / 3 - 0.1px - 2px);
915 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
919 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
923 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
924 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
925 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
926 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
927 border-top-right-radius: 0;
928 border-bottom-right-radius: 0;
931 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
932 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
933 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
934 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
935 border-top-left-radius: 0;
936 border-bottom-left-radius: 0;
939 .toolbaritem-combined-buttons > separator {
940 -moz-appearance: none;
942 -moz-box-align: stretch;
945 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
949 /* background: hsla(210,4%,10%,.15);*/
950 transition-property: margin;
951 transition-duration: 10ms;
952 transition-timing-function: ease;
955 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
959 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
963 .cui-widget-panelview,
964 #widget-overflow-scroller {
969 #widget-overflow-scroller {
975 #widget-overflow-list {
981 toolbaritem[overflowedItem=true],
982 toolbarbutton[overflowedItem=true] {
986 background-repeat: no-repeat;
987 background-position: 0 center;
990 .widget-overflow-list .toolbarbutton-1,
991 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
992 -moz-box-align: center;
993 -moz-box-orient: horizontal;
996 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
997 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
999 -moz-padding-start: .5em;
1002 #widget-overflow-list > .toolbaritem-combined-buttons {
1006 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1011 -moz-margin-end: -1px;
1014 .subviewbutton[checked="true"] {
1015 background-image: url("chrome://global/skin/menu/menu-check.gif");
1016 background-position: top 5px left 4px;
1017 background-repeat: no-repeat;
1020 .subviewbutton[checked="true"]:hover {
1021 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1024 .subbiewbutton > .menu-iconic-left {
1025 -moz-margin-end: 3px;
1028 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1032 /* === END panelUIOverlay.inc.css === */
1034 #PanelUI-contents #zoom-out-btn {
1036 padding-right: 12px;
1039 #PanelUI-contents #zoom-in-btn {
1041 padding-right: 12px;
1044 /* bookmark panel submenus */
1046 #BMB_bookmarksPopup menupopup[placespopup=true] {
1047 /* background: transparent;
1052 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1053 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1054 /* background: #FFF;
1055 border: 1px solid rgba(0,0,0,0.25);
1056 border-radius: 3.5px;
1060 #BMB_bookmarksPopup menupopup {
1061 /* padding-top: 2px;*/
1064 /* Add some space at the top because there are no headers: */
1065 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1066 /* padding-top: 4px;*/
1069 #BMB_bookmarksPopup .menu-text {
1073 /* bookmark panel separator */
1074 #BMB_bookmarksPopup menuseparator {
1079 .subviewbutton > .menu-right,
1080 .subviewbutton > .menu-iconic-left {
1081 /* padding-top: 1px;
1083 margin-bottom: 2px;*/
1086 /* Disabled empty item looks too small otherwise, because it has no icon. */
1087 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1088 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1089 menuitem[type="checkbox"].subviewbutton {
1090 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1091 * 2px for its border, see above */
1092 /* min-height: 22px;*/
1095 .subviewbutton > .toolbarbutton-text {
1096 /* padding-top: 3px;
1097 padding-bottom: 3px;*/
1100 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1101 -moz-appearance: none;
1103 -moz-margin-start: 3px;
1106 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1108 -moz-padding-start: 0;
1112 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1116 .subviewbutton > .toolbarbutton-text {
1117 -moz-padding-start: 16px;
1120 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1121 -moz-padding-start: 0;
1124 .subviewbutton.bookmark-item > .toolbarbutton-icon {
1125 -moz-margin-start: 3px;
1128 /* subviewbutton entries for social sidebars have images that come from external
1129 /* sources, and are not guaranteed to be the size we want, so force the size on
1131 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1136 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1140 menu.subviewbutton > .menu-right {
1141 list-style-image: url("chrome://global/skin/menu/menu-arrow.gif");
1143 menu.subviewbutton:hover > .menu-right,
1144 menu.subviewbutton[_moz-menuactive="true"] > .menu-right {
1145 list-style-image: url("chrome://global/skin/menu/menu-arrow-hover.gif");
1147 menu[disabled="true"].subviewbutton > .menu-right {
1148 list-style-image: url("chrome://global/skin/menu/menu-arrow-disabled.gif");