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 {
78 .subviewbutton:not(:-moz-any([image],[targetURI],.cui-withicon)) > .toolbarbutton-text {
88 #PanelUI-popup .panel-subview-body {
93 .panel-subview-header,
94 .subviewbutton.panel-subview-footer {
98 .panel-subview-header {
100 background-color: #A09090;
105 .panel-subview-footer {
106 border-top: 1px solid #A09090;
109 .cui-widget-panelview .panel-subview-header {
113 .cui-widget-panelview .subviewbutton.panel-subview-footer {
115 -moz-box-pack: center;
120 flex-direction: column;
124 #app-extension-point-end > #PanelUI-menu-button {
127 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
130 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
134 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
137 #PanelUI-popup > arrowscrollbox > scrollbox {
141 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
150 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
151 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
152 /* line-height: 1.1;*/
156 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
157 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
161 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
162 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
164 clip: rect(auto, auto, 2.3em, auto);
167 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
168 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
170 /* Need to override toolkit theming which sets margin: 0 !important; */
171 margin: 2px 0 0 !important;
174 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
179 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
180 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
181 -moz-margin-start: 0;
189 .panel-mainview:not([panelid="PanelUI-popup"]) {
193 panelview:not([mainview]) .toolbarbutton-text,
194 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
199 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
203 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
207 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
208 border-radius: 4px 4px 0 0;
211 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
212 border-radius: 0 0 4px 4px;
223 #PanelUI-contents-scroller {
230 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
236 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
237 .panelUI-grid .toolbarbutton-1,
238 .panel-customization-placeholder-child {
239 -moz-appearance: none;
240 -moz-box-orient: vertical;
241 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
242 height: calc(51px + 2.2em);
245 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
246 * should have a min-width set so they abide by the width set above (which they do outside of
247 * customize mode because they're in a flexed container) */
248 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
252 /* Help SDK buttons fit in. */
253 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
254 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
259 .customization-palette .toolbarbutton-1 {
260 -moz-appearance: none;
261 -moz-box-orient: vertical;
264 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
265 -moz-appearance: none;
266 -moz-box-orient: vertical;
267 width: calc(22.35em / 3 - 0.1px - 2px);
268 height: calc(49px + 2.2em);
272 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
273 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
274 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
277 .panel-customization-placeholder-child {
279 /* padding: 2px 6px;*/
282 .panelUI-grid .toolbarbutton-1[type="menu"] {
283 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
284 background-position: right 3px top 16px;
285 background-repeat: no-repeat;
288 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
289 background-position: left 3px top 16px;
292 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
296 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
297 -moz-box-align: center;
299 -moz-margin-start: -16px;
301 margin-bottom: 2.2em;
305 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
306 border-radius: 0 0 0 2px;
309 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
310 border-radius: 0 0 2px 0;
313 .panel-combined-button[disabled] > .toolbarbutton-icon {
317 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
318 width: calc(22.35em / 3 - 0.1px);
319 margin: 0 !important;
322 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
323 -moz-box-align: center;
324 -moz-box-pack: center;
327 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
331 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
334 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
335 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
336 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
337 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
338 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
339 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
344 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
345 * which was affecting subview display. Because of this, we're hiding the iframe *only*
346 * when displaying a subview. The discerning user might notice this, but it's not nearly
347 * as bad as the brokenness.
348 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
351 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
355 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
359 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
360 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
361 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
362 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
363 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
364 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
365 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
366 .panel-customization-placeholder-child > .toolbarbutton-icon {
369 /* Explanation for the below formula (A / B - C)
371 Each button is 22.35em / 3 - 0.1px wide
373 Each button has two margins.
375 The button icon is 32 pixels wide.
376 The button has 12px of horizontal padding (6 on each side).
377 The button has 0px of horizontal border (0 on each side).
378 Total width of button's icon + button padding should therefore be 44px,
379 which means each horizontal margin should be the half the button's width - (44/2) px.
381 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
384 /* above we treat the container as the icon for the margins, that is so the
385 /* badge itself is positioned correctly. Here we make sure that the icon itself
386 /* has the minum size we want, but no padding/margin. */
387 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
394 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
398 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
402 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
403 -moz-margin-end: 2px;
406 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
407 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
413 #zoom-in-button > .toolbarbutton-text,
414 #zoom-out-button > .toolbarbutton-text,
415 #zoom-reset-button > .toolbarbutton-icon {
422 flex-direction: column;
423 /* background-color: hsla(210,4%,10%,.07);*/
426 /* min-height: 4em;*/
427 border-bottom-right-radius: 4px;
428 border-bottom-left-radius: 4px;
431 #PanelUI-footer-inner {
433 border-top: 1px solid #9C9CFF;
436 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
440 #PanelUI-footer-inner > toolbarseparator {
442 border-left: 1px solid #9C9CFF;
446 #PanelUI-footer-inner:hover > toolbarseparator {
460 transition: background-color;
461 -moz-box-orient: horizontal;
464 #PanelUI-fxa-status {
465 border-top: 1px solid #9C9CFF;
466 border-bottom: 1px solid transparent;
470 #PanelUI-fxa-status > .toolbarbutton-text {
471 width: 0; /* Fancy cropping solution for flexbox. */
474 #PanelUI-help[panel-multiview-anchor="true"] {
475 -moz-image-region: rect(0, 32px, 16px, 16px);
483 #PanelUI-fxa-status > .toolbarbutton-text,
484 #PanelUI-customize > .toolbarbutton-text {
490 #PanelUI-help > .toolbarbutton-text,
491 #PanelUI-quit > .toolbarbutton-text {
495 #PanelUI-help > .toolbarbutton-icon,
496 #PanelUI-quit > .toolbarbutton-icon {
502 -moz-padding-start: 15px;
503 -moz-border-start-style: none;
506 #PanelUI-fxa-status {
507 list-style-image: url("chrome://browser/skin/sync-horizontalbar.png");
510 #PanelUI-fxa-status[status="active"] {
511 list-style-image: url("chrome://browser/skin/syncProgress-horizontalbar.png");
515 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
518 #customization-panelHolder #PanelUI-customize {
519 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
523 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
527 -moz-border-end-style: none;
528 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
535 -moz-image-region: rect(0, 16px, 16px, 0);
538 #PanelUI-customize:hover,
539 #PanelUI-help:not([disabled]):hover,
540 #PanelUI-quit:not([disabled]):hover,
541 #PanelUI-customize:hover:active,
542 #PanelUI-help:not([disabled]):hover:active,
543 #PanelUI-quit:not([disabled]):hover:active {
544 -moz-image-region: rect(0, 32px, 16px, 16px);
547 #PanelUI-help[disabled],
548 #PanelUI-quit[disabled] {
549 -moz-image-region: rect(0, 48px, 16px, 32px);
552 #PanelUI-fxa-status:not([disabled]):hover,
553 #PanelUI-help:not([disabled]):hover,
554 #PanelUI-customize:hover,
555 #PanelUI-quit:not([disabled]):hover {
558 #PanelUI-fxa-status:not([disabled]):hover:active,
559 #PanelUI-help:not([disabled]):hover:active,
560 #PanelUI-customize:hover:active,
561 #PanelUI-quit:not([disabled]):hover:active {
564 #PanelUI-fxa-status:not([disabled]):hover,
565 #PanelUI-fxa-status:not([disabled]):hover:active {
568 #PanelUI-quit:not([disabled]):hover {
569 background-color: #FF0000;
572 #PanelUI-quit:not([disabled]):hover:active {
573 background-color: #FF9F00;
576 #customization-panelHolder #PanelUI-customize {
578 background-color: #008484;
583 #customization-panelHolder #PanelUI-customize + toolbarseparator {
587 #customization-panelHolder #PanelUI-customize:hover,
588 #customization-panelHolder #PanelUI-customize:hover:active {
589 background-color: #FFCF00;
593 #customization-palette .toolbarbutton-multiline-text,
594 #customization-palette .toolbarbutton-text {
598 panelview .toolbarbutton-1,
600 .widget-overflow-list .toolbarbutton-1,
601 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
602 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
604 background-color: hsla(210,4%,10%,0);
607 border-color: hsla(210,4%,10%,0);*/
608 transition-property: background-color, border-color;
609 transition-duration: 150ms;
612 panelview .toolbarbutton-1,
614 .widget-overflow-list .toolbarbutton-1,
615 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
619 .subviewbutton.panel-subview-footer {
620 /* border-radius: 0; */
624 .subviewbutton.panel-subview-footer > .menu-text {
625 -moz-margin-start: 0px !important;
626 -moz-padding-start: 6px;
627 -moz-padding-end: 6px;
632 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
636 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
641 .subviewbutton.panel-subview-footer > .menu-accel-container {
642 -moz-padding-start: 6px;
645 .subviewbutton:not(.panel-subview-footer) {
649 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
650 /* Bookmark items need a more specific selector. */
651 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
652 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
653 /* font-size: 1.1em;*/
656 .PanelUI-subView .subviewbutton[shortcut]::after {
657 content: attr(shortcut);
662 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
663 -moz-margin-start: 10px;
666 /* This is a <label> but it should fit in with the menu font- and colorwise. */
667 #PanelUI-characterEncodingView-autodetect-label {
672 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
677 panelview .toolbarbutton-1,
678 .widget-overflow-list .toolbarbutton-1 {
683 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],[checked="true"],:active)):hover,
684 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],[checked="true"],:active)):hover,
685 menu.subviewbutton:not(:-moz-any([disabled],[checked="true"],:active))[_moz-menuactive],
686 menuitem.subviewbutton:not(:-moz-any([disabled],[checked="true"],:active))[_moz-menuactive],
687 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],[checked="true"],:active)):hover,
688 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
689 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
690 background-color: hsla(210,4%,10%,.08);
691 border-color: hsla(210,4%,10%,.11);
694 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],[checked="true"],:active)):hover {
695 border-color: hsla(210,4%,10%,.11);
698 panelview .toolbarbutton-1:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
699 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
700 menu.subviewbutton:not([disabled]):-moz-any([checked="true"],[_moz-menuactive]:active),
701 menuitem.subviewbutton:not([disabled]):-moz-any([checked="true"],[_moz-menuactive]:active),
702 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
703 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
704 > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active) {
705 background-color: hsla(210,4%,10%,.12);
706 border-color: hsla(210,4%,10%,.14);
707 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
710 .subviewbutton.panel-subview-footer {
711 margin: 4px -4px -4px;
712 background-color: hsla(210,4%,10%,.07);
713 border-top: 1px solid hsla(210,4%,10%,.12);
718 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
719 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
720 background-color: hsla(210,4%,10%,.1);
721 border-top: 1px solid hsla(210,4%,10%,.12);
724 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
725 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],[checked="true"],:hover:active) {
726 background-color: hsla(210,4%,10%,.15);
727 border-top: 1px solid hsla(210,4%,10%,.12);
728 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
731 #BMB_bookmarksPopup .subviewbutton {
736 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
740 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
741 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
742 -moz-appearance: none;
747 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
748 #BMB_bookmarksPopup arrowscrollbox {
752 #BMB_bookmarksPopup menupopup {
756 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
757 / Hide bottom separator as the styled footer includes a top border serving the same purpose.
758 * We can't just use display: none here, otherwise scrollbox.xml will flip out and sometimes
759 * refuse to scroll for us (see bug 984156). Instead, we set it to visibility hidden, force
760 * a minimum height, and then negative-margin that single pixel into oblivion. That seems
761 * to be enough to make scrollbox happy.
763 -moz-appearance: none;
771 .PanelUI-subView menuseparator,
772 .PanelUI-subView toolbarseparator,
773 .cui-widget-panelview menuseparator {
774 -moz-appearance: none;
776 border-top: 1px solid #9C9CFF;
781 .PanelUI-subView menuseparator,
782 .PanelUI-subView toolbarseparator {
783 /* -moz-margin-start: -5px;
784 -moz-margin-end: -4px;*/
787 .PanelUI-subView menuseparator.small-separator,
788 .PanelUI-subView toolbarseparator.small-separator {
793 .cui-widget-panelview menuseparator.small-separator {
794 /* margin-left: 10px;
795 margin-right: 10px;*/
798 .subviewbutton > .menu-accel-container {
799 -moz-box-pack: start;
800 -moz-margin-start: 10px;
801 -moz-margin-end: auto;
805 #PanelUI-historyItems > toolbarbutton {
806 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
809 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
810 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
811 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
816 toolbarbutton[panel-multiview-anchor="true"],
817 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
819 background-color: #008484;
822 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
826 #PanelUI-help[panel-multiview-anchor="true"] {
827 background-image: none;
830 #PanelUI-help[panel-multiview-anchor="true"]::after {
836 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
837 background-repeat: no-repeat;
838 background-color: #008484;
839 background-position: left 10px center, 0; /* this doesn't need to be changed for RTL */
842 toolbarbutton[panel-multiview-anchor="true"] {
843 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
844 background-position: right 5px center;
845 background-repeat: no-repeat;
848 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
849 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
850 background-position: left 5px center;
853 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
854 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
858 #search-container[cui-areatype="menu-panel"],
859 #wrapper-search-container[place="panel"] {
863 #search-container[cui-areatype="menu-panel"] {
868 toolbarpaletteitem[place="palette"] > #search-container {
873 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
875 transition-property: background-color, border-color;
876 transition-duration: 150ms;
879 /* Make direct siblings overlap borders: */
880 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
881 /* border-top-color: transparent !important; */
884 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
885 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
886 /* margin-top: -1px; */
889 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
894 min-width: calc(22.35em / 3 - 0.1px);
895 max-width: calc(22.35em / 3 - 0.1px);
896 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
897 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
898 height: calc(2.2em + 4px);
900 -moz-box-orient: horizontal;
903 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
904 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
905 /* reduce the width with 2px for this button to compensate for two separators
907 min-width: calc(22.35em / 3 - 0.1px - 2px);
908 max-width: calc(22.35em / 3 - 0.1px - 2px);
911 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
915 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
919 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
920 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
921 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
922 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
923 border-top-right-radius: 0;
924 border-bottom-right-radius: 0;
927 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
928 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
929 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
930 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
931 border-top-left-radius: 0;
932 border-bottom-left-radius: 0;
935 .toolbaritem-combined-buttons > separator {
936 -moz-appearance: none;
938 -moz-box-align: stretch;
941 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
945 /* background: hsla(210,4%,10%,.15);*/
946 transition-property: margin;
947 transition-duration: 10ms;
948 transition-timing-function: ease;
951 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
955 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
959 .cui-widget-panelview,
960 #widget-overflow-scroller {
965 #widget-overflow-scroller {
971 #widget-overflow-list {
977 toolbaritem[overflowedItem=true],
978 toolbarbutton[overflowedItem=true] {
982 background-repeat: no-repeat;
983 background-position: 0 center;
986 .widget-overflow-list .toolbarbutton-1,
987 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
988 -moz-box-align: center;
989 -moz-box-orient: horizontal;
992 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
993 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
995 -moz-padding-start: .5em;
998 #widget-overflow-list > .toolbaritem-combined-buttons {
1002 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1007 -moz-margin-end: -1px;
1010 .subviewbutton[checked="true"] {
1011 background-image: url("chrome://global/skin/menu/menu-check.gif");
1012 background-position: top 5px left 4px;
1013 background-repeat: no-repeat;
1016 .subviewbutton[checked="true"]:hover {
1017 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1020 .PanelUI-subView .menu-iconic-left {
1021 -moz-appearance: none;
1022 -moz-margin-end: 3px;
1025 .PanelUI-subView menuitem[checked="true"] > .menu-iconic-left {
1029 /* === END panelUIOverlay.inc.css === */
1031 #PanelUI-contents #zoom-out-btn {
1033 padding-right: 12px;
1036 #PanelUI-contents #zoom-in-btn {
1038 padding-right: 12px;
1041 /* bookmark panel submenus */
1043 #BMB_bookmarksPopup menupopup[placespopup=true] {
1044 /* background: transparent;
1049 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1050 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1051 /* background: #FFF;
1052 border: 1px solid rgba(0,0,0,0.25);
1053 border-radius: 3.5px;
1057 #BMB_bookmarksPopup menupopup {
1058 /* padding-top: 2px;*/
1061 /* Add some space at the top because there are no headers: */
1062 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1063 /* padding-top: 4px;*/
1066 #BMB_bookmarksPopup .menu-text {
1070 /* bookmark panel separator */
1071 #BMB_bookmarksPopup menuseparator {
1076 .subviewbutton > .menu-right,
1077 .subviewbutton > .menu-iconic-left {
1078 /* padding-top: 1px;
1080 margin-bottom: 2px;*/
1083 /* Disabled empty item looks too small otherwise, because it has no icon. */
1084 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1085 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1086 menuitem[type="checkbox"].subviewbutton {
1087 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1088 * 2px for its border, see above */
1089 /* min-height: 22px;*/
1092 .subviewbutton > .toolbarbutton-text {
1093 /* padding-top: 3px;
1094 padding-bottom: 3px;*/
1097 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1098 -moz-appearance: none;
1100 -moz-margin-start: 3px;
1103 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1105 -moz-padding-start: 0;
1109 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1113 .subviewbutton > .toolbarbutton-text {
1114 -moz-padding-start: 16px;
1117 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1118 -moz-padding-start: 0;
1121 .subviewbutton.bookmark-item > .toolbarbutton-icon {
1122 -moz-margin-start: 3px;
1125 /* subviewbutton entries for social sidebars have images that come from external
1126 /* sources, and are not guaranteed to be the size we want, so force the size on
1128 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1133 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1137 menu.subviewbutton > .menu-right {
1138 -moz-appearance: none;
1139 list-style-image: url("chrome://browser/skin/places/bookmarks-menu-arrow.png");
1140 -moz-image-region: rect(0, 16px, 16px, 0);
1143 menu[disabled="true"].subviewbutton > .menu-right {
1144 -moz-image-region: rect(0, 32px, 16px, 16px);