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 {
154 #PanelUI-menu-button[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
156 background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
161 background-clip: padding-box;
162 border-left: 1px solid var(--panel-separator-color);
163 margin-inline-start: var(--panel-ui-exit-subview-gutter-width);
166 .panel-viewstack[viewtype="main"] > .panel-subviews {
167 transform: translateX(var(--panel-ui-menuPanelWidth));
170 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
171 transform: translateX(var(--panel-ui-menuPanelWidth-neg));
174 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
178 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
182 .panel-subview-body {
188 #PanelUI-popup .panel-subview-body {
193 .panel-subview-header,
194 .subviewbutton.panel-subview-footer {
195 box-sizing: border-box;
196 /* min-height: 41px; */
200 .panel-subview-header {
202 background-color: var(--panel-separator-color);
204 font-variant: small-caps;
208 .panel-subview-footer {
209 border-top: 1px solid var(--panel-separator-color);
212 .cui-widget-panelview .panel-subview-header {
216 .cui-widget-panelview .subviewbutton.panel-subview-footer {
218 -moz-box-pack: center;
223 flex-direction: column;
227 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
230 #PanelUI-popup > arrowscrollbox > scrollbox {
234 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
239 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent,
240 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box {
244 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
245 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
246 /* line-height: 1.2;*/
250 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
251 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
255 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
256 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
258 clip: rect(-0.1em, auto, 2.6em, auto);
261 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
262 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
264 /* Need to override toolkit theming which sets margin: 0 !important; */
265 margin: 2px 0 0 !important;
268 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
273 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
274 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
275 margin-inline-start: 0;
279 max-width: var(--panel-ui-menuPanelWidth);
283 .panel-mainview:not([panelid="PanelUI-popup"]) {
284 max-width: var(--panel-ui-standaloneSubviewWidth);
287 /* Give WebExtension stand-alone panels extra width for Chrome compatibility */
288 .cui-widget-panel[viewId^=PanelUI-webext-] .panel-mainview {
292 .cui-widget-panel[viewId^=PanelUI-webext-] > .panel-arrowcontainer > .panel-arrowcontent {
296 panelview[id^=PanelUI-webext-] {
300 panelview:not([mainview]) .toolbarbutton-text,
301 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
306 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
310 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
314 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
315 border-radius: 4px 4px 0 0;
318 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
319 border-radius: 0 0 4px 4px;
327 max-width: var(--panel-ui-menuPanelWidth);
330 #PanelUI-contents-scroller {
333 width: var(--panel-ui-menuPanelWidth);
337 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
343 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
344 .panelUI-grid .toolbarbutton-1,
345 .panel-customization-placeholder-child {
346 -moz-appearance: none;
347 -moz-box-orient: vertical;
348 width: var(--panel-ui-menuPanelButtonWidth-min2); /* LCARStrek: XXX: found out to be needed to fit the icons */
349 height: calc(51px + 2.2em);
352 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
353 * should have a min-width set so they abide by the width set above (which they do outside of
354 * customize mode because they're in a flexed container) */
355 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
359 /* Help SDK buttons fit in. */
360 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
361 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
362 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
363 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
368 toolbarpaletteitem:-moz-any([place="palette"], [place="panel"]) > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon {
373 .customization-palette .toolbarbutton-1 {
374 -moz-appearance: none;
375 -moz-box-orient: vertical;
378 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
379 -moz-appearance: none;
380 -moz-box-orient: vertical;
381 width: var(--panel-ui-menuPanelButtonWidth-min2);
382 height: calc(49px + 2.2em);
386 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
387 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
388 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
391 .panel-customization-placeholder-child {
393 /* padding: 2px 6px;*/
396 .panelUI-grid .toolbarbutton-1[type="menu"] {
397 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
398 background-position: right 3px top 16px;
399 background-repeat: no-repeat;
402 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
403 background-position: left 3px top 16px;
406 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
410 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
411 -moz-box-align: center;
413 margin-inline-start: -16px;
415 margin-bottom: 2.2em;
419 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
420 border-radius: 0 0 0 2px;
423 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
424 border-radius: 0 0 2px 0;
427 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
431 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
432 width: var(--panel-ui-menuPanelButtonWidth);
433 margin: 0 !important;
436 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
437 -moz-box-align: center;
438 -moz-box-pack: center;
441 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
445 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
448 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
449 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
450 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
451 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
452 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
453 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
454 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
455 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
456 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
461 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
462 * which was affecting subview display. Because of this, we're hiding the iframe *only*
463 * when displaying a subview. The discerning user might notice this, but it's not nearly
464 * as bad as the brokenness.
465 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
468 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
472 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
476 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
477 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
478 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
479 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
480 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
481 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
482 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
483 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
484 .panel-customization-placeholder-child > .toolbarbutton-icon {
489 /* Explanation for the below formula (A / B - C)
491 Each button is @menuPanelButtonWidth@ wide
493 Each button has two margins.
495 The button icon is 32 pixels wide.
496 The button has 12px of horizontal padding (6 on each side).
497 The button has 0px of horizontal border (0 on each side).
498 Total width of button's icon + button padding should therefore be 44px,
499 which means each horizontal margin should be the half the button's width - (44/2) px.
501 margin: 4px var(--panel-ui-menuPanelButtonIconMargin);
504 /* above we treat the container as the icon for the margins, that is so the
505 /* badge itself is positioned correctly. Here we make sure that the icon itself
506 /* has the minimum size we want, but no padding/margin. */
507 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon,
508 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
517 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
521 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
525 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
526 margin-inline-end: 2px;
529 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
530 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
536 #zoom-in-button > .toolbarbutton-text,
537 #zoom-out-button > .toolbarbutton-text,
538 #zoom-reset-button > .toolbarbutton-icon {
545 flex-direction: column;
546 /* background-color: var(--arrowpanel-dimmed);*/
549 border-bottom-right-radius: 4px;
550 border-bottom-left-radius: 4px;
553 #main-window[customizing] #PanelUI-footer-fxa {
557 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
558 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
559 #PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
563 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after {
564 content: url("chrome://browser/skin/warning.svg");
573 #PanelUI-update-status[update-status]::after,
574 #PanelUI-footer-addons > toolbarbutton::after {
578 margin-inline-end: 16.5px;
580 background-size: contain;
584 #PanelUI-update-status[update-status="succeeded"]::after {
585 background-image: url(chrome://browser/skin/update-badge.svg);
586 background-color: #008484;
589 #PanelUI-update-status[update-status="failed"]::after {
590 background-image: url(chrome://browser/skin/update-badge-failed.svg);
591 background-color: #FF0000;
594 #PanelUI-footer-addons > toolbarbutton {
595 background-color: #A09090;
596 /* Force border to override `#PanelUI-footer-addons > toolbarbutton` selector below */
597 /*border-top: 1px solid hsl(45, 100%, 77%) !important;*/
600 width: calc(22.35em + 30px);
601 padding-inline-start: 15px;
602 border-inline-start-style: none;
605 #PanelUI-footer-addons > toolbarbutton:hover {
606 background-color: #FFCF00;
609 #PanelUI-footer-addons > toolbarbutton:active {
610 background-color: #FF9F00;
613 #PanelUI-footer-addons > toolbarbutton > .toolbarbutton-icon {
618 #PanelUI-footer-addons > toolbarbutton::after {
619 background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
622 #PanelUI-fxa-status {
628 #PanelUI-footer-inner,
629 #PanelUI-footer-fxa:not([hidden]) {
631 border-top: 1px solid var(--panel-separator-color);
634 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
635 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
639 #PanelUI-footer-inner > toolbarseparator,
640 #PanelUI-footer-fxa > toolbarseparator {
642 border-left: 1px solid var(--panel-separator-color);
646 #PanelUI-footer-inner:hover > toolbarseparator,
647 #PanelUI-footer-fxa:hover > toolbarseparator {
651 #PanelUI-update-status,
655 #PanelUI-footer-addons > toolbarbutton,
660 box-sizing: border-box;
665 transition: background-color;
666 -moz-box-orient: horizontal;
669 #PanelUI-update-status {
670 border-top: 1px solid var(--panel-separator-color);
673 #PanelUI-update-status {
674 border-bottom: 1px solid transparent;
678 #PanelUI-update-status > .toolbarbutton-text {
679 width: 0; /* Fancy cropping solution for flexbox. */
682 #PanelUI-help[panel-multiview-anchor="true"] {
683 -moz-image-region: rect(0, 32px, 16px, 16px);
691 #PanelUI-update-status > .toolbarbutton-text,
692 #PanelUI-fxa-label > .toolbarbutton-text,
693 #PanelUI-footer-addons > toolbarbutton > .toolbarbutton-text,
694 #PanelUI-customize > .toolbarbutton-text {
700 #PanelUI-help > .toolbarbutton-text,
701 #PanelUI-quit > .toolbarbutton-text,
702 #PanelUI-fxa-avatar > .toolbarbutton-text {
706 #PanelUI-update-status > .toolbarbutton-icon,
707 #PanelUI-fxa-label > .toolbarbutton-icon,
708 #PanelUI-fxa-icon > .toolbarbutton-icon,
709 #PanelUI-customize > .toolbarbutton-icon,
710 #PanelUI-help > .toolbarbutton-icon,
711 #PanelUI-quit > .toolbarbutton-icon {
712 margin-inline-end: 0;
716 padding-inline-start: 15px;
717 padding-inline-end: 15px;
721 #PanelUI-footer-addons > toolbarbutton,
724 padding-inline-start: 15px;
725 border-inline-start-style: none;
728 #PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
729 #PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
730 padding-inline-start: 0px;
733 #PanelUI-update-status {
734 width: calc(var(--panel-ui-menuPanelWidth) + 30px);
735 padding-inline-start: 15px;
736 border-inline-start-style: none;
739 #PanelUI-update-status {
740 list-style-image: url(chrome://branding/content/icon16.png);
745 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
748 #PanelUI-remotetabs {
749 --panel-ui-sync-illustration-height: 157.5px;
752 .PanelUI-remotetabs-instruction-title,
753 .PanelUI-remotetabs-instruction-label,
754 #PanelUI-remotetabs-mobile-promo {
755 /* If you change the margin here, the min-height of the synced tabs panel
756 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
757 need adjusting (see bug 1248506) */
765 .PanelUI-remotetabs-instruction-title {
769 /* The boxes with "instructions" get extra top and bottom padding for space
770 around the illustration and buttons */
771 .PanelUI-remotetabs-instruction-box {
772 /* If you change the padding here, the min-height of the synced tabs panel
773 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
774 need adjusting (see bug 1248506) */
775 padding-bottom: 30px;
779 .PanelUI-remotetabs-prefs-button {
781 -moz-appearance: none;
782 background-color: #0096dd;
783 / !important for the color as an OSX specific rule when a lightweight theme
784 is used for buttons in the toolbox overrides. See bug 1238531 for details /
785 color: white !important;
787 / If you change the margin or padding below, the min-height of the synced tabs
788 panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
789 etc) may need adjusting (see bug 1248506) /
798 .PanelUI-remotetabs-prefs-button:hover,
799 .PanelUI-remotetabs-prefs-button:hover:active {
800 /* background-color: #018acb; */
803 .remotetabs-promo-link {
807 .PanelUI-remotetabs-notabsforclient-label {
809 /* This margin is to line this label up with the labels in toolbarbuttons. */
813 .fxaSyncIllustration {
815 height: var(--panel-ui-sync-illustration-height);
818 .PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
819 /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */
820 text-align: center !important;
824 #PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
828 /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
829 the panel is anchored to a toolbar button.
831 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
832 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
833 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
834 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
835 min-height: calc(var(--panel-ui-sync-illustration-height) +
836 20px + /* margin of .PanelUI-remotetabs-prefs-button */
837 16px + /* padding of .PanelUI-remotetabs-prefs-button */
838 30px + /* margin of .PanelUI-remotetabs-instruction-label */
839 30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */
843 #PanelUI-remotetabs-tabslist > label[itemtype="client"] {
847 /* Collapse the non-active vboxes in the remotetabs deck to use only the
848 height the active box needs */
849 #PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
850 #PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
851 #PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
852 visibility: collapse;
855 #PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
859 #PanelUI-fxa-icon[syncstatus="active"]:not([disabled]) {
860 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
864 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
867 #customization-panelHolder #PanelUI-customize {
868 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
872 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
876 border-inline-end-style: none;
877 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
882 #PanelUI-footer-addons > toolbarbutton,
886 -moz-image-region: rect(0, 16px, 16px, 0);
889 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
890 #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
894 #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
898 #PanelUI-fxa-status[disabled],
899 #PanelUI-fxa-icon[disabled] {
900 pointer-events: none;
903 #PanelUI-fxa-avatar {
907 background-repeat: no-repeat;
908 background-position: 0 0;
909 background-size: contain;
914 margin-inline-end: 0;
917 #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
918 list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
921 #PanelUI-customize:hover,
922 #PanelUI-help:not([disabled]):hover,
923 #PanelUI-quit:not([disabled]):hover,
924 #PanelUI-customize:hover:active,
925 #PanelUI-help:not([disabled]):hover:active,
926 #PanelUI-quit:not([disabled]):hover:active,
927 #PanelUI-help[panel-multiview-anchor="true"] {
928 -moz-image-region: rect(0, 32px, 16px, 16px);
931 #PanelUI-help[disabled],
932 #PanelUI-quit[disabled],
933 #PanelUI-fxa-icon[disabled],
934 #PanelUI-fxa-avatar[disabled],
935 #PanelUI-fxa-label[disabled] > .toolbarbutton-icon,
936 #PanelUI-fxa-status::after {
937 -moz-image-region: rect(0, 48px, 16px, 32px);
940 #PanelUI-fxa-status:not([disabled]):hover,
941 #PanelUI-fxa-icon:not([disabled]):hover,
942 #PanelUI-help:not([disabled]):hover,
943 #PanelUI-customize:hover,
944 #PanelUI-quit:not([disabled]):hover {
947 #PanelUI-fxa-status:not([disabled]):hover:active,
948 #PanelUI-fxa-icon:not([disabled]):hover:active,
949 #PanelUI-help:not([disabled]):hover:active,
950 #PanelUI-customize:hover:active,
951 #PanelUI-quit:not([disabled]):hover:active {
954 #PanelUI-fxa-status:not([disabled]):hover,
955 #PanelUI-fxa-status:not([disabled]):hover:active,
956 #PanelUI-fxa-icon:not([disabled]):hover,
957 #PanelUI-fxa-icon:not([disabled]):hover:active {
960 #PanelUI-footer-fxa[fxastatus="error"] {
961 background-color: #FF0000;
965 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
966 background-color: #FFCF00;
969 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
970 background-color: #FF9F00;
973 #PanelUI-update-status {
977 #PanelUI-update-status[update-status="succeeded"] {
978 background-color: #008484;
982 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
983 background-color: #FFCF00;
986 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
987 background-color: #FF9F00;
990 #PanelUI-update-status[update-status="failed"] {
991 background-color: #FF0000;
995 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
996 background-color: #FFCF00;
999 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
1000 background-color: #FF9F00;
1003 #PanelUI-quit:not([disabled]):hover {
1004 background-color: #FF0000;
1007 #PanelUI-quit:not([disabled]):hover:active {
1008 background-color: #FF9F00;
1011 #customization-panelHolder #PanelUI-customize {
1013 background-color: #008484;
1018 #customization-panelHolder #PanelUI-customize + toolbarseparator {
1022 #customization-panelHolder #PanelUI-customize:hover,
1023 #customization-panelHolder #PanelUI-customize:hover:active {
1024 background-color: #FFCF00;
1028 #customization-palette .toolbarbutton-multiline-text,
1029 #customization-palette .toolbarbutton-text {
1033 panelview .toolbarbutton-1,
1035 .widget-overflow-list .toolbarbutton-1,
1036 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1037 .share-provider-button,
1038 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1040 background-color: transparent;
1042 border-style: solid;
1043 border-color: transparent;*/
1046 panelview .toolbarbutton-1,
1048 .widget-overflow-list .toolbarbutton-1,
1049 .share-provider-button,
1050 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1054 .subviewbutton.panel-subview-footer {
1055 /* border-radius: 0; */
1059 .subviewbutton.panel-subview-footer > .menu-text {
1060 margin-inline-start: 0px !important;
1061 padding-inline-start: 6px;
1062 padding-inline-end: 6px;
1067 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
1071 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
1076 .subviewbutton.panel-subview-footer > .menu-accel-container {
1077 padding-inline-start: 6px;
1080 .subviewbutton:not(.panel-subview-footer) {
1084 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
1085 /* Bookmark items need a more specific selector. */
1086 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
1087 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
1091 .PanelUI-subView .subviewbutton[shortcut]::after {
1092 content: attr(shortcut);
1097 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
1098 margin-inline-start: 10px;
1101 /* This is a <label> but it should fit in with the menu font- and colorwise. */
1102 #PanelUI-characterEncodingView-autodetect-label {
1107 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
1108 /* margin-left: 4px;
1109 margin-right: 4px;*/
1112 panelview .toolbarbutton-1,
1113 .widget-overflow-list > .toolbarbutton-1:not(:first-child),
1114 .widget-overflow-list > .toolbaritem-combined-buttons:not(:first-child) {
1119 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1120 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
1121 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1122 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1123 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
1124 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1125 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1126 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
1127 background-color: var(--arrowpanel-dimmed);
1128 border-color: var(--panel-separator-color);
1131 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
1132 border-color: var(--panel-separator-color);
1135 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
1136 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
1137 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
1138 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
1139 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
1140 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
1141 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1142 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
1143 background-color: var(--arrowpanel-dimmed-further);
1144 border-color: var(--panel-separator-color);
1145 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
1148 .subviewbutton.panel-subview-footer {
1149 margin: 4px -4px -4px;
1150 background-color: var(--arrowpanel-dimmed);
1151 border-top: 1px solid var(--panel-separator-color);
1155 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
1156 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
1157 background-color: var(--arrowpanel-dimmed-further);
1160 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
1161 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
1162 background-color: var(--arrowpanel-dimmed-even-further);
1163 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
1166 #BMB_bookmarksPopup .subviewbutton {
1168 font-weight: normal;
1171 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
1175 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
1176 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
1177 -moz-appearance: none;
1182 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
1183 #BMB_bookmarksPopup arrowscrollbox {
1184 padding-bottom: 0px;
1187 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
1188 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
1192 / Popups with only one item don't have a footer /
1193 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1194 / These popups never have a footer /
1195 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1196 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1197 #BMB_mobileBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1198 / And so they need some bottom padding: /
1199 padding-bottom: 4px;
1202 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
1203 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
1208 .PanelUI-subView menuseparator,
1209 .PanelUI-subView toolbarseparator,
1210 .cui-widget-panelview menuseparator {
1211 -moz-appearance: none;
1213 border-top: 1px solid var(--panel-separator-color);
1218 .PanelUI-subView menuseparator,
1219 .PanelUI-subView toolbarseparator {
1220 /* margin-inline-start: -5px;
1221 margin-inline-end: -4px;*/
1224 .PanelUI-subView menuseparator.small-separator,
1225 .PanelUI-subView toolbarseparator.small-separator {
1226 /* margin-left: 5px;
1227 margin-right: 5px;*/
1230 .cui-widget-panelview menuseparator.small-separator {
1231 /* margin-left: 10px;
1232 margin-right: 10px;*/
1235 .subviewbutton > .menu-accel-container {
1236 -moz-box-pack: start;
1237 margin-inline-start: 10px;
1238 margin-inline-end: auto;
1242 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"],
1243 #PanelUI-historyItems > toolbarbutton {
1244 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1247 @media (min-resolution: 1.1dppx) {
1248 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"],
1249 #PanelUI-historyItems > toolbarbutton {
1250 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
1254 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon,
1255 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1256 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1257 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1262 toolbarbutton[panel-multiview-anchor="true"],
1263 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1265 background-color: #008484;
1268 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1272 #PanelUI-help[panel-multiview-anchor="true"] {
1273 background-image: none;
1276 #PanelUI-help[panel-multiview-anchor="true"]::after {
1281 width: var(--panel-ui-exit-subview-gutter-width);
1282 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1283 background-repeat: no-repeat;
1284 background-color: #008484;
1285 background-position: left 10px center, 0;
1288 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1289 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1290 background-position: right 10px center, 0;
1293 toolbarbutton[panel-multiview-anchor="true"] {
1294 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1295 background-position: right var(--panel-ui-menuPanelMultiviewBgPos) center;
1296 background-repeat: no-repeat;
1299 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1300 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1301 background-position: left var(--panel-ui-menuPanelMultiviewBgPos) center;
1304 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1305 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1309 #search-container[cui-areatype="menu-panel"],
1310 #wrapper-search-container[place="panel"] {
1311 width: var(--panel-ui-menuPanelWidth);
1314 #search-container[cui-areatype="menu-panel"] {
1319 toolbarpaletteitem[place="palette"] > #search-container {
1324 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1325 background-color: transparent;
1327 transition-property: background-color, border-color;
1328 transition-duration: 150ms;
1331 /* Make direct siblings overlap borders: */
1332 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1333 /* border-top-color: transparent !important; */
1336 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1337 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1338 /* margin-top: -1px; */
1341 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1346 min-width: var(--panel-ui-menuPanelButtonWidth);
1347 max-width: var(--panel-ui-menuPanelButtonWidth);
1348 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1349 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1350 height: calc(2.2em + 4px);
1352 -moz-box-orient: horizontal;
1355 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1356 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1357 /* reduce the width with 2px for this button to compensate for two separators
1359 min-width: var(--panel-ui-menuPanelButtonWidth-min2);
1360 max-width: var(--panel-ui-menuPanelButtonWidth-min2);
1363 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1367 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1371 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1372 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1373 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1374 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1375 border-top-right-radius: 0;
1376 border-bottom-right-radius: 0;
1379 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1380 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1381 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1382 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1383 border-top-left-radius: 0;
1384 border-bottom-left-radius: 0;
1387 .toolbaritem-combined-buttons > separator {
1388 -moz-appearance: none;
1390 -moz-box-align: stretch;
1393 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1397 /* background: var(--panel-separator-color);*/
1398 transition-property: margin;
1399 transition-duration: 10ms;
1400 transition-timing-function: ease;
1403 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1407 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1411 .cui-widget-panelview,
1412 #widget-overflow-scroller {
1417 #widget-overflow-scroller {
1420 margin-bottom: 10px;
1423 #widget-overflow-list {
1424 width: var(--panel-ui-menuPanelWidth);
1426 padding-right: 10px;
1429 toolbaritem[overflowedItem=true],
1430 toolbarbutton[overflowedItem=true] {
1432 max-width: var(--panel-ui-menuPanelWidth);
1434 background-repeat: no-repeat;
1435 background-position: 0 center;
1438 .widget-overflow-list .toolbarbutton-1,
1439 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1440 -moz-box-align: center;
1441 -moz-box-orient: horizontal;
1444 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1445 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1447 padding-inline-start: .5em;
1450 #widget-overflow-list > .toolbaritem-combined-buttons {
1454 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1459 margin-inline-end: -1px;
1462 .subviewbutton[checked="true"] {
1463 background-image: url("chrome://global/skin/menu/menu-check.gif");
1464 background-position: top 5px left 4px;
1465 background-repeat: no-repeat;
1468 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1469 background-position: top 5px right 4px;
1472 .subviewbutton[checked="true"]:hover {
1473 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1476 .subviewbutton > .menu-iconic-left {
1477 margin-inline-end: 3px;
1480 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1484 #PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon {
1489 .panel-mainview[panelid=customizationui-widget-panel],
1490 #customizationui-widget-multiview > .panel-viewcontainer,
1491 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1492 #PanelUI-panicView > .panel-subview-body,
1493 #PanelUI-panicView {
1498 #PanelUI-panicView.cui-widget-panelview {
1502 #PanelUI-panic-timeframe {
1504 border-bottom: 1px solid var(--panel-separator-color);
1507 #panic-button-success-icon,
1508 #PanelUI-panic-timeframe-icon,
1509 #PanelUI-panic-timeframe-icon-small {
1510 background-color: transparent;
1511 margin-inline-end: 10px;
1514 #panic-button-success-icon,
1515 #PanelUI-panic-timeframe-icon {
1516 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1521 #PanelUI-panic-timeframe-icon-small {
1522 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1527 /* current attribute is only set when in use as a subview instead of a main view */
1528 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1532 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1536 #panic-button-success-header,
1537 #PanelUI-panic-header {
1538 -moz-box-align: center;
1542 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1546 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1547 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1548 transform: scaleX(-1);
1555 .subviewradio@buttonStateHover@ {
1558 .subviewradio[selected],
1559 .subviewradio[selected]:hover,
1560 .subviewradio@buttonStateActive@ {
1563 .subviewradio > .radio-check {
1566 .subviewradio > .radio-check[selected] {
1570 #PanelUI-panic-explanations {
1571 padding: 10px 10px 0;
1574 #PanelUI-panic-actionlist-main-label {
1579 .PanelUI-panic-actionlist {
1580 padding-inline-start: 20px;
1582 padding-bottom: 2px;
1583 background-size: 16px 16px;
1584 background-repeat: no-repeat;
1585 background-color: transparent;
1586 background-position: center left;
1589 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1590 background-position: center right;
1593 #PanelUI-panic-actionlist-cookies {
1594 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1597 #PanelUI-panic-actionlist-history {
1598 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1601 #PanelUI-panic-actionlist-windows {
1602 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1605 #PanelUI-panic-actionlist-newwindow {
1606 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1609 #PanelUI-panic-warning {
1616 #PanelUI-panic-view-button {
1617 background-color: #FF0000;
1621 #PanelUI-panic-view-button:hover {
1622 background-color: #FFCF00;
1625 #PanelUI-panic-view-button:hover:active {
1626 background-color: #FF9F00;
1629 #PanelUI-panic-view-button > .toolbarbutton-text {
1634 #panic-button-success-closebutton {
1637 #panic-button-success-closebutton:hover {
1640 #panic-button-success-closebutton:hover:active {
1643 /* === END panelUI.inc.css === */
1646 background-color: var(--arrowpanel-background);
1649 #PanelUI-contents #zoom-out-btn {
1651 padding-right: 12px;
1654 #PanelUI-contents #zoom-in-btn {
1656 padding-right: 12px;
1659 /* bookmark panel submenus */
1661 #BMB_bookmarksPopup menupopup[placespopup=true] {
1662 /* background: transparent;
1667 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1668 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1669 /* box-shadow: 0 0 4px rgba(0,0,0,0.2);
1670 background: var(--arrowpanel-background);
1671 color: var(--arrowpanel-color);
1672 border: 1px solid var(--arrowpanel-border-color);
1673 border-radius: 3.5px;
1677 #BMB_bookmarksPopup menupopup {
1678 /* padding-top: 2px;*/
1681 /* Add some space at the top because there are no headers: */
1682 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1683 /* padding-top: 4px;*/
1686 /* bookmark panel separator */
1687 #BMB_bookmarksPopup menuseparator {
1692 .subviewbutton > .menu-right,
1693 .subviewbutton > .menu-iconic-left {
1694 /* padding-top: 1px;
1696 margin-bottom: 2px;*/
1699 .subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon {
1700 /* This catches bookmarks, history items, and sync tabs items */
1705 /* Disabled empty item looks too small otherwise, because it has no icon. */
1706 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1707 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1708 menuitem[type="checkbox"].subviewbutton {
1709 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1710 * 2px for its border, see above */
1711 /* min-height: 22px;*/
1714 .subviewbutton > .toolbarbutton-text {
1715 /* padding-top: 3px;
1716 padding-bottom: 3px;*/
1719 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1720 -moz-appearance: none;
1722 margin-inline-start: 3px;
1725 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1727 padding-inline-start: 0;
1731 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1735 .subviewbutton > .toolbarbutton-text {
1736 padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */
1739 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1740 padding-inline-start: 2px;
1743 /* subviewbutton entries for social sidebars have images that come from external
1744 /* sources, and are not guaranteed to be the size we want, so force the size on
1746 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1751 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1755 menu.subviewbutton > .menu-right {
1756 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow");
1757 /* Reset the rect we inherit from the button: */
1758 -moz-image-region: auto;
1761 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1762 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1763 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1766 menu[disabled="true"].subviewbutton > .menu-right {
1767 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");
1770 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1771 transform: scaleX(-1);