1 /* This Source Code Form is subject to the terms of the Mozilla Public
2 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
5 /* === BEGIN panelUI.inc.css === */
8 --panel-ui-menuPanelWidth: 22.35em;
9 --panel-ui-menuPanelWidth-neg: -22.35em;
10 --panel-ui-standaloneSubviewWidth: 30em;
11 /* XXXgijs This is the ugliest bit of code I think I've ever written for Mozilla.
12 * Basically, the 0.1px is there to avoid CSS rounding errors causing buttons to wrap.
13 * For gory details, refer to https://bugzilla.mozilla.org/show_bug.cgi?id=963365#c11
14 * There's no calc() here (and therefore lots of calc() where this is used) because
15 * we don't support nested calc(): https://bugzilla.mozilla.org/show_bug.cgi?id=968761 */
16 --panel-ui-menuPanelButtonWidth: calc(var(--panel-ui-menuPanelWidth) / 3 - 0.1px);
17 --panel-ui-menuPanelButtonWidth-min2: calc(var(--panel-ui-menuPanelWidth) / 3 - 0.1px - 2px);
18 --panel-ui-menuPanelButtonIconMargin: calc((var(--panel-ui-menuPanelWidth) / 3 - 0.1px) / 2 - 22px);
19 --panel-ui-menuPanelMultiviewBgPos: calc((var(--panel-ui-menuPanelWidth) / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px);
22 --panel-ui-exit-subview-gutter-width: 38px;
25 #PanelUI-popup #PanelUI-contents:empty {
29 #PanelUI-popup #PanelUI-contents:empty::before {
31 background-image: url(chrome://browser/skin/customizableui/whimsy.png);
32 background-size: 64px 64px;
37 transition: transform 1s ease-out;
38 animation: whimsyMoveX 3.05s linear 0s infinite alternate,
39 whimsyMoveY 3.4s linear 0s infinite alternate;
42 #PanelUI-popup #PanelUI-contents:not(:hover):empty::before {
43 filter: grayscale(100%);
46 #PanelUI-popup #PanelUI-contents:active:empty::before {
47 animation: whimsyMoveX 3.05s linear 0s infinite alternate,
48 whimsyMoveY 3.4s linear 0s infinite alternate,
49 whimsyRotate 1s linear 0s infinite normal;
52 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before {
53 animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
54 whimsyMoveY 3.4s linear 0s infinite alternate;
57 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):active:empty::before {
58 animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
59 whimsyMoveY 3.4s linear 0s infinite alternate,
60 whimsyRotate 1s linear 0s infinite normal;
63 @media (min-resolution: 2dppx) {
64 #PanelUI-popup #PanelUI-contents:empty::before {
65 background-image: url("chrome://browser/skin/customizableui/whimsy@2x.png");
69 @keyframes whimsyMoveX {
70 /* These values are adjusted for the padding on the panel. */
71 from { margin-left: -15px; } to { margin-left: calc(100% - 49px); }
74 @keyframes whimsyMoveXRTL {
75 /* These values are adjusted for the padding on the panel. */
76 from { margin-right: -15px; } to { margin-right: calc(100% - 49px); }
79 @keyframes whimsyMoveY {
80 /* These values are adjusted for the padding and height of the panel. */
81 from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
84 @keyframes whimsyRotate {
85 to { transform: perspective(5000px) rotateY(360deg); }
88 #customization-panelHolder {
93 margin-inline-start: 3px;
96 #nav-bar[brighttext] > #PanelUI-button {
99 #PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
103 background-size: contain;
107 #PanelUI-menu-button[badge-status="download-success"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
111 #PanelUI-menu-button[badge-status="update-succeeded"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
112 background: #008484 url(chrome://browser/skin/update-badge.svg) no-repeat center;
116 #PanelUI-menu-button[badge-status="update-failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
117 background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
121 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
122 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
126 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
127 #PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
132 /* "!important" is necessary to override the rule in toolbarbutton.css */
133 margin-top: -1px !important;
134 margin-right: -2px !important;
137 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
141 #PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
145 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
147 background: transparent url(chrome://browser/skin/warning.svg) no-repeat center;
150 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
151 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
156 background-clip: padding-box;
157 border-left: 1px solid var(--panel-arrowcontent-border-color);
158 margin-inline-start: var(--panel-ui-exit-subview-gutter-width);
161 .panel-viewstack[viewtype="main"] > .panel-subviews {
162 transform: translateX(var(--panel-ui-menuPanelWidth));
165 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
166 transform: translateX(var(--panel-ui-menuPanelWidth-neg));
169 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
173 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
177 .panel-subview-body {
183 #PanelUI-popup .panel-subview-body {
188 .panel-subview-header,
189 .subviewbutton.panel-subview-footer {
190 box-sizing: border-box;
191 /* min-height: 41px; */
195 .panel-subview-header {
197 background-color: #A09090;
199 font-variant: small-caps;
203 .panel-subview-footer {
204 border-top: 1px solid #A09090;
207 .cui-widget-panelview .panel-subview-header {
211 .cui-widget-panelview .subviewbutton.panel-subview-footer {
213 -moz-box-pack: center;
218 flex-direction: column;
222 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
225 #PanelUI-popup > arrowscrollbox > scrollbox {
229 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
234 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent,
235 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box {
239 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
240 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
241 /* line-height: 1.2;*/
245 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
246 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
250 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
251 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
253 clip: rect(-0.1em, auto, 2.6em, auto);
256 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
257 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
259 /* Need to override toolkit theming which sets margin: 0 !important; */
260 margin: 2px 0 0 !important;
263 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
268 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
269 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
270 margin-inline-start: 0;
274 max-width: var(--panel-ui-menuPanelWidth);
278 .panel-mainview:not([panelid="PanelUI-popup"]) {
279 max-width: var(--panel-ui-standaloneSubviewWidth);
282 /* Give WebExtension stand-alone panels extra width for Chrome compatibility */
283 .cui-widget-panel[viewId^=PanelUI-webext-] .panel-mainview {
287 .cui-widget-panel[viewId^=PanelUI-webext-] > .panel-arrowcontainer > .panel-arrowcontent {
291 panelview[id^=PanelUI-webext-] {
293 border-radius: 3.5px;
296 panelview:not([mainview]) .toolbarbutton-text,
297 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
302 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
306 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
310 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
311 border-radius: 4px 4px 0 0;
314 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
315 border-radius: 0 0 4px 4px;
323 max-width: var(--panel-ui-menuPanelWidth);
326 #PanelUI-contents-scroller {
329 width: var(--panel-ui-menuPanelWidth);
333 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
339 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
340 .panelUI-grid .toolbarbutton-1,
341 .panel-customization-placeholder-child {
342 -moz-appearance: none;
343 -moz-box-orient: vertical;
344 width: var(--panel-ui-menuPanelButtonWidth-min2); /* LCARStrek: XXX: found out to be needed to fit the icons */
345 height: calc(51px + 2.2em);
348 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
349 * should have a min-width set so they abide by the width set above (which they do outside of
350 * customize mode because they're in a flexed container) */
351 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
355 /* Help SDK buttons fit in. */
356 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
357 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
358 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
359 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
364 toolbarpaletteitem:-moz-any([place="palette"], [place="panel"]) > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon {
369 .customization-palette .toolbarbutton-1 {
370 -moz-appearance: none;
371 -moz-box-orient: vertical;
374 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
375 -moz-appearance: none;
376 -moz-box-orient: vertical;
377 width: var(--panel-ui-menuPanelButtonWidth-min2);
378 height: calc(49px + 2.2em);
382 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
383 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
384 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
387 .panel-customization-placeholder-child {
389 /* padding: 2px 6px;*/
392 .panelUI-grid .toolbarbutton-1[type="menu"] {
393 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
394 background-position: right 3px top 16px;
395 background-repeat: no-repeat;
398 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
399 background-position: left 3px top 16px;
402 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
406 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
407 -moz-box-align: center;
409 margin-inline-start: -16px;
411 margin-bottom: 2.2em;
415 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
416 border-radius: 0 0 0 2px;
419 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
420 border-radius: 0 0 2px 0;
423 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
427 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
428 width: var(--panel-ui-menuPanelButtonWidth);
429 margin: 0 !important;
432 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
433 -moz-box-align: center;
434 -moz-box-pack: center;
437 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
441 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
444 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
445 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
446 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
447 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
448 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
449 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
450 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
451 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
452 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
457 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
458 * which was affecting subview display. Because of this, we're hiding the iframe *only*
459 * when displaying a subview. The discerning user might notice this, but it's not nearly
460 * as bad as the brokenness.
461 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
464 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
468 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
472 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
473 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
474 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
475 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
476 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
477 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
478 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
479 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
480 .panel-customization-placeholder-child > .toolbarbutton-icon {
485 /* Explanation for the below formula (A / B - C)
487 Each button is @menuPanelButtonWidth@ wide
489 Each button has two margins.
491 The button icon is 32 pixels wide.
492 The button has 12px of horizontal padding (6 on each side).
493 The button has 0px of horizontal border (0 on each side).
494 Total width of button's icon + button padding should therefore be 44px,
495 which means each horizontal margin should be the half the button's width - (44/2) px.
497 margin: 4px var(--panel-ui-menuPanelButtonIconMargin);
500 /* above we treat the container as the icon for the margins, that is so the
501 /* badge itself is positioned correctly. Here we make sure that the icon itself
502 /* has the minimum size we want, but no padding/margin. */
503 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon,
504 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
513 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
517 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
521 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
522 margin-inline-end: 2px;
525 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
526 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
532 #zoom-in-button > .toolbarbutton-text,
533 #zoom-out-button > .toolbarbutton-text,
534 #zoom-reset-button > .toolbarbutton-icon {
541 flex-direction: column;
542 /* background-color: var(--arrowpanel-dimmed);*/
545 border-bottom-right-radius: 4px;
546 border-bottom-left-radius: 4px;
549 #main-window[customizing] #PanelUI-footer-fxa > toolbarseparator {
553 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
554 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
555 #PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
559 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after {
560 content: url("chrome://browser/skin/warning.svg");
569 #PanelUI-update-status[update-status]::after {
573 margin-right: 16.5px;
575 background-size: contain;
579 #PanelUI-update-status[update-status="succeeded"]::after {
580 background-image: url(chrome://browser/skin/update-badge.svg);
581 background-color: #008484;
584 #PanelUI-update-status[update-status="failed"]::after {
585 background-image: url(chrome://browser/skin/update-badge-failed.svg);
586 background-color: #FF0000;
589 #PanelUI-fxa-status {
595 #PanelUI-footer-inner,
596 #PanelUI-footer-fxa:not([hidden]) {
598 border-top: 1px solid var(--panel-separator-color);
601 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
602 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
606 #PanelUI-footer-inner > toolbarseparator,
607 #PanelUI-footer-fxa > toolbarseparator {
609 border-left: 1px solid var(--panel-separator-color);
613 #PanelUI-footer-inner:hover > toolbarseparator,
614 #PanelUI-footer-fxa:hover > toolbarseparator {
618 #PanelUI-update-status,
626 box-sizing: border-box;
631 transition: background-color;
632 -moz-box-orient: horizontal;
635 #PanelUI-update-status {
636 border-top: 1px solid var(--panel-separator-color);
639 #PanelUI-update-status {
640 border-bottom: 1px solid transparent;
644 #PanelUI-update-status > .toolbarbutton-text {
645 width: 0; /* Fancy cropping solution for flexbox. */
648 #PanelUI-help[panel-multiview-anchor="true"] {
649 -moz-image-region: rect(0, 32px, 16px, 16px);
657 #PanelUI-update-status > .toolbarbutton-text,
658 #PanelUI-fxa-label > .toolbarbutton-text,
659 #PanelUI-customize > .toolbarbutton-text {
665 #PanelUI-help > .toolbarbutton-text,
666 #PanelUI-quit > .toolbarbutton-text,
667 #PanelUI-fxa-avatar > .toolbarbutton-text {
671 #PanelUI-update-status > .toolbarbutton-icon,
672 #PanelUI-fxa-label > .toolbarbutton-icon,
673 #PanelUI-fxa-icon > .toolbarbutton-icon,
674 #PanelUI-customize > .toolbarbutton-icon,
675 #PanelUI-help > .toolbarbutton-icon,
676 #PanelUI-quit > .toolbarbutton-icon {
677 margin-inline-end: 0;
681 padding-inline-start: 15px;
682 padding-inline-end: 15px;
688 padding-inline-start: 15px;
689 border-inline-start-style: none;
692 #PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
693 #PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
694 padding-inline-start: 0px;
697 #PanelUI-update-status {
698 width: calc(var(--panel-ui-menuPanelWidth) + 30px);
699 padding-inline-start: 15px;
700 border-inline-start-style: none;
703 #PanelUI-update-status {
704 list-style-image: url(chrome://branding/content/icon16.png);
709 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
712 #PanelUI-remotetabs {
713 --panel-ui-sync-illustration-height: 157.5px;
716 .PanelUI-remotetabs-instruction-title,
717 .PanelUI-remotetabs-instruction-label,
718 #PanelUI-remotetabs-mobile-promo {
719 /* If you change the margin here, the min-height of the synced tabs panel
720 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
721 need adjusting (see bug 1248506) */
729 .PanelUI-remotetabs-instruction-title {
733 /* The boxes with "instructions" get extra top and bottom padding for space
734 around the illustration and buttons */
735 .PanelUI-remotetabs-instruction-box {
736 /* If you change the padding here, the min-height of the synced tabs panel
737 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
738 need adjusting (see bug 1248506) */
739 padding-bottom: 30px;
743 .PanelUI-remotetabs-prefs-button {
745 -moz-appearance: none;
746 background-color: #0096dd;
747 / !important for the color as an OSX specific rule when a lightweight theme
748 is used for buttons in the toolbox overrides. See bug 1238531 for details /
749 color: white !important;
751 / If you change the margin or padding below, the min-height of the synced tabs
752 panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
753 etc) may need adjusting (see bug 1248506) /
762 .PanelUI-remotetabs-prefs-button:hover,
763 .PanelUI-remotetabs-prefs-button:hover:active {
764 /* background-color: #018acb; */
767 .remotetabs-promo-link {
771 .PanelUI-remotetabs-notabsforclient-label {
773 /* This margin is to line this label up with the labels in toolbarbuttons. */
777 .fxaSyncIllustration {
778 height: var(--panel-ui-sync-illustration-height);
779 list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg);
782 .PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
783 /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */
784 text-align: center !important;
788 #PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
792 /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
793 the panel is anchored to a toolbar button.
795 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
796 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
797 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
798 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
799 min-height: calc(var(--panel-ui-sync-illustration-height) +
800 20px + /* margin of .PanelUI-remotetabs-prefs-button */
801 16px + /* padding of .PanelUI-remotetabs-prefs-button */
802 30px + /* margin of .PanelUI-remotetabs-instruction-label */
803 30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */
807 #PanelUI-remotetabs-tabslist > label[itemtype="client"] {
811 /* Collapse the non-active vboxes in the remotetabs deck to use only the
812 height the active box needs */
813 #PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
814 #PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
815 #PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
816 visibility: collapse;
819 #PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
823 #PanelUI-fxa-icon[syncstatus="active"]:not([disabled]) {
824 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
827 #PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
828 #PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label {
829 list-style-image: url(chrome://browser/skin/warning.svg);
830 -moz-image-region: auto;
834 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
837 #customization-panelHolder #PanelUI-customize {
838 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
842 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
846 border-inline-end-style: none;
847 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
855 -moz-image-region: rect(0, 16px, 16px, 0);
858 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
859 #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
863 #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
867 #PanelUI-fxa-status[disabled],
868 #PanelUI-fxa-icon[disabled] {
869 pointer-events: none;
872 #PanelUI-fxa-avatar {
876 background-repeat: no-repeat;
877 background-position: 0 0;
878 background-size: contain;
883 margin-inline-end: 0;
886 #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
887 list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
890 #PanelUI-customize:hover,
891 #PanelUI-help:not([disabled]):hover,
892 #PanelUI-quit:not([disabled]):hover,
893 #PanelUI-customize:hover:active,
894 #PanelUI-help:not([disabled]):hover:active,
895 #PanelUI-quit:not([disabled]):hover:active,
896 #PanelUI-help[panel-multiview-anchor="true"] {
897 -moz-image-region: rect(0, 32px, 16px, 16px);
900 #PanelUI-help[disabled],
901 #PanelUI-quit[disabled],
902 #PanelUI-fxa-icon[disabled],
903 #PanelUI-fxa-avatar[disabled],
904 #PanelUI-fxa-label[disabled] > .toolbarbutton-icon,
905 #PanelUI-fxa-status::after {
906 -moz-image-region: rect(0, 48px, 16px, 32px);
909 #PanelUI-fxa-status:not([disabled]):hover,
910 #PanelUI-fxa-icon:not([disabled]):hover,
911 #PanelUI-help:not([disabled]):hover,
912 #PanelUI-customize:hover,
913 #PanelUI-quit:not([disabled]):hover {
916 #PanelUI-fxa-status:not([disabled]):hover:active,
917 #PanelUI-fxa-icon:not([disabled]):hover:active,
918 #PanelUI-help:not([disabled]):hover:active,
919 #PanelUI-customize:hover:active,
920 #PanelUI-quit:not([disabled]):hover:active {
923 #PanelUI-fxa-status:not([disabled]):hover,
924 #PanelUI-fxa-status:not([disabled]):hover:active,
925 #PanelUI-fxa-icon:not([disabled]):hover,
926 #PanelUI-fxa-icon:not([disabled]):hover:active {
929 #PanelUI-footer-fxa[fxastatus="error"] {
930 background-color: #FF0000;
934 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
935 background-color: #FFCF00;
938 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
939 background-color: #FF9F00;
942 #PanelUI-update-status {
946 #PanelUI-update-status[update-status="succeeded"] {
947 background-color: #008484;
951 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
952 background-color: #FFCF00;
955 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
956 background-color: #FF9F00;
959 #PanelUI-update-status[update-status="failed"] {
960 background-color: #FF0000;
964 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
965 background-color: #FFCF00;
968 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
969 background-color: #FF9F00;
972 #PanelUI-quit:not([disabled]):hover {
973 background-color: #FF0000;
976 #PanelUI-quit:not([disabled]):hover:active {
977 background-color: #FF9F00;
980 #customization-panelHolder #PanelUI-customize {
982 background-color: #008484;
987 #customization-panelHolder #PanelUI-customize + toolbarseparator {
991 #customization-panelHolder #PanelUI-customize:hover,
992 #customization-panelHolder #PanelUI-customize:hover:active {
993 background-color: #FFCF00;
997 #customization-palette .toolbarbutton-multiline-text,
998 #customization-palette .toolbarbutton-text {
1002 panelview .toolbarbutton-1,
1004 .widget-overflow-list .toolbarbutton-1,
1005 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
1006 .share-provider-button,
1007 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1009 background-color: transparent;
1011 border-style: solid;
1012 border-color: transparent;*/
1015 panelview .toolbarbutton-1,
1017 .widget-overflow-list .toolbarbutton-1,
1018 .share-provider-button,
1019 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1023 .subviewbutton.panel-subview-footer {
1024 /* border-radius: 0; */
1028 .subviewbutton.panel-subview-footer > .menu-text {
1029 margin-inline-start: 0px !important;
1030 padding-inline-start: 6px;
1031 padding-inline-end: 6px;
1036 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
1040 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
1045 .subviewbutton.panel-subview-footer > .menu-accel-container {
1046 padding-inline-start: 6px;
1049 .subviewbutton:not(.panel-subview-footer) {
1053 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
1054 /* Bookmark items need a more specific selector. */
1055 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
1056 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
1060 .PanelUI-subView .subviewbutton[shortcut]::after {
1061 content: attr(shortcut);
1066 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
1067 -moz-margin-start: 10px;
1070 /* This is a <label> but it should fit in with the menu font- and colorwise. */
1071 #PanelUI-characterEncodingView-autodetect-label {
1076 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
1077 /* margin-left: 4px;
1078 margin-right: 4px;*/
1081 panelview .toolbarbutton-1,
1082 .widget-overflow-list > .toolbarbutton-1:not(:first-child),
1083 .widget-overflow-list > .toolbaritem-combined-buttons:not(:first-child) {
1088 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1089 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
1090 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1091 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1092 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
1093 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1094 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1095 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
1096 background-color: var(--arrowpanel-dimmed);
1097 border-color: var(--panel-separator-color);
1100 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
1101 border-color: var(--panel-separator-color);
1104 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
1105 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
1106 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
1107 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
1108 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
1109 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
1110 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1111 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
1112 background-color: var(--arrowpanel-dimmed-further);
1113 border-color: var(--panel-separator-color);
1114 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
1117 .subviewbutton.panel-subview-footer {
1118 margin: 4px -4px -4px;
1119 background-color: var(--arrowpanel-dimmed);
1120 border-top: 1px solid var(--panel-separator-color);
1124 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
1125 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
1126 background-color: var(--arrowpanel-dimmed-further);
1129 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
1130 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
1131 background-color: var(--arrowpanel-dimmed-even-further);
1132 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
1135 #BMB_bookmarksPopup .subviewbutton {
1137 font-weight: normal;
1140 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
1144 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
1145 #BMB_bookmarksPopup .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
1146 -moz-appearance: none;
1151 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
1152 #BMB_bookmarksPopup arrowscrollbox {
1153 padding-bottom: 0px;
1156 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
1157 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
1161 / Popups with only one item don't have a footer /
1162 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1163 / These popups never have a footer /
1164 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1165 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1166 / And so they need some bottom padding: /
1167 padding-bottom: 4px;
1170 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
1171 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
1176 .PanelUI-subView menuseparator,
1177 .PanelUI-subView toolbarseparator,
1178 .cui-widget-panelview menuseparator {
1179 -moz-appearance: none;
1181 border-top: 1px solid var(--panel-separator-color);
1186 .PanelUI-subView menuseparator,
1187 .PanelUI-subView toolbarseparator {
1188 /* margin-inline-start: -5px;
1189 margin-inline-end: -4px;*/
1192 .PanelUI-subView menuseparator.small-separator,
1193 .PanelUI-subView toolbarseparator.small-separator {
1194 /* margin-left: 5px;
1195 margin-right: 5px;*/
1198 .cui-widget-panelview menuseparator.small-separator {
1199 /* margin-left: 10px;
1200 margin-right: 10px;*/
1203 .subviewbutton > .menu-accel-container {
1204 -moz-box-pack: start;
1205 margin-inline-start: 10px;
1206 margin-inline-end: auto;
1210 #PanelUI-remotetabs-tabslist > toolbarbutton,
1211 #PanelUI-historyItems > toolbarbutton {
1212 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1215 @media (min-resolution: 1.1dppx) {
1216 #PanelUI-remotetabs-tabslist > toolbarbutton,
1217 #PanelUI-historyItems > toolbarbutton {
1218 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
1222 #PanelUI-remotetabs-tabslist > toolbarbutton > .toolbarbutton-icon,
1223 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1224 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1225 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1230 toolbarbutton[panel-multiview-anchor="true"],
1231 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1233 background-color: #008484;
1236 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1240 #PanelUI-help[panel-multiview-anchor="true"] {
1241 background-image: none;
1244 #PanelUI-help[panel-multiview-anchor="true"]::after {
1249 width: var(--panel-ui-exit-subview-gutter-width);
1250 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1251 background-repeat: no-repeat;
1252 background-color: #008484;
1253 background-position: left 10px center, 0;
1256 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1257 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1258 background-position: right 10px center, 0;
1261 toolbarbutton[panel-multiview-anchor="true"] {
1262 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1263 background-position: right var(--panel-ui-menuPanelMultiviewBgPos) center;
1264 background-repeat: no-repeat;
1267 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1268 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1269 background-position: left var(--panel-ui-menuPanelMultiviewBgPos) center;
1272 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1273 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1277 #search-container[cui-areatype="menu-panel"],
1278 #wrapper-search-container[place="panel"] {
1279 width: var(--panel-ui-menuPanelWidth);
1282 #search-container[cui-areatype="menu-panel"] {
1287 toolbarpaletteitem[place="palette"] > #search-container {
1292 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1293 background-color: transparent;
1295 transition-property: background-color, border-color;
1296 transition-duration: 150ms;
1299 /* Make direct siblings overlap borders: */
1300 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1301 /* border-top-color: transparent !important; */
1304 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1305 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1306 /* margin-top: -1px; */
1309 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1314 min-width: var(--panel-ui-menuPanelButtonWidth);
1315 max-width: var(--panel-ui-menuPanelButtonWidth);
1316 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1317 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1318 height: calc(2.2em + 4px);
1320 -moz-box-orient: horizontal;
1323 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1324 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1325 /* reduce the width with 2px for this button to compensate for two separators
1327 min-width: var(--panel-ui-menuPanelButtonWidth-min2);
1328 max-width: var(--panel-ui-menuPanelButtonWidth-min2);
1331 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1335 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1339 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1340 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1341 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1342 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1343 border-top-right-radius: 0;
1344 border-bottom-right-radius: 0;
1347 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1348 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1349 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1350 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1351 border-top-left-radius: 0;
1352 border-bottom-left-radius: 0;
1355 .toolbaritem-combined-buttons > separator {
1356 -moz-appearance: none;
1358 -moz-box-align: stretch;
1361 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1365 /* background: var(--panel-separator-color);*/
1366 transition-property: margin;
1367 transition-duration: 10ms;
1368 transition-timing-function: ease;
1371 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1375 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1379 .cui-widget-panelview,
1380 #widget-overflow-scroller {
1385 #widget-overflow-scroller {
1388 margin-bottom: 10px;
1391 #widget-overflow-list {
1392 width: var(--panel-ui-menuPanelWidth);
1394 padding-right: 10px;
1397 toolbaritem[overflowedItem=true],
1398 toolbarbutton[overflowedItem=true] {
1400 max-width: var(--panel-ui-menuPanelWidth);
1402 background-repeat: no-repeat;
1403 background-position: 0 center;
1406 .widget-overflow-list .toolbarbutton-1,
1407 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1408 -moz-box-align: center;
1409 -moz-box-orient: horizontal;
1412 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1413 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1415 padding-inline-start: .5em;
1418 #widget-overflow-list > .toolbaritem-combined-buttons {
1422 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1427 margin-inline-end: -1px;
1430 .subviewbutton[checked="true"] {
1431 background-image: url("chrome://global/skin/menu/menu-check.gif");
1432 background-position: top 5px left 4px;
1433 background-repeat: no-repeat;
1436 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1437 background-position: top 5px right 4px;
1440 .subviewbutton[checked="true"]:hover {
1441 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1444 .subviewbutton > .menu-iconic-left {
1445 margin-inline-end: 3px;
1448 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1452 .panel-mainview[panelid=customizationui-widget-panel],
1453 #customizationui-widget-multiview > .panel-viewcontainer,
1454 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1455 #PanelUI-panicView > .panel-subview-body,
1456 #PanelUI-panicView {
1461 #PanelUI-panicView.cui-widget-panelview {
1465 #PanelUI-panic-timeframe {
1467 border-bottom: 1px solid var(--panel-separator-color);
1470 #panic-button-success-icon,
1471 #PanelUI-panic-timeframe-icon,
1472 #PanelUI-panic-timeframe-icon-small {
1473 background-color: transparent;
1474 margin-inline-end: 10px;
1477 #panic-button-success-icon,
1478 #PanelUI-panic-timeframe-icon {
1479 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1484 #PanelUI-panic-timeframe-icon-small {
1485 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1490 /* current attribute is only set when in use as a subview instead of a main view */
1491 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1495 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1499 #panic-button-success-header,
1500 #PanelUI-panic-header {
1501 -moz-box-align: center;
1505 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1509 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1510 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1511 transform: scaleX(-1);
1518 .subviewradio@buttonStateHover@ {
1521 .subviewradio[selected],
1522 .subviewradio[selected]:hover,
1523 .subviewradio@buttonStateActive@ {
1526 .subviewradio > .radio-check {
1529 .subviewradio > .radio-check[selected] {
1533 #PanelUI-panic-explanations {
1534 padding: 10px 10px 0;
1537 #PanelUI-panic-actionlist-main-label {
1542 .PanelUI-panic-actionlist {
1543 padding-inline-start: 20px;
1545 padding-bottom: 2px;
1546 background-size: 16px 16px;
1547 background-repeat: no-repeat;
1548 background-color: transparent;
1549 background-position: center left;
1552 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1553 background-position: center right;
1556 #PanelUI-panic-actionlist-cookies {
1557 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1560 #PanelUI-panic-actionlist-history {
1561 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1564 #PanelUI-panic-actionlist-windows {
1565 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1568 #PanelUI-panic-actionlist-newwindow {
1569 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1572 #PanelUI-panic-warning {
1579 #PanelUI-panic-view-button {
1580 background-color: #FF0000;
1584 #PanelUI-panic-view-button:hover {
1585 background-color: #FFCF00;
1588 #PanelUI-panic-view-button:hover:active {
1589 background-color: #FF9F00;
1592 #PanelUI-panic-view-button > .toolbarbutton-text {
1597 #panic-button-success-closebutton {
1600 #panic-button-success-closebutton:hover {
1603 #panic-button-success-closebutton:hover:active {
1606 /* === END panelUI.inc.css === */
1609 background-color: #000000;
1612 #PanelUI-contents #zoom-out-btn {
1614 padding-right: 12px;
1617 #PanelUI-contents #zoom-in-btn {
1619 padding-right: 12px;
1622 /* bookmark panel submenus */
1624 #BMB_bookmarksPopup menupopup[placespopup=true] {
1625 /* background: transparent;
1630 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1631 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1632 /* box-shadow: 0 0 4px rgba(0,0,0,0.2);
1633 background: var(--panel-arrowcontent-background);
1634 border: 1px solid var(--panel-arrowcontent-border-color);
1635 border-radius: 3.5px;
1639 #BMB_bookmarksPopup menupopup {
1640 /* padding-top: 2px;*/
1643 /* Add some space at the top because there are no headers: */
1644 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1645 /* padding-top: 4px;*/
1648 /* bookmark panel separator */
1649 #BMB_bookmarksPopup menuseparator {
1654 .subviewbutton > .menu-right,
1655 .subviewbutton > .menu-iconic-left {
1656 /* padding-top: 1px;
1658 margin-bottom: 2px;*/
1661 .subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon {
1662 /* This catches bookmarks, history items, and sync tabs items */
1667 /* Disabled empty item looks too small otherwise, because it has no icon. */
1668 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1669 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1670 menuitem[type="checkbox"].subviewbutton {
1671 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1672 * 2px for its border, see above */
1673 /* min-height: 22px;*/
1676 .subviewbutton > .toolbarbutton-text {
1677 /* padding-top: 3px;
1678 padding-bottom: 3px;*/
1681 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1682 -moz-appearance: none;
1684 margin-inline-start: 3px;
1687 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1689 padding-inline-start: 0;
1693 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1697 .subviewbutton > .toolbarbutton-text {
1698 padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */
1701 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1702 padding-inline-start: 2px;
1705 /* subviewbutton entries for social sidebars have images that come from external
1706 /* sources, and are not guaranteed to be the size we want, so force the size on
1708 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1713 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1717 menu.subviewbutton > .menu-right {
1718 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow");
1719 /* Reset the rect we inherit from the button: */
1720 -moz-image-region: auto;
1723 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1724 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1725 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1728 menu[disabled="true"].subviewbutton > .menu-right {
1729 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");
1732 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1733 transform: scaleX(-1);