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.png");
1370 @media (min-resolution: 1.1dppx) {
1371 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"],
1372 #PanelUI-historyItems > toolbarbutton {
1373 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
1377 #PanelUI-remotetabs-tabslist > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon,
1378 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1379 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1380 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1385 toolbarbutton[panel-multiview-anchor="true"],
1386 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1388 background-color: #008484;
1391 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1395 #PanelUI-help[panel-multiview-anchor="true"] {
1396 background-image: none;
1399 #PanelUI-help[panel-multiview-anchor="true"]::after {
1404 width: var(--panel-ui-exit-subview-gutter-width);
1405 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1406 background-repeat: no-repeat;
1407 background-color: #008484;
1408 background-position: left 10px center, 0;
1411 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1412 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1413 background-position: right 10px center, 0;
1416 toolbarbutton[panel-multiview-anchor="true"] {
1417 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1418 background-position: right var(--panel-ui-menuPanelMultiviewBgPos) center;
1419 background-repeat: no-repeat;
1422 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1423 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1424 background-position: left var(--panel-ui-menuPanelMultiviewBgPos) center;
1427 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1428 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1432 #search-container[cui-areatype="menu-panel"],
1433 #wrapper-search-container[place="panel"] {
1434 width: var(--panel-ui-menuPanelWidth);
1437 #search-container[cui-areatype="menu-panel"] {
1442 toolbarpaletteitem[place="palette"] > #search-container {
1447 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1448 background-color: transparent;
1450 transition-property: background-color, border-color;
1451 transition-duration: 150ms;
1454 /* Make direct siblings overlap borders: */
1455 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1456 /* border-top-color: transparent !important; */
1459 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1460 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1461 /* margin-top: -1px; */
1464 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1469 min-width: var(--panel-ui-menuPanelButtonWidth);
1470 max-width: var(--panel-ui-menuPanelButtonWidth);
1471 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1472 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1473 height: calc(2.2em + 4px);
1475 -moz-box-orient: horizontal;
1478 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1479 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1480 /* reduce the width with 2px for this button to compensate for two separators
1482 min-width: var(--panel-ui-menuPanelButtonWidth-min2);
1483 max-width: var(--panel-ui-menuPanelButtonWidth-min2);
1486 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1490 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1494 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1495 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1496 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1497 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1498 border-top-right-radius: 0;
1499 border-bottom-right-radius: 0;
1502 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1503 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1504 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1505 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1506 border-top-left-radius: 0;
1507 border-bottom-left-radius: 0;
1510 .toolbaritem-combined-buttons > separator {
1511 -moz-appearance: none;
1513 -moz-box-align: stretch;
1516 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1520 /* background: var(--panel-separator-color);*/
1521 transition-property: margin;
1522 transition-duration: 10ms;
1523 transition-timing-function: ease;
1526 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1530 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1534 .cui-widget-panelview,
1535 #widget-overflow-scroller {
1540 #widget-overflow-scroller {
1543 margin-bottom: 10px;
1546 #widget-overflow-list {
1547 width: var(--panel-ui-menuPanelWidth);
1549 padding-right: 10px;
1552 toolbaritem[overflowedItem=true],
1553 toolbarbutton[overflowedItem=true] {
1555 max-width: var(--panel-ui-menuPanelWidth);
1557 background-repeat: no-repeat;
1558 background-position: 0 center;
1561 .widget-overflow-list .toolbarbutton-1,
1562 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1563 -moz-box-align: center;
1564 -moz-box-orient: horizontal;
1567 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1568 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1570 padding-inline-start: .5em;
1573 #widget-overflow-list > .toolbaritem-combined-buttons {
1577 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1582 margin-inline-end: -1px;
1585 .subviewbutton[checked="true"] {
1586 background-image: url("chrome://global/skin/menu/menu-check.gif");
1587 background-position: top 5px left 4px;
1588 background-repeat: no-repeat;
1591 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1592 background-position: top 5px right 4px;
1595 .subviewbutton[checked="true"]:hover {
1596 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1599 .subviewbutton > .menu-iconic-left {
1600 margin-inline-end: 3px;
1603 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1607 #PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon {
1612 .panel-mainview[panelid=customizationui-widget-panel],
1613 #customizationui-widget-multiview > .panel-viewcontainer,
1614 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1615 #PanelUI-panicView > .panel-subview-body,
1616 #PanelUI-panicView {
1621 #PanelUI-panicView.cui-widget-panelview {
1625 #PanelUI-panic-timeframe {
1627 border-bottom: 1px solid var(--panel-separator-color);
1630 #panic-button-success-icon,
1631 #PanelUI-panic-timeframe-icon,
1632 #PanelUI-panic-timeframe-icon-small {
1633 background-color: transparent;
1634 margin-inline-end: 10px;
1637 #panic-button-success-icon,
1638 #PanelUI-panic-timeframe-icon {
1639 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1644 #PanelUI-panic-timeframe-icon-small {
1645 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1650 /* current attribute is only set when in use as a subview instead of a main view */
1651 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1655 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1659 #panic-button-success-header,
1660 #PanelUI-panic-header {
1661 -moz-box-align: center;
1665 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1669 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1670 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1671 transform: scaleX(-1);
1678 .subviewradio@buttonStateHover@ {
1681 .subviewradio[selected],
1682 .subviewradio[selected]:hover,
1683 .subviewradio@buttonStateActive@ {
1686 .subviewradio > .radio-check {
1689 .subviewradio > .radio-check[selected] {
1693 #PanelUI-panic-explanations {
1694 padding: 10px 10px 0;
1697 #PanelUI-panic-actionlist-main-label {
1702 .PanelUI-panic-actionlist {
1703 padding-inline-start: 20px;
1705 padding-bottom: 2px;
1706 background-size: 16px 16px;
1707 background-repeat: no-repeat;
1708 background-color: transparent;
1709 background-position: center left;
1712 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1713 background-position: center right;
1716 #PanelUI-panic-actionlist-cookies {
1717 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1720 #PanelUI-panic-actionlist-history {
1721 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1724 #PanelUI-panic-actionlist-windows {
1725 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1728 #PanelUI-panic-actionlist-newwindow {
1729 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1732 #PanelUI-panic-warning {
1739 #PanelUI-panic-view-button {
1740 background-color: #FF0000;
1744 #PanelUI-panic-view-button:hover {
1745 background-color: #FFCF00;
1748 #PanelUI-panic-view-button:hover:active {
1749 background-color: #FF9F00;
1752 #PanelUI-panic-view-button > .toolbarbutton-text {
1757 #panic-button-success-closebutton {
1760 #panic-button-success-closebutton:hover {
1763 #panic-button-success-closebutton:hover:active {
1766 /* === END panelUI.inc.css === */
1769 background-color: var(--arrowpanel-background);
1772 #PanelUI-contents #zoom-out-btn {
1774 padding-right: 12px;
1777 #PanelUI-contents #zoom-in-btn {
1779 padding-right: 12px;
1782 /* bookmark panel submenus */
1784 #BMB_bookmarksPopup menupopup[placespopup=true] {
1785 /* background: transparent;
1790 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1791 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1792 /* box-shadow: 0 0 4px rgba(0,0,0,0.2);
1793 background: var(--arrowpanel-background);
1794 color: var(--arrowpanel-color);
1795 border: 1px solid var(--arrowpanel-border-color);
1796 border-radius: 3.5px;
1800 #BMB_bookmarksPopup menupopup {
1801 /* padding-top: 2px;*/
1804 /* Add some space at the top because there are no headers: */
1805 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1806 /* padding-top: 4px;*/
1809 /* bookmark panel separator */
1810 #BMB_bookmarksPopup menuseparator {
1815 .subviewbutton > .menu-right,
1816 .subviewbutton > .menu-iconic-left {
1817 /* padding-top: 1px;
1819 margin-bottom: 2px;*/
1822 .subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon {
1823 /* This catches bookmarks, history items, and sync tabs items */
1828 /* Disabled empty item looks too small otherwise, because it has no icon. */
1829 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1830 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1831 menuitem[type="checkbox"].subviewbutton {
1832 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1833 * 2px for its border, see above */
1834 /* min-height: 22px;*/
1837 .subviewbutton > .toolbarbutton-text {
1838 /* padding-top: 3px;
1839 padding-bottom: 3px;*/
1842 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1843 -moz-appearance: none;
1845 margin-inline-start: 3px;
1848 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1850 padding-inline-start: 0;
1854 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1858 .subviewbutton > .toolbarbutton-text {
1859 padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */
1862 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1863 padding-inline-start: 2px;
1866 /* subviewbutton entries for social sidebars have images that come from external
1867 /* sources, and are not guaranteed to be the size we want, so force the size on
1869 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1874 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1878 menu.subviewbutton > .menu-right {
1879 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow");
1880 /* Reset the rect we inherit from the button: */
1881 -moz-image-region: auto;
1884 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1885 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1886 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1889 menu[disabled="true"].subviewbutton > .menu-right {
1890 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");
1893 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1894 transform: scaleX(-1);