/* This Source Code Form is subject to the terms of the Mozilla Public * License, v. 2.0. If a copy of the MPL was not distributed with this * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ /* === BEGIN panelUI.inc.css === */ :root { --panel-ui-menuPanelWidth: 22.35em; --panel-ui-menuPanelWidth-neg: -22.35em; --panel-ui-standaloneSubviewWidth: 30em; /* XXXgijs This is the ugliest bit of code I think I've ever written for Mozilla. * Basically, the 0.1px is there to avoid CSS rounding errors causing buttons to wrap. * For gory details, refer to https://bugzilla.mozilla.org/show_bug.cgi?id=963365#c11 * There's no calc() here (and therefore lots of calc() where this is used) because * we don't support nested calc(): https://bugzilla.mozilla.org/show_bug.cgi?id=968761 */ --panel-ui-menuPanelButtonWidth: calc(var(--panel-ui-menuPanelWidth) / 3 - 0.1px); --panel-ui-menuPanelButtonWidth-min2: calc(var(--panel-ui-menuPanelWidth) / 3 - 0.1px - 2px); --panel-ui-menuPanelButtonIconMargin: calc((var(--panel-ui-menuPanelWidth) / 3 - 0.1px) / 2 - 22px); --panel-ui-menuPanelMultiviewBgPos: calc((var(--panel-ui-menuPanelWidth) / 3 - 0.1px) / 2 - var(--panel-ui-exit-subview-gutter-width) + 2px); --panel-ui-exit-subview-gutter-width: 38px; } #PanelUI-popup #PanelUI-contents:empty { height: 128px; } #PanelUI-popup #PanelUI-contents:empty::before { content: ""; background-image: url(chrome://browser/skin/customizableui/whimsy.png); background-size: 64px 64px; display: block; width: 64px; height: 64px; position: absolute; transition: transform 1s ease-out; animation: whimsyMoveX 3.05s linear 0s infinite alternate, whimsyMoveY 3.4s linear 0s infinite alternate; } #PanelUI-popup #PanelUI-contents:not(:hover):empty::before { filter: grayscale(100%); } #PanelUI-popup #PanelUI-contents:active:empty::before { animation: whimsyMoveX 3.05s linear 0s infinite alternate, whimsyMoveY 3.4s linear 0s infinite alternate, whimsyRotate 1s linear 0s infinite normal; } #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):empty::before { animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate, whimsyMoveY 3.4s linear 0s infinite alternate; } #PanelUI-popup #PanelUI-contents:-moz-locale-dir(rtl):active:empty::before { animation: whimsyMoveXRTL 3.05s linear 0s infinite alternate, whimsyMoveY 3.4s linear 0s infinite alternate, whimsyRotate 1s linear 0s infinite normal; } @media (min-resolution: 2dppx) { #PanelUI-popup #PanelUI-contents:empty::before { background-image: url("chrome://browser/skin/customizableui/whimsy@2x.png"); } } @keyframes whimsyMoveX { /* These values are adjusted for the padding on the panel. */ from { margin-left: -15px; } to { margin-left: calc(100% - 49px); } } @keyframes whimsyMoveXRTL { /* These values are adjusted for the padding on the panel. */ from { margin-right: -15px; } to { margin-right: calc(100% - 49px); } } @keyframes whimsyMoveY { /* These values are adjusted for the padding and height of the panel. */ from { margin-top: -.5em; } to { margin-top: calc(64px - .5em); } } @keyframes whimsyRotate { to { transform: perspective(5000px) rotateY(360deg); } } #customization-panelHolder { border-radius: 4px; } #PanelUI-button { margin-inline-start: 3px; } #nav-bar[brighttext] > #PanelUI-button { } #PanelUI-menu-button[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge { display: -moz-box; height: 10px; width: 10px; background-size: contain; border: none; } #PanelUI-menu-button[badge-status="download-success"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { display: none; } #PanelUI-menu-button[badge-status="update-succeeded"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { background: #008484 url(chrome://browser/skin/update-badge.svg) no-repeat center; height: 13px; } #PanelUI-menu-button[badge-status="update-failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { background: #FF0000 url(chrome://browser/skin/update-badge-failed.svg) no-repeat center; height: 13px; } #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { box-shadow: none; } #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, #PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { width: 7px; height: 7px; min-width: 0; border-radius: 50%; /* "!important" is necessary to override the rule in toolbarbutton.css */ margin-top: -1px !important; margin-right: -2px !important; } #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { background: #FFBF00; } #PanelUI-menu-button[badge-status="download-severe"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { background: #FF0000; } #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { height: 13px; background: transparent url(chrome://browser/skin/warning.svg) no-repeat center; } #PanelUI-menu-button[badge-status="download-warning"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive, #PanelUI-menu-button[badge-status="fxa-needs-authentication"] > .toolbarbutton-badge-stack > .toolbarbutton-badge:-moz-window-inactive { } .panel-subviews { padding: 4px; background-clip: padding-box; border-left: 1px solid var(--panel-separator-color); margin-inline-start: var(--panel-ui-exit-subview-gutter-width); } .panel-viewstack[viewtype="main"] > .panel-subviews { transform: translateX(var(--panel-ui-menuPanelWidth)); } .panel-viewstack[viewtype="main"] > .panel-subviews:-moz-locale-dir(rtl) { transform: translateX(var(--panel-ui-menuPanelWidth-neg)); } panelmultiview[nosubviews=true] > .panel-viewcontainer > .panel-viewstack > .panel-subviews { display: none; } .panel-viewstack:not([viewtype="main"]) > .panel-mainview > #PanelUI-mainView { -moz-box-flex: 1; } .panel-subview-body { overflow-y: auto; overflow-x: hidden; -moz-box-flex: 1; } #PanelUI-popup .panel-subview-body { margin: -4px; padding: 4px 4px; } .panel-subview-header, .subviewbutton.panel-subview-footer { box-sizing: border-box; /* min-height: 41px; */ padding: 3px; } .panel-subview-header { margin: 0 0 4px; background-color: var(--panel-separator-color); color: #000000; font-variant: small-caps; border-radius: 4px; } .panel-subview-footer { border-top: 1px solid var(--panel-separator-color); } .cui-widget-panelview .panel-subview-header { display: none; } .cui-widget-panelview .subviewbutton.panel-subview-footer { margin: 4px 0 0; -moz-box-pack: center; } #PanelUI-mainView { display: flex; flex-direction: column; border-radius: 4px; } #PanelUI-popup > arrowscrollbox > autorepeatbutton { display: none; } #PanelUI-popup > arrowscrollbox > scrollbox { overflow: visible; } #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent { overflow: hidden; padding: 0; } #PanelUI-popup > .panel-arrowcontainer > .panel-arrowcontent, .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent > .popup-internal-box { padding: 0; } .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text, .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text { /* line-height: 1.2;*/ max-height: 2.4em; } .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text, .panelUI-grid .toolbarbutton-1:not([auto-hyphens="off"]) > .toolbarbutton-multiline-text { -moz-hyphens: auto; } .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text, .panelUI-grid:not([customize-transitioning]) .toolbarbutton-1 > .toolbarbutton-multiline-text { position: absolute; clip: rect(-0.1em, auto, 2.6em, auto); } .panelUI-grid .toolbarbutton-1 > .toolbarbutton-text, .panelUI-grid .toolbarbutton-1 > .toolbarbutton-multiline-text { text-align: center; /* Need to override toolkit theming which sets margin: 0 !important; */ margin: 2px 0 0 !important; } .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text { text-align: center; margin: -1px 0 0; } #wrapper-edit-controls:-moz-any([place="palette"],[place="panel"]) > #edit-controls, #wrapper-zoom-controls:-moz-any([place="palette"],[place="panel"]) > #zoom-controls { margin-inline-start: 0; } #PanelUI-contents { max-width: var(--panel-ui-menuPanelWidth); } #BMB_bookmarksPopup, .panel-mainview:not([panelid="PanelUI-popup"]) { max-width: var(--panel-ui-standaloneSubviewWidth); } /* Give WebExtension stand-alone panels extra width for Chrome compatibility */ .cui-widget-panel[viewId^=PanelUI-webext-] .panel-mainview { max-width: 800px; } .cui-widget-panel[viewId^=PanelUI-webext-] > .panel-arrowcontainer > .panel-arrowcontent { padding: 0; } panelview[id^=PanelUI-webext-] { overflow: hidden; } panelview:not([mainview]) .toolbarbutton-text, .cui-widget-panel toolbarbutton > .toolbarbutton-text { text-align: start; display: -moz-box; } .cui-widget-panel > .panel-arrowcontainer > .panel-arrowcontent { padding: 0; } .cui-widget-panel.cui-widget-panelWithFooter > .panel-arrowcontainer > .panel-arrowcontent { padding-bottom: 0; } .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):first-child { border-radius: 4px 4px 0 0; } .cui-widget-panel > :-moz-any(menu,menuitem,toolbarbutton):last-child { border-radius: 0 0 4px 4px; } #PanelUI-contents { display: block; flex: 1 0 auto; margin-left: auto; margin-right: auto; max-width: var(--panel-ui-menuPanelWidth); } #PanelUI-contents-scroller { overflow-y: auto; overflow-x: hidden; width: var(--panel-ui-menuPanelWidth); flex: auto; } .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton > .toolbarbutton-icon { min-width: 0; min-height: 0; margin: 0; } toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item), .panelUI-grid .toolbarbutton-1, .panel-customization-placeholder-child { -moz-appearance: none; -moz-box-orient: vertical; width: var(--panel-ui-menuPanelButtonWidth-min2); /* LCARStrek: XXX: found out to be needed to fit the icons */ height: calc(51px + 2.2em); } /* In order to have button labels constrained appropriately, items inside the toolbarpaletteitem * should have a min-width set so they abide by the width set above (which they do outside of * customize mode because they're in a flexed container) */ toolbarpaletteitem[place="panel"]:not([haswideitem=true]) > .toolbarbutton-1 { min-width: 0.01px; } /* Help SDK buttons fit in. */ toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-icon, toolbarpaletteitem[place="palette"] > toolbarbutton[constrain-size="true"] > .toolbarbutton-badge-stack > .toolbarbutton-icon, toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-icon, toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { height: 32px; width: 32px; } toolbarpaletteitem:-moz-any([place="palette"], [place="panel"]) > toolbaritem[sdkstylewidget="true"] > .toolbarbutton-1 > .toolbarbutton-icon { width: 32px; height: 32px; } .customization-palette .toolbarbutton-1 { -moz-appearance: none; -moz-box-orient: vertical; } .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button { -moz-appearance: none; -moz-box-orient: vertical; width: var(--panel-ui-menuPanelButtonWidth-min2); height: calc(49px + 2.2em); border: 0; } .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-text, .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-multiline-text { margin-top: 2px; /* Hack needed to get the label of type=menu-button aligned with other buttons */ } .panel-customization-placeholder-child { margin: 6px 0 0; /* padding: 2px 6px;*/ } .panelUI-grid .toolbarbutton-1[type="menu"] { background-image: url("chrome://global/skin/arrow/arrow-down-sharp.gif"); background-position: right 3px top 16px; background-repeat: no-repeat; } .panelUI-grid .toolbarbutton-1[type="menu"]:-moz-locale-dir(rtl) { background-position: left 3px top 16px; } .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menu-dropmarker { display: none; } .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-dropmarker { -moz-box-align: center; width: 16px; margin-inline-start: -16px; height: 51px; margin-bottom: 2.2em; padding: 0; } .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active) > .toolbarbutton-menubutton-dropmarker { border-radius: 0 0 0 2px; } .panelUI-grid .toolbarbutton-1:not([buttonover]):not([disabled]):-moz-any([open],:hover:active)> .toolbarbutton-menubutton-dropmarker:-moz-locale-dir(rtl) { border-radius: 0 0 2px 0; } #main-window:not([customizing]) .panel-combined-button[disabled] > .toolbarbutton-icon { /* opacity: .5; */ } toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) { width: var(--panel-ui-menuPanelButtonWidth); margin: 0 !important; } toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) { -moz-box-align: center; -moz-box-pack: center; } toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"] > iframe { margin: 4px auto; } #PanelUI-multiView[viewtype="subview"] > .panel-viewcontainer > .panel-viewstack > .panel-mainview > #PanelUI-mainView { } #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .panel-wide-item, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-contents-scroller > #PanelUI-contents > .toolbarbutton-1:not([panel-multiview-anchor="true"]), #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-update-status, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-avatar, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-status > #PanelUI-fxa-label, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-fxa > #PanelUI-fxa-icon, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > toolbarseparator, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-customize, #PanelUI-multiView[viewtype="subview"] #PanelUI-mainView > #PanelUI-footer > #PanelUI-footer-inner > #PanelUI-help:not([panel-multiview-anchor="true"]) { opacity: .5; } /* * XXXgijs: this is a workaround for a layout issue that was caused by these iframes, * which was affecting subview display. Because of this, we're hiding the iframe *only* * when displaying a subview. The discerning user might notice this, but it's not nearly * as bad as the brokenness. * This hack should be removed once https://bugzilla.mozilla.org/show_bug.cgi?id=975375 * is addressed. */ #PanelUI-multiView[viewtype="subview"] toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > iframe { visibility: hidden; } toolbaritem[cui-areatype="menu-panel"][sdkstylewidget="true"]:not(.panel-wide-item) > .toolbarbutton-text { text-align: center; } .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, .panelUI-grid .toolbarbutton-1 > .toolbarbutton-icon, .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack, .customization-palette .toolbarbutton-1 > .toolbarbutton-menubutton-button > .toolbarbutton-icon, .customization-palette .toolbarbutton-1 > .toolbarbutton-icon, .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack, .panelUI-grid #bookmarks-toolbar-placeholder > .toolbarbutton-icon, .customization-palette #bookmarks-toolbar-placeholder > .toolbarbutton-icon, .panel-customization-placeholder-child > .toolbarbutton-icon { width: 32px; height: 32px; min-width: 32px; min-height: 32px; /* Explanation for the below formula (A / B - C) A Each button is @menuPanelButtonWidth@ wide B Each button has two margins. C (44px / 2 = 22px) The button icon is 32 pixels wide. The button has 12px of horizontal padding (6 on each side). The button has 0px of horizontal border (0 on each side). Total width of button's icon + button padding should therefore be 44px, which means each horizontal margin should be the half the button's width - (44/2) px. */ margin: 4px var(--panel-ui-menuPanelButtonIconMargin); } /* above we treat the container as the icon for the margins, that is so the /* badge itself is positioned correctly. Here we make sure that the icon itself /* has the minimum size we want, but no padding/margin. */ .panelUI-grid .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon, .customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon { width: 32px; height: 32px; min-width: 32px; min-height: 32px; margin: 0; padding: 0; } toolbarpaletteitem[place="palette"] > toolbaritem > toolbarbutton { -moz-box-flex: 1; } #personal-bookmarks[overflowedItem=true] > #bookmarks-toolbar-placeholder { -moz-box-flex: 1; } #personal-bookmarks[cui-areatype="toolbar"][overflowedItem=true] > #bookmarks-toolbar-placeholder > .toolbarbutton-icon { margin-inline-end: 2px; } #edit-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #copy-button, #zoom-controls:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > #zoom-reset-button { border-left: none; border-right: none; border-radius: 0; } #zoom-in-button > .toolbarbutton-text, #zoom-out-button > .toolbarbutton-text, #zoom-reset-button > .toolbarbutton-icon { display: none; } #PanelUI-footer { display: flex; flex-shrink: 0; flex-direction: column; /* background-color: var(--arrowpanel-dimmed);*/ padding: 0; margin: 0; border-bottom-right-radius: 4px; border-bottom-left-radius: 4px; } #main-window[customizing] #PanelUI-footer-fxa { display: none; } #PanelUI-footer-fxa:not([fxastatus="signedin"]) > toolbarseparator, #PanelUI-footer-fxa:not([fxastatus="signedin"]) > #PanelUI-fxa-icon, #PanelUI-footer-fxa:not([fxaprofileimage]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar { display: none; } #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status::after { content: url("chrome://browser/skin/warning.svg"); width: 47px; padding-top: 1px; display: block; text-align: center; position: relative; top: 25%; } #PanelUI-update-status[update-status]::after { content: ""; width: 14px; height: 14px; margin-right: 16.5px; border-radius: 2px; background-size: contain; display: -moz-box; } #PanelUI-update-status[update-status="succeeded"]::after { background-image: url(chrome://browser/skin/update-badge.svg); background-color: #008484; } #PanelUI-update-status[update-status="failed"]::after { background-image: url(chrome://browser/skin/update-badge-failed.svg); background-color: #FF0000; } #PanelUI-fxa-status { display: flex; flex: 1 1 0%; width: 1px; } #PanelUI-footer-inner, #PanelUI-footer-fxa:not([hidden]) { display: flex; border-top: 1px solid var(--panel-separator-color); } #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-inner, #PanelUI-multiView[viewtype="subview"] #PanelUI-footer-fxa { position: relative; } #PanelUI-footer-inner > toolbarseparator, #PanelUI-footer-fxa > toolbarseparator { border: 0; border-left: 1px solid var(--panel-separator-color); margin: 0; } #PanelUI-footer-inner:hover > toolbarseparator, #PanelUI-footer-fxa:hover > toolbarseparator { /* margin: 0;*/ } #PanelUI-update-status, #PanelUI-help, #PanelUI-fxa-label, #PanelUI-fxa-icon, #PanelUI-customize, #PanelUI-quit { margin: 0; padding: 11px 0; box-sizing: border-box; min-height: 40px; box-shadow: none; border: none; border-radius: 0; transition: background-color; -moz-box-orient: horizontal; } #PanelUI-update-status { border-top: 1px solid var(--panel-separator-color); } #PanelUI-update-status { border-bottom: 1px solid transparent; margin-bottom: -1px; } #PanelUI-update-status > .toolbarbutton-text { width: 0; /* Fancy cropping solution for flexbox. */ } #PanelUI-help[panel-multiview-anchor="true"] { -moz-image-region: rect(0, 32px, 16px, 16px); } #PanelUI-help, #PanelUI-quit { min-width: 44px; } #PanelUI-update-status > .toolbarbutton-text, #PanelUI-fxa-label > .toolbarbutton-text, #PanelUI-customize > .toolbarbutton-text { margin: 0; padding: 0 6px; text-align: start; } #PanelUI-help > .toolbarbutton-text, #PanelUI-quit > .toolbarbutton-text, #PanelUI-fxa-avatar > .toolbarbutton-text { display: none; } #PanelUI-update-status > .toolbarbutton-icon, #PanelUI-fxa-label > .toolbarbutton-icon, #PanelUI-fxa-icon > .toolbarbutton-icon, #PanelUI-customize > .toolbarbutton-icon, #PanelUI-help > .toolbarbutton-icon, #PanelUI-quit > .toolbarbutton-icon { margin-inline-end: 0; } #PanelUI-fxa-icon { padding-inline-start: 15px; padding-inline-end: 15px; } #PanelUI-fxa-label, #PanelUI-customize { flex: 1; padding-inline-start: 15px; border-inline-start-style: none; } #PanelUI-footer-fxa[fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label, #PanelUI-footer-fxa[fxaprofileimage="enabled"]:not([fxastatus="error"]) > #PanelUI-fxa-status > #PanelUI-fxa-label { padding-inline-start: 0px; } #PanelUI-update-status { width: calc(var(--panel-ui-menuPanelWidth) + 30px); padding-inline-start: 15px; border-inline-start-style: none; } #PanelUI-update-status { list-style-image: url(chrome://branding/content/icon16.png); } #PanelUI-fxa-label, #PanelUI-fxa-icon { list-style-image: url("chrome://browser/skin/syncFx-horizontalbar.png"); } #PanelUI-remotetabs { --panel-ui-sync-illustration-height: 157.5px; } .PanelUI-remotetabs-instruction-title, .PanelUI-remotetabs-instruction-label, #PanelUI-remotetabs-mobile-promo { /* If you change the margin here, the min-height of the synced tabs panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may need adjusting (see bug 1248506) */ margin: 15px; text-align: center; text-shadow: none; max-width: 15em; color: #A09090; } .PanelUI-remotetabs-instruction-title { font-size: 1.3em; } /* The boxes with "instructions" get extra top and bottom padding for space around the illustration and buttons */ .PanelUI-remotetabs-instruction-box { /* If you change the padding here, the min-height of the synced tabs panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may need adjusting (see bug 1248506) */ padding-bottom: 30px; padding-top: 15px; } .PanelUI-remotetabs-prefs-button { /* -moz-appearance: none; background-color: #0096dd; / !important for the color as an OSX specific rule when a lightweight theme is used for buttons in the toolbox overrides. See bug 1238531 for details / color: white !important; border-radius: 2px; / If you change the margin or padding below, the min-height of the synced tabs panel (e.g. #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, etc) may need adjusting (see bug 1248506) / margin-top: 10px; margin-bottom: 10px; padding: 8px; text-shadow: none; */ min-width: 200px; } .PanelUI-remotetabs-prefs-button:hover, .PanelUI-remotetabs-prefs-button:hover:active { /* background-color: #018acb; */ } .remotetabs-promo-link { margin: 0; } .PanelUI-remotetabs-notabsforclient-label { color: #A09090; /* This margin is to line this label up with the labels in toolbarbuttons. */ margin-left: 28px; } .fxaSyncIllustration { height: var(--panel-ui-sync-illustration-height); list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg); } .PanelUI-remotetabs-prefs-button > .toolbarbutton-text { /* !important to override ".cui-widget-panel toolbarbutton > .toolbarbutton-text" above. */ text-align: center !important; text-shadow: none; } #PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */ min-width: 19em; } /* Work around bug 1224412 - these boxes will cause scrollbars to appear when the panel is anchored to a toolbar button. */ #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-setupsync, #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-reauthsync, #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-nodevicespane, #PanelUI-remotetabs[mainview] #PanelUI-remotetabs-tabsdisabledpane { min-height: calc(var(--panel-ui-sync-illustration-height) + 20px + /* margin of .PanelUI-remotetabs-prefs-button */ 16px + /* padding of .PanelUI-remotetabs-prefs-button */ 30px + /* margin of .PanelUI-remotetabs-instruction-label */ 30px + 15px + /* padding of .PanelUI-remotetabs-instruction-box */ 11em); } #PanelUI-remotetabs-tabslist > label[itemtype="client"] { color: #A09090; } /* Collapse the non-active vboxes in the remotetabs deck to use only the height the active box needs */ #PanelUI-remotetabs-deck:not([selectedIndex="1"]) > #PanelUI-remotetabs-tabsdisabledpane, #PanelUI-remotetabs-deck:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching, #PanelUI-remotetabs-deck:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane { visibility: collapse; } #PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons { display: none; } #PanelUI-fxa-icon[syncstatus="active"]:not([disabled]) { list-style-image: url("chrome://browser/skin/syncFxProgress-horizontalbar.png"); } #PanelUI-footer-fxa[fxastatus="migrate-signup"] > #PanelUI-fxa-status > #PanelUI-fxa-label, #PanelUI-footer-fxa[fxastatus="migrate-verify"] > #PanelUI-fxa-status > #PanelUI-fxa-label { list-style-image: url(chrome://browser/skin/warning.svg); -moz-image-region: auto; } #PanelUI-customize { list-style-image: url("chrome://browser/skin/menuPanel-customize.png"); } #customization-panelHolder #PanelUI-customize { list-style-image: url("chrome://browser/skin/customizableui/menuPanel-customizeFinish.png"); } #PanelUI-help { list-style-image: url("chrome://browser/skin/menuPanel-help.png"); } #PanelUI-quit { border-inline-end-style: none; list-style-image: url("chrome://browser/skin/menuPanel-exit.png"); } #PanelUI-fxa-label, #PanelUI-fxa-icon, #PanelUI-customize, #PanelUI-help, #PanelUI-quit { -moz-image-region: rect(0, 16px, 16px, 0); } #PanelUI-footer-fxa[fxastatus="signedin"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon, #PanelUI-footer-fxa[fxastatus="error"][fxaprofileimage="set"] > #PanelUI-fxa-status > #PanelUI-fxa-label > .toolbarbutton-icon { display: none; } #PanelUI-footer-fxa[fxastatus="error"]:not([fxaprofileimage="set"]) > #PanelUI-fxa-status > #PanelUI-fxa-avatar { display: none; } #PanelUI-fxa-status[disabled], #PanelUI-fxa-icon[disabled] { pointer-events: none; } #PanelUI-fxa-avatar { width: 32px; height: 32px; border-radius: 50%; background-repeat: no-repeat; background-position: 0 0; background-size: contain; align-self: center; margin: 0px 7px; padding: 0px; border: 0px none; margin-inline-end: 0; } #PanelUI-footer-fxa[fxaprofileimage="enabled"] > #PanelUI-fxa-status > #PanelUI-fxa-avatar { list-style-image: url(chrome://browser/skin/fxa/default-avatar.svg); } #PanelUI-customize:hover, #PanelUI-help:not([disabled]):hover, #PanelUI-quit:not([disabled]):hover, #PanelUI-customize:hover:active, #PanelUI-help:not([disabled]):hover:active, #PanelUI-quit:not([disabled]):hover:active, #PanelUI-help[panel-multiview-anchor="true"] { -moz-image-region: rect(0, 32px, 16px, 16px); } #PanelUI-help[disabled], #PanelUI-quit[disabled], #PanelUI-fxa-icon[disabled], #PanelUI-fxa-avatar[disabled], #PanelUI-fxa-label[disabled] > .toolbarbutton-icon, #PanelUI-fxa-status::after { -moz-image-region: rect(0, 48px, 16px, 32px); } #PanelUI-fxa-status:not([disabled]):hover, #PanelUI-fxa-icon:not([disabled]):hover, #PanelUI-help:not([disabled]):hover, #PanelUI-customize:hover, #PanelUI-quit:not([disabled]):hover { } #PanelUI-fxa-status:not([disabled]):hover:active, #PanelUI-fxa-icon:not([disabled]):hover:active, #PanelUI-help:not([disabled]):hover:active, #PanelUI-customize:hover:active, #PanelUI-quit:not([disabled]):hover:active { } #PanelUI-fxa-status:not([disabled]):hover, #PanelUI-fxa-status:not([disabled]):hover:active, #PanelUI-fxa-icon:not([disabled]):hover, #PanelUI-fxa-icon:not([disabled]):hover:active { } #PanelUI-footer-fxa[fxastatus="error"] { background-color: #FF0000; color: #000000; } #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover { background-color: #FFCF00; } #PanelUI-footer-fxa[fxastatus="error"] > #PanelUI-fxa-status:hover:active { background-color: #FF9F00; } #PanelUI-update-status { /* color: black; */ } #PanelUI-update-status[update-status="succeeded"] { background-color: #008484; color: #000000; } #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover { background-color: #FFCF00; } #PanelUI-update-status[update-status="succeeded"]:not([disabled]):hover:active { background-color: #FF9F00; } #PanelUI-update-status[update-status="failed"] { background-color: #FF0000; color: #000000; } #PanelUI-update-status[update-status="failed"]:not([disabled]):hover { background-color: #FFCF00; } #PanelUI-update-status[update-status="failed"]:not([disabled]):hover:active { background-color: #FF9F00; } #PanelUI-quit:not([disabled]):hover { background-color: #FF0000; } #PanelUI-quit:not([disabled]):hover:active { background-color: #FF9F00; } #customization-panelHolder #PanelUI-customize { color: #FFCF00; background-color: #008484; text-shadow: none; margin-top: -1px; } #customization-panelHolder #PanelUI-customize + toolbarseparator { display: none; } #customization-panelHolder #PanelUI-customize:hover, #customization-panelHolder #PanelUI-customize:hover:active { background-color: #FFCF00; color: #000000; } #customization-palette .toolbarbutton-multiline-text, #customization-palette .toolbarbutton-text { display: none; } panelview .toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1, .panelUI-grid .toolbarbutton-1 > .toolbarbutton-menubutton-button, .share-provider-button, .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton { /* padding: 0 6px; background-color: transparent; border-radius: 2px; border-style: solid; border-color: transparent;*/ } panelview .toolbarbutton-1, .subviewbutton, .widget-overflow-list .toolbarbutton-1, .share-provider-button, .toolbaritem-combined-buttons:-moz-any(:not([cui-areatype="toolbar"]), [overflowedItem=true]) > toolbarbutton { border-width: 0; } .subviewbutton.panel-subview-footer { /* border-radius: 0; */ margin: 2px 0 0; } .subviewbutton.panel-subview-footer > .menu-text { margin-inline-start: 0px !important; padding-inline-start: 6px; padding-inline-end: 6px; -moz-box-flex: 0; text-align: center; } .subviewbutton.panel-subview-footer > .toolbarbutton-icon { margin: 0; } .subviewbutton.panel-subview-footer > .toolbarbutton-text { text-align: center; padding: 0; } .subviewbutton.panel-subview-footer > .menu-accel-container { padding-inline-start: 6px; } .subviewbutton:not(.panel-subview-footer) { margin: 0; } .subviewbutton:not(.panel-subview-footer) > .toolbarbutton-text, /* Bookmark items need a more specific selector. */ .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-text, .PanelUI-subView .subviewbutton:not(.panel-subview-footer) > .menu-iconic-text { /* font: menu;*/ } .PanelUI-subView .subviewbutton[shortcut]::after { content: attr(shortcut); float: right; color: #A09090; } .PanelUI-subView.cui-widget-panelview .subviewbutton[shortcut]::after { margin-inline-start: 10px; } /* This is a