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-container > .toolbarbutton-icon,
301 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon,
302 toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-container > .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-container,
413 .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon,
414 .customization-palette .toolbarbutton-1 > .toolbarbutton-icon,
415 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container,
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-container > .toolbarbutton-icon,
440 .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-container > .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-fxa-status {
502 #PanelUI-footer-inner,
503 #PanelUI-footer-fxa:not([hidden]) {
505 border-top: 1px solid #9C9CFF;
508 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner,
509 #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa {
513 #PanelUI-footer-inner > toolbarseparator,
514 #PanelUI-footer-fxa > toolbarseparator {
516 border-left: 1px solid #9C9CFF;
520 #PanelUI-footer-inner:hover > toolbarseparator,
521 #PanelUI-footer-fxa:hover > toolbarseparator {
525 #PanelUI-update-status,
533 box-sizing: border-box;
538 transition: background-color;
539 -moz-box-orient: horizontal;
542 #PanelUI-update-status {
543 border-top: 1px solid #9C9CFF;
544 border-bottom: 1px solid transparent;
548 #PanelUI-update-status > .toolbarbutton-text {
549 width: 0; /* Fancy cropping solution for flexbox. */
552 #PanelUI-help[panel-multiview-anchor="true"] {
553 -moz-image-region: rect(0, 32px, 16px, 16px);
561 #PanelUI-update-status > .toolbarbutton-text,
562 #PanelUI-fxa-label > .toolbarbutton-text,
563 #PanelUI-customize > .toolbarbutton-text {
569 #PanelUI-help > .toolbarbutton-text,
570 #PanelUI-quit > .toolbarbutton-text,
571 #PanelUI-fxa-avatar > .toolbarbutton-text {
575 #PanelUI-update-status > .toolbarbutton-icon,
576 #PanelUI-fxa-label > .toolbarbutton-icon,
577 #PanelUI-fxa-icon > .toolbarbutton-icon,
578 #PanelUI-customize > .toolbarbutton-icon,
579 #PanelUI-help > .toolbarbutton-icon,
580 #PanelUI-quit > .toolbarbutton-icon {
585 -moz-padding-start: 15px;
586 -moz-padding-end: 15px;
592 -moz-padding-start: 15px;
593 -moz-border-start-style: none;
596 #PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
597 #PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label {
598 -moz-padding-start: 0px;
601 #PanelUI-update-status {
602 width: calc(22.35em + 30px);
603 -moz-padding-start: 15px;
604 -moz-border-start-style: none;
607 #PanelUI-update-status {
608 list-style-image: url(chrome://branding/content/icon16.png);
613 list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png");
616 #PanelUI-footer-fxa[syncstatus="active"] > #PanelUI-fxa-icon {
617 list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png");
620 #PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label,
621 #PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label {
622 list-style-image: url(chrome://global/skin/warning-16.png);
626 list-style-image: url("chrome://browser/skin/menuPanel-customize.png");
629 #customization-panelHolder #PanelUI-customize {
630 list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png");
634 list-style-image: url("chrome://browser/skin/menuPanel-help.png");
638 -moz-border-end-style: none;
639 list-style-image: url("chrome://browser/skin/menuPanel-exit.png");
647 -moz-image-region: rect(0, 16px, 16px, 0);
650 #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon,
651 #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon {
655 #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
659 #PanelUI-fxa-avatar[disabled],
660 #PanelUI-fxa-icon[disabled] {
664 #PanelUI-fxa-status[disabled] {
665 pointer-events: none;
668 #PanelUI-fxa-avatar {
672 background-repeat: no-repeat;
673 background-position: 0 0;
674 background-size: contain;
682 #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar {
683 list-style-image: url(chrome://browser/skin/fxa/default-profile-image.svg);
686 #PanelUI-customize:hover,
687 #PanelUI-help:not([disabled]):hover,
688 #PanelUI-quit:not([disabled]):hover,
689 #PanelUI-customize:hover:active,
690 #PanelUI-help:not([disabled]):hover:active,
691 #PanelUI-quit:not([disabled]):hover:active {
692 -moz-image-region: rect(0, 32px, 16px, 16px);
695 #PanelUI-help[disabled],
696 #PanelUI-quit[disabled] {
697 -moz-image-region: rect(0, 48px, 16px, 32px);
700 #PanelUI-fxa-icon:not([disabled]):hover,
701 #PanelUI-help:not([disabled]):hover,
702 #PanelUI-customize:hover,
703 #PanelUI-quit:not([disabled]):hover {
706 #PanelUI-fxa-icon:not([disabled]):hover:active,
707 #PanelUI-help:not([disabled]):hover:active,
708 #PanelUI-customize:hover:active,
709 #PanelUI-quit:not([disabled]):hover:active {
712 #PanelUI-fxa-status:not([disabled]):hover,
713 #PanelUI-fxa-status:not([disabled]):hover:active,
714 #PanelUI-fxa-icon:not([disabled]):hover,
715 #PanelUI-fxa-icon:not([disabled]):hover:active {
718 #PanelUI-footer-fxa[fxastatus="error"] {
719 background-color: #FF0000;
723 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover {
724 background-color: #FFCF00;
727 #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active {
728 background-color: #FF9F00;
731 #PanelUI-update-status {
735 #PanelUI-update-status[update-status="succeeded"] {
736 background-color: #008484;
740 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover {
741 background-color: #FFCF00;
744 #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active {
745 background-color: #FF9F00;
748 #PanelUI-update-status[update-status="failed"] {
749 background-color: #FF0000;
753 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover {
754 background-color: #FFCF00;
757 #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active {
758 background-color: #FF9F00;
761 #PanelUI-quit:not([disabled]):hover {
762 background-color: #FF0000;
765 #PanelUI-quit:not([disabled]):hover:active {
766 background-color: #FF9F00;
769 #customization-panelHolder #PanelUI-customize {
771 background-color: #008484;
776 #customization-panelHolder #PanelUI-customize + toolbarseparator {
780 #customization-panelHolder #PanelUI-customize:hover,
781 #customization-panelHolder #PanelUI-customize:hover:active {
782 background-color: #FFCF00;
786 #customization-palette .toolbarbutton-multiline-text,
787 #customization-palette .toolbarbutton-text {
791 panelview .toolbarbutton-1,
793 .widget-overflow-list .toolbarbutton-1,
794 .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button,
795 .share-provider-button,
796 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
798 background-color: hsla(210,4%,10%,0);
801 border-color: hsla(210,4%,10%,0);*/
804 panelview .toolbarbutton-1,
806 .widget-overflow-list .toolbarbutton-1,
807 .share-provider-button,
808 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
812 .subviewbutton.panel-subview-footer {
813 /* border-radius: 0; */
817 .subviewbutton.panel-subview-footer > .menu-text {
818 -moz-margin-start: 0px !important;
819 -moz-padding-start: 6px;
820 -moz-padding-end: 6px;
825 .subviewbutton.panel-subview-footer > .toolbarbutton-icon {
829 .subviewbutton.panel-subview-footer > .toolbarbutton-text {
834 .subviewbutton.panel-subview-footer > .menu-accel-container {
835 -moz-padding-start: 6px;
838 .subviewbutton:not(.panel-subview-footer) {
842 .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text,
843 /* Bookmark items need a more specific selector. */
844 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text,
845 .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text {
849 .PanelUI-subView .subviewbutton[shortcut]::after {
850 content: attr(shortcut);
855 .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after {
856 -moz-margin-start: 10px;
859 /* This is a <label> but it should fit in with the menu font- and colorwise. */
860 #PanelUI-characterEncodingView-autodetect-label {
865 .cui-widget-panelview .subviewbutton:not(.panel-subview-footer) {
870 panelview .toolbarbutton-1,
871 .widget-overflow-list .toolbarbutton-1 {
876 panelview .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
877 toolbarbutton.subviewbutton:not(:-moz-any([disabled],[open],:active)):hover,
878 menu.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
879 menuitem.subviewbutton:not(:-moz-any([disabled],:active))[_moz-menuactive],
880 .share-provider-button:not(:-moz-any([disabled],[open],:active)):hover,
881 .widget-overflow-list .toolbarbutton-1:not(:-moz-any([disabled],[open],:active)):hover,
882 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
883 > toolbarbutton:not(:-moz-any([disabled],[checked="true"],[open],:active)):hover {
884 background-color: hsla(210,4%,10%,.08);
885 border-color: hsla(210,4%,10%,.11);
888 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):not(:-moz-any([disabled],[open],:active)):hover {
889 border-color: hsla(210,4%,10%,.11);
892 panelview .toolbarbutton-1:-moz-any(:not([disabled]):-moz-any([open],:hover:active),[checked=true]),
893 toolbarbutton.subviewbutton:not([disabled]):-moz-any([open],:hover:active),
894 menu.subviewbutton:not([disabled])[_moz-menuactive]:active,
895 menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active,
896 .share-provider-button:not([disabled]):-moz-any([open],:hover:active),
897 .widget-overflow-list .toolbarbutton-1:not([disabled]):-moz-any([open],:hover:active),
898 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true])
899 > toolbarbutton:not([disabled]):-moz-any([open],:hover:active) {
900 background-color: hsla(210,4%,10%,.12);
901 border-color: hsla(210,4%,10%,.14);
902 box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
905 .subviewbutton.panel-subview-footer {
906 margin: 4px -4px -4px;
907 background-color: hsla(210,4%,10%,.07);
908 border-top: 1px solid hsla(210,4%,10%,.12);
913 menuitem.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover,
914 .subviewbutton.panel-subview-footer:not(:-moz-any([disabled],[open],:active)):hover {
915 background-color: hsla(210,4%,10%,.1);
916 border-top: 1px solid hsla(210,4%,10%,.12);
919 menuitem.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active),
920 .subviewbutton.panel-subview-footer:not([disabled]):-moz-any([open],:hover:active) {
921 background-color: hsla(210,4%,10%,.15);
922 border-top: 1px solid hsla(210,4%,10%,.12);
923 box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset;
926 #BMB_bookmarksPopup .subviewbutton {
931 #BMB_bookmarksPopup .subviewbutton:not([disabled="true"]) {
935 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-up,
936 #BMB_bookmarksPopup > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box > .autorepeatbutton-down {
937 -moz-appearance: none;
942 / Remove padding on xul:arrowscrollbox to avoid extra padding on footer /
943 #BMB_bookmarksPopup arrowscrollbox {
947 #BMB_bookmarksPopup menupopup > .bookmarks-actions-menuseparator {
948 / Hide bottom separator as the styled footer includes a top border serving the same purpose /
952 / Popups with only one item don't have a footer /
953 #BMB_bookmarksPopup menupopup[placespopup=true][singleitempopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
954 / These popups never have a footer /
955 #BMB_bookmarksToolbarPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox,
956 #BMB_unsortedBookmarksPopup > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
957 / And so they need some bottom padding: /
961 / Disabled (empty) item is always alone and never has an icon, so fix its left padding /
962 #BMB_bookmarksPopup menupopup[emptyplacesresult] .bookmark-item.subviewbutton {
967 .PanelUI-subView menuseparator,
968 .PanelUI-subView toolbarseparator,
969 .cui-widget-panelview menuseparator {
970 -moz-appearance: none;
972 border-top: 1px solid #9C9CFF;
977 .PanelUI-subView menuseparator,
978 .PanelUI-subView toolbarseparator {
979 /* -moz-margin-start: -5px;
980 -moz-margin-end: -4px;*/
983 .PanelUI-subView menuseparator.small-separator,
984 .PanelUI-subView toolbarseparator.small-separator {
989 .cui-widget-panelview menuseparator.small-separator {
990 /* margin-left: 10px;
991 margin-right: 10px;*/
994 .subviewbutton > .menu-accel-container {
995 -moz-box-pack: start;
996 -moz-margin-start: 10px;
997 -moz-margin-end: auto;
1001 #PanelUI-historyItems > toolbarbutton {
1002 list-style-image: url("chrome://mozapps/skin/places/defaultFavicon.png");
1005 #PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
1006 #PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
1007 #PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
1012 toolbarbutton[panel-multiview-anchor="true"],
1013 toolbarbutton[panel-multiview-anchor="true"] > .toolbarbutton-menubutton-button {
1015 background-color: #008484;
1018 #PanelUI-help[panel-multiview-anchor="true"] + toolbarseparator {
1022 #PanelUI-help[panel-multiview-anchor="true"] {
1023 background-image: none;
1026 #PanelUI-help[panel-multiview-anchor="true"]::after {
1031 width: var(--panel-ui-exit-subview-gutter-width);
1032 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1033 background-repeat: no-repeat;
1034 background-color: #008484;
1035 background-position: left 10px center, 0;
1038 #PanelUI-help[panel-multiview-anchor="true"]:-moz-locale-dir(rtl)::after {
1039 background-image: url(chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png);
1040 background-position: right 10px center, 0;
1043 toolbarbutton[panel-multiview-anchor="true"] {
1044 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted.png");
1045 background-position: right calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
1046 background-repeat: no-repeat;
1049 toolbarbutton[panel-multiview-anchor="true"]:-moz-locale-dir(rtl) {
1050 background-image: url("chrome://browser/skin/customizableui/subView-arrow-back-inverted-rtl.png");
1051 background-position: left calc((22.35em / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px) center;
1054 toolbarpaletteitem[place="palette"] > .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker,
1055 #bookmarks-menu-button[cui-areatype="menu-panel"] > .toolbarbutton-menubutton-dropmarker {
1059 #search-container[cui-areatype="menu-panel"],
1060 #wrapper-search-container[place="panel"] {
1064 #search-container[cui-areatype="menu-panel"] {
1069 toolbarpaletteitem[place="palette"] > #search-container {
1074 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1076 transition-property: background-color, border-color;
1077 transition-duration: 150ms;
1080 /* Make direct siblings overlap borders: */
1081 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) {
1082 /* border-top-color: transparent !important; */
1085 .toolbaritem-combined-buttons + .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]),
1086 toolbarpaletteitem[haswideitem][place="panel"] + toolbarpaletteitem[haswideitem][place="panel"] {
1087 /* margin-top: -1px; */
1090 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton {
1095 min-width: calc(22.35em / 3 - 0.1px);
1096 max-width: calc(22.35em / 3 - 0.1px);
1097 /* We'd prefer to use height: auto here but it leads to layout bugs in the panel. Cope:
1098 1.2em for line height + 2 * .5em padding + margin on the label (2 * 2px) */
1099 height: calc(2.2em + 4px);
1101 -moz-box-orient: horizontal;
1104 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button,
1105 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button {
1106 /* reduce the width with 2px for this button to compensate for two separators
1108 min-width: calc(22.35em / 3 - 0.1px - 2px);
1109 max-width: calc(22.35em / 3 - 0.1px - 2px);
1112 #main-window:not([customizing]) .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton[disabled] > .toolbarbutton-icon {
1116 #zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
1120 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(ltr),
1121 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(rtl),
1122 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(ltr),
1123 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(rtl) {
1124 border-top-right-radius: 0;
1125 border-bottom-right-radius: 0;
1128 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #cut-button:-moz-locale-dir(rtl),
1129 #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #paste-button:-moz-locale-dir(ltr),
1130 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-out-button:-moz-locale-dir(rtl),
1131 #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-in-button:-moz-locale-dir(ltr) {
1132 border-top-left-radius: 0;
1133 border-bottom-left-radius: 0;
1136 .toolbaritem-combined-buttons > separator {
1137 -moz-appearance: none;
1139 -moz-box-align: stretch;
1142 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > separator {
1146 /* background: hsla(210,4%,10%,.15);*/
1147 transition-property: margin;
1148 transition-duration: 10ms;
1149 transition-timing-function: ease;
1152 .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]):hover > separator {
1156 #widget-overflow > .panel-arrowcontainer > .panel-arrowcontent {
1160 .cui-widget-panelview,
1161 #widget-overflow-scroller {
1166 #widget-overflow-scroller {
1169 margin-bottom: 10px;
1172 #widget-overflow-list {
1175 padding-right: 10px;
1178 toolbaritem[overflowedItem=true],
1179 toolbarbutton[overflowedItem=true] {
1183 background-repeat: no-repeat;
1184 background-position: 0 center;
1187 .widget-overflow-list .toolbarbutton-1,
1188 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1189 -moz-box-align: center;
1190 -moz-box-orient: horizontal;
1193 .widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text,
1194 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text {
1196 -moz-padding-start: .5em;
1199 #widget-overflow-list > .toolbaritem-combined-buttons {
1203 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button::after {
1208 -moz-margin-end: -1px;
1211 .subviewbutton[checked="true"] {
1212 background-image: url("chrome://global/skin/menu/menu-check.gif");
1213 background-position: top 5px left 4px;
1214 background-repeat: no-repeat;
1217 .subviewbutton[checked="true"]:-moz-locale-dir(rtl) {
1218 background-position: top 5px right 4px;
1221 .subviewbutton[checked="true"]:hover {
1222 background-image: url("chrome://global/skin/menu/menu-check-hover.gif");
1225 .subbiewbutton > .menu-iconic-left {
1226 -moz-margin-end: 3px;
1229 menuitem[checked="true"].subviewbutton > .menu-iconic-left {
1233 .panel-mainview[panelid=customizationui-widget-panel],
1234 #customizationui-widget-multiview > .panel-viewcontainer,
1235 #customizationui-widget-multiview > .panel-viewcontainer > .panel-viewstack,
1236 #PanelUI-panicView > .panel-subview-body,
1238 #PanelUI-pocketView > .panel-subview-body,
1239 #PanelUI-pocketView {
1244 #PanelUI-panicView.cui-widget-panelview {
1248 #PanelUI-panic-timeframe {
1250 border-bottom: 1px solid #A09090;
1253 #panic-button-success-icon,
1254 #PanelUI-panic-timeframe-icon,
1255 #PanelUI-panic-timeframe-icon-small {
1256 background-color: transparent;
1257 -moz-margin-end: 10px;
1260 #panic-button-success-icon,
1261 #PanelUI-panic-timeframe-icon {
1262 list-style-image: url(chrome://browser/skin/panic-panel/header.png);
1267 #PanelUI-panic-timeframe-icon-small {
1268 list-style-image: url(chrome://browser/skin/panic-panel/header-small.png);
1273 /* current attribute is only set when in use as a subview instead of a main view */
1274 #PanelUI-panicView[current] #PanelUI-panic-timeframe-icon {
1278 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-timeframe-icon-small {
1282 #panic-button-success-header,
1283 #PanelUI-panic-header {
1284 -moz-box-align: center;
1288 #PanelUI-panicView.cui-widget-panelview #PanelUI-panic-header {
1292 #PanelUI-panic-timeframe-icon-small:-moz-locale-dir(rtl),
1293 #PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
1294 transform: scaleX(-1);
1301 .subviewradio@buttonStateHover@ {
1304 .subviewradio[selected],
1305 .subviewradio[selected]:hover,
1306 .subviewradio@buttonStateActive@ {
1309 .subviewradio > .radio-check {
1312 .subviewradio > .radio-check[selected] {
1316 #PanelUI-panic-explanations {
1317 padding: 10px 10px 0;
1320 #PanelUI-panic-actionlist-main-label {
1325 .PanelUI-panic-actionlist {
1326 -moz-padding-start: 20px;
1328 padding-bottom: 2px;
1329 background-size: 16px 16px;
1330 background-repeat: no-repeat;
1331 background-color: transparent;
1332 background-position: center left;
1335 .PanelUI-panic-actionlist:-moz-locale-dir(rtl) {
1336 background-position: center right;
1339 #PanelUI-panic-actionlist-cookies {
1340 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 16, 16, 0);
1343 #PanelUI-panic-actionlist-history {
1344 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 32, 16, 16);
1347 #PanelUI-panic-actionlist-windows {
1348 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 48, 16, 32);
1351 #PanelUI-panic-actionlist-newwindow {
1352 background-image: -moz-image-rect(url(chrome://browser/skin/panic-panel/icons.png), 0, 64, 16, 48);
1355 #PanelUI-panic-warning {
1362 #PanelUI-panic-view-button {
1363 background-color: #FF0000;
1367 #PanelUI-panic-view-button:hover {
1368 background-color: #FFCF00;
1371 #PanelUI-panic-view-button:hover:active {
1372 background-color: #FF9F00;
1375 #PanelUI-panic-view-button > .toolbarbutton-text {
1380 #panic-button-success-closebutton {
1383 #panic-button-success-closebutton:hover {
1386 #panic-button-success-closebutton:hover:active {
1389 /* === END panelUIOverlay.inc.css === */
1392 background-color: #000000;
1395 #PanelUI-contents #zoom-out-btn {
1397 padding-right: 12px;
1400 #PanelUI-contents #zoom-in-btn {
1402 padding-right: 12px;
1405 /* bookmark panel submenus */
1407 #BMB_bookmarksPopup menupopup[placespopup=true] {
1408 /* background: transparent;
1413 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox {
1414 /* emulating chrome://browser/content/places/menu.xml#places-popup-arrow but without the arrow */
1415 /* background: var(--panel-arrowcontent-background);
1416 border: var(--panel-arrowcontent-border);
1417 border-radius: 3.5px;
1421 #BMB_bookmarksPopup menupopup {
1422 /* padding-top: 2px;*/
1425 /* Add some space at the top because there are no headers: */
1426 #BMB_bookmarksPopup menupopup[placespopup=true] > hbox > .popup-internal-box > .arrowscrollbox-scrollbox > .scrollbox-innerbox {
1427 /* padding-top: 4px;*/
1430 /* bookmark panel separator */
1431 #BMB_bookmarksPopup menuseparator {
1436 .subviewbutton > .menu-right,
1437 .subviewbutton > .menu-iconic-left {
1438 /* padding-top: 1px;
1440 margin-bottom: 2px;*/
1443 /* Disabled empty item looks too small otherwise, because it has no icon. */
1444 menuitem.subviewbutton[disabled]:not(.menuitem-iconic),
1445 /* Same for checkbox menu items, whose icons lose size due to -moz-appearance: none: */
1446 menuitem[type="checkbox"].subviewbutton {
1447 /* This is 16px for an icon + 3px for its margins + 1px for its padding +
1448 * 2px for its border, see above */
1449 /* min-height: 22px;*/
1452 .subviewbutton > .toolbarbutton-text {
1453 /* padding-top: 3px;
1454 padding-bottom: 3px;*/
1457 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-button {
1458 -moz-appearance: none;
1460 -moz-margin-start: 3px;
1463 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker {
1465 -moz-padding-start: 0;
1469 menu.subviewbutton > .menu-right:-moz-locale-dir(rtl) {
1470 /* transform: scaleX(-1); */
1473 .widget-overflow-list .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker > .dropmarker-icon {
1477 .subviewbutton > .toolbarbutton-text {
1478 -moz-padding-start: 16px;
1481 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item) > .toolbarbutton-text {
1482 -moz-padding-start: 0;
1485 /* subviewbutton entries for social sidebars have images that come from external
1486 /* sources, and are not guaranteed to be the size we want, so force the size on
1488 toolbarbutton.social-provider-menuitem > .toolbarbutton-icon {
1493 .subviewbutton:-moz-any([image],[targetURI],.cui-withicon, .restoreallitem, .bookmark-item)[checked="true"] > .toolbarbutton-icon {
1497 menu.subviewbutton > .menu-right {
1498 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow);
1499 /* Reset the rect we inherit from the button: */
1500 -moz-image-region: auto;
1502 menu.subviewbutton:not([disabled="true"]):hover > .menu-right,
1503 menu.subviewbutton:not([disabled="true"])[_moz-menuactive="true"] > .menu-right {
1504 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-hover");
1506 menu[disabled="true"].subviewbutton > .menu-right {
1507 list-style-image: url("chrome://global/skin/menu/menu-arrow.svg#arrow-disabled");