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 === */
8 --panel-ui-exit-subview-gutter-width: 38px;
11 #PanelUI-popup #PanelUI-contents:empty {
15 #PanelUI-popup #PanelUI-contents:empty::before {
17 background-image: url(chrome://browser/skin/customizableui/whimsy.png);
18 background-size: 64px 64px;
23 transition: transform 1s ease-out;
24 animation: whimsyMoveX 3.05s linear 0s infinite alternate,
25 whimsyMoveY 3.4s linear 0s infinite alternate;
28 #PanelUI-popup #PanelUI-contents:not(:hover):empty::before {
29 filter: grayscale(100%);
32 #PanelUI-popup #PanelUI-contents:active:empty::before {
33 animation: whimsyMoveX 3.05s linear 0s infinite alternate,
34 whimsyMoveY 3.4s linear 0s infinite alternate,
35 whimsyRotate 1s linear 0s infinite normal;
38 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before {
39 animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
40 whimsyMoveY 3.4s linear 0s infinite alternate;
43 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):active:empty::before {
44 animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
45 whimsyMoveY 3.4s linear 0s infinite alternate,
46 whimsyRotate 1s linear 0s infinite normal;
49 @media (min-resolution: 2dppx) {
50 #PanelUI-popup #PanelUI-contents:empty::before {
51 background-image: url("chrome://browser/skin/customizableui/whimsy@2x.png");
55 @keyframes whimsyMoveX {
56 /* These values are adjusted for the padding on the panel. */
57 from { margin-left: -9px; } to { margin-left: calc(100% - 55px); }
60 @keyframes whimsyMoveXRTL {
61 /* These values are adjusted for the padding on the panel. */
62 from { margin-right: -9px; } to { margin-right: calc(100% - 55px); }
65 @keyframes whimsyMoveY {
66 /* These values are adjusted for the padding and height of the panel. */
67 from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
70 @keyframes whimsyRotate {
71 to { transform: perspective(5000px) rotateY(360deg); }
74 #customization-panelHolder {
79 -moz-margin-start: 3px;
82 #PanelUI-button:-moz-locale-dir(rtl) {
85 #PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
89 background-size: contain;
93 #PanelUI-menu-button[badge-status="update-succeeded"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
94 background: #008484 url(chrome://browser/skin/update-badge.svg) no-repeat center;
98 #PanelUI-menu-button[badge-status="update-failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
99 background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center;
103 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
104 background: transparent url(chrome://browser/skin/warning.svg) no-repeat center;
109 #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive {
114 -moz-margin-start: var(--panel-ui-exit-subview-gutter-width);
117 .panel-viewstack[viewtype="main"] > .panel-subviews {
118 transform: translateX(22.35em);
121 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
122 transform: translateX(-22.35em);
125 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
129 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
133 .panel-subview-body {
139 #PanelUI-popup .panel-subview-body {
144 .panel-subview-header,
145 .subviewbutton.panel-subview-footer {
146 box-sizing: border-box;
147 /* min-height: 41px; */
151 .panel-subview-header {
153 background-color: #A09090;
155 font-variant: small-caps;
159 .panel-subview-footer {
160 border-top: 1px solid #A09090;
163 .cui-widget-panelview .panel-subview-header {
167 .cui-widget-panelview .subviewbutton.panel-subview-footer {
169 -moz-box-pack: center;
174 flex-direction: column;
178 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
181 #PanelUI-popup > arrowscrollbox > scrollbox {
185 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
194 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
195 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
196 /* line-height: 1.1;*/
200 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
201 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
205 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
206 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
208 clip: rect(auto, auto, 2.3em, auto);
211 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
212 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
214 /* Need to override toolkit theming which sets margin: 0 !important; */
215 margin: 2px 0 0 !important;
218 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
223 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
224 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
225 -moz-margin-start: 0;
233 .panel-mainview:not([panelid="PanelUI-popup"]) {
237 panelview:not([mainview]) .toolbarbutton-text,
238 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
243 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
247 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
251 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
252 border-radius: 4px 4px 0 0;
255 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
256 border-radius: 0 0 4px 4px;
267 #PanelUI-contents-scroller {
274 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
280 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
281 .panelUI-grid .toolbarbutton-1,
282 .panel-customization-placeholder-child {
283 -moz-appearance: none;
284 -moz-box-orient: vertical;
285 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
286 height: calc(51px + 2.2em);
289 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
290 * should have a min-width set so they abide by the width set above (which they do outside of
291 * customize mode because they're in a flexed container) */
292 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
296 /* Help SDK buttons fit in. */
297 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
298 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
299 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
300 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
305 .customization-palette .toolbarbutton-1 {
306 -moz-appearance: none;
307 -moz-box-orient: vertical;
310 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
311 -moz-appearance: none;
312 -moz-box-orient: vertical;
313 width: calc(22.35em / 3 - 0.1px - 2px);
314 height: calc(49px + 2.2em);
318 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
319 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
320 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
323 .panel-customization-placeholder-child {
325 /* padding: 2px 6px;*/
328 .panelUI-grid .toolbarbutton-1[type="menu"] {
329 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
330 background-position: right 3px top 16px;
331 background-repeat: no-repeat;
334 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
335 background-position: left 3px top 16px;
338 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
342 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
343 -moz-box-align: center;
345 -moz-margin-start: -16px;
347 margin-bottom: 2.2em;
351 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
352 border-radius: 0 0 0 2px;
355 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
356 border-radius: 0 0 2px 0;
359 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
363 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
364 width: calc(22.35em / 3 - 0.1px);
365 margin: 0 !important;
368 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
369 -moz-box-align: center;
370 -moz-box-pack: center;
373 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
377 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
380 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
381 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
382 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
383 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
384 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
385 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
386 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
387 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
388 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
393 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
394 * which was affecting subview display. Because of this, we're hiding the iframe *only*
395 * when displaying a subview. The discerning user might notice this, but it's not nearly
396 * as bad as the brokenness.
397 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
400 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
404 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
408 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
409 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
410 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
411 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
412 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
413 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
414 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
415 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
416 .panel-customization-placeholder-child > .toolbarbutton-icon {
419 /* Explanation for the below formula (A / B - C)
421 Each button is 22.35em / 3 - 0.1px wide
423 Each button has two margins.
425 The button icon is 32 pixels wide.
426 The button has 12px of horizontal padding (6 on each side).
427 The button has 0px of horizontal border (0 on each side).
428 Total width of button's icon + button padding should therefore be 44px,
429 which means each horizontal margin should be the half the button's width - (44/2) px.
431 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
434 /* above we treat the container as the icon for the margins, that is so the
435 /* badge itself is positioned correctly. Here we make sure that the icon itself
436 /* has the minum size we want, but no padding/margin. */
437 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon,
438 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
447 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
451 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
455 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
456 -moz-margin-end: 2px;
459 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
460 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
466 #zoom-in-button > .toolbarbutton-text,
467 #zoom-out-button > .toolbarbutton-text,
468 #zoom-reset-button > .toolbarbutton-icon {
475 flex-direction: column;
476 /* background-color: hsla(210,4%,10%,.07);*/
479 /* min-height: 4em;*/
480 border-bottom-right-radius: 4px;
481 border-bottom-left-radius: 4px;
484 #main-window[customizing] #PanelUI-footer-fxa > toolbarseparator {
488 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
489 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
490 #PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
494 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after {
495 content: url("chrome://browser/skin/warning.svg");
504 #PanelUI-update-status[update-status]::after {
508 margin-right: 16.5px;
510 background-size: contain;
514 #PanelUI-update-status[update-status="succeeded"]::after {
515 background-image: url(chrome://browser/skin/update-badge.svg);
516 background-color: #008484;
519 #PanelUI-update-status[update-status="failed"]::after {
520 background-image: url(chrome://browser/skin/update-badge-failed.svg);
521 background-color: #FF0000;
524 #PanelUI-fxa-status {
530 #PanelUI-footer-inner,
531 #PanelUI-footer-fxa:not([hidden]) {
533 border-top: 1px solid #9C9CFF;
536 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
537 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
541 #PanelUI-footer-inner > toolbarseparator,
542 #PanelUI-footer-fxa > toolbarseparator {
544 border-left: 1px solid #9C9CFF;
548 #PanelUI-footer-inner:hover > toolbarseparator,
549 #PanelUI-footer-fxa:hover > toolbarseparator {
553 #PanelUI-update-status,
561 box-sizing: border-box;
566 transition: background-color;
567 -moz-box-orient: horizontal;
570 #PanelUI-update-status {
571 border-top: 1px solid #9C9CFF;
572 border-bottom: 1px solid transparent;
576 #PanelUI-update-status > .toolbarbutton-text {
577 width: 0; /* Fancy cropping solution for flexbox. */
580 #PanelUI-help[panel-multiview-anchor="true"] {
581 -moz-image-region: rect(0, 32px, 16px, 16px);
589 #PanelUI-update-status > .toolbarbutton-text,
590 #PanelUI-fxa-label > .toolbarbutton-text,
591 #PanelUI-customize > .toolbarbutton-text {
597 #PanelUI-help > .toolbarbutton-text,
598 #PanelUI-quit > .toolbarbutton-text,
599 #PanelUI-fxa-avatar > .toolbarbutton-text {
603 #PanelUI-update-status > .toolbarbutton-icon,
604 #PanelUI-fxa-label > .toolbarbutton-icon,
605 #PanelUI-fxa-icon > .toolbarbutton-icon,
606 #PanelUI-customize > .toolbarbutton-icon,
607 #PanelUI-help > .toolbarbutton-icon,
608 #PanelUI-quit > .toolbarbutton-icon {
613 -moz-padding-start: 15px;
614 -moz-padding-end: 15px;
620 -moz-padding-start: 15px;
621 -moz-border-start-style: none;
624 #PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
625 #PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
626 -moz-padding-start: 0px;
629 #PanelUI-update-status {
630 width: calc(22.35em + 30px);
631 -moz-padding-start: 15px;
632 -moz-border-start-style: none;
635 #PanelUI-update-status {
636 list-style-image: url(chrome://branding/content/icon16.png);
641 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
644 #PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon {
645 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
648 #PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
649 #PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label {
650 list-style-image: url(chrome://browser/skin/warning.svg);
654 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
657 #customization-panelHolder #PanelUI-customize {
658 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
662 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
666 -moz-border-end-style: none;
667 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
675 -moz-image-region: rect(0, 16px, 16px, 0);
678 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
679 #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
683 #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
687 #PanelUI-fxa-avatar[disabled],
688 #PanelUI-fxa-icon[disabled] {
692 #PanelUI-fxa-status[disabled] {
693 pointer-events: none;
696 #PanelUI-fxa-avatar {
700 background-repeat: no-repeat;
701 background-position: 0 0;
702 background-size: contain;
710 #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
711 list-style-image: url(chrome://browser/skin/fxa/default-profile-image.svg);
714 #PanelUI-customize:hover,
715 #PanelUI-help:not([disabled]):hover,
716 #PanelUI-quit:not([disabled]):hover,
717 #PanelUI-customize:hover:active,
718 #PanelUI-help:not([disabled]):hover:active,
719 #PanelUI-quit:not([disabled]):hover:active {
720 -moz-image-region: rect(0, 32px, 16px, 16px);
723 #PanelUI-help[disabled],
724 #PanelUI-quit[disabled] {
725 -moz-image-region: rect(0, 48px, 16px, 32px);
728 #PanelUI-fxa-icon:not([disabled]):hover,
729 #PanelUI-help:not([disabled]):hover,
730 #PanelUI-customize:hover,
731 #PanelUI-quit:not([disabled]):hover {
734 #PanelUI-fxa-icon:not([disabled]):hover:active,
735 #PanelUI-help:not([disabled]):hover:active,
736 #PanelUI-customize:hover:active,
737 #PanelUI-quit:not([disabled]):hover:active {
740 #PanelUI-fxa-status:not([disabled]):hover,
741 #PanelUI-fxa-status:not([disabled]):hover:active,
742 #PanelUI-fxa-icon:not([disabled]):hover,
743 #PanelUI-fxa-icon:not([disabled]):hover:active {
746 #PanelUI-footer-fxa[fxastatus="error"] {
747 background-color: #FF0000;
751 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
752 background-color: #FFCF00;
755 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
756 background-color: #FF9F00;
759 #PanelUI-update-status {
763 #PanelUI-update-status[update-status="succeeded"] {
764 background-color: #008484;
768 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
769 background-color: #FFCF00;
772 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
773 background-color: #FF9F00;
776 #PanelUI-update-status[update-status="failed"] {
777 background-color: #FF0000;
781 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
782 background-color: #FFCF00;
785 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
786 background-color: #FF9F00;
789 #PanelUI-quit:not([disabled]):hover {
790 background-color: #FF0000;
793 #PanelUI-quit:not([disabled]):hover:active {
794 background-color: #FF9F00;
797 #customization-panelHolder #PanelUI-customize {
799 background-color: #008484;
804 #customization-panelHolder #PanelUI-customize + toolbarseparator {
808 #customization-panelHolder #PanelUI-customize:hover,
809 #customization-panelHolder #PanelUI-customize:hover:active {
810 background-color: #FFCF00;
814 #customization-palette .toolbarbutton-multiline-text,
815 #customization-palette .toolbarbutton-text {
819 panelview .toolbarbutton-1,
821 .widget-overflow-list .toolbarbutton-1,
822 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
823 .share-provider-button,
824 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
826 background-color: hsla(210,4%,10%,0);
829 border-color: hsla(210,4%,10%,0);*/
832 panelview .toolbarbutton-1,
834 .widget-overflow-list .toolbarbutton-1,
835 .share-provider-button,
836 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
840 .subviewbutton.panel-subview-footer {
841 /* border-radius: 0; */
845 .subviewbutton.panel-subview-footer > .menu-text {
846 -moz-margin-start: 0px !important;
847 -moz-padding-start: 6px;
848 -moz-padding-end: 6px;
853 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
857 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
862 .subviewbutton.panel-subview-footer > .menu-accel-container {
863 -moz-padding-start: 6px;
866 .subviewbutton:not(.panel-subview-footer) {
870 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
871 /* Bookmark items need a more specific selector. */
872 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
873 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
877 .PanelUI-subView .subviewbutton[shortcut]::after {
878 content: attr(shortcut);
883 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
884 -moz-margin-start: 10px;
887 /* This is a <label> but it should fit in with the menu font- and colorwise. */
888 #PanelUI-characterEncodingView-autodetect-label {
893 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
898 panelview .toolbarbutton-1,
899 .widget-overflow-list .toolbarbutton-1 {
904 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
905 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
906 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
907 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
908 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
909 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
910 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
911 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
912 background-color: hsla(210,4%,10%,.08);
913 border-color: hsla(210,4%,10%,.11);
916 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
917 border-color: hsla(210,4%,10%,.11);
920 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
921 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
922 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
923 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
924 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
925 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
926 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
927 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
928 background-color: hsla(210,4%,10%,.12);
929 border-color: hsla(210,4%,10%,.14);
930 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
933 .subviewbutton.panel-subview-footer {
934 margin: 4px -4px -4px;
935 background-color: hsla(210,4%,10%,.07);
936 border-top: 1px solid hsla(210,4%,10%,.12);
941 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
942 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
943 background-color: hsla(210,4%,10%,.1);
944 border-top: 1px solid hsla(210,4%,10%,.12);
947 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
948 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
949 background-color: hsla(210,4%,10%,.15);
950 border-top: 1px solid hsla(210,4%,10%,.12);
951 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
954 #BMB_bookmarksPopup .subviewbutton {
959 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
963 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
964 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
965 -moz-appearance: none;
970 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
971 #BMB_bookmarksPopup arrowscrollbox {
975 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
976 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
980 / Popups with only one item don't have a footer /
981 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
982 / These popups never have a footer /
983 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
984 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
985 / And so they need some bottom padding: /
989 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
990 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
995 .PanelUI-subView menuseparator,
996 .PanelUI-subView toolbarseparator,
997 .cui-widget-panelview menuseparator {
998 -moz-appearance: none;
1000 border-top: 1px solid #9C9CFF;
1005 .PanelUI-subView menuseparator,
1006 .PanelUI-subView toolbarseparator {
1007 /* -moz-margin-start: -5px;
1008 -moz-margin-end: -4px;*/
1011 .PanelUI-subView menuseparator.small-separator,
1012 .PanelUI-subView toolbarseparator.small-separator {
1013 /* margin-left: 5px;
1014 margin-right: 5px;*/
1017 .cui-widget-panelview menuseparator.small-separator {
1018 /* margin-left: 10px;
1019 margin-right: 10px;*/
1022 .subviewbutton > .menu-accel-container {
1023 -moz-box-pack: start;
1024 -moz-margin-start: 10px;
1025 -moz-margin-end: auto;
1029 #PanelUI-historyItems > toolbarbutton {
1030 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1033 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1034 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1035 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1040 toolbarbutton[panel-multiview-anchor="true"],
1041 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1043 background-color: #008484;
1046 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1050 #PanelUI-help[panel-multiview-anchor="true"] {
1051 background-image: none;
1054 #PanelUI-help[panel-multiview-anchor="true"]::after {
1059 width: var(--panel-ui-exit-subview-gutter-width);
1060 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1061 background-repeat: no-repeat;
1062 background-color: #008484;
1063 background-position: left 10px center, 0;
1066 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1067 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1068 background-position: right 10px center, 0;
1071 toolbarbutton[panel-multiview-anchor="true"] {
1072 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1073 background-position: right calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
1074 background-repeat: no-repeat;
1077 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1078 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1079 background-position: left calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
1082 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1083 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1087 #search-container[cui-areatype="menu-panel"],
1088 #wrapper-search-container[place="panel"] {
1092 #search-container[cui-areatype="menu-panel"] {
1097 toolbarpaletteitem[place="palette"] > #search-container {
1102 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1104 transition-property: background-color, border-color;
1105 transition-duration: 150ms;
1108 /* Make direct siblings overlap borders: */
1109 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1110 /* border-top-color: transparent !important; */
1113 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1114 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1115 /* margin-top: -1px; */
1118 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1123 min-width: calc(22.35em / 3 - 0.1px);
1124 max-width: calc(22.35em / 3 - 0.1px);
1125 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1126 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1127 height: calc(2.2em + 4px);
1129 -moz-box-orient: horizontal;
1132 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1133 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1134 /* reduce the width with 2px for this button to compensate for two separators
1136 min-width: calc(22.35em / 3 - 0.1px - 2px);
1137 max-width: calc(22.35em / 3 - 0.1px - 2px);
1140 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1144 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1148 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1149 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1150 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1151 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1152 border-top-right-radius: 0;
1153 border-bottom-right-radius: 0;
1156 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1157 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1158 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1159 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1160 border-top-left-radius: 0;
1161 border-bottom-left-radius: 0;
1164 .toolbaritem-combined-buttons > separator {
1165 -moz-appearance: none;
1167 -moz-box-align: stretch;
1170 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1174 /* background: hsla(210,4%,10%,.15);*/
1175 transition-property: margin;
1176 transition-duration: 10ms;
1177 transition-timing-function: ease;
1180 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1184 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1188 .cui-widget-panelview,
1189 #widget-overflow-scroller {
1194 #widget-overflow-scroller {
1197 margin-bottom: 10px;
1200 #widget-overflow-list {
1203 padding-right: 10px;
1206 toolbaritem[overflowedItem=true],
1207 toolbarbutton[overflowedItem=true] {
1211 background-repeat: no-repeat;
1212 background-position: 0 center;
1215 .widget-overflow-list .toolbarbutton-1,
1216 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1217 -moz-box-align: center;
1218 -moz-box-orient: horizontal;
1221 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1222 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1224 -moz-padding-start: .5em;
1227 #widget-overflow-list > .toolbaritem-combined-buttons {
1231 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1236 -moz-margin-end: -1px;
1239 .subviewbutton[checked="true"] {
1240 background-image: url("chrome://global/skin/menu/menu-check.gif");
1241 background-position: top 5px left 4px;
1242 background-repeat: no-repeat;
1245 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1246 background-position: top 5px right 4px;
1249 .subviewbutton[checked="true"]:hover {
1250 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1253 .subbiewbutton > .menu-iconic-left {
1254 -moz-margin-end: 3px;
1257 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1261 .panel-mainview[panelid=customizationui-widget-panel],
1262 #customizationui-widget-multiview > .panel-viewcontainer,
1263 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1264 #PanelUI-panicView > .panel-subview-body,
1265 #PanelUI-panicView {
1270 #PanelUI-panicView.cui-widget-panelview {
1274 #PanelUI-panic-timeframe {
1276 border-bottom: 1px solid #A09090;
1279 #panic-button-success-icon,
1280 #PanelUI-panic-timeframe-icon,
1281 #PanelUI-panic-timeframe-icon-small {
1282 background-color: transparent;
1283 -moz-margin-end: 10px;
1286 #panic-button-success-icon,
1287 #PanelUI-panic-timeframe-icon {
1288 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1293 #PanelUI-panic-timeframe-icon-small {
1294 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1299 /* current attribute is only set when in use as a subview instead of a main view */
1300 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1304 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1308 #panic-button-success-header,
1309 #PanelUI-panic-header {
1310 -moz-box-align: center;
1314 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1318 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1319 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1320 transform: scaleX(-1);
1327 .subviewradio@buttonStateHover@ {
1330 .subviewradio[selected],
1331 .subviewradio[selected]:hover,
1332 .subviewradio@buttonStateActive@ {
1335 .subviewradio > .radio-check {
1338 .subviewradio > .radio-check[selected] {
1342 #PanelUI-panic-explanations {
1343 padding: 10px 10px 0;
1346 #PanelUI-panic-actionlist-main-label {
1351 .PanelUI-panic-actionlist {
1352 -moz-padding-start: 20px;
1354 padding-bottom: 2px;
1355 background-size: 16px 16px;
1356 background-repeat: no-repeat;
1357 background-color: transparent;
1358 background-position: center left;
1361 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1362 background-position: center right;
1365 #PanelUI-panic-actionlist-cookies {
1366 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1369 #PanelUI-panic-actionlist-history {
1370 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1373 #PanelUI-panic-actionlist-windows {
1374 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1377 #PanelUI-panic-actionlist-newwindow {
1378 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1381 #PanelUI-panic-warning {
1388 #PanelUI-panic-view-button {
1389 background-color: #FF0000;
1393 #PanelUI-panic-view-button:hover {
1394 background-color: #FFCF00;
1397 #PanelUI-panic-view-button:hover:active {
1398 background-color: #FF9F00;
1401 #PanelUI-panic-view-button > .toolbarbutton-text {
1406 #panic-button-success-closebutton {
1409 #panic-button-success-closebutton:hover {
1412 #panic-button-success-closebutton:hover:active {
1415 /* === END panelUIOverlay.inc.css === */
1418 background-color: #000000;
1421 #PanelUI-contents #zoom-out-btn {
1423 padding-right: 12px;
1426 #PanelUI-contents #zoom-in-btn {
1428 padding-right: 12px;
1431 /* bookmark panel submenus */
1433 #BMB_bookmarksPopup menupopup[placespopup=true] {
1434 /* background: transparent;
1439 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1440 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1441 /* background: var(--panel-arrowcontent-background);
1442 border: var(--panel-arrowcontent-border);
1443 border-radius: 3.5px;
1447 #BMB_bookmarksPopup menupopup {
1448 /* padding-top: 2px;*/
1451 /* Add some space at the top because there are no headers: */
1452 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1453 /* padding-top: 4px;*/
1456 /* bookmark panel separator */
1457 #BMB_bookmarksPopup menuseparator {
1462 .subviewbutton > .menu-right,
1463 .subviewbutton > .menu-iconic-left {
1464 /* padding-top: 1px;
1466 margin-bottom: 2px;*/
1469 .subviewbutton:-moz-any([image], .bookmark-item) > .toolbarbutton-icon {
1470 /* This catches bookmarks, history items, and sync tabs items */
1475 /* Disabled empty item looks too small otherwise, because it has no icon. */
1476 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1477 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1478 menuitem[type="checkbox"].subviewbutton {
1479 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1480 * 2px for its border, see above */
1481 /* min-height: 22px;*/
1484 .subviewbutton > .toolbarbutton-text {
1485 /* padding-top: 3px;
1486 padding-bottom: 3px;*/
1489 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1490 -moz-appearance: none;
1492 -moz-margin-start: 3px;
1495 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1497 -moz-padding-start: 0;
1501 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1502 /* transform: scaleX(-1); */
1505 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1509 .subviewbutton > .toolbarbutton-text {
1510 padding-inline-start: 18px; /* 16px for icons plus the 2px spacing from the rule below */
1513 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1514 padding-inline-start: 2px;
1517 /* subviewbutton entries for social sidebars have images that come from external
1518 /* sources, and are not guaranteed to be the size we want, so force the size on
1520 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1525 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1529 menu.subviewbutton > .menu-right {
1530 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow);
1531 /* Reset the rect we inherit from the button: */
1532 -moz-image-region: auto;
1534 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1535 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1536 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1538 menu[disabled="true"].subviewbutton > .menu-right {
1539 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");