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 panelUIOverlay.inc.css === */
8 --panel-ui-exit-subview-gutter-width: 38px;
11 #PanelUI-popup #PanelUI-contents:empty {
15 #PanelUI-popup #PanelUI-contents:empty::before {
17 background-image: url(chrome://browser/skin/customizableui/whimsy.png);
18 background-size: 64px 64px;
23 transition: transform 1s ease-out;
24 animation: whimsyMoveX 3.05s linear 0s infinite alternate,
25 whimsyMoveY 3.4s linear 0s infinite alternate;
28 #PanelUI-popup #PanelUI-contents:not(:hover):empty::before {
29 filter: grayscale(100%);
32 #PanelUI-popup #PanelUI-contents:active:empty::before {
33 animation: whimsyMoveX 3.05s linear 0s infinite alternate,
34 whimsyMoveY 3.4s linear 0s infinite alternate,
35 whimsyRotate 1s linear 0s infinite normal;
38 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before {
39 animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
40 whimsyMoveY 3.4s linear 0s infinite alternate;
43 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):active:empty::before {
44 animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
45 whimsyMoveY 3.4s linear 0s infinite alternate,
46 whimsyRotate 1s linear 0s infinite normal;
49 @media (min-resolution: 2dppx) {
50 #PanelUI-popup #PanelUI-contents:empty::before {
51 background-image: url("chrome://browser/skin/customizableui/whimsy@2x.png");
55 @keyframes whimsyMoveX {
56 /* These values are adjusted for the padding on the panel. */
57 from { margin-left: -9px; } to { margin-left: calc(100% - 55px); }
60 @keyframes whimsyMoveXRTL {
61 /* These values are adjusted for the padding on the panel. */
62 from { margin-right: -9px; } to { margin-right: calc(100% - 55px); }
65 @keyframes whimsyMoveY {
66 /* These values are adjusted for the padding and height of the panel. */
67 from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
70 @keyframes whimsyRotate {
71 to { transform: perspective(5000px) rotateY(360deg); }
74 #customization-panelHolder {
79 -moz-margin-start: 3px;
82 #PanelUI-button:-moz-locale-dir(rtl) {
85 #PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
89 background-size: contain;
93 #PanelUI-menu-button[badge-status="download-success"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
97 #PanelUI-menu-button[badge-status="update-succeeded"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
98 background: #008484 url(chrome://browser/skin/update-badge.svg) no-repeat center;
102 #PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
103 #PanelUI-menu-button[badge-status="update-failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
104 background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
108 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge,
109 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
114 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
115 background: #FFBF00 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
118 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
119 background: transparent url(chrome://browser/skin/warning.svg) no-repeat center;
122 #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive,
123 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
128 -moz-margin-start: var(--panel-ui-exit-subview-gutter-width);
131 .panel-viewstack[viewtype="main"] > .panel-subviews {
132 transform: translateX(22.35em);
135 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
136 transform: translateX(-22.35em);
139 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
143 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
147 .panel-subview-body {
153 #PanelUI-popup .panel-subview-body {
158 .panel-subview-header,
159 .subviewbutton.panel-subview-footer {
160 box-sizing: border-box;
161 /* min-height: 41px; */
165 .panel-subview-header {
167 background-color: #A09090;
169 font-variant: small-caps;
173 .panel-subview-footer {
174 border-top: 1px solid #A09090;
177 .cui-widget-panelview .panel-subview-header {
181 .cui-widget-panelview .subviewbutton.panel-subview-footer {
183 -moz-box-pack: center;
188 flex-direction: column;
192 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
195 #PanelUI-popup > arrowscrollbox > scrollbox {
199 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
208 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
209 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
210 /* line-height: 1.2;*/
214 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
215 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
219 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
220 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
222 clip: rect(-0.1em, auto, 2.6em, auto);
225 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
226 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
228 /* Need to override toolkit theming which sets margin: 0 !important; */
229 margin: 2px 0 0 !important;
232 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
237 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
238 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
239 -moz-margin-start: 0;
247 .panel-mainview:not([panelid="PanelUI-popup"]) {
251 /* Give WebExtension stand-alone panels extra width for Chrome compatibility */
252 .cui-widget-panel[viewId^=PanelUI-webext-] .panel-mainview {
256 .cui-widget-panel[viewId^=PanelUI-webext-] > .panel-arrowcontainer > .panel-arrowcontent {
260 .cui-widget-panelview[id^=PanelUI-webext-] {
261 border-radius: 3.5px;
264 panelview:not([mainview]) .toolbarbutton-text,
265 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
270 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
274 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
278 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
279 border-radius: 4px 4px 0 0;
282 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
283 border-radius: 0 0 4px 4px;
294 #PanelUI-contents-scroller {
301 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
307 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
308 .panelUI-grid .toolbarbutton-1,
309 .panel-customization-placeholder-child {
310 -moz-appearance: none;
311 -moz-box-orient: vertical;
312 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
313 height: calc(51px + 2.2em);
316 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
317 * should have a min-width set so they abide by the width set above (which they do outside of
318 * customize mode because they're in a flexed container) */
319 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
323 /* Help SDK buttons fit in. */
324 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
325 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
326 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
327 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
332 .customization-palette .toolbarbutton-1 {
333 -moz-appearance: none;
334 -moz-box-orient: vertical;
337 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
338 -moz-appearance: none;
339 -moz-box-orient: vertical;
340 width: calc(22.35em / 3 - 0.1px - 2px);
341 height: calc(49px + 2.2em);
345 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
346 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
347 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
350 .panel-customization-placeholder-child {
352 /* padding: 2px 6px;*/
355 .panelUI-grid .toolbarbutton-1[type="menu"] {
356 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
357 background-position: right 3px top 16px;
358 background-repeat: no-repeat;
361 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
362 background-position: left 3px top 16px;
365 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
369 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
370 -moz-box-align: center;
372 -moz-margin-start: -16px;
374 margin-bottom: 2.2em;
378 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
379 border-radius: 0 0 0 2px;
382 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
383 border-radius: 0 0 2px 0;
386 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
390 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
391 width: calc(22.35em / 3 - 0.1px);
392 margin: 0 !important;
395 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
396 -moz-box-align: center;
397 -moz-box-pack: center;
400 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
404 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
407 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
408 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
409 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
410 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
411 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
412 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
413 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
414 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
415 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
420 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
421 * which was affecting subview display. Because of this, we're hiding the iframe *only*
422 * when displaying a subview. The discerning user might notice this, but it's not nearly
423 * as bad as the brokenness.
424 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
427 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
431 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
435 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
436 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
437 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
438 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
439 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
440 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
441 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
442 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
443 .panel-customization-placeholder-child > .toolbarbutton-icon {
446 /* Explanation for the below formula (A / B - C)
448 Each button is 22.35em / 3 - 0.1px wide
450 Each button has two margins.
452 The button icon is 32 pixels wide.
453 The button has 12px of horizontal padding (6 on each side).
454 The button has 0px of horizontal border (0 on each side).
455 Total width of button's icon + button padding should therefore be 44px,
456 which means each horizontal margin should be the half the button's width - (44/2) px.
458 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
461 /* above we treat the container as the icon for the margins, that is so the
462 /* badge itself is positioned correctly. Here we make sure that the icon itself
463 /* has the minum size we want, but no padding/margin. */
464 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon,
465 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
474 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
478 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
482 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
483 -moz-margin-end: 2px;
486 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
487 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
493 #zoom-in-button > .toolbarbutton-text,
494 #zoom-out-button > .toolbarbutton-text,
495 #zoom-reset-button > .toolbarbutton-icon {
502 flex-direction: column;
503 /* background-color: hsla(210,4%,10%,.07);*/
506 /* min-height: 4em;*/
507 border-bottom-right-radius: 4px;
508 border-bottom-left-radius: 4px;
511 #main-window[customizing] #PanelUI-footer-fxa > toolbarseparator {
515 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
516 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
517 #PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
521 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after {
522 content: url("chrome://browser/skin/warning.svg");
531 #PanelUI-update-status[update-status]::after {
535 margin-right: 16.5px;
537 background-size: contain;
541 #PanelUI-update-status[update-status="succeeded"]::after {
542 background-image: url(chrome://browser/skin/update-badge.svg);
543 background-color: #008484;
546 #PanelUI-update-status[update-status="failed"]::after {
547 background-image: url(chrome://browser/skin/update-badge-failed.svg);
548 background-color: #FF0000;
551 #PanelUI-fxa-status {
557 #PanelUI-footer-inner,
558 #PanelUI-footer-fxa:not([hidden]) {
560 border-top: 1px solid #9C9CFF;
563 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
564 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
568 #PanelUI-footer-inner > toolbarseparator,
569 #PanelUI-footer-fxa > toolbarseparator {
571 border-left: 1px solid #9C9CFF;
575 #PanelUI-footer-inner:hover > toolbarseparator,
576 #PanelUI-footer-fxa:hover > toolbarseparator {
580 #PanelUI-update-status,
588 box-sizing: border-box;
593 transition: background-color;
594 -moz-box-orient: horizontal;
597 #PanelUI-update-status {
598 border-top: 1px solid #9C9CFF;
599 border-bottom: 1px solid transparent;
603 #PanelUI-update-status > .toolbarbutton-text {
604 width: 0; /* Fancy cropping solution for flexbox. */
607 #PanelUI-help[panel-multiview-anchor="true"] {
608 -moz-image-region: rect(0, 32px, 16px, 16px);
616 #PanelUI-update-status > .toolbarbutton-text,
617 #PanelUI-fxa-label > .toolbarbutton-text,
618 #PanelUI-customize > .toolbarbutton-text {
624 #PanelUI-help > .toolbarbutton-text,
625 #PanelUI-quit > .toolbarbutton-text,
626 #PanelUI-fxa-avatar > .toolbarbutton-text {
630 #PanelUI-update-status > .toolbarbutton-icon,
631 #PanelUI-fxa-label > .toolbarbutton-icon,
632 #PanelUI-fxa-icon > .toolbarbutton-icon,
633 #PanelUI-customize > .toolbarbutton-icon,
634 #PanelUI-help > .toolbarbutton-icon,
635 #PanelUI-quit > .toolbarbutton-icon {
640 -moz-padding-start: 15px;
641 -moz-padding-end: 15px;
647 -moz-padding-start: 15px;
648 -moz-border-start-style: none;
651 #PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
652 #PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
653 -moz-padding-start: 0px;
656 #PanelUI-update-status {
657 width: calc(22.35em + 30px);
658 -moz-padding-start: 15px;
659 -moz-border-start-style: none;
662 #PanelUI-update-status {
663 list-style-image: url(chrome://branding/content/icon16.png);
668 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
671 #PanelUI-remotetabs {
672 --panel-ui-sync-illustration-height: 157.5px;
675 .PanelUI-remotetabs-instruction-title,
676 .PanelUI-remotetabs-instruction-label,
677 #PanelUI-remotetabs-mobile-promo {
678 /* If you change the margin here, the min-height of the synced tabs panel
679 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
680 need adjusting (see bug 1248506) */
688 .PanelUI-remotetabs-instruction-title {
692 /* The boxes with "instructions" get extra top and bottom padding for space
693 around the illustration and buttons */
694 .PanelUI-remotetabs-instruction-box {
695 /* If you change the padding here, the min-height of the synced tabs panel
696 (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may
697 need adjusting (see bug 1248506) */
698 padding-bottom: 30px;
702 .PanelUI-remotetabs-prefs-button {
704 -moz-appearance: none;
705 background-color: #0096dd;
706 / !important for the color as an OSX specific rule when a lightweight theme
707 is used for buttons in the toolbox overrides. See bug 1238531 for details /
708 color: white !important;
710 / If you change the margin or padding below, the min-height of the synced tabs
711 panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
712 etc) may need adjusting (see bug 1248506) /
721 .PanelUI-remotetabs-prefs-button:hover,
722 .PanelUI-remotetabs-prefs-button:hover:active {
723 /* background-color: #018acb; */
726 .remotetabs-promo-link {
730 .PanelUI-remotetabs-notabsforclient-label {
732 /* This margin is to line this label up with the labels in toolbarbuttons. */
736 .fxaSyncIllustration {
737 height: var(--panel-ui-sync-illustration-height);
738 list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg);
741 .PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
742 /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */
743 text-align: center !important;
747 #PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
751 /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
752 the panel is anchored to a toolbar button.
754 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
755 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
756 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
757 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
758 min-height: calc(var(--panel-ui-sync-illustration-height) +
759 20px + /* margin of .PanelUI-remotetabs-prefs-button */
760 16px + /* padding of .PanelUI-remotetabs-prefs-button */
761 30px + /* margin of .PanelUI-remotetabs-instruction-label */
762 30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */
766 #PanelUI-remotetabs-tabslist > label[itemtype="client"] {
770 /* Collapse the non-active vboxes in the remotetabs deck to use only the
771 height the active box needs */
772 #PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
773 #PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
774 #PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
775 visibility: collapse;
778 #PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
782 #PanelUI-fxa-icon[syncstatus="active"] {
783 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
786 #PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
787 #PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label {
788 list-style-image: url(chrome://browser/skin/warning.svg);
792 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
795 #customization-panelHolder #PanelUI-customize {
796 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
800 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
804 -moz-border-end-style: none;
805 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
813 -moz-image-region: rect(0, 16px, 16px, 0);
816 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
817 #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
821 #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
825 #PanelUI-fxa-avatar[disabled],
826 #PanelUI-fxa-icon[disabled] {
830 #PanelUI-fxa-status[disabled] {
831 pointer-events: none;
834 #PanelUI-fxa-avatar {
838 background-repeat: no-repeat;
839 background-position: 0 0;
840 background-size: contain;
848 #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
849 list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg);
852 #PanelUI-customize:hover,
853 #PanelUI-help:not([disabled]):hover,
854 #PanelUI-quit:not([disabled]):hover,
855 #PanelUI-customize:hover:active,
856 #PanelUI-help:not([disabled]):hover:active,
857 #PanelUI-quit:not([disabled]):hover:active {
858 -moz-image-region: rect(0, 32px, 16px, 16px);
861 #PanelUI-help[disabled],
862 #PanelUI-quit[disabled] {
863 -moz-image-region: rect(0, 48px, 16px, 32px);
866 #PanelUI-fxa-icon:not([disabled]):hover,
867 #PanelUI-help:not([disabled]):hover,
868 #PanelUI-customize:hover,
869 #PanelUI-quit:not([disabled]):hover {
872 #PanelUI-fxa-icon:not([disabled]):hover:active,
873 #PanelUI-help:not([disabled]):hover:active,
874 #PanelUI-customize:hover:active,
875 #PanelUI-quit:not([disabled]):hover:active {
878 #PanelUI-fxa-status:not([disabled]):hover,
879 #PanelUI-fxa-status:not([disabled]):hover:active,
880 #PanelUI-fxa-icon:not([disabled]):hover,
881 #PanelUI-fxa-icon:not([disabled]):hover:active {
884 #PanelUI-footer-fxa[fxastatus="error"] {
885 background-color: #FF0000;
889 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
890 background-color: #FFCF00;
893 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
894 background-color: #FF9F00;
897 #PanelUI-update-status {
901 #PanelUI-update-status[update-status="succeeded"] {
902 background-color: #008484;
906 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
907 background-color: #FFCF00;
910 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
911 background-color: #FF9F00;
914 #PanelUI-update-status[update-status="failed"] {
915 background-color: #FF0000;
919 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
920 background-color: #FFCF00;
923 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
924 background-color: #FF9F00;
927 #PanelUI-quit:not([disabled]):hover {
928 background-color: #FF0000;
931 #PanelUI-quit:not([disabled]):hover:active {
932 background-color: #FF9F00;
935 #customization-panelHolder #PanelUI-customize {
937 background-color: #008484;
942 #customization-panelHolder #PanelUI-customize + toolbarseparator {
946 #customization-panelHolder #PanelUI-customize:hover,
947 #customization-panelHolder #PanelUI-customize:hover:active {
948 background-color: #FFCF00;
952 #customization-palette .toolbarbutton-multiline-text,
953 #customization-palette .toolbarbutton-text {
957 panelview .toolbarbutton-1,
959 .widget-overflow-list .toolbarbutton-1,
960 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
961 .share-provider-button,
962 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
964 background-color: hsla(210,4%,10%,0);
967 border-color: hsla(210,4%,10%,0);*/
970 panelview .toolbarbutton-1,
972 .widget-overflow-list .toolbarbutton-1,
973 .share-provider-button,
974 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
978 .subviewbutton.panel-subview-footer {
979 /* border-radius: 0; */
983 .subviewbutton.panel-subview-footer > .menu-text {
984 -moz-margin-start: 0px !important;
985 -moz-padding-start: 6px;
986 -moz-padding-end: 6px;
991 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
995 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
1000 .subviewbutton.panel-subview-footer > .menu-accel-container {
1001 -moz-padding-start: 6px;
1004 .subviewbutton:not(.panel-subview-footer) {
1008 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
1009 /* Bookmark items need a more specific selector. */
1010 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
1011 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
1015 .PanelUI-subView .subviewbutton[shortcut]::after {
1016 content: attr(shortcut);
1021 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
1022 -moz-margin-start: 10px;
1025 /* This is a <label> but it should fit in with the menu font- and colorwise. */
1026 #PanelUI-characterEncodingView-autodetect-label {
1031 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
1032 /* margin-left: 4px;
1033 margin-right: 4px;*/
1036 panelview .toolbarbutton-1,
1037 .widget-overflow-list .toolbarbutton-1:not(:first-child),
1038 .widget-overflow-list .toolbaritem-combined-buttons:not(:first-child) {
1043 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1044 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
1045 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1046 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
1047 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
1048 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
1049 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1050 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
1051 background-color: hsla(210,4%,10%,.08);
1052 border-color: hsla(210,4%,10%,.11);
1055 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
1056 border-color: hsla(210,4%,10%,.11);
1059 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
1060 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
1061 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
1062 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
1063 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
1064 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
1065 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1066 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
1067 background-color: hsla(210,4%,10%,.12);
1068 border-color: hsla(210,4%,10%,.14);
1069 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
1072 .subviewbutton.panel-subview-footer {
1073 margin: 4px -4px -4px;
1074 background-color: hsla(210,4%,10%,.07);
1075 border-top: 1px solid hsla(210,4%,10%,.12);
1077 color: hsl(0,0%,25%)
1080 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
1081 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
1082 background-color: hsla(210,4%,10%,.1);
1083 border-top: 1px solid hsla(210,4%,10%,.12);
1086 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
1087 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
1088 background-color: hsla(210,4%,10%,.15);
1089 border-top: 1px solid hsla(210,4%,10%,.12);
1090 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
1093 #BMB_bookmarksPopup .subviewbutton {
1095 font-weight: normal;
1098 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
1102 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
1103 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
1104 -moz-appearance: none;
1109 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
1110 #BMB_bookmarksPopup arrowscrollbox {
1111 padding-bottom: 0px;
1114 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
1115 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
1119 / Popups with only one item don't have a footer /
1120 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1121 / These popups never have a footer /
1122 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1123 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1124 / And so they need some bottom padding: /
1125 padding-bottom: 4px;
1128 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
1129 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
1134 .PanelUI-subView menuseparator,
1135 .PanelUI-subView toolbarseparator,
1136 .cui-widget-panelview menuseparator {
1137 -moz-appearance: none;
1139 border-top: 1px solid #9C9CFF;
1144 .PanelUI-subView menuseparator,
1145 .PanelUI-subView toolbarseparator {
1146 /* -moz-margin-start: -5px;
1147 -moz-margin-end: -4px;*/
1150 .PanelUI-subView menuseparator.small-separator,
1151 .PanelUI-subView toolbarseparator.small-separator {
1152 /* margin-left: 5px;
1153 margin-right: 5px;*/
1156 .cui-widget-panelview menuseparator.small-separator {
1157 /* margin-left: 10px;
1158 margin-right: 10px;*/
1161 .subviewbutton > .menu-accel-container {
1162 -moz-box-pack: start;
1163 -moz-margin-start: 10px;
1164 -moz-margin-end: auto;
1168 #PanelUI-remotetabs-tabslist > toolbarbutton,
1169 #PanelUI-historyItems > toolbarbutton {
1170 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1173 @media (min-resolution: 1.1dppx) {
1174 #PanelUI-remotetabs-tabslist > toolbarbutton,
1175 #PanelUI-historyItems > toolbarbutton {
1176 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
1180 #PanelUI-remotetabs-tabslist > toolbarbutton > .toolbarbutton-icon,
1181 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1182 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1183 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1188 toolbarbutton[panel-multiview-anchor="true"],
1189 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1191 background-color: #008484;
1194 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1198 #PanelUI-help[panel-multiview-anchor="true"] {
1199 background-image: none;
1202 #PanelUI-help[panel-multiview-anchor="true"]::after {
1207 width: var(--panel-ui-exit-subview-gutter-width);
1208 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1209 background-repeat: no-repeat;
1210 background-color: #008484;
1211 background-position: left 10px center, 0;
1214 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1215 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1216 background-position: right 10px center, 0;
1219 toolbarbutton[panel-multiview-anchor="true"] {
1220 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1221 background-position: right calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
1222 background-repeat: no-repeat;
1225 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1226 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1227 background-position: left calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
1230 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1231 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1235 #search-container[cui-areatype="menu-panel"],
1236 #wrapper-search-container[place="panel"] {
1240 #search-container[cui-areatype="menu-panel"] {
1245 toolbarpaletteitem[place="palette"] > #search-container {
1250 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1252 transition-property: background-color, border-color;
1253 transition-duration: 150ms;
1256 /* Make direct siblings overlap borders: */
1257 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1258 /* border-top-color: transparent !important; */
1261 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1262 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1263 /* margin-top: -1px; */
1266 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1271 min-width: calc(22.35em / 3 - 0.1px);
1272 max-width: calc(22.35em / 3 - 0.1px);
1273 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1274 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1275 height: calc(2.2em + 4px);
1277 -moz-box-orient: horizontal;
1280 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1281 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1282 /* reduce the width with 2px for this button to compensate for two separators
1284 min-width: calc(22.35em / 3 - 0.1px - 2px);
1285 max-width: calc(22.35em / 3 - 0.1px - 2px);
1288 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1292 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1296 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1297 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1298 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1299 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1300 border-top-right-radius: 0;
1301 border-bottom-right-radius: 0;
1304 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1305 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1306 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1307 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1308 border-top-left-radius: 0;
1309 border-bottom-left-radius: 0;
1312 .toolbaritem-combined-buttons > separator {
1313 -moz-appearance: none;
1315 -moz-box-align: stretch;
1318 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1322 /* background: hsla(210,4%,10%,.15);*/
1323 transition-property: margin;
1324 transition-duration: 10ms;
1325 transition-timing-function: ease;
1328 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1332 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1336 .cui-widget-panelview,
1337 #widget-overflow-scroller {
1342 #widget-overflow-scroller {
1345 margin-bottom: 10px;
1348 #widget-overflow-list {
1351 padding-right: 10px;
1354 toolbaritem[overflowedItem=true],
1355 toolbarbutton[overflowedItem=true] {
1359 background-repeat: no-repeat;
1360 background-position: 0 center;
1363 .widget-overflow-list .toolbarbutton-1,
1364 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1365 -moz-box-align: center;
1366 -moz-box-orient: horizontal;
1369 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1370 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1372 -moz-padding-start: .5em;
1375 #widget-overflow-list > .toolbaritem-combined-buttons {
1379 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1384 -moz-margin-end: -1px;
1387 .subviewbutton[checked="true"] {
1388 background-image: url("chrome://global/skin/menu/menu-check.gif");
1389 background-position: top 5px left 4px;
1390 background-repeat: no-repeat;
1393 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1394 background-position: top 5px right 4px;
1397 .subviewbutton[checked="true"]:hover {
1398 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1401 .subbiewbutton > .menu-iconic-left {
1402 -moz-margin-end: 3px;
1405 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1409 .panel-mainview[panelid=customizationui-widget-panel],
1410 #customizationui-widget-multiview > .panel-viewcontainer,
1411 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1412 #PanelUI-panicView > .panel-subview-body,
1413 #PanelUI-panicView {
1418 #PanelUI-panicView.cui-widget-panelview {
1422 #PanelUI-panic-timeframe {
1424 border-bottom: 1px solid #A09090;
1427 #panic-button-success-icon,
1428 #PanelUI-panic-timeframe-icon,
1429 #PanelUI-panic-timeframe-icon-small {
1430 background-color: transparent;
1431 -moz-margin-end: 10px;
1434 #panic-button-success-icon,
1435 #PanelUI-panic-timeframe-icon {
1436 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1441 #PanelUI-panic-timeframe-icon-small {
1442 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1447 /* current attribute is only set when in use as a subview instead of a main view */
1448 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1452 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1456 #panic-button-success-header,
1457 #PanelUI-panic-header {
1458 -moz-box-align: center;
1462 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1466 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1467 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1468 transform: scaleX(-1);
1475 .subviewradio@buttonStateHover@ {
1478 .subviewradio[selected],
1479 .subviewradio[selected]:hover,
1480 .subviewradio@buttonStateActive@ {
1483 .subviewradio > .radio-check {
1486 .subviewradio > .radio-check[selected] {
1490 #PanelUI-panic-explanations {
1491 padding: 10px 10px 0;
1494 #PanelUI-panic-actionlist-main-label {
1499 .PanelUI-panic-actionlist {
1500 -moz-padding-start: 20px;
1502 padding-bottom: 2px;
1503 background-size: 16px 16px;
1504 background-repeat: no-repeat;
1505 background-color: transparent;
1506 background-position: center left;
1509 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1510 background-position: center right;
1513 #PanelUI-panic-actionlist-cookies {
1514 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1517 #PanelUI-panic-actionlist-history {
1518 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1521 #PanelUI-panic-actionlist-windows {
1522 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1525 #PanelUI-panic-actionlist-newwindow {
1526 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1529 #PanelUI-panic-warning {
1536 #PanelUI-panic-view-button {
1537 background-color: #FF0000;
1541 #PanelUI-panic-view-button:hover {
1542 background-color: #FFCF00;
1545 #PanelUI-panic-view-button:hover:active {
1546 background-color: #FF9F00;
1549 #PanelUI-panic-view-button > .toolbarbutton-text {
1554 #panic-button-success-closebutton {
1557 #panic-button-success-closebutton:hover {
1560 #panic-button-success-closebutton:hover:active {
1563 /* === END panelUIOverlay.inc.css === */
1566 background-color: #000000;
1569 #PanelUI-contents #zoom-out-btn {
1571 padding-right: 12px;
1574 #PanelUI-contents #zoom-in-btn {
1576 padding-right: 12px;
1579 /* bookmark panel submenus */
1581 #BMB_bookmarksPopup menupopup[placespopup=true] {
1582 /* background: transparent;
1587 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1588 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1589 /* background: var(--panel-arrowcontent-background);
1590 border: var(--panel-arrowcontent-border);
1591 border-radius: 3.5px;
1595 #BMB_bookmarksPopup menupopup {
1596 /* padding-top: 2px;*/
1599 /* Add some space at the top because there are no headers: */
1600 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1601 /* padding-top: 4px;*/
1604 /* bookmark panel separator */
1605 #BMB_bookmarksPopup menuseparator {
1610 .subviewbutton > .menu-right,
1611 .subviewbutton > .menu-iconic-left {
1612 /* padding-top: 1px;
1614 margin-bottom: 2px;*/
1617 .subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon {
1618 /* This catches bookmarks, history items, and sync tabs items */
1623 /* Disabled empty item looks too small otherwise, because it has no icon. */
1624 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1625 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1626 menuitem[type="checkbox"].subviewbutton {
1627 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1628 * 2px for its border, see above */
1629 /* min-height: 22px;*/
1632 .subviewbutton > .toolbarbutton-text {
1633 /* padding-top: 3px;
1634 padding-bottom: 3px;*/
1637 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1638 -moz-appearance: none;
1640 -moz-margin-start: 3px;
1643 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1645 -moz-padding-start: 0;
1649 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1650 /* transform: scaleX(-1); */
1653 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1657 .subviewbutton > .toolbarbutton-text {
1658 padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */
1661 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1662 padding-inline-start: 2px;
1665 /* subviewbutton entries for social sidebars have images that come from external
1666 /* sources, and are not guaranteed to be the size we want, so force the size on
1668 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1673 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1677 menu.subviewbutton > .menu-right {
1678 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow");
1679 /* Reset the rect we inherit from the button: */
1680 -moz-image-region: auto;
1682 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1683 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1684 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1686 menu[disabled="true"].subviewbutton > .menu-right {
1687 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");