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) {
84 #PanelUI-menu-button[update-status="succeeded"] .toolbarbutton-badge::after {
85 content: url(chrome://browser/skin/update-badge.svg);
86 background-color: #008484;
92 -moz-margin-start: 38px;
95 .panel-viewstack[viewtype="main"] > .panel-subviews {
96 transform: translateX(22.35em);
99 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
100 transform: translateX(-22.35em);
103 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
107 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
111 .panel-subview-body {
117 #PanelUI-popup .panel-subview-body {
122 .panel-subview-header,
123 .subviewbutton.panel-subview-footer {
124 box-sizing: border-box;
125 /* min-height: 41px; */
129 .panel-subview-header {
131 background-color: #A09090;
133 font-variant: small-caps;
137 .panel-subview-footer {
138 border-top: 1px solid #A09090;
141 .cui-widget-panelview .panel-subview-header {
145 .cui-widget-panelview .subviewbutton.panel-subview-footer {
147 -moz-box-pack: center;
152 flex-direction: column;
156 #app-extension-point-end > #PanelUI-menu-button {
159 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
162 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
166 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
169 #PanelUI-popup > arrowscrollbox > scrollbox {
173 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
182 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
183 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
184 /* line-height: 1.1;*/
188 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
189 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
193 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
194 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
196 clip: rect(auto, auto, 2.3em, auto);
199 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
200 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
202 /* Need to override toolkit theming which sets margin: 0 !important; */
203 margin: 2px 0 0 !important;
206 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
211 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
212 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
213 -moz-margin-start: 0;
221 .panel-mainview:not([panelid="PanelUI-popup"]) {
225 panelview:not([mainview]) .toolbarbutton-text,
226 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
231 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
235 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
239 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
240 border-radius: 4px 4px 0 0;
243 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
244 border-radius: 0 0 4px 4px;
255 #PanelUI-contents-scroller {
262 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
268 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
269 .panelUI-grid .toolbarbutton-1,
270 .panel-customization-placeholder-child {
271 -moz-appearance: none;
272 -moz-box-orient: vertical;
273 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
274 height: calc(51px + 2.2em);
277 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
278 * should have a min-width set so they abide by the width set above (which they do outside of
279 * customize mode because they're in a flexed container) */
280 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
284 /* Help SDK buttons fit in. */
285 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
286 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
291 .customization-palette .toolbarbutton-1 {
292 -moz-appearance: none;
293 -moz-box-orient: vertical;
296 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
297 -moz-appearance: none;
298 -moz-box-orient: vertical;
299 width: calc(22.35em / 3 - 0.1px - 2px);
300 height: calc(49px + 2.2em);
304 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
305 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
306 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
309 .panel-customization-placeholder-child {
311 /* padding: 2px 6px;*/
314 .panelUI-grid .toolbarbutton-1[type="menu"] {
315 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
316 background-position: right 3px top 16px;
317 background-repeat: no-repeat;
320 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
321 background-position: left 3px top 16px;
324 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
328 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
329 -moz-box-align: center;
331 -moz-margin-start: -16px;
333 margin-bottom: 2.2em;
337 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
338 border-radius: 0 0 0 2px;
341 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
342 border-radius: 0 0 2px 0;
345 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
349 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
350 width: calc(22.35em / 3 - 0.1px);
351 margin: 0 !important;
354 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
355 -moz-box-align: center;
356 -moz-box-pack: center;
359 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
363 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
366 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
367 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
368 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
369 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
370 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
371 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
372 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
377 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
378 * which was affecting subview display. Because of this, we're hiding the iframe *only*
379 * when displaying a subview. The discerning user might notice this, but it's not nearly
380 * as bad as the brokenness.
381 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
384 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
388 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
392 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
393 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
394 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
395 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
396 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
397 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container,
398 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
399 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
400 .panel-customization-placeholder-child > .toolbarbutton-icon {
403 /* Explanation for the below formula (A / B - C)
405 Each button is 22.35em / 3 - 0.1px wide
407 Each button has two margins.
409 The button icon is 32 pixels wide.
410 The button has 12px of horizontal padding (6 on each side).
411 The button has 0px of horizontal border (0 on each side).
412 Total width of button's icon + button padding should therefore be 44px,
413 which means each horizontal margin should be the half the button's width - (44/2) px.
415 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
418 /* above we treat the container as the icon for the margins, that is so the
419 /* badge itself is positioned correctly. Here we make sure that the icon itself
420 /* has the minum size we want, but no padding/margin. */
421 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
428 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
432 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
436 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
437 -moz-margin-end: 2px;
440 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
441 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
447 #zoom-in-button > .toolbarbutton-text,
448 #zoom-out-button > .toolbarbutton-text,
449 #zoom-reset-button > .toolbarbutton-icon {
456 flex-direction: column;
457 /* background-color: hsla(210,4%,10%,.07);*/
460 /* min-height: 4em;*/
461 border-bottom-right-radius: 4px;
462 border-bottom-left-radius: 4px;
465 #PanelUI-footer-inner {
467 border-top: 1px solid #9C9CFF;
470 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
474 #PanelUI-footer-inner > toolbarseparator {
476 border-left: 1px solid #9C9CFF;
480 #PanelUI-footer-inner:hover > toolbarseparator {
484 #PanelUI-update-status,
491 box-sizing: border-box;
496 transition: background-color;
497 -moz-box-orient: horizontal;
500 #PanelUI-update-status,
501 #PanelUI-fxa-status {
502 border-top: 1px solid #9C9CFF;
503 border-bottom: 1px solid transparent;
507 #PanelUI-update-status > .toolbarbutton-text,
508 #PanelUI-fxa-status > .toolbarbutton-text {
509 width: 0; /* Fancy cropping solution for flexbox. */
512 #PanelUI-help[panel-multiview-anchor="true"] {
513 -moz-image-region: rect(0, 32px, 16px, 16px);
521 #PanelUI-update-status > .toolbarbutton-text,
522 #PanelUI-fxa-status > .toolbarbutton-text,
523 #PanelUI-customize > .toolbarbutton-text {
529 #PanelUI-help > .toolbarbutton-text,
530 #PanelUI-quit > .toolbarbutton-text {
534 #PanelUI-update-status > .toolbarbutton-icon,
535 #PanelUI-fxa-status > .toolbarbutton-icon,
536 #PanelUI-customize > .toolbarbutton-icon,
537 #PanelUI-help > .toolbarbutton-icon,
538 #PanelUI-quit > .toolbarbutton-icon {
544 -moz-padding-start: 15px;
545 -moz-border-start-style: none;
548 #PanelUI-update-status {
549 width: calc(22.35em + 30px);
550 -moz-padding-start: 15px;
551 -moz-border-start-style: none;
554 #PanelUI-update-status {
555 list-style-image: url(chrome://branding/content/icon16.png);
558 #PanelUI-fxa-status {
559 -moz-padding-start: 15px;
560 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
563 #PanelUI-fxa-status[syncstatus="active"] {
564 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
567 #PanelUI-fxa-status[fxastatus="migrate-signup"],
568 #PanelUI-fxa-status[fxastatus="migrate-verify"] {
569 list-style-image: url(chrome://global/skin/warning-16.png);
573 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
576 #customization-panelHolder #PanelUI-customize {
577 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
581 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
585 -moz-border-end-style: none;
586 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
593 -moz-image-region: rect(0, 16px, 16px, 0);
596 #PanelUI-customize:hover,
597 #PanelUI-help:not([disabled]):hover,
598 #PanelUI-quit:not([disabled]):hover,
599 #PanelUI-customize:hover:active,
600 #PanelUI-help:not([disabled]):hover:active,
601 #PanelUI-quit:not([disabled]):hover:active {
602 -moz-image-region: rect(0, 32px, 16px, 16px);
605 #PanelUI-help[disabled],
606 #PanelUI-quit[disabled] {
607 -moz-image-region: rect(0, 48px, 16px, 32px);
610 #PanelUI-fxa-status:not([disabled]):hover,
611 #PanelUI-help:not([disabled]):hover,
612 #PanelUI-customize:hover,
613 #PanelUI-quit:not([disabled]):hover {
616 #PanelUI-fxa-status:not([disabled]):hover:active,
617 #PanelUI-help:not([disabled]):hover:active,
618 #PanelUI-customize:hover:active,
619 #PanelUI-quit:not([disabled]):hover:active {
622 #PanelUI-fxa-status:not([disabled]):hover,
623 #PanelUI-fxa-status:not([disabled]):hover:active {
626 #PanelUI-update-status {
630 #PanelUI-update-status[update-status="succeeded"] {
631 background-color: #008484;
635 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
636 background-color: #FFCF00;
639 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
640 background-color: #FF9F00;
643 #PanelUI-update-status[update-status="failed"] {
644 background-color: #FF0000;
648 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
649 background-color: #FFCF00;
652 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
653 background-color: #FF9F00;
656 #PanelUI-quit:not([disabled]):hover {
657 background-color: #FF0000;
660 #PanelUI-quit:not([disabled]):hover:active {
661 background-color: #FF9F00;
664 #customization-panelHolder #PanelUI-customize {
666 background-color: #008484;
671 #customization-panelHolder #PanelUI-customize + toolbarseparator {
675 #customization-panelHolder #PanelUI-customize:hover,
676 #customization-panelHolder #PanelUI-customize:hover:active {
677 background-color: #FFCF00;
681 #customization-palette .toolbarbutton-multiline-text,
682 #customization-palette .toolbarbutton-text {
686 panelview .toolbarbutton-1,
688 .widget-overflow-list .toolbarbutton-1,
689 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
690 .share-provider-button,
691 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
693 background-color: hsla(210,4%,10%,0);
696 border-color: hsla(210,4%,10%,0);*/
699 panelview .toolbarbutton-1,
701 .widget-overflow-list .toolbarbutton-1,
702 .share-provider-button,
703 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
707 .subviewbutton.panel-subview-footer {
708 /* border-radius: 0; */
712 .subviewbutton.panel-subview-footer > .menu-text {
713 -moz-margin-start: 0px !important;
714 -moz-padding-start: 6px;
715 -moz-padding-end: 6px;
720 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
724 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
729 .subviewbutton.panel-subview-footer > .menu-accel-container {
730 -moz-padding-start: 6px;
733 .subviewbutton:not(.panel-subview-footer) {
737 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
738 /* Bookmark items need a more specific selector. */
739 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
740 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
744 .PanelUI-subView .subviewbutton[shortcut]::after {
745 content: attr(shortcut);
750 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
751 -moz-margin-start: 10px;
754 /* This is a <label> but it should fit in with the menu font- and colorwise. */
755 #PanelUI-characterEncodingView-autodetect-label {
760 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
765 panelview .toolbarbutton-1,
766 .widget-overflow-list .toolbarbutton-1 {
771 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
772 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
773 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
774 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
775 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
776 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
777 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
778 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
779 background-color: hsla(210,4%,10%,.08);
780 border-color: hsla(210,4%,10%,.11);
783 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
784 border-color: hsla(210,4%,10%,.11);
787 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
788 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
789 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
790 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
791 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
792 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
793 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
794 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
795 background-color: hsla(210,4%,10%,.12);
796 border-color: hsla(210,4%,10%,.14);
797 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
800 .subviewbutton.panel-subview-footer {
801 margin: 4px -4px -4px;
802 background-color: hsla(210,4%,10%,.07);
803 border-top: 1px solid hsla(210,4%,10%,.12);
808 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
809 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
810 background-color: hsla(210,4%,10%,.1);
811 border-top: 1px solid hsla(210,4%,10%,.12);
814 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
815 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
816 background-color: hsla(210,4%,10%,.15);
817 border-top: 1px solid hsla(210,4%,10%,.12);
818 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
821 #BMB_bookmarksPopup .subviewbutton {
826 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
830 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
831 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
832 -moz-appearance: none;
837 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
838 #BMB_bookmarksPopup arrowscrollbox {
842 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
843 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
847 / Popups with only one item don't have a footer /
848 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
849 / These popups never have a footer /
850 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
851 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
852 / And so they need some bottom padding: /
856 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
857 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
862 .PanelUI-subView menuseparator,
863 .PanelUI-subView toolbarseparator,
864 .cui-widget-panelview menuseparator {
865 -moz-appearance: none;
867 border-top: 1px solid #9C9CFF;
872 .PanelUI-subView menuseparator,
873 .PanelUI-subView toolbarseparator {
874 /* -moz-margin-start: -5px;
875 -moz-margin-end: -4px;*/
878 .PanelUI-subView menuseparator.small-separator,
879 .PanelUI-subView toolbarseparator.small-separator {
884 .cui-widget-panelview menuseparator.small-separator {
885 /* margin-left: 10px;
886 margin-right: 10px;*/
889 .subviewbutton > .menu-accel-container {
890 -moz-box-pack: start;
891 -moz-margin-start: 10px;
892 -moz-margin-end: auto;
896 #PanelUI-historyItems > toolbarbutton {
897 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
900 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
901 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
902 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
907 toolbarbutton[panel-multiview-anchor="true"],
908 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
910 background-color: #008484;
913 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
917 #PanelUI-help[panel-multiview-anchor="true"] {
918 background-image: none;
921 #PanelUI-help[panel-multiview-anchor="true"]::after {
927 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
928 background-repeat: no-repeat;
929 background-color: #008484;
930 background-position: left 10px center, 0;
933 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
934 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
935 background-position: right 10px center, 0;
938 toolbarbutton[panel-multiview-anchor="true"] {
939 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
940 background-position: right calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
941 background-repeat: no-repeat;
944 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
945 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
946 background-position: left calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
949 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
950 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
954 #search-container[cui-areatype="menu-panel"],
955 #wrapper-search-container[place="panel"] {
959 #search-container[cui-areatype="menu-panel"] {
964 toolbarpaletteitem[place="palette"] > #search-container {
969 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
971 transition-property: background-color, border-color;
972 transition-duration: 150ms;
975 /* Make direct siblings overlap borders: */
976 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
977 /* border-top-color: transparent !important; */
980 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
981 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
982 /* margin-top: -1px; */
985 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
990 min-width: calc(22.35em / 3 - 0.1px);
991 max-width: calc(22.35em / 3 - 0.1px);
992 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
993 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
994 height: calc(2.2em + 4px);
996 -moz-box-orient: horizontal;
999 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1000 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1001 /* reduce the width with 2px for this button to compensate for two separators
1003 min-width: calc(22.35em / 3 - 0.1px - 2px);
1004 max-width: calc(22.35em / 3 - 0.1px - 2px);
1007 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1011 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1015 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1016 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1017 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1018 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1019 border-top-right-radius: 0;
1020 border-bottom-right-radius: 0;
1023 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1024 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1025 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1026 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1027 border-top-left-radius: 0;
1028 border-bottom-left-radius: 0;
1031 .toolbaritem-combined-buttons > separator {
1032 -moz-appearance: none;
1034 -moz-box-align: stretch;
1037 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1041 /* background: hsla(210,4%,10%,.15);*/
1042 transition-property: margin;
1043 transition-duration: 10ms;
1044 transition-timing-function: ease;
1047 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1051 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1055 .cui-widget-panelview,
1056 #widget-overflow-scroller {
1061 #widget-overflow-scroller {
1064 margin-bottom: 10px;
1067 #widget-overflow-list {
1070 padding-right: 10px;
1073 toolbaritem[overflowedItem=true],
1074 toolbarbutton[overflowedItem=true] {
1078 background-repeat: no-repeat;
1079 background-position: 0 center;
1082 .widget-overflow-list .toolbarbutton-1,
1083 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1084 -moz-box-align: center;
1085 -moz-box-orient: horizontal;
1088 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1089 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1091 -moz-padding-start: .5em;
1094 #widget-overflow-list > .toolbaritem-combined-buttons {
1098 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1103 -moz-margin-end: -1px;
1106 .subviewbutton[checked="true"] {
1107 background-image: url("chrome://global/skin/menu/menu-check.gif");
1108 background-position: top 5px left 4px;
1109 background-repeat: no-repeat;
1112 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1113 background-position: top 5px right 4px;
1116 .subviewbutton[checked="true"]:hover {
1117 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1120 .subbiewbutton > .menu-iconic-left {
1121 -moz-margin-end: 3px;
1124 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1128 .panel-mainview[panelid=customizationui-widget-panel],
1129 #customizationui-widget-multiview > .panel-viewcontainer,
1130 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1131 #PanelUI-panicView > .panel-subview-body,
1132 #PanelUI-panicView {
1137 #PanelUI-panicView.cui-widget-panelview {
1141 #PanelUI-panic-timeframe {
1143 border-bottom: 1px solid #A09090;
1146 #panic-button-success-icon,
1147 #PanelUI-panic-timeframe-icon,
1148 #PanelUI-panic-timeframe-icon-small {
1149 background-color: transparent;
1150 -moz-margin-end: 10px;
1153 #panic-button-success-icon,
1154 #PanelUI-panic-timeframe-icon {
1155 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1160 #PanelUI-panic-timeframe-icon-small {
1161 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1166 /* current attribute is only set when in use as a subview instead of a main view */
1167 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1171 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1175 #panic-button-success-header,
1176 #PanelUI-panic-header {
1177 -moz-box-align: center;
1181 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1185 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1186 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1187 transform: scaleX(-1);
1194 .subviewradio@buttonStateHover@ {
1197 .subviewradio[selected],
1198 .subviewradio[selected]:hover,
1199 .subviewradio@buttonStateActive@ {
1202 .subviewradio > .radio-check {
1205 .subviewradio > .radio-check[selected] {
1209 #PanelUI-panic-explanations {
1210 padding: 10px 10px 0;
1213 #PanelUI-panic-actionlist-main-label {
1218 .PanelUI-panic-actionlist {
1219 -moz-padding-start: 20px;
1221 padding-bottom: 2px;
1222 background-size: 16px 16px;
1223 background-repeat: no-repeat;
1224 background-color: transparent;
1225 background-position: center left;
1228 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1229 background-position: center right;
1232 #PanelUI-panic-actionlist-cookies {
1233 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1236 #PanelUI-panic-actionlist-history {
1237 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1240 #PanelUI-panic-actionlist-windows {
1241 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1244 #PanelUI-panic-actionlist-newwindow {
1245 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1248 #PanelUI-panic-warning {
1255 #PanelUI-panic-view-button {
1256 background-color: #FF0000;
1260 #PanelUI-panic-view-button:hover {
1261 background-color: #FFCF00;
1264 #PanelUI-panic-view-button:hover:active {
1265 background-color: #FF9F00;
1268 #PanelUI-panic-view-button > .toolbarbutton-text {
1273 #panic-button-success-closebutton {
1276 #panic-button-success-closebutton:hover {
1279 #panic-button-success-closebutton:hover:active {
1282 /* === END panelUIOverlay.inc.css === */
1285 background-color: #000000;
1288 #PanelUI-contents #zoom-out-btn {
1290 padding-right: 12px;
1293 #PanelUI-contents #zoom-in-btn {
1295 padding-right: 12px;
1298 /* bookmark panel submenus */
1300 #BMB_bookmarksPopup menupopup[placespopup=true] {
1301 /* background: transparent;
1306 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1307 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1308 /* background: var(--panel-arrowcontent-background);
1309 border: var(--panel-arrowcontent-border);
1310 border-radius: 3.5px;
1314 #BMB_bookmarksPopup menupopup {
1315 /* padding-top: 2px;*/
1318 /* Add some space at the top because there are no headers: */
1319 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1320 /* padding-top: 4px;*/
1323 /* bookmark panel separator */
1324 #BMB_bookmarksPopup menuseparator {
1329 .subviewbutton > .menu-right,
1330 .subviewbutton > .menu-iconic-left {
1331 /* padding-top: 1px;
1333 margin-bottom: 2px;*/
1336 /* Disabled empty item looks too small otherwise, because it has no icon. */
1337 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1338 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1339 menuitem[type="checkbox"].subviewbutton {
1340 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1341 * 2px for its border, see above */
1342 /* min-height: 22px;*/
1345 .subviewbutton > .toolbarbutton-text {
1346 /* padding-top: 3px;
1347 padding-bottom: 3px;*/
1350 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1351 -moz-appearance: none;
1353 -moz-margin-start: 3px;
1356 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1358 -moz-padding-start: 0;
1362 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1363 /* transform: scaleX(-1); */
1366 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1370 .subviewbutton > .toolbarbutton-text {
1371 -moz-padding-start: 16px;
1374 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1375 -moz-padding-start: 0;
1378 /* subviewbutton entries for social sidebars have images that come from external
1379 /* sources, and are not guaranteed to be the size we want, so force the size on
1381 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1386 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1390 menu.subviewbutton > .menu-right {
1391 list-style-image: url("chrome://global/skin/menu/menu-arrow.gif");
1393 menu.subviewbutton:hover > .menu-right,
1394 menu.subviewbutton[_moz-menuactive="true"] > .menu-right {
1395 list-style-image: url("chrome://global/skin/menu/menu-arrow-hover.gif");
1397 menu[disabled="true"].subviewbutton > .menu-right {
1398 list-style-image: url("chrome://global/skin/menu/menu-arrow-disabled.gif");