summaryrefslogtreecommitdiffstats
path: root/browser/themes/shared/customizableui/panelUI-shared.css
diff options
context:
space:
mode:
Diffstat (limited to 'browser/themes/shared/customizableui/panelUI-shared.css')
-rw-r--r--browser/themes/shared/customizableui/panelUI-shared.css2213
1 files changed, 2213 insertions, 0 deletions
diff --git a/browser/themes/shared/customizableui/panelUI-shared.css b/browser/themes/shared/customizableui/panelUI-shared.css
new file mode 100644
index 0000000000..4f282b9d5a
--- /dev/null
+++ b/browser/themes/shared/customizableui/panelUI-shared.css
@@ -0,0 +1,2213 @@
+/* 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/. */
+
+:root {
+ --panel-item-hover-bgcolor: var(--button-hover-bgcolor);
+ --panel-item-active-bgcolor: var(--button-active-bgcolor);
+ --panel-banner-item-color: var(--button-color);
+ --panel-banner-item-background-color: var(--button-bgcolor);
+ --panel-banner-item-hover-bgcolor: var(--button-hover-bgcolor);
+ --panel-banner-item-active-bgcolor: var(--button-active-bgcolor);
+ --panel-banner-item-update-supported-bgcolor: #2AC3A2;
+ --panel-banner-item-info-icon-bgcolor: #0090ED;
+
+ --menu-panel-width: 22.35em;
+ --menu-panel-width-wide: 29em;
+
+ --arrowpanel-menuitem-margin-block: 0;
+ --arrowpanel-menuitem-margin-inline: 8px;
+ --arrowpanel-menuitem-margin: var(--arrowpanel-menuitem-margin-block) var(--arrowpanel-menuitem-margin-inline);
+ --arrowpanel-menuitem-padding-block: 8px;
+ --arrowpanel-menuitem-padding-inline: 8px;
+ --arrowpanel-menuitem-padding: var(--arrowpanel-menuitem-padding-block) var(--arrowpanel-menuitem-padding-inline);
+ --arrowpanel-menuitem-border-radius: 4px;
+ --arrowpanel-header-info-icon-padding: 4px;
+ --arrowpanel-header-info-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-info-icon-padding)));
+ --panel-separator-margin-vertical: 4px;
+ --panel-separator-margin-horizontal: 8px;
+ --panel-separator-margin: var(--panel-separator-margin-vertical) var(--panel-separator-margin-horizontal);
+ --panel-subview-body-padding-block: 8px;
+ --panel-subview-body-padding-inline: 0;
+ --panel-subview-body-padding: var(--panel-subview-body-padding-block) var(--panel-subview-body-padding-inline);
+
+ --panel-and-palette-icon-size: 16px;
+
+ &:not(:-moz-lwtheme) {
+ --panel-separator-zap-gradient: linear-gradient(90deg, #9059FF 0%, #FF4AA2 52.08%, #FFBD4F 100%);
+ }
+
+ &[uidensity=compact] {
+ --arrowpanel-menuitem-margin-inline: 4px;
+ --arrowpanel-menuitem-padding-block: 0px;
+ --panel-separator-margin-horizontal: 4px;
+ --panel-subview-body-padding-block: 4px;
+ :is(panel, menupopup):not([touchmode]) {
+ --arrowpanel-header-back-icon-padding: 4px;
+ }
+ }
+}
+
+/* The vars in this rule are not on the :root above so that they would
+ * work in conjunction with when touchmode attribute is set on the panels. */
+panel,
+menupopup {
+ /* The value for the header back icon padding is selected in a way that the
+ * height of the header and its separator will be equal to the panel inner
+ * top padding plus standard menuitem, so that the header's separator will
+ * be located excatly where a normal toolbarseparator would be located after
+ * the first menuitem, in a menu without a header. */
+ --arrowpanel-header-back-icon-padding: 6px;
+ --arrowpanel-header-back-icon-full-width: calc(16px + (2 * var(--arrowpanel-header-back-icon-padding)));
+ /* The min-height is calculated with the separator's horizontal margin rather
+ * than the vertical, to let the back icon have even spacing all around
+ * while being aligned with the separator. */
+ --arrowpanel-header-min-height: calc(var(--arrowpanel-header-back-icon-full-width)
+ + (var(--panel-separator-margin-horizontal) * 2));
+}
+
+#PanelUI-menu-button {
+ &[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+ display: flex;
+ height: 10px;
+ width: 10px;
+ background-size: contain;
+ border: none;
+
+ &:-moz-window-inactive {
+ filter: grayscale(100%);
+ }
+ }
+
+ &[badge-status="extension-new-tab"],
+ &[badge-status="download-success"] {
+ > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+ display: none;
+ }
+ }
+
+ &[badge-status="update-available"],
+ &[badge-status="update-downloading"],
+ &[badge-status="update-manual"],
+ &[badge-status="update-other-instance"],
+ &[badge-status="update-restart"],
+ &[badge-status="update-unsupported"] {
+ > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+ box-shadow: none;
+ /* "!important" is necessary to override the rule in toolbarbutton.css */
+ margin: -5px 0 0 !important;
+ margin-inline-end: -3px !important;
+ min-width: 12px;
+ min-height: 12px;
+ -moz-context-properties: fill;
+ background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center;
+ background-size: 12px;
+ }
+ }
+
+ &[badge-status="update-available"],
+ &[badge-status="update-downloading"],
+ &[badge-status="update-manual"],
+ &[badge-status="update-other-instance"],
+ &[badge-status="update-restart"] {
+ > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+ fill: var(--panel-banner-item-update-supported-bgcolor);
+ }
+ }
+
+ &[badge-status="update-unsupported"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+ background: url(chrome://global/skin/icons/warning-fill-12.svg) no-repeat center;
+ fill: var(--warning-icon-bgcolor);
+ }
+}
+
+.panel-banner-item {
+ &[notificationid="update-available"],
+ &[notificationid="update-downloading"],
+ &[notificationid="update-manual"],
+ &[notificationid="update-other-instance"],
+ &[notificationid="update-restart"] {
+ > .toolbarbutton-icon {
+ background-image: url(chrome://browser/skin/update-badge.svg);
+ background-repeat: no-repeat;
+ background-position: center;
+ -moz-context-properties: fill;
+ fill: var(--panel-banner-item-update-supported-bgcolor);
+ }
+ }
+
+ &[notificationid="update-unsupported"] > .toolbarbutton-icon {
+ background: url(chrome://global/skin/icons/warning.svg) no-repeat center;
+ -moz-context-properties: stroke, fill;
+ stroke: var(--arrowpanel-background);
+ fill: var(--warning-icon-bgcolor);
+ }
+}
+
+
+
+#PanelUI-menu-button[badge-status="addon-alert"],
+#PanelUI-menu-button[badge-status="fxa-needs-authentication"],
+#fxa-toolbar-menu-button[badge-status="login_failed"] {
+ > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+ height: 13px;
+ background: url(chrome://global/skin/icons/warning-fill-12.svg) center / contain no-repeat transparent;
+ box-shadow: none;
+ border-radius: 0;
+ -moz-context-properties: fill, stroke;
+ fill: var(--warning-icon-bgcolor);
+ stroke: var(--toolbar-bgcolor);
+ }
+}
+
+#fxa-toolbar-menu-button[badge-status="login_failed"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
+ display: flex;
+}
+
+.cui-widget-panel,
+#widget-overflow,
+#unified-extensions-panel {
+ font: menu;
+}
+
+panelview {
+ flex-direction: column;
+ background: var(--arrowpanel-background);
+ padding: 0;
+
+ /* Prevent a scrollbar from appearing while the animation for transitioning from
+ one view to another runs, which would otherwise happen if the new view has
+ more height than the old one because that would mean that during the
+ animation the height of the multiview will be too short for the new view. */
+ &[transitioning] > .panel-viewcontainer > .panel-viewstack > panelview > .panel-subview-body {
+ overflow-y: hidden;
+ }
+}
+
+.panel-subview-body {
+ overflow-y: auto;
+ overflow-x: hidden;
+ flex: 1;
+ padding: var(--panel-subview-body-padding);
+
+ &:not(:last-child) {
+ padding-bottom: 0;
+ }
+
+ toolbarseparator + & {
+ padding-top: 0;
+ }
+}
+
+.panel-view-body-unscrollable {
+ overflow: hidden;
+ flex: 1;
+}
+
+.panel-info-button {
+ appearance: none;
+ color: inherit;
+ padding: 0;
+ border-radius: var(--toolbarbutton-border-radius);
+ flex-shrink: 0;
+
+ &[disabled=true] {
+ visibility: hidden;
+ }
+
+ &:hover {
+ background-color: var(--panel-item-hover-bgcolor);
+ }
+
+ &:not(:hover)[checked],
+ &:hover:active {
+ background-color: var(--panel-item-active-bgcolor);
+ }
+
+ &:focus-visible {
+ outline: var(--focus-outline);
+ }
+
+ > image {
+ list-style-image: url(chrome://global/skin/icons/info.svg);
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ padding: var(--arrowpanel-header-info-icon-padding);
+ }
+}
+
+#wrapper-edit-controls:is([place="palette"],[place="panel"]) > #edit-controls,
+#wrapper-zoom-controls:is([place="palette"],[place="panel"]) > #zoom-controls,
+:is(panelview, #widget-overflow-fixed-list) .toolbaritem-combined-buttons {
+ margin: var(--arrowpanel-menuitem-margin);
+}
+
+/* Tweaks for menupopups hanging off toolbar buttons to make them feel like panels */
+
+.toolbar-menupopup {
+ &,
+ menupopup {
+ appearance: none;
+ border: none;
+ font: menu;
+ background-color: transparent;
+ --panel-background: var(--arrowpanel-background);
+ --panel-color: var(--arrowpanel-color);
+ --panel-border-color: var(--arrowpanel-border-color);
+ --panel-border-radius: var(--arrowpanel-border-radius);
+ --panel-padding: var(--panel-subview-body-padding);
+ }
+
+ menupopup {
+ /* Align non top-level menupopup's first menuitem with the menuitem that opened it.
+ * The 1px is for the menupopup's border. */
+ margin-top: calc(-1 * (var(--panel-subview-body-padding-block) + var(--panel-shadow-margin) + 1px));
+ }
+
+ :is(menu, menuitem) {
+ &[disabled] {
+ color: var(--panel-disabled-color);
+ }
+
+ &:not([disabled])[_moz-menuactive] {
+ color: inherit;
+ background-color: var(--panel-item-hover-bgcolor);
+
+ &:active {
+ color: inherit;
+ background-color: var(--panel-item-active-bgcolor);
+ }
+ }
+
+ &::before,
+ &::after {
+ content: none; /* Reset's macOS' checkmark spacing */
+ }
+ }
+
+ .menu-text,
+ .menu-iconic-text,
+ .menu-iconic-icon,
+ .menu-iconic-left,
+ .menu-iconic-accel,
+ .menu-accel-container,
+ .menu-accel,
+ .menu-right {
+ /* Reset every spacing and appearance set by the platforms' menu.css
+ * and set the ones we need in the following rules. */
+ margin: 0;
+ padding: 0;
+ appearance: none;
+ }
+
+ :is(.menu-iconic, .menuitem-iconic) > .menu-iconic-left {
+ margin-inline-end: 8px;
+ }
+
+ .menu-accel,
+ .menu-iconic-accel {
+ margin-inline-start: 16px;
+ }
+
+ menu > .menu-right {
+ list-style-image: url(chrome://global/skin/icons/arrow-right.svg);
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ fill-opacity: 0.6;
+ width: unset;
+ height: unset;
+
+ &:-moz-locale-dir(rtl) {
+ list-style-image: url(chrome://global/skin/icons/arrow-left.svg);
+ }
+ }
+
+ menuseparator {
+ padding: var(--panel-separator-margin);
+ }
+}
+
+#BMB_bookmarksPopup {
+ max-width: 30em;
+}
+
+:is(.toolbar-menupopup, .toolbar-menupopup menupopup)[emptyplacesresult] > menuitem > .menu-accel-container > .menu-accel {
+ margin: 0;
+}
+
+#confirmation-hint {
+ --arrowpanel-background: #0060df;
+ --arrowpanel-border-color: #0060df;
+ --arrowpanel-color: #fff;
+ --arrowpanel-padding: 6px 10px;
+ font-weight: 400;
+ font-size: 1.1rem;
+
+ &::part(content) {
+ align-items: center;
+ }
+
+ /* Don't show the checkmark if there is a description */
+ &.with-description #confirmation-hint-checkmark-animation-container {
+ display: none;
+ }
+
+ &[data-message-id="loginRemoved"] #confirmation-hint-checkmark-image {
+ background-image: url("chrome://global/skin/icons/delete.svg");
+ background-size: contain;
+ -moz-context-properties: fill;
+ fill: #FFF;
+ animation: none;
+ }
+}
+
+#confirmation-hint-checkmark-animation-container {
+ position: relative;
+ overflow: hidden;
+ width: 14px;
+ height: 14px;
+
+ &[animate] > #confirmation-hint-checkmark-image {
+ display: block;
+ position: absolute;
+ background-image: url(chrome://browser/skin/success-animation.svg);
+ background-repeat: no-repeat;
+ /* frames are 16px wide by 14px high */
+ min-width: 304px;
+ max-width: 304px;
+ min-height: 14px;
+ max-height: 14px;
+ animation-name: confirmation-hint-checkmark-animation;
+ animation-fill-mode: forwards;
+ animation-timing-function: steps(18);
+ -moz-context-properties: fill;
+ fill: currentColor;
+
+ &:-moz-locale-dir(rtl) {
+ animation-name: confirmation-hint-checkmark-animation-rtl;
+ transform: translateX(288px);
+ }
+
+ @media (prefers-reduced-motion: no-preference) {
+ animation-duration: 300ms;
+ animation-delay: 60ms;
+ }
+ }
+}
+
+@keyframes confirmation-hint-checkmark-animation {
+ from {
+ transform: translateX(0);
+ }
+ to {
+ transform: translateX(-288px);
+ }
+}
+
+@keyframes confirmation-hint-checkmark-animation-rtl {
+ from {
+ transform: translateX(288px);
+ }
+ to {
+ transform: translateX(0);
+ }
+}
+
+#confirmation-hint-message {
+ margin-inline: 7px 0;
+
+ #confirmation-hint.with-description & {
+ font-size: 1.2em;
+ font-weight: 600;
+ }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ #confirmation-hint-message-container {
+ transform: scale(.8);
+ opacity: 0;
+ transition: transform 120ms cubic-bezier(.25,1.27,.35,1.18),
+ opacity 60ms linear;
+
+ #confirmation-hint-checkmark-animation-container[animate] + & {
+ transform: scale(1);
+ opacity: 1;
+ }
+ }
+}
+
+panelview[id^=PanelUI-webext-] {
+ overflow: hidden;
+}
+
+.cui-widget-panel {
+ --arrowpanel-padding: var(--panel-subview-body-padding);
+}
+
+#appMenu-popup panelview,
+/* The Report Broken Site panel can be opened from the Help menu
+ * in the menubar, which isn't a descendant of #appMenu-popup.
+ * Target it specifically in this rule to make it the same width
+ * as if it was a standard panelview opened from the app menu. */
+#report-broken-site-popup-mainView[mainview],
+#PanelUI-fxa {
+ width: 22.5em;
+}
+
+:where(#customizationui-widget-multiview) panelview:not([extension]) {
+ min-width: var(--menu-panel-width);
+ max-width: 35em;
+}
+
+#appMenu-libraryView,
+#pageActionPanel panelview,
+#widget-overflow panelview {
+ min-width: var(--menu-panel-width-wide);
+ max-width: var(--menu-panel-width-wide);
+}
+
+/* Add 2 * 16px extra width for touch mode button padding. */
+#appMenu-popup[touchmode] panelview {
+ min-width: calc(var(--menu-panel-width) + 32px);
+}
+
+.toolbaritem-combined-buttons:is(
+ :not([cui-areatype="toolbar"]),
+ [overflowedItem=true]
+) > toolbarbutton > .toolbarbutton-icon {
+ min-width: 0;
+ min-height: 0;
+ margin: 0;
+}
+
+.animate-out {
+ animation-name: widget-animate-out;
+ animation-fill-mode: forwards;
+ animation-duration: 500ms;
+ animation-timing-function: var(--animation-easing-function);
+}
+
+@keyframes widget-animate-out {
+ 0% {
+ opacity: 1;
+ transform: scale(1);
+ }
+ 100% {
+ opacity: 0 ;
+ transform: scale(.5);
+ }
+}
+
+toolbarpaletteitem {
+ &[place="panel"] > .toolbarbutton-1 {
+ flex: 1;
+ }
+}
+
+/* Help webextension 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="panel"] > .toolbarbutton-icon,
+toolbarbutton[constrain-size="true"][cui-areatype="panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+ height: var(--panel-and-palette-icon-size);
+ width: var(--panel-and-palette-icon-size);
+}
+
+#customization-palette .toolbarbutton-1 {
+ appearance: none;
+ flex-direction: column;
+ padding: 12px 0 9px;
+ margin: 0;
+}
+
+/* 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. */
+.customization-palette .toolbarbutton-1 > .toolbarbutton-badge-stack > .toolbarbutton-icon {
+ width: var(--panel-and-palette-icon-size);
+ height: var(--panel-and-palette-icon-size);
+ min-width: var(--panel-and-palette-icon-size);
+ min-height: var(--panel-and-palette-icon-size);
+ margin: 0;
+ padding: 0;
+}
+
+#zoom-in-button > .toolbarbutton-text,
+#zoom-out-button > .toolbarbutton-text,
+#zoom-reset-button > .toolbarbutton-icon {
+ display: none;
+}
+
+/* Main menu banner menuitems */
+
+#appMenu-popup {
+ .panel-banner-item,
+ .addon-banner-item {
+ align-items: flex-start;
+ color: var(--panel-banner-item-color);
+ background-color: var(--panel-banner-item-background-color);
+ margin-bottom: 4px;
+ font-weight: 600;
+ }
+
+ .panel-banner-item,
+ .addon-banner-item {
+ &:not([disabled]):hover {
+ background-color: var(--panel-banner-item-hover-bgcolor);
+
+ &:active {
+ background-color: var(--panel-banner-item-active-bgcolor);
+ }
+ }
+
+ > .toolbarbutton-text {
+ display: inline-block;
+ padding: 0;
+ }
+ }
+}
+
+:root[uidensity="compact"] {
+ .panel-banner-item,
+ .addon-banner-item {
+ /* Without some padding the button gets too crowded even for compact mode
+ when the text wraps to a newline. */
+ padding-block: 4px;
+ }
+}
+
+.panel-banner-item > .toolbarbutton-icon {
+ width: 16px;
+ height: 16px;
+ /* Move the icon to appear after the text label. */
+ order: 2;
+}
+
+.addon-banner-item {
+ > .toolbarbutton-icon {
+ display: none;
+ }
+
+ /* Addon banners use that one for the addon's icon and need a content element
+ added to put their generic notification in. */
+ &::after {
+ content: "";
+ display: flex;
+ background: url(chrome://global/skin/icons/warning.svg) no-repeat center;
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: fill;
+ fill: var(--warning-icon-bgcolor);
+ margin-inline-start: 10px;
+ }
+}
+
+/* FxAccount indicator bits. */
+
+@keyframes syncRotate {
+ from { transform: rotate(0); }
+ to { transform: rotate(360deg); }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+ #PanelUI-fxa-menu-syncnow-button[syncstatus="active"] > .toolbarbutton-icon,
+ #PanelUI-remotetabs-syncnow[syncstatus="active"] > .toolbarbutton-icon,
+ .syncNowBtn[syncstatus="active"] {
+ animation: syncRotate 0.8s linear infinite;
+ -moz-context-properties: fill;
+ fill: var(--toolbarbutton-icon-fill-attention);
+ visibility: visible;
+ }
+}
+
+.syncNowBtn {
+ -moz-context-properties: fill;
+ fill: currentColor;
+ height: 16px;
+ width: 16px;
+ list-style-image: url("chrome://browser/skin/sync.svg");
+ visibility: collapse;
+ order: 2;
+}
+
+#fxa-menu-account-fxa-avatar {
+ pointer-events: none;
+ list-style-image: var(--avatar-image-url);
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+/* Handle different UI states. */
+
+:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-syncnow-button {
+ display: none;
+}
+
+/* Error states */
+
+#appMenu-fxa-status2 {
+ display: flex;
+
+ &[fxastatus] {
+ margin: 0;
+ padding: 0;
+ }
+
+ &:not([fxastatus]) {
+ padding-block: 0 2px;
+
+ > #appMenu-fxa-label2 {
+ padding: 6px 12px;
+ background-color: var(--button-bgcolor);
+ font-size: 0.8em;
+ font-weight: 600;
+
+ &:hover {
+ background-color: var(--button-hover-bgcolor);
+ }
+
+ &:hover:active {
+ background-color: var(--button-active-bgcolor);
+ }
+ }
+ }
+}
+
+#appMenu-fxa-text,
+#appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 {
+ flex: 1;
+ align-self: center;
+}
+
+#appMenu-fxa-status2[fxastatus] > #appMenu-fxa-label2 > vbox > #appMenu-header-description,
+#appMenu-fxa-text {
+ font-weight: 600;
+}
+
+:root[fxadisabled=true] #appMenu-fxa-status2,
+:root[fxadisabled=true] #appMenu-fxa-separator {
+ display: none;
+}
+
+#fxa-manage-account-button > vbox > label,
+#PanelUI-fxa-menu-syncnow-button > hbox > label,
+#PanelUI-remotetabs-syncnow > hbox > label,
+#appMenu-fxa-label2 > vbox > label {
+ margin: 0;
+}
+
+.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] {
+ font-size: 11px;
+}
+
+#appMenu-fxa-status2 {
+ &[fxastatus="login-failed"] #appMenu-fxa-label2::after {
+ content: url("chrome://global/skin/icons/warning.svg");
+ -moz-context-properties: fill;
+ fill: var(--warning-icon-bgcolor);
+ }
+
+ &[fxastatus="unverified"] #appMenu-fxa-label2::after {
+ content: url("chrome://global/skin/icons/info-filled.svg");
+ -moz-context-properties: fill;
+ fill: var(--panel-banner-item-info-icon-bgcolor);
+ }
+}
+
+/* Firefox Account Toolbar Panel */
+
+#fxa-avatar-image {
+ width: 16px;
+ height: 16px;
+}
+
+:root {
+ --avatar-image-url: url(chrome://browser/skin/fxa/avatar.svg);
+
+ &[fxastatus="not_configured"] {
+ --avatar-image-url: url(chrome://browser/skin/fxa/avatar-empty.svg);
+ }
+
+ &:not([fxatoolbarmenu]) #fxa-toolbar-menu-button {
+ display: none;
+ }
+
+ /* stylelint-disable-next-line media-query-no-invalid */
+ @media not (-moz-bool-pref: "identity.fxaccounts.toolbar.defaultVisible") {
+ /* Hide the FxA toolbar button when its in the nav-bar, until in use */
+ &[fxastatus="not_configured"] #widget-overflow-list > #fxa-toolbar-menu-button,
+ &[fxastatus="not_configured"] #nav-bar-customization-target > #fxa-toolbar-menu-button {
+ display: none;
+ }
+ }
+
+ /* Non-signedin statuses icons are not totally round. */
+ &[fxastatus="signedin"] #fxa-avatar-image {
+ border-radius: 50%;
+ }
+
+ &:not([fxastatus="signedin"]) #PanelUI-fxa-menu-connect-device-button {
+ color: var(--panel-disabled-color);
+ }
+}
+
+#fxa-avatar-image,
+#PanelUI-fxa-menu-account-settings-button {
+ list-style-image: var(--avatar-image-url);
+}
+
+.PanelUI-fxa-service-description-label,
+.PanelUI-remotetabs-instruction-label {
+ /* Use 'lighter' font for this to de-emphasize it compared to the title. */
+ font-weight: lighter;
+
+ @media (-moz-platform: linux) {
+ /* Use 300 on Linux because 100 is too light (lacks contrast with
+ * the background) for some fonts in combination with anti-aliasing. */
+ font-weight: 300;
+ }
+}
+
+#fxa-menu-header-title {
+ color: var(--arrowpanel-color);
+}
+
+#fxa-menu-header-description {
+ color: var(--text-color-deemphasized);
+ font-weight: var(--font-weight-bold);
+}
+
+#cta-menu-header-description {
+ color: var(--text-color-deemphasized);
+}
+
+#PanelUI-appMenu-fxa-label-last-synced {
+ font-size: 10px;
+ font-style: italic;
+ color: var(--text-color-deemphasized);
+}
+
+#PanelUI-fxa-menu-send-button {
+ list-style-image: url(chrome://browser/skin/fxa/send.svg);
+}
+
+.ctaMenuLogo {
+ width: 16px;
+ height: 16px;
+ margin-inline-start: 5px;
+}
+
+#PanelUI-fxa-menu-monitor-button {
+ list-style-image: url(chrome://browser/skin/fxa/monitor.svg);
+}
+
+#PanelUI-fxa-menu-relay-button {
+ list-style-image: url(chrome://browser/content/logos/relay.svg);
+}
+
+#PanelUI-fxa-menu-vpn-button {
+ list-style-image: url("chrome://browser/skin/preferences/vpn-logo.svg");
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+:root:not([fxastatus="signedin"]) #PanelUI-fxa-menu-connect-device-button {
+ color: var(--panel-disabled-color);
+}
+
+/* From the FxA menu -> synced tabs, we don't need to clutter the view with
+ redundant buttons because these are accessible from the main menu */
+panelmultiview[mainViewId="PanelUI-fxa"] #PanelUI-remotetabs-syncnow {
+ display: none;
+}
+
+#PanelUI-sendTabToDevice > .panel-subview-body:not([state]) > #PanelUI-sendTabToDevice-syncingDevices {
+ display: none;
+}
+
+#PanelUI-fxa-menu-sendtab-button:-moz-locale-dir(rtl) > .toolbarbutton-icon {
+ transform: scaleX(-1);
+}
+
+.fxaSendLogo,
+.fxaMonitorLogo {
+ margin-top: 15px;
+ height: 80px;
+ width: 80px;
+}
+
+.fxaSendToDeviceLogo {
+ margin-top: 15px;
+ height: 119px;
+ width: 164px;
+ list-style-image: url(chrome://browser/skin/fxa/send-to-device.svg);
+}
+
+.fxaSendLogo {
+ list-style-image: url(chrome://browser/content/logos/send.svg);
+}
+
+.fxaMonitorLogo {
+ list-style-image: url(chrome://browser/content/logos/monitor.svg);
+}
+
+#PanelUI-remotetabs {
+ --panel-ui-sync-illustration-height: 141px;
+}
+
+.sendToDevice-device {
+ &[clientType=phone] {
+ list-style-image: url("chrome://browser/skin/device-phone.svg");
+ }
+
+ &[clientType=tablet] {
+ list-style-image: url("chrome://browser/skin/device-tablet.svg");
+ }
+
+ &[clientType=desktop] {
+ list-style-image: url("chrome://browser/skin/device-desktop.svg");
+ }
+
+ &[clientType=tv] {
+ list-style-image: url("chrome://browser/skin/device-tv.svg");
+ }
+
+ &[clientType=vr] {
+ list-style-image: url("chrome://browser/skin/device-vr.svg");
+ }
+
+ &.signintosync {
+ list-style-image: url("chrome://browser/skin/sync.svg");
+ }
+}
+
+.PanelUI-fxa-service-description-label,
+.PanelUI-remotetabs-instruction-label {
+ /* 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: 0;
+ text-align: center;
+ text-shadow: none;
+ max-width: 15em;
+ margin-top: 10px;
+}
+
+.PanelUI-fxa-signin-button,
+.PanelUI-remotetabs-button {
+ appearance: none;
+ background-color: #0060df;
+ /* !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-block: 15px;
+ text-shadow: none;
+ min-width: 200px;
+ padding: 1em;
+
+ &:hover {
+ background-color: #003eaa;
+
+ &:active {
+ background-color: #002275;
+ }
+ }
+}
+
+.remotetabs-promo-link {
+ margin: 0;
+}
+
+.PanelUI-remotetabs-notabsforclient-label {
+ color: var(--text-color-deemphasized);
+ /* This margin is to line this label up with the labels in toolbarbuttons. */
+ margin-inline-start: 28px;
+}
+
+.fxaSyncIllustration,
+.fxaSyncIllustrationIssue {
+ /* 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) */
+ width: 204px;
+ height: var(--panel-ui-sync-illustration-height);
+ -moz-context-properties: fill;
+ fill: #cdcdcd;
+}
+
+.fxaSyncIllustration {
+ list-style-image: url(chrome://browser/skin/fxa/sync-illustration.svg);
+}
+
+.fxaSyncIllustrationIssue {
+ list-style-image: url(chrome://browser/skin/fxa/sync-illustration-issue.svg);
+}
+
+.PanelUI-fxa-signin-button > .toolbarbutton-text,
+.PanelUI-remotetabs-button > .toolbarbutton-text {
+ /* Overrides toolbar[mode="icons"] from xul.css */
+ display: block;
+}
+
+#PanelUI-remotetabs[mainview] { /* panel anchored to toolbar button might be too skinny */
+ min-width: 19em;
+
+ .PanelUI-remotetabs-notabsforclient-label {
+ margin-inline-start: 32px;
+ }
+
+ /* Work around bug 1224412 - these boxes will cause scrollbars to appear when
+ the panel is anchored to a toolbar button.
+ */
+ #PanelUI-remotetabs-setupsync,
+ #PanelUI-remotetabs-syncdisabled,
+ #PanelUI-remotetabs-reauthsync,
+ #PanelUI-remotetabs-unverified,
+ #PanelUI-remotetabs-nodevicespane,
+ #PanelUI-remotetabs-tabsdisabledpane {
+ min-height: calc(var(--panel-ui-sync-illustration-height) +
+ 15px + /* margin of .fxaSyncIllustration */
+ 30px + /* margin of .PanelUI-remotetabs-button */
+ 8px + /* padding of .PanelUI-remotetabs-button */
+ 1em);
+ }
+}
+
+.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] {
+ color: var(--text-color-deemphasized);
+}
+
+/* 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,
+ &:not([selectedIndex="2"]) > #PanelUI-remotetabs-fetching,
+ &:not([selectedIndex="3"]) > #PanelUI-remotetabs-nodevicespane {
+ visibility: collapse;
+ }
+}
+
+#PanelUI-remotetabs-main[devices-status="single"] > #PanelUI-remotetabs-buttons {
+ display: none;
+}
+
+#PanelUI-fxa-remotetabs-deck:not([syncingtabs]) {
+ display: none;
+}
+
+#customization-palette .toolbarbutton-text {
+ display: none;
+}
+
+.toolbar-menupopup :is(menu, menuitem),
+.subview-subheader,
+panelview .toolbarbutton-1,
+.subviewbutton,
+.widget-overflow-list .toolbarbutton-1 {
+ appearance: none;
+ margin: var(--arrowpanel-menuitem-margin);
+ min-height: 24px;
+ padding: var(--arrowpanel-menuitem-padding);
+ border-radius: var(--arrowpanel-menuitem-border-radius);
+ background-color: transparent;
+ flex-shrink: 0;
+}
+
+.subview-subheader {
+ font-size: 11px;
+ font-weight: inherit;
+ color: var(--text-color-deemphasized);
+ padding-block: 4px;
+ box-sizing: border-box;
+}
+
+.subviewbutton {
+ /* toolbarbuttons default to centered, but we don't want that for subviews. */
+ justify-content: flex-start;
+
+ &[disabled="true"] {
+ color: var(--panel-disabled-color);
+ }
+
+ /* We don't always display: none this item, and if it has forced width (like above)
+ * or margin, that impacts the position of the label. Fix:
+ */
+ > .toolbarbutton-icon {
+ margin: 0;
+ }
+
+ > .toolbarbutton-text {
+ text-align: start;
+ display: block;
+ }
+
+ &[shortcut]::after {
+ content: attr(shortcut);
+ display: flex;
+ }
+
+ @media not (prefers-contrast) {
+ &[shortcut]:not([disabled])::after {
+ color: var(--panel-disabled-color);
+ }
+ }
+
+ &[shortcut]::after,
+ .widget-overflow-list .subviewbutton-nav::after,
+ .PanelUI-subView .subviewbutton-nav::after {
+ margin-inline-start: 10px;
+ }
+
+ &[checked="true"] {
+ list-style-image: url(chrome://global/skin/icons/check.svg);
+ -moz-context-properties: fill;
+ fill: currentColor;
+ color: inherit;
+ }
+
+ &[type="open-to-new"]::after {
+ content: url(chrome://global/skin/icons/open-in-new.svg);
+ -moz-context-properties: fill, fill-opacity;
+ fill: currentColor;
+ fill-opacity: 0.6;
+ display: flex;
+ height: 12px;
+ width: 12px;
+ }
+
+ &[type="open-to-new"]:-moz-locale-dir(rtl)::after {
+ transform: scaleX(-1);
+ }
+}
+
+.subviewbutton-iconic > .toolbarbutton-text,
+.subviewbutton[image] > .toolbarbutton-text,
+.subviewbutton[targetURI] > .toolbarbutton-text,
+.subviewbutton.bookmark-item > .toolbarbutton-text,
+.subviewbutton[checked="true"] > .toolbarbutton-text {
+ padding-inline-start: 8px;
+}
+
+.subviewbutton-iconic > .toolbarbutton-icon {
+ width: 16px;
+ height: 16px;
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+/* Adjust the Zoom toolbaritem padding to have its height the same as other toolbarbuttons,
+ * also in compact density and touch mode. */
+#appMenu-zoom-controls {
+ padding-block: max(0px, var(--arrowpanel-menuitem-padding-block) - 4px);
+
+ > .subviewbutton {
+ margin-inline-start: 2px;
+ padding: 4px;
+ }
+
+ /* hover and active color changes are applied to child elements not the button itself */
+ > .subviewbutton:not([disabled]):is(:hover, :hover:active) {
+ color: unset;
+ background-color: unset;
+ }
+
+ > .subviewbutton:focus-visible {
+ outline: none;
+ }
+}
+
+#appMenu-zoom-controls > .subviewbutton-iconic:focus-visible > .toolbarbutton-icon,
+#appMenu-zoomReset-button2:focus-visible > .toolbarbutton-text {
+ outline: var(--focus-outline);
+}
+
+#appMenu-zoomReduce-button2 > .toolbarbutton-icon,
+#appMenu-zoomEnlarge-button2 > .toolbarbutton-icon {
+ -moz-context-properties: fill, stroke;
+ fill: var(--button-color);
+ /* the stroke color is used to fill the circle in the icon */
+ stroke: var(--button-bgcolor);
+ border-radius: 50%;
+ padding: 0;
+}
+
+#appMenu-zoomReset-button2 > .toolbarbutton-text,
+#appMenu-fullscreen-button2 > .toolbarbutton-icon {
+ border-radius: 2px;
+}
+
+#appMenu-fullscreen-button2 > .toolbarbutton-icon {
+ padding: 1px;
+ background-color: var(--button-bgcolor);
+}
+
+#appMenu-zoomReduce-button2:not([disabled]):hover > .toolbarbutton-icon,
+#appMenu-zoomEnlarge-button2:not([disabled]):hover > .toolbarbutton-icon {
+ stroke: var(--panel-item-hover-bgcolor);
+}
+
+#appMenu-zoomReset-button2:not([disabled]):active:hover > .toolbarbutton-text,
+#appMenu-fullscreen-button2:not([disabled]):active:hover > .toolbarbutton-icon {
+ background-color: var(--panel-item-active-bgcolor);
+}
+
+#appMenu-zoomReduce-button2:not([disabled]),
+#appMenu-zoomEnlarge-button2:not([disabled]) {
+ &:hover {
+ > .toolbarbutton-icon {
+ stroke: var(--panel-item-hover-bgcolor);
+ }
+ }
+
+ &:active:hover {
+ > .toolbarbutton-icon {
+ stroke: var(--panel-item-active-bgcolor);
+ }
+ }
+}
+
+/**
+ * When the Zoom Reset button is disabled, we don't want the zoom-level
+ * indicator to be so hard to read, so we override the disabled text
+ * style on it.
+ */
+#appMenu-zoomReset-button2[disabled],
+#zoom-reset-button[disabled] {
+ opacity: 1;
+}
+
+.panel-subview-footer-button {
+ /* Set the footer's bottom margin according to menuitems inline margin
+ to make sure the footer's margin is even from all sides. */
+ margin-bottom: var(--arrowpanel-menuitem-margin-inline);
+}
+
+#protections-popup-mainView .subviewbutton-nav:not(.notFound),
+.widget-overflow-list .subviewbutton-nav,
+.PanelUI-subView .subviewbutton-nav {
+ &::after {
+ -moz-context-properties: fill, fill-opacity;
+ content: url(chrome://global/skin/icons/arrow-right.svg);
+ fill: currentColor;
+ fill-opacity: 0.6;
+ display: flex;
+ }
+
+ &:-moz-locale-dir(rtl)::after {
+ content: url(chrome://global/skin/icons/arrow-left.svg);
+ }
+}
+
+.PanelUI-subView {
+ .subviewbutton-nav-down::after {
+ content: url(chrome://global/skin/icons/arrow-down.svg);
+ }
+
+ .toolbaritem-combined-buttons > .subviewbutton {
+ flex: none;
+ height: auto;
+ margin-inline-start: 18px;
+ min-width: auto;
+ padding: 4px 5px;
+ }
+
+ .toolbaritem-combined-buttons > .subviewbutton-iconic > .toolbarbutton-text,
+ .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-icon {
+ display: none;
+ }
+
+ toolbarseparator.proton-zap {
+ border-image: var(--panel-separator-zap-gradient, none) 1;
+ }
+}
+
+/* A menu item with some buttons at the end. */
+.toolbaritem-menu-buttons {
+ /* Use the same margin at the start as at the end (other margin set below). */
+ margin-inline-start: 8px;
+
+ > .subviewbutton {
+ min-width: auto;
+ padding-inline: 5px;
+ }
+
+ > .subviewbutton-iconic:not([flex]) > .toolbarbutton-text {
+ display: none;
+ }
+}
+
+.toolbaritem-combined-buttons,
+.toolbaritem-menu-buttons {
+ align-items: center;
+ flex-direction: row;
+ border: 0;
+ border-radius: 0;
+}
+
+.toolbaritem-combined-buttons:not([widget-type="button-and-view"], [widget-type="custom"]),
+.toolbaritem-menu-buttons {
+ margin-inline-end: 8px;
+}
+
+panelmultiview .toolbaritem-combined-buttons > label {
+ flex: 1;
+ margin: 0;
+ padding: 4px 0;
+}
+
+#appMenu-zoomReset-button2 > .toolbarbutton-text {
+ min-width: calc(4ch + 8px);
+ text-align: center;
+}
+
+.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text {
+ padding-inline-start: 0;
+}
+
+panelview .toolbarbutton-1 {
+ margin-top: 6px;
+}
+
+:is(
+ panelview .toolbarbutton-1,
+ toolbarbutton.subviewbutton,
+ .widget-overflow-list .toolbarbutton-1,
+ .toolbaritem-combined-buttons:is(
+ :not([cui-areatype="toolbar"]),
+ [overflowedItem=true]
+ ) > toolbarbutton
+) {
+ &:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-inset);
+ }
+
+ /* hover styles for not-disabled, not-active buttons */
+ &:not([disabled]):hover {
+ color: inherit;
+ background-color: var(--panel-item-hover-bgcolor);
+
+ /* hovered-and-active styles for not-disabled buttons */
+ &:active {
+ color: inherit;
+ background-color: var(--panel-item-active-bgcolor);
+ box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
+ }
+ }
+}
+
+.PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"],
+#PanelUI-historyItems > toolbarbutton {
+ list-style-image: url("chrome://global/skin/icons/defaultFavicon.svg");
+ -moz-context-properties: fill;
+ fill: currentColor;
+}
+
+#fxa-menu-account-fxa-avatar,
+#appMenu-fxa-label > .toolbarbutton-icon,
+#PanelUI-containersItems > .subviewbutton > .toolbarbutton-icon,
+.PanelUI-remotetabs-clientcontainer > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon,
+#PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
+#PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
+#PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
+ width: 16px;
+ height: 16px;
+}
+
+#PanelUI-fxa-remotetabs-tabspane {
+ min-width: 0;
+}
+
+#PanelUI-fxa-menu-account-settings-button > .toolbarbutton-icon {
+ border-radius: 50%;
+}
+
+toolbarpaletteitem {
+ &[place="palette"] > #search-container {
+ min-width: 7em;
+ width: 7em;
+ min-height: 37px;
+ max-height: 37px;
+ }
+
+ &[place="panel"],
+ &[place="panel"] > toolbaritem {
+ flex: 1;
+ }
+
+ &[place="menu-panel"] > .subviewbutton-nav::after {
+ opacity: 0.5;
+ }
+}
+
+.toolbaritem-combined-buttons {
+ &:where(:not(.unified-extensions-item)):is(
+ :not([cui-areatype="toolbar"]),
+ [overflowedItem=true]
+ ) > toolbarbutton {
+ border: 0;
+ margin: 0;
+ flex: 1;
+ padding-block: var(--arrowpanel-menuitem-padding-block);
+ flex-direction: row;
+ }
+
+ &[cui-areatype="panel"] > .toolbarbutton-combined-buttons-dropmarker,
+ &[overflowedItem] > .toolbarbutton-combined-buttons-dropmarker {
+ display: none;
+ }
+
+ &:is(
+ :not([cui-areatype="toolbar"]),
+ [overflowedItem=true]
+ ) > toolbarbutton:not(.toolbarbutton-1)[disabled] {
+ opacity: 0.4;
+ /* Override toolbarbutton.css which sets the color to GrayText */
+ color: inherit;
+ }
+
+ &:is(
+ :not([cui-areatype="toolbar"]),
+ [overflowedItem=true]
+ ) > separator {
+ appearance: none;
+ align-items: stretch;
+ margin: .5em 0;
+ width: 1px;
+ height: auto;
+ background: var(--panel-separator-color);
+ transition-property: margin;
+ transition-duration: 10ms;
+ transition-timing-function: ease;
+ }
+
+ &:is(
+ :not([cui-areatype="toolbar"]),
+ [overflowedItem=true]
+ ):hover > separator {
+ margin: 0;
+ }
+}
+
+#zoom-controls[cui-areatype="toolbar"] > #zoom-reset-button > .toolbarbutton-text {
+ display: block;
+ /* 4 chars max, but `ch` is the width of the `0` glyph, so account for larger glyphs by adding 1ch */
+ min-width: calc(5ch + var(--toolbarbutton-inner-padding) * 2);
+}
+
+.widget-overflow-list {
+ .toolbarbutton-1 {
+ align-items: center;
+ flex-direction: row;
+ }
+
+ .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text {
+ text-align: start;
+ padding-inline-start: .5em;
+ }
+}
+
+#PanelUI-panicView > .panel-subview-body,
+#PanelUI-panicView {
+ overflow: visible;
+}
+
+#PanelUI-panicView.cui-widget-panelview {
+ min-width: 280px;
+}
+
+#PanelUI-panic-timeframe {
+ padding: 15px;
+ border-bottom: 1px solid var(--panel-separator-color);
+}
+
+#panic-button-success-icon,
+#PanelUI-panic-timeframe-icon {
+ background-color: transparent;
+ margin-inline-end: 10px;
+ list-style-image: image-set(
+ url(chrome://browser/skin/panic-panel/header.png),
+ url(chrome://browser/skin/panic-panel/header@2x.png) 2x
+ );
+ max-height: 48px;
+ width: 48px;
+}
+
+#panic-button-success-header {
+ align-items: center;
+ margin-bottom: 5px;
+}
+
+#PanelUI-panic-timeframe-icon:-moz-locale-dir(rtl) {
+ transform: scaleX(-1);
+}
+
+.subviewradio {
+ appearance: none;
+ align-items: center;
+ padding: 3px;
+ margin: 0 0 2px;
+ background-color: transparent;
+ border-radius: 4px;
+ border: 1px solid transparent;
+
+ &:hover {
+ background-color: var(--button-hover-bgcolor);
+ }
+
+ &:is([selected], [selected]:hover, :hover:active) {
+ background-color: var(--button-active-bgcolor);
+ }
+
+ > .radio-check {
+ appearance: none;
+ width: 16px;
+ height: 16px;
+ border: 1px solid rgba(110, 110, 110, 0.4);
+ border-radius: 50%;
+ margin: 1px 5px;
+ background-color: rgba(150,150,150,0.2);
+ }
+
+ > .radio-check[selected] {
+ background-color: light-dark(#fff, transparent);
+ border: 4px solid light-dark(#177ee6, #00ddff);
+ }
+}
+
+radiogroup:focus-visible > .subviewradio[focused="true"] {
+ outline: var(--focus-outline);
+
+ > .radio-label-box {
+ outline: none;
+ }
+}
+
+#PanelUI-panic-explanations {
+ padding: 10px 10px 0;
+}
+
+#PanelUI-panic-actionlist-main-label {
+ color: var(--text-color-deemphasized);
+ font-size: 0.9em;
+}
+
+.PanelUI-panic-actionlist {
+ padding: 2px 0;
+
+ &::before {
+ display: inline-block;
+ content: "";
+ width: 16px;
+ height: 16px;
+ margin-inline-end: 4px;
+ background-image: image-set(
+ url(chrome://browser/skin/panic-panel/icons.png),
+ url(chrome://browser/skin/panic-panel/icons@2x.png) 2x
+ );
+ vertical-align: bottom;
+ }
+}
+
+#PanelUI-panic-actionlist-history::before {
+ background-position-x: 16px;
+}
+
+#PanelUI-panic-actionlist-windows::before {
+ background-position-x: 32px;
+}
+
+#PanelUI-panic-actionlist-newwindow::before {
+ background-position-x: 48px;
+}
+
+#PanelUI-panic-warning {
+ color: #d74345;
+ text-align: center;
+ width: 100%;
+ margin-top: 20px;
+}
+
+#PanelUI-panic-view-button {
+ appearance: none;
+ background-color: var(--buttons-destructive-bgcolor);
+ color: var(--buttons-destructive-color);
+ margin: 5px 15px 11px;
+ border: 1px solid transparent;
+ border-radius: 4px;
+ font-weight: 600;
+ padding: 10px;
+
+ &:hover {
+ background-color: var(--buttons-destructive-hover-bgcolor);
+ }
+
+ &:hover:active {
+ background-color: var(--buttons-destructive-active-bgcolor);
+ }
+
+ &:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-offset);
+ }
+
+ > .toolbarbutton-text {
+ text-align: center;
+ text-shadow: none;
+ }
+}
+
+#panic-button-success-closebutton {
+ background-color: var(--button-bgcolor);
+ color: var(--button-color);
+ margin: 5px 0 0;
+ border: 1px solid transparent;
+ border-radius: 4px;
+ padding: 10px;
+ font-weight: 600;
+ appearance: none;
+
+ &:hover {
+ background-color: var(--button-hover-bgcolor);
+ &:active {
+ background-color: var(--button-active-bgcolor);
+ }
+ }
+}
+
+.panel-header {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ text-align: center;
+ /* Set the header's padding according to menuitems horizontal padding
+ to make sure they are even from all sides and aligned according to that padding. */
+ padding: var(--arrowpanel-menuitem-margin-inline);
+ /* Calculate the header's height assuming it includes an icon even if it doesn't,
+ to make sure all headers are the same height (assuming their text is a one liner). */
+ min-height: var(--arrowpanel-header-min-height);
+
+ + toolbarseparator {
+ margin-top: 0 !important;
+ }
+
+ > h1 {
+ flex: auto;
+ margin: 0;
+ }
+
+ &.panel-header-with-info-button > h1 {
+ /* Add the size of the info button to center properly. */
+ margin-inline-start: var(--arrowpanel-header-info-icon-full-width);
+ }
+
+ &.panel-header-with-info-button > .subviewbutton-back + h1 {
+ margin-inline-start: 0;
+ margin-inline-end: calc(var(--arrowpanel-header-back-icon-full-width)
+ - var(--arrowpanel-header-info-icon-full-width));
+ }
+
+ &:not(.panel-header-with-additional-element) > .subviewbutton-back + h1 {
+ /* Add the size of the back button to center properly. */
+ margin-inline-end: var(--arrowpanel-header-back-icon-full-width);
+ }
+
+ &.panel-header-with-additional-element > .additional-element-on-inline-start + h1 {
+ /* This is for panels where the extra element is on the inline-start side like
+ * the Report Broken Site panel.
+ * The var needs to be set manually via CSS on the .panel-header element as we
+ * can't predict what icon (and thus its size) may be in use. */
+ margin-inline-end: var(--arrowpanel-header-additional-element-width);
+ }
+
+ > h1 > span {
+ display: inline-block;
+ white-space: pre-wrap;
+ }
+
+ > .subviewbutton-back {
+ -moz-context-properties: fill;
+ fill: var(--arrowpanel-color);
+ list-style-image: url(chrome://global/skin/icons/arrow-left.svg);
+ padding: var(--arrowpanel-header-back-icon-padding);
+ }
+
+ > .subviewbutton-back:-moz-locale-dir(rtl) {
+ list-style-image: url(chrome://global/skin/icons/arrow-right.svg);
+ }
+}
+
+.subviewbutton-back {
+ margin: 0;
+
+ > .toolbarbutton-text {
+ display: none;
+ }
+}
+
+/* What's New panel */
+#customizationui-widget-multiview #PanelUI-whatsNew {
+ max-width: var(--menu-panel-width);
+}
+
+#protections-popup {
+ #messaging-system-message-container {
+ height: 260px;
+ overflow: hidden;
+ transition: margin-bottom .25s;
+ }
+
+ #messaging-system-message-container[disabled] {
+ /* Offset the height when hidden. This makes the panel content
+ * cover the info message and reveal it as it slides down, rather
+ * than the info message growing in height. */
+ margin-bottom: -260px;
+ pointer-events: none;
+ }
+
+ #messaging-system-message-container[disabled] #protections-popup-message {
+ opacity: 0;
+ }
+}
+
+#protections-popup-message {
+ display: flex;
+ align-items: flex-end;
+ height: calc(100% - 20px);
+ margin: 10px;
+ transition: opacity .25s;
+ opacity: 1;
+ background-image: url(chrome://browser/skin/controlcenter/hero-message-background.svg);
+ background-repeat: no-repeat;
+ background-position: top right;
+ -moz-context-properties: fill;
+
+ &:-moz-locale-dir(rtl) {
+ background-position-x: left;
+ }
+
+ .protections-popup-content {
+ display: block;
+ margin: 12px 0;
+ }
+
+ .whatsNew-message-body {
+ /* -10px to compensate for the margin on the container. We can't get rid of that
+ because it helps position the background image. */
+ margin: 0 calc(-10px + var(--horizontal-padding)) var(--vertical-section-padding);
+ margin-inline: 6px;
+ }
+
+ .text-link {
+ color: inherit;
+ font-weight: 600;
+ }
+}
+
+panelview {
+ &[mainview] #PanelUI-whatsNew-content {
+ height: 43em;
+ }
+
+ /* Hide the What's New header when the panel is a subview */
+ &:not([mainview]) #PanelUI-whatsNew-title {
+ display: none;
+ }
+}
+
+#PanelUI-whatsNew {
+ .panelMenu-toggleWhatsNew-checkbox {
+ padding-inline-start: 16px;
+ min-height: 41px;
+ }
+
+ .whatsNew-message {
+ cursor: pointer;
+ margin: 0;
+ padding: 0;
+ }
+
+ /* The following 2 rules show a 1 pixel line separator between What's New
+ * messages while at the same time ensuring that the first message (which has
+ * a date header) will not show the separator
+ */
+ .whatsNew-message-body::before {
+ content: "";
+ display: block;
+ height: 1px;
+ width: 104%;
+ margin-inline-start: -2%;
+ background: var(--panel-separator-color);
+ }
+
+ .has-icon::before {
+ /* the width of the icon + the grid margin */
+ width: calc(104% + 40px);
+ }
+
+ .whatsNew-message-date + .whatsNew-message-body::before {
+ display: none;
+ }
+
+ .whatsNew-message-date {
+ font-size: .85em;
+ margin: -12px;
+ margin-top: 0;
+ margin-inline-start: 0;
+ padding: 6px 16px;
+ background: var(--arrowpanel-dimmed);
+ }
+
+ .whatsNew-message-body {
+ padding: 5px 0 10px;
+ margin: 10px 16px;
+ text-align: inherit;
+ text-decoration: none;
+ color: inherit;
+ background: none;
+ border: none;
+ cursor: pointer;
+ }
+
+ .whatsNew-message-body.has-icon {
+ display: grid;
+ grid-template-columns: auto 32px;
+ grid-template-rows: 0;
+ grid-gap: 0 8px;
+ }
+
+ .whatsNew-message-icon {
+ height: 32px;
+ width: 32px;
+ margin: 14px auto;
+ display: grid;
+ grid-column-start: 2;
+ }
+
+ .whatsNew-message-subtitle {
+ margin: 2px 0;
+ font-size: .8em;
+ color: #949494;
+ font-weight: normal;
+ grid-column-start: 1;
+ }
+
+ .whatsNew-message-content {
+ display: grid;
+ margin: 5px 0 10px;
+ grid-column-start: 1;
+ }
+
+ .text-link {
+ background: none;
+ border: 0;
+ color: #45a1ff;
+ cursor: pointer;
+ font-size: .9em;
+ grid-column-start: 1;
+
+ &:hover {
+ color: #0a84ff;
+ text-decoration: underline;
+
+ &:active {
+ color: #0060df;
+ }
+ }
+ }
+}
+
+#PanelUI-whatsNew .whatsNew-message-title,
+#protections-popup-message .whatsNew-message-title {
+ display: grid;
+ font-size: 1.3em;
+ font-weight: 600;
+ line-height: 1.4em;
+ margin: 14px 0 0;
+ grid-column-start: 1;
+}
+
+#customizationui-widget-panel {
+ /* In the next two rules the panel's width is set according to the
+ * profiler backdrop image when not opened from the overflow panel. */
+ #PanelUI-profiler {
+ min-width: 319px;
+ max-width: 319px;
+ }
+
+ &[viewId="PanelUI-profiler"] {
+ --panel-width: 319px;
+ }
+
+ /* Override themes for the Pocket panel, because the Pocket
+ panel currently only supports dark and light themes. */
+ @media not (prefers-color-scheme: dark){
+ &[viewId="PanelUI-savetopocket"] {
+ --arrowpanel-background: #fbfbfb;
+ }
+ }
+}
+
+:where(#PanelUI-profiler) :is(description, label) {
+ margin: 0;
+}
+
+#PanelUI-profiler-header {
+ &[isinfocollapsed="false"] {
+ background: radial-gradient(circle farthest-side at top right, #03b1f4, #0556cd);
+ color: #fff;
+ /* Set custom hover/focus/active states on the info button,
+ to make them more visible on the header background */
+ --panel-item-hover-bgcolor: #0005;
+ --panel-item-active-bgcolor: #0007;
+
+ &:-moz-locale-dir(rtl) {
+ background: radial-gradient(circle farthest-side at top left, #03b1f4, #0556cd);
+ }
+
+ :is(button, toolbarbutton):focus-visible {
+ outline-color: currentColor;
+ }
+
+ toolbarseparator {
+ border-color: #0003;
+ }
+ }
+
+ &[isinfocollapsed="true"] #PanelUI-profiler-info {
+ opacity: 0;
+ pointer-events: none;
+ }
+
+ /* The header has an attribute "animationready" that is either set to "true" or to
+ "false". When the DOM is being initialized it is set to "false" so that animations
+ do not run. */
+ &[animationready="true"] #PanelUI-profiler-info {
+ transition: margin-block-end 250ms, opacity 250ms;
+ }
+}
+
+#PanelUI-profiler-info {
+ min-height: 180px;
+ padding: 0 15px 15px;
+ background: top 10px right no-repeat
+ url("chrome://browser/skin/profiler-popup-backdrop.png");
+ opacity: 1;
+}
+
+#PanelUI-profiler-content {
+ position: relative;
+ padding: calc(15px - var(--panel-separator-margin-vertical)) 15px 15px;
+}
+
+.PanelUI-profiler-description-title {
+ font-size: 1.3em;
+ font-weight: 600;
+ margin-block: 2px;
+}
+
+.PanelUI-profiler-description {
+ margin-block: 4px;
+}
+
+#PanelUI-profiler-learn-more {
+ margin-top: 4px;
+ color: #fff;
+ text-decoration: underline;
+
+ &:hover:active {
+ color: #fffc;
+ }
+}
+
+#PanelUI-profiler-presets {
+ margin: 8px 0;
+
+ &[disabled="true"]::part(label-box) {
+ opacity: 0.5;
+ }
+}
+
+#PanelUI-profiler-content-edit-settings {
+ font-size: .9em;
+}
+
+.PanelUI-profiler-content-label {
+ font-weight: 600;
+}
+
+#PanelUI-profiler-content-description {
+ margin-block: 4px;
+ font-size: .9em;
+ color: var(--text-color-deemphasized);
+}
+
+#PanelUI-profiler-content-recording:not([hidden]) {
+ display: flex;
+ place-items: center;
+ place-content: center;
+ gap: 13px;
+ padding-block: 28px;
+ font-size: 1.3em;
+}
+
+.PanelUI-profiler-recording-icon {
+ width: 42px;
+ list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg);
+ -moz-context-properties: fill;
+ fill: currentColor;
+ opacity: 0.3;
+}
+
+.PanelUI-profiler-button {
+ appearance: none;
+ background-color: var(--button-bgcolor);
+ border-radius: 4px;
+ color: var(--button-color);
+ padding: 8px;
+ margin: 0 5px;
+
+ &:hover {
+ background-color: var(--button-hover-bgcolor);
+ &:active {
+ background-color: var(--button-active-bgcolor);
+ }
+ }
+
+ &:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-offset);
+ }
+}
+
+.PanelUI-profiler-button-primary {
+ background-color: var(--button-primary-bgcolor);
+ color: var(--button-primary-color);
+
+ &:hover {
+ background-color: var(--button-primary-hover-bgcolor);
+ &:active {
+ background-color: var(--button-primary-active-bgcolor);
+ }
+ }
+}
+
+.PanelUI-profiler-shortcut {
+ padding-block-start: 5px;
+ opacity: 0.5;
+ text-align: center;
+}
+
+.PanelUI-profiler-buttons {
+ margin: 7px 10px 0;
+}
+
+.PanelUI-profiler-info-icon {
+ margin-inline-end: 10px;
+ margin-block-start: 25px;
+ width: 50px;
+ list-style-image: url(chrome://devtools/skin/images/tool-profiler.svg);
+ -moz-context-properties: fill;
+ fill: #fff;
+}
+
+/* Web-extension pop-ups */
+
+.cui-widget-panelview[id^=PanelUI-webext-] {
+ border-radius: var(--arrowpanel-border-radius);
+}
+
+.webextension-popup-browser,
+.webextension-popup-stack {
+ border-radius: inherit;
+}
+
+.webextension-popup-stack {
+ position: relative;
+}
+
+/* Reset/Restart Private Browsing Panel */
+
+#reset-pbm-panel {
+ max-width: var(--menu-panel-width-wide);
+}
+
+#reset-pbm-panel-container {
+ padding: 16px 16px 0;
+ gap: 8px;
+}
+
+#reset-pbm-panel-header > description {
+ margin-bottom: 0;
+}
+
+#reset-pbm-panel-header > description,
+#reset-pbm-panel-description,
+#reset-pbm-panel-footer {
+ margin-inline: 0;
+}
+
+#reset-pbm-panel-header > description {
+ font-weight: var(--font-weight-bold);
+}
+
+#reset-pbm-panel-checkbox {
+ margin-inline: 0 8px;
+}
+
+/* Report Broken Site panels */
+
+/* Hide the Report Broken Site menu item that
+ * is on the App Menu's Help sub-menu.
+ */
+#appMenu_help_reportBrokenSite {
+ display: none;
+}
+
+.report-broken-site-view {
+ description,
+ label,
+ menulist,
+ input,
+ textarea {
+ margin: 0;
+ }
+
+ p {
+ line-height: 1.5;
+ }
+
+ textarea {
+ resize: vertical;
+ }
+
+ select {
+ /* copied/adapted from toolkit/themes/shared/menulist-shared.css */
+ appearance: none;
+ background-color: var(--button-bgcolor, ButtonFace);
+ color: var(--button-color, ButtonText);
+ border-radius: 4px;
+ padding: 6px 16px;
+ margin: 5px 2px 3px;
+
+ font: menu;
+ font-weight: 600;
+ border: none;
+
+ background-image: url(chrome://global/skin/icons/arrow-down-12.svg);
+ background-position: right 10px center;
+ padding-inline-end: 32px; /* 2 * 10px padding + image's 12px width */
+ background-repeat: no-repeat;
+ -moz-context-properties: fill;
+ fill: currentColor;
+
+ &:-moz-locale-dir(rtl) {
+ background-position: left 10px center;
+ }
+
+ &:hover {
+ background-color: var(--button-hover-bgcolor, color-mix(in srgb, currentColor 10%, ButtonFace));
+ }
+
+ &:hover:active {
+ background-color: var(--button-active-bgcolor, color-mix(in srgb, currentColor 20%, ButtonFace));
+ }
+
+ &:focus-visible {
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-offset);
+ }
+ }
+
+ input,
+ textarea {
+ appearance: none;
+ background-color: var(--panel-background);
+ padding: 0.25em;
+ border: 1px solid var(--panel-separator-color);
+ border-radius: 4px;
+
+ &:focus-visible {
+ border-color: transparent;
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-offset);
+ }
+ }
+
+ input:user-invalid:not(:focus-visible),
+ select:user-invalid:not(:focus-visible) {
+ border-color: transparent;
+ outline: var(--focus-outline);
+ outline-offset: var(--focus-outline-offset);
+ outline-color: var(--color-error-outline);
+ }
+
+ > .panel-subview-body > label {
+ margin-block: 1.5em 0.5em;
+
+ &.invalid-message {
+ margin-block: 0.5em 0;
+ background-image: url("chrome://global/skin/icons/error.svg");
+ background-position: left center;
+ background-repeat: no-repeat;
+ -moz-context-properties: fill;
+ fill: var(--icon-color-critical);
+ padding-inline-start: calc(16px + 0.25em);
+
+ &:-moz-locale-dir(rtl) {
+ background-position-x: right;
+ }
+
+ display: none;
+
+ input:user-invalid + &,
+ select:user-invalid + & {
+ display: block;
+ }
+ }
+ }
+
+ &.main-view {
+ p {
+ margin-block: 0;
+ }
+
+ a {
+ margin-top: 1.5em;
+ }
+ }
+
+ &.sent-view {
+ @media not (prefers-contrast) {
+ background-color: var(--color-background-success);
+ }
+
+ > .panel-header {
+ --arrowpanel-header-additional-element-width: 16px;
+
+ > .checkmark-icon {
+ list-style-image: url(chrome://global/skin/icons/check-filled.svg);
+ -moz-context-properties: fill;
+ fill: #2ac3a2;
+ }
+ }
+
+ > .panel-subview-body {
+ /* Don't let the footer appear way down in the panel while there's
+ * almost no content above. */
+ flex: 0 auto;
+
+ > .subview-subheader {
+ font-size: inherit;
+ }
+ }
+ }
+}
+
+#report-broken-site-panel-container {
+ padding: 8px 16px 16px;
+}
generated by cgit v1.2.3 (git 2.39.1) at 2024-11-08 04:57:17 +0000