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-succeeded"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
112 background: #008484 url(chrome://browser/skin/update-badge.svg) no-repeat center;
116 #PanelUI-menu-button[badge-status="update-failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
117 background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
121 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
122 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
126 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
127 #PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
132 /* "!important" is necessary to override the rule in toolbarbutton.css */
133 margin-top: -1px !important;
134 margin-right: -2px !important;
137 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
141 #PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
145 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
147 background: transparent url(chrome://browser/skin/warning.svg) no-repeat center;
150 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
151 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
156 background-clip: padding-box;
157 border-left: 1px solid var(--panel-separator-color);
158 margin-inline-start: var(--panel-ui-exit-subview-gutter-width);
161 .panel-viewstack[viewtype="main"] > .panel-subviews {
162 transform: translateX(var(--panel-ui-menuPanelWidth));
165 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
166 transform: translateX(var(--panel-ui-menuPanelWidth-neg));
169 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
173 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
177 .panel-subview-body {
183 #PanelUI-popup .panel-subview-body {
188 .panel-subview-header,
189 .subviewbutton.panel-subview-footer {
190 box-sizing: border-box;
191 /* min-height: 41px; */
195 .panel-subview-header {
197 background-color: var(--panel-separator-color);
199 font-variant: small-caps;
203 .panel-subview-footer {
204 border-top: 1px solid var(--panel-separator-color);
207 .cui-widget-panelview .panel-subview-header {
211 .cui-widget-panelview .subviewbutton.panel-subview-footer {
213 -moz-box-pack: center;
218 flex-direction: column;
222 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
225 #PanelUI-popup > arrowscrollbox > scrollbox {
229 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
234 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent,
235 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box {
239 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
240 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
241 /* line-height: 1.2;*/
245 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
246 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
250 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
251 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
253 clip: rect(-0.1em, auto, 2.6em, auto);
256 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
257 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
259 /* Need to override toolkit theming which sets margin: 0 !important; */
260 margin: 2px 0 0 !important;
263 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
268 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
269 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
270 margin-inline-start: 0;
274 max-width: var(--panel-ui-menuPanelWidth);
278 .panel-mainview:not([panelid="PanelUI-popup"]) {
279 max-width: var(--panel-ui-standaloneSubviewWidth);
282 /* Give WebExtension stand-alone panels extra width for Chrome compatibility */
283 .cui-widget-panel[viewId^=PanelUI-webext-] .panel-mainview {
287 .cui-widget-panel[viewId^=PanelUI-webext-] > .panel-arrowcontainer > .panel-arrowcontent {
291 panelview[id^=PanelUI-webext-] {
295 panelview:not([mainview]) .toolbarbutton-text,
296 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
301 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
305 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
309 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
310 border-radius: 4px 4px 0 0;
313 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
314 border-radius: 0 0 4px 4px;
322 max-width: var(--panel-ui-menuPanelWidth);
325 #PanelUI-contents-scroller {
328 width: var(--panel-ui-menuPanelWidth);
332 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
338 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
339 .panelUI-grid .toolbarbutton-1,
340 .panel-customization-placeholder-child {
341 -moz-appearance: none;
342 -moz-box-orient: vertical;
343 width: var(--panel-ui-menuPanelButtonWidth-min2); /* LCARStrek: XXX: found out to be needed to fit the icons */
344 height: calc(51px + 2.2em);
347 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
348 * should have a min-width set so they abide by the width set above (which they do outside of
349 * customize mode because they're in a flexed container) */
350 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
354 /* Help SDK buttons fit in. */
355 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
356 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
357 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
358 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
363 toolbarpaletteitem:-moz-any([place="palette"], [place="panel"]) > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon {
368 .customization-palette .toolbarbutton-1 {
369 -moz-appearance: none;
370 -moz-box-orient: vertical;
373 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
374 -moz-appearance: none;
375 -moz-box-orient: vertical;
376 width: var(--panel-ui-menuPanelButtonWidth-min2);
377 height: calc(49px + 2.2em);
381 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
382 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
383 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
386 .panel-customization-placeholder-child {
388 /* padding: 2px 6px;*/
391 .panelUI-grid .toolbarbutton-1[type="menu"] {
392 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
393 background-position: right 3px top 16px;
394 background-repeat: no-repeat;
397 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
398 background-position: left 3px top 16px;
401 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
405 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
406 -moz-box-align: center;
408 margin-inline-start: -16px;
410 margin-bottom: 2.2em;
414 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
415 border-radius: 0 0 0 2px;
418 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
419 border-radius: 0 0 2px 0;
422 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
426 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
427 width: var(--panel-ui-menuPanelButtonWidth);
428 margin: 0 !important;
431 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
432 -moz-box-align: center;
433 -moz-box-pack: center;
436 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
440 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
443 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
444 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
445 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
446 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
447 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
448 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
449 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
450 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
451 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
456 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
457 * which was affecting subview display. Because of this, we're hiding the iframe *only*
458 * when displaying a subview. The discerning user might notice this, but it's not nearly
459 * as bad as the brokenness.
460 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
463 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
467 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
471 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
472 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
473 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
474 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
475 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
476 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
477 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
478 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
479 .panel-customization-placeholder-child > .toolbarbutton-icon {
484 /* Explanation for the below formula (A / B - C)
486 Each button is @menuPanelButtonWidth@ wide
488 Each button has two margins.
490 The button icon is 32 pixels wide.
491 The button has 12px of horizontal padding (6 on each side).
492 The button has 0px of horizontal border (0 on each side).
493 Total width of button's icon + button padding should therefore be 44px,
494 which means each horizontal margin should be the half the button's width - (44/2) px.
496 margin: 4px var(--panel-ui-menuPanelButtonIconMargin);
499 /* above we treat the container as the icon for the margins, that is so the
500 /* badge itself is positioned correctly. Here we make sure that the icon itself
501 /* has the minimum size we want, but no padding/margin. */
502 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon,
503 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
512 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
516 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
520 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
521 margin-inline-end: 2px;
524 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
525 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
531 #zoom-in-button > .toolbarbutton-text,
532 #zoom-out-button > .toolbarbutton-text,
533 #zoom-reset-button > .toolbarbutton-icon {
540 flex-direction: column;
541 /* background-color: var(--arrowpanel-dimmed);*/
544 border-bottom-right-radius: 4px;
545 border-bottom-left-radius: 4px;
548 #main-window[customizing] #PanelUI-footer-fxa {
552 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
553 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
554 #PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
558 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after {
559 content: url("chrome://browser/skin/warning.svg");
568 #PanelUI-update-status[update-status]::after {
572 margin-inline-end: 16.5px;
574 background-size: contain;
578 #PanelUI-update-status[update-status="succeeded"]::after {
579 background-image: url(chrome://browser/skin/update-badge.svg);
580 background-color: #008484;
583 #PanelUI-update-status[update-status="failed"]::after {
584 background-image: url(chrome://browser/skin/update-badge-failed.svg);
585 background-color: #FF0000;
588 #PanelUI-fxa-status {
594 #PanelUI-footer-inner,
595 #PanelUI-footer-fxa:not([hidden]) {
597 border-top: 1px solid var(--panel-separator-color);
600 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
601 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
605 #PanelUI-footer-inner > toolbarseparator,
606 #PanelUI-footer-fxa > toolbarseparator {
608 border-left: 1px solid var(--panel-separator-color);
612 #PanelUI-footer-inner:hover > toolbarseparator,
613 #PanelUI-footer-fxa:hover > toolbarseparator {
617 #PanelUI-update-status,
625 box-sizing: border-box;
630 transition: background-color;
631 -moz-box-orient: horizontal;
634 #PanelUI-update-status {
635 border-top: 1px solid var(--panel-separator-color);
638 #PanelUI-update-status {
639 border-bottom: 1px solid transparent;
643 #PanelUI-update-status > .toolbarbutton-text {
644 width: 0; /* Fancy cropping solution for flexbox. */
647 #PanelUI-help[panel-multiview-anchor="true"] {
648 -moz-image-region: rect(0, 32px, 16px, 16px);
656 #PanelUI-update-status > .toolbarbutton-text,
657 #PanelUI-fxa-label > .toolbarbutton-text,
658 #PanelUI-customize > .toolbarbutton-text {
664 #PanelUI-help > .toolbarbutton-text,
665 #PanelUI-quit > .toolbarbutton-text,
666 #PanelUI-fxa-avatar > .toolbarbutton-text {
670 #PanelUI-update-status > .toolbarbutton-icon,
671 #PanelUI-fxa-label > .toolbarbutton-icon,
672 #PanelUI-fxa-icon > .toolbarbutton-icon,
673 #PanelUI-customize > .toolbarbutton-icon,
674 #PanelUI-help > .toolbarbutton-icon,
675 #PanelUI-quit > .toolbarbutton-icon {
676 margin-inline-end: 0;
680 padding-inline-start: 15px;
681 padding-inline-end: 15px;
687 padding-inline-start: 15px;
688 border-inline-start-style: none;
691 #PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
692 #PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
693 padding-inline-start: 0px;
696 #PanelUI-update-status {
697 width: calc(var(--panel-ui-menuPanelWidth) + 30px);
698 padding-inline-start: 15px;
699 border-inline-start-style: none;
702 #PanelUI-update-status {
703 list-style-image: url(chrome://branding/content/icon16.png);
708 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
711 #PanelUI-remotetabs {
712 --panel-ui-sync-illustration-height: 157.5px;
715 .PanelUI-remotetabs-instruction-title,
716 .PanelUI-remotetabs-instruction-label,
717 #PanelUI-remotetabs-mobile-promo {
718 /* If you change the margin here, the min-height of the synced tabs panel
719 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
720 need adjusting (see bug 1248506) */
728 .PanelUI-remotetabs-instruction-title {
732 /* The boxes with "instructions" get extra top and bottom padding for space
733 around the illustration and buttons */
734 .PanelUI-remotetabs-instruction-box {
735 /* If you change the padding here, the min-height of the synced tabs panel
736 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
737 need adjusting (see bug 1248506) */
738 padding-bottom: 30px;
742 .PanelUI-remotetabs-prefs-button {
744 -moz-appearance: none;
745 background-color: #0096dd;
746 / !important for the color as an OSX specific rule when a lightweight theme
747 is used for buttons in the toolbox overrides. See bug 1238531 for details /
748 color: white !important;
750 / If you change the margin or padding below, the min-height of the synced tabs
751 panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
752 etc) may need adjusting (see bug 1248506) /
761 .PanelUI-remotetabs-prefs-button:hover,
762 .PanelUI-remotetabs-prefs-button:hover:active {
763 /* background-color: #018acb; */
766 .remotetabs-promo-link {
770 .PanelUI-remotetabs-notabsforclient-label {
772 /* This margin is to line this label up with the labels in toolbarbuttons. */
776 .fxaSyncIllustration {
777 height: var(--panel-ui-sync-illustration-height);
778 list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg);
781 .PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
782 /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */
783 text-align: center !important;
787 #PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
791 /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
792 the panel is anchored to a toolbar button.
794 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
795 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
796 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
797 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
798 min-height: calc(var(--panel-ui-sync-illustration-height) +
799 20px + /* margin of .PanelUI-remotetabs-prefs-button */
800 16px + /* padding of .PanelUI-remotetabs-prefs-button */
801 30px + /* margin of .PanelUI-remotetabs-instruction-label */
802 30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */
806 #PanelUI-remotetabs-tabslist > label[itemtype="client"] {
810 /* Collapse the non-active vboxes in the remotetabs deck to use only the
811 height the active box needs */
812 #PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
813 #PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
814 #PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
815 visibility: collapse;
818 #PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
822 #PanelUI-fxa-icon[syncstatus="active"]:not([disabled]) {
823 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
826 #PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
827 #PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label {
828 list-style-image: url(chrome://browser/skin/warning.svg);
829 -moz-image-region: auto;
833 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
836 #customization-panelHolder #PanelUI-customize {
837 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
841 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
845 border-inline-end-style: none;
846 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
854 -moz-image-region: rect(0, 16px, 16px, 0);
857 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
858 #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
862 #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
866 #PanelUI-fxa-status[disabled],
867 #PanelUI-fxa-icon[disabled] {
868 pointer-events: none;
871 #PanelUI-fxa-avatar {
875 background-repeat: no-repeat;
876 background-position: 0 0;
877 background-size: contain;
882 margin-inline-end: 0;
885 #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
886 list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
889 #PanelUI-customize:hover,
890 #PanelUI-help:not([disabled]):hover,
891 #PanelUI-quit:not([disabled]):hover,
892 #PanelUI-customize:hover:active,
893 #PanelUI-help:not([disabled]):hover:active,
894 #PanelUI-quit:not([disabled]):hover:active,
895 #PanelUI-help[panel-multiview-anchor="true"] {
896 -moz-image-region: rect(0, 32px, 16px, 16px);
899 #PanelUI-help[disabled],
900 #PanelUI-quit[disabled],
901 #PanelUI-fxa-icon[disabled],
902 #PanelUI-fxa-avatar[disabled],
903 #PanelUI-fxa-label[disabled] > .toolbarbutton-icon,
904 #PanelUI-fxa-status::after {
905 -moz-image-region: rect(0, 48px, 16px, 32px);
908 #PanelUI-fxa-status:not([disabled]):hover,
909 #PanelUI-fxa-icon:not([disabled]):hover,
910 #PanelUI-help:not([disabled]):hover,
911 #PanelUI-customize:hover,
912 #PanelUI-quit:not([disabled]):hover {
915 #PanelUI-fxa-status:not([disabled]):hover:active,
916 #PanelUI-fxa-icon:not([disabled]):hover:active,
917 #PanelUI-help:not([disabled]):hover:active,
918 #PanelUI-customize:hover:active,
919 #PanelUI-quit:not([disabled]):hover:active {
922 #PanelUI-fxa-status:not([disabled]):hover,
923 #PanelUI-fxa-status:not([disabled]):hover:active,
924 #PanelUI-fxa-icon:not([disabled]):hover,
925 #PanelUI-fxa-icon:not([disabled]):hover:active {
928 #PanelUI-footer-fxa[fxastatus="error"] {
929 background-color: #FF0000;
933 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
934 background-color: #FFCF00;
937 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
938 background-color: #FF9F00;
941 #PanelUI-update-status {
945 #PanelUI-update-status[update-status="succeeded"] {
946 background-color: #008484;
950 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
951 background-color: #FFCF00;
954 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
955 background-color: #FF9F00;
958 #PanelUI-update-status[update-status="failed"] {
959 background-color: #FF0000;
963 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
964 background-color: #FFCF00;
967 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
968 background-color: #FF9F00;
971 #PanelUI-quit:not([disabled]):hover {
972 background-color: #FF0000;
975 #PanelUI-quit:not([disabled]):hover:active {
976 background-color: #FF9F00;
979 #customization-panelHolder #PanelUI-customize {
981 background-color: #008484;
986 #customization-panelHolder #PanelUI-customize + toolbarseparator {
990 #customization-panelHolder #PanelUI-customize:hover,
991 #customization-panelHolder #PanelUI-customize:hover:active {
992 background-color: #FFCF00;
996 #customization-palette .toolbarbutton-multiline-text,
997 #customization-palette .toolbarbutton-text {
1001 panelview .toolbarbutton-1,
1003 .widget-overflow-list .toolbarbutton-1,
1004 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1005 .share-provider-button,
1006 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1008 background-color: transparent;
1010 border-style: solid;
1011 border-color: transparent;*/
1014 panelview .toolbarbutton-1,
1016 .widget-overflow-list .toolbarbutton-1,
1017 .share-provider-button,
1018 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1022 .subviewbutton.panel-subview-footer {
1023 /* border-radius: 0; */
1027 .subviewbutton.panel-subview-footer > .menu-text {
1028 margin-inline-start: 0px !important;
1029 padding-inline-start: 6px;
1030 padding-inline-end: 6px;
1035 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
1039 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
1044 .subviewbutton.panel-subview-footer > .menu-accel-container {
1045 padding-inline-start: 6px;
1048 .subviewbutton:not(.panel-subview-footer) {
1052 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
1053 /* Bookmark items need a more specific selector. */
1054 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
1055 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
1059 .PanelUI-subView .subviewbutton[shortcut]::after {
1060 content: attr(shortcut);
1065 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
1066 margin-inline-start: 10px;
1069 /* This is a <label> but it should fit in with the menu font- and colorwise. */
1070 #PanelUI-characterEncodingView-autodetect-label {
1075 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
1076 /* margin-left: 4px;
1077 margin-right: 4px;*/
1080 panelview .toolbarbutton-1,
1081 .widget-overflow-list > .toolbarbutton-1:not(:first-child),
1082 .widget-overflow-list > .toolbaritem-combined-buttons:not(:first-child) {
1087 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1088 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
1089 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1090 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1091 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
1092 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1093 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1094 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
1095 background-color: var(--arrowpanel-dimmed);
1096 border-color: var(--panel-separator-color);
1099 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
1100 border-color: var(--panel-separator-color);
1103 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
1104 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
1105 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
1106 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
1107 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
1108 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
1109 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1110 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
1111 background-color: var(--arrowpanel-dimmed-further);
1112 border-color: var(--panel-separator-color);
1113 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
1116 .subviewbutton.panel-subview-footer {
1117 margin: 4px -4px -4px;
1118 background-color: var(--arrowpanel-dimmed);
1119 border-top: 1px solid var(--panel-separator-color);
1123 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
1124 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
1125 background-color: var(--arrowpanel-dimmed-further);
1128 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
1129 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
1130 background-color: var(--arrowpanel-dimmed-even-further);
1131 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
1134 #BMB_bookmarksPopup .subviewbutton {
1136 font-weight: normal;
1139 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
1143 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
1144 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
1145 -moz-appearance: none;
1150 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
1151 #BMB_bookmarksPopup arrowscrollbox {
1152 padding-bottom: 0px;
1155 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
1156 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
1160 / Popups with only one item don't have a footer /
1161 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1162 / These popups never have a footer /
1163 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1164 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1165 / And so they need some bottom padding: /
1166 padding-bottom: 4px;
1169 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
1170 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
1175 .PanelUI-subView menuseparator,
1176 .PanelUI-subView toolbarseparator,
1177 .cui-widget-panelview menuseparator {
1178 -moz-appearance: none;
1180 border-top: 1px solid var(--panel-separator-color);
1185 .PanelUI-subView menuseparator,
1186 .PanelUI-subView toolbarseparator {
1187 /* margin-inline-start: -5px;
1188 margin-inline-end: -4px;*/
1191 .PanelUI-subView menuseparator.small-separator,
1192 .PanelUI-subView toolbarseparator.small-separator {
1193 /* margin-left: 5px;
1194 margin-right: 5px;*/
1197 .cui-widget-panelview menuseparator.small-separator {
1198 /* margin-left: 10px;
1199 margin-right: 10px;*/
1202 .subviewbutton > .menu-accel-container {
1203 -moz-box-pack: start;
1204 margin-inline-start: 10px;
1205 margin-inline-end: auto;
1209 #PanelUI-remotetabs-tabslist > toolbarbutton,
1210 #PanelUI-historyItems > toolbarbutton {
1211 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1214 @media (min-resolution: 1.1dppx) {
1215 #PanelUI-remotetabs-tabslist > toolbarbutton,
1216 #PanelUI-historyItems > toolbarbutton {
1217 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
1221 #PanelUI-remotetabs-tabslist > toolbarbutton > .toolbarbutton-icon,
1222 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1223 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1224 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1229 toolbarbutton[panel-multiview-anchor="true"],
1230 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1232 background-color: #008484;
1235 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1239 #PanelUI-help[panel-multiview-anchor="true"] {
1240 background-image: none;
1243 #PanelUI-help[panel-multiview-anchor="true"]::after {
1248 width: var(--panel-ui-exit-subview-gutter-width);
1249 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1250 background-repeat: no-repeat;
1251 background-color: #008484;
1252 background-position: left 10px center, 0;
1255 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1256 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1257 background-position: right 10px center, 0;
1260 toolbarbutton[panel-multiview-anchor="true"] {
1261 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1262 background-position: right var(--panel-ui-menuPanelMultiviewBgPos) center;
1263 background-repeat: no-repeat;
1266 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1267 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1268 background-position: left var(--panel-ui-menuPanelMultiviewBgPos) center;
1271 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1272 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1276 #search-container[cui-areatype="menu-panel"],
1277 #wrapper-search-container[place="panel"] {
1278 width: var(--panel-ui-menuPanelWidth);
1281 #search-container[cui-areatype="menu-panel"] {
1286 toolbarpaletteitem[place="palette"] > #search-container {
1291 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1292 background-color: transparent;
1294 transition-property: background-color, border-color;
1295 transition-duration: 150ms;
1298 /* Make direct siblings overlap borders: */
1299 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1300 /* border-top-color: transparent !important; */
1303 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1304 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1305 /* margin-top: -1px; */
1308 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1313 min-width: var(--panel-ui-menuPanelButtonWidth);
1314 max-width: var(--panel-ui-menuPanelButtonWidth);
1315 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1316 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1317 height: calc(2.2em + 4px);
1319 -moz-box-orient: horizontal;
1322 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1323 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1324 /* reduce the width with 2px for this button to compensate for two separators
1326 min-width: var(--panel-ui-menuPanelButtonWidth-min2);
1327 max-width: var(--panel-ui-menuPanelButtonWidth-min2);
1330 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1334 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1338 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1339 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1340 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1341 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1342 border-top-right-radius: 0;
1343 border-bottom-right-radius: 0;
1346 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1347 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1348 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1349 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1350 border-top-left-radius: 0;
1351 border-bottom-left-radius: 0;
1354 .toolbaritem-combined-buttons > separator {
1355 -moz-appearance: none;
1357 -moz-box-align: stretch;
1360 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1364 /* background: var(--panel-separator-color);*/
1365 transition-property: margin;
1366 transition-duration: 10ms;
1367 transition-timing-function: ease;
1370 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1374 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1378 .cui-widget-panelview,
1379 #widget-overflow-scroller {
1384 #widget-overflow-scroller {
1387 margin-bottom: 10px;
1390 #widget-overflow-list {
1391 width: var(--panel-ui-menuPanelWidth);
1393 padding-right: 10px;
1396 toolbaritem[overflowedItem=true],
1397 toolbarbutton[overflowedItem=true] {
1399 max-width: var(--panel-ui-menuPanelWidth);
1401 background-repeat: no-repeat;
1402 background-position: 0 center;
1405 .widget-overflow-list .toolbarbutton-1,
1406 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1407 -moz-box-align: center;
1408 -moz-box-orient: horizontal;
1411 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1412 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1414 padding-inline-start: .5em;
1417 #widget-overflow-list > .toolbaritem-combined-buttons {
1421 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1426 margin-inline-end: -1px;
1429 .subviewbutton[checked="true"] {
1430 background-image: url("chrome://global/skin/menu/menu-check.gif");
1431 background-position: top 5px left 4px;
1432 background-repeat: no-repeat;
1435 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1436 background-position: top 5px right 4px;
1439 .subviewbutton[checked="true"]:hover {
1440 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1443 .subviewbutton > .menu-iconic-left {
1444 margin-inline-end: 3px;
1447 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1451 #PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon {
1456 .panel-mainview[panelid=customizationui-widget-panel],
1457 #customizationui-widget-multiview > .panel-viewcontainer,
1458 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1459 #PanelUI-panicView > .panel-subview-body,
1460 #PanelUI-panicView {
1465 #PanelUI-panicView.cui-widget-panelview {
1469 #PanelUI-panic-timeframe {
1471 border-bottom: 1px solid var(--panel-separator-color);
1474 #panic-button-success-icon,
1475 #PanelUI-panic-timeframe-icon,
1476 #PanelUI-panic-timeframe-icon-small {
1477 background-color: transparent;
1478 margin-inline-end: 10px;
1481 #panic-button-success-icon,
1482 #PanelUI-panic-timeframe-icon {
1483 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1488 #PanelUI-panic-timeframe-icon-small {
1489 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1494 /* current attribute is only set when in use as a subview instead of a main view */
1495 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1499 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1503 #panic-button-success-header,
1504 #PanelUI-panic-header {
1505 -moz-box-align: center;
1509 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1513 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1514 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1515 transform: scaleX(-1);
1522 .subviewradio@buttonStateHover@ {
1525 .subviewradio[selected],
1526 .subviewradio[selected]:hover,
1527 .subviewradio@buttonStateActive@ {
1530 .subviewradio > .radio-check {
1533 .subviewradio > .radio-check[selected] {
1537 #PanelUI-panic-explanations {
1538 padding: 10px 10px 0;
1541 #PanelUI-panic-actionlist-main-label {
1546 .PanelUI-panic-actionlist {
1547 padding-inline-start: 20px;
1549 padding-bottom: 2px;
1550 background-size: 16px 16px;
1551 background-repeat: no-repeat;
1552 background-color: transparent;
1553 background-position: center left;
1556 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1557 background-position: center right;
1560 #PanelUI-panic-actionlist-cookies {
1561 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1564 #PanelUI-panic-actionlist-history {
1565 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1568 #PanelUI-panic-actionlist-windows {
1569 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1572 #PanelUI-panic-actionlist-newwindow {
1573 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1576 #PanelUI-panic-warning {
1583 #PanelUI-panic-view-button {
1584 background-color: #FF0000;
1588 #PanelUI-panic-view-button:hover {
1589 background-color: #FFCF00;
1592 #PanelUI-panic-view-button:hover:active {
1593 background-color: #FF9F00;
1596 #PanelUI-panic-view-button > .toolbarbutton-text {
1601 #panic-button-success-closebutton {
1604 #panic-button-success-closebutton:hover {
1607 #panic-button-success-closebutton:hover:active {
1610 /* === END panelUI.inc.css === */
1613 background-color: var(--arrowpanel-background);
1616 #PanelUI-contents #zoom-out-btn {
1618 padding-right: 12px;
1621 #PanelUI-contents #zoom-in-btn {
1623 padding-right: 12px;
1626 /* bookmark panel submenus */
1628 #BMB_bookmarksPopup menupopup[placespopup=true] {
1629 /* background: transparent;
1634 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1635 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1636 /* box-shadow: 0 0 4px rgba(0,0,0,0.2);
1637 background: var(--arrowpanel-background);
1638 color: var(--arrowpanel-color);
1639 border: 1px solid var(--arrowpanel-border-color);
1640 border-radius: 3.5px;
1644 #BMB_bookmarksPopup menupopup {
1645 /* padding-top: 2px;*/
1648 /* Add some space at the top because there are no headers: */
1649 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1650 /* padding-top: 4px;*/
1653 /* bookmark panel separator */
1654 #BMB_bookmarksPopup menuseparator {
1659 .subviewbutton > .menu-right,
1660 .subviewbutton > .menu-iconic-left {
1661 /* padding-top: 1px;
1663 margin-bottom: 2px;*/
1666 .subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon {
1667 /* This catches bookmarks, history items, and sync tabs items */
1672 /* Disabled empty item looks too small otherwise, because it has no icon. */
1673 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1674 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1675 menuitem[type="checkbox"].subviewbutton {
1676 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1677 * 2px for its border, see above */
1678 /* min-height: 22px;*/
1681 .subviewbutton > .toolbarbutton-text {
1682 /* padding-top: 3px;
1683 padding-bottom: 3px;*/
1686 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1687 -moz-appearance: none;
1689 margin-inline-start: 3px;
1692 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1694 padding-inline-start: 0;
1698 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1702 .subviewbutton > .toolbarbutton-text {
1703 padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */
1706 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1707 padding-inline-start: 2px;
1710 /* subviewbutton entries for social sidebars have images that come from external
1711 /* sources, and are not guaranteed to be the size we want, so force the size on
1713 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1718 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1722 menu.subviewbutton > .menu-right {
1723 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow");
1724 /* Reset the rect we inherit from the button: */
1725 -moz-image-region: auto;
1728 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1729 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1730 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1733 menu[disabled="true"].subviewbutton > .menu-right {
1734 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");
1737 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1738 transform: scaleX(-1);