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 /* Bug 1164419 - increase Pocket panel size to accomidate wider Russian text. */
226 panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-viewstack > .panel-mainview:not([panelid="PanelUI-popup"]) {
227 max-width: 33em; /* standaloneSubviewWidth + 3 */
230 panelview:not([mainview]) .toolbarbutton-text,
231 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
236 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
240 .cui-widget-panel[viewId="PanelUI-pocketView"] > .panel-arrowcontainer > .panel-arrowcontent {
245 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
249 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
250 border-radius: 4px 4px 0 0;
253 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
254 border-radius: 0 0 4px 4px;
265 #PanelUI-contents-scroller {
272 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
278 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
279 .panelUI-grid .toolbarbutton-1,
280 .panel-customization-placeholder-child {
281 -moz-appearance: none;
282 -moz-box-orient: vertical;
283 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
284 height: calc(51px + 2.2em);
287 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
288 * should have a min-width set so they abide by the width set above (which they do outside of
289 * customize mode because they're in a flexed container) */
290 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
294 /* Help SDK buttons fit in. */
295 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
296 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
301 .customization-palette .toolbarbutton-1 {
302 -moz-appearance: none;
303 -moz-box-orient: vertical;
306 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
307 -moz-appearance: none;
308 -moz-box-orient: vertical;
309 width: calc(22.35em / 3 - 0.1px - 2px);
310 height: calc(49px + 2.2em);
314 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
315 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
316 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
319 .panel-customization-placeholder-child {
321 /* padding: 2px 6px;*/
324 .panelUI-grid .toolbarbutton-1[type="menu"] {
325 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
326 background-position: right 3px top 16px;
327 background-repeat: no-repeat;
330 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
331 background-position: left 3px top 16px;
334 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
338 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
339 -moz-box-align: center;
341 -moz-margin-start: -16px;
343 margin-bottom: 2.2em;
347 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
348 border-radius: 0 0 0 2px;
351 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
352 border-radius: 0 0 2px 0;
355 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
359 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
360 width: calc(22.35em / 3 - 0.1px);
361 margin: 0 !important;
364 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
365 -moz-box-align: center;
366 -moz-box-pack: center;
369 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
373 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
376 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
377 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
378 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
379 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
380 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
381 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
382 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
387 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
388 * which was affecting subview display. Because of this, we're hiding the iframe *only*
389 * when displaying a subview. The discerning user might notice this, but it's not nearly
390 * as bad as the brokenness.
391 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
394 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
398 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
402 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
403 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
404 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
405 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
406 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
407 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container,
408 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
409 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
410 .panel-customization-placeholder-child > .toolbarbutton-icon {
413 /* Explanation for the below formula (A / B - C)
415 Each button is 22.35em / 3 - 0.1px wide
417 Each button has two margins.
419 The button icon is 32 pixels wide.
420 The button has 12px of horizontal padding (6 on each side).
421 The button has 0px of horizontal border (0 on each side).
422 Total width of button's icon + button padding should therefore be 44px,
423 which means each horizontal margin should be the half the button's width - (44/2) px.
425 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
428 /* above we treat the container as the icon for the margins, that is so the
429 /* badge itself is positioned correctly. Here we make sure that the icon itself
430 /* has the minum size we want, but no padding/margin. */
431 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
438 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
442 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
446 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
447 -moz-margin-end: 2px;
450 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
451 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
457 #zoom-in-button > .toolbarbutton-text,
458 #zoom-out-button > .toolbarbutton-text,
459 #zoom-reset-button > .toolbarbutton-icon {
466 flex-direction: column;
467 /* background-color: hsla(210,4%,10%,.07);*/
470 /* min-height: 4em;*/
471 border-bottom-right-radius: 4px;
472 border-bottom-left-radius: 4px;
475 #PanelUI-footer-inner {
477 border-top: 1px solid #9C9CFF;
480 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
484 #PanelUI-footer-inner > toolbarseparator {
486 border-left: 1px solid #9C9CFF;
490 #PanelUI-footer-inner:hover > toolbarseparator {
494 #PanelUI-update-status,
501 box-sizing: border-box;
506 transition: background-color;
507 -moz-box-orient: horizontal;
510 #PanelUI-update-status,
511 #PanelUI-fxa-status {
512 border-top: 1px solid #9C9CFF;
513 border-bottom: 1px solid transparent;
517 #PanelUI-update-status > .toolbarbutton-text,
518 #PanelUI-fxa-status > .toolbarbutton-text {
519 width: 0; /* Fancy cropping solution for flexbox. */
522 #PanelUI-help[panel-multiview-anchor="true"] {
523 -moz-image-region: rect(0, 32px, 16px, 16px);
531 #PanelUI-update-status > .toolbarbutton-text,
532 #PanelUI-fxa-status > .toolbarbutton-text,
533 #PanelUI-customize > .toolbarbutton-text {
539 #PanelUI-help > .toolbarbutton-text,
540 #PanelUI-quit > .toolbarbutton-text {
544 #PanelUI-update-status > .toolbarbutton-icon,
545 #PanelUI-fxa-status > .toolbarbutton-icon,
546 #PanelUI-customize > .toolbarbutton-icon,
547 #PanelUI-help > .toolbarbutton-icon,
548 #PanelUI-quit > .toolbarbutton-icon {
554 -moz-padding-start: 15px;
555 -moz-border-start-style: none;
558 #PanelUI-update-status {
559 width: calc(22.35em + 30px);
560 -moz-padding-start: 15px;
561 -moz-border-start-style: none;
564 #PanelUI-update-status {
565 list-style-image: url(chrome://branding/content/icon16.png);
568 #PanelUI-fxa-status {
569 -moz-padding-start: 15px;
570 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
573 #PanelUI-fxa-status[syncstatus="active"] {
574 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
577 #PanelUI-fxa-status[fxastatus="migrate-signup"],
578 #PanelUI-fxa-status[fxastatus="migrate-verify"] {
579 list-style-image: url(chrome://global/skin/warning-16.png);
583 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
586 #customization-panelHolder #PanelUI-customize {
587 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
591 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
595 -moz-border-end-style: none;
596 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
603 -moz-image-region: rect(0, 16px, 16px, 0);
606 #PanelUI-customize:hover,
607 #PanelUI-help:not([disabled]):hover,
608 #PanelUI-quit:not([disabled]):hover,
609 #PanelUI-customize:hover:active,
610 #PanelUI-help:not([disabled]):hover:active,
611 #PanelUI-quit:not([disabled]):hover:active {
612 -moz-image-region: rect(0, 32px, 16px, 16px);
615 #PanelUI-help[disabled],
616 #PanelUI-quit[disabled] {
617 -moz-image-region: rect(0, 48px, 16px, 32px);
620 #PanelUI-fxa-status:not([disabled]):hover,
621 #PanelUI-help:not([disabled]):hover,
622 #PanelUI-customize:hover,
623 #PanelUI-quit:not([disabled]):hover {
626 #PanelUI-fxa-status:not([disabled]):hover:active,
627 #PanelUI-help:not([disabled]):hover:active,
628 #PanelUI-customize:hover:active,
629 #PanelUI-quit:not([disabled]):hover:active {
632 #PanelUI-fxa-status:not([disabled]):hover,
633 #PanelUI-fxa-status:not([disabled]):hover:active {
636 #PanelUI-update-status {
640 #PanelUI-update-status[update-status="succeeded"] {
641 background-color: #008484;
645 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
646 background-color: #FFCF00;
649 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
650 background-color: #FF9F00;
653 #PanelUI-update-status[update-status="failed"] {
654 background-color: #FF0000;
658 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
659 background-color: #FFCF00;
662 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
663 background-color: #FF9F00;
666 #PanelUI-quit:not([disabled]):hover {
667 background-color: #FF0000;
670 #PanelUI-quit:not([disabled]):hover:active {
671 background-color: #FF9F00;
674 #customization-panelHolder #PanelUI-customize {
676 background-color: #008484;
681 #customization-panelHolder #PanelUI-customize + toolbarseparator {
685 #customization-panelHolder #PanelUI-customize:hover,
686 #customization-panelHolder #PanelUI-customize:hover:active {
687 background-color: #FFCF00;
691 #customization-palette .toolbarbutton-multiline-text,
692 #customization-palette .toolbarbutton-text {
696 panelview .toolbarbutton-1,
698 .widget-overflow-list .toolbarbutton-1,
699 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
700 .share-provider-button,
701 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
703 background-color: hsla(210,4%,10%,0);
706 border-color: hsla(210,4%,10%,0);*/
709 panelview .toolbarbutton-1,
711 .widget-overflow-list .toolbarbutton-1,
712 .share-provider-button,
713 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
717 .subviewbutton.panel-subview-footer {
718 /* border-radius: 0; */
722 .subviewbutton.panel-subview-footer > .menu-text {
723 -moz-margin-start: 0px !important;
724 -moz-padding-start: 6px;
725 -moz-padding-end: 6px;
730 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
734 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
739 .subviewbutton.panel-subview-footer > .menu-accel-container {
740 -moz-padding-start: 6px;
743 .subviewbutton:not(.panel-subview-footer) {
747 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
748 /* Bookmark items need a more specific selector. */
749 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
750 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
754 .PanelUI-subView .subviewbutton[shortcut]::after {
755 content: attr(shortcut);
760 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
761 -moz-margin-start: 10px;
764 /* This is a <label> but it should fit in with the menu font- and colorwise. */
765 #PanelUI-characterEncodingView-autodetect-label {
770 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
775 panelview .toolbarbutton-1,
776 .widget-overflow-list .toolbarbutton-1 {
781 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
782 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
783 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
784 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
785 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
786 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
787 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
788 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
789 background-color: hsla(210,4%,10%,.08);
790 border-color: hsla(210,4%,10%,.11);
793 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
794 border-color: hsla(210,4%,10%,.11);
797 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
798 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
799 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
800 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
801 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
802 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
803 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
804 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
805 background-color: hsla(210,4%,10%,.12);
806 border-color: hsla(210,4%,10%,.14);
807 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
810 .subviewbutton.panel-subview-footer {
811 margin: 4px -4px -4px;
812 background-color: hsla(210,4%,10%,.07);
813 border-top: 1px solid hsla(210,4%,10%,.12);
818 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
819 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
820 background-color: hsla(210,4%,10%,.1);
821 border-top: 1px solid hsla(210,4%,10%,.12);
824 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
825 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
826 background-color: hsla(210,4%,10%,.15);
827 border-top: 1px solid hsla(210,4%,10%,.12);
828 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
831 #BMB_bookmarksPopup .subviewbutton {
836 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
840 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
841 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
842 -moz-appearance: none;
847 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
848 #BMB_bookmarksPopup arrowscrollbox {
852 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
853 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
857 / Popups with only one item don't have a footer /
858 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
859 / These popups never have a footer /
860 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
861 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
862 / And so they need some bottom padding: /
866 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
867 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
872 .PanelUI-subView menuseparator,
873 .PanelUI-subView toolbarseparator,
874 .cui-widget-panelview menuseparator {
875 -moz-appearance: none;
877 border-top: 1px solid #9C9CFF;
882 .PanelUI-subView menuseparator,
883 .PanelUI-subView toolbarseparator {
884 /* -moz-margin-start: -5px;
885 -moz-margin-end: -4px;*/
888 .PanelUI-subView menuseparator.small-separator,
889 .PanelUI-subView toolbarseparator.small-separator {
894 .cui-widget-panelview menuseparator.small-separator {
895 /* margin-left: 10px;
896 margin-right: 10px;*/
899 .subviewbutton > .menu-accel-container {
900 -moz-box-pack: start;
901 -moz-margin-start: 10px;
902 -moz-margin-end: auto;
906 #PanelUI-historyItems > toolbarbutton {
907 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
910 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
911 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
912 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
917 toolbarbutton[panel-multiview-anchor="true"],
918 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
920 background-color: #008484;
923 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
927 #PanelUI-help[panel-multiview-anchor="true"] {
928 background-image: none;
931 #PanelUI-help[panel-multiview-anchor="true"]::after {
937 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
938 background-repeat: no-repeat;
939 background-color: #008484;
940 background-position: left 10px center, 0;
943 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
944 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
945 background-position: right 10px center, 0;
948 toolbarbutton[panel-multiview-anchor="true"] {
949 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
950 background-position: right calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
951 background-repeat: no-repeat;
954 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
955 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
956 background-position: left calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
959 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
960 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
964 #search-container[cui-areatype="menu-panel"],
965 #wrapper-search-container[place="panel"] {
969 #search-container[cui-areatype="menu-panel"] {
974 toolbarpaletteitem[place="palette"] > #search-container {
979 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
981 transition-property: background-color, border-color;
982 transition-duration: 150ms;
985 /* Make direct siblings overlap borders: */
986 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
987 /* border-top-color: transparent !important; */
990 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
991 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
992 /* margin-top: -1px; */
995 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1000 min-width: calc(22.35em / 3 - 0.1px);
1001 max-width: calc(22.35em / 3 - 0.1px);
1002 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1003 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1004 height: calc(2.2em + 4px);
1006 -moz-box-orient: horizontal;
1009 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1010 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1011 /* reduce the width with 2px for this button to compensate for two separators
1013 min-width: calc(22.35em / 3 - 0.1px - 2px);
1014 max-width: calc(22.35em / 3 - 0.1px - 2px);
1017 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1021 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1025 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1026 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1027 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1028 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1029 border-top-right-radius: 0;
1030 border-bottom-right-radius: 0;
1033 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1034 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1035 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1036 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1037 border-top-left-radius: 0;
1038 border-bottom-left-radius: 0;
1041 .toolbaritem-combined-buttons > separator {
1042 -moz-appearance: none;
1044 -moz-box-align: stretch;
1047 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1051 /* background: hsla(210,4%,10%,.15);*/
1052 transition-property: margin;
1053 transition-duration: 10ms;
1054 transition-timing-function: ease;
1057 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1061 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1065 .cui-widget-panelview,
1066 #widget-overflow-scroller {
1071 #widget-overflow-scroller {
1074 margin-bottom: 10px;
1077 #widget-overflow-list {
1080 padding-right: 10px;
1083 toolbaritem[overflowedItem=true],
1084 toolbarbutton[overflowedItem=true] {
1088 background-repeat: no-repeat;
1089 background-position: 0 center;
1092 .widget-overflow-list .toolbarbutton-1,
1093 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1094 -moz-box-align: center;
1095 -moz-box-orient: horizontal;
1098 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1099 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1101 -moz-padding-start: .5em;
1104 #widget-overflow-list > .toolbaritem-combined-buttons {
1108 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1113 -moz-margin-end: -1px;
1116 .subviewbutton[checked="true"] {
1117 background-image: url("chrome://global/skin/menu/menu-check.gif");
1118 background-position: top 5px left 4px;
1119 background-repeat: no-repeat;
1122 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1123 background-position: top 5px right 4px;
1126 .subviewbutton[checked="true"]:hover {
1127 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1130 .subbiewbutton > .menu-iconic-left {
1131 -moz-margin-end: 3px;
1134 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1138 .panel-mainview[panelid=customizationui-widget-panel],
1139 #customizationui-widget-multiview > .panel-viewcontainer,
1140 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1141 #PanelUI-panicView > .panel-subview-body,
1143 #PanelUI-pocketView > .panel-subview-body,
1144 #PanelUI-pocketView {
1149 #PanelUI-panicView.cui-widget-panelview {
1153 #PanelUI-panic-timeframe {
1155 border-bottom: 1px solid #A09090;
1158 #panic-button-success-icon,
1159 #PanelUI-panic-timeframe-icon,
1160 #PanelUI-panic-timeframe-icon-small {
1161 background-color: transparent;
1162 -moz-margin-end: 10px;
1165 #panic-button-success-icon,
1166 #PanelUI-panic-timeframe-icon {
1167 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1172 #PanelUI-panic-timeframe-icon-small {
1173 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1178 /* current attribute is only set when in use as a subview instead of a main view */
1179 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1183 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1187 #panic-button-success-header,
1188 #PanelUI-panic-header {
1189 -moz-box-align: center;
1193 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1197 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1198 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1199 transform: scaleX(-1);
1206 .subviewradio@buttonStateHover@ {
1209 .subviewradio[selected],
1210 .subviewradio[selected]:hover,
1211 .subviewradio@buttonStateActive@ {
1214 .subviewradio > .radio-check {
1217 .subviewradio > .radio-check[selected] {
1221 #PanelUI-panic-explanations {
1222 padding: 10px 10px 0;
1225 #PanelUI-panic-actionlist-main-label {
1230 .PanelUI-panic-actionlist {
1231 -moz-padding-start: 20px;
1233 padding-bottom: 2px;
1234 background-size: 16px 16px;
1235 background-repeat: no-repeat;
1236 background-color: transparent;
1237 background-position: center left;
1240 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1241 background-position: center right;
1244 #PanelUI-panic-actionlist-cookies {
1245 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1248 #PanelUI-panic-actionlist-history {
1249 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1252 #PanelUI-panic-actionlist-windows {
1253 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1256 #PanelUI-panic-actionlist-newwindow {
1257 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1260 #PanelUI-panic-warning {
1267 #PanelUI-panic-view-button {
1268 background-color: #FF0000;
1272 #PanelUI-panic-view-button:hover {
1273 background-color: #FFCF00;
1276 #PanelUI-panic-view-button:hover:active {
1277 background-color: #FF9F00;
1280 #PanelUI-panic-view-button > .toolbarbutton-text {
1285 #panic-button-success-closebutton {
1288 #panic-button-success-closebutton:hover {
1291 #panic-button-success-closebutton:hover:active {
1294 /* === END panelUIOverlay.inc.css === */
1297 background-color: #000000;
1300 #PanelUI-contents #zoom-out-btn {
1302 padding-right: 12px;
1305 #PanelUI-contents #zoom-in-btn {
1307 padding-right: 12px;
1310 /* bookmark panel submenus */
1312 #BMB_bookmarksPopup menupopup[placespopup=true] {
1313 /* background: transparent;
1318 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1319 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1320 /* background: var(--panel-arrowcontent-background);
1321 border: var(--panel-arrowcontent-border);
1322 border-radius: 3.5px;
1326 #BMB_bookmarksPopup menupopup {
1327 /* padding-top: 2px;*/
1330 /* Add some space at the top because there are no headers: */
1331 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1332 /* padding-top: 4px;*/
1335 /* bookmark panel separator */
1336 #BMB_bookmarksPopup menuseparator {
1341 .subviewbutton > .menu-right,
1342 .subviewbutton > .menu-iconic-left {
1343 /* padding-top: 1px;
1345 margin-bottom: 2px;*/
1348 /* Disabled empty item looks too small otherwise, because it has no icon. */
1349 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1350 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1351 menuitem[type="checkbox"].subviewbutton {
1352 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1353 * 2px for its border, see above */
1354 /* min-height: 22px;*/
1357 .subviewbutton > .toolbarbutton-text {
1358 /* padding-top: 3px;
1359 padding-bottom: 3px;*/
1362 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1363 -moz-appearance: none;
1365 -moz-margin-start: 3px;
1368 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1370 -moz-padding-start: 0;
1374 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1375 /* transform: scaleX(-1); */
1378 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1382 .subviewbutton > .toolbarbutton-text {
1383 -moz-padding-start: 16px;
1386 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1387 -moz-padding-start: 0;
1390 /* subviewbutton entries for social sidebars have images that come from external
1391 /* sources, and are not guaranteed to be the size we want, so force the size on
1393 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1398 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1402 menu.subviewbutton > .menu-right {
1403 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow);
1404 /* Reset the rect we inherit from the button: */
1405 -moz-image-region: auto;
1407 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1408 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1409 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1411 menu[disabled="true"].subviewbutton > .menu-right {
1412 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");