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 === */
7 #PanelUI-popup #PanelUI-contents:empty {
11 #PanelUI-popup #PanelUI-contents:empty::before {
13 background-image: url("chrome://browser/skin/customizableui/whimsy-bw.png");
18 animation: moveX 3.05s linear 0s infinite alternate,
19 moveY 3.4s linear 0s infinite alternate;
22 #PanelUI-popup #PanelUI-contents:empty:hover::before {
23 background-image: url("chrome://browser/skin/customizableui/whimsy.png");
26 @media (min-resolution: 2dppx) {
27 #PanelUI-popup #PanelUI-contents:empty::before {
28 background-image: url("chrome://browser/skin/customizableui/whimsy-bw@2x.png");
29 background-size: 64px 64px;
31 #PanelUI-popup #PanelUI-contents:empty:hover::before {
32 background-image: url("chrome://browser/skin/customizableui/whimsy@2x.png");
37 /* These values are adjusted for the padding on the panel. */
38 from { margin-left: -9px; } to { margin-left: calc(100% - 55px); }
41 /* These values are adjusted for the padding and height of the panel. */
42 from { margin-top: -6px; } to { margin-top: 58px; }
45 #customization-panelHolder {
50 -moz-margin-start: 3px;
53 #PanelUI-button:-moz-locale-dir(rtl) {
58 background-color: #000000;
59 -moz-margin-start: 38px;
62 .panel-viewstack[viewtype="main"] > .panel-subviews {
63 transform: translateX(22.35em);
66 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
67 transform: translateX(-22.35em);
70 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
74 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
84 #PanelUI-popup .panel-subview-body {
89 .panel-subview-header,
90 .subviewbutton.panel-subview-footer {
94 .panel-subview-header {
96 background-color: #A09090;
101 .panel-subview-footer {
102 border-top: 1px solid #A09090;
105 .cui-widget-panelview .panel-subview-header {
109 .cui-widget-panelview .subviewbutton.panel-subview-footer {
111 -moz-box-pack: center;
116 flex-direction: column;
120 #app-extension-point-end > #PanelUI-menu-button {
123 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
126 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
130 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
133 #PanelUI-popup > arrowscrollbox > scrollbox {
137 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
146 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
147 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
148 /* line-height: 1.1;*/
152 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
153 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
157 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
158 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
160 clip: rect(auto, auto, 2.3em, auto);
163 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
164 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
166 /* Need to override toolkit theming which sets margin: 0 !important; */
167 margin: 2px 0 0 !important;
170 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
175 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
176 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
177 -moz-margin-start: 0;
185 .panel-mainview:not([panelid="PanelUI-popup"]) {
189 panelview:not([mainview]) .toolbarbutton-text,
190 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
192 -moz-padding-start: 8px;
196 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
200 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
212 #PanelUI-contents-scroller {
219 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
225 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
226 .panelUI-grid .toolbarbutton-1,
227 .panel-customization-placeholder-child {
228 -moz-appearance: none;
229 -moz-box-orient: vertical;
230 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
231 height: calc(51px + 2.2em);
234 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
235 * should have a min-width set so they abide by the width set above (which they do outside of
236 * customize mode because they're in a flexed container) */
237 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
241 /* Help SDK buttons fit in. */
242 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
243 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
248 .customization-palette .toolbarbutton-1 {
249 -moz-appearance: none;
250 -moz-box-orient: vertical;
253 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
254 -moz-appearance: none;
255 -moz-box-orient: vertical;
256 width: calc(22.35em / 3 - 0.1px - 2px);
257 height: calc(49px + 2.2em);
261 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
262 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
263 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
266 .panel-customization-placeholder-child {
268 /* padding: 2px 6px;*/
271 .panelUI-grid .toolbarbutton-1[type="menu"] {
272 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
273 background-position: right 3px top 16px;
274 background-repeat: no-repeat;
277 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
278 background-position: left 3px top 16px;
281 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
285 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
286 -moz-box-align: center;
288 -moz-margin-start: -16px;
290 margin-bottom: 2.2em;
294 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
295 border-radius: 0 0 0 2px;
298 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
299 border-radius: 0 0 2px 0;
302 .panel-combined-button[disabled] > .toolbarbutton-icon {
306 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
307 width: calc(22.35em / 3 - 0.1px);
308 margin: 0 !important;
311 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
312 -moz-box-align: center;
313 -moz-box-pack: center;
316 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
320 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
323 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
324 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
325 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
326 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
327 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
328 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
333 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
334 * which was affecting subview display. Because of this, we're hiding the iframe *only*
335 * when displaying a subview. The discerning user might notice this, but it's not nearly
336 * as bad as the brokenness.
337 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
340 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
344 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
348 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
349 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
350 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
351 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
352 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
353 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
354 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
355 .panel-customization-placeholder-child > .toolbarbutton-icon {
358 /* Explanation for the below formula (A / B - C)
360 Each button is 22.35em / 3 - 0.1px wide
362 Each button has two margins.
364 The button icon is 32 pixels wide.
365 The button has 12px of horizontal padding (6 on each side).
366 The button has 0px of horizontal border (0 on each side).
367 Total width of button's icon + button padding should therefore be 44px,
368 which means each horizontal margin should be the half the button's width - (44/2) px.
370 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
373 /* above we treat the container as the icon for the margins, that is so the
374 /* badge itself is positioned correctly. Here we make sure that the icon itself
375 /* has the minum size we want, but no padding/margin. */
376 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
383 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
387 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
391 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
392 -moz-margin-end: 2px;
395 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
396 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
402 #zoom-in-button > .toolbarbutton-text,
403 #zoom-out-button > .toolbarbutton-text,
404 #zoom-reset-button > .toolbarbutton-icon {
411 flex-direction: column;
412 /* background-color: hsla(210,4%,10%,.07);*/
415 /* min-height: 4em;*/
416 border-bottom-right-radius: 4px;
417 border-bottom-left-radius: 4px;
420 #PanelUI-footer-inner {
422 border-top: 1px solid #9C9CFF;
425 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
429 #PanelUI-footer-inner > toolbarseparator {
431 border-left: 1px solid #9C9CFF;
435 #PanelUI-footer-inner:hover > toolbarseparator {
449 transition: background-color;
450 -moz-box-orient: horizontal;
453 #PanelUI-fxa-status {
454 border-top: 1px solid #9C9CFF;
455 border-bottom: 1px solid transparent;
459 #PanelUI-fxa-status > .toolbarbutton-text {
460 width: 0; /* Fancy cropping solution for flexbox. */
463 #PanelUI-help[panel-multiview-anchor="true"] {
464 -moz-image-region: rect(0, 32px, 16px, 16px);
472 #PanelUI-fxa-status > .toolbarbutton-text,
473 #PanelUI-customize > .toolbarbutton-text {
479 #PanelUI-help > .toolbarbutton-text,
480 #PanelUI-quit > .toolbarbutton-text {
484 #PanelUI-help > .toolbarbutton-icon,
485 #PanelUI-quit > .toolbarbutton-icon {
491 -moz-padding-start: 15px;
492 -moz-border-start-style: none;
495 #PanelUI-fxa-status {
496 list-style-image: url("chrome://browser/skin/sync-horizontalbar.png");
499 #PanelUI-fxa-status[status="active"] {
500 list-style-image: url("chrome://browser/skin/syncProgress-horizontalbar.png");
504 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
507 #customization-panelHolder #PanelUI-customize {
508 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
512 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
516 -moz-border-end-style: none;
517 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
524 -moz-image-region: rect(0, 16px, 16px, 0);
527 #PanelUI-customize:hover,
528 #PanelUI-help:not([disabled]):hover,
529 #PanelUI-quit:not([disabled]):hover,
530 #PanelUI-customize:hover:active,
531 #PanelUI-help:not([disabled]):hover:active,
532 #PanelUI-quit:not([disabled]):hover:active {
533 -moz-image-region: rect(0, 32px, 16px, 16px);
536 #PanelUI-help[disabled],
537 #PanelUI-quit[disabled] {
538 -moz-image-region: rect(0, 48px, 16px, 32px);
541 #PanelUI-fxa-status:not([disabled]):hover,
542 #PanelUI-help:not([disabled]):hover,
543 #PanelUI-customize:hover,
544 #PanelUI-quit:not([disabled]):hover {
547 #PanelUI-fxa-status:not([disabled]):hover:active,
548 #PanelUI-help:not([disabled]):hover:active,
549 #PanelUI-customize:hover:active,
550 #PanelUI-quit:not([disabled]):hover:active {
553 #PanelUI-fxa-status:not([disabled]):hover,
554 #PanelUI-fxa-status:not([disabled]):hover:active {
557 #PanelUI-quit:not([disabled]):hover {
558 background-color: #FF0000;
561 #PanelUI-quit:not([disabled]):hover:active {
562 background-color: #FF9F00;
565 #customization-panelHolder #PanelUI-customize {
567 background-color: #008484;
572 #customization-panelHolder #PanelUI-customize + toolbarseparator {
576 #customization-panelHolder #PanelUI-customize:hover,
577 #customization-panelHolder #PanelUI-customize:hover:active {
578 background-color: #FFCF00;
582 #customization-palette .toolbarbutton-multiline-text,
583 #customization-palette .toolbarbutton-text {
587 panelview .toolbarbutton-1,
589 .widget-overflow-list .toolbarbutton-1,
590 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
591 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
593 background-color: hsla(210,4%,10%,0);
596 border-color: hsla(210,4%,10%,0);*/
597 transition-property: background-color, border-color;
598 transition-duration: 150ms;
601 panelview .toolbarbutton-1,
603 .widget-overflow-list .toolbarbutton-1,
604 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
608 .subviewbutton.panel-subview-footer {
609 /* border-radius: 0;*/
613 .subviewbutton.panel-subview-footer > .menu-text {
614 -moz-margin-start: 0px !important;
615 -moz-padding-start: 6px;
616 -moz-padding-end: 6px;
621 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
625 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
630 .subviewbutton.panel-subview-footer > .menu-accel-container {
631 -moz-padding-start: 6px;
634 .subviewbutton:not(.panel-subview-footer) {
638 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
639 /* Bookmark items need a more specific selector. */
640 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
641 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
642 /* font-size: 1.1em;*/
645 .PanelUI-subView .subviewbutton[shortcut]::after {
646 content: attr(shortcut);
651 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
652 -moz-margin-start: 10px;
655 /* This is a <label> but it should fit in with the menu font- and colorwise. */
656 #PanelUI-characterEncodingView-autodetect-label {
661 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
666 panelview .toolbarbutton-1,
667 .widget-overflow-list .toolbarbutton-1 {
672 panelview .toolbarbutton-1:not(:-moz-any([disabled],[checked="true"],[open],:active)):-moz-any(:hover,[_moz-menuactive]),
673 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):-moz-any(:hover,[_moz-menuactive]),
674 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
675 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
676 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[checked="true"],[open],:active)):-moz-any(:hover,[_moz-menuactive]),
677 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
678 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
679 background-color: hsla(210,4%,10%,.08);
680 border-color: hsla(210,4%,10%,.11);
683 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[checked="true"],[open],:active)):-moz-any(:hover,[_moz-menuactive]) {
684 border-color: hsla(210,4%,10%,.11);
687 panelview .toolbarbutton-1:not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)),
688 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)),
689 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
690 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
691 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)),
692 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
693 > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)) {
694 background-color: hsla(210,4%,10%,.12);
695 border-color: hsla(210,4%,10%,.14);
696 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
699 .subviewbutton.panel-subview-footer {
700 margin: 4px -4px -4px;
701 background-color: hsla(210,4%,10%,.07);
702 border-top: 1px solid hsla(210,4%,10%,.12);
707 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
708 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
709 background-color: hsla(210,4%,10%,.1);
710 border-top: 1px solid hsla(210,4%,10%,.12);
713 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
714 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],[checked="true"],:hover:active) {
715 background-color: hsla(210,4%,10%,.15);
716 border-top: 1px solid hsla(210,4%,10%,.12);
717 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
720 #BMB_bookmarksPopup .subviewbutton {
725 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
729 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
730 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
731 -moz-appearance: none;
736 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
737 #BMB_bookmarksPopup arrowscrollbox {
741 #BMB_bookmarksPopup menupopup {
745 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
746 / Hide bottom separator as the styled footer includes a top border serving the same purpose.
747 * We can't just use display: none here, otherwise scrollbox.xml will flip out and sometimes
748 * refuse to scroll for us (see bug 984156). Instead, we set it to visibility hidden, force
749 * a minimum height, and then negative-margin that single pixel into oblivion. That seems
750 * to be enough to make scrollbox happy.
752 -moz-appearance: none;
760 .PanelUI-subView menuseparator,
761 .PanelUI-subView toolbarseparator,
762 .cui-widget-panelview menuseparator {
763 -moz-appearance: none;
765 border-top: 1px solid #9C9CFF;
770 .PanelUI-subView menuseparator,
771 .PanelUI-subView toolbarseparator {
772 /* -moz-margin-start: -5px;
773 -moz-margin-end: -4px;*/
776 .PanelUI-subView menuseparator.small-separator,
777 .PanelUI-subView toolbarseparator.small-separator {
782 .cui-widget-panelview menuseparator.small-separator {
787 .subviewbutton > .menu-accel-container {
788 -moz-box-pack: start;
789 -moz-margin-start: 10px;
790 -moz-margin-end: auto;
791 /* color: hsl(0,0%,50%);*/
794 #PanelUI-historyItems > toolbarbutton {
795 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
798 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
799 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
800 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
805 toolbarbutton[panel-multiview-anchor="true"],
806 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
808 background-color: #008484;
811 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
815 #PanelUI-help[panel-multiview-anchor="true"] {
816 background-image: none;
819 #PanelUI-help[panel-multiview-anchor="true"]::after {
825 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
826 background-repeat: no-repeat;
827 background-color: #008484;
828 background-position: left 10px center, 0; /* this doesn't need to be changed for RTL */
831 toolbarbutton[panel-multiview-anchor="true"] {
832 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
833 background-position: right 5px center;
834 background-repeat: no-repeat;
837 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
838 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
839 background-position: left 5px center;
842 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
843 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
847 #search-container[cui-areatype="menu-panel"],
848 #wrapper-search-container[place="panel"] {
852 #search-container[cui-areatype="menu-panel"] {
857 toolbarpaletteitem[place="palette"] > #search-container {
862 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
864 transition-property: background-color, border-color;
865 transition-duration: 150ms;
868 /* Make direct siblings overlap borders: */
869 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
870 /* border-top-color: transparent !important; */
873 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
874 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
875 /* margin-top: -1px; */
878 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
883 min-width: calc(22.35em / 3 - 0.1px);
884 max-width: calc(22.35em / 3 - 0.1px);
885 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
886 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
887 height: calc(2.2em + 4px);
889 -moz-box-orient: horizontal;
892 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
893 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
894 /* reduce the width with 2px for this button to compensate for two separators
896 min-width: calc(22.35em / 3 - 0.1px - 2px);
897 max-width: calc(22.35em / 3 - 0.1px - 2px);
900 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
904 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
908 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
909 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
910 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
911 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
912 border-top-right-radius: 0;
913 border-bottom-right-radius: 0;
916 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
917 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
918 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
919 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
920 border-top-left-radius: 0;
921 border-bottom-left-radius: 0;
924 .toolbaritem-combined-buttons > separator {
925 -moz-appearance: none;
927 -moz-box-align: stretch;
930 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
934 /* background: hsla(210,4%,10%,.15);*/
935 transition-property: margin;
936 transition-duration: 10ms;
937 transition-timing-function: ease;
940 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
944 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
948 .cui-widget-panelview,
949 #widget-overflow-scroller {
954 #widget-overflow-scroller {
960 #widget-overflow-list {
966 toolbaritem[overflowedItem=true],
967 toolbarbutton[overflowedItem=true] {
971 background-repeat: no-repeat;
972 background-position: 0 center;
975 .widget-overflow-list .toolbarbutton-1,
976 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
977 -moz-box-align: center;
978 -moz-box-orient: horizontal;
981 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
982 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
984 -moz-padding-start: .5em;
987 #widget-overflow-list > .toolbaritem-combined-buttons {
991 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
996 -moz-margin-end: -1px;
999 .subviewbutton[checked="true"] {
1000 background-image: url("chrome://global/skin/menu/menu-check.gif");
1001 background-position: top 5px left 4px;
1002 background-repeat: no-repeat;
1005 .subviewbutton[checked="true"]:hover {
1006 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1009 .PanelUI-subView .menu-iconic-left {
1010 -moz-appearance: none;
1011 -moz-margin-end: 3px;
1014 .PanelUI-subView menuitem[checked="true"] > .menu-iconic-left {
1018 /* === END panelUIOverlay.inc.css === */
1020 #PanelUI-contents #zoom-out-btn {
1022 padding-right: 12px;
1025 #PanelUI-contents #zoom-in-btn {
1027 padding-right: 12px;
1030 /* bookmark panel submenus */
1032 #BMB_bookmarksPopup menupopup[placespopup=true] {
1033 /* background: transparent;
1038 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1039 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1040 /* background: #FFF;
1041 border: 1px solid rgba(0,0,0,0.25);
1042 border-radius: 3.5px;
1046 #BMB_bookmarksPopup menupopup {
1047 /* padding-top: 2px;*/
1050 /* Add some space at the top because there are no headers: */
1051 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1052 /* padding-top: 4px;*/
1055 #BMB_bookmarksPopup .menu-text {
1059 /* bookmark panel separator */
1060 #BMB_bookmarksPopup menuseparator {
1065 .subviewbutton > .menu-right,
1066 .subviewbutton > .menu-iconic-left {
1067 /* padding-top: 1px;
1069 margin-bottom: 2px;*/
1072 /* Disabled empty item looks too small otherwise, because it has no icon. */
1073 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1074 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1075 menuitem[type="checkbox"].subviewbutton {
1076 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1077 * 2px for its border, see above */
1078 /* min-height: 22px;*/
1081 .subviewbutton > .toolbarbutton-text {
1082 /* padding-top: 3px;
1083 padding-bottom: 3px;*/
1086 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1087 -moz-appearance: none;
1089 -moz-margin-start: 3px;
1092 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1094 -moz-padding-start: 0;
1098 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1102 .subviewbutton > .toolbarbutton-text {
1103 -moz-padding-start: 16px;
1106 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1107 -moz-padding-start: 0;
1110 .subviewbutton.bookmark-item > .toolbarbutton-icon {
1111 -moz-margin-start: 3px;
1114 /* subviewbutton entries for social sidebars have images that come from external
1115 /* sources, and are not guaranteed to be the size we want, so force the size on
1117 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1122 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1126 menu.subviewbutton > .menu-right {
1127 -moz-appearance: none;
1128 list-style-image: url("chrome://browser/skin/places/bookmarks-menu-arrow.png");
1129 -moz-image-region: rect(0, 16px, 16px, 0);
1132 menu[disabled="true"].subviewbutton > .menu-right {
1133 -moz-image-region: rect(0, 32px, 16px, 16px);