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 panelUI.inc.css === */
8 --panel-ui-menuPanelWidth: 22.35em;
9 --panel-ui-menuPanelWidth-neg: -22.35em;
10 --panel-ui-standaloneSubviewWidth: 30em;
11 /* XXXgijs This is the ugliest bit of code I think I've ever written for Mozilla.
12 * Basically, the 0.1px is there to avoid CSS rounding errors causing buttons to wrap.
13 * For gory details, refer to https://bugzilla.mozilla.org/show_bug.cgi?id=963365#c11
14 * There's no calc() here (and therefore lots of calc() where this is used) because
15 * we don't support nested calc(): https://bugzilla.mozilla.org/show_bug.cgi?id=968761 */
16 --panel-ui-menuPanelButtonWidth: calc(var(--panel-ui-menuPanelWidth) / 3 - 0.1px);
17 --panel-ui-menuPanelButtonWidth-min2: calc(var(--panel-ui-menuPanelWidth) / 3 - 0.1px - 2px);
18 --panel-ui-menuPanelButtonIconMargin: calc((var(--panel-ui-menuPanelWidth) / 3 - 0.1px) / 2 - 22px);
19 --panel-ui-menuPanelMultiviewBgPos: calc((var(--panel-ui-menuPanelWidth) / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px);
22 --panel-ui-exit-subview-gutter-width: 38px;
25 #PanelUI-popup #PanelUI-contents:empty {
29 #PanelUI-popup #PanelUI-contents:empty::before {
31 background-image: url(chrome://browser/skin/customizableui/whimsy.png);
32 background-size: 64px 64px;
37 transition: transform 1s ease-out;
38 animation: whimsyMoveX 3.05s linear 0s infinite alternate,
39 whimsyMoveY 3.4s linear 0s infinite alternate;
42 #PanelUI-popup #PanelUI-contents:not(:hover):empty::before {
43 filter: grayscale(100%);
46 #PanelUI-popup #PanelUI-contents:active:empty::before {
47 animation: whimsyMoveX 3.05s linear 0s infinite alternate,
48 whimsyMoveY 3.4s linear 0s infinite alternate,
49 whimsyRotate 1s linear 0s infinite normal;
52 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before {
53 animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
54 whimsyMoveY 3.4s linear 0s infinite alternate;
57 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):active:empty::before {
58 animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
59 whimsyMoveY 3.4s linear 0s infinite alternate,
60 whimsyRotate 1s linear 0s infinite normal;
63 @media (min-resolution: 2dppx) {
64 #PanelUI-popup #PanelUI-contents:empty::before {
65 background-image: url("chrome://browser/skin/customizableui/whimsy@2x.png");
69 @keyframes whimsyMoveX {
70 /* These values are adjusted for the padding on the panel. */
71 from { margin-left: -15px; } to { margin-left: calc(100% - 49px); }
74 @keyframes whimsyMoveXRTL {
75 /* These values are adjusted for the padding on the panel. */
76 from { margin-right: -15px; } to { margin-right: calc(100% - 49px); }
79 @keyframes whimsyMoveY {
80 /* These values are adjusted for the padding and height of the panel. */
81 from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
84 @keyframes whimsyRotate {
85 to { transform: perspective(5000px) rotateY(360deg); }
88 #customization-panelHolder {
93 margin-inline-start: 3px;
96 #nav-bar[brighttext] > #PanelUI-button {
99 #PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
103 background-size: contain;
107 #PanelUI-menu-button[badge-status="download-success"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
111 #PanelUI-menu-button[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
112 #PanelUI-menu-button[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
113 #PanelUI-menu-button[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
114 background: #008484 url(chrome://browser/skin/update-badge.svg) no-repeat center;
117 border: 1px solid -moz-dialog;
118 /* "!important" is necessary to override the rule in toolbarbutton.css */
119 margin: -9px 0 0 !important;
120 margin-inline-end: -6px !important;
125 .panel-banner-item[notificationid^=update]::after {
126 background: #008484 url(chrome://browser/skin/update-badge.svg) no-repeat center;
130 .panel-banner-item[notificationid^=update] {
131 list-style-image: url(chrome://branding/content/icon16.png);
134 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
135 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
139 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
140 #PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
145 /* "!important" is necessary to override the rule in toolbarbutton.css */
146 margin-top: -1px !important;
147 margin-right: -2px !important;
150 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
154 #PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
158 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
160 background: transparent url(chrome://browser/skin/warning.svg) no-repeat center;
163 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
164 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
167 #PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
169 background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
174 background-clip: padding-box;
175 border-left: 1px solid var(--panel-separator-color);
176 margin-inline-start: var(--panel-ui-exit-subview-gutter-width);
179 .panel-viewstack[viewtype="main"] > .panel-subviews {
180 transform: translateX(var(--panel-ui-menuPanelWidth));
183 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
184 transform: translateX(var(--panel-ui-menuPanelWidth-neg));
187 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
191 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
195 .panel-subview-body {
201 #PanelUI-popup .panel-subview-body {
206 .panel-subview-header,
207 .subviewbutton.panel-subview-footer {
208 box-sizing: border-box;
209 /* min-height: 41px; */
213 .panel-subview-header {
215 background-color: var(--panel-separator-color);
217 font-variant: small-caps;
221 .panel-subview-footer {
222 border-top: 1px solid var(--panel-separator-color);
225 .cui-widget-panelview .panel-subview-header {
229 .cui-widget-panelview .subviewbutton.panel-subview-footer {
231 -moz-box-pack: center;
236 flex-direction: column;
240 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
243 #PanelUI-popup > arrowscrollbox > scrollbox {
247 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
252 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent,
253 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box {
257 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
258 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
259 /* line-height: 1.2;*/
263 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
264 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
268 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
269 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
271 clip: rect(-0.1em, auto, 2.6em, auto);
274 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
275 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
277 /* Need to override toolkit theming which sets margin: 0 !important; */
278 margin: 2px 0 0 !important;
281 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
286 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
287 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
288 margin-inline-start: 0;
292 max-width: var(--panel-ui-menuPanelWidth);
296 .panel-mainview:not([panelid="PanelUI-popup"]) {
297 max-width: var(--panel-ui-standaloneSubviewWidth);
300 /* Give WebExtension stand-alone panels extra width for Chrome compatibility */
301 .cui-widget-panel[viewId^=PanelUI-webext-] .panel-mainview {
305 .cui-widget-panel[viewId^=PanelUI-webext-] > .panel-arrowcontainer > .panel-arrowcontent {
309 panelview[id^=PanelUI-webext-] {
313 panelview:not([mainview]) .toolbarbutton-text,
314 .cui-widget-panel toolbarbutton:not([wrap]) > .toolbarbutton-text {
319 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
323 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
327 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
328 border-radius: 4px 4px 0 0;
331 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
332 border-radius: 0 0 4px 4px;
340 max-width: var(--panel-ui-menuPanelWidth);
343 #PanelUI-contents-scroller {
346 width: var(--panel-ui-menuPanelWidth);
350 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
356 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
357 .panelUI-grid .toolbarbutton-1,
358 .panel-customization-placeholder-child {
359 -moz-appearance: none;
360 -moz-box-orient: vertical;
361 width: var(--panel-ui-menuPanelButtonWidth-min2); /* LCARStrek: XXX: found out to be needed to fit the icons */
362 height: calc(51px + 2.2em);
365 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
366 * should have a min-width set so they abide by the width set above (which they do outside of
367 * customize mode because they're in a flexed container) */
368 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
372 /* Help SDK buttons fit in. */
373 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
374 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
375 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
376 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
381 toolbarpaletteitem:-moz-any([place="palette"], [place="panel"]) > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon {
386 .customization-palette .toolbarbutton-1 {
387 -moz-appearance: none;
388 -moz-box-orient: vertical;
391 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
392 -moz-appearance: none;
393 -moz-box-orient: vertical;
394 width: var(--panel-ui-menuPanelButtonWidth-min2);
395 height: calc(49px + 2.2em);
399 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
400 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
401 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
404 .panel-customization-placeholder-child {
406 /* padding: 2px 6px;*/
409 .panelUI-grid .toolbarbutton-1[type="menu"] {
410 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
411 background-position: right 3px top 16px;
412 background-repeat: no-repeat;
415 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
416 background-position: left 3px top 16px;
419 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
423 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
424 -moz-box-align: center;
426 margin-inline-start: -16px;
428 margin-bottom: 2.2em;
432 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
433 border-radius: 0 0 0 2px;
436 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
437 border-radius: 0 0 2px 0;
440 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
444 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
445 width: var(--panel-ui-menuPanelButtonWidth);
446 margin: 0 !important;
449 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
450 -moz-box-align: center;
451 -moz-box-pack: center;
454 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
458 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
461 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
462 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
463 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > .panel-banner-item,
464 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
465 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
466 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
467 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
468 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-label,
469 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-icon,
470 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
471 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
472 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
477 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
478 * which was affecting subview display. Because of this, we're hiding the iframe *only*
479 * when displaying a subview. The discerning user might notice this, but it's not nearly
480 * as bad as the brokenness.
481 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
484 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
488 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
492 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
493 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
494 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
495 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
496 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
497 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
498 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
499 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
500 .panel-customization-placeholder-child > .toolbarbutton-icon {
505 /* Explanation for the below formula (A / B - C)
507 Each button is @menuPanelButtonWidth@ wide
509 Each button has two margins.
511 The button icon is 32 pixels wide.
512 The button has 12px of horizontal padding (6 on each side).
513 The button has 0px of horizontal border (0 on each side).
514 Total width of button's icon + button padding should therefore be 44px,
515 which means each horizontal margin should be the half the button's width - (44/2) px.
517 margin: 4px var(--panel-ui-menuPanelButtonIconMargin);
520 /* above we treat the container as the icon for the margins, that is so the
521 /* badge itself is positioned correctly. Here we make sure that the icon itself
522 /* has the minimum size we want, but no padding/margin. */
523 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon,
524 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
533 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
537 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
541 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
542 margin-inline-end: 2px;
545 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
546 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
552 #zoom-in-button > .toolbarbutton-text,
553 #zoom-out-button > .toolbarbutton-text,
554 #zoom-reset-button > .toolbarbutton-icon {
561 flex-direction: column;
562 /* background-color: var(--arrowpanel-dimmed);*/
565 border-bottom-right-radius: 4px;
566 border-bottom-left-radius: 4px;
569 #main-window[customizing] #PanelUI-fxa-container,
570 #main-window[customizing] #PanelUI-footer-fxa {
574 #PanelUI-fxa-container:not([fxastatus="signedin"]) > toolbarseparator,
575 #PanelUI-fxa-container:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
576 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
577 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon {
581 #PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status::after,
582 #PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status::after {
583 content: url("chrome://browser/skin/warning.svg");
592 .addon-banner-item::after,
593 .panel-banner-item::after {
597 margin-inline-end: 16.5px;
602 background-color: #A09090;
603 /* Force border to override `.addon-banner-item` selector below */
604 /*border-top: 1px solid hsl(45, 100%, 77%) !important;*/
607 width: calc(22.35em + 30px);
608 padding-inline-start: 15px;
609 border-inline-start-style: none;
612 .addon-banner-item:hover {
613 background-color: #FFCF00;
616 .addon-banner-item:active {
617 background-color: #FF9F00;
620 .addon-banner-item > .toolbarbutton-icon {
625 .addon-banner-item::after {
626 background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
629 #PanelUI-fxa-status {
635 #PanelUI-footer-inner,
636 #PanelUI-fxa-container:not([hidden]),
637 #PanelUI-footer-fxa:not([hidden]) {
639 border-top: 1px solid var(--panel-separator-color);
642 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
643 #PanelUI-multiView[viewtype="subview"] #PanelUI-fxa-container,
644 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
648 #PanelUI-footer-inner > toolbarseparator,
649 #PanelUI-fxa-container > toolbarseparator,
650 #PanelUI-footer-fxa > toolbarseparator {
652 border-left: 1px solid var(--panel-separator-color);
656 #PanelUI-footer-inner:hover > toolbarseparator,
657 #PanelUI-fxa-container:hover > toolbarseparator,
658 #PanelUI-footer-fxa:hover > toolbarseparator {
671 box-sizing: border-box;
676 transition: background-color;
677 -moz-box-orient: horizontal;
681 border-top: 1px solid var(--panel-separator-color);
682 border-bottom: 1px solid transparent;
686 .panel-banner-item > .toolbarbutton-text {
687 width: 0; /* Fancy cropping solution for flexbox. */
690 #PanelUI-help[panel-multiview-anchor="true"] {
691 -moz-image-region: rect(0, 32px, 16px, 16px);
694 /* FxAccount indicator bits. */
698 -moz-appearance: none;
702 -moz-box-orient: horizontal;
703 -moz-image-region: rect(0, 16px, 16px, 0);
704 list-style-image: url(chrome://browser/skin/syncFx-horizontalbar.png);
709 padding-inline-start: 12px;
717 #appMenu-fxa-icon > .toolbarbutton-text {
721 #appMenu-fxa-icon[syncstatus="active"] {
722 list-style-image: url(chrome://browser/skin/syncFxProgress-horizontalbar.png);
725 #appMenu-fxa-avatar {
726 pointer-events: none;
727 list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
730 #appMenu-fxa-container {
731 -moz-box-orient: horizontal;
734 /* Handle different UI states. */
735 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label > .toolbarbutton-icon,
736 #appMenu-fxa-container:not([fxastatus="signedin"]) > toolbarseparator,
737 #appMenu-fxa-container:not([fxastatus="signedin"]) > #appMenu-fxa-icon,
738 #appMenu-fxa-container:not([fxastatus="signedin"]) > #appMenu-fxa-status > #appMenu-fxa-avatar {
742 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label {
743 /* 12px space before the avatar, then 16px for the avatar */
744 padding-inline-start: 28px;
745 margin-inline-start: -28px;
747 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status {
748 margin-inline-end: 10px;
751 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-avatar {
752 margin-inline-start: 12px;
755 #appMenu-fxa-container[fxastatus="signedin"] > toolbarseparator {
756 -moz-appearance: none;
761 /* Use background: rather than background-color: to override background-image
763 background: var(--arrowpanel-dimmed);
767 #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status > #appMenu-fxa-label,
768 #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status > #appMenu-fxa-label {
769 list-style-image: url(chrome://browser/skin/warning.svg);
770 -moz-image-region: rect(0, 16px, 16px, 0);
773 #appMenu-fxa-container[fxastatus="login-failed"],
774 #appMenu-fxa-container[fxastatus="unverified"] {
775 background-color: var(--appmenu-yellow-warning-color);
776 border-top: 1px solid var(--appmenu-yellow-warning-border-color);
777 border-bottom: 1px solid var(--appmenu-yellow-warning-border-color);
780 #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover,
781 #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover {
782 background-color: var(--appmenu-yellow-warning-hover-color);
785 #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover:active,
786 #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover:active {
787 background-color: var(--appmenu-yellow-warning-active-color);
795 .addon-banner-item > .toolbarbutton-text,
796 .panel-banner-item > .toolbarbutton-text,
797 #PanelUI-fxa-label > .toolbarbutton-text,
798 #PanelUI-customize > .toolbarbutton-text {
804 #PanelUI-help > .toolbarbutton-text,
805 #PanelUI-quit > .toolbarbutton-text,
806 #PanelUI-fxa-avatar > .toolbarbutton-text {
810 .panel-banner-item > .toolbarbutton-icon,
811 #PanelUI-fxa-label > .toolbarbutton-icon,
812 #PanelUI-fxa-icon > .toolbarbutton-icon,
813 #PanelUI-customize > .toolbarbutton-icon,
814 #PanelUI-help > .toolbarbutton-icon,
815 #PanelUI-quit > .toolbarbutton-icon {
816 margin-inline-end: 0;
820 padding-inline-start: 15px;
821 padding-inline-end: 15px;
828 padding-inline-start: 15px;
829 border-inline-start-style: none;
832 #PanelUI-fxa-container[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
833 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label {
834 padding-inline-start: 0px;
837 /* descend from #PanelUI-footer to add specificity, or else the
838 padding-inline-start will be overridden */
839 #PanelUI-footer > .panel-banner-item {
840 width: calc(var(--panel-ui-menuPanelWidth) + 30px);
841 padding-inline-start: 15px;
842 border-inline-start-style: none;
847 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
850 #PanelUI-fxa-label:hover,
851 #PanelUI-fxa-icon:hover {
852 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar-hover.png");
855 #PanelUI-remotetabs {
856 --panel-ui-sync-illustration-height: 157.5px;
859 .PanelUI-remotetabs-instruction-title,
860 .PanelUI-remotetabs-instruction-label,
861 #PanelUI-remotetabs-mobile-promo {
862 /* If you change the margin here, the min-height of the synced tabs panel
863 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
864 need adjusting (see bug 1248506) */
872 .PanelUI-remotetabs-instruction-title {
876 /* The boxes with "instructions" get extra top and bottom padding for space
877 around the illustration and buttons */
878 .PanelUI-remotetabs-instruction-box {
879 /* If you change the padding here, the min-height of the synced tabs panel
880 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
881 need adjusting (see bug 1248506) */
882 padding-bottom: 30px;
886 .PanelUI-remotetabs-prefs-button {
888 -moz-appearance: none;
889 background-color: #0096dd;
890 / !important for the color as an OSX specific rule when a lightweight theme
891 is used for buttons in the toolbox overrides. See bug 1238531 for details /
892 color: white !important;
894 / If you change the margin or padding below, the min-height of the synced tabs
895 panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
896 etc) may need adjusting (see bug 1248506) /
905 .PanelUI-remotetabs-prefs-button:hover,
906 .PanelUI-remotetabs-prefs-button:hover:active {
907 /* background-color: #018acb; */
910 .remotetabs-promo-link {
914 .PanelUI-remotetabs-notabsforclient-label {
916 /* This margin is to line this label up with the labels in toolbarbuttons. */
920 #PanelUI-remotetabs[mainview] .PanelUI-remotetabs-notabsforclient-label {
924 .fxaSyncIllustration {
926 height: var(--panel-ui-sync-illustration-height);
927 -moz-context-properties: fill;
931 .PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
932 /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */
933 text-align: center !important;
937 #PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
941 /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
942 the panel is anchored to a toolbar button.
944 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
945 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
946 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
947 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
948 min-height: calc(var(--panel-ui-sync-illustration-height) +
949 20px + /* margin of .PanelUI-remotetabs-prefs-button */
950 16px + /* padding of .PanelUI-remotetabs-prefs-button */
951 30px + /* margin of .PanelUI-remotetabs-instruction-label */
952 30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */
956 #PanelUI-remotetabs-tabslist > label[itemtype="client"] {
960 /* Collapse the non-active vboxes in the remotetabs deck to use only the
961 height the active box needs */
962 #PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
963 #PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
964 #PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
965 visibility: collapse;
968 #PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
972 #PanelUI-fxa-icon[syncstatus="active"] {
973 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
977 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
980 #customization-panelHolder #PanelUI-customize {
981 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
985 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
989 border-inline-end-style: none;
990 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
999 -moz-image-region: rect(0, 16px, 16px, 0);
1002 #PanelUI-fxa-container[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
1003 #PanelUI-fxa-container:not([fxastatus="signedin"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
1004 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
1005 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
1009 #PanelUI-fxa-avatar {
1013 background-repeat: no-repeat;
1014 background-position: 0 0;
1015 background-size: contain;
1020 margin-inline-end: 0;
1023 #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
1024 #PanelUI-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
1025 list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
1028 #PanelUI-customize:hover,
1029 #PanelUI-help:not([disabled]):hover,
1030 #PanelUI-quit:not([disabled]):hover,
1031 #PanelUI-customize:hover:active,
1032 #PanelUI-help:not([disabled]):hover:active,
1033 #PanelUI-quit:not([disabled]):hover:active,
1034 #PanelUI-help[panel-multiview-anchor="true"] {
1035 -moz-image-region: rect(0, 32px, 16px, 16px);
1038 #PanelUI-help[disabled],
1039 #PanelUI-quit[disabled] {
1040 -moz-image-region: rect(0, 48px, 16px, 32px);
1043 #PanelUI-fxa-status:hover,
1044 #PanelUI-fxa-icon:hover,
1045 #PanelUI-help:not([disabled]):hover,
1046 #PanelUI-customize:hover,
1047 #PanelUI-quit:not([disabled]):hover {
1050 #PanelUI-fxa-status:hover:active,
1051 #PanelUI-fxa-icon:hover:active,
1052 #PanelUI-help:not([disabled]):hover:active,
1053 #PanelUI-customize:hover:active,
1054 #PanelUI-quit:not([disabled]):hover:active {
1057 #PanelUI-fxa-status:hover,
1058 #PanelUI-fxa-status:hover:active,
1059 #PanelUI-fxa-icon:hover,
1060 #PanelUI-fxa-icon:hover:active {
1063 #PanelUI-fxa-container[fxastatus="login-failed"],
1064 #PanelUI-fxa-container[fxastatus="unverified"],
1065 #PanelUI-footer-fxa[fxastatus="login-failed"],
1066 #PanelUI-footer-fxa[fxastatus="unverified"] {
1067 background-color: #FF0000;
1071 #PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status:hover,
1072 #PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status:hover,
1073 #PanelUI-footer-fxa[fxastatus="login-failed"] > #PanelUI-fxa-status:hover,
1074 #PanelUI-footer-fxa[fxastatus="unverified"] > #PanelUI-fxa-status:hover {
1075 background-color: #FFCF00;
1078 #PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status:hover:active,
1079 #PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status:hover:active,
1080 #PanelUI-footer-fxa[fxastatus="login-failed"] > #PanelUI-fxa-status:hover:active,
1081 #PanelUI-footer-fxa[fxastatus="unverified"] > #PanelUI-fxa-status:hover:active {
1082 background-color: #FF9F00;
1085 .panel-banner-item {
1086 background-color: #008484;
1090 .panel-banner-item:not([disabled]):hover {
1091 background-color: #FFCF00;
1094 .panel-banner-item:not([disabled]):hover:active {
1095 background-color: #FF9F00;
1098 #PanelUI-quit:not([disabled]):hover {
1099 background-color: #FF0000;
1102 #PanelUI-quit:not([disabled]):hover:active {
1103 background-color: #FF9F00;
1106 #customization-panelHolder #PanelUI-customize {
1108 background-color: #008484;
1113 #customization-panelHolder #PanelUI-customize + toolbarseparator {
1117 #customization-panelHolder #PanelUI-customize:hover,
1118 #customization-panelHolder #PanelUI-customize:hover:active {
1119 background-color: #FFCF00;
1123 #customization-palette .toolbarbutton-multiline-text,
1124 #customization-palette .toolbarbutton-text {
1128 panelview .toolbarbutton-1,
1130 .widget-overflow-list .toolbarbutton-1,
1131 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1132 .share-provider-button,
1133 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1135 background-color: transparent;
1137 border-style: solid;
1138 border-color: transparent;*/
1141 panelview .toolbarbutton-1,
1143 .widget-overflow-list .toolbarbutton-1,
1144 .share-provider-button,
1145 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1149 .subviewbutton.panel-subview-footer {
1150 /* border-radius: 0; */
1154 .subviewbutton.panel-subview-footer > .menu-text {
1155 margin-inline-start: 0px !important;
1156 padding-inline-start: 6px;
1157 padding-inline-end: 6px;
1162 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
1166 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
1171 .subviewbutton.panel-subview-footer > .menu-accel-container {
1172 padding-inline-start: 6px;
1175 .subviewbutton:not(.panel-subview-footer) {
1179 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
1180 /* Bookmark items need a more specific selector. */
1181 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
1182 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
1186 .subviewbutton[shortcut]::after {
1187 content: attr(shortcut);
1192 .subviewbutton[shortcut]::after {
1193 margin-inline-start: 10px;
1196 /* This is a <label> but it should fit in with the menu font- and colorwise. */
1197 #PanelUI-characterEncodingView-autodetect-label {
1202 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
1203 /* margin-left: 4px;
1204 margin-right: 4px;*/
1207 panelview .toolbarbutton-1,
1208 .widget-overflow-list > .toolbarbutton-1:not(:first-child),
1209 .widget-overflow-list > .toolbaritem-combined-buttons:not(:first-child) {
1214 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1215 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
1216 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1217 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1218 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
1219 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1220 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1221 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
1222 background-color: var(--arrowpanel-dimmed);
1223 border-color: var(--panel-separator-color);
1226 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
1227 border-color: var(--panel-separator-color);
1230 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
1231 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
1232 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
1233 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
1234 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
1235 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
1236 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1237 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
1238 background-color: var(--arrowpanel-dimmed-further);
1239 border-color: var(--panel-separator-color);
1240 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
1243 .subviewbutton.panel-subview-footer {
1244 margin: 4px -4px -4px;
1245 background-color: var(--arrowpanel-dimmed);
1246 border-top: 1px solid var(--panel-separator-color);
1250 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
1251 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
1252 background-color: var(--arrowpanel-dimmed-further);
1255 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
1256 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
1257 background-color: var(--arrowpanel-dimmed-even-further);
1258 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
1261 #BMB_bookmarksPopup .subviewbutton {
1263 font-weight: normal;
1266 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
1270 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
1271 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
1272 -moz-appearance: none;
1277 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
1278 #BMB_bookmarksPopup arrowscrollbox {
1279 padding-bottom: 0px;
1282 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
1283 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
1287 / Popups with only one item don't have a footer /
1288 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1289 / These popups never have a footer /
1290 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1291 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1292 #BMB_mobileBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1293 / And so they need some bottom padding: /
1294 padding-bottom: 4px;
1297 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
1298 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
1303 #widget-overflow-scroller > toolbarseparator,
1304 .PanelUI-subView menuseparator,
1305 .PanelUI-subView toolbarseparator,
1306 .cui-widget-panelview menuseparator,
1307 .cui-widget-panel toolbarseparator {
1308 -moz-appearance: none;
1310 border-top: 1px solid var(--panel-separator-color);
1315 .PanelUI-subView menuseparator,
1316 .PanelUI-subView toolbarseparator {
1317 /* margin-inline-start: -5px;
1318 margin-inline-end: -4px;*/
1321 .PanelUI-subView menuseparator.small-separator,
1322 .PanelUI-subView toolbarseparator.small-separator {
1323 /* margin-left: 5px;
1324 margin-right: 5px;*/
1327 .cui-widget-panelview menuseparator.small-separator {
1328 /* margin-left: 10px;
1329 margin-right: 10px;*/
1332 .subviewbutton > .menu-accel-container {
1333 -moz-box-pack: start;
1334 margin-inline-start: 10px;
1335 margin-inline-end: auto;
1339 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"],
1340 #PanelUI-historyItems > toolbarbutton {
1341 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
1344 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon,
1345 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1346 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1347 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1352 toolbarbutton[panel-multiview-anchor="true"],
1353 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1355 background-color: #008484;
1358 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1362 #PanelUI-help[panel-multiview-anchor="true"] {
1363 background-image: none;
1366 #PanelUI-help[panel-multiview-anchor="true"]::after {
1371 width: var(--panel-ui-exit-subview-gutter-width);
1372 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1373 background-repeat: no-repeat;
1374 background-color: #008484;
1375 background-position: left 10px center, 0;
1378 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1379 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1380 background-position: right 10px center, 0;
1383 toolbarbutton[panel-multiview-anchor="true"] {
1384 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1385 background-position: right var(--panel-ui-menuPanelMultiviewBgPos) center;
1386 background-repeat: no-repeat;
1389 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1390 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1391 background-position: left var(--panel-ui-menuPanelMultiviewBgPos) center;
1394 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1395 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1399 #search-container[cui-areatype="menu-panel"],
1400 #wrapper-search-container[place="panel"] {
1401 width: var(--panel-ui-menuPanelWidth);
1404 #search-container[cui-areatype="menu-panel"] {
1409 toolbarpaletteitem[place="palette"] > #search-container {
1414 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1415 background-color: transparent;
1417 transition-property: background-color, border-color;
1418 transition-duration: 150ms;
1421 /* Make direct siblings overlap borders: */
1422 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1423 /* border-top-color: transparent !important; */
1426 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1427 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1428 /* margin-top: -1px; */
1431 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1436 min-width: var(--panel-ui-menuPanelButtonWidth);
1437 max-width: var(--panel-ui-menuPanelButtonWidth);
1438 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1439 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1440 height: calc(2.2em + 4px);
1442 -moz-box-orient: horizontal;
1445 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1446 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1447 /* reduce the width with 2px for this button to compensate for two separators
1449 min-width: var(--panel-ui-menuPanelButtonWidth-min2);
1450 max-width: var(--panel-ui-menuPanelButtonWidth-min2);
1453 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1457 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1461 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1462 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1463 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1464 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1465 border-top-right-radius: 0;
1466 border-bottom-right-radius: 0;
1469 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1470 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1471 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1472 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1473 border-top-left-radius: 0;
1474 border-bottom-left-radius: 0;
1477 .toolbaritem-combined-buttons > separator {
1478 -moz-appearance: none;
1480 -moz-box-align: stretch;
1483 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1487 /* background: var(--panel-separator-color);*/
1488 transition-property: margin;
1489 transition-duration: 10ms;
1490 transition-timing-function: ease;
1493 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1497 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1501 .cui-widget-panelview,
1502 #widget-overflow-scroller {
1507 #widget-overflow-scroller {
1510 margin-bottom: 10px;
1513 .widget-overflow-list {
1514 width: var(--panel-ui-menuPanelWidth);
1516 padding-right: 10px;
1519 toolbaritem[overflowedItem=true],
1520 toolbarbutton[overflowedItem=true] {
1522 max-width: var(--panel-ui-menuPanelWidth);
1524 background-repeat: no-repeat;
1525 background-position: 0 center;
1528 .widget-overflow-list .toolbarbutton-1,
1529 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1530 -moz-box-align: center;
1531 -moz-box-orient: horizontal;
1534 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1535 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1537 padding-inline-start: .5em;
1540 .widget-overflow-list > .toolbaritem-combined-buttons {
1544 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1549 margin-inline-end: -1px;
1552 .subviewbutton[checked="true"] {
1553 background-image: url("chrome://global/skin/menu/menu-check.gif");
1554 background-position: top 5px left 4px;
1555 background-repeat: no-repeat;
1558 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1559 background-position: top 5px right 4px;
1562 .subviewbutton[checked="true"]:hover {
1563 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1566 .subviewbutton > .menu-iconic-left {
1567 margin-inline-end: 3px;
1570 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1574 #PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon {
1579 .panel-mainview[panelid=customizationui-widget-panel],
1580 #customizationui-widget-multiview > .panel-viewcontainer,
1581 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1582 #PanelUI-panicView > .panel-subview-body,
1583 #PanelUI-panicView {
1588 #PanelUI-panicView.cui-widget-panelview {
1592 #PanelUI-panic-timeframe {
1594 border-bottom: 1px solid var(--panel-separator-color);
1597 #panic-button-success-icon,
1598 #PanelUI-panic-timeframe-icon,
1599 #PanelUI-panic-timeframe-icon-small {
1600 background-color: transparent;
1601 margin-inline-end: 10px;
1604 #panic-button-success-icon,
1605 #PanelUI-panic-timeframe-icon {
1606 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1611 #PanelUI-panic-timeframe-icon-small {
1612 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1617 /* current attribute is only set when in use as a subview instead of a main view */
1618 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1622 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1626 #panic-button-success-header,
1627 #PanelUI-panic-header {
1628 -moz-box-align: center;
1632 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1636 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1637 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1638 transform: scaleX(-1);
1645 .subviewradio@buttonStateHover@ {
1648 .subviewradio[selected],
1649 .subviewradio[selected]:hover,
1650 .subviewradio@buttonStateActive@ {
1653 .subviewradio > .radio-check {
1656 .subviewradio > .radio-check[selected] {
1660 #PanelUI-panic-explanations {
1661 padding: 10px 10px 0;
1664 #PanelUI-panic-actionlist-main-label {
1669 .PanelUI-panic-actionlist {
1670 padding-inline-start: 20px;
1672 padding-bottom: 2px;
1673 background-size: 16px 16px;
1674 background-repeat: no-repeat;
1675 background-color: transparent;
1676 background-position: center left;
1679 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1680 background-position: center right;
1683 #PanelUI-panic-actionlist-cookies {
1684 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1687 #PanelUI-panic-actionlist-history {
1688 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1691 #PanelUI-panic-actionlist-windows {
1692 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1695 #PanelUI-panic-actionlist-newwindow {
1696 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1699 #PanelUI-panic-warning {
1706 #PanelUI-panic-view-button {
1707 background-color: #FF0000;
1711 #PanelUI-panic-view-button:hover {
1712 background-color: #FFCF00;
1715 #PanelUI-panic-view-button:hover:active {
1716 background-color: #FF9F00;
1719 #PanelUI-panic-view-button > .toolbarbutton-text {
1724 #panic-button-success-closebutton {
1727 #panic-button-success-closebutton:hover {
1730 #panic-button-success-closebutton:hover:active {
1733 /* === END panelUI.inc.css === */
1736 background-color: var(--arrowpanel-background);
1739 #PanelUI-contents #zoom-out-btn {
1741 padding-right: 12px;
1744 #PanelUI-contents #zoom-in-btn {
1746 padding-right: 12px;
1749 /* bookmark panel submenus */
1751 #BMB_bookmarksPopup menupopup[placespopup=true] {
1752 /* background: transparent;
1757 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1758 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1759 /* box-shadow: 0 0 4px rgba(0,0,0,0.2);
1760 background: var(--arrowpanel-background);
1761 color: var(--arrowpanel-color);
1762 border: 1px solid var(--arrowpanel-border-color);
1763 border-radius: 3.5px;
1767 #BMB_bookmarksPopup menupopup {
1768 /* padding-top: 2px;*/
1771 /* Add some space at the top because there are no headers: */
1772 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1773 /* padding-top: 4px;*/
1776 /* bookmark panel separator */
1777 #BMB_bookmarksPopup menuseparator {
1782 .subviewbutton > .menu-right,
1783 .subviewbutton > .menu-iconic-left {
1784 /* padding-top: 1px;
1786 margin-bottom: 2px;*/
1789 .subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon {
1790 /* This catches bookmarks, history items, and sync tabs items */
1795 /* Disabled empty item looks too small otherwise, because it has no icon. */
1796 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1797 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1798 menuitem[type="checkbox"].subviewbutton {
1799 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1800 * 2px for its border, see above */
1801 /* min-height: 22px;*/
1804 .subviewbutton > .toolbarbutton-text {
1805 /* padding-top: 3px;
1806 padding-bottom: 3px;*/
1809 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1810 -moz-appearance: none;
1812 margin-inline-start: 3px;
1815 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1817 padding-inline-start: 0;
1821 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1825 .subviewbutton > .toolbarbutton-text {
1826 padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */
1829 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1830 padding-inline-start: 2px;
1833 /* subviewbutton entries for social sidebars have images that come from external
1834 /* sources, and are not guaranteed to be the size we want, so force the size on
1836 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1841 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1845 menu.subviewbutton > .menu-right {
1846 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow");
1847 /* Reset the rect we inherit from the button: */
1848 -moz-image-region: auto;
1851 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1852 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1853 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1856 menu[disabled="true"].subviewbutton > .menu-right {
1857 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");
1860 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1861 transform: scaleX(-1);