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 #PanelUI-update-restart-menu-item::after,
126 #PanelUI-update-available-menu-item::after,
127 #PanelUI-update-manual-menu-item::after {
128 background: #008484 url(chrome://browser/skin/update-badge.svg) no-repeat center;
132 #PanelUI-update-restart-menu-item,
133 #PanelUI-update-available-menu-item,
134 #PanelUI-update-manual-menu-item {
135 list-style-image: url(chrome://branding/content/icon16.png);
138 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
139 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
143 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
144 #PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
149 /* "!important" is necessary to override the rule in toolbarbutton.css */
150 margin-top: -1px !important;
151 margin-right: -2px !important;
154 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
158 #PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
162 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
164 background: transparent url(chrome://browser/skin/warning.svg) no-repeat center;
167 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
168 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
171 #PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
173 background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
178 background-clip: padding-box;
179 border-left: 1px solid var(--panel-separator-color);
180 margin-inline-start: var(--panel-ui-exit-subview-gutter-width);
183 .panel-viewstack[viewtype="main"] > .panel-subviews {
184 transform: translateX(var(--panel-ui-menuPanelWidth));
187 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
188 transform: translateX(var(--panel-ui-menuPanelWidth-neg));
191 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
195 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
199 .panel-subview-body {
205 #PanelUI-popup .panel-subview-body {
210 .panel-subview-header,
211 .subviewbutton.panel-subview-footer {
212 box-sizing: border-box;
213 /* min-height: 41px; */
217 .panel-subview-header {
219 background-color: var(--panel-separator-color);
221 font-variant: small-caps;
225 .panel-subview-footer {
226 border-top: 1px solid var(--panel-separator-color);
229 .cui-widget-panelview .panel-subview-header {
233 .cui-widget-panelview .subviewbutton.panel-subview-footer {
235 -moz-box-pack: center;
240 flex-direction: column;
244 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
247 #PanelUI-popup > arrowscrollbox > scrollbox {
251 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
256 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent,
257 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box {
261 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
262 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
263 /* line-height: 1.2;*/
267 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
268 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
272 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
273 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
275 clip: rect(-0.1em, auto, 2.6em, auto);
278 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
279 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
281 /* Need to override toolkit theming which sets margin: 0 !important; */
282 margin: 2px 0 0 !important;
285 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
290 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
291 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
292 margin-inline-start: 0;
296 max-width: var(--panel-ui-menuPanelWidth);
300 .panel-mainview:not([panelid="PanelUI-popup"]) {
301 max-width: var(--panel-ui-standaloneSubviewWidth);
304 /* Give WebExtension stand-alone panels extra width for Chrome compatibility */
305 .cui-widget-panel[viewId^=PanelUI-webext-] .panel-mainview {
309 .cui-widget-panel[viewId^=PanelUI-webext-] > .panel-arrowcontainer > .panel-arrowcontent {
313 panelview[id^=PanelUI-webext-] {
317 panelview:not([mainview]) .toolbarbutton-text,
318 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
323 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
327 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
331 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
332 border-radius: 4px 4px 0 0;
335 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
336 border-radius: 0 0 4px 4px;
344 max-width: var(--panel-ui-menuPanelWidth);
347 #PanelUI-contents-scroller {
350 width: var(--panel-ui-menuPanelWidth);
354 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
360 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
361 .panelUI-grid .toolbarbutton-1,
362 .panel-customization-placeholder-child {
363 -moz-appearance: none;
364 -moz-box-orient: vertical;
365 width: var(--panel-ui-menuPanelButtonWidth-min2); /* LCARStrek: XXX: found out to be needed to fit the icons */
366 height: calc(51px + 2.2em);
369 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
370 * should have a min-width set so they abide by the width set above (which they do outside of
371 * customize mode because they're in a flexed container) */
372 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
376 /* Help SDK buttons fit in. */
377 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
378 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
379 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
380 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
385 toolbarpaletteitem:-moz-any([place="palette"], [place="panel"]) > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon {
390 .customization-palette .toolbarbutton-1 {
391 -moz-appearance: none;
392 -moz-box-orient: vertical;
395 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
396 -moz-appearance: none;
397 -moz-box-orient: vertical;
398 width: var(--panel-ui-menuPanelButtonWidth-min2);
399 height: calc(49px + 2.2em);
403 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
404 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
405 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
408 .panel-customization-placeholder-child {
410 /* padding: 2px 6px;*/
413 .panelUI-grid .toolbarbutton-1[type="menu"] {
414 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
415 background-position: right 3px top 16px;
416 background-repeat: no-repeat;
419 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
420 background-position: left 3px top 16px;
423 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
427 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
428 -moz-box-align: center;
430 margin-inline-start: -16px;
432 margin-bottom: 2.2em;
436 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
437 border-radius: 0 0 0 2px;
440 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
441 border-radius: 0 0 2px 0;
444 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
448 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
449 width: var(--panel-ui-menuPanelButtonWidth);
450 margin: 0 !important;
453 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
454 -moz-box-align: center;
455 -moz-box-pack: center;
458 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
462 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
465 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
466 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
467 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > .PanelUI-notification-menu-item,
468 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
469 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
470 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
471 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
472 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-label,
473 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-icon,
474 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
475 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
476 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
481 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
482 * which was affecting subview display. Because of this, we're hiding the iframe *only*
483 * when displaying a subview. The discerning user might notice this, but it's not nearly
484 * as bad as the brokenness.
485 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
488 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
492 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
496 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
497 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
498 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
499 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
500 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
501 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
502 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
503 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
504 .panel-customization-placeholder-child > .toolbarbutton-icon {
509 /* Explanation for the below formula (A / B - C)
511 Each button is @menuPanelButtonWidth@ wide
513 Each button has two margins.
515 The button icon is 32 pixels wide.
516 The button has 12px of horizontal padding (6 on each side).
517 The button has 0px of horizontal border (0 on each side).
518 Total width of button's icon + button padding should therefore be 44px,
519 which means each horizontal margin should be the half the button's width - (44/2) px.
521 margin: 4px var(--panel-ui-menuPanelButtonIconMargin);
524 /* above we treat the container as the icon for the margins, that is so the
525 /* badge itself is positioned correctly. Here we make sure that the icon itself
526 /* has the minimum size we want, but no padding/margin. */
527 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon,
528 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
537 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
541 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
545 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
546 margin-inline-end: 2px;
549 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
550 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
556 #zoom-in-button > .toolbarbutton-text,
557 #zoom-out-button > .toolbarbutton-text,
558 #zoom-reset-button > .toolbarbutton-icon {
565 flex-direction: column;
566 /* background-color: var(--arrowpanel-dimmed);*/
569 border-bottom-right-radius: 4px;
570 border-bottom-left-radius: 4px;
573 #main-window[customizing] #PanelUI-fxa-container,
574 #main-window[customizing] #PanelUI-footer-fxa {
578 #PanelUI-fxa-container:not([fxastatus="signedin"]) > toolbarseparator,
579 #PanelUI-fxa-container:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
580 #PanelUI-fxa-container:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
581 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
582 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
583 #PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
587 #PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status::after,
588 #PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status::after,
589 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after {
590 content: url("chrome://browser/skin/warning.svg");
599 #PanelUI-footer-addons > toolbarbutton::after,
600 .PanelUI-notification-menu-item::after {
604 margin-inline-end: 16.5px;
608 #PanelUI-footer-addons > toolbarbutton {
609 background-color: #A09090;
610 /* Force border to override `#PanelUI-footer-addons > toolbarbutton` selector below */
611 /*border-top: 1px solid hsl(45, 100%, 77%) !important;*/
614 width: calc(22.35em + 30px);
615 padding-inline-start: 15px;
616 border-inline-start-style: none;
619 #PanelUI-footer-addons > toolbarbutton:hover {
620 background-color: #FFCF00;
623 #PanelUI-footer-addons > toolbarbutton:active {
624 background-color: #FF9F00;
627 #PanelUI-footer-addons > toolbarbutton > .toolbarbutton-icon {
632 #PanelUI-footer-addons > toolbarbutton::after {
633 background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
636 #PanelUI-fxa-status {
642 #PanelUI-footer-inner,
643 #PanelUI-fxa-container:not([hidden]),
644 #PanelUI-footer-fxa:not([hidden]) {
646 border-top: 1px solid var(--panel-separator-color);
649 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
650 #PanelUI-multiView[viewtype="subview"] #PanelUI-fxa-container,
651 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
655 #PanelUI-footer-inner > toolbarseparator,
656 #PanelUI-fxa-container > toolbarseparator,
657 #PanelUI-footer-fxa > toolbarseparator {
659 border-left: 1px solid var(--panel-separator-color);
663 #PanelUI-footer-inner:hover > toolbarseparator,
664 #PanelUI-fxa-container:hover > toolbarseparator,
665 #PanelUI-footer-fxa:hover > toolbarseparator {
669 .PanelUI-notification-menu-item,
673 #PanelUI-footer-addons > toolbarbutton,
678 box-sizing: border-box;
683 transition: background-color;
684 -moz-box-orient: horizontal;
687 .PanelUI-notification-menu-item {
688 border-top: 1px solid var(--panel-separator-color);
689 border-bottom: 1px solid transparent;
693 .PanelUI-notification-menu-item > .toolbarbutton-text {
694 width: 0; /* Fancy cropping solution for flexbox. */
697 #PanelUI-help[panel-multiview-anchor="true"] {
698 -moz-image-region: rect(0, 32px, 16px, 16px);
701 /* FxAccount indicator bits. */
705 -moz-appearance: none;
709 -moz-box-orient: horizontal;
710 -moz-image-region: rect(0, 16px, 16px, 0);
711 list-style-image: url(chrome://browser/skin/syncFx-horizontalbar.png);
716 padding-inline-start: 12px;
724 #appMenu-fxa-icon > .toolbarbutton-text {
728 #appMenu-fxa-icon[syncstatus="active"] {
729 list-style-image: url(chrome://browser/skin/syncFxProgress-horizontalbar.png);
732 #appMenu-fxa-avatar {
733 pointer-events: none;
734 list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
737 #appMenu-fxa-container {
738 -moz-box-orient: horizontal;
741 /* Handle different UI states. */
742 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label > .toolbarbutton-icon,
743 #appMenu-fxa-container:not([fxastatus="signedin"]) > toolbarseparator,
744 #appMenu-fxa-container:not([fxastatus="signedin"]) > #appMenu-fxa-icon,
745 #appMenu-fxa-container:not([fxastatus="signedin"]) > #appMenu-fxa-status > #appMenu-fxa-avatar {
749 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label {
750 /* 12px space before the avatar, then 16px for the avatar */
751 padding-inline-start: 28px;
752 margin-inline-start: -28px;
754 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status {
755 margin-inline-end: 10px;
758 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-avatar {
759 margin-inline-start: 12px;
762 #appMenu-fxa-container[fxastatus="signedin"] > toolbarseparator {
763 -moz-appearance: none;
768 /* Use background: rather than background-color: to override background-image
770 background: var(--arrowpanel-dimmed);
774 #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status > #appMenu-fxa-label,
775 #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status > #appMenu-fxa-label {
776 list-style-image: url(chrome://browser/skin/warning.svg);
777 -moz-image-region: rect(0, 16px, 16px, 0);
780 #appMenu-fxa-container[fxastatus="login-failed"],
781 #appMenu-fxa-container[fxastatus="unverified"] {
782 background-color: var(--appmenu-yellow-warning-color);
783 border-top: 1px solid var(--appmenu-yellow-warning-border-color);
784 border-bottom: 1px solid var(--appmenu-yellow-warning-border-color);
787 #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover,
788 #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover {
789 background-color: var(--appmenu-yellow-warning-hover-color);
792 #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover:active,
793 #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover:active {
794 background-color: var(--appmenu-yellow-warning-active-color);
802 .PanelUI-notification-menu-item > .toolbarbutton-text,
803 #PanelUI-fxa-label > .toolbarbutton-text,
804 #PanelUI-footer-addons > toolbarbutton > .toolbarbutton-text,
805 #PanelUI-customize > .toolbarbutton-text {
811 #PanelUI-help > .toolbarbutton-text,
812 #PanelUI-quit > .toolbarbutton-text,
813 #PanelUI-fxa-avatar > .toolbarbutton-text {
817 .PanelUI-notification-menu-item > .toolbarbutton-icon,
818 #PanelUI-fxa-label > .toolbarbutton-icon,
819 #PanelUI-fxa-icon > .toolbarbutton-icon,
820 #PanelUI-customize > .toolbarbutton-icon,
821 #PanelUI-help > .toolbarbutton-icon,
822 #PanelUI-quit > .toolbarbutton-icon {
823 margin-inline-end: 0;
827 padding-inline-start: 15px;
828 padding-inline-end: 15px;
832 #PanelUI-footer-addons > toolbarbutton,
835 padding-inline-start: 15px;
836 border-inline-start-style: none;
839 #PanelUI-fxa-container[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
840 #PanelUI-fxa-container[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label,
841 #PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
842 #PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
843 padding-inline-start: 0px;
846 /* descend from #PanelUI-footer to add specificity, or else the
847 padding-inline-start will be overridden */
848 #PanelUI-footer > .PanelUI-notification-menu-item {
849 width: calc(var(--panel-ui-menuPanelWidth) + 30px);
850 padding-inline-start: 15px;
851 border-inline-start-style: none;
856 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
859 #PanelUI-fxa-label:hover,
860 #PanelUI-fxa-icon:hover {
861 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar-hover.png");
864 #PanelUI-remotetabs {
865 --panel-ui-sync-illustration-height: 157.5px;
868 .PanelUI-remotetabs-instruction-title,
869 .PanelUI-remotetabs-instruction-label,
870 #PanelUI-remotetabs-mobile-promo {
871 /* If you change the margin here, the min-height of the synced tabs panel
872 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
873 need adjusting (see bug 1248506) */
881 .PanelUI-remotetabs-instruction-title {
885 /* The boxes with "instructions" get extra top and bottom padding for space
886 around the illustration and buttons */
887 .PanelUI-remotetabs-instruction-box {
888 /* If you change the padding here, the min-height of the synced tabs panel
889 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
890 need adjusting (see bug 1248506) */
891 padding-bottom: 30px;
895 .PanelUI-remotetabs-prefs-button {
897 -moz-appearance: none;
898 background-color: #0096dd;
899 / !important for the color as an OSX specific rule when a lightweight theme
900 is used for buttons in the toolbox overrides. See bug 1238531 for details /
901 color: white !important;
903 / If you change the margin or padding below, the min-height of the synced tabs
904 panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
905 etc) may need adjusting (see bug 1248506) /
914 .PanelUI-remotetabs-prefs-button:hover,
915 .PanelUI-remotetabs-prefs-button:hover:active {
916 /* background-color: #018acb; */
919 .remotetabs-promo-link {
923 .PanelUI-remotetabs-notabsforclient-label {
925 /* This margin is to line this label up with the labels in toolbarbuttons. */
929 #PanelUI-remotetabs[mainview] .PanelUI-remotetabs-notabsforclient-label {
933 .fxaSyncIllustration {
935 height: var(--panel-ui-sync-illustration-height);
938 .PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
939 /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */
940 text-align: center !important;
944 #PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
948 /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
949 the panel is anchored to a toolbar button.
951 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
952 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
953 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
954 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
955 min-height: calc(var(--panel-ui-sync-illustration-height) +
956 20px + /* margin of .PanelUI-remotetabs-prefs-button */
957 16px + /* padding of .PanelUI-remotetabs-prefs-button */
958 30px + /* margin of .PanelUI-remotetabs-instruction-label */
959 30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */
963 #PanelUI-remotetabs-tabslist > label[itemtype="client"] {
967 /* Collapse the non-active vboxes in the remotetabs deck to use only the
968 height the active box needs */
969 #PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
970 #PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
971 #PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
972 visibility: collapse;
975 #PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
979 #PanelUI-fxa-icon[syncstatus="active"]:not([disabled]) {
980 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
984 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
987 #customization-panelHolder #PanelUI-customize {
988 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
992 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
996 border-inline-end-style: none;
997 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
1002 #PanelUI-footer-addons > toolbarbutton,
1006 -moz-image-region: rect(0, 16px, 16px, 0);
1009 #PanelUI-fxa-container[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
1010 #PanelUI-fxa-container[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
1011 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
1012 #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
1016 #PanelUI-fxa-container[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
1017 #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
1021 #PanelUI-fxa-status[disabled],
1022 #PanelUI-fxa-icon[disabled] {
1023 pointer-events: none;
1026 #PanelUI-fxa-avatar {
1030 background-repeat: no-repeat;
1031 background-position: 0 0;
1032 background-size: contain;
1037 margin-inline-end: 0;
1040 #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
1041 #PanelUI-fxa-container[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
1042 list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
1045 #PanelUI-customize:hover,
1046 #PanelUI-help:not([disabled]):hover,
1047 #PanelUI-quit:not([disabled]):hover,
1048 #PanelUI-customize:hover:active,
1049 #PanelUI-help:not([disabled]):hover:active,
1050 #PanelUI-quit:not([disabled]):hover:active,
1051 #PanelUI-help[panel-multiview-anchor="true"] {
1052 -moz-image-region: rect(0, 32px, 16px, 16px);
1055 #PanelUI-help[disabled],
1056 #PanelUI-quit[disabled],
1057 #PanelUI-fxa-icon[disabled],
1058 #PanelUI-fxa-avatar[disabled],
1059 #PanelUI-fxa-label[disabled] > .toolbarbutton-icon,
1060 #PanelUI-fxa-status::after {
1061 -moz-image-region: rect(0, 48px, 16px, 32px);
1064 #PanelUI-fxa-status:not([disabled]):hover,
1065 #PanelUI-fxa-icon:not([disabled]):hover,
1066 #PanelUI-help:not([disabled]):hover,
1067 #PanelUI-customize:hover,
1068 #PanelUI-quit:not([disabled]):hover {
1071 #PanelUI-fxa-status:not([disabled]):hover:active,
1072 #PanelUI-fxa-icon:not([disabled]):hover:active,
1073 #PanelUI-help:not([disabled]):hover:active,
1074 #PanelUI-customize:hover:active,
1075 #PanelUI-quit:not([disabled]):hover:active {
1078 #PanelUI-fxa-status:not([disabled]):hover,
1079 #PanelUI-fxa-status:not([disabled]):hover:active,
1080 #PanelUI-fxa-icon:not([disabled]):hover,
1081 #PanelUI-fxa-icon:not([disabled]):hover:active {
1084 #PanelUI-fxa-container[fxastatus="error"],
1085 #PanelUI-footer-fxa[fxastatus="error"] {
1086 background-color: #FF0000;
1090 #PanelUI-fxa-container[fxastatus="error"] > #PanelUI-fxa-status:hover,
1091 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
1092 background-color: #FFCF00;
1095 #PanelUI-fxa-container[fxastatus="error"] > #PanelUI-fxa-status:hover:active,
1096 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
1097 background-color: #FF9F00;
1100 .PanelUI-notification-menu-item {
1101 background-color: #008484;
1105 .PanelUI-notification-menu-item:not([disabled]):hover {
1106 background-color: #FFCF00;
1109 .PanelUI-notification-menu-item:not([disabled]):hover:active {
1110 background-color: #FF9F00;
1113 #PanelUI-quit:not([disabled]):hover {
1114 background-color: #FF0000;
1117 #PanelUI-quit:not([disabled]):hover:active {
1118 background-color: #FF9F00;
1121 #customization-panelHolder #PanelUI-customize {
1123 background-color: #008484;
1128 #customization-panelHolder #PanelUI-customize + toolbarseparator {
1132 #customization-panelHolder #PanelUI-customize:hover,
1133 #customization-panelHolder #PanelUI-customize:hover:active {
1134 background-color: #FFCF00;
1138 #customization-palette .toolbarbutton-multiline-text,
1139 #customization-palette .toolbarbutton-text {
1143 panelview .toolbarbutton-1,
1145 .widget-overflow-list .toolbarbutton-1,
1146 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1147 .share-provider-button,
1148 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1150 background-color: transparent;
1152 border-style: solid;
1153 border-color: transparent;*/
1156 panelview .toolbarbutton-1,
1158 .widget-overflow-list .toolbarbutton-1,
1159 .share-provider-button,
1160 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1164 .subviewbutton.panel-subview-footer {
1165 /* border-radius: 0; */
1169 .subviewbutton.panel-subview-footer > .menu-text {
1170 margin-inline-start: 0px !important;
1171 padding-inline-start: 6px;
1172 padding-inline-end: 6px;
1177 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
1181 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
1186 .subviewbutton.panel-subview-footer > .menu-accel-container {
1187 padding-inline-start: 6px;
1190 .subviewbutton:not(.panel-subview-footer) {
1194 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
1195 /* Bookmark items need a more specific selector. */
1196 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
1197 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
1201 .PanelUI-subView .subviewbutton[shortcut]::after {
1202 content: attr(shortcut);
1207 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
1208 margin-inline-start: 10px;
1211 /* This is a <label> but it should fit in with the menu font- and colorwise. */
1212 #PanelUI-characterEncodingView-autodetect-label {
1217 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
1218 /* margin-left: 4px;
1219 margin-right: 4px;*/
1222 panelview .toolbarbutton-1,
1223 .widget-overflow-list > .toolbarbutton-1:not(:first-child),
1224 .widget-overflow-list > .toolbaritem-combined-buttons:not(:first-child) {
1229 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1230 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
1231 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1232 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1233 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
1234 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1235 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1236 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
1237 background-color: var(--arrowpanel-dimmed);
1238 border-color: var(--panel-separator-color);
1241 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
1242 border-color: var(--panel-separator-color);
1245 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
1246 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
1247 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
1248 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
1249 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
1250 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
1251 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1252 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
1253 background-color: var(--arrowpanel-dimmed-further);
1254 border-color: var(--panel-separator-color);
1255 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
1258 .subviewbutton.panel-subview-footer {
1259 margin: 4px -4px -4px;
1260 background-color: var(--arrowpanel-dimmed);
1261 border-top: 1px solid var(--panel-separator-color);
1265 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
1266 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
1267 background-color: var(--arrowpanel-dimmed-further);
1270 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
1271 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
1272 background-color: var(--arrowpanel-dimmed-even-further);
1273 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
1276 #BMB_bookmarksPopup .subviewbutton {
1278 font-weight: normal;
1281 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
1285 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
1286 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
1287 -moz-appearance: none;
1292 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
1293 #BMB_bookmarksPopup arrowscrollbox {
1294 padding-bottom: 0px;
1297 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
1298 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
1302 / Popups with only one item don't have a footer /
1303 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1304 / These popups never have a footer /
1305 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1306 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1307 #BMB_mobileBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1308 / And so they need some bottom padding: /
1309 padding-bottom: 4px;
1312 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
1313 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
1318 .PanelUI-subView menuseparator,
1319 .PanelUI-subView toolbarseparator,
1320 .cui-widget-panelview menuseparator {
1321 -moz-appearance: none;
1323 border-top: 1px solid var(--panel-separator-color);
1328 .PanelUI-subView menuseparator,
1329 .PanelUI-subView toolbarseparator {
1330 /* margin-inline-start: -5px;
1331 margin-inline-end: -4px;*/
1334 .PanelUI-subView menuseparator.small-separator,
1335 .PanelUI-subView toolbarseparator.small-separator {
1336 /* margin-left: 5px;
1337 margin-right: 5px;*/
1340 .cui-widget-panelview menuseparator.small-separator {
1341 /* margin-left: 10px;
1342 margin-right: 10px;*/
1345 .subviewbutton > .menu-accel-container {
1346 -moz-box-pack: start;
1347 margin-inline-start: 10px;
1348 margin-inline-end: auto;
1352 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"],
1353 #PanelUI-historyItems > toolbarbutton {
1354 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
1357 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon,
1358 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1359 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1360 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1365 toolbarbutton[panel-multiview-anchor="true"],
1366 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1368 background-color: #008484;
1371 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1375 #PanelUI-help[panel-multiview-anchor="true"] {
1376 background-image: none;
1379 #PanelUI-help[panel-multiview-anchor="true"]::after {
1384 width: var(--panel-ui-exit-subview-gutter-width);
1385 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1386 background-repeat: no-repeat;
1387 background-color: #008484;
1388 background-position: left 10px center, 0;
1391 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1392 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1393 background-position: right 10px center, 0;
1396 toolbarbutton[panel-multiview-anchor="true"] {
1397 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1398 background-position: right var(--panel-ui-menuPanelMultiviewBgPos) center;
1399 background-repeat: no-repeat;
1402 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1403 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1404 background-position: left var(--panel-ui-menuPanelMultiviewBgPos) center;
1407 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1408 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1412 #search-container[cui-areatype="menu-panel"],
1413 #wrapper-search-container[place="panel"] {
1414 width: var(--panel-ui-menuPanelWidth);
1417 #search-container[cui-areatype="menu-panel"] {
1422 toolbarpaletteitem[place="palette"] > #search-container {
1427 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1428 background-color: transparent;
1430 transition-property: background-color, border-color;
1431 transition-duration: 150ms;
1434 /* Make direct siblings overlap borders: */
1435 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1436 /* border-top-color: transparent !important; */
1439 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1440 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1441 /* margin-top: -1px; */
1444 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1449 min-width: var(--panel-ui-menuPanelButtonWidth);
1450 max-width: var(--panel-ui-menuPanelButtonWidth);
1451 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1452 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1453 height: calc(2.2em + 4px);
1455 -moz-box-orient: horizontal;
1458 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1459 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1460 /* reduce the width with 2px for this button to compensate for two separators
1462 min-width: var(--panel-ui-menuPanelButtonWidth-min2);
1463 max-width: var(--panel-ui-menuPanelButtonWidth-min2);
1466 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1470 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1474 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1475 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1476 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1477 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1478 border-top-right-radius: 0;
1479 border-bottom-right-radius: 0;
1482 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1483 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1484 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1485 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1486 border-top-left-radius: 0;
1487 border-bottom-left-radius: 0;
1490 .toolbaritem-combined-buttons > separator {
1491 -moz-appearance: none;
1493 -moz-box-align: stretch;
1496 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1500 /* background: var(--panel-separator-color);*/
1501 transition-property: margin;
1502 transition-duration: 10ms;
1503 transition-timing-function: ease;
1506 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1510 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1514 .cui-widget-panelview,
1515 #widget-overflow-scroller {
1520 #widget-overflow-scroller {
1523 margin-bottom: 10px;
1526 #widget-overflow-list {
1527 width: var(--panel-ui-menuPanelWidth);
1529 padding-right: 10px;
1532 toolbaritem[overflowedItem=true],
1533 toolbarbutton[overflowedItem=true] {
1535 max-width: var(--panel-ui-menuPanelWidth);
1537 background-repeat: no-repeat;
1538 background-position: 0 center;
1541 .widget-overflow-list .toolbarbutton-1,
1542 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1543 -moz-box-align: center;
1544 -moz-box-orient: horizontal;
1547 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1548 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1550 padding-inline-start: .5em;
1553 #widget-overflow-list > .toolbaritem-combined-buttons {
1557 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1562 margin-inline-end: -1px;
1565 .subviewbutton[checked="true"] {
1566 background-image: url("chrome://global/skin/menu/menu-check.gif");
1567 background-position: top 5px left 4px;
1568 background-repeat: no-repeat;
1571 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1572 background-position: top 5px right 4px;
1575 .subviewbutton[checked="true"]:hover {
1576 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1579 .subviewbutton > .menu-iconic-left {
1580 margin-inline-end: 3px;
1583 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1587 #PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon {
1592 .panel-mainview[panelid=customizationui-widget-panel],
1593 #customizationui-widget-multiview > .panel-viewcontainer,
1594 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1595 #PanelUI-panicView > .panel-subview-body,
1596 #PanelUI-panicView {
1601 #PanelUI-panicView.cui-widget-panelview {
1605 #PanelUI-panic-timeframe {
1607 border-bottom: 1px solid var(--panel-separator-color);
1610 #panic-button-success-icon,
1611 #PanelUI-panic-timeframe-icon,
1612 #PanelUI-panic-timeframe-icon-small {
1613 background-color: transparent;
1614 margin-inline-end: 10px;
1617 #panic-button-success-icon,
1618 #PanelUI-panic-timeframe-icon {
1619 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1624 #PanelUI-panic-timeframe-icon-small {
1625 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1630 /* current attribute is only set when in use as a subview instead of a main view */
1631 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1635 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1639 #panic-button-success-header,
1640 #PanelUI-panic-header {
1641 -moz-box-align: center;
1645 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1649 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1650 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1651 transform: scaleX(-1);
1658 .subviewradio@buttonStateHover@ {
1661 .subviewradio[selected],
1662 .subviewradio[selected]:hover,
1663 .subviewradio@buttonStateActive@ {
1666 .subviewradio > .radio-check {
1669 .subviewradio > .radio-check[selected] {
1673 #PanelUI-panic-explanations {
1674 padding: 10px 10px 0;
1677 #PanelUI-panic-actionlist-main-label {
1682 .PanelUI-panic-actionlist {
1683 padding-inline-start: 20px;
1685 padding-bottom: 2px;
1686 background-size: 16px 16px;
1687 background-repeat: no-repeat;
1688 background-color: transparent;
1689 background-position: center left;
1692 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1693 background-position: center right;
1696 #PanelUI-panic-actionlist-cookies {
1697 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1700 #PanelUI-panic-actionlist-history {
1701 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1704 #PanelUI-panic-actionlist-windows {
1705 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1708 #PanelUI-panic-actionlist-newwindow {
1709 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1712 #PanelUI-panic-warning {
1719 #PanelUI-panic-view-button {
1720 background-color: #FF0000;
1724 #PanelUI-panic-view-button:hover {
1725 background-color: #FFCF00;
1728 #PanelUI-panic-view-button:hover:active {
1729 background-color: #FF9F00;
1732 #PanelUI-panic-view-button > .toolbarbutton-text {
1737 #panic-button-success-closebutton {
1740 #panic-button-success-closebutton:hover {
1743 #panic-button-success-closebutton:hover:active {
1746 /* === END panelUI.inc.css === */
1749 background-color: var(--arrowpanel-background);
1752 #PanelUI-contents #zoom-out-btn {
1754 padding-right: 12px;
1757 #PanelUI-contents #zoom-in-btn {
1759 padding-right: 12px;
1762 /* bookmark panel submenus */
1764 #BMB_bookmarksPopup menupopup[placespopup=true] {
1765 /* background: transparent;
1770 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1771 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1772 /* box-shadow: 0 0 4px rgba(0,0,0,0.2);
1773 background: var(--arrowpanel-background);
1774 color: var(--arrowpanel-color);
1775 border: 1px solid var(--arrowpanel-border-color);
1776 border-radius: 3.5px;
1780 #BMB_bookmarksPopup menupopup {
1781 /* padding-top: 2px;*/
1784 /* Add some space at the top because there are no headers: */
1785 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1786 /* padding-top: 4px;*/
1789 /* bookmark panel separator */
1790 #BMB_bookmarksPopup menuseparator {
1795 .subviewbutton > .menu-right,
1796 .subviewbutton > .menu-iconic-left {
1797 /* padding-top: 1px;
1799 margin-bottom: 2px;*/
1802 .subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon {
1803 /* This catches bookmarks, history items, and sync tabs items */
1808 /* Disabled empty item looks too small otherwise, because it has no icon. */
1809 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1810 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1811 menuitem[type="checkbox"].subviewbutton {
1812 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1813 * 2px for its border, see above */
1814 /* min-height: 22px;*/
1817 .subviewbutton > .toolbarbutton-text {
1818 /* padding-top: 3px;
1819 padding-bottom: 3px;*/
1822 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1823 -moz-appearance: none;
1825 margin-inline-start: 3px;
1828 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1830 padding-inline-start: 0;
1834 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1838 .subviewbutton > .toolbarbutton-text {
1839 padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */
1842 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1843 padding-inline-start: 2px;
1846 /* subviewbutton entries for social sidebars have images that come from external
1847 /* sources, and are not guaranteed to be the size we want, so force the size on
1849 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1854 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1858 menu.subviewbutton > .menu-right {
1859 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow");
1860 /* Reset the rect we inherit from the button: */
1861 -moz-image-region: auto;
1864 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1865 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1866 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1869 menu[disabled="true"].subviewbutton > .menu-right {
1870 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");
1873 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1874 transform: scaleX(-1);