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="update-succeeded"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
94 background: #008484 url(chrome://browser/skin/update-badge.svg) no-repeat center;
98 #PanelUI-menu-button[badge-status="update-failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
99 background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
103 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
104 background: transparent url(chrome://browser/skin/warning.svg) no-repeat center;
109 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
114 -moz-margin-start: var(--panel-ui-exit-subview-gutter-width);
117 .panel-viewstack[viewtype="main"] > .panel-subviews {
118 transform: translateX(22.35em);
121 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
122 transform: translateX(-22.35em);
125 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
129 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
133 .panel-subview-body {
139 #PanelUI-popup .panel-subview-body {
144 .panel-subview-header,
145 .subviewbutton.panel-subview-footer {
146 box-sizing: border-box;
147 /* min-height: 41px; */
151 .panel-subview-header {
153 background-color: #A09090;
155 font-variant: small-caps;
159 .panel-subview-footer {
160 border-top: 1px solid #A09090;
163 .cui-widget-panelview .panel-subview-header {
167 .cui-widget-panelview .subviewbutton.panel-subview-footer {
169 -moz-box-pack: center;
174 flex-direction: column;
178 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
181 #PanelUI-popup > arrowscrollbox > scrollbox {
185 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
194 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
195 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
196 /* line-height: 1.1;*/
200 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
201 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
205 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
206 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
208 clip: rect(auto, auto, 2.3em, auto);
211 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
212 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
214 /* Need to override toolkit theming which sets margin: 0 !important; */
215 margin: 2px 0 0 !important;
218 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
223 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
224 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
225 -moz-margin-start: 0;
233 .panel-mainview:not([panelid="PanelUI-popup"]) {
237 panelview:not([mainview]) .toolbarbutton-text,
238 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
243 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
247 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
251 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
252 border-radius: 4px 4px 0 0;
255 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
256 border-radius: 0 0 4px 4px;
267 #PanelUI-contents-scroller {
274 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
280 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
281 .panelUI-grid .toolbarbutton-1,
282 .panel-customization-placeholder-child {
283 -moz-appearance: none;
284 -moz-box-orient: vertical;
285 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
286 height: calc(51px + 2.2em);
289 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
290 * should have a min-width set so they abide by the width set above (which they do outside of
291 * customize mode because they're in a flexed container) */
292 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
296 /* Help SDK buttons fit in. */
297 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
298 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
299 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
300 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
305 .customization-palette .toolbarbutton-1 {
306 -moz-appearance: none;
307 -moz-box-orient: vertical;
310 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
311 -moz-appearance: none;
312 -moz-box-orient: vertical;
313 width: calc(22.35em / 3 - 0.1px - 2px);
314 height: calc(49px + 2.2em);
318 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
319 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
320 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
323 .panel-customization-placeholder-child {
325 /* padding: 2px 6px;*/
328 .panelUI-grid .toolbarbutton-1[type="menu"] {
329 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
330 background-position: right 3px top 16px;
331 background-repeat: no-repeat;
334 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
335 background-position: left 3px top 16px;
338 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
342 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
343 -moz-box-align: center;
345 -moz-margin-start: -16px;
347 margin-bottom: 2.2em;
351 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
352 border-radius: 0 0 0 2px;
355 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
356 border-radius: 0 0 2px 0;
359 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
363 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
364 width: calc(22.35em / 3 - 0.1px);
365 margin: 0 !important;
368 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
369 -moz-box-align: center;
370 -moz-box-pack: center;
373 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
377 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
380 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
381 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
382 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
383 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
384 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
385 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
386 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
387 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
388 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
393 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
394 * which was affecting subview display. Because of this, we're hiding the iframe *only*
395 * when displaying a subview. The discerning user might notice this, but it's not nearly
396 * as bad as the brokenness.
397 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
400 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
404 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
408 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
409 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
410 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
411 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
412 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
413 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
414 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
415 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
416 .panel-customization-placeholder-child > .toolbarbutton-icon {
419 /* Explanation for the below formula (A / B - C)
421 Each button is 22.35em / 3 - 0.1px wide
423 Each button has two margins.
425 The button icon is 32 pixels wide.
426 The button has 12px of horizontal padding (6 on each side).
427 The button has 0px of horizontal border (0 on each side).
428 Total width of button's icon + button padding should therefore be 44px,
429 which means each horizontal margin should be the half the button's width - (44/2) px.
431 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
434 /* above we treat the container as the icon for the margins, that is so the
435 /* badge itself is positioned correctly. Here we make sure that the icon itself
436 /* has the minum size we want, but no padding/margin. */
437 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon,
438 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
447 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
451 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
455 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
456 -moz-margin-end: 2px;
459 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
460 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
466 #zoom-in-button > .toolbarbutton-text,
467 #zoom-out-button > .toolbarbutton-text,
468 #zoom-reset-button > .toolbarbutton-icon {
475 flex-direction: column;
476 /* background-color: hsla(210,4%,10%,.07);*/
479 /* min-height: 4em;*/
480 border-bottom-right-radius: 4px;
481 border-bottom-left-radius: 4px;
484 #main-window[customizing] #PanelUI-footer-fxa > toolbarseparator {
488 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
489 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
490 #PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
494 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after {
495 content: url("chrome://browser/skin/warning.svg");
504 #PanelUI-update-status[update-status]::after {
508 margin-right: 16.5px;
510 background-size: contain;
514 #PanelUI-update-status[update-status="succeeded"]::after {
515 background-image: url(chrome://browser/skin/update-badge.svg);
516 background-color: #008484;
519 #PanelUI-update-status[update-status="failed"]::after {
520 background-image: url(chrome://browser/skin/update-badge-failed.svg);
521 background-color: #FF0000;
524 #PanelUI-fxa-status {
530 #PanelUI-footer-inner,
531 #PanelUI-footer-fxa:not([hidden]) {
533 border-top: 1px solid #9C9CFF;
536 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
537 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
541 #PanelUI-footer-inner > toolbarseparator,
542 #PanelUI-footer-fxa > toolbarseparator {
544 border-left: 1px solid #9C9CFF;
548 #PanelUI-footer-inner:hover > toolbarseparator,
549 #PanelUI-footer-fxa:hover > toolbarseparator {
553 #PanelUI-update-status,
561 box-sizing: border-box;
566 transition: background-color;
567 -moz-box-orient: horizontal;
570 #PanelUI-update-status {
571 border-top: 1px solid #9C9CFF;
572 border-bottom: 1px solid transparent;
576 #PanelUI-update-status > .toolbarbutton-text {
577 width: 0; /* Fancy cropping solution for flexbox. */
580 #PanelUI-help[panel-multiview-anchor="true"] {
581 -moz-image-region: rect(0, 32px, 16px, 16px);
589 #PanelUI-update-status > .toolbarbutton-text,
590 #PanelUI-fxa-label > .toolbarbutton-text,
591 #PanelUI-customize > .toolbarbutton-text {
597 #PanelUI-help > .toolbarbutton-text,
598 #PanelUI-quit > .toolbarbutton-text,
599 #PanelUI-fxa-avatar > .toolbarbutton-text {
603 #PanelUI-update-status > .toolbarbutton-icon,
604 #PanelUI-fxa-label > .toolbarbutton-icon,
605 #PanelUI-fxa-icon > .toolbarbutton-icon,
606 #PanelUI-customize > .toolbarbutton-icon,
607 #PanelUI-help > .toolbarbutton-icon,
608 #PanelUI-quit > .toolbarbutton-icon {
613 -moz-padding-start: 15px;
614 -moz-padding-end: 15px;
620 -moz-padding-start: 15px;
621 -moz-border-start-style: none;
624 #PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
625 #PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
626 -moz-padding-start: 0px;
629 #PanelUI-update-status {
630 width: calc(22.35em + 30px);
631 -moz-padding-start: 15px;
632 -moz-border-start-style: none;
635 #PanelUI-update-status {
636 list-style-image: url(chrome://branding/content/icon16.png);
641 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
644 PanelUI-remotetabs-instruction-label,
646 #PanelUI-remotetabs-mobile-promo {
654 /* The boxes with "instructions" get extra padding for space around the
655 illustration and buttons */
656 .PanelUI-remotetabs-instruction-box {
657 padding: 30px 15px 15px 15px;
660 .PanelUI-remotetabs-prefs-button {
662 -moz-appearance: none;
663 background-color: #0096dd;
674 .PanelUI-remotetabs-prefs-button:hover,
675 .PanelUI-remotetabs-prefs-button:hover:active {
676 /* background-color: #018acb; */
679 .remotetabs-promo-link {
683 .PanelUI-remotetabs-notabsforclient-label {
685 /* This margin is to line this label up with the labels in toolbarbuttons. */
689 .fxaSyncIllustration {
691 list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg);
694 .PanelUI-remotetabs-prefs-button > .toolbarbutton-text {
695 /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */
696 text-align: center !important;
700 #PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
704 /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
705 the panel is anchored to a toolbar button.
707 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync,
708 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync,
709 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane,
710 #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane {
714 #PanelUI-remotetabs-tabslist > label[itemtype="client"] {
718 /* Collapse the non-active vboxes in the remotetabs deck to use only the
719 height the active box needs */
720 #PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane,
721 #PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
722 #PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
723 visibility: collapse;
726 #PanelUI-fxa-icon[syncstatus="active"] {
727 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
730 #PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
731 #PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label {
732 list-style-image: url(chrome://browser/skin/warning.svg);
736 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
739 #customization-panelHolder #PanelUI-customize {
740 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
744 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
748 -moz-border-end-style: none;
749 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
757 -moz-image-region: rect(0, 16px, 16px, 0);
760 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
761 #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
765 #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
769 #PanelUI-fxa-avatar[disabled],
770 #PanelUI-fxa-icon[disabled] {
774 #PanelUI-fxa-status[disabled] {
775 pointer-events: none;
778 #PanelUI-fxa-avatar {
782 background-repeat: no-repeat;
783 background-position: 0 0;
784 background-size: contain;
792 #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
793 list-style-image: url(chrome://browser/skin/fxa/default-profile-image.svg);
796 #PanelUI-customize:hover,
797 #PanelUI-help:not([disabled]):hover,
798 #PanelUI-quit:not([disabled]):hover,
799 #PanelUI-customize:hover:active,
800 #PanelUI-help:not([disabled]):hover:active,
801 #PanelUI-quit:not([disabled]):hover:active {
802 -moz-image-region: rect(0, 32px, 16px, 16px);
805 #PanelUI-help[disabled],
806 #PanelUI-quit[disabled] {
807 -moz-image-region: rect(0, 48px, 16px, 32px);
810 #PanelUI-fxa-icon:not([disabled]):hover,
811 #PanelUI-help:not([disabled]):hover,
812 #PanelUI-customize:hover,
813 #PanelUI-quit:not([disabled]):hover {
816 #PanelUI-fxa-icon:not([disabled]):hover:active,
817 #PanelUI-help:not([disabled]):hover:active,
818 #PanelUI-customize:hover:active,
819 #PanelUI-quit:not([disabled]):hover:active {
822 #PanelUI-fxa-status:not([disabled]):hover,
823 #PanelUI-fxa-status:not([disabled]):hover:active,
824 #PanelUI-fxa-icon:not([disabled]):hover,
825 #PanelUI-fxa-icon:not([disabled]):hover:active {
828 #PanelUI-footer-fxa[fxastatus="error"] {
829 background-color: #FF0000;
833 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
834 background-color: #FFCF00;
837 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
838 background-color: #FF9F00;
841 #PanelUI-update-status {
845 #PanelUI-update-status[update-status="succeeded"] {
846 background-color: #008484;
850 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
851 background-color: #FFCF00;
854 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
855 background-color: #FF9F00;
858 #PanelUI-update-status[update-status="failed"] {
859 background-color: #FF0000;
863 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
864 background-color: #FFCF00;
867 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
868 background-color: #FF9F00;
871 #PanelUI-quit:not([disabled]):hover {
872 background-color: #FF0000;
875 #PanelUI-quit:not([disabled]):hover:active {
876 background-color: #FF9F00;
879 #customization-panelHolder #PanelUI-customize {
881 background-color: #008484;
886 #customization-panelHolder #PanelUI-customize + toolbarseparator {
890 #customization-panelHolder #PanelUI-customize:hover,
891 #customization-panelHolder #PanelUI-customize:hover:active {
892 background-color: #FFCF00;
896 #customization-palette .toolbarbutton-multiline-text,
897 #customization-palette .toolbarbutton-text {
901 panelview .toolbarbutton-1,
903 .widget-overflow-list .toolbarbutton-1,
904 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
905 .share-provider-button,
906 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
908 background-color: hsla(210,4%,10%,0);
911 border-color: hsla(210,4%,10%,0);*/
914 panelview .toolbarbutton-1,
916 .widget-overflow-list .toolbarbutton-1,
917 .share-provider-button,
918 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
922 .subviewbutton.panel-subview-footer {
923 /* border-radius: 0; */
927 .subviewbutton.panel-subview-footer > .menu-text {
928 -moz-margin-start: 0px !important;
929 -moz-padding-start: 6px;
930 -moz-padding-end: 6px;
935 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
939 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
944 .subviewbutton.panel-subview-footer > .menu-accel-container {
945 -moz-padding-start: 6px;
948 .subviewbutton:not(.panel-subview-footer) {
952 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
953 /* Bookmark items need a more specific selector. */
954 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
955 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
959 .PanelUI-subView .subviewbutton[shortcut]::after {
960 content: attr(shortcut);
965 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
966 -moz-margin-start: 10px;
969 /* This is a <label> but it should fit in with the menu font- and colorwise. */
970 #PanelUI-characterEncodingView-autodetect-label {
975 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
980 panelview .toolbarbutton-1,
981 .widget-overflow-list .toolbarbutton-1 {
986 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
987 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
988 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
989 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
990 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
991 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
992 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
993 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
994 background-color: hsla(210,4%,10%,.08);
995 border-color: hsla(210,4%,10%,.11);
998 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
999 border-color: hsla(210,4%,10%,.11);
1002 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
1003 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
1004 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
1005 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
1006 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
1007 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
1008 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
1009 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
1010 background-color: hsla(210,4%,10%,.12);
1011 border-color: hsla(210,4%,10%,.14);
1012 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
1015 .subviewbutton.panel-subview-footer {
1016 margin: 4px -4px -4px;
1017 background-color: hsla(210,4%,10%,.07);
1018 border-top: 1px solid hsla(210,4%,10%,.12);
1020 color: hsl(0,0%,25%)
1023 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
1024 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
1025 background-color: hsla(210,4%,10%,.1);
1026 border-top: 1px solid hsla(210,4%,10%,.12);
1029 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
1030 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
1031 background-color: hsla(210,4%,10%,.15);
1032 border-top: 1px solid hsla(210,4%,10%,.12);
1033 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
1036 #BMB_bookmarksPopup .subviewbutton {
1038 font-weight: normal;
1041 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
1045 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
1046 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
1047 -moz-appearance: none;
1052 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
1053 #BMB_bookmarksPopup arrowscrollbox {
1054 padding-bottom: 0px;
1057 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
1058 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
1062 / Popups with only one item don't have a footer /
1063 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1064 / These popups never have a footer /
1065 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
1066 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1067 / And so they need some bottom padding: /
1068 padding-bottom: 4px;
1071 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
1072 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
1077 .PanelUI-subView menuseparator,
1078 .PanelUI-subView toolbarseparator,
1079 .cui-widget-panelview menuseparator {
1080 -moz-appearance: none;
1082 border-top: 1px solid #9C9CFF;
1087 .PanelUI-subView menuseparator,
1088 .PanelUI-subView toolbarseparator {
1089 /* -moz-margin-start: -5px;
1090 -moz-margin-end: -4px;*/
1093 .PanelUI-subView menuseparator.small-separator,
1094 .PanelUI-subView toolbarseparator.small-separator {
1095 /* margin-left: 5px;
1096 margin-right: 5px;*/
1099 .cui-widget-panelview menuseparator.small-separator {
1100 /* margin-left: 10px;
1101 margin-right: 10px;*/
1104 .subviewbutton > .menu-accel-container {
1105 -moz-box-pack: start;
1106 -moz-margin-start: 10px;
1107 -moz-margin-end: auto;
1111 #PanelUI-remotetabs-tabslist > toolbarbutton,
1112 #PanelUI-historyItems > toolbarbutton {
1113 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1116 @media (min-resolution: 1.1dppx) {
1117 #PanelUI-remotetabs-tabslist > toolbarbutton,
1118 #PanelUI-historyItems > toolbarbutton {
1119 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon@2x.png");
1123 #PanelUI-remotetabs-tabslist > toolbarbutton > .toolbarbutton-icon,
1124 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1125 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1126 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1131 toolbarbutton[panel-multiview-anchor="true"],
1132 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1134 background-color: #008484;
1137 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1141 #PanelUI-help[panel-multiview-anchor="true"] {
1142 background-image: none;
1145 #PanelUI-help[panel-multiview-anchor="true"]::after {
1150 width: var(--panel-ui-exit-subview-gutter-width);
1151 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1152 background-repeat: no-repeat;
1153 background-color: #008484;
1154 background-position: left 10px center, 0;
1157 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1158 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1159 background-position: right 10px center, 0;
1162 toolbarbutton[panel-multiview-anchor="true"] {
1163 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1164 background-position: right calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
1165 background-repeat: no-repeat;
1168 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1169 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1170 background-position: left calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
1173 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1174 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1178 #search-container[cui-areatype="menu-panel"],
1179 #wrapper-search-container[place="panel"] {
1183 #search-container[cui-areatype="menu-panel"] {
1188 toolbarpaletteitem[place="palette"] > #search-container {
1193 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1195 transition-property: background-color, border-color;
1196 transition-duration: 150ms;
1199 /* Make direct siblings overlap borders: */
1200 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1201 /* border-top-color: transparent !important; */
1204 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1205 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1206 /* margin-top: -1px; */
1209 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1214 min-width: calc(22.35em / 3 - 0.1px);
1215 max-width: calc(22.35em / 3 - 0.1px);
1216 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1217 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1218 height: calc(2.2em + 4px);
1220 -moz-box-orient: horizontal;
1223 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1224 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1225 /* reduce the width with 2px for this button to compensate for two separators
1227 min-width: calc(22.35em / 3 - 0.1px - 2px);
1228 max-width: calc(22.35em / 3 - 0.1px - 2px);
1231 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1235 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1239 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1240 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1241 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1242 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1243 border-top-right-radius: 0;
1244 border-bottom-right-radius: 0;
1247 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1248 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1249 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1250 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1251 border-top-left-radius: 0;
1252 border-bottom-left-radius: 0;
1255 .toolbaritem-combined-buttons > separator {
1256 -moz-appearance: none;
1258 -moz-box-align: stretch;
1261 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1265 /* background: hsla(210,4%,10%,.15);*/
1266 transition-property: margin;
1267 transition-duration: 10ms;
1268 transition-timing-function: ease;
1271 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1275 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1279 .cui-widget-panelview,
1280 #widget-overflow-scroller {
1285 #widget-overflow-scroller {
1288 margin-bottom: 10px;
1291 #widget-overflow-list {
1294 padding-right: 10px;
1297 toolbaritem[overflowedItem=true],
1298 toolbarbutton[overflowedItem=true] {
1302 background-repeat: no-repeat;
1303 background-position: 0 center;
1306 .widget-overflow-list .toolbarbutton-1,
1307 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1308 -moz-box-align: center;
1309 -moz-box-orient: horizontal;
1312 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1313 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1315 -moz-padding-start: .5em;
1318 #widget-overflow-list > .toolbaritem-combined-buttons {
1322 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1327 -moz-margin-end: -1px;
1330 .subviewbutton[checked="true"] {
1331 background-image: url("chrome://global/skin/menu/menu-check.gif");
1332 background-position: top 5px left 4px;
1333 background-repeat: no-repeat;
1336 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1337 background-position: top 5px right 4px;
1340 .subviewbutton[checked="true"]:hover {
1341 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1344 .subbiewbutton > .menu-iconic-left {
1345 -moz-margin-end: 3px;
1348 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1352 .panel-mainview[panelid=customizationui-widget-panel],
1353 #customizationui-widget-multiview > .panel-viewcontainer,
1354 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1355 #PanelUI-panicView > .panel-subview-body,
1356 #PanelUI-panicView {
1361 #PanelUI-panicView.cui-widget-panelview {
1365 #PanelUI-panic-timeframe {
1367 border-bottom: 1px solid #A09090;
1370 #panic-button-success-icon,
1371 #PanelUI-panic-timeframe-icon,
1372 #PanelUI-panic-timeframe-icon-small {
1373 background-color: transparent;
1374 -moz-margin-end: 10px;
1377 #panic-button-success-icon,
1378 #PanelUI-panic-timeframe-icon {
1379 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1384 #PanelUI-panic-timeframe-icon-small {
1385 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1390 /* current attribute is only set when in use as a subview instead of a main view */
1391 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1395 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1399 #panic-button-success-header,
1400 #PanelUI-panic-header {
1401 -moz-box-align: center;
1405 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1409 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1410 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1411 transform: scaleX(-1);
1418 .subviewradio@buttonStateHover@ {
1421 .subviewradio[selected],
1422 .subviewradio[selected]:hover,
1423 .subviewradio@buttonStateActive@ {
1426 .subviewradio > .radio-check {
1429 .subviewradio > .radio-check[selected] {
1433 #PanelUI-panic-explanations {
1434 padding: 10px 10px 0;
1437 #PanelUI-panic-actionlist-main-label {
1442 .PanelUI-panic-actionlist {
1443 -moz-padding-start: 20px;
1445 padding-bottom: 2px;
1446 background-size: 16px 16px;
1447 background-repeat: no-repeat;
1448 background-color: transparent;
1449 background-position: center left;
1452 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1453 background-position: center right;
1456 #PanelUI-panic-actionlist-cookies {
1457 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1460 #PanelUI-panic-actionlist-history {
1461 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1464 #PanelUI-panic-actionlist-windows {
1465 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1468 #PanelUI-panic-actionlist-newwindow {
1469 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1472 #PanelUI-panic-warning {
1479 #PanelUI-panic-view-button {
1480 background-color: #FF0000;
1484 #PanelUI-panic-view-button:hover {
1485 background-color: #FFCF00;
1488 #PanelUI-panic-view-button:hover:active {
1489 background-color: #FF9F00;
1492 #PanelUI-panic-view-button > .toolbarbutton-text {
1497 #panic-button-success-closebutton {
1500 #panic-button-success-closebutton:hover {
1503 #panic-button-success-closebutton:hover:active {
1506 /* === END panelUIOverlay.inc.css === */
1509 background-color: #000000;
1512 #PanelUI-contents #zoom-out-btn {
1514 padding-right: 12px;
1517 #PanelUI-contents #zoom-in-btn {
1519 padding-right: 12px;
1522 /* bookmark panel submenus */
1524 #BMB_bookmarksPopup menupopup[placespopup=true] {
1525 /* background: transparent;
1530 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1531 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1532 /* background: var(--panel-arrowcontent-background);
1533 border: var(--panel-arrowcontent-border);
1534 border-radius: 3.5px;
1538 #BMB_bookmarksPopup menupopup {
1539 /* padding-top: 2px;*/
1542 /* Add some space at the top because there are no headers: */
1543 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1544 /* padding-top: 4px;*/
1547 /* bookmark panel separator */
1548 #BMB_bookmarksPopup menuseparator {
1553 .subviewbutton > .menu-right,
1554 .subviewbutton > .menu-iconic-left {
1555 /* padding-top: 1px;
1557 margin-bottom: 2px;*/
1560 .subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon {
1561 /* This catches bookmarks, history items, and sync tabs items */
1566 /* Disabled empty item looks too small otherwise, because it has no icon. */
1567 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1568 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1569 menuitem[type="checkbox"].subviewbutton {
1570 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1571 * 2px for its border, see above */
1572 /* min-height: 22px;*/
1575 .subviewbutton > .toolbarbutton-text {
1576 /* padding-top: 3px;
1577 padding-bottom: 3px;*/
1580 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1581 -moz-appearance: none;
1583 -moz-margin-start: 3px;
1586 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1588 -moz-padding-start: 0;
1592 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1593 /* transform: scaleX(-1); */
1596 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1600 .subviewbutton > .toolbarbutton-text {
1601 padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */
1604 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1605 padding-inline-start: 2px;
1608 /* subviewbutton entries for social sidebars have images that come from external
1609 /* sources, and are not guaranteed to be the size we want, so force the size on
1611 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1616 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1620 menu.subviewbutton > .menu-right {
1621 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow");
1622 /* Reset the rect we inherit from the button: */
1623 -moz-image-region: auto;
1625 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1626 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1627 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1629 menu[disabled="true"].subviewbutton > .menu-right {
1630 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");