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 -moz-margin-start: 38px;
89 .panel-viewstack[viewtype="main"] > .panel-subviews {
90 transform: translateX(22.35em);
93 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
94 transform: translateX(-22.35em);
97 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
101 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
105 .panel-subview-body {
111 #PanelUI-popup .panel-subview-body {
116 .panel-subview-header,
117 .subviewbutton.panel-subview-footer {
118 box-sizing: border-box;
119 /* min-height: 41px; */
123 .panel-subview-header {
125 background-color: #A09090;
130 .panel-subview-footer {
131 border-top: 1px solid #A09090;
134 .cui-widget-panelview .panel-subview-header {
138 .cui-widget-panelview .subviewbutton.panel-subview-footer {
140 -moz-box-pack: center;
145 flex-direction: column;
149 #app-extension-point-end > #PanelUI-menu-button {
152 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
155 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
159 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
162 #PanelUI-popup > arrowscrollbox > scrollbox {
166 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
175 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
176 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
177 /* line-height: 1.1;*/
181 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
182 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
186 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
187 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
189 clip: rect(auto, auto, 2.3em, auto);
192 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
193 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
195 /* Need to override toolkit theming which sets margin: 0 !important; */
196 margin: 2px 0 0 !important;
199 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
204 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
205 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
206 -moz-margin-start: 0;
214 .panel-mainview:not([panelid="PanelUI-popup"]) {
218 panelview:not([mainview]) .toolbarbutton-text,
219 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
224 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
228 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
232 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
233 border-radius: 4px 4px 0 0;
236 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
237 border-radius: 0 0 4px 4px;
248 #PanelUI-contents-scroller {
255 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
261 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
262 .panelUI-grid .toolbarbutton-1,
263 .panel-customization-placeholder-child {
264 -moz-appearance: none;
265 -moz-box-orient: vertical;
266 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
267 height: calc(51px + 2.2em);
270 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
271 * should have a min-width set so they abide by the width set above (which they do outside of
272 * customize mode because they're in a flexed container) */
273 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
277 /* Help SDK buttons fit in. */
278 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
279 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
284 .customization-palette .toolbarbutton-1 {
285 -moz-appearance: none;
286 -moz-box-orient: vertical;
289 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
290 -moz-appearance: none;
291 -moz-box-orient: vertical;
292 width: calc(22.35em / 3 - 0.1px - 2px);
293 height: calc(49px + 2.2em);
297 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
298 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
299 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
302 .panel-customization-placeholder-child {
304 /* padding: 2px 6px;*/
307 .panelUI-grid .toolbarbutton-1[type="menu"] {
308 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
309 background-position: right 3px top 16px;
310 background-repeat: no-repeat;
313 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
314 background-position: left 3px top 16px;
317 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
321 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
322 -moz-box-align: center;
324 -moz-margin-start: -16px;
326 margin-bottom: 2.2em;
330 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
331 border-radius: 0 0 0 2px;
334 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
335 border-radius: 0 0 2px 0;
338 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
342 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
343 width: calc(22.35em / 3 - 0.1px);
344 margin: 0 !important;
347 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
348 -moz-box-align: center;
349 -moz-box-pack: center;
352 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
356 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
359 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
360 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
361 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
362 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
363 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
364 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
369 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
370 * which was affecting subview display. Because of this, we're hiding the iframe *only*
371 * when displaying a subview. The discerning user might notice this, but it's not nearly
372 * as bad as the brokenness.
373 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
376 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
380 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
384 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
385 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
386 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
387 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
388 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
389 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container,
390 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
391 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
392 .panel-customization-placeholder-child > .toolbarbutton-icon {
395 /* Explanation for the below formula (A / B - C)
397 Each button is 22.35em / 3 - 0.1px wide
399 Each button has two margins.
401 The button icon is 32 pixels wide.
402 The button has 12px of horizontal padding (6 on each side).
403 The button has 0px of horizontal border (0 on each side).
404 Total width of button's icon + button padding should therefore be 44px,
405 which means each horizontal margin should be the half the button's width - (44/2) px.
407 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
410 /* above we treat the container as the icon for the margins, that is so the
411 /* badge itself is positioned correctly. Here we make sure that the icon itself
412 /* has the minum size we want, but no padding/margin. */
413 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
420 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
424 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
428 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
429 -moz-margin-end: 2px;
432 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
433 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
439 #zoom-in-button > .toolbarbutton-text,
440 #zoom-out-button > .toolbarbutton-text,
441 #zoom-reset-button > .toolbarbutton-icon {
448 flex-direction: column;
449 /* background-color: hsla(210,4%,10%,.07);*/
452 /* min-height: 4em;*/
453 border-bottom-right-radius: 4px;
454 border-bottom-left-radius: 4px;
457 #PanelUI-footer-inner {
459 border-top: 1px solid #9C9CFF;
462 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
466 #PanelUI-footer-inner > toolbarseparator {
468 border-left: 1px solid #9C9CFF;
472 #PanelUI-footer-inner:hover > toolbarseparator {
482 box-sizing: border-box;
487 transition: background-color;
488 -moz-box-orient: horizontal;
491 #PanelUI-fxa-status {
492 border-top: 1px solid #9C9CFF;
493 border-bottom: 1px solid transparent;
497 #PanelUI-fxa-status > .toolbarbutton-text {
498 width: 0; /* Fancy cropping solution for flexbox. */
501 #PanelUI-help[panel-multiview-anchor="true"] {
502 -moz-image-region: rect(0, 32px, 16px, 16px);
510 #PanelUI-fxa-status > .toolbarbutton-text,
511 #PanelUI-customize > .toolbarbutton-text {
517 #PanelUI-help > .toolbarbutton-text,
518 #PanelUI-quit > .toolbarbutton-text {
522 #PanelUI-help > .toolbarbutton-icon,
523 #PanelUI-quit > .toolbarbutton-icon {
529 -moz-padding-start: 15px;
530 -moz-border-start-style: none;
533 #PanelUI-fxa-status {
534 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
537 #PanelUI-fxa-status[status="active"] {
538 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
542 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
545 #customization-panelHolder #PanelUI-customize {
546 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
550 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
554 -moz-border-end-style: none;
555 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
562 -moz-image-region: rect(0, 16px, 16px, 0);
565 #PanelUI-customize:hover,
566 #PanelUI-help:not([disabled]):hover,
567 #PanelUI-quit:not([disabled]):hover,
568 #PanelUI-customize:hover:active,
569 #PanelUI-help:not([disabled]):hover:active,
570 #PanelUI-quit:not([disabled]):hover:active {
571 -moz-image-region: rect(0, 32px, 16px, 16px);
574 #PanelUI-help[disabled],
575 #PanelUI-quit[disabled] {
576 -moz-image-region: rect(0, 48px, 16px, 32px);
579 #PanelUI-fxa-status:not([disabled]):hover,
580 #PanelUI-help:not([disabled]):hover,
581 #PanelUI-customize:hover,
582 #PanelUI-quit:not([disabled]):hover {
585 #PanelUI-fxa-status:not([disabled]):hover:active,
586 #PanelUI-help:not([disabled]):hover:active,
587 #PanelUI-customize:hover:active,
588 #PanelUI-quit:not([disabled]):hover:active {
591 #PanelUI-fxa-status:not([disabled]):hover,
592 #PanelUI-fxa-status:not([disabled]):hover:active {
595 #PanelUI-quit:not([disabled]):hover {
596 background-color: #FF0000;
599 #PanelUI-quit:not([disabled]):hover:active {
600 background-color: #FF9F00;
603 #customization-panelHolder #PanelUI-customize {
605 background-color: #008484;
610 #customization-panelHolder #PanelUI-customize + toolbarseparator {
614 #customization-panelHolder #PanelUI-customize:hover,
615 #customization-panelHolder #PanelUI-customize:hover:active {
616 background-color: #FFCF00;
620 #customization-palette .toolbarbutton-multiline-text,
621 #customization-palette .toolbarbutton-text {
625 panelview .toolbarbutton-1,
627 .widget-overflow-list .toolbarbutton-1,
628 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
629 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
631 background-color: hsla(210,4%,10%,0);
634 border-color: hsla(210,4%,10%,0);*/
637 panelview .toolbarbutton-1,
639 .widget-overflow-list .toolbarbutton-1,
640 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
644 .subviewbutton.panel-subview-footer {
645 /* border-radius: 0; */
649 .subviewbutton.panel-subview-footer > .menu-text {
650 -moz-margin-start: 0px !important;
651 -moz-padding-start: 6px;
652 -moz-padding-end: 6px;
657 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
661 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
666 .subviewbutton.panel-subview-footer > .menu-accel-container {
667 -moz-padding-start: 6px;
670 .subviewbutton:not(.panel-subview-footer) {
674 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
675 /* Bookmark items need a more specific selector. */
676 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
677 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
681 .PanelUI-subView .subviewbutton[shortcut]::after {
682 content: attr(shortcut);
687 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
688 -moz-margin-start: 10px;
691 /* This is a <label> but it should fit in with the menu font- and colorwise. */
692 #PanelUI-characterEncodingView-autodetect-label {
697 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
702 panelview .toolbarbutton-1,
703 .widget-overflow-list .toolbarbutton-1 {
708 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
709 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
710 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
711 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
712 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
713 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
714 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
715 background-color: hsla(210,4%,10%,.08);
716 border-color: hsla(210,4%,10%,.11);
719 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
720 border-color: hsla(210,4%,10%,.11);
723 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
724 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
725 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
726 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
727 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
728 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
729 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
730 background-color: hsla(210,4%,10%,.12);
731 border-color: hsla(210,4%,10%,.14);
732 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
735 .subviewbutton.panel-subview-footer {
736 margin: 4px -4px -4px;
737 background-color: hsla(210,4%,10%,.07);
738 border-top: 1px solid hsla(210,4%,10%,.12);
743 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
744 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
745 background-color: hsla(210,4%,10%,.1);
746 border-top: 1px solid hsla(210,4%,10%,.12);
749 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
750 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
751 background-color: hsla(210,4%,10%,.15);
752 border-top: 1px solid hsla(210,4%,10%,.12);
753 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
756 #BMB_bookmarksPopup .subviewbutton {
761 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
765 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
766 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
767 -moz-appearance: none;
772 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
773 #BMB_bookmarksPopup arrowscrollbox {
777 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
778 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
782 / Popups with only one item don't have a footer /
783 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
784 / These popups never have a footer /
785 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
786 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
787 / And so they need some bottom padding: /
791 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
792 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
797 .PanelUI-subView menuseparator,
798 .PanelUI-subView toolbarseparator,
799 .cui-widget-panelview menuseparator {
800 -moz-appearance: none;
802 border-top: 1px solid #9C9CFF;
807 .PanelUI-subView menuseparator,
808 .PanelUI-subView toolbarseparator {
809 /* -moz-margin-start: -5px;
810 -moz-margin-end: -4px;*/
813 .PanelUI-subView menuseparator.small-separator,
814 .PanelUI-subView toolbarseparator.small-separator {
819 .cui-widget-panelview menuseparator.small-separator {
820 /* margin-left: 10px;
821 margin-right: 10px;*/
824 .subviewbutton > .menu-accel-container {
825 -moz-box-pack: start;
826 -moz-margin-start: 10px;
827 -moz-margin-end: auto;
831 #PanelUI-historyItems > toolbarbutton {
832 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
835 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
836 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
837 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
842 toolbarbutton[panel-multiview-anchor="true"],
843 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
845 background-color: #008484;
848 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
852 #PanelUI-help[panel-multiview-anchor="true"] {
853 background-image: none;
856 #PanelUI-help[panel-multiview-anchor="true"]::after {
862 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
863 background-repeat: no-repeat;
864 background-color: #008484;
865 background-position: left 10px center, 0;
868 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
869 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
870 background-position: right 10px center, 0;
873 toolbarbutton[panel-multiview-anchor="true"] {
874 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
875 background-position: right calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
876 background-repeat: no-repeat;
879 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
880 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
881 background-position: left calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
884 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
885 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
889 #search-container[cui-areatype="menu-panel"],
890 #wrapper-search-container[place="panel"] {
894 #search-container[cui-areatype="menu-panel"] {
899 toolbarpaletteitem[place="palette"] > #search-container {
904 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
906 transition-property: background-color, border-color;
907 transition-duration: 150ms;
910 /* Make direct siblings overlap borders: */
911 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
912 /* border-top-color: transparent !important; */
915 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
916 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
917 /* margin-top: -1px; */
920 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
925 min-width: calc(22.35em / 3 - 0.1px);
926 max-width: calc(22.35em / 3 - 0.1px);
927 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
928 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
929 height: calc(2.2em + 4px);
931 -moz-box-orient: horizontal;
934 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
935 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
936 /* reduce the width with 2px for this button to compensate for two separators
938 min-width: calc(22.35em / 3 - 0.1px - 2px);
939 max-width: calc(22.35em / 3 - 0.1px - 2px);
942 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
946 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
950 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
951 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
952 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
953 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
954 border-top-right-radius: 0;
955 border-bottom-right-radius: 0;
958 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
959 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
960 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
961 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
962 border-top-left-radius: 0;
963 border-bottom-left-radius: 0;
966 .toolbaritem-combined-buttons > separator {
967 -moz-appearance: none;
969 -moz-box-align: stretch;
972 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
976 /* background: hsla(210,4%,10%,.15);*/
977 transition-property: margin;
978 transition-duration: 10ms;
979 transition-timing-function: ease;
982 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
986 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
990 .cui-widget-panelview,
991 #widget-overflow-scroller {
996 #widget-overflow-scroller {
1002 #widget-overflow-list {
1005 padding-right: 10px;
1008 toolbaritem[overflowedItem=true],
1009 toolbarbutton[overflowedItem=true] {
1013 background-repeat: no-repeat;
1014 background-position: 0 center;
1017 .widget-overflow-list .toolbarbutton-1,
1018 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1019 -moz-box-align: center;
1020 -moz-box-orient: horizontal;
1023 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1024 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1026 -moz-padding-start: .5em;
1029 #widget-overflow-list > .toolbaritem-combined-buttons {
1033 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1038 -moz-margin-end: -1px;
1041 .subviewbutton[checked="true"] {
1042 background-image: url("chrome://global/skin/menu/menu-check.gif");
1043 background-position: top 5px left 4px;
1044 background-repeat: no-repeat;
1047 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1048 background-position: top 5px right 4px;
1051 .subviewbutton[checked="true"]:hover {
1052 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1055 .subbiewbutton > .menu-iconic-left {
1056 -moz-margin-end: 3px;
1059 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1063 .panel-mainview[panelid=customizationui-widget-panel],
1064 #customizationui-widget-multiview > .panel-viewcontainer,
1065 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1066 #PanelUI-panicView > .panel-subview-body,
1067 #PanelUI-panicView {
1072 #customizationui-widget-multiview[mainViewId="PanelUI-panicView"] > .panel-viewcontainer,
1073 #customizationui-widget-multiview[mainViewId="PanelUI-panicView"] > .panel-viewcontainer > .panel-viewstack,
1074 #customizationui-widget-multiview[mainViewId="PanelUI-panicView"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview,
1075 /* NB: currentsubview attribute is temporary as a safe workaround for a layout problem with this
1076 * panel. Do not rely on it, it *will* go away again. */
1077 #PanelUI-multiView[currentsubview="PanelUI-panicView"] > .panel-viewcontainer > .panel-viewstack > .panel-subviews,
1078 #PanelUI-panicView > .panel-subview-body,
1079 #PanelUI-panicView {
1083 #PanelUI-panicView.cui-widget-panelview {
1087 #PanelUI-panic-timeframe {
1089 border-bottom: 1px solid #A09090;
1092 #panic-button-success-icon,
1093 #PanelUI-panic-timeframe-icon,
1094 #PanelUI-panic-timeframe-icon-small {
1095 background-color: transparent;
1096 -moz-margin-end: 10px;
1099 #panic-button-success-icon,
1100 #PanelUI-panic-timeframe-icon {
1101 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1106 #PanelUI-panic-timeframe-icon-small {
1107 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1112 /* current attribute is only set when in use as a subview instead of a main view */
1113 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1117 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1121 #panic-button-success-header,
1122 #PanelUI-panic-header {
1123 -moz-box-align: center;
1127 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1131 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1132 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1133 transform: scaleX(-1);
1140 .subviewradio@buttonStateHover@ {
1143 .subviewradio[selected],
1144 .subviewradio[selected]:hover,
1145 .subviewradio@buttonStateActive@ {
1148 .subviewradio > .radio-check {
1151 .subviewradio > .radio-check[selected] {
1155 #PanelUI-panic-explanations {
1156 padding: 10px 10px 0;
1159 #PanelUI-panic-actionlist-main-label {
1164 .PanelUI-panic-actionlist {
1165 -moz-padding-start: 20px;
1167 padding-bottom: 2px;
1168 background-size: 16px 16px;
1169 background-repeat: no-repeat;
1170 background-color: transparent;
1171 background-position: center left;
1174 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1175 background-position: center right;
1178 #PanelUI-panic-actionlist-cookies {
1179 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1182 #PanelUI-panic-actionlist-history {
1183 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1186 #PanelUI-panic-actionlist-windows {
1187 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1190 #PanelUI-panic-actionlist-newwindow {
1191 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1194 #PanelUI-panic-warning {
1201 #PanelUI-panic-view-button {
1202 background-color: #FF0000;
1206 #PanelUI-panic-view-button:hover {
1207 background-color: #FFCF00;
1210 #PanelUI-panic-view-button:hover:active {
1211 background-color: #FF9F00;
1214 #PanelUI-panic-view-button > .toolbarbutton-text {
1219 #panic-button-success-closebutton {
1222 #panic-button-success-closebutton:hover {
1225 #panic-button-success-closebutton:hover:active {
1228 /* === END panelUIOverlay.inc.css === */
1231 background-color: #000000;
1234 #PanelUI-contents #zoom-out-btn {
1236 padding-right: 12px;
1239 #PanelUI-contents #zoom-in-btn {
1241 padding-right: 12px;
1244 /* bookmark panel submenus */
1246 #BMB_bookmarksPopup menupopup[placespopup=true] {
1247 /* background: transparent;
1252 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1253 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1254 /* background: #FFF;
1255 border: 1px solid rgba(0,0,0,0.25);
1256 border-radius: 3.5px;
1260 #BMB_bookmarksPopup menupopup {
1261 /* padding-top: 2px;*/
1264 /* Add some space at the top because there are no headers: */
1265 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1266 /* padding-top: 4px;*/
1269 /* bookmark panel separator */
1270 #BMB_bookmarksPopup menuseparator {
1275 .subviewbutton > .menu-right,
1276 .subviewbutton > .menu-iconic-left {
1277 /* padding-top: 1px;
1279 margin-bottom: 2px;*/
1282 /* Disabled empty item looks too small otherwise, because it has no icon. */
1283 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1284 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1285 menuitem[type="checkbox"].subviewbutton {
1286 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1287 * 2px for its border, see above */
1288 /* min-height: 22px;*/
1291 .subviewbutton > .toolbarbutton-text {
1292 /* padding-top: 3px;
1293 padding-bottom: 3px;*/
1296 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1297 -moz-appearance: none;
1299 -moz-margin-start: 3px;
1302 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1304 -moz-padding-start: 0;
1308 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1309 /* transform: scaleX(-1); */
1312 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1316 .subviewbutton > .toolbarbutton-text {
1317 -moz-padding-start: 16px;
1320 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1321 -moz-padding-start: 0;
1324 /* subviewbutton entries for social sidebars have images that come from external
1325 /* sources, and are not guaranteed to be the size we want, so force the size on
1327 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1332 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1336 menu.subviewbutton > .menu-right {
1337 list-style-image: url("chrome://global/skin/menu/menu-arrow.gif");
1339 menu.subviewbutton:hover > .menu-right,
1340 menu.subviewbutton[_moz-menuactive="true"] > .menu-right {
1341 list-style-image: url("chrome://global/skin/menu/menu-arrow-hover.gif");
1343 menu[disabled="true"].subviewbutton > .menu-right {
1344 list-style-image: url("chrome://global/skin/menu/menu-arrow-disabled.gif");