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-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
455 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-status > #PanelUI-fxa-label,
456 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-container > #PanelUI-fxa-icon,
457 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
458 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
459 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
464 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
465 * which was affecting subview display. Because of this, we're hiding the iframe *only*
466 * when displaying a subview. The discerning user might notice this, but it's not nearly
467 * as bad as the brokenness.
468 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
471 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
475 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
479 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
480 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
481 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
482 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
483 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
484 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
485 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
486 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
487 .panel-customization-placeholder-child > .toolbarbutton-icon {
492 /* Explanation for the below formula (A / B - C)
494 Each button is @menuPanelButtonWidth@ wide
496 Each button has two margins.
498 The button icon is 32 pixels wide.
499 The button has 12px of horizontal padding (6 on each side).
500 The button has 0px of horizontal border (0 on each side).
501 Total width of button's icon + button padding should therefore be 44px,
502 which means each horizontal margin should be the half the button's width - (44/2) px.
504 margin: 4px var(--panel-ui-menuPanelButtonIconMargin);
507 /* above we treat the container as the icon for the margins, that is so the
508 /* badge itself is positioned correctly. Here we make sure that the icon itself
509 /* has the minimum size we want, but no padding/margin. */
510 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon,
511 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
520 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
524 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
528 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
529 margin-inline-end: 2px;
532 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
533 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
539 #zoom-in-button > .toolbarbutton-text,
540 #zoom-out-button > .toolbarbutton-text,
541 #zoom-reset-button > .toolbarbutton-icon {
548 flex-direction: column;
549 /* background-color: var(--arrowpanel-dimmed);*/
552 border-bottom-right-radius: 4px;
553 border-bottom-left-radius: 4px;
556 #main-window[customizing] #PanelUI-fxa-container,
557 #main-window[customizing] #PanelUI-footer-fxa {
561 #PanelUI-fxa-container:not([fxastatus="signedin"]) > toolbarseparator,
562 #PanelUI-fxa-container:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
563 #PanelUI-fxa-container:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
564 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
565 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
566 #PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
570 #PanelUI-fxa-container[fxastatus="login-failed"] > #PanelUI-fxa-status::after,
571 #PanelUI-fxa-container[fxastatus="unverified"] > #PanelUI-fxa-status::after,
572 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after {
573 content: url("chrome://browser/skin/warning.svg");
582 #PanelUI-update-status[update-status]::after,
583 #PanelUI-footer-addons > toolbarbutton::after {
587 margin-inline-end: 16.5px;
589 background-size: contain;
593 #PanelUI-update-status[update-status="succeeded"]::after {
594 background-image: url(chrome://browser/skin/update-badge.svg);
595 background-color: #008484;
598 #PanelUI-update-status[update-status="failed"]::after {
599 background-image: url(chrome://browser/skin/update-badge-failed.svg);
600 background-color: #FF0000;
603 #PanelUI-footer-addons > toolbarbutton {
604 background-color: #A09090;
605 /* Force border to override `#PanelUI-footer-addons > toolbarbutton` selector below */
606 /*border-top: 1px solid hsl(45, 100%, 77%) !important;*/
609 width: calc(22.35em + 30px);
610 padding-inline-start: 15px;
611 border-inline-start-style: none;
614 #PanelUI-footer-addons > toolbarbutton:hover {
615 background-color: #FFCF00;
618 #PanelUI-footer-addons > toolbarbutton:active {
619 background-color: #FF9F00;
622 #PanelUI-footer-addons > toolbarbutton > .toolbarbutton-icon {
627 #PanelUI-footer-addons > toolbarbutton::after {
628 background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
631 #PanelUI-fxa-status {
637 #PanelUI-footer-inner,
638 #PanelUI-fxa-container:not([hidden]),
639 #PanelUI-footer-fxa:not([hidden]) {
641 border-top: 1px solid var(--panel-separator-color);
644 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
645 #PanelUI-multiView[viewtype="subview"] #PanelUI-fxa-container,
646 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
650 #PanelUI-footer-inner > toolbarseparator,
651 #PanelUI-fxa-container > toolbarseparator,
652 #PanelUI-footer-fxa > toolbarseparator {
654 border-left: 1px solid var(--panel-separator-color);
658 #PanelUI-footer-inner:hover > toolbarseparator,
659 #PanelUI-fxa-container:hover > toolbarseparator,
660 #PanelUI-footer-fxa:hover > toolbarseparator {
664 #PanelUI-update-status,
668 #PanelUI-footer-addons > toolbarbutton,
673 box-sizing: border-box;
678 transition: background-color;
679 -moz-box-orient: horizontal;
682 #PanelUI-update-status {
683 border-top: 1px solid var(--panel-separator-color);
686 #PanelUI-update-status {
687 border-bottom: 1px solid transparent;
691 #PanelUI-update-status > .toolbarbutton-text {
692 width: 0; /* Fancy cropping solution for flexbox. */
695 #PanelUI-help[panel-multiview-anchor="true"] {
696 -moz-image-region: rect(0, 32px, 16px, 16px);
699 /* FxAccount indicator bits. */
703 -moz-appearance: none;
707 -moz-box-orient: horizontal;
708 -moz-image-region: rect(0, 16px, 16px, 0);
709 list-style-image: url(chrome://browser/skin/syncFx-horizontalbar.png);
714 padding-inline-start: 12px;
722 #appMenu-fxa-icon > .toolbarbutton-text {
726 #appMenu-fxa-icon[syncstatus="active"] {
727 list-style-image: url(chrome://browser/skin/syncFxProgress-horizontalbar.png);
730 #appMenu-fxa-avatar {
731 pointer-events: none;
732 list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
735 #appMenu-fxa-container {
736 -moz-box-orient: horizontal;
739 /* Handle different UI states. */
740 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label > .toolbarbutton-icon,
741 #appMenu-fxa-container:not([fxastatus="signedin"]) > toolbarseparator,
742 #appMenu-fxa-container:not([fxastatus="signedin"]) > #appMenu-fxa-icon,
743 #appMenu-fxa-container:not([fxastatus="signedin"]) > #appMenu-fxa-status > #appMenu-fxa-avatar {
747 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-label {
748 /* 12px space before the avatar, then 16px for the avatar */
749 padding-inline-start: 28px;
750 margin-inline-start: -28px;
752 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status {
753 margin-inline-end: 10px;
756 #appMenu-fxa-container[fxastatus="signedin"] > #appMenu-fxa-status > #appMenu-fxa-avatar {
757 margin-inline-start: 12px;
760 #appMenu-fxa-container[fxastatus="signedin"] > toolbarseparator {
761 -moz-appearance: none;
766 /* Use background: rather than background-color: to override background-image
768 background: var(--arrowpanel-dimmed);
772 #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status > #appMenu-fxa-label,
773 #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status > #appMenu-fxa-label {
774 list-style-image: url(chrome://browser/skin/warning.svg);
775 -moz-image-region: rect(0, 16px, 16px, 0);
778 #appMenu-fxa-container[fxastatus="login-failed"],
779 #appMenu-fxa-container[fxastatus="unverified"] {
780 background-color: var(--appmenu-yellow-warning-color);
781 border-top: 1px solid var(--appmenu-yellow-warning-border-color);
782 border-bottom: 1px solid var(--appmenu-yellow-warning-border-color);
785 #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover,
786 #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover {
787 background-color: var(--appmenu-yellow-warning-hover-color);
790 #appMenu-fxa-container[fxastatus="login-failed"] > #appMenu-fxa-status:hover:active,
791 #appMenu-fxa-container[fxastatus="unverified"] > #appMenu-fxa-status:hover:active {
792 background-color: var(--appmenu-yellow-warning-active-color);
800 #PanelUI-update-status > .toolbarbutton-text,
801 #PanelUI-fxa-label > .toolbarbutton-text,
802 #PanelUI-footer-addons > toolbarbutton > .toolbarbutton-text,
803 #PanelUI-customize > .toolbarbutton-text {
809 #PanelUI-help > .toolbarbutton-text,
810 #PanelUI-quit > .toolbarbutton-text,
811 #PanelUI-fxa-avatar > .toolbarbutton-text {
815 #PanelUI-update-status > .toolbarbutton-icon,
816 #PanelUI-fxa-label > .toolbarbutton-icon,
817 #PanelUI-fxa-icon > .toolbarbutton-icon,
818 #PanelUI-customize > .toolbarbutton-icon,
819 #PanelUI-help > .toolbarbutton-icon,
820 #PanelUI-quit > .toolbarbutton-icon {
821 margin-inline-end: 0;
825 padding-inline-start: 15px;
826 padding-inline-end: 15px;
830 #PanelUI-footer-addons > toolbarbutton,
833 padding-inline-start: 15px;
834 border-inline-start-style: none;
837 #PanelUI-fxa-container[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
838 #PanelUI-fxa-container[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label,
839 #PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
840 #PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
841 padding-inline-start: 0px;
844 #PanelUI-update-status {
845 width: calc(var(--panel-ui-menuPanelWidth) + 30px);
846 padding-inline-start: 15px;
847 border-inline-start-style: none;
850 #PanelUI-update-status {
851 list-style-image: url(chrome://branding/content/icon16.png);
856 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
859 #PanelUI-fxa-label:hover,
860 #PanelUI-fxa-icon:hover {
861 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar-hover.png");
864 #PanelUI-remotetabs {
865 --panel-ui-sync-illustration-height: 157.5px;
868 .PanelUI-remotetabs-instruction-title,
869 .PanelUI-remotetabs-instruction-label,
870 #PanelUI-remotetabs-mobile-promo {
871 /* If you change the margin here, the min-height of the synced tabs panel
872 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
873 need adjusting (see bug 1248506) */
881 .PanelUI-remotetabs-instruction-title {
885 /* The boxes with "instructions" get extra top and bottom padding for space
886 around the illustration and buttons */
887 .PanelUI-remotetabs-instruction-box {
888 /* If you change the padding here, the min-height of the synced tabs panel
889 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
890 need adjusting (see bug 1248506) */
891 padding-bottom: 30px;
895 .PanelUI-remotetabs-prefs-button {
897 -moz-appearance: none;
898 background-color: #0096dd;
899 / !important for the color as an OSX specific rule when a lightweight theme
900 is used for buttons in the toolbox overrides. See bug 1238531 for details /
901 color: white !important;
903 / If you change the margin or padding below, the min-height of the synced tabs
904 panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
905 etc) may need adjusting (see bug 1248506) /
914 .PanelUI-remotetabs-prefs-button:hover,
915 .PanelUI-remotetabs-prefs-button:hover:active {
916 /* background-color: #018acb; */
919 .remotetabs-promo-link {
923 .PanelUI-remotetabs-notabsforclient-label {
925 /* This margin is to line this label up with the labels in toolbarbuttons. */
929 .fxaSyncIllustration {
931 height: var(--panel-ui-sync-illustration-height);
934 .PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
935 /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */
936 text-align: center !important;
940 #PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
944 /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
945 the panel is anchored to a toolbar button.
947 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
948 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
949 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
950 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
951 min-height: calc(var(--panel-ui-sync-illustration-height) +
952 20px + /* margin of .PanelUI-remotetabs-prefs-button */
953 16px + /* padding of .PanelUI-remotetabs-prefs-button */
954 30px + /* margin of .PanelUI-remotetabs-instruction-label */
955 30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */
959 #PanelUI-remotetabs-tabslist > label[itemtype="client"] {
963 /* Collapse the non-active vboxes in the remotetabs deck to use only the
964 height the active box needs */
965 #PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
966 #PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
967 #PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
968 visibility: collapse;
971 #PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
975 #PanelUI-fxa-icon[syncstatus="active"]:not([disabled]) {
976 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
980 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
983 #customization-panelHolder #PanelUI-customize {
984 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
988 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
992 border-inline-end-style: none;
993 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
998 #PanelUI-footer-addons > toolbarbutton,
1002 -moz-image-region: rect(0, 16px, 16px, 0);
1005 #PanelUI-fxa-container[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
1006 #PanelUI-fxa-container[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
1007 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
1008 #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
1012 #PanelUI-fxa-container[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
1013 #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
1017 #PanelUI-fxa-status[disabled],
1018 #PanelUI-fxa-icon[disabled] {
1019 pointer-events: none;
1022 #PanelUI-fxa-avatar {
1026 background-repeat: no-repeat;
1027 background-position: 0 0;
1028 background-size: contain;
1033 margin-inline-end: 0;
1036 #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
1037 #PanelUI-fxa-container[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
1038 list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
1041 #PanelUI-customize:hover,
1042 #PanelUI-help:not([disabled]):hover,
1043 #PanelUI-quit:not([disabled]):hover,
1044 #PanelUI-customize:hover:active,
1045 #PanelUI-help:not([disabled]):hover:active,
1046 #PanelUI-quit:not([disabled]):hover:active,
1047 #PanelUI-help[panel-multiview-anchor="true"] {
1048 -moz-image-region: rect(0, 32px, 16px, 16px);
1051 #PanelUI-help[disabled],
1052 #PanelUI-quit[disabled],
1053 #PanelUI-fxa-icon[disabled],
1054 #PanelUI-fxa-avatar[disabled],
1055 #PanelUI-fxa-label[disabled] > .toolbarbutton-icon,
1056 #PanelUI-fxa-status::after {
1057 -moz-image-region: rect(0, 48px, 16px, 32px);
1060 #PanelUI-fxa-status:not([disabled]):hover,
1061 #PanelUI-fxa-icon:not([disabled]):hover,
1062 #PanelUI-help:not([disabled]):hover,
1063 #PanelUI-customize:hover,
1064 #PanelUI-quit:not([disabled]):hover {
1067 #PanelUI-fxa-status:not([disabled]):hover:active,
1068 #PanelUI-fxa-icon:not([disabled]):hover:active,
1069 #PanelUI-help:not([disabled]):hover:active,
1070 #PanelUI-customize:hover:active,
1071 #PanelUI-quit:not([disabled]):hover:active {
1074 #PanelUI-fxa-status:not([disabled]):hover,
1075 #PanelUI-fxa-status:not([disabled]):hover:active,
1076 #PanelUI-fxa-icon:not([disabled]):hover,
1077 #PanelUI-fxa-icon:not([disabled]):hover:active {
1080 #PanelUI-fxa-container[fxastatus="error"],
1081 #PanelUI-footer-fxa[fxastatus="error"] {
1082 background-color: #FF0000;
1086 #PanelUI-fxa-container[fxastatus="error"] > #PanelUI-fxa-status:hover,
1087 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
1088 background-color: #FFCF00;
1091 #PanelUI-fxa-container[fxastatus="error"] > #PanelUI-fxa-status:hover:active,
1092 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
1093 background-color: #FF9F00;
1096 #PanelUI-update-status {
1100 #PanelUI-update-status[update-status="succeeded"] {
1101 background-color: #008484;
1105 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
1106 background-color: #FFCF00;
1109 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
1110 background-color: #FF9F00;
1113 #PanelUI-update-status[update-status="failed"] {
1114 background-color: #FF0000;
1118 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
1119 background-color: #FFCF00;
1122 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
1123 background-color: #FF9F00;
1126 #PanelUI-quit:not([disabled]):hover {
1127 background-color: #FF0000;
1130 #PanelUI-quit:not([disabled]):hover:active {
1131 background-color: #FF9F00;
1134 #customization-panelHolder #PanelUI-customize {
1136 background-color: #008484;
1141 #customization-panelHolder #PanelUI-customize + toolbarseparator {
1145 #customization-panelHolder #PanelUI-customize:hover,
1146 #customization-panelHolder #PanelUI-customize:hover:active {
1147 background-color: #FFCF00;
1151 #customization-palette .toolbarbutton-multiline-text,
1152 #customization-palette .toolbarbutton-text {
1156 panelview .toolbarbutton-1,
1158 .widget-overflow-list .toolbarbutton-1,
1159 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1160 .share-provider-button,
1161 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1163 background-color: transparent;
1165 border-style: solid;
1166 border-color: transparent;*/
1169 panelview .toolbarbutton-1,
1171 .widget-overflow-list .toolbarbutton-1,
1172 .share-provider-button,
1173 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1177 .subviewbutton.panel-subview-footer {
1178 /* border-radius: 0; */
1182 .subviewbutton.panel-subview-footer > .menu-text {
1183 margin-inline-start: 0px !important;
1184 padding-inline-start: 6px;
1185 padding-inline-end: 6px;
1190 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
1194 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
1199 .subviewbutton.panel-subview-footer > .menu-accel-container {
1200 padding-inline-start: 6px;
1203 .subviewbutton:not(.panel-subview-footer) {
1207 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
1208 /* Bookmark items need a more specific selector. */
1209 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
1210 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
1214 .PanelUI-subView .subviewbutton[shortcut]::after {
1215 content: attr(shortcut);
1220 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
1221 margin-inline-start: 10px;
1224 /* This is a <label> but it should fit in with the menu font- and colorwise. */
1225 #PanelUI-characterEncodingView-autodetect-label {
1230 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
1231 /* margin-left: 4px;
1232 margin-right: 4px;*/
1235 panelview .toolbarbutton-1,
1236 .widget-overflow-list > .toolbarbutton-1:not(:first-child),
1237 .widget-overflow-list > .toolbaritem-combined-buttons:not(:first-child) {
1242 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1243 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
1244 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1245 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1246 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
1247 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1248 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1249 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
1250 background-color: var(--arrowpanel-dimmed);
1251 border-color: var(--panel-separator-color);
1254 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
1255 border-color: var(--panel-separator-color);
1258 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
1259 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
1260 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
1261 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
1262 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
1263 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
1264 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1265 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
1266 background-color: var(--arrowpanel-dimmed-further);
1267 border-color: var(--panel-separator-color);
1268 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
1271 .subviewbutton.panel-subview-footer {
1272 margin: 4px -4px -4px;
1273 background-color: var(--arrowpanel-dimmed);
1274 border-top: 1px solid var(--panel-separator-color);
1278 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
1279 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
1280 background-color: var(--arrowpanel-dimmed-further);
1283 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
1284 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
1285 background-color: var(--arrowpanel-dimmed-even-further);
1286 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
1289 #BMB_bookmarksPopup .subviewbutton {
1291 font-weight: normal;
1294 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
1298 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
1299 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
1300 -moz-appearance: none;
1305 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
1306 #BMB_bookmarksPopup arrowscrollbox {
1307 padding-bottom: 0px;
1310 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
1311 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
1315 / Popups with only one item don't have a footer /
1316 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1317 / These popups never have a footer /
1318 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1319 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1320 #BMB_mobileBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1321 / And so they need some bottom padding: /
1322 padding-bottom: 4px;
1325 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
1326 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
1331 .PanelUI-subView menuseparator,
1332 .PanelUI-subView toolbarseparator,
1333 .cui-widget-panelview menuseparator {
1334 -moz-appearance: none;
1336 border-top: 1px solid var(--panel-separator-color);
1341 .PanelUI-subView menuseparator,
1342 .PanelUI-subView toolbarseparator {
1343 /* margin-inline-start: -5px;
1344 margin-inline-end: -4px;*/
1347 .PanelUI-subView menuseparator.small-separator,
1348 .PanelUI-subView toolbarseparator.small-separator {
1349 /* margin-left: 5px;
1350 margin-right: 5px;*/
1353 .cui-widget-panelview menuseparator.small-separator {
1354 /* margin-left: 10px;
1355 margin-right: 10px;*/
1358 .subviewbutton > .menu-accel-container {
1359 -moz-box-pack: start;
1360 margin-inline-start: 10px;
1361 margin-inline-end: auto;
1365 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"],
1366 #PanelUI-historyItems > toolbarbutton {
1367 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.svg");
1370 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon,
1371 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1372 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1373 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1378 toolbarbutton[panel-multiview-anchor="true"],
1379 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1381 background-color: #008484;
1384 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1388 #PanelUI-help[panel-multiview-anchor="true"] {
1389 background-image: none;
1392 #PanelUI-help[panel-multiview-anchor="true"]::after {
1397 width: var(--panel-ui-exit-subview-gutter-width);
1398 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1399 background-repeat: no-repeat;
1400 background-color: #008484;
1401 background-position: left 10px center, 0;
1404 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1405 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1406 background-position: right 10px center, 0;
1409 toolbarbutton[panel-multiview-anchor="true"] {
1410 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1411 background-position: right var(--panel-ui-menuPanelMultiviewBgPos) center;
1412 background-repeat: no-repeat;
1415 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1416 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1417 background-position: left var(--panel-ui-menuPanelMultiviewBgPos) center;
1420 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1421 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1425 #search-container[cui-areatype="menu-panel"],
1426 #wrapper-search-container[place="panel"] {
1427 width: var(--panel-ui-menuPanelWidth);
1430 #search-container[cui-areatype="menu-panel"] {
1435 toolbarpaletteitem[place="palette"] > #search-container {
1440 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1441 background-color: transparent;
1443 transition-property: background-color, border-color;
1444 transition-duration: 150ms;
1447 /* Make direct siblings overlap borders: */
1448 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1449 /* border-top-color: transparent !important; */
1452 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1453 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1454 /* margin-top: -1px; */
1457 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1462 min-width: var(--panel-ui-menuPanelButtonWidth);
1463 max-width: var(--panel-ui-menuPanelButtonWidth);
1464 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1465 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1466 height: calc(2.2em + 4px);
1468 -moz-box-orient: horizontal;
1471 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1472 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1473 /* reduce the width with 2px for this button to compensate for two separators
1475 min-width: var(--panel-ui-menuPanelButtonWidth-min2);
1476 max-width: var(--panel-ui-menuPanelButtonWidth-min2);
1479 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1483 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1487 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1488 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1489 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1490 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1491 border-top-right-radius: 0;
1492 border-bottom-right-radius: 0;
1495 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1496 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1497 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1498 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1499 border-top-left-radius: 0;
1500 border-bottom-left-radius: 0;
1503 .toolbaritem-combined-buttons > separator {
1504 -moz-appearance: none;
1506 -moz-box-align: stretch;
1509 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1513 /* background: var(--panel-separator-color);*/
1514 transition-property: margin;
1515 transition-duration: 10ms;
1516 transition-timing-function: ease;
1519 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1523 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1527 .cui-widget-panelview,
1528 #widget-overflow-scroller {
1533 #widget-overflow-scroller {
1536 margin-bottom: 10px;
1539 #widget-overflow-list {
1540 width: var(--panel-ui-menuPanelWidth);
1542 padding-right: 10px;
1545 toolbaritem[overflowedItem=true],
1546 toolbarbutton[overflowedItem=true] {
1548 max-width: var(--panel-ui-menuPanelWidth);
1550 background-repeat: no-repeat;
1551 background-position: 0 center;
1554 .widget-overflow-list .toolbarbutton-1,
1555 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1556 -moz-box-align: center;
1557 -moz-box-orient: horizontal;
1560 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1561 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1563 padding-inline-start: .5em;
1566 #widget-overflow-list > .toolbaritem-combined-buttons {
1570 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1575 margin-inline-end: -1px;
1578 .subviewbutton[checked="true"] {
1579 background-image: url("chrome://global/skin/menu/menu-check.gif");
1580 background-position: top 5px left 4px;
1581 background-repeat: no-repeat;
1584 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1585 background-position: top 5px right 4px;
1588 .subviewbutton[checked="true"]:hover {
1589 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1592 .subviewbutton > .menu-iconic-left {
1593 margin-inline-end: 3px;
1596 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1600 #PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon {
1605 .panel-mainview[panelid=customizationui-widget-panel],
1606 #customizationui-widget-multiview > .panel-viewcontainer,
1607 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1608 #PanelUI-panicView > .panel-subview-body,
1609 #PanelUI-panicView {
1614 #PanelUI-panicView.cui-widget-panelview {
1618 #PanelUI-panic-timeframe {
1620 border-bottom: 1px solid var(--panel-separator-color);
1623 #panic-button-success-icon,
1624 #PanelUI-panic-timeframe-icon,
1625 #PanelUI-panic-timeframe-icon-small {
1626 background-color: transparent;
1627 margin-inline-end: 10px;
1630 #panic-button-success-icon,
1631 #PanelUI-panic-timeframe-icon {
1632 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1637 #PanelUI-panic-timeframe-icon-small {
1638 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1643 /* current attribute is only set when in use as a subview instead of a main view */
1644 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1648 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1652 #panic-button-success-header,
1653 #PanelUI-panic-header {
1654 -moz-box-align: center;
1658 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1662 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1663 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1664 transform: scaleX(-1);
1671 .subviewradio@buttonStateHover@ {
1674 .subviewradio[selected],
1675 .subviewradio[selected]:hover,
1676 .subviewradio@buttonStateActive@ {
1679 .subviewradio > .radio-check {
1682 .subviewradio > .radio-check[selected] {
1686 #PanelUI-panic-explanations {
1687 padding: 10px 10px 0;
1690 #PanelUI-panic-actionlist-main-label {
1695 .PanelUI-panic-actionlist {
1696 padding-inline-start: 20px;
1698 padding-bottom: 2px;
1699 background-size: 16px 16px;
1700 background-repeat: no-repeat;
1701 background-color: transparent;
1702 background-position: center left;
1705 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1706 background-position: center right;
1709 #PanelUI-panic-actionlist-cookies {
1710 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1713 #PanelUI-panic-actionlist-history {
1714 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1717 #PanelUI-panic-actionlist-windows {
1718 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1721 #PanelUI-panic-actionlist-newwindow {
1722 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1725 #PanelUI-panic-warning {
1732 #PanelUI-panic-view-button {
1733 background-color: #FF0000;
1737 #PanelUI-panic-view-button:hover {
1738 background-color: #FFCF00;
1741 #PanelUI-panic-view-button:hover:active {
1742 background-color: #FF9F00;
1745 #PanelUI-panic-view-button > .toolbarbutton-text {
1750 #panic-button-success-closebutton {
1753 #panic-button-success-closebutton:hover {
1756 #panic-button-success-closebutton:hover:active {
1759 /* === END panelUI.inc.css === */
1762 background-color: var(--arrowpanel-background);
1765 #PanelUI-contents #zoom-out-btn {
1767 padding-right: 12px;
1770 #PanelUI-contents #zoom-in-btn {
1772 padding-right: 12px;
1775 /* bookmark panel submenus */
1777 #BMB_bookmarksPopup menupopup[placespopup=true] {
1778 /* background: transparent;
1783 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1784 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1785 /* box-shadow: 0 0 4px rgba(0,0,0,0.2);
1786 background: var(--arrowpanel-background);
1787 color: var(--arrowpanel-color);
1788 border: 1px solid var(--arrowpanel-border-color);
1789 border-radius: 3.5px;
1793 #BMB_bookmarksPopup menupopup {
1794 /* padding-top: 2px;*/
1797 /* Add some space at the top because there are no headers: */
1798 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1799 /* padding-top: 4px;*/
1802 /* bookmark panel separator */
1803 #BMB_bookmarksPopup menuseparator {
1808 .subviewbutton > .menu-right,
1809 .subviewbutton > .menu-iconic-left {
1810 /* padding-top: 1px;
1812 margin-bottom: 2px;*/
1815 .subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon {
1816 /* This catches bookmarks, history items, and sync tabs items */
1821 /* Disabled empty item looks too small otherwise, because it has no icon. */
1822 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1823 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1824 menuitem[type="checkbox"].subviewbutton {
1825 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1826 * 2px for its border, see above */
1827 /* min-height: 22px;*/
1830 .subviewbutton > .toolbarbutton-text {
1831 /* padding-top: 3px;
1832 padding-bottom: 3px;*/
1835 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1836 -moz-appearance: none;
1838 margin-inline-start: 3px;
1841 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1843 padding-inline-start: 0;
1847 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1851 .subviewbutton > .toolbarbutton-text {
1852 padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */
1855 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1856 padding-inline-start: 2px;
1859 /* subviewbutton entries for social sidebars have images that come from external
1860 /* sources, and are not guaranteed to be the size we want, so force the size on
1862 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1867 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1871 menu.subviewbutton > .menu-right {
1872 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow");
1873 /* Reset the rect we inherit from the button: */
1874 -moz-image-region: auto;
1877 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1878 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1879 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1882 menu[disabled="true"].subviewbutton > .menu-right {
1883 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");
1886 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1887 transform: scaleX(-1);