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;
127 font-variant: small-caps;
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-update-status,
364 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
365 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
366 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
371 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
372 * which was affecting subview display. Because of this, we're hiding the iframe *only*
373 * when displaying a subview. The discerning user might notice this, but it's not nearly
374 * as bad as the brokenness.
375 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
378 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
382 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
386 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
387 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
388 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
389 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
390 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
391 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container,
392 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
393 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
394 .panel-customization-placeholder-child > .toolbarbutton-icon {
397 /* Explanation for the below formula (A / B - C)
399 Each button is 22.35em / 3 - 0.1px wide
401 Each button has two margins.
403 The button icon is 32 pixels wide.
404 The button has 12px of horizontal padding (6 on each side).
405 The button has 0px of horizontal border (0 on each side).
406 Total width of button's icon + button padding should therefore be 44px,
407 which means each horizontal margin should be the half the button's width - (44/2) px.
409 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
412 /* above we treat the container as the icon for the margins, that is so the
413 /* badge itself is positioned correctly. Here we make sure that the icon itself
414 /* has the minum size we want, but no padding/margin. */
415 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
422 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
426 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
430 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
431 -moz-margin-end: 2px;
434 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
435 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
441 #zoom-in-button > .toolbarbutton-text,
442 #zoom-out-button > .toolbarbutton-text,
443 #zoom-reset-button > .toolbarbutton-icon {
450 flex-direction: column;
451 /* background-color: hsla(210,4%,10%,.07);*/
454 /* min-height: 4em;*/
455 border-bottom-right-radius: 4px;
456 border-bottom-left-radius: 4px;
459 #PanelUI-footer-inner {
461 border-top: 1px solid #9C9CFF;
464 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
468 #PanelUI-footer-inner > toolbarseparator {
470 border-left: 1px solid #9C9CFF;
474 #PanelUI-footer-inner:hover > toolbarseparator {
478 #PanelUI-update-status,
485 box-sizing: border-box;
490 transition: background-color;
491 -moz-box-orient: horizontal;
494 #PanelUI-update-status,
495 #PanelUI-fxa-status {
496 border-top: 1px solid #9C9CFF;
497 border-bottom: 1px solid transparent;
501 #PanelUI-update-status > .toolbarbutton-text,
502 #PanelUI-fxa-status > .toolbarbutton-text {
503 width: 0; /* Fancy cropping solution for flexbox. */
506 #PanelUI-help[panel-multiview-anchor="true"] {
507 -moz-image-region: rect(0, 32px, 16px, 16px);
515 #PanelUI-update-status > .toolbarbutton-text,
516 #PanelUI-fxa-status > .toolbarbutton-text,
517 #PanelUI-customize > .toolbarbutton-text {
523 #PanelUI-help > .toolbarbutton-text,
524 #PanelUI-quit > .toolbarbutton-text {
528 #PanelUI-update-status > .toolbarbutton-icon,
529 #PanelUI-fxa-status > .toolbarbutton-icon,
530 #PanelUI-customize > .toolbarbutton-icon,
531 #PanelUI-help > .toolbarbutton-icon,
532 #PanelUI-quit > .toolbarbutton-icon {
538 -moz-padding-start: 15px;
539 -moz-border-start-style: none;
542 #PanelUI-update-status {
543 width: calc(22.35em + 30px);
544 -moz-padding-start: 15px;
545 -moz-border-start-style: none;
548 #PanelUI-update-status {
549 list-style-image: url(chrome://branding/content/icon16.png);
552 #PanelUI-fxa-status {
553 -moz-padding-start: 15px;
554 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
557 #PanelUI-fxa-status[syncstatus="active"] {
558 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
561 #PanelUI-fxa-status[fxastatus="migrate-signup"],
562 #PanelUI-fxa-status[fxastatus="migrate-verify"] {
563 list-style-image: url(chrome://global/skin/warning-16.png);
567 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
570 #customization-panelHolder #PanelUI-customize {
571 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
575 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
579 -moz-border-end-style: none;
580 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
587 -moz-image-region: rect(0, 16px, 16px, 0);
590 #PanelUI-customize:hover,
591 #PanelUI-help:not([disabled]):hover,
592 #PanelUI-quit:not([disabled]):hover,
593 #PanelUI-customize:hover:active,
594 #PanelUI-help:not([disabled]):hover:active,
595 #PanelUI-quit:not([disabled]):hover:active {
596 -moz-image-region: rect(0, 32px, 16px, 16px);
599 #PanelUI-help[disabled],
600 #PanelUI-quit[disabled] {
601 -moz-image-region: rect(0, 48px, 16px, 32px);
604 #PanelUI-fxa-status:not([disabled]):hover,
605 #PanelUI-help:not([disabled]):hover,
606 #PanelUI-customize:hover,
607 #PanelUI-quit:not([disabled]):hover {
610 #PanelUI-fxa-status:not([disabled]):hover:active,
611 #PanelUI-help:not([disabled]):hover:active,
612 #PanelUI-customize:hover:active,
613 #PanelUI-quit:not([disabled]):hover:active {
616 #PanelUI-fxa-status:not([disabled]):hover,
617 #PanelUI-fxa-status:not([disabled]):hover:active {
620 #PanelUI-update-status {
624 #PanelUI-update-status[update-status="succeeded"] {
625 background-color: #008484;
629 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
630 background-color: #FFCF00;
633 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
634 background-color: #FF9F00;
637 #PanelUI-update-status[update-status="failed"] {
638 background-color: #FF0000;
642 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
643 background-color: #FFCF00;
646 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
647 background-color: #FF9F00;
650 #PanelUI-quit:not([disabled]):hover {
651 background-color: #FF0000;
654 #PanelUI-quit:not([disabled]):hover:active {
655 background-color: #FF9F00;
658 #customization-panelHolder #PanelUI-customize {
660 background-color: #008484;
665 #customization-panelHolder #PanelUI-customize + toolbarseparator {
669 #customization-panelHolder #PanelUI-customize:hover,
670 #customization-panelHolder #PanelUI-customize:hover:active {
671 background-color: #FFCF00;
675 #customization-palette .toolbarbutton-multiline-text,
676 #customization-palette .toolbarbutton-text {
680 panelview .toolbarbutton-1,
682 .widget-overflow-list .toolbarbutton-1,
683 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
684 .share-provider-button,
685 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
687 background-color: hsla(210,4%,10%,0);
690 border-color: hsla(210,4%,10%,0);*/
693 panelview .toolbarbutton-1,
695 .widget-overflow-list .toolbarbutton-1,
696 .share-provider-button,
697 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
701 .subviewbutton.panel-subview-footer {
702 /* border-radius: 0; */
706 .subviewbutton.panel-subview-footer > .menu-text {
707 -moz-margin-start: 0px !important;
708 -moz-padding-start: 6px;
709 -moz-padding-end: 6px;
714 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
718 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
723 .subviewbutton.panel-subview-footer > .menu-accel-container {
724 -moz-padding-start: 6px;
727 .subviewbutton:not(.panel-subview-footer) {
731 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
732 /* Bookmark items need a more specific selector. */
733 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
734 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
738 .PanelUI-subView .subviewbutton[shortcut]::after {
739 content: attr(shortcut);
744 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
745 -moz-margin-start: 10px;
748 /* This is a <label> but it should fit in with the menu font- and colorwise. */
749 #PanelUI-characterEncodingView-autodetect-label {
754 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
759 panelview .toolbarbutton-1,
760 .widget-overflow-list .toolbarbutton-1 {
765 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
766 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
767 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
768 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
769 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
770 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
771 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
772 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
773 background-color: hsla(210,4%,10%,.08);
774 border-color: hsla(210,4%,10%,.11);
777 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
778 border-color: hsla(210,4%,10%,.11);
781 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
782 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
783 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
784 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
785 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
786 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
787 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
788 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
789 background-color: hsla(210,4%,10%,.12);
790 border-color: hsla(210,4%,10%,.14);
791 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
794 .subviewbutton.panel-subview-footer {
795 margin: 4px -4px -4px;
796 background-color: hsla(210,4%,10%,.07);
797 border-top: 1px solid hsla(210,4%,10%,.12);
802 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
803 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
804 background-color: hsla(210,4%,10%,.1);
805 border-top: 1px solid hsla(210,4%,10%,.12);
808 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
809 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
810 background-color: hsla(210,4%,10%,.15);
811 border-top: 1px solid hsla(210,4%,10%,.12);
812 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
815 #BMB_bookmarksPopup .subviewbutton {
820 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
824 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
825 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
826 -moz-appearance: none;
831 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
832 #BMB_bookmarksPopup arrowscrollbox {
836 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
837 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
841 / Popups with only one item don't have a footer /
842 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
843 / These popups never have a footer /
844 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
845 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
846 / And so they need some bottom padding: /
850 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
851 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
856 .PanelUI-subView menuseparator,
857 .PanelUI-subView toolbarseparator,
858 .cui-widget-panelview menuseparator {
859 -moz-appearance: none;
861 border-top: 1px solid #9C9CFF;
866 .PanelUI-subView menuseparator,
867 .PanelUI-subView toolbarseparator {
868 /* -moz-margin-start: -5px;
869 -moz-margin-end: -4px;*/
872 .PanelUI-subView menuseparator.small-separator,
873 .PanelUI-subView toolbarseparator.small-separator {
878 .cui-widget-panelview menuseparator.small-separator {
879 /* margin-left: 10px;
880 margin-right: 10px;*/
883 .subviewbutton > .menu-accel-container {
884 -moz-box-pack: start;
885 -moz-margin-start: 10px;
886 -moz-margin-end: auto;
890 #PanelUI-historyItems > toolbarbutton {
891 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
894 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
895 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
896 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
901 toolbarbutton[panel-multiview-anchor="true"],
902 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
904 background-color: #008484;
907 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
911 #PanelUI-help[panel-multiview-anchor="true"] {
912 background-image: none;
915 #PanelUI-help[panel-multiview-anchor="true"]::after {
921 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
922 background-repeat: no-repeat;
923 background-color: #008484;
924 background-position: left 10px center, 0;
927 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
928 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
929 background-position: right 10px center, 0;
932 toolbarbutton[panel-multiview-anchor="true"] {
933 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
934 background-position: right calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
935 background-repeat: no-repeat;
938 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
939 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
940 background-position: left calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
943 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
944 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
948 #search-container[cui-areatype="menu-panel"],
949 #wrapper-search-container[place="panel"] {
953 #search-container[cui-areatype="menu-panel"] {
958 toolbarpaletteitem[place="palette"] > #search-container {
963 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
965 transition-property: background-color, border-color;
966 transition-duration: 150ms;
969 /* Make direct siblings overlap borders: */
970 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
971 /* border-top-color: transparent !important; */
974 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
975 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
976 /* margin-top: -1px; */
979 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
984 min-width: calc(22.35em / 3 - 0.1px);
985 max-width: calc(22.35em / 3 - 0.1px);
986 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
987 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
988 height: calc(2.2em + 4px);
990 -moz-box-orient: horizontal;
993 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
994 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
995 /* reduce the width with 2px for this button to compensate for two separators
997 min-width: calc(22.35em / 3 - 0.1px - 2px);
998 max-width: calc(22.35em / 3 - 0.1px - 2px);
1001 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1005 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1009 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1010 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1011 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1012 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1013 border-top-right-radius: 0;
1014 border-bottom-right-radius: 0;
1017 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1018 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1019 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1020 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1021 border-top-left-radius: 0;
1022 border-bottom-left-radius: 0;
1025 .toolbaritem-combined-buttons > separator {
1026 -moz-appearance: none;
1028 -moz-box-align: stretch;
1031 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1035 /* background: hsla(210,4%,10%,.15);*/
1036 transition-property: margin;
1037 transition-duration: 10ms;
1038 transition-timing-function: ease;
1041 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1045 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1049 .cui-widget-panelview,
1050 #widget-overflow-scroller {
1055 #widget-overflow-scroller {
1058 margin-bottom: 10px;
1061 #widget-overflow-list {
1064 padding-right: 10px;
1067 toolbaritem[overflowedItem=true],
1068 toolbarbutton[overflowedItem=true] {
1072 background-repeat: no-repeat;
1073 background-position: 0 center;
1076 .widget-overflow-list .toolbarbutton-1,
1077 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1078 -moz-box-align: center;
1079 -moz-box-orient: horizontal;
1082 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1083 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1085 -moz-padding-start: .5em;
1088 #widget-overflow-list > .toolbaritem-combined-buttons {
1092 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1097 -moz-margin-end: -1px;
1100 .subviewbutton[checked="true"] {
1101 background-image: url("chrome://global/skin/menu/menu-check.gif");
1102 background-position: top 5px left 4px;
1103 background-repeat: no-repeat;
1106 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1107 background-position: top 5px right 4px;
1110 .subviewbutton[checked="true"]:hover {
1111 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1114 .subbiewbutton > .menu-iconic-left {
1115 -moz-margin-end: 3px;
1118 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1122 .panel-mainview[panelid=customizationui-widget-panel],
1123 #customizationui-widget-multiview > .panel-viewcontainer,
1124 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1125 #PanelUI-panicView > .panel-subview-body,
1126 #PanelUI-panicView {
1131 #PanelUI-panicView.cui-widget-panelview {
1135 #PanelUI-panic-timeframe {
1137 border-bottom: 1px solid #A09090;
1140 #panic-button-success-icon,
1141 #PanelUI-panic-timeframe-icon,
1142 #PanelUI-panic-timeframe-icon-small {
1143 background-color: transparent;
1144 -moz-margin-end: 10px;
1147 #panic-button-success-icon,
1148 #PanelUI-panic-timeframe-icon {
1149 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1154 #PanelUI-panic-timeframe-icon-small {
1155 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1160 /* current attribute is only set when in use as a subview instead of a main view */
1161 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1165 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1169 #panic-button-success-header,
1170 #PanelUI-panic-header {
1171 -moz-box-align: center;
1175 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1179 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1180 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1181 transform: scaleX(-1);
1188 .subviewradio@buttonStateHover@ {
1191 .subviewradio[selected],
1192 .subviewradio[selected]:hover,
1193 .subviewradio@buttonStateActive@ {
1196 .subviewradio > .radio-check {
1199 .subviewradio > .radio-check[selected] {
1203 #PanelUI-panic-explanations {
1204 padding: 10px 10px 0;
1207 #PanelUI-panic-actionlist-main-label {
1212 .PanelUI-panic-actionlist {
1213 -moz-padding-start: 20px;
1215 padding-bottom: 2px;
1216 background-size: 16px 16px;
1217 background-repeat: no-repeat;
1218 background-color: transparent;
1219 background-position: center left;
1222 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1223 background-position: center right;
1226 #PanelUI-panic-actionlist-cookies {
1227 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1230 #PanelUI-panic-actionlist-history {
1231 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1234 #PanelUI-panic-actionlist-windows {
1235 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1238 #PanelUI-panic-actionlist-newwindow {
1239 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1242 #PanelUI-panic-warning {
1249 #PanelUI-panic-view-button {
1250 background-color: #FF0000;
1254 #PanelUI-panic-view-button:hover {
1255 background-color: #FFCF00;
1258 #PanelUI-panic-view-button:hover:active {
1259 background-color: #FF9F00;
1262 #PanelUI-panic-view-button > .toolbarbutton-text {
1267 #panic-button-success-closebutton {
1270 #panic-button-success-closebutton:hover {
1273 #panic-button-success-closebutton:hover:active {
1276 /* === END panelUIOverlay.inc.css === */
1279 background-color: #000000;
1282 #PanelUI-contents #zoom-out-btn {
1284 padding-right: 12px;
1287 #PanelUI-contents #zoom-in-btn {
1289 padding-right: 12px;
1292 /* bookmark panel submenus */
1294 #BMB_bookmarksPopup menupopup[placespopup=true] {
1295 /* background: transparent;
1300 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1301 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1302 /* background: var(--panel-arrowcontent-background);
1303 border: var(--panel-arrowcontent-border);
1304 border-radius: 3.5px;
1308 #BMB_bookmarksPopup menupopup {
1309 /* padding-top: 2px;*/
1312 /* Add some space at the top because there are no headers: */
1313 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1314 /* padding-top: 4px;*/
1317 /* bookmark panel separator */
1318 #BMB_bookmarksPopup menuseparator {
1323 .subviewbutton > .menu-right,
1324 .subviewbutton > .menu-iconic-left {
1325 /* padding-top: 1px;
1327 margin-bottom: 2px;*/
1330 /* Disabled empty item looks too small otherwise, because it has no icon. */
1331 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1332 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1333 menuitem[type="checkbox"].subviewbutton {
1334 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1335 * 2px for its border, see above */
1336 /* min-height: 22px;*/
1339 .subviewbutton > .toolbarbutton-text {
1340 /* padding-top: 3px;
1341 padding-bottom: 3px;*/
1344 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1345 -moz-appearance: none;
1347 -moz-margin-start: 3px;
1350 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1352 -moz-padding-start: 0;
1356 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1357 /* transform: scaleX(-1); */
1360 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1364 .subviewbutton > .toolbarbutton-text {
1365 -moz-padding-start: 16px;
1368 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1369 -moz-padding-start: 0;
1372 /* subviewbutton entries for social sidebars have images that come from external
1373 /* sources, and are not guaranteed to be the size we want, so force the size on
1375 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1380 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1384 menu.subviewbutton > .menu-right {
1385 list-style-image: url("chrome://global/skin/menu/menu-arrow.gif");
1387 menu.subviewbutton:hover > .menu-right,
1388 menu.subviewbutton[_moz-menuactive="true"] > .menu-right {
1389 list-style-image: url("chrome://global/skin/menu/menu-arrow-hover.gif");
1391 menu[disabled="true"].subviewbutton > .menu-right {
1392 list-style-image: url("chrome://global/skin/menu/menu-arrow-disabled.gif");