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-bw.png");
22 transition: transform 1s ease-out;
23 animation: whimsyMoveX 3.05s linear 0s infinite alternate,
24 whimsyMoveY 3.4s linear 0s infinite alternate;
27 #PanelUI-popup #PanelUI-contents:active:empty::before {
28 animation: whimsyMoveX 3.05s linear 0s infinite alternate,
29 whimsyMoveY 3.4s linear 0s infinite alternate,
30 whimsyRotate 1s linear 0s infinite normal;
33 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before {
34 animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
35 whimsyMoveY 3.4s linear 0s infinite alternate;
38 #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):active:empty::before {
39 animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate,
40 whimsyMoveY 3.4s linear 0s infinite alternate,
41 whimsyRotate 1s linear 0s infinite normal;
44 #PanelUI-popup #PanelUI-contents:empty:hover::before {
45 background-image: url("chrome://browser/skin/customizableui/whimsy.png");
48 @media (min-resolution: 2dppx) {
49 #PanelUI-popup #PanelUI-contents:empty::before {
50 background-image: url("chrome://browser/skin/customizableui/whimsy-bw@2x.png");
51 background-size: 64px 64px;
53 #PanelUI-popup #PanelUI-contents:empty:hover::before {
54 background-image: url("chrome://browser/skin/customizableui/whimsy@2x.png");
58 @keyframes whimsyMoveX {
59 /* These values are adjusted for the padding on the panel. */
60 from { margin-left: -9px; } to { margin-left: calc(100% - 55px); }
63 @keyframes whimsyMoveXRTL {
64 /* These values are adjusted for the padding on the panel. */
65 from { margin-right: -9px; } to { margin-right: calc(100% - 55px); }
68 @keyframes whimsyMoveY {
69 /* These values are adjusted for the padding and height of the panel. */
70 from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); }
73 @keyframes whimsyRotate {
74 to { transform: perspective(5000px) rotateY(360deg); }
77 #customization-panelHolder {
82 -moz-margin-start: 3px;
85 #PanelUI-button:-moz-locale-dir(rtl) {
88 #PanelUI-menu-button[update-status="succeeded"] .toolbarbutton-badge::after {
89 content: url(chrome://browser/skin/update-badge.svg);
90 background-color: #008484;
96 -moz-margin-start: var(--panel-ui-exit-subview-gutter-width);
99 .panel-viewstack[viewtype="main"] > .panel-subviews {
100 transform: translateX(22.35em);
103 .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) {
104 transform: translateX(-22.35em);
107 panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews {
111 .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView {
115 .panel-subview-body {
121 #PanelUI-popup .panel-subview-body {
126 .panel-subview-header,
127 .subviewbutton.panel-subview-footer {
128 box-sizing: border-box;
129 /* min-height: 41px; */
133 .panel-subview-header {
135 background-color: #A09090;
137 font-variant: small-caps;
141 .panel-subview-footer {
142 border-top: 1px solid #A09090;
145 .cui-widget-panelview .panel-subview-header {
149 .cui-widget-panelview .subviewbutton.panel-subview-footer {
151 -moz-box-pack: center;
156 flex-direction: column;
160 #app-extension-point-end > #PanelUI-menu-button {
163 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-text {
166 #app-extension-point-end > #PanelUI-menu-button .toolbarbutton-icon {
170 #PanelUI-popup > arrowscrollbox > autorepeatbutton {
173 #PanelUI-popup > arrowscrollbox > scrollbox {
177 #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent {
186 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
187 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
188 /* line-height: 1.1;*/
192 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
193 .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text {
197 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text,
198 .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text {
200 clip: rect(auto, auto, 2.3em, auto);
203 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text,
204 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text {
206 /* Need to override toolkit theming which sets margin: 0 !important; */
207 margin: 2px 0 0 !important;
210 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
215 #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls,
216 #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls {
217 -moz-margin-start: 0;
225 .panel-mainview:not([panelid="PanelUI-popup"]) {
229 /* Bug 1164419 - increase Pocket panel size to accomidate wider Russian text. */
230 panelmultiview[mainViewId=PanelUI-pocketView] > .panel-viewcontainer > .panel-viewstack > .panel-mainview:not([panelid="PanelUI-popup"]) {
231 max-width: 33em; /* standaloneSubviewWidth + 3 */
234 panelview:not([mainview]) .toolbarbutton-text,
235 .cui-widget-panel toolbarbutton > .toolbarbutton-text {
240 .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent {
244 .cui-widget-panel[viewId="PanelUI-pocketView"] > .panel-arrowcontainer > .panel-arrowcontent {
249 .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent {
253 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child {
254 border-radius: 4px 4px 0 0;
257 .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child {
258 border-radius: 0 0 4px 4px;
269 #PanelUI-contents-scroller {
276 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon {
282 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item),
283 .panelUI-grid .toolbarbutton-1,
284 .panel-customization-placeholder-child {
285 -moz-appearance: none;
286 -moz-box-orient: vertical;
287 width: calc(22.35em / 3 - 0.1px - 2px); /* LCARStrek: XXX: found out to be needed to fit the icons */
288 height: calc(51px + 2.2em);
291 /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem
292 * should have a min-width set so they abide by the width set above (which they do outside of
293 * customize mode because they're in a flexed container) */
294 toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 {
298 /* Help SDK buttons fit in. */
299 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon,
300 toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon,
301 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
302 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
307 .customization-palette .toolbarbutton-1 {
308 -moz-appearance: none;
309 -moz-box-orient: vertical;
312 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button {
313 -moz-appearance: none;
314 -moz-box-orient: vertical;
315 width: calc(22.35em / 3 - 0.1px - 2px);
316 height: calc(49px + 2.2em);
320 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text,
321 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text {
322 margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */
325 .panel-customization-placeholder-child {
327 /* padding: 2px 6px;*/
330 .panelUI-grid .toolbarbutton-1[type="menu"] {
331 background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif");
332 background-position: right 3px top 16px;
333 background-repeat: no-repeat;
336 .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) {
337 background-position: left 3px top 16px;
340 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker {
344 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
345 -moz-box-align: center;
347 -moz-margin-start: -16px;
349 margin-bottom: 2.2em;
353 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker {
354 border-radius: 0 0 0 2px;
357 .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) {
358 border-radius: 0 0 2px 0;
361 #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon {
365 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
366 width: calc(22.35em / 3 - 0.1px);
367 margin: 0 !important;
370 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) {
371 -moz-box-align: center;
372 -moz-box-pack: center;
375 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe {
379 #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView {
382 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item,
383 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]),
384 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status,
385 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar,
386 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label,
387 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon,
388 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator,
389 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize,
390 #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) {
395 * XXXgijs: this is a workaround for a layout issue that was caused by these iframes,
396 * which was affecting subview display. Because of this, we're hiding the iframe *only*
397 * when displaying a subview. The discerning user might notice this, but it's not nearly
398 * as bad as the brokenness.
399 * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375
402 #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe {
406 toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text {
410 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
411 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon,
412 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack,
413 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
414 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
415 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack,
416 .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
417 .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon,
418 .panel-customization-placeholder-child > .toolbarbutton-icon {
421 /* Explanation for the below formula (A / B - C)
423 Each button is 22.35em / 3 - 0.1px wide
425 Each button has two margins.
427 The button icon is 32 pixels wide.
428 The button has 12px of horizontal padding (6 on each side).
429 The button has 0px of horizontal border (0 on each side).
430 Total width of button's icon + button padding should therefore be 44px,
431 which means each horizontal margin should be the half the button's width - (44/2) px.
433 margin: 4px calc((22.35em / 3 - 0.1px) / 2 - 22px);
436 /* above we treat the container as the icon for the margins, that is so the
437 /* badge itself is positioned correctly. Here we make sure that the icon itself
438 /* has the minum size we want, but no padding/margin. */
439 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon,
440 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
449 toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton {
453 #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder {
457 #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon {
458 -moz-margin-end: 2px;
461 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
462 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
468 #zoom-in-button > .toolbarbutton-text,
469 #zoom-out-button > .toolbarbutton-text,
470 #zoom-reset-button > .toolbarbutton-icon {
477 flex-direction: column;
478 /* background-color: hsla(210,4%,10%,.07);*/
481 /* min-height: 4em;*/
482 border-bottom-right-radius: 4px;
483 border-bottom-left-radius: 4px;
486 #main-window[customizing] #PanelUI-footer-fxa > toolbarseparator {
490 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator,
491 #PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon,
492 #PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
496 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after {
497 content: url("chrome://browser/skin/warning.svg");
506 #PanelUI-fxa-status {
512 #PanelUI-footer-inner,
513 #PanelUI-footer-fxa:not([hidden]) {
515 border-top: 1px solid #9C9CFF;
518 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
519 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
523 #PanelUI-footer-inner > toolbarseparator,
524 #PanelUI-footer-fxa > toolbarseparator {
526 border-left: 1px solid #9C9CFF;
530 #PanelUI-footer-inner:hover > toolbarseparator,
531 #PanelUI-footer-fxa:hover > toolbarseparator {
535 #PanelUI-update-status,
543 box-sizing: border-box;
548 transition: background-color;
549 -moz-box-orient: horizontal;
552 #PanelUI-update-status {
553 border-top: 1px solid #9C9CFF;
554 border-bottom: 1px solid transparent;
558 #PanelUI-update-status > .toolbarbutton-text {
559 width: 0; /* Fancy cropping solution for flexbox. */
562 #PanelUI-help[panel-multiview-anchor="true"] {
563 -moz-image-region: rect(0, 32px, 16px, 16px);
571 #PanelUI-update-status > .toolbarbutton-text,
572 #PanelUI-fxa-label > .toolbarbutton-text,
573 #PanelUI-customize > .toolbarbutton-text {
579 #PanelUI-help > .toolbarbutton-text,
580 #PanelUI-quit > .toolbarbutton-text,
581 #PanelUI-fxa-avatar > .toolbarbutton-text {
585 #PanelUI-update-status > .toolbarbutton-icon,
586 #PanelUI-fxa-label > .toolbarbutton-icon,
587 #PanelUI-fxa-icon > .toolbarbutton-icon,
588 #PanelUI-customize > .toolbarbutton-icon,
589 #PanelUI-help > .toolbarbutton-icon,
590 #PanelUI-quit > .toolbarbutton-icon {
595 -moz-padding-start: 15px;
596 -moz-padding-end: 15px;
602 -moz-padding-start: 15px;
603 -moz-border-start-style: none;
606 #PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
607 #PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
608 -moz-padding-start: 0px;
611 #PanelUI-update-status {
612 width: calc(22.35em + 30px);
613 -moz-padding-start: 15px;
614 -moz-border-start-style: none;
617 #PanelUI-update-status {
618 list-style-image: url(chrome://branding/content/icon16.png);
623 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
626 #PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon {
627 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
630 #PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
631 #PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label {
632 list-style-image: url(chrome://browser/skin/warning.svg);
636 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
639 #customization-panelHolder #PanelUI-customize {
640 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
644 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
648 -moz-border-end-style: none;
649 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
657 -moz-image-region: rect(0, 16px, 16px, 0);
660 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
661 #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
665 #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
669 #PanelUI-fxa-avatar[disabled],
670 #PanelUI-fxa-icon[disabled] {
674 #PanelUI-fxa-status[disabled] {
675 pointer-events: none;
678 #PanelUI-fxa-avatar {
682 background-repeat: no-repeat;
683 background-position: 0 0;
684 background-size: contain;
692 #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
693 list-style-image: url(chrome://browser/skin/fxa/default-profile-image.svg);
696 #PanelUI-customize:hover,
697 #PanelUI-help:not([disabled]):hover,
698 #PanelUI-quit:not([disabled]):hover,
699 #PanelUI-customize:hover:active,
700 #PanelUI-help:not([disabled]):hover:active,
701 #PanelUI-quit:not([disabled]):hover:active {
702 -moz-image-region: rect(0, 32px, 16px, 16px);
705 #PanelUI-help[disabled],
706 #PanelUI-quit[disabled] {
707 -moz-image-region: rect(0, 48px, 16px, 32px);
710 #PanelUI-fxa-icon:not([disabled]):hover,
711 #PanelUI-help:not([disabled]):hover,
712 #PanelUI-customize:hover,
713 #PanelUI-quit:not([disabled]):hover {
716 #PanelUI-fxa-icon:not([disabled]):hover:active,
717 #PanelUI-help:not([disabled]):hover:active,
718 #PanelUI-customize:hover:active,
719 #PanelUI-quit:not([disabled]):hover:active {
722 #PanelUI-fxa-status:not([disabled]):hover,
723 #PanelUI-fxa-status:not([disabled]):hover:active,
724 #PanelUI-fxa-icon:not([disabled]):hover,
725 #PanelUI-fxa-icon:not([disabled]):hover:active {
728 #PanelUI-footer-fxa[fxastatus="error"] {
729 background-color: #FF0000;
733 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
734 background-color: #FFCF00;
737 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
738 background-color: #FF9F00;
741 #PanelUI-update-status {
745 #PanelUI-update-status[update-status="succeeded"] {
746 background-color: #008484;
750 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
751 background-color: #FFCF00;
754 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
755 background-color: #FF9F00;
758 #PanelUI-update-status[update-status="failed"] {
759 background-color: #FF0000;
763 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
764 background-color: #FFCF00;
767 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
768 background-color: #FF9F00;
771 #PanelUI-quit:not([disabled]):hover {
772 background-color: #FF0000;
775 #PanelUI-quit:not([disabled]):hover:active {
776 background-color: #FF9F00;
779 #customization-panelHolder #PanelUI-customize {
781 background-color: #008484;
786 #customization-panelHolder #PanelUI-customize + toolbarseparator {
790 #customization-panelHolder #PanelUI-customize:hover,
791 #customization-panelHolder #PanelUI-customize:hover:active {
792 background-color: #FFCF00;
796 #customization-palette .toolbarbutton-multiline-text,
797 #customization-palette .toolbarbutton-text {
801 panelview .toolbarbutton-1,
803 .widget-overflow-list .toolbarbutton-1,
804 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
805 .share-provider-button,
806 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
808 background-color: hsla(210,4%,10%,0);
811 border-color: hsla(210,4%,10%,0);*/
814 panelview .toolbarbutton-1,
816 .widget-overflow-list .toolbarbutton-1,
817 .share-provider-button,
818 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
822 .subviewbutton.panel-subview-footer {
823 /* border-radius: 0; */
827 .subviewbutton.panel-subview-footer > .menu-text {
828 -moz-margin-start: 0px !important;
829 -moz-padding-start: 6px;
830 -moz-padding-end: 6px;
835 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
839 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
844 .subviewbutton.panel-subview-footer > .menu-accel-container {
845 -moz-padding-start: 6px;
848 .subviewbutton:not(.panel-subview-footer) {
852 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
853 /* Bookmark items need a more specific selector. */
854 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
855 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
859 .PanelUI-subView .subviewbutton[shortcut]::after {
860 content: attr(shortcut);
865 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
866 -moz-margin-start: 10px;
869 /* This is a <label> but it should fit in with the menu font- and colorwise. */
870 #PanelUI-characterEncodingView-autodetect-label {
875 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
880 panelview .toolbarbutton-1,
881 .widget-overflow-list .toolbarbutton-1 {
886 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
887 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
888 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
889 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
890 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
891 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
892 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
893 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
894 background-color: hsla(210,4%,10%,.08);
895 border-color: hsla(210,4%,10%,.11);
898 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
899 border-color: hsla(210,4%,10%,.11);
902 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
903 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
904 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
905 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
906 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
907 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
908 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
909 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
910 background-color: hsla(210,4%,10%,.12);
911 border-color: hsla(210,4%,10%,.14);
912 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
915 .subviewbutton.panel-subview-footer {
916 margin: 4px -4px -4px;
917 background-color: hsla(210,4%,10%,.07);
918 border-top: 1px solid hsla(210,4%,10%,.12);
923 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
924 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
925 background-color: hsla(210,4%,10%,.1);
926 border-top: 1px solid hsla(210,4%,10%,.12);
929 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
930 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
931 background-color: hsla(210,4%,10%,.15);
932 border-top: 1px solid hsla(210,4%,10%,.12);
933 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
936 #BMB_bookmarksPopup .subviewbutton {
941 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
945 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
946 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
947 -moz-appearance: none;
952 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
953 #BMB_bookmarksPopup arrowscrollbox {
957 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
958 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
962 / Popups with only one item don't have a footer /
963 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
964 / These popups never have a footer /
965 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
966 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
967 / And so they need some bottom padding: /
971 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
972 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
977 .PanelUI-subView menuseparator,
978 .PanelUI-subView toolbarseparator,
979 .cui-widget-panelview menuseparator {
980 -moz-appearance: none;
982 border-top: 1px solid #9C9CFF;
987 .PanelUI-subView menuseparator,
988 .PanelUI-subView toolbarseparator {
989 /* -moz-margin-start: -5px;
990 -moz-margin-end: -4px;*/
993 .PanelUI-subView menuseparator.small-separator,
994 .PanelUI-subView toolbarseparator.small-separator {
999 .cui-widget-panelview menuseparator.small-separator {
1000 /* margin-left: 10px;
1001 margin-right: 10px;*/
1004 .subviewbutton > .menu-accel-container {
1005 -moz-box-pack: start;
1006 -moz-margin-start: 10px;
1007 -moz-margin-end: auto;
1011 #PanelUI-historyItems > toolbarbutton {
1012 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1015 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1016 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1017 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1022 toolbarbutton[panel-multiview-anchor="true"],
1023 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1025 background-color: #008484;
1028 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1032 #PanelUI-help[panel-multiview-anchor="true"] {
1033 background-image: none;
1036 #PanelUI-help[panel-multiview-anchor="true"]::after {
1041 width: var(--panel-ui-exit-subview-gutter-width);
1042 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1043 background-repeat: no-repeat;
1044 background-color: #008484;
1045 background-position: left 10px center, 0;
1048 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1049 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1050 background-position: right 10px center, 0;
1053 toolbarbutton[panel-multiview-anchor="true"] {
1054 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1055 background-position: right calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
1056 background-repeat: no-repeat;
1059 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1060 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1061 background-position: left calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
1064 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1065 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1069 #search-container[cui-areatype="menu-panel"],
1070 #wrapper-search-container[place="panel"] {
1074 #search-container[cui-areatype="menu-panel"] {
1079 toolbarpaletteitem[place="palette"] > #search-container {
1084 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1086 transition-property: background-color, border-color;
1087 transition-duration: 150ms;
1090 /* Make direct siblings overlap borders: */
1091 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1092 /* border-top-color: transparent !important; */
1095 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1096 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1097 /* margin-top: -1px; */
1100 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1105 min-width: calc(22.35em / 3 - 0.1px);
1106 max-width: calc(22.35em / 3 - 0.1px);
1107 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1108 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1109 height: calc(2.2em + 4px);
1111 -moz-box-orient: horizontal;
1114 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1115 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1116 /* reduce the width with 2px for this button to compensate for two separators
1118 min-width: calc(22.35em / 3 - 0.1px - 2px);
1119 max-width: calc(22.35em / 3 - 0.1px - 2px);
1122 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1126 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1130 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1131 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1132 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1133 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1134 border-top-right-radius: 0;
1135 border-bottom-right-radius: 0;
1138 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1139 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1140 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1141 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1142 border-top-left-radius: 0;
1143 border-bottom-left-radius: 0;
1146 .toolbaritem-combined-buttons > separator {
1147 -moz-appearance: none;
1149 -moz-box-align: stretch;
1152 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1156 /* background: hsla(210,4%,10%,.15);*/
1157 transition-property: margin;
1158 transition-duration: 10ms;
1159 transition-timing-function: ease;
1162 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1166 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1170 .cui-widget-panelview,
1171 #widget-overflow-scroller {
1176 #widget-overflow-scroller {
1179 margin-bottom: 10px;
1182 #widget-overflow-list {
1185 padding-right: 10px;
1188 toolbaritem[overflowedItem=true],
1189 toolbarbutton[overflowedItem=true] {
1193 background-repeat: no-repeat;
1194 background-position: 0 center;
1197 .widget-overflow-list .toolbarbutton-1,
1198 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1199 -moz-box-align: center;
1200 -moz-box-orient: horizontal;
1203 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1204 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1206 -moz-padding-start: .5em;
1209 #widget-overflow-list > .toolbaritem-combined-buttons {
1213 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1218 -moz-margin-end: -1px;
1221 .subviewbutton[checked="true"] {
1222 background-image: url("chrome://global/skin/menu/menu-check.gif");
1223 background-position: top 5px left 4px;
1224 background-repeat: no-repeat;
1227 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1228 background-position: top 5px right 4px;
1231 .subviewbutton[checked="true"]:hover {
1232 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1235 .subbiewbutton > .menu-iconic-left {
1236 -moz-margin-end: 3px;
1239 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1243 .panel-mainview[panelid=customizationui-widget-panel],
1244 #customizationui-widget-multiview > .panel-viewcontainer,
1245 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1246 #PanelUI-panicView > .panel-subview-body,
1248 #PanelUI-pocketView > .panel-subview-body,
1249 #PanelUI-pocketView {
1254 #PanelUI-panicView.cui-widget-panelview {
1258 #PanelUI-panic-timeframe {
1260 border-bottom: 1px solid #A09090;
1263 #panic-button-success-icon,
1264 #PanelUI-panic-timeframe-icon,
1265 #PanelUI-panic-timeframe-icon-small {
1266 background-color: transparent;
1267 -moz-margin-end: 10px;
1270 #panic-button-success-icon,
1271 #PanelUI-panic-timeframe-icon {
1272 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1277 #PanelUI-panic-timeframe-icon-small {
1278 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1283 /* current attribute is only set when in use as a subview instead of a main view */
1284 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1288 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1292 #panic-button-success-header,
1293 #PanelUI-panic-header {
1294 -moz-box-align: center;
1298 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1302 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1303 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1304 transform: scaleX(-1);
1311 .subviewradio@buttonStateHover@ {
1314 .subviewradio[selected],
1315 .subviewradio[selected]:hover,
1316 .subviewradio@buttonStateActive@ {
1319 .subviewradio > .radio-check {
1322 .subviewradio > .radio-check[selected] {
1326 #PanelUI-panic-explanations {
1327 padding: 10px 10px 0;
1330 #PanelUI-panic-actionlist-main-label {
1335 .PanelUI-panic-actionlist {
1336 -moz-padding-start: 20px;
1338 padding-bottom: 2px;
1339 background-size: 16px 16px;
1340 background-repeat: no-repeat;
1341 background-color: transparent;
1342 background-position: center left;
1345 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1346 background-position: center right;
1349 #PanelUI-panic-actionlist-cookies {
1350 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1353 #PanelUI-panic-actionlist-history {
1354 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1357 #PanelUI-panic-actionlist-windows {
1358 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1361 #PanelUI-panic-actionlist-newwindow {
1362 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1365 #PanelUI-panic-warning {
1372 #PanelUI-panic-view-button {
1373 background-color: #FF0000;
1377 #PanelUI-panic-view-button:hover {
1378 background-color: #FFCF00;
1381 #PanelUI-panic-view-button:hover:active {
1382 background-color: #FF9F00;
1385 #PanelUI-panic-view-button > .toolbarbutton-text {
1390 #panic-button-success-closebutton {
1393 #panic-button-success-closebutton:hover {
1396 #panic-button-success-closebutton:hover:active {
1399 /* === END panelUIOverlay.inc.css === */
1402 background-color: #000000;
1405 #PanelUI-contents #zoom-out-btn {
1407 padding-right: 12px;
1410 #PanelUI-contents #zoom-in-btn {
1412 padding-right: 12px;
1415 /* bookmark panel submenus */
1417 #BMB_bookmarksPopup menupopup[placespopup=true] {
1418 /* background: transparent;
1423 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1424 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1425 /* background: var(--panel-arrowcontent-background);
1426 border: var(--panel-arrowcontent-border);
1427 border-radius: 3.5px;
1431 #BMB_bookmarksPopup menupopup {
1432 /* padding-top: 2px;*/
1435 /* Add some space at the top because there are no headers: */
1436 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1437 /* padding-top: 4px;*/
1440 /* bookmark panel separator */
1441 #BMB_bookmarksPopup menuseparator {
1446 .subviewbutton > .menu-right,
1447 .subviewbutton > .menu-iconic-left {
1448 /* padding-top: 1px;
1450 margin-bottom: 2px;*/
1453 /* Disabled empty item looks too small otherwise, because it has no icon. */
1454 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1455 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1456 menuitem[type="checkbox"].subviewbutton {
1457 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1458 * 2px for its border, see above */
1459 /* min-height: 22px;*/
1462 .subviewbutton > .toolbarbutton-text {
1463 /* padding-top: 3px;
1464 padding-bottom: 3px;*/
1467 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1468 -moz-appearance: none;
1470 -moz-margin-start: 3px;
1473 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1475 -moz-padding-start: 0;
1479 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1480 /* transform: scaleX(-1); */
1483 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1487 .subviewbutton > .toolbarbutton-text {
1488 -moz-padding-start: 16px;
1491 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1492 -moz-padding-start: 0;
1495 /* subviewbutton entries for social sidebars have images that come from external
1496 /* sources, and are not guaranteed to be the size we want, so force the size on
1498 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1503 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1507 menu.subviewbutton > .menu-right {
1508 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow);
1509 /* Reset the rect we inherit from the button: */
1510 -moz-image-region: auto;
1512 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1513 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1514 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1516 menu[disabled="true"].subviewbutton > .menu-right {
1517 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");