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 {
192 -moz-box-orient: vertical;
196 .panel-subview-body {
202 .panel-view-body-unscrollable {
207 #PanelUI-popup .panel-subview-body {
212 .panel-subview-header,
213 .subviewbutton.panel-subview-footer {
214 box-sizing: border-box;
215 /* min-height: 41px; */
219 .panel-subview-header {
221 background-color: var(--panel-separator-color);
223 font-variant: small-caps;
225 /* Workaround for min-height not being accounted for in vertical layout. */
229 .panel-subview-footer {
230 border-top: 1px solid var(--panel-separator-color);
233 .cui-widget-panelview .panel-subview-header {
237 .cui-widget-panelview .subviewbutton.panel-subview-footer {
239 -moz-box-pack: center;
244 flex-direction: column;
248 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
251 #PanelUI-popup > arrowscrollbox > scrollbox {
255 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
260 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent,
261 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box {
265 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
266 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
267 /* line-height: 1.2;*/
271 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
272 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
276 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
277 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
279 clip: rect(-0.1em, auto, 2.6em, auto);
282 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
283 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
285 /* Need to override toolkit theming which sets margin: 0 !important; */
286 margin: 2px 0 0 !important;
289 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
294 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
295 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
296 margin-inline-start: 0;
300 max-width: var(--panel-ui-menuPanelWidth);
304 .panel-mainview:not([panelid="PanelUI-popup"]) {
305 max-width: var(--panel-ui-standaloneSubviewWidth);
308 /* Give WebExtension stand-alone panels extra width for Chrome compatibility */
309 .cui-widget-panel[viewId^=PanelUI-webext-] .panel-mainview {
313 .cui-widget-panel[viewId^=PanelUI-webext-] > .panel-arrowcontainer > .panel-arrowcontent {
317 panelview[id^=PanelUI-webext-] {
321 panelview:not([mainview]) .toolbarbutton-text,
322 .cui-widget-panel toolbarbutton:not([wrap]) > .toolbarbutton-text {
327 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
331 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
335 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
336 border-radius: 4px 4px 0 0;
339 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
340 border-radius: 0 0 4px 4px;
348 max-width: var(--panel-ui-menuPanelWidth);
351 #PanelUI-contents-scroller {
354 width: var(--panel-ui-menuPanelWidth);
358 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
364 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
365 .panelUI-grid .toolbarbutton-1,
366 .panel-customization-placeholder-child {
367 -moz-appearance: none;
368 -moz-box-orient: vertical;
369 width: var(--panel-ui-menuPanelButtonWidth-min2); /* LCARStrek: XXX: found out to be needed to fit the icons */
370 height: calc(51px + 2.2em);
373 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
374 * should have a min-width set so they abide by the width set above (which they do outside of
375 * customize mode because they're in a flexed container) */
376 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
380 /* Help SDK buttons fit in. */
381 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
382 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
383 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
384 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
389 toolbarpaletteitem:-moz-any([place="palette"], [place="panel"]) > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon {
394 .customization-palette .toolbarbutton-1 {
395 -moz-appearance: none;
396 -moz-box-orient: vertical;
399 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
400 -moz-appearance: none;
401 -moz-box-orient: vertical;
402 width: var(--panel-ui-menuPanelButtonWidth-min2);
403 height: calc(49px + 2.2em);
407 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
408 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
409 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
412 .panel-customization-placeholder-child {
414 /* padding: 2px 6px;*/
417 .panelUI-grid .toolbarbutton-1[type="menu"] {
418 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
419 background-position: right 3px top 16px;
420 background-repeat: no-repeat;
423 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
424 background-position: left 3px top 16px;
427 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
431 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
432 -moz-box-align: center;
434 margin-inline-start: -16px;
436 margin-bottom: 2.2em;
440 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
441 border-radius: 0 0 0 2px;
444 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
445 border-radius: 0 0 2px 0;
448 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
452 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
453 width: var(--panel-ui-menuPanelButtonWidth);
454 margin: 0 !important;
457 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
458 -moz-box-align: center;
459 -moz-box-pack: center;
462 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
466 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
469 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
470 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
471 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > .panel-banner-item,
472 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
473 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-label,
474 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-icon,
475 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
476 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
477 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
482 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
483 * which was affecting subview display. Because of this, we're hiding the iframe *only*
484 * when displaying a subview. The discerning user might notice this, but it's not nearly
485 * as bad as the brokenness.
486 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
489 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
493 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
497 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
498 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
499 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
500 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
501 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
502 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
503 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
504 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
505 .panel-customization-placeholder-child > .toolbarbutton-icon {
510 /* Explanation for the below formula (A / B - C)
512 Each button is @menuPanelButtonWidth@ wide
514 Each button has two margins.
516 The button icon is 32 pixels wide.
517 The button has 12px of horizontal padding (6 on each side).
518 The button has 0px of horizontal border (0 on each side).
519 Total width of button's icon + button padding should therefore be 44px,
520 which means each horizontal margin should be the half the button's width - (44/2) px.
522 margin: 4px var(--panel-ui-menuPanelButtonIconMargin);
525 /* above we treat the container as the icon for the margins, that is so the
526 /* badge itself is positioned correctly. Here we make sure that the icon itself
527 /* has the minimum size we want, but no padding/margin. */
528 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon,
529 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
538 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
542 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
546 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
547 margin-inline-end: 2px;
550 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
551 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
557 #zoom-in-button > .toolbarbutton-text,
558 #zoom-out-button > .toolbarbutton-text,
559 #zoom-reset-button > .toolbarbutton-icon {
566 flex-direction: column;
567 /* background-color: var(--arrowpanel-dimmed);*/
570 border-bottom-right-radius: 4px;
571 border-bottom-left-radius: 4px;
574 #main-window[customizing] #PanelUI-fxa-container {
578 #PanelUI-fxa-container:not([fxastatus="signedin"]) > toolbarseparator,
579 #PanelUI-fxa-container:not([fxastatus="signedin"]) > #PanelUI-fxa-icon {
583 #PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status::after,
584 #PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status::after {
585 content: url("chrome://browser/skin/warning.svg");
594 .addon-banner-item::after,
595 .panel-banner-item::after {
599 margin-inline-end: 16.5px;
604 background-color: #A09090;
605 /* Force border to override `.addon-banner-item` selector below */
606 /*border-top: 1px solid hsl(45, 100%, 77%) !important;*/
609 width: calc(22.35em + 30px);
610 padding-inline-start: 15px;
611 border-inline-start-style: none;
614 .addon-banner-item:hover {
615 background-color: #FFCF00;
618 .addon-banner-item:active {
619 background-color: #FF9F00;
622 .addon-banner-item > .toolbarbutton-icon {
627 .addon-banner-item::after {
628 background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
631 #PanelUI-fxa-status {
637 #PanelUI-footer-inner,
638 #PanelUI-fxa-container:not([hidden]) {
640 border-top: 1px solid var(--panel-separator-color);
643 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
644 #PanelUI-multiView[viewtype="subview"] #PanelUI-fxa-container {
648 #PanelUI-footer-inner > toolbarseparator,
649 #PanelUI-fxa-container > toolbarseparator {
651 border-left: 1px solid var(--panel-separator-color);
655 #PanelUI-footer-inner:hover > toolbarseparator,
656 #PanelUI-fxa-container:hover > toolbarseparator {
669 box-sizing: border-box;
674 transition: background-color;
675 -moz-box-orient: horizontal;
679 border-top: 1px solid var(--panel-separator-color);
680 border-bottom: 1px solid transparent;
684 .panel-banner-item > .toolbarbutton-text {
685 width: 0; /* Fancy cropping solution for flexbox. */
688 #PanelUI-help[panel-multiview-anchor="true"] {
689 -moz-image-region: rect(0, 32px, 16px, 16px);
692 /* FxAccount indicator bits. */
696 -moz-appearance: none;
700 -moz-box-orient: horizontal;
701 -moz-image-region: rect(0, 16px, 16px, 0);
702 list-style-image: url(chrome://browser/skin/syncFx-horizontalbar.png);
707 padding-inline-start: 12px;
715 #appMenu-fxa-icon > .toolbarbutton-text {
719 #appMenu-fxa-icon[syncstatus="active"] {
720 list-style-image: url(chrome://browser/skin/syncFxProgress-horizontalbar.png);
723 #appMenu-fxa-avatar {
724 pointer-events: none;
725 list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
728 #appMenu-fxa-container {
729 -moz-box-orient: horizontal;
732 /* Handle different UI states. */
733 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label > .toolbarbutton-icon,
734 #appMenu-fxa-container:not([fxastatus="signedin"]) > toolbarseparator,
735 #appMenu-fxa-container:not([fxastatus="signedin"]) > #appMenu-fxa-icon,
736 #appMenu-fxa-container:not([fxastatus="signedin"]) > #appMenu-fxa-status > #appMenu-fxa-avatar {
740 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label {
741 /* 12px space before the avatar, then 16px for the avatar */
742 padding-inline-start: 28px;
743 margin-inline-start: -28px;
745 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status {
746 margin-inline-end: 10px;
749 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-avatar {
750 margin-inline-start: 12px;
753 #appMenu-fxa-container[fxastatus="signedin"] > toolbarseparator {
754 -moz-appearance: none;
759 /* Use background: rather than background-color: to override background-image
761 background: var(--arrowpanel-dimmed);
765 #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status > #appMenu-fxa-label,
766 #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status > #appMenu-fxa-label {
767 list-style-image: url(chrome://browser/skin/warning.svg);
768 -moz-image-region: rect(0, 16px, 16px, 0);
771 #appMenu-fxa-container[fxastatus="login-failed"],
772 #appMenu-fxa-container[fxastatus="unverified"] {
773 background-color: var(--appmenu-yellow-warning-color);
774 border-top: 1px solid var(--appmenu-yellow-warning-border-color);
775 border-bottom: 1px solid var(--appmenu-yellow-warning-border-color);
778 #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover,
779 #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover {
780 background-color: var(--appmenu-yellow-warning-hover-color);
783 #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover:active,
784 #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover:active {
785 background-color: var(--appmenu-yellow-warning-active-color);
793 .addon-banner-item > .toolbarbutton-text,
794 .panel-banner-item > .toolbarbutton-text,
795 #PanelUI-fxa-label > .toolbarbutton-text,
796 #PanelUI-customize > .toolbarbutton-text {
802 #PanelUI-help > .toolbarbutton-text,
803 #PanelUI-quit > .toolbarbutton-text,
804 #PanelUI-fxa-avatar > .toolbarbutton-text {
808 .panel-banner-item > .toolbarbutton-icon,
809 #PanelUI-fxa-label > .toolbarbutton-icon,
810 #PanelUI-fxa-icon > .toolbarbutton-icon,
811 #PanelUI-customize > .toolbarbutton-icon,
812 #PanelUI-help > .toolbarbutton-icon,
813 #PanelUI-quit > .toolbarbutton-icon {
814 margin-inline-end: 0;
818 padding-inline-start: 15px;
819 padding-inline-end: 15px;
826 padding-inline-start: 15px;
827 border-inline-start-style: none;
830 #PanelUI-fxa-container[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label {
831 padding-inline-start: 0px;
834 /* descend from #PanelUI-footer to add specificity, or else the
835 padding-inline-start will be overridden */
836 #PanelUI-footer > .panel-banner-item {
837 width: calc(var(--panel-ui-menuPanelWidth) + 30px);
838 padding-inline-start: 15px;
839 border-inline-start-style: none;
844 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
847 #PanelUI-fxa-label:hover,
848 #PanelUI-fxa-icon:hover {
849 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar-hover.png");
852 #PanelUI-remotetabs {
853 --panel-ui-sync-illustration-height: 157.5px;
856 .PanelUI-remotetabs-instruction-title,
857 .PanelUI-remotetabs-instruction-label,
858 #PanelUI-remotetabs-mobile-promo {
859 /* If you change the margin here, the min-height of the synced tabs panel
860 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
861 need adjusting (see bug 1248506) */
869 .PanelUI-remotetabs-instruction-title {
873 /* The boxes with "instructions" get extra top and bottom padding for space
874 around the illustration and buttons */
875 .PanelUI-remotetabs-instruction-box {
876 /* If you change the padding here, the min-height of the synced tabs panel
877 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
878 need adjusting (see bug 1248506) */
879 padding-bottom: 30px;
883 .PanelUI-remotetabs-prefs-button {
885 -moz-appearance: none;
886 background-color: #0096dd;
887 / !important for the color as an OSX specific rule when a lightweight theme
888 is used for buttons in the toolbox overrides. See bug 1238531 for details /
889 color: white !important;
891 / If you change the margin or padding below, the min-height of the synced tabs
892 panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
893 etc) may need adjusting (see bug 1248506) /
902 .PanelUI-remotetabs-prefs-button:hover,
903 .PanelUI-remotetabs-prefs-button:hover:active {
904 /* background-color: #018acb; */
907 .remotetabs-promo-link {
911 .PanelUI-remotetabs-notabsforclient-label {
913 /* This margin is to line this label up with the labels in toolbarbuttons. */
917 #PanelUI-remotetabs[mainview] .PanelUI-remotetabs-notabsforclient-label {
921 .fxaSyncIllustration {
923 height: var(--panel-ui-sync-illustration-height);
924 -moz-context-properties: fill;
928 .PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
929 /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */
930 text-align: center !important;
934 #PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
938 /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
939 the panel is anchored to a toolbar button.
941 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
942 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
943 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
944 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
945 min-height: calc(var(--panel-ui-sync-illustration-height) +
946 20px + /* margin of .PanelUI-remotetabs-prefs-button */
947 16px + /* padding of .PanelUI-remotetabs-prefs-button */
948 30px + /* margin of .PanelUI-remotetabs-instruction-label */
949 30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */
953 #PanelUI-remotetabs-tabslist > label[itemtype="client"] {
957 /* Collapse the non-active vboxes in the remotetabs deck to use only the
958 height the active box needs */
959 #PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
960 #PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
961 #PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
962 visibility: collapse;
965 #PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
969 #PanelUI-fxa-icon[syncstatus="active"] {
970 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
974 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
977 #customization-panelHolder #PanelUI-customize {
978 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
982 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
986 border-inline-end-style: none;
987 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
996 -moz-image-region: rect(0, 16px, 16px, 0);
999 #PanelUI-fxa-container[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
1000 #PanelUI-fxa-container:not([fxastatus="signedin"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
1004 #PanelUI-fxa-avatar {
1008 background-repeat: no-repeat;
1009 background-position: 0 0;
1010 background-size: contain;
1015 margin-inline-end: 0;
1018 #PanelUI-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
1019 list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
1022 #PanelUI-customize:hover,
1023 #PanelUI-help:not([disabled]):hover,
1024 #PanelUI-quit:not([disabled]):hover,
1025 #PanelUI-customize:hover:active,
1026 #PanelUI-help:not([disabled]):hover:active,
1027 #PanelUI-quit:not([disabled]):hover:active,
1028 #PanelUI-help[panel-multiview-anchor="true"] {
1029 -moz-image-region: rect(0, 32px, 16px, 16px);
1032 #PanelUI-help[disabled],
1033 #PanelUI-quit[disabled] {
1034 -moz-image-region: rect(0, 48px, 16px, 32px);
1037 #PanelUI-fxa-status:hover,
1038 #PanelUI-fxa-icon:hover,
1039 #PanelUI-help:not([disabled]):hover,
1040 #PanelUI-customize:hover,
1041 #PanelUI-quit:not([disabled]):hover {
1044 #PanelUI-fxa-status:hover:active,
1045 #PanelUI-fxa-icon:hover:active,
1046 #PanelUI-help:not([disabled]):hover:active,
1047 #PanelUI-customize:hover:active,
1048 #PanelUI-quit:not([disabled]):hover:active {
1051 #PanelUI-fxa-status:hover,
1052 #PanelUI-fxa-status:hover:active,
1053 #PanelUI-fxa-icon:hover,
1054 #PanelUI-fxa-icon:hover:active {
1057 #PanelUI-fxa-container[fxastatus="login-failed"],
1058 #PanelUI-fxa-container[fxastatus="unverified"] {
1059 background-color: #FF0000;
1063 #PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status:hover,
1064 #PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status:hover {
1065 background-color: #FFCF00;
1068 #PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status:hover:active,
1069 #PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status:hover:active {
1070 background-color: #FF9F00;
1073 .panel-banner-item {
1074 background-color: #008484;
1078 .panel-banner-item:not([disabled]):hover {
1079 background-color: #FFCF00;
1082 .panel-banner-item:not([disabled]):hover:active {
1083 background-color: #FF9F00;
1086 #PanelUI-quit:not([disabled]):hover {
1087 background-color: #FF0000;
1090 #PanelUI-quit:not([disabled]):hover:active {
1091 background-color: #FF9F00;
1094 #customization-panelHolder #PanelUI-customize {
1096 background-color: #008484;
1101 #customization-panelHolder #PanelUI-customize + toolbarseparator {
1105 #customization-panelHolder #PanelUI-customize:hover,
1106 #customization-panelHolder #PanelUI-customize:hover:active {
1107 background-color: #FFCF00;
1111 #customization-palette .toolbarbutton-multiline-text,
1112 #customization-palette .toolbarbutton-text {
1116 panelview .toolbarbutton-1,
1118 .widget-overflow-list .toolbarbutton-1,
1119 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1120 .share-provider-button,
1121 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1123 background-color: transparent;
1125 border-style: solid;
1126 border-color: transparent;*/
1129 panelview .toolbarbutton-1,
1131 .widget-overflow-list .toolbarbutton-1,
1132 .share-provider-button,
1133 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1137 .subviewbutton.panel-subview-footer {
1138 /* border-radius: 0; */
1142 .subviewbutton.panel-subview-footer > .menu-text {
1143 margin-inline-start: 0px !important;
1144 padding-inline-start: 6px;
1145 padding-inline-end: 6px;
1150 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
1154 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
1159 .subviewbutton.panel-subview-footer > .menu-accel-container {
1160 padding-inline-start: 6px;
1163 .subviewbutton:not(.panel-subview-footer) {
1167 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
1168 /* Bookmark items need a more specific selector. */
1169 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
1170 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
1174 .subviewbutton[shortcut]::after {
1175 content: attr(shortcut);
1180 .subviewbutton[shortcut]::after {
1181 margin-inline-start: 10px;
1184 /* This is a <label> but it should fit in with the menu font- and colorwise. */
1185 #PanelUI-characterEncodingView-autodetect-label {
1190 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
1191 /* margin-left: 4px;
1192 margin-right: 4px;*/
1195 panelview .toolbarbutton-1,
1196 .widget-overflow-list > .toolbarbutton-1:not(:first-child),
1197 .widget-overflow-list > .toolbaritem-combined-buttons:not(:first-child) {
1202 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1203 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
1204 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1205 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1206 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
1207 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1208 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1209 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
1210 background-color: var(--arrowpanel-dimmed);
1211 border-color: var(--panel-separator-color);
1214 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
1215 border-color: var(--panel-separator-color);
1218 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
1219 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
1220 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
1221 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
1222 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
1223 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
1224 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1225 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
1226 background-color: var(--arrowpanel-dimmed-further);
1227 border-color: var(--panel-separator-color);
1228 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
1231 .subviewbutton.panel-subview-footer {
1232 margin: 4px -4px -4px;
1233 background-color: var(--arrowpanel-dimmed);
1234 border-top: 1px solid var(--panel-separator-color);
1238 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
1239 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
1240 background-color: var(--arrowpanel-dimmed-further);
1243 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
1244 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
1245 background-color: var(--arrowpanel-dimmed-even-further);
1246 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
1249 #BMB_bookmarksPopup .subviewbutton {
1251 font-weight: normal;
1254 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
1258 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
1259 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
1260 -moz-appearance: none;
1265 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
1266 #BMB_bookmarksPopup arrowscrollbox {
1267 padding-bottom: 0px;
1270 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
1271 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
1275 / Popups with only one item don't have a footer /
1276 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1277 / These popups never have a footer /
1278 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1279 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1280 #BMB_mobileBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1281 / And so they need some bottom padding: /
1282 padding-bottom: 4px;
1285 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
1286 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
1291 #widget-overflow-scroller > toolbarseparator,
1292 .PanelUI-subView menuseparator,
1293 .PanelUI-subView toolbarseparator,
1294 .cui-widget-panelview menuseparator,
1295 .cui-widget-panel toolbarseparator {
1296 -moz-appearance: none;
1298 border-top: 1px solid var(--panel-separator-color);
1303 .PanelUI-subView menuseparator,
1304 .PanelUI-subView toolbarseparator {
1305 /* margin-inline-start: -5px;
1306 margin-inline-end: -4px;*/
1309 .PanelUI-subView menuseparator.small-separator,
1310 .PanelUI-subView toolbarseparator.small-separator {
1311 /* margin-left: 5px;
1312 margin-right: 5px;*/
1315 .cui-widget-panelview menuseparator.small-separator {
1316 /* margin-left: 10px;
1317 margin-right: 10px;*/
1320 .subviewbutton > .menu-accel-container {
1321 -moz-box-pack: start;
1322 margin-inline-start: 10px;
1323 margin-inline-end: auto;
1327 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"],
1328 #PanelUI-historyItems > toolbarbutton {
1329 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
1332 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon,
1333 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1334 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1335 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1340 toolbarbutton[panel-multiview-anchor="true"],
1341 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1343 background-color: #008484;
1346 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1350 #PanelUI-help[panel-multiview-anchor="true"] {
1351 background-image: none;
1354 #PanelUI-help[panel-multiview-anchor="true"]::after {
1359 width: var(--panel-ui-exit-subview-gutter-width);
1360 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1361 background-repeat: no-repeat;
1362 background-color: #008484;
1363 background-position: left 10px center, 0;
1366 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1367 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1368 background-position: right 10px center, 0;
1371 toolbarbutton[panel-multiview-anchor="true"] {
1372 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1373 background-position: right var(--panel-ui-menuPanelMultiviewBgPos) center;
1374 background-repeat: no-repeat;
1377 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1378 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1379 background-position: left var(--panel-ui-menuPanelMultiviewBgPos) center;
1382 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1383 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1387 #search-container[cui-areatype="menu-panel"],
1388 #wrapper-search-container[place="panel"] {
1389 width: var(--panel-ui-menuPanelWidth);
1392 #search-container[cui-areatype="menu-panel"] {
1397 toolbarpaletteitem[place="palette"] > #search-container {
1402 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1403 background-color: transparent;
1405 transition-property: background-color, border-color;
1406 transition-duration: 150ms;
1409 /* Make direct siblings overlap borders: */
1410 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1411 /* border-top-color: transparent !important; */
1414 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1415 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1416 /* margin-top: -1px; */
1419 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1424 min-width: var(--panel-ui-menuPanelButtonWidth);
1425 max-width: var(--panel-ui-menuPanelButtonWidth);
1426 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1427 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1428 height: calc(2.2em + 4px);
1430 -moz-box-orient: horizontal;
1433 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1434 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1435 /* reduce the width with 2px for this button to compensate for two separators
1437 min-width: var(--panel-ui-menuPanelButtonWidth-min2);
1438 max-width: var(--panel-ui-menuPanelButtonWidth-min2);
1441 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1445 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1449 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1450 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1451 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1452 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1453 border-top-right-radius: 0;
1454 border-bottom-right-radius: 0;
1457 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1458 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1459 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1460 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1461 border-top-left-radius: 0;
1462 border-bottom-left-radius: 0;
1465 .toolbaritem-combined-buttons > separator {
1466 -moz-appearance: none;
1468 -moz-box-align: stretch;
1471 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1475 /* background: var(--panel-separator-color);*/
1476 transition-property: margin;
1477 transition-duration: 10ms;
1478 transition-timing-function: ease;
1481 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1485 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1489 .cui-widget-panelview,
1490 #widget-overflow-scroller {
1495 #widget-overflow-scroller {
1498 margin-bottom: 10px;
1501 .widget-overflow-list {
1502 width: var(--panel-ui-menuPanelWidth);
1504 padding-right: 10px;
1507 toolbaritem[overflowedItem=true],
1508 toolbarbutton[overflowedItem=true] {
1510 max-width: var(--panel-ui-menuPanelWidth);
1512 background-repeat: no-repeat;
1513 background-position: 0 center;
1516 .widget-overflow-list .toolbarbutton-1,
1517 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1518 -moz-box-align: center;
1519 -moz-box-orient: horizontal;
1522 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1523 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1525 padding-inline-start: .5em;
1528 .widget-overflow-list > .toolbaritem-combined-buttons {
1532 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1537 margin-inline-end: -1px;
1540 .subviewbutton[checked="true"] {
1541 background-image: url("chrome://global/skin/menu/menu-check.gif");
1542 background-position: top 5px left 4px;
1543 background-repeat: no-repeat;
1546 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1547 background-position: top 5px right 4px;
1550 .subviewbutton[checked="true"]:hover {
1551 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1554 .subviewbutton > .menu-iconic-left {
1555 margin-inline-end: 3px;
1558 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1562 #PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon {
1567 .panel-mainview[panelid=customizationui-widget-panel],
1568 #customizationui-widget-multiview > .panel-viewcontainer,
1569 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1570 #PanelUI-panicView > .panel-subview-body,
1571 #PanelUI-panicView {
1576 #PanelUI-panicView.cui-widget-panelview {
1580 #PanelUI-panic-timeframe {
1582 border-bottom: 1px solid var(--panel-separator-color);
1585 #panic-button-success-icon,
1586 #PanelUI-panic-timeframe-icon,
1587 #PanelUI-panic-timeframe-icon-small {
1588 background-color: transparent;
1589 margin-inline-end: 10px;
1592 #panic-button-success-icon,
1593 #PanelUI-panic-timeframe-icon {
1594 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1599 #PanelUI-panic-timeframe-icon-small {
1600 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1605 /* current attribute is only set when in use as a subview instead of a main view */
1606 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1610 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1614 #panic-button-success-header,
1615 #PanelUI-panic-header {
1616 -moz-box-align: center;
1620 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1624 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1625 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1626 transform: scaleX(-1);
1633 .subviewradio@buttonStateHover@ {
1636 .subviewradio[selected],
1637 .subviewradio[selected]:hover,
1638 .subviewradio@buttonStateActive@ {
1641 .subviewradio > .radio-check {
1644 .subviewradio > .radio-check[selected] {
1648 #PanelUI-panic-explanations {
1649 padding: 10px 10px 0;
1652 #PanelUI-panic-actionlist-main-label {
1657 .PanelUI-panic-actionlist {
1658 padding-inline-start: 20px;
1660 padding-bottom: 2px;
1661 background-size: 16px 16px;
1662 background-repeat: no-repeat;
1663 background-color: transparent;
1664 background-position: center left;
1667 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1668 background-position: center right;
1671 #PanelUI-panic-actionlist-cookies {
1672 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1675 #PanelUI-panic-actionlist-history {
1676 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1679 #PanelUI-panic-actionlist-windows {
1680 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1683 #PanelUI-panic-actionlist-newwindow {
1684 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1687 #PanelUI-panic-warning {
1694 #PanelUI-panic-view-button {
1695 background-color: #FF0000;
1699 #PanelUI-panic-view-button:hover {
1700 background-color: #FFCF00;
1703 #PanelUI-panic-view-button:hover:active {
1704 background-color: #FF9F00;
1707 #PanelUI-panic-view-button > .toolbarbutton-text {
1712 #panic-button-success-closebutton {
1715 #panic-button-success-closebutton:hover {
1718 #panic-button-success-closebutton:hover:active {
1721 /* === END panelUI.inc.css === */
1724 background-color: var(--arrowpanel-background);
1727 #PanelUI-contents #zoom-out-btn {
1729 padding-right: 12px;
1732 #PanelUI-contents #zoom-in-btn {
1734 padding-right: 12px;
1737 /* bookmark panel submenus */
1739 #BMB_bookmarksPopup menupopup[placespopup=true] {
1740 /* background: transparent;
1745 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1746 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1747 /* box-shadow: 0 0 4px rgba(0,0,0,0.2);
1748 background: var(--arrowpanel-background);
1749 color: var(--arrowpanel-color);
1750 border: 1px solid var(--arrowpanel-border-color);
1751 border-radius: 3.5px;
1755 #BMB_bookmarksPopup menupopup {
1756 /* padding-top: 2px;*/
1759 /* Add some space at the top because there are no headers: */
1760 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1761 /* padding-top: 4px;*/
1764 /* bookmark panel separator */
1765 #BMB_bookmarksPopup menuseparator {
1770 .subviewbutton > .menu-right,
1771 .subviewbutton > .menu-iconic-left {
1772 /* padding-top: 1px;
1774 margin-bottom: 2px;*/
1777 .subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon {
1778 /* This catches bookmarks, history items, and sync tabs items */
1783 /* Disabled empty item looks too small otherwise, because it has no icon. */
1784 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1785 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1786 menuitem[type="checkbox"].subviewbutton {
1787 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1788 * 2px for its border, see above */
1789 /* min-height: 22px;*/
1792 .subviewbutton > .toolbarbutton-text {
1793 /* padding-top: 3px;
1794 padding-bottom: 3px;*/
1797 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1798 -moz-appearance: none;
1800 margin-inline-start: 3px;
1803 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1805 padding-inline-start: 0;
1809 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1813 .subviewbutton > .toolbarbutton-text {
1814 padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */
1817 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1818 padding-inline-start: 2px;
1821 /* subviewbutton entries for social sidebars have images that come from external
1822 /* sources, and are not guaranteed to be the size we want, so force the size on
1824 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1829 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1833 menu.subviewbutton > .menu-right {
1834 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow");
1835 /* Reset the rect we inherit from the button: */
1836 -moz-image-region: auto;
1839 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1840 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1841 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1844 menu[disabled="true"].subviewbutton > .menu-right {
1845 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");
1848 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1849 transform: scaleX(-1);