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 {
204 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
205 border-radius: 4px 4px 0 0;
208 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
209 border-radius: 0 0 4px 4px;
220 #PanelUI-contents-scroller {
227 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
233 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
234 .panelUI-grid .toolbarbutton-1,
235 .panel-customization-placeholder-child {
236 -moz-appearance: none;
237 -moz-box-orient: vertical;
238 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
239 height: calc(51px + 2.2em);
242 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
243 * should have a min-width set so they abide by the width set above (which they do outside of
244 * customize mode because they're in a flexed container) */
245 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
249 /* Help SDK buttons fit in. */
250 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
251 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
256 .customization-palette .toolbarbutton-1 {
257 -moz-appearance: none;
258 -moz-box-orient: vertical;
261 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
262 -moz-appearance: none;
263 -moz-box-orient: vertical;
264 width: calc(22.35em / 3 - 0.1px - 2px);
265 height: calc(49px + 2.2em);
269 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
270 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
271 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
274 .panel-customization-placeholder-child {
276 /* padding: 2px 6px;*/
279 .panelUI-grid .toolbarbutton-1[type="menu"] {
280 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
281 background-position: right 3px top 16px;
282 background-repeat: no-repeat;
285 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
286 background-position: left 3px top 16px;
289 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
293 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
294 -moz-box-align: center;
296 -moz-margin-start: -16px;
298 margin-bottom: 2.2em;
302 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
303 border-radius: 0 0 0 2px;
306 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
307 border-radius: 0 0 2px 0;
310 .panel-combined-button[disabled] > .toolbarbutton-icon {
314 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
315 width: calc(22.35em / 3 - 0.1px);
316 margin: 0 !important;
319 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
320 -moz-box-align: center;
321 -moz-box-pack: center;
324 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
328 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
331 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
332 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
333 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-fxa-status,
334 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
335 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
336 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
341 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
342 * which was affecting subview display. Because of this, we're hiding the iframe *only*
343 * when displaying a subview. The discerning user might notice this, but it's not nearly
344 * as bad as the brokenness.
345 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
348 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
352 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
356 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
357 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
358 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
359 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
360 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
361 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
362 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
363 .panel-customization-placeholder-child > .toolbarbutton-icon {
366 /* Explanation for the below formula (A / B - C)
368 Each button is 22.35em / 3 - 0.1px wide
370 Each button has two margins.
372 The button icon is 32 pixels wide.
373 The button has 12px of horizontal padding (6 on each side).
374 The button has 0px of horizontal border (0 on each side).
375 Total width of button's icon + button padding should therefore be 44px,
376 which means each horizontal margin should be the half the button's width - (44/2) px.
378 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
381 /* above we treat the container as the icon for the margins, that is so the
382 /* badge itself is positioned correctly. Here we make sure that the icon itself
383 /* has the minum size we want, but no padding/margin. */
384 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
391 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
395 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
399 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
400 -moz-margin-end: 2px;
403 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
404 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
410 #zoom-in-button > .toolbarbutton-text,
411 #zoom-out-button > .toolbarbutton-text,
412 #zoom-reset-button > .toolbarbutton-icon {
419 flex-direction: column;
420 /* background-color: hsla(210,4%,10%,.07);*/
423 /* min-height: 4em;*/
424 border-bottom-right-radius: 4px;
425 border-bottom-left-radius: 4px;
428 #PanelUI-footer-inner {
430 border-top: 1px solid #9C9CFF;
433 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner {
437 #PanelUI-footer-inner > toolbarseparator {
439 border-left: 1px solid #9C9CFF;
443 #PanelUI-footer-inner:hover > toolbarseparator {
457 transition: background-color;
458 -moz-box-orient: horizontal;
461 #PanelUI-fxa-status {
462 border-top: 1px solid #9C9CFF;
463 border-bottom: 1px solid transparent;
467 #PanelUI-fxa-status > .toolbarbutton-text {
468 width: 0; /* Fancy cropping solution for flexbox. */
471 #PanelUI-help[panel-multiview-anchor="true"] {
472 -moz-image-region: rect(0, 32px, 16px, 16px);
480 #PanelUI-fxa-status > .toolbarbutton-text,
481 #PanelUI-customize > .toolbarbutton-text {
487 #PanelUI-help > .toolbarbutton-text,
488 #PanelUI-quit > .toolbarbutton-text {
492 #PanelUI-help > .toolbarbutton-icon,
493 #PanelUI-quit > .toolbarbutton-icon {
499 -moz-padding-start: 15px;
500 -moz-border-start-style: none;
503 #PanelUI-fxa-status {
504 list-style-image: url("chrome://browser/skin/sync-horizontalbar.png");
507 #PanelUI-fxa-status[status="active"] {
508 list-style-image: url("chrome://browser/skin/syncProgress-horizontalbar.png");
512 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
515 #customization-panelHolder #PanelUI-customize {
516 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
520 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
524 -moz-border-end-style: none;
525 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
532 -moz-image-region: rect(0, 16px, 16px, 0);
535 #PanelUI-customize:hover,
536 #PanelUI-help:not([disabled]):hover,
537 #PanelUI-quit:not([disabled]):hover,
538 #PanelUI-customize:hover:active,
539 #PanelUI-help:not([disabled]):hover:active,
540 #PanelUI-quit:not([disabled]):hover:active {
541 -moz-image-region: rect(0, 32px, 16px, 16px);
544 #PanelUI-help[disabled],
545 #PanelUI-quit[disabled] {
546 -moz-image-region: rect(0, 48px, 16px, 32px);
549 #PanelUI-fxa-status:not([disabled]):hover,
550 #PanelUI-help:not([disabled]):hover,
551 #PanelUI-customize:hover,
552 #PanelUI-quit:not([disabled]):hover {
555 #PanelUI-fxa-status:not([disabled]):hover:active,
556 #PanelUI-help:not([disabled]):hover:active,
557 #PanelUI-customize:hover:active,
558 #PanelUI-quit:not([disabled]):hover:active {
561 #PanelUI-fxa-status:not([disabled]):hover,
562 #PanelUI-fxa-status:not([disabled]):hover:active {
565 #PanelUI-quit:not([disabled]):hover {
566 background-color: #FF0000;
569 #PanelUI-quit:not([disabled]):hover:active {
570 background-color: #FF9F00;
573 #customization-panelHolder #PanelUI-customize {
575 background-color: #008484;
580 #customization-panelHolder #PanelUI-customize + toolbarseparator {
584 #customization-panelHolder #PanelUI-customize:hover,
585 #customization-panelHolder #PanelUI-customize:hover:active {
586 background-color: #FFCF00;
590 #customization-palette .toolbarbutton-multiline-text,
591 #customization-palette .toolbarbutton-text {
595 panelview .toolbarbutton-1,
597 .widget-overflow-list .toolbarbutton-1,
598 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
599 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
601 background-color: hsla(210,4%,10%,0);
604 border-color: hsla(210,4%,10%,0);*/
605 transition-property: background-color, border-color;
606 transition-duration: 150ms;
609 panelview .toolbarbutton-1,
611 .widget-overflow-list .toolbarbutton-1,
612 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
616 .subviewbutton.panel-subview-footer {
617 /* border-radius: 0; */
621 .subviewbutton.panel-subview-footer > .menu-text {
622 -moz-margin-start: 0px !important;
623 -moz-padding-start: 6px;
624 -moz-padding-end: 6px;
629 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
633 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
638 .subviewbutton.panel-subview-footer > .menu-accel-container {
639 -moz-padding-start: 6px;
642 .subviewbutton:not(.panel-subview-footer) {
646 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
647 /* Bookmark items need a more specific selector. */
648 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
649 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
650 /* font-size: 1.1em;*/
653 .PanelUI-subView .subviewbutton[shortcut]::after {
654 content: attr(shortcut);
659 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
660 -moz-margin-start: 10px;
663 /* This is a <label> but it should fit in with the menu font- and colorwise. */
664 #PanelUI-characterEncodingView-autodetect-label {
669 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
674 panelview .toolbarbutton-1,
675 .widget-overflow-list .toolbarbutton-1 {
680 panelview .toolbarbutton-1:not(:-moz-any([disabled],[checked="true"],[open],:active)):-moz-any(:hover,[_moz-menuactive]),
681 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):-moz-any(:hover,[_moz-menuactive]),
682 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
683 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
684 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[checked="true"],[open],:active)):-moz-any(:hover,[_moz-menuactive]),
685 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
686 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
687 background-color: hsla(210,4%,10%,.08);
688 border-color: hsla(210,4%,10%,.11);
691 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[checked="true"],[open],:active)):-moz-any(:hover,[_moz-menuactive]) {
692 border-color: hsla(210,4%,10%,.11);
695 panelview .toolbarbutton-1:not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)),
696 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)),
697 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
698 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
699 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)),
700 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
701 > toolbarbutton:not([disabled]):-moz-any([open],[checked="true"],:hover:active,[_moz-menuactive]:active)) {
702 background-color: hsla(210,4%,10%,.12);
703 border-color: hsla(210,4%,10%,.14);
704 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
707 .subviewbutton.panel-subview-footer {
708 margin: 4px -4px -4px;
709 background-color: hsla(210,4%,10%,.07);
710 border-top: 1px solid hsla(210,4%,10%,.12);
715 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
716 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
717 background-color: hsla(210,4%,10%,.1);
718 border-top: 1px solid hsla(210,4%,10%,.12);
721 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],[checked="true"],:hover:active),
722 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],[checked="true"],:hover:active) {
723 background-color: hsla(210,4%,10%,.15);
724 border-top: 1px solid hsla(210,4%,10%,.12);
725 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
728 #BMB_bookmarksPopup .subviewbutton {
733 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
737 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
738 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
739 -moz-appearance: none;
744 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
745 #BMB_bookmarksPopup arrowscrollbox {
749 #BMB_bookmarksPopup menupopup {
753 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
754 / Hide bottom separator as the styled footer includes a top border serving the same purpose.
755 * We can't just use display: none here, otherwise scrollbox.xml will flip out and sometimes
756 * refuse to scroll for us (see bug 984156). Instead, we set it to visibility hidden, force
757 * a minimum height, and then negative-margin that single pixel into oblivion. That seems
758 * to be enough to make scrollbox happy.
760 -moz-appearance: none;
768 .PanelUI-subView menuseparator,
769 .PanelUI-subView toolbarseparator,
770 .cui-widget-panelview menuseparator {
771 -moz-appearance: none;
773 border-top: 1px solid #9C9CFF;
778 .PanelUI-subView menuseparator,
779 .PanelUI-subView toolbarseparator {
780 /* -moz-margin-start: -5px;
781 -moz-margin-end: -4px;*/
784 .PanelUI-subView menuseparator.small-separator,
785 .PanelUI-subView toolbarseparator.small-separator {
790 .cui-widget-panelview menuseparator.small-separator {
791 /* margin-left: 10px;
792 margin-right: 10px;*/
795 .subviewbutton > .menu-accel-container {
796 -moz-box-pack: start;
797 -moz-margin-start: 10px;
798 -moz-margin-end: auto;
802 #PanelUI-historyItems > toolbarbutton {
803 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
806 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
807 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
808 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
813 toolbarbutton[panel-multiview-anchor="true"],
814 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
816 background-color: #008484;
819 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
823 #PanelUI-help[panel-multiview-anchor="true"] {
824 background-image: none;
827 #PanelUI-help[panel-multiview-anchor="true"]::after {
833 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
834 background-repeat: no-repeat;
835 background-color: #008484;
836 background-position: left 10px center, 0; /* this doesn't need to be changed for RTL */
839 toolbarbutton[panel-multiview-anchor="true"] {
840 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
841 background-position: right 5px center;
842 background-repeat: no-repeat;
845 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
846 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
847 background-position: left 5px center;
850 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
851 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
855 #search-container[cui-areatype="menu-panel"],
856 #wrapper-search-container[place="panel"] {
860 #search-container[cui-areatype="menu-panel"] {
865 toolbarpaletteitem[place="palette"] > #search-container {
870 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
872 transition-property: background-color, border-color;
873 transition-duration: 150ms;
876 /* Make direct siblings overlap borders: */
877 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
878 /* border-top-color: transparent !important; */
881 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
882 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
883 /* margin-top: -1px; */
886 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
891 min-width: calc(22.35em / 3 - 0.1px);
892 max-width: calc(22.35em / 3 - 0.1px);
893 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
894 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
895 height: calc(2.2em + 4px);
897 -moz-box-orient: horizontal;
900 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
901 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
902 /* reduce the width with 2px for this button to compensate for two separators
904 min-width: calc(22.35em / 3 - 0.1px - 2px);
905 max-width: calc(22.35em / 3 - 0.1px - 2px);
908 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
912 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
916 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
917 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
918 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
919 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
920 border-top-right-radius: 0;
921 border-bottom-right-radius: 0;
924 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
925 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
926 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
927 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
928 border-top-left-radius: 0;
929 border-bottom-left-radius: 0;
932 .toolbaritem-combined-buttons > separator {
933 -moz-appearance: none;
935 -moz-box-align: stretch;
938 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
942 /* background: hsla(210,4%,10%,.15);*/
943 transition-property: margin;
944 transition-duration: 10ms;
945 transition-timing-function: ease;
948 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
952 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
956 .cui-widget-panelview,
957 #widget-overflow-scroller {
962 #widget-overflow-scroller {
968 #widget-overflow-list {
974 toolbaritem[overflowedItem=true],
975 toolbarbutton[overflowedItem=true] {
979 background-repeat: no-repeat;
980 background-position: 0 center;
983 .widget-overflow-list .toolbarbutton-1,
984 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
985 -moz-box-align: center;
986 -moz-box-orient: horizontal;
989 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
990 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
992 -moz-padding-start: .5em;
995 #widget-overflow-list > .toolbaritem-combined-buttons {
999 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1004 -moz-margin-end: -1px;
1007 .subviewbutton[checked="true"] {
1008 background-image: url("chrome://global/skin/menu/menu-check.gif");
1009 background-position: top 5px left 4px;
1010 background-repeat: no-repeat;
1013 .subviewbutton[checked="true"]:hover {
1014 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1017 .PanelUI-subView .menu-iconic-left {
1018 -moz-appearance: none;
1019 -moz-margin-end: 3px;
1022 .PanelUI-subView menuitem[checked="true"] > .menu-iconic-left {
1026 /* === END panelUIOverlay.inc.css === */
1028 #PanelUI-contents #zoom-out-btn {
1030 padding-right: 12px;
1033 #PanelUI-contents #zoom-in-btn {
1035 padding-right: 12px;
1038 /* bookmark panel submenus */
1040 #BMB_bookmarksPopup menupopup[placespopup=true] {
1041 /* background: transparent;
1046 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1047 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1048 /* background: #FFF;
1049 border: 1px solid rgba(0,0,0,0.25);
1050 border-radius: 3.5px;
1054 #BMB_bookmarksPopup menupopup {
1055 /* padding-top: 2px;*/
1058 /* Add some space at the top because there are no headers: */
1059 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1060 /* padding-top: 4px;*/
1063 #BMB_bookmarksPopup .menu-text {
1067 /* bookmark panel separator */
1068 #BMB_bookmarksPopup menuseparator {
1073 .subviewbutton > .menu-right,
1074 .subviewbutton > .menu-iconic-left {
1075 /* padding-top: 1px;
1077 margin-bottom: 2px;*/
1080 /* Disabled empty item looks too small otherwise, because it has no icon. */
1081 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1082 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1083 menuitem[type="checkbox"].subviewbutton {
1084 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1085 * 2px for its border, see above */
1086 /* min-height: 22px;*/
1089 .subviewbutton > .toolbarbutton-text {
1090 /* padding-top: 3px;
1091 padding-bottom: 3px;*/
1094 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1095 -moz-appearance: none;
1097 -moz-margin-start: 3px;
1100 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1102 -moz-padding-start: 0;
1106 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1110 .subviewbutton > .toolbarbutton-text {
1111 -moz-padding-start: 16px;
1114 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1115 -moz-padding-start: 0;
1118 .subviewbutton.bookmark-item > .toolbarbutton-icon {
1119 -moz-margin-start: 3px;
1122 /* subviewbutton entries for social sidebars have images that come from external
1123 /* sources, and are not guaranteed to be the size we want, so force the size on
1125 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1130 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1134 menu.subviewbutton > .menu-right {
1135 -moz-appearance: none;
1136 list-style-image: url("chrome://browser/skin/places/bookmarks-menu-arrow.png");
1137 -moz-image-region: rect(0, 16px, 16px, 0);
1140 menu[disabled="true"].subviewbutton > .menu-right {
1141 -moz-image-region: rect(0, 32px, 16px, 16px);