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 transition: transform 1s ease-out;
19 animation: whimsyMoveX 3.05s linear 0s infinite alternate,
20 whimsyMoveY 3.4s linear 0s infinite alternate;
23 #PanelUI-popup #PanelUI-contents:active:empty::before {
24 animation: whimsyMoveX 3.05s linear 0s infinite alternate,
25 whimsyMoveY 3.4s linear 0s infinite alternate,
26 whimsyRotate 1s linear 0s infinite normal;
29 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before {
30 animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
31 whimsyMoveY 3.4s linear 0s infinite alternate;
34 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):active:empty::before {
35 animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
36 whimsyMoveY 3.4s linear 0s infinite alternate,
37 whimsyRotate 1s linear 0s infinite normal;
40 #PanelUI-popup #PanelUI-contents:empty:hover::before {
41 background-image: url("chrome://browser/skin/customizableui/whimsy.png");
44 @media (min-resolution: 2dppx) {
45 #PanelUI-popup #PanelUI-contents:empty::before {
46 background-image: url("chrome://browser/skin/customizableui/whimsy-bw@2x.png");
47 background-size: 64px 64px;
49 #PanelUI-popup #PanelUI-contents:empty:hover::before {
50 background-image: url("chrome://browser/skin/customizableui/whimsy@2x.png");
54 @keyframes whimsyMoveX {
55 /* These values are adjusted for the padding on the panel. */
56 from { margin-left: -9px; } to { margin-left: calc(100% - 55px); }
59 @keyframes whimsyMoveXRTL {
60 /* These values are adjusted for the padding on the panel. */
61 from { margin-right: -9px; } to { margin-right: calc(100% - 55px); }
64 @keyframes whimsyMoveY {
65 /* These values are adjusted for the padding and height of the panel. */
66 from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
69 @keyframes whimsyRotate {
70 to { transform: perspective(5000px) rotateY(360deg); }
73 #customization-panelHolder {
78 -moz-margin-start: 3px;
81 #PanelUI-button:-moz-locale-dir(rtl) {
86 background-color: #000000;
87 -moz-margin-start: 38px;
90 .panel-viewstack[viewtype="main"] > .panel-subviews {
91 transform: translateX(22.35em);
94 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
95 transform: translateX(-22.35em);
98 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
102 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
106 .panel-subview-body {
112 #PanelUI-popup .panel-subview-body {
117 .panel-subview-header,
118 .subviewbutton.panel-subview-footer {
122 .panel-subview-header {
124 background-color: #A09090;
129 .panel-subview-footer {
130 border-top: 1px solid #A09090;
133 .cui-widget-panelview .panel-subview-header {
137 .cui-widget-panelview .subviewbutton.panel-subview-footer {
139 -moz-box-pack: center;
144 flex-direction: column;
148 #app-extension-point-end > #PanelUI-menu-button {
151 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
154 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
158 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
161 #PanelUI-popup > arrowscrollbox > scrollbox {
165 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
174 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
175 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
176 /* line-height: 1.1;*/
180 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
181 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
185 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
186 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
188 clip: rect(auto, auto, 2.3em, auto);
191 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
192 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
194 /* Need to override toolkit theming which sets margin: 0 !important; */
195 margin: 2px 0 0 !important;
198 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
203 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
204 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
205 -moz-margin-start: 0;
213 .panel-mainview:not([panelid="PanelUI-popup"]) {
217 panelview:not([mainview]) .toolbarbutton-text,
218 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
223 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
227 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
231 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
232 border-radius: 4px 4px 0 0;
235 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
236 border-radius: 0 0 4px 4px;
247 #PanelUI-contents-scroller {
254 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
260 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
261 .panelUI-grid .toolbarbutton-1,
262 .panel-customization-placeholder-child {
263 -moz-appearance: none;
264 -moz-box-orient: vertical;
265 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
266 height: calc(51px + 2.2em);
269 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
270 * should have a min-width set so they abide by the width set above (which they do outside of
271 * customize mode because they're in a flexed container) */
272 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
276 /* Help SDK buttons fit in. */
277 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
278 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
283 .customization-palette .toolbarbutton-1 {
284 -moz-appearance: none;
285 -moz-box-orient: vertical;
288 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
289 -moz-appearance: none;
290 -moz-box-orient: vertical;
291 width: calc(22.35em / 3 - 0.1px - 2px);
292 height: calc(49px + 2.2em);
296 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
297 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
298 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
301 .panel-customization-placeholder-child {
303 /* padding: 2px 6px;*/
306 .panelUI-grid .toolbarbutton-1[type="menu"] {
307 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
308 background-position: right 3px top 16px;
309 background-repeat: no-repeat;
312 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
313 background-position: left 3px top 16px;
316 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
320 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
321 -moz-box-align: center;
323 -moz-margin-start: -16px;
325 margin-bottom: 2.2em;
329 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
330 border-radius: 0 0 0 2px;
333 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
334 border-radius: 0 0 2px 0;
337 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
341 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
342 width: calc(22.35em / 3 - 0.1px);
343 margin: 0 !important;
346 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
347 -moz-box-align: center;
348 -moz-box-pack: center;
351 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
355 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
358 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
359 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
360 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
361 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
362 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
363 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
368 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
369 * which was affecting subview display. Because of this, we're hiding the iframe *only*
370 * when displaying a subview. The discerning user might notice this, but it's not nearly
371 * as bad as the brokenness.
372 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
375 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
379 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
383 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
384 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
385 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
386 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
387 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
388 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container,
389 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
390 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
391 .panel-customization-placeholder-child > .toolbarbutton-icon {
394 /* Explanation for the below formula (A / B - C)
396 Each button is 22.35em / 3 - 0.1px wide
398 Each button has two margins.
400 The button icon is 32 pixels wide.
401 The button has 12px of horizontal padding (6 on each side).
402 The button has 0px of horizontal border (0 on each side).
403 Total width of button's icon + button padding should therefore be 44px,
404 which means each horizontal margin should be the half the button's width - (44/2) px.
406 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
409 /* above we treat the container as the icon for the margins, that is so the
410 /* badge itself is positioned correctly. Here we make sure that the icon itself
411 /* has the minum size we want, but no padding/margin. */
412 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
419 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
423 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
427 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
428 -moz-margin-end: 2px;
431 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
432 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
438 #zoom-in-button > .toolbarbutton-text,
439 #zoom-out-button > .toolbarbutton-text,
440 #zoom-reset-button > .toolbarbutton-icon {
447 flex-direction: column;
448 /* background-color: hsla(210,4%,10%,.07);*/
451 /* min-height: 4em;*/
452 border-bottom-right-radius: 4px;
453 border-bottom-left-radius: 4px;
456 #PanelUI-footer-inner {
458 border-top: 1px solid #9C9CFF;
461 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
465 #PanelUI-footer-inner > toolbarseparator {
467 border-left: 1px solid #9C9CFF;
471 #PanelUI-footer-inner:hover > toolbarseparator {
485 transition: background-color;
486 -moz-box-orient: horizontal;
489 #PanelUI-fxa-status {
490 border-top: 1px solid #9C9CFF;
491 border-bottom: 1px solid transparent;
495 #PanelUI-fxa-status > .toolbarbutton-text {
496 width: 0; /* Fancy cropping solution for flexbox. */
499 #PanelUI-help[panel-multiview-anchor="true"] {
500 -moz-image-region: rect(0, 32px, 16px, 16px);
508 #PanelUI-fxa-status > .toolbarbutton-text,
509 #PanelUI-customize > .toolbarbutton-text {
515 #PanelUI-help > .toolbarbutton-text,
516 #PanelUI-quit > .toolbarbutton-text {
520 #PanelUI-help > .toolbarbutton-icon,
521 #PanelUI-quit > .toolbarbutton-icon {
527 -moz-padding-start: 15px;
528 -moz-border-start-style: none;
531 #PanelUI-fxa-status {
532 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
535 #PanelUI-fxa-status[status="active"] {
536 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
540 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
543 #customization-panelHolder #PanelUI-customize {
544 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
548 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
552 -moz-border-end-style: none;
553 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
560 -moz-image-region: rect(0, 16px, 16px, 0);
563 #PanelUI-customize:hover,
564 #PanelUI-help:not([disabled]):hover,
565 #PanelUI-quit:not([disabled]):hover,
566 #PanelUI-customize:hover:active,
567 #PanelUI-help:not([disabled]):hover:active,
568 #PanelUI-quit:not([disabled]):hover:active {
569 -moz-image-region: rect(0, 32px, 16px, 16px);
572 #PanelUI-help[disabled],
573 #PanelUI-quit[disabled] {
574 -moz-image-region: rect(0, 48px, 16px, 32px);
577 #PanelUI-fxa-status:not([disabled]):hover,
578 #PanelUI-help:not([disabled]):hover,
579 #PanelUI-customize:hover,
580 #PanelUI-quit:not([disabled]):hover {
583 #PanelUI-fxa-status:not([disabled]):hover:active,
584 #PanelUI-help:not([disabled]):hover:active,
585 #PanelUI-customize:hover:active,
586 #PanelUI-quit:not([disabled]):hover:active {
589 #PanelUI-fxa-status:not([disabled]):hover,
590 #PanelUI-fxa-status:not([disabled]):hover:active {
593 #PanelUI-quit:not([disabled]):hover {
594 background-color: #FF0000;
597 #PanelUI-quit:not([disabled]):hover:active {
598 background-color: #FF9F00;
601 #customization-panelHolder #PanelUI-customize {
603 background-color: #008484;
608 #customization-panelHolder #PanelUI-customize + toolbarseparator {
612 #customization-panelHolder #PanelUI-customize:hover,
613 #customization-panelHolder #PanelUI-customize:hover:active {
614 background-color: #FFCF00;
618 #customization-palette .toolbarbutton-multiline-text,
619 #customization-palette .toolbarbutton-text {
623 panelview .toolbarbutton-1,
625 .widget-overflow-list .toolbarbutton-1,
626 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
627 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
629 background-color: hsla(210,4%,10%,0);
632 border-color: hsla(210,4%,10%,0);*/
635 panelview .toolbarbutton-1,
637 .widget-overflow-list .toolbarbutton-1,
638 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
642 .subviewbutton.panel-subview-footer {
643 /* border-radius: 0; */
647 .subviewbutton.panel-subview-footer > .menu-text {
648 -moz-margin-start: 0px !important;
649 -moz-padding-start: 6px;
650 -moz-padding-end: 6px;
655 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
659 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
664 .subviewbutton.panel-subview-footer > .menu-accel-container {
665 -moz-padding-start: 6px;
668 .subviewbutton:not(.panel-subview-footer) {
672 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
673 /* Bookmark items need a more specific selector. */
674 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
675 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
679 .PanelUI-subView .subviewbutton[shortcut]::after {
680 content: attr(shortcut);
685 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
686 -moz-margin-start: 10px;
689 /* This is a <label> but it should fit in with the menu font- and colorwise. */
690 #PanelUI-characterEncodingView-autodetect-label {
695 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
700 panelview .toolbarbutton-1,
701 .widget-overflow-list .toolbarbutton-1 {
706 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
707 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
708 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
709 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
710 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
711 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
712 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
713 background-color: hsla(210,4%,10%,.08);
714 border-color: hsla(210,4%,10%,.11);
717 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
718 border-color: hsla(210,4%,10%,.11);
721 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
722 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
723 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
724 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
725 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
726 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
727 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
728 background-color: hsla(210,4%,10%,.12);
729 border-color: hsla(210,4%,10%,.14);
730 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
733 .subviewbutton.panel-subview-footer {
734 margin: 4px -4px -4px;
735 background-color: hsla(210,4%,10%,.07);
736 border-top: 1px solid hsla(210,4%,10%,.12);
741 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
742 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
743 background-color: hsla(210,4%,10%,.1);
744 border-top: 1px solid hsla(210,4%,10%,.12);
747 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
748 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
749 background-color: hsla(210,4%,10%,.15);
750 border-top: 1px solid hsla(210,4%,10%,.12);
751 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
754 #BMB_bookmarksPopup .subviewbutton {
759 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
763 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
764 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
765 -moz-appearance: none;
770 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
771 #BMB_bookmarksPopup arrowscrollbox {
775 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
776 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
780 / Popups with only one item don't have a footer /
781 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
782 / These popups never have a footer /
783 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
784 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
785 / And so they need some bottom padding: /
789 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
790 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
795 .PanelUI-subView menuseparator,
796 .PanelUI-subView toolbarseparator,
797 .cui-widget-panelview menuseparator {
798 -moz-appearance: none;
800 border-top: 1px solid #9C9CFF;
805 .PanelUI-subView menuseparator,
806 .PanelUI-subView toolbarseparator {
807 /* -moz-margin-start: -5px;
808 -moz-margin-end: -4px;*/
811 .PanelUI-subView menuseparator.small-separator,
812 .PanelUI-subView toolbarseparator.small-separator {
817 .cui-widget-panelview menuseparator.small-separator {
818 /* margin-left: 10px;
819 margin-right: 10px;*/
822 .subviewbutton > .menu-accel-container {
823 -moz-box-pack: start;
824 -moz-margin-start: 10px;
825 -moz-margin-end: auto;
829 #PanelUI-historyItems > toolbarbutton {
830 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
833 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
834 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
835 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
840 toolbarbutton[panel-multiview-anchor="true"],
841 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
843 background-color: #008484;
846 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
850 #PanelUI-help[panel-multiview-anchor="true"] {
851 background-image: none;
854 #PanelUI-help[panel-multiview-anchor="true"]::after {
860 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
861 background-repeat: no-repeat;
862 background-color: #008484;
863 background-position: left 10px center, 0; /* this doesn't need to be changed for RTL */
866 toolbarbutton[panel-multiview-anchor="true"] {
867 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
868 background-position: right 5px center;
869 background-repeat: no-repeat;
872 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
873 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
874 background-position: left 5px center;
877 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
878 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
882 #search-container[cui-areatype="menu-panel"],
883 #wrapper-search-container[place="panel"] {
887 #search-container[cui-areatype="menu-panel"] {
892 toolbarpaletteitem[place="palette"] > #search-container {
897 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
899 transition-property: background-color, border-color;
900 transition-duration: 150ms;
903 /* Make direct siblings overlap borders: */
904 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
905 /* border-top-color: transparent !important; */
908 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
909 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
910 /* margin-top: -1px; */
913 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
918 min-width: calc(22.35em / 3 - 0.1px);
919 max-width: calc(22.35em / 3 - 0.1px);
920 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
921 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
922 height: calc(2.2em + 4px);
924 -moz-box-orient: horizontal;
927 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
928 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
929 /* reduce the width with 2px for this button to compensate for two separators
931 min-width: calc(22.35em / 3 - 0.1px - 2px);
932 max-width: calc(22.35em / 3 - 0.1px - 2px);
935 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
939 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
943 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
944 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
945 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
946 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
947 border-top-right-radius: 0;
948 border-bottom-right-radius: 0;
951 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
952 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
953 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
954 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
955 border-top-left-radius: 0;
956 border-bottom-left-radius: 0;
959 .toolbaritem-combined-buttons > separator {
960 -moz-appearance: none;
962 -moz-box-align: stretch;
965 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
969 /* background: hsla(210,4%,10%,.15);*/
970 transition-property: margin;
971 transition-duration: 10ms;
972 transition-timing-function: ease;
975 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
979 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
983 .cui-widget-panelview,
984 #widget-overflow-scroller {
989 #widget-overflow-scroller {
995 #widget-overflow-list {
1001 toolbaritem[overflowedItem=true],
1002 toolbarbutton[overflowedItem=true] {
1006 background-repeat: no-repeat;
1007 background-position: 0 center;
1010 .widget-overflow-list .toolbarbutton-1,
1011 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1012 -moz-box-align: center;
1013 -moz-box-orient: horizontal;
1016 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1017 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1019 -moz-padding-start: .5em;
1022 #widget-overflow-list > .toolbaritem-combined-buttons {
1026 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1031 -moz-margin-end: -1px;
1034 .subviewbutton[checked="true"] {
1035 background-image: url("chrome://global/skin/menu/menu-check.gif");
1036 background-position: top 5px left 4px;
1037 background-repeat: no-repeat;
1040 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1041 background-position: top 5px right 4px;
1044 .subviewbutton[checked="true"]:hover {
1045 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1048 .subbiewbutton > .menu-iconic-left {
1049 -moz-margin-end: 3px;
1052 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1056 /* === END panelUIOverlay.inc.css === */
1058 #PanelUI-contents #zoom-out-btn {
1060 padding-right: 12px;
1063 #PanelUI-contents #zoom-in-btn {
1065 padding-right: 12px;
1068 /* bookmark panel submenus */
1070 #BMB_bookmarksPopup menupopup[placespopup=true] {
1071 /* background: transparent;
1076 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1077 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1078 /* background: #FFF;
1079 border: 1px solid rgba(0,0,0,0.25);
1080 border-radius: 3.5px;
1084 #BMB_bookmarksPopup menupopup {
1085 /* padding-top: 2px;*/
1088 /* Add some space at the top because there are no headers: */
1089 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1090 /* padding-top: 4px;*/
1093 #BMB_bookmarksPopup .menu-text {
1097 /* bookmark panel separator */
1098 #BMB_bookmarksPopup menuseparator {
1103 .subviewbutton > .menu-right,
1104 .subviewbutton > .menu-iconic-left {
1105 /* padding-top: 1px;
1107 margin-bottom: 2px;*/
1110 /* Disabled empty item looks too small otherwise, because it has no icon. */
1111 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1112 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1113 menuitem[type="checkbox"].subviewbutton {
1114 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1115 * 2px for its border, see above */
1116 /* min-height: 22px;*/
1119 .subviewbutton > .toolbarbutton-text {
1120 /* padding-top: 3px;
1121 padding-bottom: 3px;*/
1124 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1125 -moz-appearance: none;
1127 -moz-margin-start: 3px;
1130 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1132 -moz-padding-start: 0;
1136 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1140 .subviewbutton > .toolbarbutton-text {
1141 -moz-padding-start: 16px;
1144 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1145 -moz-padding-start: 0;
1148 .subviewbutton.bookmark-item > .toolbarbutton-icon {
1149 -moz-margin-start: 3px;
1152 /* subviewbutton entries for social sidebars have images that come from external
1153 /* sources, and are not guaranteed to be the size we want, so force the size on
1155 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1160 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1164 menu.subviewbutton > .menu-right {
1165 list-style-image: url("chrome://global/skin/menu/menu-arrow.gif");
1167 menu.subviewbutton:hover > .menu-right,
1168 menu.subviewbutton[_moz-menuactive="true"] > .menu-right {
1169 list-style-image: url("chrome://global/skin/menu/menu-arrow-hover.gif");
1171 menu[disabled="true"].subviewbutton > .menu-right {
1172 list-style-image: url("chrome://global/skin/menu/menu-arrow-disabled.gif");