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: transparent url(chrome://browser/skin/addons/addon-badge.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: #C7F5FF;
598 width: calc(22.35em + 30px);
599 padding-inline-start: 15px;
600 border-inline-start-style: none;
603 #PanelUI-footer-addons > toolbarbutton > .toolbarbutton-icon {
608 #PanelUI-footer-addons > toolbarbutton::after {
609 background-image: url(chrome://browser/skin/addons/addon-badge.svg);
612 #PanelUI-fxa-status {
618 #PanelUI-footer-inner,
619 #PanelUI-footer-fxa:not([hidden]) {
621 border-top: 1px solid var(--panel-separator-color);
624 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
625 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
629 #PanelUI-footer-inner > toolbarseparator,
630 #PanelUI-footer-fxa > toolbarseparator {
632 border-left: 1px solid var(--panel-separator-color);
636 #PanelUI-footer-inner:hover > toolbarseparator,
637 #PanelUI-footer-fxa:hover > toolbarseparator {
641 #PanelUI-update-status,
645 #PanelUI-footer-addons > toolbarbutton,
650 box-sizing: border-box;
655 transition: background-color;
656 -moz-box-orient: horizontal;
659 #PanelUI-update-status {
660 border-top: 1px solid var(--panel-separator-color);
663 #PanelUI-update-status {
664 border-bottom: 1px solid transparent;
668 #PanelUI-update-status > .toolbarbutton-text {
669 width: 0; /* Fancy cropping solution for flexbox. */
672 #PanelUI-help[panel-multiview-anchor="true"] {
673 -moz-image-region: rect(0, 32px, 16px, 16px);
681 #PanelUI-update-status > .toolbarbutton-text,
682 #PanelUI-fxa-label > .toolbarbutton-text,
683 #PanelUI-customize > .toolbarbutton-text {
689 #PanelUI-help > .toolbarbutton-text,
690 #PanelUI-quit > .toolbarbutton-text,
691 #PanelUI-fxa-avatar > .toolbarbutton-text {
695 #PanelUI-update-status > .toolbarbutton-icon,
696 #PanelUI-fxa-label > .toolbarbutton-icon,
697 #PanelUI-fxa-icon > .toolbarbutton-icon,
698 #PanelUI-customize > .toolbarbutton-icon,
699 #PanelUI-help > .toolbarbutton-icon,
700 #PanelUI-quit > .toolbarbutton-icon {
701 margin-inline-end: 0;
705 padding-inline-start: 15px;
706 padding-inline-end: 15px;
710 #PanelUI-footer-addons > toolbarbutton,
713 padding-inline-start: 15px;
714 border-inline-start-style: none;
717 #PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
718 #PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
719 padding-inline-start: 0px;
722 #PanelUI-update-status {
723 width: calc(var(--panel-ui-menuPanelWidth) + 30px);
724 padding-inline-start: 15px;
725 border-inline-start-style: none;
728 #PanelUI-update-status {
729 list-style-image: url(chrome://branding/content/icon16.png);
734 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
737 #PanelUI-remotetabs {
738 --panel-ui-sync-illustration-height: 157.5px;
741 .PanelUI-remotetabs-instruction-title,
742 .PanelUI-remotetabs-instruction-label,
743 #PanelUI-remotetabs-mobile-promo {
744 /* If you change the margin here, the min-height of the synced tabs panel
745 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
746 need adjusting (see bug 1248506) */
754 .PanelUI-remotetabs-instruction-title {
758 /* The boxes with "instructions" get extra top and bottom padding for space
759 around the illustration and buttons */
760 .PanelUI-remotetabs-instruction-box {
761 /* If you change the padding here, the min-height of the synced tabs panel
762 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
763 need adjusting (see bug 1248506) */
764 padding-bottom: 30px;
768 .PanelUI-remotetabs-prefs-button {
770 -moz-appearance: none;
771 background-color: #0096dd;
772 / !important for the color as an OSX specific rule when a lightweight theme
773 is used for buttons in the toolbox overrides. See bug 1238531 for details /
774 color: white !important;
776 / If you change the margin or padding below, the min-height of the synced tabs
777 panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
778 etc) may need adjusting (see bug 1248506) /
787 .PanelUI-remotetabs-prefs-button:hover,
788 .PanelUI-remotetabs-prefs-button:hover:active {
789 /* background-color: #018acb; */
792 .remotetabs-promo-link {
796 .PanelUI-remotetabs-notabsforclient-label {
798 /* This margin is to line this label up with the labels in toolbarbuttons. */
802 .fxaSyncIllustration {
803 height: var(--panel-ui-sync-illustration-height);
804 list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg);
807 .PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
808 /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */
809 text-align: center !important;
813 #PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
817 /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
818 the panel is anchored to a toolbar button.
820 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
821 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
822 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
823 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
824 min-height: calc(var(--panel-ui-sync-illustration-height) +
825 20px + /* margin of .PanelUI-remotetabs-prefs-button */
826 16px + /* padding of .PanelUI-remotetabs-prefs-button */
827 30px + /* margin of .PanelUI-remotetabs-instruction-label */
828 30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */
832 #PanelUI-remotetabs-tabslist > label[itemtype="client"] {
836 /* Collapse the non-active vboxes in the remotetabs deck to use only the
837 height the active box needs */
838 #PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
839 #PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
840 #PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
841 visibility: collapse;
844 #PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
848 #PanelUI-fxa-icon[syncstatus="active"]:not([disabled]) {
849 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
852 #PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
853 #PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label {
854 list-style-image: url(chrome://browser/skin/warning.svg);
855 -moz-image-region: auto;
859 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
862 #customization-panelHolder #PanelUI-customize {
863 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
867 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
871 border-inline-end-style: none;
872 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
877 #PanelUI-footer-addons > toolbarbutton,
881 -moz-image-region: rect(0, 16px, 16px, 0);
884 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
885 #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
889 #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
893 #PanelUI-fxa-status[disabled],
894 #PanelUI-fxa-icon[disabled] {
895 pointer-events: none;
898 #PanelUI-fxa-avatar {
902 background-repeat: no-repeat;
903 background-position: 0 0;
904 background-size: contain;
909 margin-inline-end: 0;
912 #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
913 list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
916 #PanelUI-customize:hover,
917 #PanelUI-help:not([disabled]):hover,
918 #PanelUI-quit:not([disabled]):hover,
919 #PanelUI-customize:hover:active,
920 #PanelUI-help:not([disabled]):hover:active,
921 #PanelUI-quit:not([disabled]):hover:active,
922 #PanelUI-help[panel-multiview-anchor="true"] {
923 -moz-image-region: rect(0, 32px, 16px, 16px);
926 #PanelUI-help[disabled],
927 #PanelUI-quit[disabled],
928 #PanelUI-fxa-icon[disabled],
929 #PanelUI-fxa-avatar[disabled],
930 #PanelUI-fxa-label[disabled] > .toolbarbutton-icon,
931 #PanelUI-fxa-status::after {
932 -moz-image-region: rect(0, 48px, 16px, 32px);
935 #PanelUI-fxa-status:not([disabled]):hover,
936 #PanelUI-fxa-icon:not([disabled]):hover,
937 #PanelUI-help:not([disabled]):hover,
938 #PanelUI-customize:hover,
939 #PanelUI-quit:not([disabled]):hover {
942 #PanelUI-fxa-status:not([disabled]):hover:active,
943 #PanelUI-fxa-icon:not([disabled]):hover:active,
944 #PanelUI-help:not([disabled]):hover:active,
945 #PanelUI-customize:hover:active,
946 #PanelUI-quit:not([disabled]):hover:active {
949 #PanelUI-fxa-status:not([disabled]):hover,
950 #PanelUI-fxa-status:not([disabled]):hover:active,
951 #PanelUI-fxa-icon:not([disabled]):hover,
952 #PanelUI-fxa-icon:not([disabled]):hover:active {
955 #PanelUI-footer-fxa[fxastatus="error"] {
956 background-color: #FF0000;
960 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
961 background-color: #FFCF00;
964 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
965 background-color: #FF9F00;
968 #PanelUI-update-status {
972 #PanelUI-update-status[update-status="succeeded"] {
973 background-color: #008484;
977 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
978 background-color: #FFCF00;
981 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
982 background-color: #FF9F00;
985 #PanelUI-update-status[update-status="failed"] {
986 background-color: #FF0000;
990 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
991 background-color: #FFCF00;
994 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
995 background-color: #FF9F00;
998 #PanelUI-quit:not([disabled]):hover {
999 background-color: #FF0000;
1002 #PanelUI-quit:not([disabled]):hover:active {
1003 background-color: #FF9F00;
1006 #customization-panelHolder #PanelUI-customize {
1008 background-color: #008484;
1013 #customization-panelHolder #PanelUI-customize + toolbarseparator {
1017 #customization-panelHolder #PanelUI-customize:hover,
1018 #customization-panelHolder #PanelUI-customize:hover:active {
1019 background-color: #FFCF00;
1023 #customization-palette .toolbarbutton-multiline-text,
1024 #customization-palette .toolbarbutton-text {
1028 panelview .toolbarbutton-1,
1030 .widget-overflow-list .toolbarbutton-1,
1031 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1032 .share-provider-button,
1033 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1035 background-color: transparent;
1037 border-style: solid;
1038 border-color: transparent;*/
1041 panelview .toolbarbutton-1,
1043 .widget-overflow-list .toolbarbutton-1,
1044 .share-provider-button,
1045 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1049 .subviewbutton.panel-subview-footer {
1050 /* border-radius: 0; */
1054 .subviewbutton.panel-subview-footer > .menu-text {
1055 margin-inline-start: 0px !important;
1056 padding-inline-start: 6px;
1057 padding-inline-end: 6px;
1062 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
1066 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
1071 .subviewbutton.panel-subview-footer > .menu-accel-container {
1072 padding-inline-start: 6px;
1075 .subviewbutton:not(.panel-subview-footer) {
1079 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
1080 /* Bookmark items need a more specific selector. */
1081 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
1082 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
1086 .PanelUI-subView .subviewbutton[shortcut]::after {
1087 content: attr(shortcut);
1092 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
1093 margin-inline-start: 10px;
1096 /* This is a <label> but it should fit in with the menu font- and colorwise. */
1097 #PanelUI-characterEncodingView-autodetect-label {
1102 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
1103 /* margin-left: 4px;
1104 margin-right: 4px;*/
1107 panelview .toolbarbutton-1,
1108 .widget-overflow-list > .toolbarbutton-1:not(:first-child),
1109 .widget-overflow-list > .toolbaritem-combined-buttons:not(:first-child) {
1114 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1115 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
1116 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1117 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1118 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
1119 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1120 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1121 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
1122 background-color: var(--arrowpanel-dimmed);
1123 border-color: var(--panel-separator-color);
1126 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
1127 border-color: var(--panel-separator-color);
1130 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
1131 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
1132 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
1133 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
1134 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
1135 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
1136 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1137 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
1138 background-color: var(--arrowpanel-dimmed-further);
1139 border-color: var(--panel-separator-color);
1140 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
1143 .subviewbutton.panel-subview-footer {
1144 margin: 4px -4px -4px;
1145 background-color: var(--arrowpanel-dimmed);
1146 border-top: 1px solid var(--panel-separator-color);
1150 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
1151 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
1152 background-color: var(--arrowpanel-dimmed-further);
1155 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
1156 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
1157 background-color: var(--arrowpanel-dimmed-even-further);
1158 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
1161 #BMB_bookmarksPopup .subviewbutton {
1163 font-weight: normal;
1166 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
1170 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
1171 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
1172 -moz-appearance: none;
1177 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
1178 #BMB_bookmarksPopup arrowscrollbox {
1179 padding-bottom: 0px;
1182 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
1183 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
1187 / Popups with only one item don't have a footer /
1188 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1189 / These popups never have a footer /
1190 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1191 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1192 / And so they need some bottom padding: /
1193 padding-bottom: 4px;
1196 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
1197 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
1202 .PanelUI-subView menuseparator,
1203 .PanelUI-subView toolbarseparator,
1204 .cui-widget-panelview menuseparator {
1205 -moz-appearance: none;
1207 border-top: 1px solid var(--panel-separator-color);
1212 .PanelUI-subView menuseparator,
1213 .PanelUI-subView toolbarseparator {
1214 /* margin-inline-start: -5px;
1215 margin-inline-end: -4px;*/
1218 .PanelUI-subView menuseparator.small-separator,
1219 .PanelUI-subView toolbarseparator.small-separator {
1220 /* margin-left: 5px;
1221 margin-right: 5px;*/
1224 .cui-widget-panelview menuseparator.small-separator {
1225 /* margin-left: 10px;
1226 margin-right: 10px;*/
1229 .subviewbutton > .menu-accel-container {
1230 -moz-box-pack: start;
1231 margin-inline-start: 10px;
1232 margin-inline-end: auto;
1236 #PanelUI-remotetabs-tabslist > toolbarbutton,
1237 #PanelUI-historyItems > toolbarbutton {
1238 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1241 @media (min-resolution: 1.1dppx) {
1242 #PanelUI-remotetabs-tabslist > toolbarbutton,
1243 #PanelUI-historyItems > toolbarbutton {
1244 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
1248 #PanelUI-remotetabs-tabslist > toolbarbutton > .toolbarbutton-icon,
1249 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1250 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1251 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1256 toolbarbutton[panel-multiview-anchor="true"],
1257 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1259 background-color: #008484;
1262 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1266 #PanelUI-help[panel-multiview-anchor="true"] {
1267 background-image: none;
1270 #PanelUI-help[panel-multiview-anchor="true"]::after {
1275 width: var(--panel-ui-exit-subview-gutter-width);
1276 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1277 background-repeat: no-repeat;
1278 background-color: #008484;
1279 background-position: left 10px center, 0;
1282 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1283 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1284 background-position: right 10px center, 0;
1287 toolbarbutton[panel-multiview-anchor="true"] {
1288 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1289 background-position: right var(--panel-ui-menuPanelMultiviewBgPos) center;
1290 background-repeat: no-repeat;
1293 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1294 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1295 background-position: left var(--panel-ui-menuPanelMultiviewBgPos) center;
1298 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1299 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1303 #search-container[cui-areatype="menu-panel"],
1304 #wrapper-search-container[place="panel"] {
1305 width: var(--panel-ui-menuPanelWidth);
1308 #search-container[cui-areatype="menu-panel"] {
1313 toolbarpaletteitem[place="palette"] > #search-container {
1318 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1319 background-color: transparent;
1321 transition-property: background-color, border-color;
1322 transition-duration: 150ms;
1325 /* Make direct siblings overlap borders: */
1326 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1327 /* border-top-color: transparent !important; */
1330 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1331 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1332 /* margin-top: -1px; */
1335 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1340 min-width: var(--panel-ui-menuPanelButtonWidth);
1341 max-width: var(--panel-ui-menuPanelButtonWidth);
1342 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1343 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1344 height: calc(2.2em + 4px);
1346 -moz-box-orient: horizontal;
1349 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1350 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1351 /* reduce the width with 2px for this button to compensate for two separators
1353 min-width: var(--panel-ui-menuPanelButtonWidth-min2);
1354 max-width: var(--panel-ui-menuPanelButtonWidth-min2);
1357 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1361 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1365 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1366 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1367 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1368 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1369 border-top-right-radius: 0;
1370 border-bottom-right-radius: 0;
1373 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1374 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1375 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1376 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1377 border-top-left-radius: 0;
1378 border-bottom-left-radius: 0;
1381 .toolbaritem-combined-buttons > separator {
1382 -moz-appearance: none;
1384 -moz-box-align: stretch;
1387 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1391 /* background: var(--panel-separator-color);*/
1392 transition-property: margin;
1393 transition-duration: 10ms;
1394 transition-timing-function: ease;
1397 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1401 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1405 .cui-widget-panelview,
1406 #widget-overflow-scroller {
1411 #widget-overflow-scroller {
1414 margin-bottom: 10px;
1417 #widget-overflow-list {
1418 width: var(--panel-ui-menuPanelWidth);
1420 padding-right: 10px;
1423 toolbaritem[overflowedItem=true],
1424 toolbarbutton[overflowedItem=true] {
1426 max-width: var(--panel-ui-menuPanelWidth);
1428 background-repeat: no-repeat;
1429 background-position: 0 center;
1432 .widget-overflow-list .toolbarbutton-1,
1433 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1434 -moz-box-align: center;
1435 -moz-box-orient: horizontal;
1438 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1439 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1441 padding-inline-start: .5em;
1444 #widget-overflow-list > .toolbaritem-combined-buttons {
1448 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1453 margin-inline-end: -1px;
1456 .subviewbutton[checked="true"] {
1457 background-image: url("chrome://global/skin/menu/menu-check.gif");
1458 background-position: top 5px left 4px;
1459 background-repeat: no-repeat;
1462 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1463 background-position: top 5px right 4px;
1466 .subviewbutton[checked="true"]:hover {
1467 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1470 .subviewbutton > .menu-iconic-left {
1471 margin-inline-end: 3px;
1474 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1478 #PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon {
1483 .panel-mainview[panelid=customizationui-widget-panel],
1484 #customizationui-widget-multiview > .panel-viewcontainer,
1485 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1486 #PanelUI-panicView > .panel-subview-body,
1487 #PanelUI-panicView {
1492 #PanelUI-panicView.cui-widget-panelview {
1496 #PanelUI-panic-timeframe {
1498 border-bottom: 1px solid var(--panel-separator-color);
1501 #panic-button-success-icon,
1502 #PanelUI-panic-timeframe-icon,
1503 #PanelUI-panic-timeframe-icon-small {
1504 background-color: transparent;
1505 margin-inline-end: 10px;
1508 #panic-button-success-icon,
1509 #PanelUI-panic-timeframe-icon {
1510 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1515 #PanelUI-panic-timeframe-icon-small {
1516 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1521 /* current attribute is only set when in use as a subview instead of a main view */
1522 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1526 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1530 #panic-button-success-header,
1531 #PanelUI-panic-header {
1532 -moz-box-align: center;
1536 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1540 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1541 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1542 transform: scaleX(-1);
1549 .subviewradio@buttonStateHover@ {
1552 .subviewradio[selected],
1553 .subviewradio[selected]:hover,
1554 .subviewradio@buttonStateActive@ {
1557 .subviewradio > .radio-check {
1560 .subviewradio > .radio-check[selected] {
1564 #PanelUI-panic-explanations {
1565 padding: 10px 10px 0;
1568 #PanelUI-panic-actionlist-main-label {
1573 .PanelUI-panic-actionlist {
1574 padding-inline-start: 20px;
1576 padding-bottom: 2px;
1577 background-size: 16px 16px;
1578 background-repeat: no-repeat;
1579 background-color: transparent;
1580 background-position: center left;
1583 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1584 background-position: center right;
1587 #PanelUI-panic-actionlist-cookies {
1588 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1591 #PanelUI-panic-actionlist-history {
1592 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1595 #PanelUI-panic-actionlist-windows {
1596 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1599 #PanelUI-panic-actionlist-newwindow {
1600 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1603 #PanelUI-panic-warning {
1610 #PanelUI-panic-view-button {
1611 background-color: #FF0000;
1615 #PanelUI-panic-view-button:hover {
1616 background-color: #FFCF00;
1619 #PanelUI-panic-view-button:hover:active {
1620 background-color: #FF9F00;
1623 #PanelUI-panic-view-button > .toolbarbutton-text {
1628 #panic-button-success-closebutton {
1631 #panic-button-success-closebutton:hover {
1634 #panic-button-success-closebutton:hover:active {
1637 /* === END panelUI.inc.css === */
1640 background-color: var(--arrowpanel-background);
1643 #PanelUI-contents #zoom-out-btn {
1645 padding-right: 12px;
1648 #PanelUI-contents #zoom-in-btn {
1650 padding-right: 12px;
1653 /* bookmark panel submenus */
1655 #BMB_bookmarksPopup menupopup[placespopup=true] {
1656 /* background: transparent;
1661 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1662 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1663 /* box-shadow: 0 0 4px rgba(0,0,0,0.2);
1664 background: var(--arrowpanel-background);
1665 color: var(--arrowpanel-color);
1666 border: 1px solid var(--arrowpanel-border-color);
1667 border-radius: 3.5px;
1671 #BMB_bookmarksPopup menupopup {
1672 /* padding-top: 2px;*/
1675 /* Add some space at the top because there are no headers: */
1676 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1677 /* padding-top: 4px;*/
1680 /* bookmark panel separator */
1681 #BMB_bookmarksPopup menuseparator {
1686 .subviewbutton > .menu-right,
1687 .subviewbutton > .menu-iconic-left {
1688 /* padding-top: 1px;
1690 margin-bottom: 2px;*/
1693 .subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon {
1694 /* This catches bookmarks, history items, and sync tabs items */
1699 /* Disabled empty item looks too small otherwise, because it has no icon. */
1700 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1701 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1702 menuitem[type="checkbox"].subviewbutton {
1703 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1704 * 2px for its border, see above */
1705 /* min-height: 22px;*/
1708 .subviewbutton > .toolbarbutton-text {
1709 /* padding-top: 3px;
1710 padding-bottom: 3px;*/
1713 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1714 -moz-appearance: none;
1716 margin-inline-start: 3px;
1719 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1721 padding-inline-start: 0;
1725 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1729 .subviewbutton > .toolbarbutton-text {
1730 padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */
1733 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1734 padding-inline-start: 2px;
1737 /* subviewbutton entries for social sidebars have images that come from external
1738 /* sources, and are not guaranteed to be the size we want, so force the size on
1740 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1745 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1749 menu.subviewbutton > .menu-right {
1750 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow");
1751 /* Reset the rect we inherit from the button: */
1752 -moz-image-region: auto;
1755 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1756 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1757 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1760 menu[disabled="true"].subviewbutton > .menu-right {
1761 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");
1764 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1765 transform: scaleX(-1);