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 {
119 box-sizing: border-box;
120 /* min-height: 41px; */
124 .panel-subview-header {
126 background-color: #A09090;
131 .panel-subview-footer {
132 border-top: 1px solid #A09090;
135 .cui-widget-panelview .panel-subview-header {
139 .cui-widget-panelview .subviewbutton.panel-subview-footer {
141 -moz-box-pack: center;
146 flex-direction: column;
150 #app-extension-point-end > #PanelUI-menu-button {
153 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
156 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
160 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
163 #PanelUI-popup > arrowscrollbox > scrollbox {
167 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
176 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
177 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
178 /* line-height: 1.1;*/
182 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
183 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
187 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
188 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
190 clip: rect(auto, auto, 2.3em, auto);
193 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
194 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
196 /* Need to override toolkit theming which sets margin: 0 !important; */
197 margin: 2px 0 0 !important;
200 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
205 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
206 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
207 -moz-margin-start: 0;
215 .panel-mainview:not([panelid="PanelUI-popup"]) {
219 panelview:not([mainview]) .toolbarbutton-text,
220 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
225 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
229 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
233 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
234 border-radius: 4px 4px 0 0;
237 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
238 border-radius: 0 0 4px 4px;
249 #PanelUI-contents-scroller {
256 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
262 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
263 .panelUI-grid .toolbarbutton-1,
264 .panel-customization-placeholder-child {
265 -moz-appearance: none;
266 -moz-box-orient: vertical;
267 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
268 height: calc(51px + 2.2em);
271 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
272 * should have a min-width set so they abide by the width set above (which they do outside of
273 * customize mode because they're in a flexed container) */
274 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
278 /* Help SDK buttons fit in. */
279 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
280 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
285 .customization-palette .toolbarbutton-1 {
286 -moz-appearance: none;
287 -moz-box-orient: vertical;
290 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
291 -moz-appearance: none;
292 -moz-box-orient: vertical;
293 width: calc(22.35em / 3 - 0.1px - 2px);
294 height: calc(49px + 2.2em);
298 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
299 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
300 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
303 .panel-customization-placeholder-child {
305 /* padding: 2px 6px;*/
308 .panelUI-grid .toolbarbutton-1[type="menu"] {
309 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
310 background-position: right 3px top 16px;
311 background-repeat: no-repeat;
314 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
315 background-position: left 3px top 16px;
318 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
322 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
323 -moz-box-align: center;
325 -moz-margin-start: -16px;
327 margin-bottom: 2.2em;
331 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
332 border-radius: 0 0 0 2px;
335 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
336 border-radius: 0 0 2px 0;
339 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
343 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
344 width: calc(22.35em / 3 - 0.1px);
345 margin: 0 !important;
348 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
349 -moz-box-align: center;
350 -moz-box-pack: center;
353 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
357 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
360 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
361 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
362 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
363 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
364 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
365 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
370 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
371 * which was affecting subview display. Because of this, we're hiding the iframe *only*
372 * when displaying a subview. The discerning user might notice this, but it's not nearly
373 * as bad as the brokenness.
374 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
377 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
381 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
385 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
386 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
387 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
388 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
389 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
390 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container,
391 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
392 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
393 .panel-customization-placeholder-child > .toolbarbutton-icon {
396 /* Explanation for the below formula (A / B - C)
398 Each button is 22.35em / 3 - 0.1px wide
400 Each button has two margins.
402 The button icon is 32 pixels wide.
403 The button has 12px of horizontal padding (6 on each side).
404 The button has 0px of horizontal border (0 on each side).
405 Total width of button's icon + button padding should therefore be 44px,
406 which means each horizontal margin should be the half the button's width - (44/2) px.
408 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
411 /* above we treat the container as the icon for the margins, that is so the
412 /* badge itself is positioned correctly. Here we make sure that the icon itself
413 /* has the minum size we want, but no padding/margin. */
414 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
421 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
425 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
429 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
430 -moz-margin-end: 2px;
433 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
434 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
440 #zoom-in-button > .toolbarbutton-text,
441 #zoom-out-button > .toolbarbutton-text,
442 #zoom-reset-button > .toolbarbutton-icon {
449 flex-direction: column;
450 /* background-color: hsla(210,4%,10%,.07);*/
453 /* min-height: 4em;*/
454 border-bottom-right-radius: 4px;
455 border-bottom-left-radius: 4px;
458 #PanelUI-footer-inner {
460 border-top: 1px solid #9C9CFF;
463 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
467 #PanelUI-footer-inner > toolbarseparator {
469 border-left: 1px solid #9C9CFF;
473 #PanelUI-footer-inner:hover > toolbarseparator {
483 box-sizing: border-box;
488 transition: background-color;
489 -moz-box-orient: horizontal;
492 #PanelUI-fxa-status {
493 border-top: 1px solid #9C9CFF;
494 border-bottom: 1px solid transparent;
498 #PanelUI-fxa-status > .toolbarbutton-text {
499 width: 0; /* Fancy cropping solution for flexbox. */
502 #PanelUI-help[panel-multiview-anchor="true"] {
503 -moz-image-region: rect(0, 32px, 16px, 16px);
511 #PanelUI-fxa-status > .toolbarbutton-text,
512 #PanelUI-customize > .toolbarbutton-text {
518 #PanelUI-help > .toolbarbutton-text,
519 #PanelUI-quit > .toolbarbutton-text {
523 #PanelUI-help > .toolbarbutton-icon,
524 #PanelUI-quit > .toolbarbutton-icon {
530 -moz-padding-start: 15px;
531 -moz-border-start-style: none;
534 #PanelUI-fxa-status {
535 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
538 #PanelUI-fxa-status[status="active"] {
539 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
543 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
546 #customization-panelHolder #PanelUI-customize {
547 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
551 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
555 -moz-border-end-style: none;
556 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
563 -moz-image-region: rect(0, 16px, 16px, 0);
566 #PanelUI-customize:hover,
567 #PanelUI-help:not([disabled]):hover,
568 #PanelUI-quit:not([disabled]):hover,
569 #PanelUI-customize:hover:active,
570 #PanelUI-help:not([disabled]):hover:active,
571 #PanelUI-quit:not([disabled]):hover:active {
572 -moz-image-region: rect(0, 32px, 16px, 16px);
575 #PanelUI-help[disabled],
576 #PanelUI-quit[disabled] {
577 -moz-image-region: rect(0, 48px, 16px, 32px);
580 #PanelUI-fxa-status:not([disabled]):hover,
581 #PanelUI-help:not([disabled]):hover,
582 #PanelUI-customize:hover,
583 #PanelUI-quit:not([disabled]):hover {
586 #PanelUI-fxa-status:not([disabled]):hover:active,
587 #PanelUI-help:not([disabled]):hover:active,
588 #PanelUI-customize:hover:active,
589 #PanelUI-quit:not([disabled]):hover:active {
592 #PanelUI-fxa-status:not([disabled]):hover,
593 #PanelUI-fxa-status:not([disabled]):hover:active {
596 #PanelUI-quit:not([disabled]):hover {
597 background-color: #FF0000;
600 #PanelUI-quit:not([disabled]):hover:active {
601 background-color: #FF9F00;
604 #customization-panelHolder #PanelUI-customize {
606 background-color: #008484;
611 #customization-panelHolder #PanelUI-customize + toolbarseparator {
615 #customization-panelHolder #PanelUI-customize:hover,
616 #customization-panelHolder #PanelUI-customize:hover:active {
617 background-color: #FFCF00;
621 #customization-palette .toolbarbutton-multiline-text,
622 #customization-palette .toolbarbutton-text {
626 panelview .toolbarbutton-1,
628 .widget-overflow-list .toolbarbutton-1,
629 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
630 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
632 background-color: hsla(210,4%,10%,0);
635 border-color: hsla(210,4%,10%,0);*/
638 panelview .toolbarbutton-1,
640 .widget-overflow-list .toolbarbutton-1,
641 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
645 .subviewbutton.panel-subview-footer {
646 /* border-radius: 0; */
650 .subviewbutton.panel-subview-footer > .menu-text {
651 -moz-margin-start: 0px !important;
652 -moz-padding-start: 6px;
653 -moz-padding-end: 6px;
658 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
662 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
667 .subviewbutton.panel-subview-footer > .menu-accel-container {
668 -moz-padding-start: 6px;
671 .subviewbutton:not(.panel-subview-footer) {
675 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
676 /* Bookmark items need a more specific selector. */
677 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
678 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
682 .PanelUI-subView .subviewbutton[shortcut]::after {
683 content: attr(shortcut);
688 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
689 -moz-margin-start: 10px;
692 /* This is a <label> but it should fit in with the menu font- and colorwise. */
693 #PanelUI-characterEncodingView-autodetect-label {
698 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
703 panelview .toolbarbutton-1,
704 .widget-overflow-list .toolbarbutton-1 {
709 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
710 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
711 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
712 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
713 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
714 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
715 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
716 background-color: hsla(210,4%,10%,.08);
717 border-color: hsla(210,4%,10%,.11);
720 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
721 border-color: hsla(210,4%,10%,.11);
724 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
725 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
726 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
727 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
728 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
729 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
730 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
731 background-color: hsla(210,4%,10%,.12);
732 border-color: hsla(210,4%,10%,.14);
733 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
736 .subviewbutton.panel-subview-footer {
737 margin: 4px -4px -4px;
738 background-color: hsla(210,4%,10%,.07);
739 border-top: 1px solid hsla(210,4%,10%,.12);
744 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
745 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
746 background-color: hsla(210,4%,10%,.1);
747 border-top: 1px solid hsla(210,4%,10%,.12);
750 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
751 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
752 background-color: hsla(210,4%,10%,.15);
753 border-top: 1px solid hsla(210,4%,10%,.12);
754 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
757 #BMB_bookmarksPopup .subviewbutton {
762 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
766 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
767 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
768 -moz-appearance: none;
773 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
774 #BMB_bookmarksPopup arrowscrollbox {
778 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
779 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
783 / Popups with only one item don't have a footer /
784 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
785 / These popups never have a footer /
786 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
787 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
788 / And so they need some bottom padding: /
792 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
793 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
798 .PanelUI-subView menuseparator,
799 .PanelUI-subView toolbarseparator,
800 .cui-widget-panelview menuseparator {
801 -moz-appearance: none;
803 border-top: 1px solid #9C9CFF;
808 .PanelUI-subView menuseparator,
809 .PanelUI-subView toolbarseparator {
810 /* -moz-margin-start: -5px;
811 -moz-margin-end: -4px;*/
814 .PanelUI-subView menuseparator.small-separator,
815 .PanelUI-subView toolbarseparator.small-separator {
820 .cui-widget-panelview menuseparator.small-separator {
821 /* margin-left: 10px;
822 margin-right: 10px;*/
825 .subviewbutton > .menu-accel-container {
826 -moz-box-pack: start;
827 -moz-margin-start: 10px;
828 -moz-margin-end: auto;
832 #PanelUI-historyItems > toolbarbutton {
833 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
836 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
837 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
838 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
843 toolbarbutton[panel-multiview-anchor="true"],
844 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
846 background-color: #008484;
849 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
853 #PanelUI-help[panel-multiview-anchor="true"] {
854 background-image: none;
857 #PanelUI-help[panel-multiview-anchor="true"]::after {
863 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
864 background-repeat: no-repeat;
865 background-color: #008484;
866 background-position: left 10px center, 0; /* this doesn't need to be changed for RTL */
869 toolbarbutton[panel-multiview-anchor="true"] {
870 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
871 background-position: right 5px center;
872 background-repeat: no-repeat;
875 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
876 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
877 background-position: left 5px center;
880 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
881 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
885 #search-container[cui-areatype="menu-panel"],
886 #wrapper-search-container[place="panel"] {
890 #search-container[cui-areatype="menu-panel"] {
895 toolbarpaletteitem[place="palette"] > #search-container {
900 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
902 transition-property: background-color, border-color;
903 transition-duration: 150ms;
906 /* Make direct siblings overlap borders: */
907 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
908 /* border-top-color: transparent !important; */
911 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
912 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
913 /* margin-top: -1px; */
916 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
921 min-width: calc(22.35em / 3 - 0.1px);
922 max-width: calc(22.35em / 3 - 0.1px);
923 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
924 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
925 height: calc(2.2em + 4px);
927 -moz-box-orient: horizontal;
930 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
931 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
932 /* reduce the width with 2px for this button to compensate for two separators
934 min-width: calc(22.35em / 3 - 0.1px - 2px);
935 max-width: calc(22.35em / 3 - 0.1px - 2px);
938 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
942 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
946 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
947 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
948 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
949 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
950 border-top-right-radius: 0;
951 border-bottom-right-radius: 0;
954 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
955 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
956 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
957 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
958 border-top-left-radius: 0;
959 border-bottom-left-radius: 0;
962 .toolbaritem-combined-buttons > separator {
963 -moz-appearance: none;
965 -moz-box-align: stretch;
968 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
972 /* background: hsla(210,4%,10%,.15);*/
973 transition-property: margin;
974 transition-duration: 10ms;
975 transition-timing-function: ease;
978 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
982 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
986 .cui-widget-panelview,
987 #widget-overflow-scroller {
992 #widget-overflow-scroller {
998 #widget-overflow-list {
1001 padding-right: 10px;
1004 toolbaritem[overflowedItem=true],
1005 toolbarbutton[overflowedItem=true] {
1009 background-repeat: no-repeat;
1010 background-position: 0 center;
1013 .widget-overflow-list .toolbarbutton-1,
1014 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1015 -moz-box-align: center;
1016 -moz-box-orient: horizontal;
1019 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1020 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1022 -moz-padding-start: .5em;
1025 #widget-overflow-list > .toolbaritem-combined-buttons {
1029 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1034 -moz-margin-end: -1px;
1037 .subviewbutton[checked="true"] {
1038 background-image: url("chrome://global/skin/menu/menu-check.gif");
1039 background-position: top 5px left 4px;
1040 background-repeat: no-repeat;
1043 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1044 background-position: top 5px right 4px;
1047 .subviewbutton[checked="true"]:hover {
1048 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1051 .subbiewbutton > .menu-iconic-left {
1052 -moz-margin-end: 3px;
1055 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1059 .panel-mainview[panelid=customizationui-widget-panel],
1060 #customizationui-widget-multiview > .panel-viewcontainer,
1061 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1062 #PanelUI-panicView > .panel-subview-body,
1063 #PanelUI-panicView {
1068 #PanelUI-panicView.cui-widget-panelview {
1072 #PanelUI-panic-timeframe {
1074 border-bottom: 1px solid #A09090;
1077 #panic-button-success-icon,
1078 #PanelUI-panic-timeframe-icon,
1079 #PanelUI-panic-timeframe-icon-small {
1080 background-color: transparent;
1081 -moz-margin-end: 10px;
1084 #panic-button-success-icon,
1085 #PanelUI-panic-timeframe-icon {
1086 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1091 #PanelUI-panic-timeframe-icon-small {
1092 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1097 /* current attribute is only set when in use as a subview instead of a main view */
1098 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1102 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1106 #panic-button-success-header,
1107 #PanelUI-panic-header {
1108 -moz-box-align: center;
1112 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1116 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1117 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1118 transform: scaleX(-1);
1125 .subviewradio@buttonStateHover@ {
1128 .subviewradio[selected],
1129 .subviewradio[selected]:hover,
1130 .subviewradio@buttonStateActive@ {
1133 .subviewradio > .radio-check {
1136 .subviewradio > .radio-check[selected] {
1140 #PanelUI-panic-explanations {
1141 padding: 10px 10px 0;
1144 #PanelUI-panic-actionlist-main-label {
1149 .PanelUI-panic-actionlist {
1150 -moz-padding-start: 20px;
1152 padding-bottom: 2px;
1153 background-size: 16px 16px;
1154 background-repeat: no-repeat;
1155 background-color: transparent;
1156 background-position: center left;
1159 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1160 background-position: center right;
1163 #PanelUI-panic-actionlist-cookies {
1164 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1167 #PanelUI-panic-actionlist-history {
1168 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1171 #PanelUI-panic-actionlist-windows {
1172 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1175 #PanelUI-panic-actionlist-newwindow {
1176 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1179 #PanelUI-panic-warning {
1186 #PanelUI-panic-view-button {
1187 background-color: #FF0000;
1191 #PanelUI-panic-view-button:hover {
1192 background-color: #FFCF00;
1195 #PanelUI-panic-view-button:hover:active {
1196 background-color: #FF9F00;
1199 #PanelUI-panic-view-button > .toolbarbutton-text {
1204 #panic-button-success-closebutton {
1207 #panic-button-success-closebutton:hover {
1210 #panic-button-success-closebutton:hover:active {
1213 /* === END panelUIOverlay.inc.css === */
1215 #PanelUI-contents #zoom-out-btn {
1217 padding-right: 12px;
1220 #PanelUI-contents #zoom-in-btn {
1222 padding-right: 12px;
1225 /* bookmark panel submenus */
1227 #BMB_bookmarksPopup menupopup[placespopup=true] {
1228 /* background: transparent;
1233 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1234 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1235 /* background: #FFF;
1236 border: 1px solid rgba(0,0,0,0.25);
1237 border-radius: 3.5px;
1241 #BMB_bookmarksPopup menupopup {
1242 /* padding-top: 2px;*/
1245 /* Add some space at the top because there are no headers: */
1246 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1247 /* padding-top: 4px;*/
1250 #BMB_bookmarksPopup .menu-text {
1254 /* bookmark panel separator */
1255 #BMB_bookmarksPopup menuseparator {
1260 .subviewbutton > .menu-right,
1261 .subviewbutton > .menu-iconic-left {
1262 /* padding-top: 1px;
1264 margin-bottom: 2px;*/
1267 /* Disabled empty item looks too small otherwise, because it has no icon. */
1268 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1269 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1270 menuitem[type="checkbox"].subviewbutton {
1271 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1272 * 2px for its border, see above */
1273 /* min-height: 22px;*/
1276 .subviewbutton > .toolbarbutton-text {
1277 /* padding-top: 3px;
1278 padding-bottom: 3px;*/
1281 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1282 -moz-appearance: none;
1284 -moz-margin-start: 3px;
1287 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1289 -moz-padding-start: 0;
1293 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1297 .subviewbutton > .toolbarbutton-text {
1298 -moz-padding-start: 16px;
1301 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1302 -moz-padding-start: 0;
1305 .subviewbutton.bookmark-item > .toolbarbutton-icon {
1306 -moz-margin-start: 3px;
1309 /* subviewbutton entries for social sidebars have images that come from external
1310 /* sources, and are not guaranteed to be the size we want, so force the size on
1312 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1317 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1321 menu.subviewbutton > .menu-right {
1322 list-style-image: url("chrome://global/skin/menu/menu-arrow.gif");
1324 menu.subviewbutton:hover > .menu-right,
1325 menu.subviewbutton[_moz-menuactive="true"] > .menu-right {
1326 list-style-image: url("chrome://global/skin/menu/menu-arrow-hover.gif");
1328 menu[disabled="true"].subviewbutton > .menu-right {
1329 list-style-image: url("chrome://global/skin/menu/menu-arrow-disabled.gif");