Source code
Revision control
Copy as Markdown
Other Tools
/* 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
: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([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-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 {
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-repeat: no-repeat;
background-position: center;
-moz-context-properties: fill;
fill: var(--panel-banner-item-update-supported-bgcolor);
}
}
&[notificationid="update-unsupported"] > .toolbarbutton-icon {
-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;
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 {
-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 {
-moz-context-properties: fill, fill-opacity;
fill: currentColor;
fill-opacity: 0.6;
width: unset;
height: unset;
&:-moz-locale-dir(rtl) {
}
}
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-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-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;
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;
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 {
-moz-context-properties: fill;
fill: var(--warning-icon-bgcolor);
}
&[fxastatus="unverified"] #appMenu-fxa-label2::after {
-moz-context-properties: fill;
fill: var(--panel-banner-item-info-icon-bgcolor);
}
}
/* Firefox Account Toolbar Panel */
#fxa-avatar-image {
width: 16px;
height: 16px;
}
:root {
&[fxastatus="not_configured"] {
}
&: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 {
}
.ctaMenuLogo {
width: 16px;
height: 16px;
margin-inline-start: 5px;
}
#PanelUI-fxa-menu-monitor-button {
}
#PanelUI-fxa-menu-relay-button {
}
#PanelUI-fxa-menu-vpn-button {
-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;
}
.fxaSendLogo {
}
.fxaMonitorLogo {
}
#PanelUI-remotetabs {
--panel-ui-sync-illustration-height: 141px;
}
.sendToDevice-device {
&[clientType=phone] {
}
&[clientType=tablet] {
}
&[clientType=desktop] {
}
&[clientType=tv] {
}
&[clientType=vr] {
}
&.signintosync {
}
}
.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
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
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,
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
width: 204px;
height: var(--panel-ui-sync-illustration-height);
-moz-context-properties: fill;
fill: #cdcdcd;
}
.fxaSyncIllustration {
}
.fxaSyncIllustrationIssue {
}
.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;
}
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"] {
-moz-context-properties: fill;
fill: currentColor;
color: inherit;
}
&[type="open-to-new"]::after {
-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;
fill: currentColor;
fill-opacity: 0.6;
display: flex;
}
&:-moz-locale-dir(rtl)::after {
}
}
.PanelUI-subView {
.subviewbutton-nav-down::after {
}
.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 {
-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(
);
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(
);
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);
padding: var(--arrowpanel-header-back-icon-padding);
}
> .subviewbutton-back:-moz-locale-dir(rtl) {
}
}
.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 {
#info-message-container {
height: 260px;
overflow: hidden;
transition: margin-bottom .25s;
}
#info-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;
}
#info-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-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
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;
-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;
-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;
}
> .panel-subview-body > label {
margin-block: 1.5em 0.5em;
&.invalid-message {
margin-block: 0.5em 0;
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(--background-color-success);
}
> .panel-header {
--arrowpanel-header-additional-element-width: 16px;
> .checkmark-icon {
-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;
}
/* ----- Profiles panels ----- */
#profiles-edit-this-delete-button {
}
#profiles-delete-this-profile-button {
}
#profile-icon-image {
width: 75px;
height: 75px;
}
#profile-name {
font-size: 1.667rem;
padding-block-start: var(--space-medium);
}
#this-profile-buttons {
justify-content: center;
}
#current-profile {
align-items: center;
padding: var(--space-xxlarge) 0 var(--space-medium);
gap: var(--space-small);
}
/* ----- Content Analysis indicator panel ----- */
#content-analysis-panel-container {
padding: 8px;
}