2348 lines
58 KiB
CSS
2348 lines
58 KiB
CSS
/* 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 {
|
|
--panelui-subview-transition-duration: 150ms;
|
|
|
|
--panel-banner-item-color: var(--button-text-color);
|
|
--panel-banner-item-background-color: var(--button-background-color);
|
|
--panel-banner-item-hover-bgcolor: var(--button-background-color-hover);
|
|
--panel-banner-item-active-bgcolor: var(--button-background-color-active);
|
|
--panel-banner-item-update-supported-bgcolor: light-dark(#2ac3a2, #54ffbd);
|
|
--panel-banner-item-info-icon-bgcolor: light-dark(#0090ed, #80ebff);
|
|
|
|
--menu-panel-width: 22.35em;
|
|
--menu-panel-width-wide: 29em;
|
|
|
|
--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: 4px;
|
|
--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);
|
|
}
|
|
}
|
|
|
|
:root[taskbartab] {
|
|
#appMenu-new-tab-button2,
|
|
#appMenu-new-window-button2,
|
|
#appMenu-new-private-window-button2,
|
|
#appMenu-new-private-window-button2 + toolbarseparator,
|
|
#appMenu-bookmarks-button {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#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="sync-disabled"] > .toolbarbutton-badge-stack > .toolbarbutton-badge {
|
|
box-shadow: none;
|
|
min-width: 12px;
|
|
min-height: 12px;
|
|
-moz-context-properties: stroke, fill;
|
|
background: url(chrome://browser/skin/notification-fill-12.svg) no-repeat center;
|
|
background-size: 12px;
|
|
stroke: var(--arrowpanel-background);
|
|
fill: var(--warning-icon-bgcolor);
|
|
filter: drop-shadow(0 0 5px var(--warning-icon-bgcolor));
|
|
}
|
|
|
|
#fxa-toolbar-menu-button:is([badge-status="login_failed"], [badge-status="sync-disabled"]) > .toolbarbutton-badge-stack > .toolbarbutton-badge {
|
|
display: flex;
|
|
}
|
|
|
|
.cui-widget-panel,
|
|
#widget-overflow,
|
|
#unified-extensions-panel {
|
|
font: menu;
|
|
}
|
|
|
|
panelmultiview {
|
|
align-items: flex-start;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
|
|
&[transitioning] {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
panelview {
|
|
flex-direction: column;
|
|
padding: 0;
|
|
|
|
&:not([visible]) {
|
|
visibility: collapse;
|
|
}
|
|
}
|
|
|
|
.panel-viewcontainer {
|
|
overflow: hidden;
|
|
flex-shrink: 0;
|
|
min-width: 0;
|
|
min-height: 0;
|
|
max-height: 100%;
|
|
|
|
&[panelopen] {
|
|
transition-property: height;
|
|
transition-timing-function: var(--animation-easing-function);
|
|
transition-duration: var(--panelui-subview-transition-duration);
|
|
will-change: height;
|
|
}
|
|
|
|
&.offscreen {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
.panel-viewstack {
|
|
overflow: visible;
|
|
transition: height var(--panelui-subview-transition-duration);
|
|
}
|
|
|
|
.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: var(--button-text-color-ghost);
|
|
background-color: var(--button-background-color-ghost);
|
|
padding: 0;
|
|
border-radius: var(--toolbarbutton-border-radius);
|
|
flex-shrink: 0;
|
|
|
|
&[disabled=true] {
|
|
visibility: hidden;
|
|
}
|
|
|
|
&:hover {
|
|
color: var(--button-text-color-ghost-hover);
|
|
background-color: var(--button-background-color-ghost-hover);
|
|
}
|
|
|
|
&:not(:hover)[checked],
|
|
&:hover:active {
|
|
color: var(--button-text-color-ghost-active);
|
|
background-color: var(--button-background-color-ghost-active);
|
|
}
|
|
|
|
&: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);
|
|
}
|
|
}
|
|
|
|
#widget-overflow-list:empty + #widget-overflow-fixed-separator,
|
|
#widget-overflow:not([hasfixeditems]) #widget-overflow-fixed-separator {
|
|
display: none;
|
|
}
|
|
|
|
#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);
|
|
--panel-shadow-margin: var(--arrowpanel-shadow-margin);
|
|
--menuitem-border-radius: var(--arrowpanel-menuitem-border-radius);
|
|
--menuitem-padding: var(--arrowpanel-menuitem-padding);
|
|
--menuitem-margin: var(--arrowpanel-menuitem-margin);
|
|
}
|
|
|
|
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));
|
|
}
|
|
|
|
menu,
|
|
menuitem {
|
|
&[disabled] {
|
|
color: var(--button-text-color-ghost-disabled);
|
|
background-color: var(--button-background-color-ghost-disabled);
|
|
opacity: var(--button-opacity-disabled);
|
|
}
|
|
|
|
&:not([disabled])[_moz-menuactive] {
|
|
color: var(--button-text-color-ghost-hover);
|
|
background-color: var(--button-background-color-ghost-hover);
|
|
|
|
&:active {
|
|
color: var(--button-text-color-ghost-active);
|
|
background-color: var(--button-background-color-ghost-active);
|
|
}
|
|
}
|
|
|
|
&::before {
|
|
content: none; /* Reset's macOS' checkmark spacing */
|
|
}
|
|
}
|
|
|
|
.menu-text,
|
|
.menu-icon,
|
|
.menu-accel,
|
|
menu::after {
|
|
/* Reset spacing set by menu.css */
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
menuitem:not(.menuitem-iconic, [image]) > .menu-icon,
|
|
menu:not(.menu-iconic) > .menu-icon {
|
|
display: none;
|
|
}
|
|
|
|
.menu-icon {
|
|
margin-inline-end: 8px;
|
|
}
|
|
|
|
menu::after,
|
|
.menu-accel {
|
|
margin-inline-start: 16px;
|
|
}
|
|
|
|
menu::after {
|
|
fill-opacity: 0.6;
|
|
}
|
|
|
|
menuseparator {
|
|
padding: var(--panel-separator-margin);
|
|
}
|
|
}
|
|
|
|
#BMB_bookmarksPopup {
|
|
max-width: 30em;
|
|
}
|
|
|
|
menupopup[emptyplacesresult] > .hide-if-empty-places-result {
|
|
display: none;
|
|
}
|
|
|
|
: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;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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);
|
|
}
|
|
}
|
|
|
|
/* Webextension buttons */
|
|
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);
|
|
}
|
|
|
|
#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. */
|
|
|
|
#appMenu-mainView:not([showing-fxa-menu-message]) #appMenu-fxa-menu-message,
|
|
#PanelUI-fxa:not([showing-fxa-menu-message]) #PanelUI-fxa-menu-message {
|
|
display: none;
|
|
}
|
|
|
|
#appMenu-mainView[showing-fxa-menu-message] {
|
|
& #appMenu-fxa-status2,
|
|
& #appMenu-fxa-separator {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
#PanelUI-fxa[showing-fxa-menu-message] #fxa-manage-account-button {
|
|
display: none
|
|
}
|
|
|
|
: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;
|
|
color: var(--button-text-color);
|
|
background-color: var(--button-background-color);
|
|
font-size: 0.8em;
|
|
font-weight: 600;
|
|
|
|
&:hover {
|
|
color: var(--button-text-color-hover);
|
|
background-color: var(--button-background-color-hover);
|
|
}
|
|
|
|
&:hover:active {
|
|
color: var(--button-text-color-active);
|
|
background-color: var(--button-background-color-active);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#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-fxa-cta-menu,
|
|
#PanelUI-fxa-menu-services {
|
|
.fxa-cta-button {
|
|
margin: var(--space-xsmall);
|
|
}
|
|
}
|
|
|
|
.PanelUI-fxa-menu-section-title,
|
|
.PanelUI-remotetabs-clientcontainer > label[itemtype="client"] {
|
|
/* FIXME: these elements should use the subview-subheader class */
|
|
color: var(--text-color-deemphasized);
|
|
font-size: 0.9em;
|
|
margin-top: 6px;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
#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);
|
|
}
|
|
}
|
|
|
|
.PanelUI-fxa-menu-setup-sync {
|
|
padding: 16px;
|
|
}
|
|
|
|
.sync-setup-icon,
|
|
.sync-status-indicator {
|
|
width: 20px;
|
|
height: 20px;
|
|
box-shadow: none;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
}
|
|
|
|
.sync-setup-icon {
|
|
list-style-image: url("chrome://browser/skin/sync-off.svg");
|
|
}
|
|
|
|
.sync-status-indicator {
|
|
background: url("chrome://browser/skin/notification-fill-12.svg") no-repeat center;
|
|
margin-inline-end: var(--space-xsmall);
|
|
fill: var(--warning-icon-bgcolor);
|
|
background-size: 18px;
|
|
}
|
|
|
|
.sync-setup-title {
|
|
font-size: 1.1em;
|
|
font-weight: 400;
|
|
margin-block: auto;
|
|
}
|
|
|
|
.sync-setup-description {
|
|
padding: var(--space-large) 0;
|
|
}
|
|
|
|
#PanelUI-fxa-menu-setup-sync-button,
|
|
.sync-status-container {
|
|
margin-inline-start: var(--space-small);
|
|
}
|
|
|
|
#PanelUI-fxa-menu-setup-sync-button {
|
|
padding: 6px 12px;
|
|
background-color: var(--button-background-color);
|
|
font-size: 0.9em;
|
|
font-weight: 500;
|
|
max-width: fit-content;
|
|
border-radius: var(--button-border-radius);
|
|
|
|
&:hover {
|
|
background-color: var(--button-background-color-hover);
|
|
}
|
|
|
|
&:hover:active {
|
|
background-color: var(--button-background-color-active);
|
|
}
|
|
}
|
|
|
|
|
|
/* Firefox Account Toolbar Panel */
|
|
|
|
#fxa-avatar-image {
|
|
width: var(--icon-size-default);
|
|
height: var(--icon-size-default);
|
|
}
|
|
|
|
: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);
|
|
}
|
|
|
|
/**
|
|
* If we're not showing the glowing badge, we'll switch to the cutout variant
|
|
* of avatar-empty. If we ARE showing the glowing badge, we don't want the
|
|
* cutout to appear.
|
|
*/
|
|
&[fxastatus="not_configured"][fxa-avatar-icon-variant="human-circle"] {
|
|
#fxa-toolbar-menu-button {
|
|
--avatar-image-url: url(chrome://browser/skin/fxa/avatar-empty-circle.svg);
|
|
}
|
|
|
|
#fxa-toolbar-menu-button[showing-callout] {
|
|
--avatar-image-url: url(chrome://browser/skin/fxa/avatar-empty.svg);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Similar to the above for the fox variant of the icon, we only want to show
|
|
* the cutout variant if we're showing the glowing badge.
|
|
*/
|
|
&[fxastatus="not_configured"][fxa-avatar-icon-variant="fox-circle"] {
|
|
#fxa-toolbar-menu-button {
|
|
--avatar-image-url: url(chrome://browser/skin/fxa/avatar-fox-circle.svg);
|
|
}
|
|
|
|
#fxa-toolbar-menu-button[showing-callout] {
|
|
--avatar-image-url: url(chrome://browser/skin/fxa/avatar-fox.svg);
|
|
}
|
|
}
|
|
|
|
/**
|
|
* This overrides the hidden state of the badge so that we can repurpose it
|
|
* for the "circle" that fills the little cut-out in the -circle avatar
|
|
* variants. We only do this if we're not currently showing the glowing badge
|
|
* on the button.
|
|
*
|
|
* This is pretty gross, but it's just for the signed-out avatar experiment,
|
|
* and I'm hoping we're okay accepting this until we decide whether or not
|
|
* one of these variants should be the default signed-out avatar. At that
|
|
* point, I'm hoping we can shift to something less gross (bug 1938106).
|
|
*/
|
|
&[fxastatus="not_configured"][fxa-avatar-icon-variant$="-circle"] #fxa-toolbar-menu-button:not([showing-callout]) {
|
|
.avatar-container {
|
|
position: relative;
|
|
|
|
&:-moz-locale-dir(rtl) {
|
|
transform: scaleX(-1);
|
|
}
|
|
}
|
|
|
|
.avatar-container::after {
|
|
content: "";
|
|
position: absolute;
|
|
top: calc(var(--icon-size-default) - 6px);
|
|
/* Avatar icon size minus its circle width minus half of the little circle icon size */
|
|
left: calc(var(--icon-size-default) - 1px - 6px / 2);
|
|
height: 6px;
|
|
width: 6px;
|
|
background-image: url(chrome://browser/skin/fxa/circle.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
opacity: 0.43;
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
opacity: 0.67;
|
|
}
|
|
}
|
|
}
|
|
|
|
&:not([fxatoolbarmenu]) #fxa-toolbar-menu-button {
|
|
display: none;
|
|
}
|
|
|
|
/* stylelint-disable-next-line media-query-no-invalid */
|
|
@media not -moz-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%;
|
|
}
|
|
|
|
&[fxastatus="signedin"] #fxa-avatar-label {
|
|
display: none;
|
|
}
|
|
|
|
&:not([fxastatus="signedin"]) #PanelUI-fxa-menu-connect-device-button {
|
|
color: var(--text-color-disabled);
|
|
}
|
|
}
|
|
|
|
#fxa-avatar-image {
|
|
list-style-image: var(--avatar-image-url);
|
|
}
|
|
|
|
#fxa-avatar-label {
|
|
margin: 0;
|
|
margin-inline-start: var(--space-small);
|
|
}
|
|
|
|
.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);
|
|
text-wrap: wrap;
|
|
}
|
|
|
|
#fxa-menu-header-description {
|
|
color: var(--text-color-deemphasized);
|
|
font-weight: var(--font-weight-bold);
|
|
text-wrap: wrap;
|
|
}
|
|
|
|
#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,
|
|
#PanelUI-services-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(--text-color-disabled);
|
|
}
|
|
|
|
/* 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);
|
|
}
|
|
}
|
|
|
|
/* 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;
|
|
}
|
|
|
|
.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: 0.9em;
|
|
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;
|
|
|
|
/* 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;
|
|
}
|
|
|
|
&[shortcut]:not([disabled])::after {
|
|
color: var(--text-color-deemphasized);
|
|
}
|
|
|
|
&[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 {
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
|
|
> .toolbarbutton-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
}
|
|
|
|
#appMenu-profiles-button,
|
|
#PanelUI-fxa-menu-profiles-button {
|
|
justify-content: space-between;
|
|
}
|
|
|
|
/* Set the --appmenu-profiles-theme-bg and --appmenu-profiles-theme-fg
|
|
* variables inline on the toolbarbutton */
|
|
#appMenu-profiles-button.subviewbutton-iconic > .toolbarbutton-icon,
|
|
#PanelUI-fxa-menu-profiles-button.subviewbutton-iconic > .toolbarbutton-icon,
|
|
.subviewbutton-iconic.profile-item > .toolbarbutton-icon {
|
|
-moz-context-properties: fill, stroke;
|
|
fill: var(--appmenu-profiles-theme-bg);
|
|
stroke: var(--appmenu-profiles-theme-fg);
|
|
}
|
|
|
|
/* 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,
|
|
#appMenu-zoomEnlarge-button2 {
|
|
> .toolbarbutton-icon {
|
|
-moz-context-properties: fill, stroke;
|
|
color: var(--button-text-color);
|
|
fill: currentColor;
|
|
/* the stroke color is used to fill the circle in the icon */
|
|
stroke: var(--button-background-color);
|
|
border-radius: 50%;
|
|
padding: 0;
|
|
}
|
|
|
|
&:not([disabled]):hover > .toolbarbutton-icon {
|
|
color: var(--button-text-color-hover);
|
|
stroke: var(--button-background-color-hover);
|
|
}
|
|
|
|
&:not([disabled]):active:hover > .toolbarbutton-icon {
|
|
color: var(--button-text-color-hover);
|
|
stroke: var(--button-background-color-active);
|
|
}
|
|
}
|
|
|
|
#appMenu-zoomReset-button2 > .toolbarbutton-text,
|
|
#appMenu-fullscreen-button2 > .toolbarbutton-icon {
|
|
border-radius: 2px;
|
|
}
|
|
|
|
#appMenu-fullscreen-button2 > .toolbarbutton-icon {
|
|
padding: 1px;
|
|
color: var(--button-text-color);
|
|
background-color: var(--button-background-color);
|
|
}
|
|
|
|
#appMenu-zoomReset-button2:not([disabled]):hover > .toolbarbutton-text,
|
|
#appMenu-fullscreen-button2:not([disabled]):hover > .toolbarbutton-icon {
|
|
color: var(--button-text-color-hover);
|
|
background-color: var(--button-background-color-hover);
|
|
}
|
|
|
|
#appMenu-zoomReset-button2:not([disabled]):hover:active > .toolbarbutton-text,
|
|
#appMenu-fullscreen-button2:not([disabled]):hover:active > .toolbarbutton-icon {
|
|
color: var(--button-text-color-active);
|
|
background-color: var(--button-background-color-active);
|
|
}
|
|
|
|
/**
|
|
* 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 {
|
|
-moz-context-properties: fill, fill-opacity;
|
|
content: url(chrome://global/skin/icons/arrow-down.svg);
|
|
fill: currentColor;
|
|
fill-opacity: 0.6;
|
|
display: flex;
|
|
}
|
|
|
|
.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
|
|
) {
|
|
color: var(--button-text-color-ghost);
|
|
background-color: var(--button-background-color-ghost);
|
|
|
|
&:focus-visible {
|
|
outline: var(--focus-outline);
|
|
outline-offset: var(--focus-outline-inset);
|
|
}
|
|
|
|
&[disabled] {
|
|
color: var(--button-text-color-ghost-disabled);
|
|
background-color: var(--button-background-color-ghost-disabled);
|
|
opacity: var(--button-opacity-disabled);
|
|
}
|
|
|
|
&:not([disabled]):hover {
|
|
color: var(--button-text-color-ghost-hover);
|
|
background-color: var(--button-background-color-ghost-hover);
|
|
|
|
&:active {
|
|
color: var(--button-text-color-ghost-active);
|
|
background-color: var(--button-background-color-ghost-active);
|
|
box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset;
|
|
}
|
|
}
|
|
}
|
|
|
|
.PanelUI-tabitem-container > 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-tabitem-container > toolbarbutton[itemtype="tab"] > .toolbarbutton-icon,
|
|
.PanelUI-remotetabs-clientcontainer > toolbarbutton > .toolbarbutton-icon,
|
|
#PanelUI-recentlyClosedWindows > toolbarbutton > .toolbarbutton-icon,
|
|
#PanelUI-recentlyClosedTabs > toolbarbutton > .toolbarbutton-icon,
|
|
#PanelUI-historyItems > toolbarbutton > .toolbarbutton-icon {
|
|
width: 16px;
|
|
height: 16px;
|
|
|
|
/* Apply crisp rendering for favicons at exactly 2x resolution */
|
|
@media (resolution: 2x) {
|
|
image-rendering: -moz-crisp-edges;
|
|
}
|
|
}
|
|
|
|
#PanelUI-fxa-remotetabs-tabspane,
|
|
#PanelUI-remotetabs-tabspane {
|
|
min-width: 0;
|
|
}
|
|
|
|
.PanelUI-tabitem-container {
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
|
|
&.tabitem-removed {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
> toolbarbutton[itemtype="tab"] {
|
|
flex: 1;
|
|
min-width: 0;
|
|
display: flex;
|
|
|
|
&[disabled="true"] {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
toolbarbutton[itemtype="showmorebutton"],
|
|
toolbarbutton[itemtype="showinactivebutton"] {
|
|
padding-inline-start: 0;
|
|
|
|
> label {
|
|
/* Needed to properly left-align with the rest of list */
|
|
margin-inline-start: -8px;
|
|
}
|
|
}
|
|
|
|
.remote-tabs-close-button {
|
|
.toolbarbutton-icon {
|
|
/* To match the nav elements in the panel */
|
|
-moz-context-properties: fill, fill-opacity;
|
|
fill: currentColor;
|
|
fill-opacity: 0.6;
|
|
display: flex;
|
|
|
|
}
|
|
}
|
|
|
|
.remote-tabs-undo-button {
|
|
font-size: 0.8em;
|
|
font-weight: var(--font-weight-bold);
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
> #stop-reload-button > .toolbarbutton-1 {
|
|
flex: 1;
|
|
}
|
|
}
|
|
|
|
#widget-overflow-list > toolbarspring {
|
|
display: none;
|
|
}
|
|
|
|
#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-background-color-hover);
|
|
}
|
|
|
|
&:is([selected], [selected]:hover, :hover:active) {
|
|
background-color: var(--button-background-color-active);
|
|
}
|
|
|
|
> .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-newwindow::before {
|
|
background-position-x: 16px;
|
|
}
|
|
|
|
#PanelUI-panic-actionlist-windows::before {
|
|
background-position-x: 32px;
|
|
}
|
|
|
|
#PanelUI-panic-actionlist-history::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(--button-background-color-destructive);
|
|
color: var(--button-text-color-destructive);
|
|
margin: 5px 15px 11px;
|
|
border: 1px solid var(--button-border-color-destructive);
|
|
border-radius: 4px;
|
|
font-weight: 600;
|
|
padding: 10px;
|
|
|
|
&:hover {
|
|
background-color: var(--button-background-color-destructive-hover);
|
|
color: var(--button-text-color-destructive-hover);
|
|
border-color: var(--button-border-color-destructive-hover);
|
|
}
|
|
|
|
&:hover:active {
|
|
background-color: var(--button-background-color-destructive-active);
|
|
color: var(--button-text-color-destructive-active);
|
|
border-color: var(--button-border-color-destructive-active);
|
|
}
|
|
|
|
&: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-background-color);
|
|
color: var(--button-text-color);
|
|
margin: 5px 0 0;
|
|
border: 1px solid transparent;
|
|
border-radius: 4px;
|
|
padding: 10px;
|
|
font-weight: 600;
|
|
appearance: none;
|
|
|
|
&:hover {
|
|
background-color: var(--button-background-color-hover);
|
|
&:active {
|
|
background-color: var(--button-background-color-active);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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(--button-icon-fill);
|
|
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;
|
|
}
|
|
}
|
|
|
|
/* Protections panel info message */
|
|
#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-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;
|
|
}
|
|
|
|
.protections-popup-message-title {
|
|
display: grid;
|
|
font-size: 1.3em;
|
|
font-weight: 600;
|
|
line-height: 1.4em;
|
|
margin: 14px 0 0;
|
|
grid-column-start: 1;
|
|
}
|
|
|
|
.protections-popup-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;
|
|
}
|
|
}
|
|
|
|
#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;
|
|
|
|
&:-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-background-color);
|
|
border-radius: 4px;
|
|
color: var(--button-text-color);
|
|
padding: 8px;
|
|
margin: 0 5px;
|
|
|
|
&:hover {
|
|
background-color: var(--button-background-color-hover);
|
|
&:active {
|
|
background-color: var(--button-background-color-active);
|
|
}
|
|
}
|
|
|
|
&:focus-visible {
|
|
outline: var(--focus-outline);
|
|
outline-offset: var(--focus-outline-offset);
|
|
}
|
|
}
|
|
|
|
.PanelUI-profiler-button-primary {
|
|
background-color: var(--color-accent-primary);
|
|
color: var(--button-text-color-primary);
|
|
|
|
&:hover {
|
|
background-color: var(--color-accent-primary-hover);
|
|
&:active {
|
|
background-color: var(--color-accent-primary-active);
|
|
}
|
|
}
|
|
}
|
|
|
|
.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;
|
|
}
|
|
|
|
> .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(--background-color-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;
|
|
}
|
|
|
|
/* ----- Profiles panels ----- */
|
|
|
|
#PanelUI-profiles > toolbarseparator {
|
|
display: none;
|
|
}
|
|
|
|
#profiles-header-content {
|
|
max-width: 16em;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#profiles-edit-this-profile-button {
|
|
list-style-image: url("chrome://global/skin/icons/edit-outline.svg");
|
|
padding: var(--arrowpanel-header-back-icon-padding);
|
|
margin: 0;
|
|
}
|
|
|
|
#profiles-edit-this-profile-button > .toolbarbutton-text {
|
|
display: none;
|
|
}
|
|
|
|
#profiles-create-profile-button {
|
|
list-style-image: url("chrome://global/skin/icons/plus.svg");
|
|
}
|
|
|
|
#profile-icon-image {
|
|
width: 90px;
|
|
height: 90px;
|
|
-moz-context-properties: fill, stroke;
|
|
fill: var(--appmenu-profiles-theme-bg);
|
|
stroke: var(--appmenu-profiles-theme-fg);
|
|
border: 4px solid var(--panel-background);
|
|
border-radius: var(--border-radius-circle);
|
|
}
|
|
|
|
#current-profile {
|
|
align-items: center;
|
|
gap: var(--space-small);
|
|
position: relative;
|
|
}
|
|
|
|
#half-height-profile {
|
|
background: var(--appmenu-profiles-theme-bg);
|
|
width: 100%;
|
|
height: 50%;
|
|
z-index: -1;
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
#PanelUI-profiles > .panel-subview-body {
|
|
padding-block-start: 0;
|
|
}
|
|
|
|
/* ----- Profiles FxA panel ----- */
|
|
|
|
/* Special case: hide the profiles menuitem if the FxA/Sync panel is shown as
|
|
* a submenu of the app menu, rather than anchored to the FxA/Sync toolbar
|
|
* button. */
|
|
#appMenu-popup panelmultiview[mainViewId="appMenu-mainView"] #PanelUI-fxa-menu-profiles-button {
|
|
display: none;
|
|
}
|
|
|
|
/* ----- Content Analysis indicator panel ----- */
|
|
|
|
#content-analysis-panel-container {
|
|
padding: 8px;
|
|
}
|