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 transition: transform 1s ease-out;
19 animation: whimsyMoveX 3.05s linear 0s infinite alternate,
20 whimsyMoveY 3.4s linear 0s infinite alternate;
23 #PanelUI-popup #PanelUI-contents:active:empty::before {
24 animation: whimsyMoveX 3.05s linear 0s infinite alternate,
25 whimsyMoveY 3.4s linear 0s infinite alternate,
26 whimsyRotate 1s linear 0s infinite normal;
29 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before {
30 animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
31 whimsyMoveY 3.4s linear 0s infinite alternate;
34 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):active:empty::before {
35 animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
36 whimsyMoveY 3.4s linear 0s infinite alternate,
37 whimsyRotate 1s linear 0s infinite normal;
40 #PanelUI-popup #PanelUI-contents:empty:hover::before {
41 background-image: url("chrome://browser/skin/customizableui/whimsy.png");
44 @media (min-resolution: 2dppx) {
45 #PanelUI-popup #PanelUI-contents:empty::before {
46 background-image: url("chrome://browser/skin/customizableui/whimsy-bw@2x.png");
47 background-size: 64px 64px;
49 #PanelUI-popup #PanelUI-contents:empty:hover::before {
50 background-image: url("chrome://browser/skin/customizableui/whimsy@2x.png");
54 @keyframes whimsyMoveX {
55 /* These values are adjusted for the padding on the panel. */
56 from { margin-left: -9px; } to { margin-left: calc(100% - 55px); }
59 @keyframes whimsyMoveXRTL {
60 /* These values are adjusted for the padding on the panel. */
61 from { margin-right: -9px; } to { margin-right: calc(100% - 55px); }
64 @keyframes whimsyMoveY {
65 /* These values are adjusted for the padding and height of the panel. */
66 from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
69 @keyframes whimsyRotate {
70 to { transform: perspective(5000px) rotateY(360deg); }
73 #customization-panelHolder {
78 -moz-margin-start: 3px;
81 #PanelUI-button:-moz-locale-dir(rtl) {
84 #PanelUI-menu-button[update-status="succeeded"] .toolbarbutton-badge::after {
85 content: url(chrome://browser/skin/update-badge.svg);
86 background-color: #008484;
92 -moz-margin-start: 38px;
95 .panel-viewstack[viewtype="main"] > .panel-subviews {
96 transform: translateX(22.35em);
99 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
100 transform: translateX(-22.35em);
103 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
107 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
111 .panel-subview-body {
117 #PanelUI-popup .panel-subview-body {
122 .panel-subview-header,
123 .subviewbutton.panel-subview-footer {
124 box-sizing: border-box;
125 /* min-height: 41px; */
129 .panel-subview-header {
131 background-color: #A09090;
133 font-variant: small-caps;
137 .panel-subview-footer {
138 border-top: 1px solid #A09090;
141 .cui-widget-panelview .panel-subview-header {
145 .cui-widget-panelview .subviewbutton.panel-subview-footer {
147 -moz-box-pack: center;
152 flex-direction: column;
156 #app-extension-point-end > #PanelUI-menu-button {
159 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
162 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
166 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
169 #PanelUI-popup > arrowscrollbox > scrollbox {
173 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
182 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
183 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
184 /* line-height: 1.1;*/
188 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
189 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
193 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
194 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
196 clip: rect(auto, auto, 2.3em, auto);
199 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
200 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
202 /* Need to override toolkit theming which sets margin: 0 !important; */
203 margin: 2px 0 0 !important;
206 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
211 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
212 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
213 -moz-margin-start: 0;
221 .panel-mainview:not([panelid="PanelUI-popup"]) {
225 /* Bug 1164419 - increase Pocket panel size to accomidate wider Russian text. */
226 panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-viewstack > .panel-mainview:not([panelid="PanelUI-popup"]) {
227 max-width: 33em; /* standaloneSubviewWidth + 3 */
230 panelview:not([mainview]) .toolbarbutton-text,
231 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
236 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
240 .cui-widget-panel[viewId="PanelUI-pocketView"] > .panel-arrowcontainer > .panel-arrowcontent {
245 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
249 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
250 border-radius: 4px 4px 0 0;
253 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
254 border-radius: 0 0 4px 4px;
265 #PanelUI-contents-scroller {
272 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
278 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
279 .panelUI-grid .toolbarbutton-1,
280 .panel-customization-placeholder-child {
281 -moz-appearance: none;
282 -moz-box-orient: vertical;
283 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
284 height: calc(51px + 2.2em);
287 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
288 * should have a min-width set so they abide by the width set above (which they do outside of
289 * customize mode because they're in a flexed container) */
290 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
294 /* Help SDK buttons fit in. */
295 toolbarpaletteitem[place="palette"] > toolbarbutton[sdk-button="true"] > .toolbarbutton-icon,
296 toolbarbutton[sdk-button="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon {
301 .customization-palette .toolbarbutton-1 {
302 -moz-appearance: none;
303 -moz-box-orient: vertical;
306 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
307 -moz-appearance: none;
308 -moz-box-orient: vertical;
309 width: calc(22.35em / 3 - 0.1px - 2px);
310 height: calc(49px + 2.2em);
314 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
315 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
316 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
319 .panel-customization-placeholder-child {
321 /* padding: 2px 6px;*/
324 .panelUI-grid .toolbarbutton-1[type="menu"] {
325 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
326 background-position: right 3px top 16px;
327 background-repeat: no-repeat;
330 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
331 background-position: left 3px top 16px;
334 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
338 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
339 -moz-box-align: center;
341 -moz-margin-start: -16px;
343 margin-bottom: 2.2em;
347 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
348 border-radius: 0 0 0 2px;
351 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
352 border-radius: 0 0 2px 0;
355 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
359 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
360 width: calc(22.35em / 3 - 0.1px);
361 margin: 0 !important;
364 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
365 -moz-box-align: center;
366 -moz-box-pack: center;
369 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
373 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
376 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
377 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
378 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
379 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
380 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
381 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
382 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
383 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
384 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
389 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
390 * which was affecting subview display. Because of this, we're hiding the iframe *only*
391 * when displaying a subview. The discerning user might notice this, but it's not nearly
392 * as bad as the brokenness.
393 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
396 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
400 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
404 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
405 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
406 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
407 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
408 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
409 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container,
410 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
411 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
412 .panel-customization-placeholder-child > .toolbarbutton-icon {
415 /* Explanation for the below formula (A / B - C)
417 Each button is 22.35em / 3 - 0.1px wide
419 Each button has two margins.
421 The button icon is 32 pixels wide.
422 The button has 12px of horizontal padding (6 on each side).
423 The button has 0px of horizontal border (0 on each side).
424 Total width of button's icon + button padding should therefore be 44px,
425 which means each horizontal margin should be the half the button's width - (44/2) px.
427 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
430 /* above we treat the container as the icon for the margins, that is so the
431 /* badge itself is positioned correctly. Here we make sure that the icon itself
432 /* has the minum size we want, but no padding/margin. */
433 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
440 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
444 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
448 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
449 -moz-margin-end: 2px;
452 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
453 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
459 #zoom-in-button > .toolbarbutton-text,
460 #zoom-out-button > .toolbarbutton-text,
461 #zoom-reset-button > .toolbarbutton-icon {
468 flex-direction: column;
469 /* background-color: hsla(210,4%,10%,.07);*/
472 /* min-height: 4em;*/
473 border-bottom-right-radius: 4px;
474 border-bottom-left-radius: 4px;
477 #main-window[customizing] #PanelUI-footer-fxa > toolbarseparator {
481 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
482 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
483 #PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
487 #PanelUI-fxa-status {
492 #PanelUI-footer-inner,
493 #PanelUI-footer-fxa {
495 border-top: 1px solid #9C9CFF;
498 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
499 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
503 #PanelUI-footer-inner > toolbarseparator,
504 #PanelUI-footer-fxa > toolbarseparator {
506 border-left: 1px solid #9C9CFF;
510 #PanelUI-footer-inner:hover > toolbarseparator,
511 #PanelUI-footer-fxa:hover > toolbarseparator {
515 #PanelUI-update-status,
523 box-sizing: border-box;
528 transition: background-color;
529 -moz-box-orient: horizontal;
532 #PanelUI-update-status {
533 border-top: 1px solid #9C9CFF;
534 border-bottom: 1px solid transparent;
538 #PanelUI-update-status > .toolbarbutton-text {
539 width: 0; /* Fancy cropping solution for flexbox. */
542 #PanelUI-help[panel-multiview-anchor="true"] {
543 -moz-image-region: rect(0, 32px, 16px, 16px);
551 #PanelUI-update-status > .toolbarbutton-text,
552 #PanelUI-fxa-label > .toolbarbutton-text,
553 #PanelUI-customize > .toolbarbutton-text {
559 #PanelUI-help > .toolbarbutton-text,
560 #PanelUI-quit > .toolbarbutton-text,
561 #PanelUI-fxa-avatar > .toolbarbutton-text {
565 #PanelUI-update-status > .toolbarbutton-icon,
566 #PanelUI-fxa-label > .toolbarbutton-icon,
567 #PanelUI-fxa-icon > .toolbarbutton-icon,
568 #PanelUI-customize > .toolbarbutton-icon,
569 #PanelUI-help > .toolbarbutton-icon,
570 #PanelUI-quit > .toolbarbutton-icon {
575 -moz-padding-start: 15px;
576 -moz-padding-end: 15px;
582 -moz-padding-start: 15px;
583 -moz-border-start-style: none;
586 #PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
587 #PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
588 -moz-padding-start: 0px;
591 #PanelUI-update-status {
592 width: calc(22.35em + 30px);
593 -moz-padding-start: 15px;
594 -moz-border-start-style: none;
597 #PanelUI-update-status {
598 list-style-image: url(chrome://branding/content/icon16.png);
603 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
606 #PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon {
607 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
610 #PanelUI-fxa-icon[fxastatus="migrate-signup"],
611 #PanelUI-fxa-icon[fxastatus="migrate-verify"] {
612 list-style-image: url(chrome://global/skin/warning-16.png);
616 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
619 #customization-panelHolder #PanelUI-customize {
620 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
624 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
628 -moz-border-end-style: none;
629 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
637 -moz-image-region: rect(0, 16px, 16px, 0);
640 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
641 #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
645 #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
649 #PanelUI-fxa-avatar[disabled],
650 #PanelUI-fxa-icon[disabled] {
654 #PanelUI-fxa-avatar {
658 background-repeat: no-repeat;
659 background-position: 0 0;
660 background-size: contain;
668 #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
669 list-style-image: url(chrome://browser/skin/fxa/default-profile-image.svg);
672 #PanelUI-customize:hover,
673 #PanelUI-help:not([disabled]):hover,
674 #PanelUI-quit:not([disabled]):hover,
675 #PanelUI-customize:hover:active,
676 #PanelUI-help:not([disabled]):hover:active,
677 #PanelUI-quit:not([disabled]):hover:active {
678 -moz-image-region: rect(0, 32px, 16px, 16px);
681 #PanelUI-help[disabled],
682 #PanelUI-quit[disabled] {
683 -moz-image-region: rect(0, 48px, 16px, 32px);
686 #PanelUI-fxa-status:not([disabled]):hover,
687 #PanelUI-fxa-icon:not([disabled]):hover,
688 #PanelUI-help:not([disabled]):hover,
689 #PanelUI-customize:hover,
690 #PanelUI-quit:not([disabled]):hover {
693 #PanelUI-fxa-status:not([disabled]):hover:active,
694 #PanelUI-fxa-icon:not([disabled]):hover:active,
695 #PanelUI-help:not([disabled]):hover:active,
696 #PanelUI-customize:hover:active,
697 #PanelUI-quit:not([disabled]):hover:active {
700 #PanelUI-fxa-status:not([disabled]):hover,
701 #PanelUI-fxa-status:not([disabled]):hover:active {
704 #PanelUI-footer-fxa[fxastatus="error"] {
705 background-color: #FF0000;
709 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
710 background-color: #FFCF00;
713 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
714 background-color: #FF9F00;
717 #PanelUI-update-status {
721 #PanelUI-update-status[update-status="succeeded"] {
722 background-color: #008484;
726 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
727 background-color: #FFCF00;
730 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
731 background-color: #FF9F00;
734 #PanelUI-update-status[update-status="failed"] {
735 background-color: #FF0000;
739 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
740 background-color: #FFCF00;
743 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
744 background-color: #FF9F00;
747 #PanelUI-quit:not([disabled]):hover {
748 background-color: #FF0000;
751 #PanelUI-quit:not([disabled]):hover:active {
752 background-color: #FF9F00;
755 #customization-panelHolder #PanelUI-customize {
757 background-color: #008484;
762 #customization-panelHolder #PanelUI-customize + toolbarseparator {
766 #customization-panelHolder #PanelUI-customize:hover,
767 #customization-panelHolder #PanelUI-customize:hover:active {
768 background-color: #FFCF00;
772 #customization-palette .toolbarbutton-multiline-text,
773 #customization-palette .toolbarbutton-text {
777 panelview .toolbarbutton-1,
779 .widget-overflow-list .toolbarbutton-1,
780 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
781 .share-provider-button,
782 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
784 background-color: hsla(210,4%,10%,0);
787 border-color: hsla(210,4%,10%,0);*/
790 panelview .toolbarbutton-1,
792 .widget-overflow-list .toolbarbutton-1,
793 .share-provider-button,
794 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
798 .subviewbutton.panel-subview-footer {
799 /* border-radius: 0; */
803 .subviewbutton.panel-subview-footer > .menu-text {
804 -moz-margin-start: 0px !important;
805 -moz-padding-start: 6px;
806 -moz-padding-end: 6px;
811 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
815 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
820 .subviewbutton.panel-subview-footer > .menu-accel-container {
821 -moz-padding-start: 6px;
824 .subviewbutton:not(.panel-subview-footer) {
828 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
829 /* Bookmark items need a more specific selector. */
830 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
831 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
835 .PanelUI-subView .subviewbutton[shortcut]::after {
836 content: attr(shortcut);
841 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
842 -moz-margin-start: 10px;
845 /* This is a <label> but it should fit in with the menu font- and colorwise. */
846 #PanelUI-characterEncodingView-autodetect-label {
851 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
856 panelview .toolbarbutton-1,
857 .widget-overflow-list .toolbarbutton-1 {
862 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
863 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
864 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
865 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
866 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
867 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
868 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
869 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
870 background-color: hsla(210,4%,10%,.08);
871 border-color: hsla(210,4%,10%,.11);
874 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
875 border-color: hsla(210,4%,10%,.11);
878 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
879 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
880 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
881 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
882 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
883 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
884 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
885 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
886 background-color: hsla(210,4%,10%,.12);
887 border-color: hsla(210,4%,10%,.14);
888 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
891 .subviewbutton.panel-subview-footer {
892 margin: 4px -4px -4px;
893 background-color: hsla(210,4%,10%,.07);
894 border-top: 1px solid hsla(210,4%,10%,.12);
899 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
900 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
901 background-color: hsla(210,4%,10%,.1);
902 border-top: 1px solid hsla(210,4%,10%,.12);
905 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
906 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
907 background-color: hsla(210,4%,10%,.15);
908 border-top: 1px solid hsla(210,4%,10%,.12);
909 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
912 #BMB_bookmarksPopup .subviewbutton {
917 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
921 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
922 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
923 -moz-appearance: none;
928 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
929 #BMB_bookmarksPopup arrowscrollbox {
933 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
934 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
938 / Popups with only one item don't have a footer /
939 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
940 / These popups never have a footer /
941 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
942 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
943 / And so they need some bottom padding: /
947 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
948 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
953 .PanelUI-subView menuseparator,
954 .PanelUI-subView toolbarseparator,
955 .cui-widget-panelview menuseparator {
956 -moz-appearance: none;
958 border-top: 1px solid #9C9CFF;
963 .PanelUI-subView menuseparator,
964 .PanelUI-subView toolbarseparator {
965 /* -moz-margin-start: -5px;
966 -moz-margin-end: -4px;*/
969 .PanelUI-subView menuseparator.small-separator,
970 .PanelUI-subView toolbarseparator.small-separator {
975 .cui-widget-panelview menuseparator.small-separator {
976 /* margin-left: 10px;
977 margin-right: 10px;*/
980 .subviewbutton > .menu-accel-container {
981 -moz-box-pack: start;
982 -moz-margin-start: 10px;
983 -moz-margin-end: auto;
987 #PanelUI-historyItems > toolbarbutton {
988 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
991 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
992 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
993 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
998 toolbarbutton[panel-multiview-anchor="true"],
999 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1001 background-color: #008484;
1004 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1008 #PanelUI-help[panel-multiview-anchor="true"] {
1009 background-image: none;
1012 #PanelUI-help[panel-multiview-anchor="true"]::after {
1018 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1019 background-repeat: no-repeat;
1020 background-color: #008484;
1021 background-position: left 10px center, 0;
1024 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1025 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1026 background-position: right 10px center, 0;
1029 toolbarbutton[panel-multiview-anchor="true"] {
1030 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1031 background-position: right calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
1032 background-repeat: no-repeat;
1035 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1036 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1037 background-position: left calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
1040 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1041 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1045 #search-container[cui-areatype="menu-panel"],
1046 #wrapper-search-container[place="panel"] {
1050 #search-container[cui-areatype="menu-panel"] {
1055 toolbarpaletteitem[place="palette"] > #search-container {
1060 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1062 transition-property: background-color, border-color;
1063 transition-duration: 150ms;
1066 /* Make direct siblings overlap borders: */
1067 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1068 /* border-top-color: transparent !important; */
1071 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1072 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1073 /* margin-top: -1px; */
1076 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1081 min-width: calc(22.35em / 3 - 0.1px);
1082 max-width: calc(22.35em / 3 - 0.1px);
1083 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1084 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1085 height: calc(2.2em + 4px);
1087 -moz-box-orient: horizontal;
1090 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1091 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1092 /* reduce the width with 2px for this button to compensate for two separators
1094 min-width: calc(22.35em / 3 - 0.1px - 2px);
1095 max-width: calc(22.35em / 3 - 0.1px - 2px);
1098 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1102 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1106 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1107 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1108 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1109 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1110 border-top-right-radius: 0;
1111 border-bottom-right-radius: 0;
1114 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1115 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1116 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1117 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1118 border-top-left-radius: 0;
1119 border-bottom-left-radius: 0;
1122 .toolbaritem-combined-buttons > separator {
1123 -moz-appearance: none;
1125 -moz-box-align: stretch;
1128 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1132 /* background: hsla(210,4%,10%,.15);*/
1133 transition-property: margin;
1134 transition-duration: 10ms;
1135 transition-timing-function: ease;
1138 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1142 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1146 .cui-widget-panelview,
1147 #widget-overflow-scroller {
1152 #widget-overflow-scroller {
1155 margin-bottom: 10px;
1158 #widget-overflow-list {
1161 padding-right: 10px;
1164 toolbaritem[overflowedItem=true],
1165 toolbarbutton[overflowedItem=true] {
1169 background-repeat: no-repeat;
1170 background-position: 0 center;
1173 .widget-overflow-list .toolbarbutton-1,
1174 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1175 -moz-box-align: center;
1176 -moz-box-orient: horizontal;
1179 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1180 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1182 -moz-padding-start: .5em;
1185 #widget-overflow-list > .toolbaritem-combined-buttons {
1189 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1194 -moz-margin-end: -1px;
1197 .subviewbutton[checked="true"] {
1198 background-image: url("chrome://global/skin/menu/menu-check.gif");
1199 background-position: top 5px left 4px;
1200 background-repeat: no-repeat;
1203 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1204 background-position: top 5px right 4px;
1207 .subviewbutton[checked="true"]:hover {
1208 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1211 .subbiewbutton > .menu-iconic-left {
1212 -moz-margin-end: 3px;
1215 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1219 .panel-mainview[panelid=customizationui-widget-panel],
1220 #customizationui-widget-multiview > .panel-viewcontainer,
1221 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1222 #PanelUI-panicView > .panel-subview-body,
1224 #PanelUI-pocketView > .panel-subview-body,
1225 #PanelUI-pocketView {
1230 #PanelUI-panicView.cui-widget-panelview {
1234 #PanelUI-panic-timeframe {
1236 border-bottom: 1px solid #A09090;
1239 #panic-button-success-icon,
1240 #PanelUI-panic-timeframe-icon,
1241 #PanelUI-panic-timeframe-icon-small {
1242 background-color: transparent;
1243 -moz-margin-end: 10px;
1246 #panic-button-success-icon,
1247 #PanelUI-panic-timeframe-icon {
1248 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1253 #PanelUI-panic-timeframe-icon-small {
1254 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1259 /* current attribute is only set when in use as a subview instead of a main view */
1260 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1264 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1268 #panic-button-success-header,
1269 #PanelUI-panic-header {
1270 -moz-box-align: center;
1274 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1278 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1279 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1280 transform: scaleX(-1);
1287 .subviewradio@buttonStateHover@ {
1290 .subviewradio[selected],
1291 .subviewradio[selected]:hover,
1292 .subviewradio@buttonStateActive@ {
1295 .subviewradio > .radio-check {
1298 .subviewradio > .radio-check[selected] {
1302 #PanelUI-panic-explanations {
1303 padding: 10px 10px 0;
1306 #PanelUI-panic-actionlist-main-label {
1311 .PanelUI-panic-actionlist {
1312 -moz-padding-start: 20px;
1314 padding-bottom: 2px;
1315 background-size: 16px 16px;
1316 background-repeat: no-repeat;
1317 background-color: transparent;
1318 background-position: center left;
1321 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1322 background-position: center right;
1325 #PanelUI-panic-actionlist-cookies {
1326 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1329 #PanelUI-panic-actionlist-history {
1330 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1333 #PanelUI-panic-actionlist-windows {
1334 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1337 #PanelUI-panic-actionlist-newwindow {
1338 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1341 #PanelUI-panic-warning {
1348 #PanelUI-panic-view-button {
1349 background-color: #FF0000;
1353 #PanelUI-panic-view-button:hover {
1354 background-color: #FFCF00;
1357 #PanelUI-panic-view-button:hover:active {
1358 background-color: #FF9F00;
1361 #PanelUI-panic-view-button > .toolbarbutton-text {
1366 #panic-button-success-closebutton {
1369 #panic-button-success-closebutton:hover {
1372 #panic-button-success-closebutton:hover:active {
1375 /* === END panelUIOverlay.inc.css === */
1378 background-color: #000000;
1381 #PanelUI-contents #zoom-out-btn {
1383 padding-right: 12px;
1386 #PanelUI-contents #zoom-in-btn {
1388 padding-right: 12px;
1391 /* bookmark panel submenus */
1393 #BMB_bookmarksPopup menupopup[placespopup=true] {
1394 /* background: transparent;
1399 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1400 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1401 /* background: var(--panel-arrowcontent-background);
1402 border: var(--panel-arrowcontent-border);
1403 border-radius: 3.5px;
1407 #BMB_bookmarksPopup menupopup {
1408 /* padding-top: 2px;*/
1411 /* Add some space at the top because there are no headers: */
1412 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1413 /* padding-top: 4px;*/
1416 /* bookmark panel separator */
1417 #BMB_bookmarksPopup menuseparator {
1422 .subviewbutton > .menu-right,
1423 .subviewbutton > .menu-iconic-left {
1424 /* padding-top: 1px;
1426 margin-bottom: 2px;*/
1429 /* Disabled empty item looks too small otherwise, because it has no icon. */
1430 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1431 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1432 menuitem[type="checkbox"].subviewbutton {
1433 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1434 * 2px for its border, see above */
1435 /* min-height: 22px;*/
1438 .subviewbutton > .toolbarbutton-text {
1439 /* padding-top: 3px;
1440 padding-bottom: 3px;*/
1443 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1444 -moz-appearance: none;
1446 -moz-margin-start: 3px;
1449 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1451 -moz-padding-start: 0;
1455 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1456 /* transform: scaleX(-1); */
1459 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1463 .subviewbutton > .toolbarbutton-text {
1464 -moz-padding-start: 16px;
1467 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1468 -moz-padding-start: 0;
1471 /* subviewbutton entries for social sidebars have images that come from external
1472 /* sources, and are not guaranteed to be the size we want, so force the size on
1474 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1479 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1483 menu.subviewbutton > .menu-right {
1484 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow);
1485 /* Reset the rect we inherit from the button: */
1486 -moz-image-region: auto;
1488 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1489 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1490 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1492 menu[disabled="true"].subviewbutton > .menu-right {
1493 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");