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[constrain-size="true"] > .toolbarbutton-icon,
296 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-container > .toolbarbutton-icon,
297 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
298 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-container > .toolbarbutton-icon {
303 .customization-palette .toolbarbutton-1 {
304 -moz-appearance: none;
305 -moz-box-orient: vertical;
308 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
309 -moz-appearance: none;
310 -moz-box-orient: vertical;
311 width: calc(22.35em / 3 - 0.1px - 2px);
312 height: calc(49px + 2.2em);
316 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
317 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
318 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
321 .panel-customization-placeholder-child {
323 /* padding: 2px 6px;*/
326 .panelUI-grid .toolbarbutton-1[type="menu"] {
327 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
328 background-position: right 3px top 16px;
329 background-repeat: no-repeat;
332 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
333 background-position: left 3px top 16px;
336 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
340 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
341 -moz-box-align: center;
343 -moz-margin-start: -16px;
345 margin-bottom: 2.2em;
349 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
350 border-radius: 0 0 0 2px;
353 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
354 border-radius: 0 0 2px 0;
357 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
361 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
362 width: calc(22.35em / 3 - 0.1px);
363 margin: 0 !important;
366 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
367 -moz-box-align: center;
368 -moz-box-pack: center;
371 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
375 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
378 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
379 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
380 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
381 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
382 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
383 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
384 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
385 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
386 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
391 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
392 * which was affecting subview display. Because of this, we're hiding the iframe *only*
393 * when displaying a subview. The discerning user might notice this, but it's not nearly
394 * as bad as the brokenness.
395 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
398 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
402 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
406 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
407 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
408 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container,
409 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
410 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
411 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container,
412 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
413 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
414 .panel-customization-placeholder-child > .toolbarbutton-icon {
417 /* Explanation for the below formula (A / B - C)
419 Each button is 22.35em / 3 - 0.1px wide
421 Each button has two margins.
423 The button icon is 32 pixels wide.
424 The button has 12px of horizontal padding (6 on each side).
425 The button has 0px of horizontal border (0 on each side).
426 Total width of button's icon + button padding should therefore be 44px,
427 which means each horizontal margin should be the half the button's width - (44/2) px.
429 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
432 /* above we treat the container as the icon for the margins, that is so the
433 /* badge itself is positioned correctly. Here we make sure that the icon itself
434 /* has the minum size we want, but no padding/margin. */
435 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-container > .toolbarbutton-icon {
442 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
446 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
450 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
451 -moz-margin-end: 2px;
454 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
455 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
461 #zoom-in-button > .toolbarbutton-text,
462 #zoom-out-button > .toolbarbutton-text,
463 #zoom-reset-button > .toolbarbutton-icon {
470 flex-direction: column;
471 /* background-color: hsla(210,4%,10%,.07);*/
474 /* min-height: 4em;*/
475 border-bottom-right-radius: 4px;
476 border-bottom-left-radius: 4px;
479 #main-window[customizing] #PanelUI-footer-fxa > toolbarseparator {
483 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
484 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
485 #PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
489 #PanelUI-fxa-status {
494 #PanelUI-footer-inner,
495 #PanelUI-footer-fxa {
497 border-top: 1px solid #9C9CFF;
500 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
501 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
505 #PanelUI-footer-inner > toolbarseparator,
506 #PanelUI-footer-fxa > toolbarseparator {
508 border-left: 1px solid #9C9CFF;
512 #PanelUI-footer-inner:hover > toolbarseparator,
513 #PanelUI-footer-fxa:hover > toolbarseparator {
517 #PanelUI-update-status,
525 box-sizing: border-box;
530 transition: background-color;
531 -moz-box-orient: horizontal;
534 #PanelUI-update-status {
535 border-top: 1px solid #9C9CFF;
536 border-bottom: 1px solid transparent;
540 #PanelUI-update-status > .toolbarbutton-text {
541 width: 0; /* Fancy cropping solution for flexbox. */
544 #PanelUI-help[panel-multiview-anchor="true"] {
545 -moz-image-region: rect(0, 32px, 16px, 16px);
553 #PanelUI-update-status > .toolbarbutton-text,
554 #PanelUI-fxa-label > .toolbarbutton-text,
555 #PanelUI-customize > .toolbarbutton-text {
561 #PanelUI-help > .toolbarbutton-text,
562 #PanelUI-quit > .toolbarbutton-text,
563 #PanelUI-fxa-avatar > .toolbarbutton-text {
567 #PanelUI-update-status > .toolbarbutton-icon,
568 #PanelUI-fxa-label > .toolbarbutton-icon,
569 #PanelUI-fxa-icon > .toolbarbutton-icon,
570 #PanelUI-customize > .toolbarbutton-icon,
571 #PanelUI-help > .toolbarbutton-icon,
572 #PanelUI-quit > .toolbarbutton-icon {
577 -moz-padding-start: 15px;
578 -moz-padding-end: 15px;
584 -moz-padding-start: 15px;
585 -moz-border-start-style: none;
588 #PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
589 #PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
590 -moz-padding-start: 0px;
593 #PanelUI-update-status {
594 width: calc(22.35em + 30px);
595 -moz-padding-start: 15px;
596 -moz-border-start-style: none;
599 #PanelUI-update-status {
600 list-style-image: url(chrome://branding/content/icon16.png);
605 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
608 #PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon {
609 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
612 #PanelUI-fxa-icon[fxastatus="migrate-signup"],
613 #PanelUI-fxa-icon[fxastatus="migrate-verify"] {
614 list-style-image: url(chrome://global/skin/warning-16.png);
618 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
621 #customization-panelHolder #PanelUI-customize {
622 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
626 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
630 -moz-border-end-style: none;
631 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
639 -moz-image-region: rect(0, 16px, 16px, 0);
642 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
643 #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
647 #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
651 #PanelUI-fxa-avatar[disabled],
652 #PanelUI-fxa-icon[disabled] {
656 #PanelUI-fxa-avatar {
660 background-repeat: no-repeat;
661 background-position: 0 0;
662 background-size: contain;
670 #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
671 list-style-image: url(chrome://browser/skin/fxa/default-profile-image.svg);
674 #PanelUI-customize:hover,
675 #PanelUI-help:not([disabled]):hover,
676 #PanelUI-quit:not([disabled]):hover,
677 #PanelUI-customize:hover:active,
678 #PanelUI-help:not([disabled]):hover:active,
679 #PanelUI-quit:not([disabled]):hover:active {
680 -moz-image-region: rect(0, 32px, 16px, 16px);
683 #PanelUI-help[disabled],
684 #PanelUI-quit[disabled] {
685 -moz-image-region: rect(0, 48px, 16px, 32px);
688 #PanelUI-fxa-status:not([disabled]):hover,
689 #PanelUI-fxa-icon:not([disabled]):hover,
690 #PanelUI-help:not([disabled]):hover,
691 #PanelUI-customize:hover,
692 #PanelUI-quit:not([disabled]):hover {
695 #PanelUI-fxa-status:not([disabled]):hover:active,
696 #PanelUI-fxa-icon:not([disabled]):hover:active,
697 #PanelUI-help:not([disabled]):hover:active,
698 #PanelUI-customize:hover:active,
699 #PanelUI-quit:not([disabled]):hover:active {
702 #PanelUI-fxa-status:not([disabled]):hover,
703 #PanelUI-fxa-status:not([disabled]):hover:active {
706 #PanelUI-footer-fxa[fxastatus="error"] {
707 background-color: #FF0000;
711 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
712 background-color: #FFCF00;
715 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
716 background-color: #FF9F00;
719 #PanelUI-update-status {
723 #PanelUI-update-status[update-status="succeeded"] {
724 background-color: #008484;
728 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
729 background-color: #FFCF00;
732 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
733 background-color: #FF9F00;
736 #PanelUI-update-status[update-status="failed"] {
737 background-color: #FF0000;
741 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
742 background-color: #FFCF00;
745 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
746 background-color: #FF9F00;
749 #PanelUI-quit:not([disabled]):hover {
750 background-color: #FF0000;
753 #PanelUI-quit:not([disabled]):hover:active {
754 background-color: #FF9F00;
757 #customization-panelHolder #PanelUI-customize {
759 background-color: #008484;
764 #customization-panelHolder #PanelUI-customize + toolbarseparator {
768 #customization-panelHolder #PanelUI-customize:hover,
769 #customization-panelHolder #PanelUI-customize:hover:active {
770 background-color: #FFCF00;
774 #customization-palette .toolbarbutton-multiline-text,
775 #customization-palette .toolbarbutton-text {
779 panelview .toolbarbutton-1,
781 .widget-overflow-list .toolbarbutton-1,
782 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
783 .share-provider-button,
784 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
786 background-color: hsla(210,4%,10%,0);
789 border-color: hsla(210,4%,10%,0);*/
792 panelview .toolbarbutton-1,
794 .widget-overflow-list .toolbarbutton-1,
795 .share-provider-button,
796 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
800 .subviewbutton.panel-subview-footer {
801 /* border-radius: 0; */
805 .subviewbutton.panel-subview-footer > .menu-text {
806 -moz-margin-start: 0px !important;
807 -moz-padding-start: 6px;
808 -moz-padding-end: 6px;
813 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
817 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
822 .subviewbutton.panel-subview-footer > .menu-accel-container {
823 -moz-padding-start: 6px;
826 .subviewbutton:not(.panel-subview-footer) {
830 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
831 /* Bookmark items need a more specific selector. */
832 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
833 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
837 .PanelUI-subView .subviewbutton[shortcut]::after {
838 content: attr(shortcut);
843 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
844 -moz-margin-start: 10px;
847 /* This is a <label> but it should fit in with the menu font- and colorwise. */
848 #PanelUI-characterEncodingView-autodetect-label {
853 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
858 panelview .toolbarbutton-1,
859 .widget-overflow-list .toolbarbutton-1 {
864 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
865 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
866 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
867 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
868 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
869 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
870 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
871 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
872 background-color: hsla(210,4%,10%,.08);
873 border-color: hsla(210,4%,10%,.11);
876 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
877 border-color: hsla(210,4%,10%,.11);
880 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
881 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
882 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
883 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
884 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
885 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
886 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
887 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
888 background-color: hsla(210,4%,10%,.12);
889 border-color: hsla(210,4%,10%,.14);
890 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
893 .subviewbutton.panel-subview-footer {
894 margin: 4px -4px -4px;
895 background-color: hsla(210,4%,10%,.07);
896 border-top: 1px solid hsla(210,4%,10%,.12);
901 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
902 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
903 background-color: hsla(210,4%,10%,.1);
904 border-top: 1px solid hsla(210,4%,10%,.12);
907 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
908 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
909 background-color: hsla(210,4%,10%,.15);
910 border-top: 1px solid hsla(210,4%,10%,.12);
911 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
914 #BMB_bookmarksPopup .subviewbutton {
919 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
923 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
924 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
925 -moz-appearance: none;
930 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
931 #BMB_bookmarksPopup arrowscrollbox {
935 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
936 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
940 / Popups with only one item don't have a footer /
941 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
942 / These popups never have a footer /
943 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
944 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
945 / And so they need some bottom padding: /
949 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
950 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
955 .PanelUI-subView menuseparator,
956 .PanelUI-subView toolbarseparator,
957 .cui-widget-panelview menuseparator {
958 -moz-appearance: none;
960 border-top: 1px solid #9C9CFF;
965 .PanelUI-subView menuseparator,
966 .PanelUI-subView toolbarseparator {
967 /* -moz-margin-start: -5px;
968 -moz-margin-end: -4px;*/
971 .PanelUI-subView menuseparator.small-separator,
972 .PanelUI-subView toolbarseparator.small-separator {
977 .cui-widget-panelview menuseparator.small-separator {
978 /* margin-left: 10px;
979 margin-right: 10px;*/
982 .subviewbutton > .menu-accel-container {
983 -moz-box-pack: start;
984 -moz-margin-start: 10px;
985 -moz-margin-end: auto;
989 #PanelUI-historyItems > toolbarbutton {
990 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
993 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
994 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
995 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1000 toolbarbutton[panel-multiview-anchor="true"],
1001 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1003 background-color: #008484;
1006 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1010 #PanelUI-help[panel-multiview-anchor="true"] {
1011 background-image: none;
1014 #PanelUI-help[panel-multiview-anchor="true"]::after {
1020 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1021 background-repeat: no-repeat;
1022 background-color: #008484;
1023 background-position: left 10px center, 0;
1026 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1027 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1028 background-position: right 10px center, 0;
1031 toolbarbutton[panel-multiview-anchor="true"] {
1032 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1033 background-position: right calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
1034 background-repeat: no-repeat;
1037 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1038 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1039 background-position: left calc((22.35em / 3 - 0.1px) / 2 - 38px + 2px) center;
1042 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1043 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1047 #search-container[cui-areatype="menu-panel"],
1048 #wrapper-search-container[place="panel"] {
1052 #search-container[cui-areatype="menu-panel"] {
1057 toolbarpaletteitem[place="palette"] > #search-container {
1062 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1064 transition-property: background-color, border-color;
1065 transition-duration: 150ms;
1068 /* Make direct siblings overlap borders: */
1069 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1070 /* border-top-color: transparent !important; */
1073 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1074 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1075 /* margin-top: -1px; */
1078 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1083 min-width: calc(22.35em / 3 - 0.1px);
1084 max-width: calc(22.35em / 3 - 0.1px);
1085 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1086 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1087 height: calc(2.2em + 4px);
1089 -moz-box-orient: horizontal;
1092 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1093 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1094 /* reduce the width with 2px for this button to compensate for two separators
1096 min-width: calc(22.35em / 3 - 0.1px - 2px);
1097 max-width: calc(22.35em / 3 - 0.1px - 2px);
1100 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1104 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1108 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1109 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1110 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1111 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1112 border-top-right-radius: 0;
1113 border-bottom-right-radius: 0;
1116 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1117 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1118 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1119 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1120 border-top-left-radius: 0;
1121 border-bottom-left-radius: 0;
1124 .toolbaritem-combined-buttons > separator {
1125 -moz-appearance: none;
1127 -moz-box-align: stretch;
1130 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1134 /* background: hsla(210,4%,10%,.15);*/
1135 transition-property: margin;
1136 transition-duration: 10ms;
1137 transition-timing-function: ease;
1140 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1144 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1148 .cui-widget-panelview,
1149 #widget-overflow-scroller {
1154 #widget-overflow-scroller {
1157 margin-bottom: 10px;
1160 #widget-overflow-list {
1163 padding-right: 10px;
1166 toolbaritem[overflowedItem=true],
1167 toolbarbutton[overflowedItem=true] {
1171 background-repeat: no-repeat;
1172 background-position: 0 center;
1175 .widget-overflow-list .toolbarbutton-1,
1176 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1177 -moz-box-align: center;
1178 -moz-box-orient: horizontal;
1181 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1182 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1184 -moz-padding-start: .5em;
1187 #widget-overflow-list > .toolbaritem-combined-buttons {
1191 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1196 -moz-margin-end: -1px;
1199 .subviewbutton[checked="true"] {
1200 background-image: url("chrome://global/skin/menu/menu-check.gif");
1201 background-position: top 5px left 4px;
1202 background-repeat: no-repeat;
1205 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1206 background-position: top 5px right 4px;
1209 .subviewbutton[checked="true"]:hover {
1210 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1213 .subbiewbutton > .menu-iconic-left {
1214 -moz-margin-end: 3px;
1217 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1221 .panel-mainview[panelid=customizationui-widget-panel],
1222 #customizationui-widget-multiview > .panel-viewcontainer,
1223 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1224 #PanelUI-panicView > .panel-subview-body,
1226 #PanelUI-pocketView > .panel-subview-body,
1227 #PanelUI-pocketView {
1232 #PanelUI-panicView.cui-widget-panelview {
1236 #PanelUI-panic-timeframe {
1238 border-bottom: 1px solid #A09090;
1241 #panic-button-success-icon,
1242 #PanelUI-panic-timeframe-icon,
1243 #PanelUI-panic-timeframe-icon-small {
1244 background-color: transparent;
1245 -moz-margin-end: 10px;
1248 #panic-button-success-icon,
1249 #PanelUI-panic-timeframe-icon {
1250 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1255 #PanelUI-panic-timeframe-icon-small {
1256 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1261 /* current attribute is only set when in use as a subview instead of a main view */
1262 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1266 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1270 #panic-button-success-header,
1271 #PanelUI-panic-header {
1272 -moz-box-align: center;
1276 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1280 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1281 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1282 transform: scaleX(-1);
1289 .subviewradio@buttonStateHover@ {
1292 .subviewradio[selected],
1293 .subviewradio[selected]:hover,
1294 .subviewradio@buttonStateActive@ {
1297 .subviewradio > .radio-check {
1300 .subviewradio > .radio-check[selected] {
1304 #PanelUI-panic-explanations {
1305 padding: 10px 10px 0;
1308 #PanelUI-panic-actionlist-main-label {
1313 .PanelUI-panic-actionlist {
1314 -moz-padding-start: 20px;
1316 padding-bottom: 2px;
1317 background-size: 16px 16px;
1318 background-repeat: no-repeat;
1319 background-color: transparent;
1320 background-position: center left;
1323 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1324 background-position: center right;
1327 #PanelUI-panic-actionlist-cookies {
1328 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1331 #PanelUI-panic-actionlist-history {
1332 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1335 #PanelUI-panic-actionlist-windows {
1336 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1339 #PanelUI-panic-actionlist-newwindow {
1340 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1343 #PanelUI-panic-warning {
1350 #PanelUI-panic-view-button {
1351 background-color: #FF0000;
1355 #PanelUI-panic-view-button:hover {
1356 background-color: #FFCF00;
1359 #PanelUI-panic-view-button:hover:active {
1360 background-color: #FF9F00;
1363 #PanelUI-panic-view-button > .toolbarbutton-text {
1368 #panic-button-success-closebutton {
1371 #panic-button-success-closebutton:hover {
1374 #panic-button-success-closebutton:hover:active {
1377 /* === END panelUIOverlay.inc.css === */
1380 background-color: #000000;
1383 #PanelUI-contents #zoom-out-btn {
1385 padding-right: 12px;
1388 #PanelUI-contents #zoom-in-btn {
1390 padding-right: 12px;
1393 /* bookmark panel submenus */
1395 #BMB_bookmarksPopup menupopup[placespopup=true] {
1396 /* background: transparent;
1401 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1402 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1403 /* background: var(--panel-arrowcontent-background);
1404 border: var(--panel-arrowcontent-border);
1405 border-radius: 3.5px;
1409 #BMB_bookmarksPopup menupopup {
1410 /* padding-top: 2px;*/
1413 /* Add some space at the top because there are no headers: */
1414 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1415 /* padding-top: 4px;*/
1418 /* bookmark panel separator */
1419 #BMB_bookmarksPopup menuseparator {
1424 .subviewbutton > .menu-right,
1425 .subviewbutton > .menu-iconic-left {
1426 /* padding-top: 1px;
1428 margin-bottom: 2px;*/
1431 /* Disabled empty item looks too small otherwise, because it has no icon. */
1432 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1433 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1434 menuitem[type="checkbox"].subviewbutton {
1435 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1436 * 2px for its border, see above */
1437 /* min-height: 22px;*/
1440 .subviewbutton > .toolbarbutton-text {
1441 /* padding-top: 3px;
1442 padding-bottom: 3px;*/
1445 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1446 -moz-appearance: none;
1448 -moz-margin-start: 3px;
1451 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1453 -moz-padding-start: 0;
1457 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1458 /* transform: scaleX(-1); */
1461 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1465 .subviewbutton > .toolbarbutton-text {
1466 -moz-padding-start: 16px;
1469 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1470 -moz-padding-start: 0;
1473 /* subviewbutton entries for social sidebars have images that come from external
1474 /* sources, and are not guaranteed to be the size we want, so force the size on
1476 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1481 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1485 menu.subviewbutton > .menu-right {
1486 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow);
1487 /* Reset the rect we inherit from the button: */
1488 -moz-image-region: auto;
1490 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1491 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1492 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1494 menu[disabled="true"].subviewbutton > .menu-right {
1495 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");