diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/panelUI.css')
| -rw-r--r-- | comm/mail/themes/shared/mail/panelUI.css | 1199 |
1 files changed, 1199 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/panelUI.css b/comm/mail/themes/shared/mail/panelUI.css new file mode 100644 index 0000000000..932c70177b --- /dev/null +++ b/comm/mail/themes/shared/mail/panelUI.css @@ -0,0 +1,1199 @@ +/* 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 .cui-widget-panel { + --menu-panel-width: 22.35em; + --wide-menu-panel-width: 29em; + --panel-palette-icon-size: 16px; + --panel-separator-margin: 4px 8px; + + /* XXX This is the ugliest bit of code I think I've ever written for Mozilla. + Basically, the [extra 0.1px in the 1.1px] is there to avoid CSS rounding errors + causing buttons to wrap. For gory details, refer to + https://bugzilla.mozilla.org/show_bug.cgi?id=963365#c11 */ + /* stylelint-disable-next-line */ + --menu-panel-button-width: calc(--menu-panel-width / 3 - 1.1px); + /* Complement the .subviewbutton margin. */ + --arrowpanel-padding: 8px 0; + --arrowpanel-menuitem-border-radius: 3px; + --appmenu-button-border-color: hsla(210, 4%, 10%, 0.14); + --appmenu-button-margin: 0 8px; + --appmenu-button-padding: 6px; + --appmenu-combined-radio-button-padding: 4px 8px; + --appmenu-fontsize-icon-size: 20px; + --appmenu-fontsize-reset-button-width: 47px; + --appmenu-warning-background-color: #ffefbf; + --appmenu-warning-background-color-hover: #ffe8a2; + --appmenu-warning-background-color-active: #ffe38f; + --appmenu-warning-color: black; + --appmenu-warning-border-color: hsl(45, 100%, 77%); + --appmenu-icons-fill: color-mix(in srgb, var(--color-ink-70) 20%, transparent); + --appmenu-icons-stroke: var(--color-ink-70); +} + +@media (prefers-color-scheme: dark) { + :root .cui-widget-panel { + --appmenu-icons-fill: color-mix(in srgb, var(--color-ink-10) 20%, transparent); + --appmenu-icons-stroke: var(--color-ink-10); + } +} + +@media (prefers-contrast) { + :root .cui-widget-panel { + --appmenu-icons-fill: color-mix(in srgb, currentColor 20%, transparent); + --appmenu-icons-stroke: currentColor; + } +} + +/* UI Density customization */ + +:root[uidensity="compact"] .cui-widget-panel { + --arrowpanel-padding: 4px 0; + --appmenu-button-margin: 0 4px; + --appmenu-button-padding: 3px; + --appmenu-combined-radio-button-padding: 2px 6px; + --appmenu-fontsize-icon-size: 16px; + --appmenu-fontsize-reset-button-width: 41px; +} + +:root[uidensity="touch"] .cui-widget-panel { + --appmenu-button-padding: 9px; + --appmenu-combined-radio-button-padding: 6px 10px; + --appmenu-fontsize-icon-size: 24px; + --appmenu-fontsize-reset-button-width: 51px; +} + +:root[lwt-popup-brighttext] .cui-widget-panel { + --appmenu-button-border-color: rgba(249, 249, 250, 0.2); + --appmenu-warning-background-color: hsla(55, 100%, 50%, .1); + --appmenu-warning-background-color-hover: hsla(55, 100%, 50%, .2); + --appmenu-warning-background-color-active: hsla(55, 100%, 50%, .3); + --appmenu-warning-color: #f9f9fa; + --appmenu-warning-border-color: hsla(55, 100%, 50%, .3); +} + +panelview:not([visible]) { + visibility: collapse; +} + +.cui-widget-panel, +#widget-overflow { + font: menu; + font-size: inherit; +} + +panelview { + flex-direction: column; + background: var(--arrowpanel-background); + padding: 0; +} + +/* Prevent a scrollbar from appearing while the animation for transitioning from + one view to another runs, which would otherwise happen if the new view has + more height than the old one because that would mean that during the + animation the height of the multiview will be too short for the new view. */ +panelmultiview[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(--arrowpanel-padding); +} + +.panel-view-body-unscrollable { + overflow: hidden; + flex: 1; +} + +.subviewbutton.panel-subview-footer { + box-sizing: border-box; + min-height: 41px; +} + +.cui-widget-panelview menuitem.subviewbutton.panel-subview-footer { + margin: 4px 0 0; +} + +.cui-widget-panelview .subviewbutton.panel-subview-footer > .menu-text { + flex: 1; +} + +#wrapper-edit-controls:is([place="palette"],[place="menu-panel"]) > #edit-controls { + margin-inline-start: 0; +} + +#appmenu-edit-button { + margin-inline: 0 3px; + padding-inline: 7px; +} + +#appmenu-edit-button::after { + margin-inline-start: 0; +} + +panelview[id^=PanelUI-webext-] { + overflow: hidden; +} + +panelview:not([mainview]) .toolbarbutton-text, +.cui-widget-panel .toolbarbutton-text, +#overflowMenu-customize-button > .toolbarbutton-text { + text-align: start; + display: flex; +} + +#appMenu-popup panelview, +#customizationui-widget-multiview panelview:not([extension]) { + min-width: var(--menu-panel-width); + max-width: 35em; +} + +#customizationui-widget-multiview #appMenu-libraryView, +#widget-overflow panelview { + min-width: var(--wide-menu-panel-width); + max-width: var(--wide-menu-panel-width); +} + +/* Add 2 * 16px extra width for touch mode button padding. */ +#appMenu-popup[touchmode] panelview { + min-width: calc(var(--menu-panel-width) + 32px); +} + +.cui-widget-panel.cui-widget-panelWithFooter::part(content) { + padding-bottom: 0; +} + +.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="menu-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="menu-panel"] > .toolbarbutton-icon, +toolbarbutton[constrain-size="true"][cui-areatype="menu-panel"] > .toolbarbutton-badge-stack > .toolbarbutton-icon { + height: var(--panel-palette-icon-size); + width: var(--panel-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-palette-icon-size); + height: var(--panel-palette-icon-size); + min-width: var(--panel-palette-icon-size); + min-height: var(--panel-palette-icon-size); + margin: 0; + padding: 0; +} + +#zoom-in-button > .toolbarbutton-text, +#zoom-out-button > .toolbarbutton-text, +#zoom-reset-button > .toolbarbutton-icon { + display: none; +} + +#customization-palette .toolbarbutton-text { + display: none; +} + +menuitem.subviewbutton { + appearance: none !important; +} + +.subviewbutton > .menu-text { + appearance: none; + margin-inline-start: 0 !important; +} + +.subview-subheader, +panelview .toolbarbutton-1, +.subviewbutton, +menu.subviewbutton, +.widget-overflow-list .toolbarbutton-1 { + appearance: none; + margin: var(--appmenu-button-margin); + min-height: 24px; + padding-inline: 8px; + padding-block: var(--appmenu-button-padding); + border-radius: var(--arrowpanel-menuitem-border-radius); + background-color: transparent; +} + +.subviewbutton:focus { + outline: 0; +} + +.subviewbutton[disabled="true"], +.subviewbutton[disabled="true"]:hover, +.subviewbutton[checked="true"][disabled="true"], +.subviewbutton[checked="true"][disabled="true"]:hover { + color: var(--text-color-deemphasized); + background-color: transparent; +} + +.subviewbutton > .toolbarbutton-text { + padding: 0; + padding-inline-start: 24px; /* This is 16px for the icon + 8px for the padding as defined below. */ +} + +.addon-banner-item > .toolbarbutton-text, +.subviewbutton-iconic > .toolbarbutton-text, +.subviewbutton[image] > .toolbarbutton-text, +.subviewbutton[targetURI] > .toolbarbutton-text, +.subviewbutton.restoreallitem > .toolbarbutton-text, +.subviewbutton.bookmark-item > .toolbarbutton-text, +.subviewbutton[checked="true"] > .toolbarbutton-text { + padding-inline-start: 8px; /* See '.subviewbutton-iconic > .toolbarbutton-text' rule above. */ +} + +.addon-banner-item > .toolbarbutton-icon, +.subviewbutton-iconic > .toolbarbutton-icon { + width: 16px; + height: 16px; + -moz-context-properties: fill, stroke; +} + +.addon-banner-item > .toolbarbutton-icon { + fill: color-mix(in srgb, currentColor 20%, transparent); + stroke: currentColor; +} + +.subviewbutton-iconic > .toolbarbutton-icon { + fill: var(--appmenu-icons-fill); + stroke: var(--appmenu-icons-stroke); +} + +/* 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: + */ +.subviewbutton > .toolbarbutton-icon { + margin: 0; +} + +.subviewbutton.panel-subview-footer > .menu-text { + appearance: none; + padding-inline-start: 0 !important; /* to override menu.css on Windows */ + padding-inline-end: 6px; + flex: 0 0; +} + +.subviewbutton.panel-subview-footer > .toolbarbutton-text { + padding-inline-start: 0; +} + +.subviewbutton[shortcut]::after { + content: attr(shortcut); + float: inline-end; +} + +.PanelUI-subView .subviewbutton-nav::after { + -moz-context-properties: stroke, fill-opacity; + content: var(--icon-nav-right-sm); + stroke: currentColor; + fill-opacity: 0.6; + float: inline-end; +} + +.PanelUI-subView .subviewbutton-nav:-moz-locale-dir(rtl)::after { + content: var(--icon-nav-left-sm); +} + +.subviewbutton[shortcut]::after, +.subviewbutton[shortcut]::after, +.PanelUI-subView .subviewbutton-nav::after { + margin-inline-start: 10px; +} + +.subviewbutton[checked="true"] { + list-style-image: var(--icon-check); + -moz-context-properties: stroke; + stroke: currentColor; + color: inherit; +} + +#appMenu-popup .toolbaritem-combined-buttons { + align-items: center; + flex-direction: row; + border: 0; + border-radius: 0; + margin-inline-end: 6px; + padding-block: 0; +} + +panelmultiview .toolbaritem-combined-buttons > label { + flex: 1; + margin: 0; + padding-inline-start: 4px; +} + +panelmultiview .toolbaritem-combined-buttons > spacer.before-label { + width: 36px; /* 12px toolbarbutton padding + 16px icon + 8px label padding start */ +} + +panelmultiview .toolbaritem-combined-buttons > spacer.after-label { + flex: 1; + width: 20px; /* a little bigger than the width of the scrollbar */ +} + +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton { + flex: 0 0; + height: auto; + margin-inline-start: 18px; + min-width: auto; + padding-inline: 5px; + padding-block: var(--appmenu-button-padding); + --focus-outline-offset: 1px; +} + +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton-iconic { + padding-inline: var(--appmenu-button-padding); +} + +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton-iconic > .toolbarbutton-text, +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > + .toolbarbutton-icon { + display: none; +} + +.toolbaritem-combined-buttons > .subviewbutton:not(.subviewbutton-iconic) > .toolbarbutton-text { + padding-inline-start: 0; +} + +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton[type="radio"] { + margin-inline-start: 0; + margin-block: 1px; + padding: var(--appmenu-combined-radio-button-padding); + min-height: 22px; + border: 1px solid var(--appmenu-button-border-color); + border-radius: 0; +} + +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton[type="radio"]:focus { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton[type="radio"]:first-of-type { + border-inline-end: none; + border-start-start-radius: var(--arrowpanel-menuitem-border-radius); + border-end-start-radius: var(--arrowpanel-menuitem-border-radius); +} + +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton[type="radio"]:last-of-type { + border-inline-start: none; + border-start-end-radius: var(--arrowpanel-menuitem-border-radius); + border-end-end-radius: var(--arrowpanel-menuitem-border-radius); +} + +.PanelUI-subView .toolbaritem-combined-buttons > .subviewbutton[type="radio"][checked="true"] { + --appmenu-icons-fill: color-mix(in srgb, currentColor 20%, transparent); + --appmenu-icons-stroke: currentColor; + background-color: var(--select-focus-background-color); + color: var(--select-focus-text-color); +} + +.subview-subheader { + font-size: inherit; + font-weight: inherit; + color: var(--text-color-deemphasized); +} + +panelview .toolbarbutton-1 { + margin-top: 6px; +} + +panelview .toolbarbutton-1:not([disabled],[open],:active):is(:hover,:focus-visible), +toolbarbutton.subviewbutton:not([disabled],[open],:active):is(:hover,:focus-visible), +menu.subviewbutton:not([disabled],:active)[_moz-menuactive], +menuitem.subviewbutton:not([disabled],:active)[_moz-menuactive], +.widget-overflow-list .toolbarbutton-1:not([disabled],[open],:active):is(:hover,:focus-visible), +.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) > + toolbarbutton:not([disabled],[open],:active):is(:hover,:focus-visible) { + color: inherit; + background-color: var(--arrowpanel-dimmed); +} + +panelview .toolbarbutton-1:not([disabled]):is([open],:hover:active), +toolbarbutton.subviewbutton:not([disabled]):is([open],:hover:active), +menu.subviewbutton:not([disabled])[_moz-menuactive]:active, +menuitem.subviewbutton:not([disabled])[_moz-menuactive]:active, +.widget-overflow-list .toolbarbutton-1:not([disabled]):is([open],:hover:active), +.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) > + toolbarbutton:not([disabled]):is([open],:hover:active) { + color: inherit; + background-color: var(--arrowpanel-dimmed-further); + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; +} + +.subviewbutton.panel-subview-footer { + margin: 0; + background-color: var(--arrowpanel-dimmed); + border-top: 1px solid var(--panel-separator-color); + border-radius: 0; +} + +menuitem.panel-subview-footer:not([disabled],:active)[_moz-menuactive], +.subviewbutton.panel-subview-footer:not([disabled],[open],:active):is(:hover,:focus-visible) { + background-color: var(--arrowpanel-dimmed-further); +} + +menuitem.panel-subview-footer:not([disabled])[_moz-menuactive]:active, +.subviewbutton.panel-subview-footer:not([disabled]):is([open],:hover:active) { + background-color: var(--arrowpanel-dimmed-even-further); + box-shadow: 0 1px 0 hsla(210,4%,10%,.05) inset; +} + +#widget-overflow-mainView > .panel-subview-body > toolbarseparator, +.PanelUI-subView menuseparator, +.PanelUI-subView toolbarseparator, +.cui-widget-panelview menuseparator, +.cui-widget-panel toolbarseparator { + appearance: none; + min-height: 0; + border-top: 1px solid var(--panel-separator-color); + border-bottom: none; + margin: var(--panel-separator-margin); + padding: 0; +} + +.PanelUI-subView toolbarseparator[orient="vertical"] { + height: 24px; + border-inline-start: 1px solid var(--panel-separator-color); + border-top: none; + margin: 0; + margin-inline: 6px 7px; +} + +#search-container[cui-areatype="menu-panel"] { + padding-block: 6px; +} + +toolbarpaletteitem[place="palette"] > #search-container { + min-width: 7em; + width: 7em; + min-height: 37px; + max-height: 37px; +} + +.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]) > toolbarbutton { + border: 0; + margin: 0; + flex: 1; + padding-block: 4px; + flex-direction: row; +} + +/* In customize mode, extend the buttons *only* in the panel, just to make them not look stupid */ +toolbarpaletteitem[place="menu-panel"] > .toolbaritem-combined-buttons > toolbarbutton { + min-width: var(--menu-panel-button-width); + max-width: var(--menu-panel-button-width); +} + +.toolbaritem-combined-buttons: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; +} + +.toolbaritem-combined-buttons: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; +} + +.toolbaritem-combined-buttons:is(:not([cui-areatype="toolbar"]),[overflowedItem=true]):hover > separator { + margin: 0; +} + +#widget-overflow-mainView .panel-subview-body { + overflow-y: auto; + overflow-x: hidden; +} + +.widget-overflow-list { + width: var(--wide-menu-panel-width); +} + +/* In customize mode, the overflow list is constrained by its container, + * so we set width: auto to avoid the scrollbar not fitting. + */ +#customization-panelHolder > .widget-overflow-list { + width: auto; +} + +toolbaritem[overflowedItem=true], +.widget-overflow-list .toolbarbutton-1 { + width: 100%; + max-width: var(--wide-menu-panel-width); + background-repeat: no-repeat; + background-position: 0 center; +} + +.widget-overflow-list .toolbarbutton-1 { + align-items: center; + flex-direction: row; +} + +.widget-overflow-list .subviewbutton-nav::after { + margin-inline-start: 10px; + -moz-context-properties: stroke, fill-opacity; + content: var(--icon-nav-right-sm); + stroke: currentColor; + fill-opacity: 0.6; + float: inline-end; +} + +.widget-overflow-list .subviewbutton-nav:-moz-locale-dir(rtl)::after { + content: var(--icon-nav-left-sm); +} + +toolbarpaletteitem[place="menu-panel"] > .subviewbutton-nav::after { + opacity: 0.5; +} + +.widget-overflow-list .toolbarbutton-1:not(.toolbarbutton-combined) > .toolbarbutton-text { + text-align: start; + padding-inline-start: .5em; +} + +.subviewradio { + appearance: none; + align-items: center; + padding: 1px; + margin: 0 0 2px; + background-color: transparent; + border-radius: 2px; + border: 1px solid transparent; +} + +.subviewradio:not([disabled],[open],:active):is(:hover,:focus-visible) { + background-color: var(--arrowpanel-dimmed); + border-color: var(--panel-separator-color); +} + +.subviewradio[selected], +.subviewradio[selected]:hover, +.subviewradio:not([disabled]):is([open],:hover:active) { + background-color: var(--arrowpanel-dimmed-further); + border-color: var(--panel-separator-color); + box-shadow: 0 1px 0 hsla(210,4%,10%,.03) inset; +} + +.subviewradio > .radio-check { + appearance: none; + width: 16px; + height: 16px; + border: 1px solid #e7e7e7; + border-radius: 50%; + margin: 1px 5px; + background-color: #f1f1f1; +} + +.subviewradio > .radio-check[selected] { + background-color: #fff; + border: 4px solid #177ee6; +} + +.panel-header { + align-items: center; + border-bottom: 1px solid var(--panel-separator-color); + display: flex; + height: 40px; /* fixed item height to prevent flex sizing; height + 2*4px padding */ + padding: 4px; +} + +.panel-header > h1 { + display: inline; + flex: auto; + font-size: inherit; + font-weight: 600; + margin: 0; + text-align: center; +} + +.panel-header > h1 > span { + display: inline-block; + white-space: pre-wrap; +} + +.panel-header > .subviewbutton-back + h1 { + /* Add the size of the back button to center properly. */ + margin-inline-end: 32px; +} + +.panel-header > .subviewbutton-back { + -moz-context-properties: stroke; + stroke: var(--arrowpanel-color); + list-style-image: var(--icon-nav-left-sm); + padding: 10px; +} + +.subviewbutton-back { + transform: translateY(1px); + margin: 0 4px; +} + +.subviewbutton-back:-moz-locale-dir(rtl) { + list-style-image: var(--icon-nav-right-sm); +} + +.panel-header > .subviewbutton-back > .toolbarbutton-icon { + width: 12px; + height: 12px; +} + +.subviewbutton-back > .toolbarbutton-text { + /* !important to override .cui-widget-panel .toolbarbutton-text + * selector further down. */ + display: none !important; +} + +.subviewbutton.download { + align-items: flex-start; + min-height: 48px; + padding-inline-start: 8px; +} + +.subviewbutton.download > .toolbarbutton-icon, +.subviewbutton.download > .toolbarbutton-text > label { + margin: 4px 0 0; +} + +.subviewbutton.download > .toolbarbutton-icon { + width: 32px; + height: 32px; +} + +.subviewbutton.download > .toolbarbutton-text > .status-text { + color: var(--text-color-deemphasized); + font-size: .9em; +} + +.button-appmenu[badge-status] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + display: flex; + background: center no-repeat transparent; + background-size: contain; + border: none; + box-shadow: none; +} + +.button-appmenu[badge-status="update-available"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +.button-appmenu[badge-status="update-downloading"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +.button-appmenu[badge-status="update-manual"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +.button-appmenu[badge-status="update-other-instance"] > .toolbarbutton-badge-stack > .toolbarbutton-badge, +.button-appmenu[badge-status="update-restart"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + margin-top: -3px !important; + margin-inline-end: -2px !important; + min-width: 12px; + min-height: 12px; + -moz-context-properties: fill; + fill: var(--color-green-60); + background-image: var(--icon-notification-sm); + background-size: 12px; +} + +.button-appmenu[badge-status="addon-alert"] > .toolbarbutton-badge-stack > .toolbarbutton-badge { + height: 12px; + margin-inline-end: -5px !important; + background-image: var(--icon-warning-sm); + box-shadow: none; + border-radius: 0; + -moz-context-properties: fill, stroke; + fill: var(--color-amber-30); + stroke: var(--color-amber-60); +} + +.button-appmenu:focus-visible { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +/* Main menu banner menuitems */ + +.panel-banner-item { + appearance: none; + align-items: flex-start; + margin: var(--appmenu-button-margin); + padding-inline: 8px; + padding-block: calc(var(--appmenu-button-padding) + 3px); + border-radius: var(--arrowpanel-menuitem-border-radius); + color: var(--button-color); + background-color: color-mix(in srgb, currentColor 7%, transparent);; + margin-bottom: 4px; + font-weight: 600; +} + +.panel-banner-item:not([disabled]):hover { + background-color: var(--arrowpanel-dimmed); +} + +.panel-banner-item:not([disabled]):hover:active { + background-color: var(--arrowpanel-dimmed-further); +} + +.panel-banner-item > .toolbarbutton-text { + display: inline-block; + padding: 0; +} + +.panel-banner-item > .toolbarbutton-icon { + width: 16px; + height: 16px; + /* Move the icon to appear after the text label. */ + order: 2; +} + +.panel-banner-item[notificationid="update-available"] > .toolbarbutton-icon, +.panel-banner-item[notificationid="update-downloading"] > .toolbarbutton-icon, +.panel-banner-item[notificationid="update-manual"] > .toolbarbutton-icon, +.panel-banner-item[notificationid="update-other-instance"] > .toolbarbutton-icon, +.panel-banner-item[notificationid="update-restart"] > .toolbarbutton-icon { + background-image: url(chrome://messenger/skin/icons/app-update-badge.svg); + background-repeat: no-repeat; + background-position: center; + margin-inline-start: 6px; + -moz-context-properties: fill; + fill: var(--color-green-60); +} + +.addon-banner-item { + appearance: none; + font-weight: 600; + margin: 0 8px 4px; + padding-inline: 8px; + padding-block: var(--appmenu-button-padding); + box-sizing: border-box; + box-shadow: none; + color: var(--appmenu-warning-color); + background-color: var(--appmenu-warning-background-color); + border-top: 1px solid var(--appmenu-warning-border-color); + border-inline: 1px solid var(--appmenu-warning-border-color); + border-radius: var(--arrowpanel-menuitem-border-radius); + transition: background-color; + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb, var(--appmenu-warning-color) 20%, transparent); + stroke: var(--appmenu-warning-color); +} + +.addon-banner-item::after { + content: ""; + width: 16px; + height: 16px; + margin-inline: 10px 0; + display: flex; + background: var(--icon-warning) no-repeat center; +} + +:root[lwt-popup-brighttext] .addon-banner-item::after { + -moz-context-properties: fill; + fill: var(--color-amber-30); +} + +.addon-banner-item:last-child { + border-bottom: 1px solid var(--appmenu-warning-border-color); +} + +.addon-banner-item:focus, +.addon-banner-item:hover { + background-color: var(--appmenu-warning-background-color-hover); +} + +.addon-banner-item:hover:active { + background-color: var(--appmenu-warning-background-color-active); +} + +menulist { + border: 1px solid var(--button-border-color); + background-color: var(--button-background-color); +} + +menulist:not([disabled="true"],[open="true"]):hover, +menulist[open="true"]:not([disabled="true"]) { + background-color: var(--button-hover-background-color); + border-color: var(--button-border-color); +} + +/* App Menu items icons */ + +/* Sync */ + +#appmenu_signin { + list-style-image: var(--icon-sync); +} + +#appmenu-submenu-sync-now{ + list-style-image: var(--icon-sync); +} + +#appmenu-submenu-sync-settings { + list-style-image: var(--icon-settings); +} + +#appmenu-submenu-sync-sign-out{ + list-style-image: var(--icon-quit); +} + +#syncSeparator { + background-color: var(--color-blue-50); + background-image: linear-gradient(to right, var(--color-teal-40), var(--color-magenta-60)); + height: 1px; + border: none; + border-radius: 2px; +} + +#appmenu-manage-sync-icon { + content: var(--icon-contact); +} + +.appmenu-sync-account-email { + font-weight: 600; +} + +@keyframes syncRotate { + from { transform: rotate(0); } + to { transform: rotate(360deg); } +} + +@media (prefers-reduced-motion: no-preference) { + #appmenu-submenu-sync-now[syncstatus="active"] > .toolbarbutton-icon { + animation: syncRotate 0.8s linear infinite; + } +} + +/* New Account and Create */ + +#appmenu_new { + list-style-image: var(--icon-new-contact); +} + +#appmenu_create { + list-style-image: var(--icon-add); +} + +#appmenu_newNewMsgCmd, +#appmenu_newCreateEmailAccountMenuItem { + list-style-image: var(--icon-new-mail); +} + +#appmenu_newMailAccountMenuItem { + list-style-image: var(--icon-mail); +} + +#appmenu_calendar-new-calendar-menu-item { + list-style-image: var(--icon-calendar); +} + +#appmenu_newAB { + list-style-image: var(--icon-address-book); +} + +#appmenu_newABMenuItem, +#appmenu_newCardDAVMenuItem, +#appmenu_newLdapMenuItem { + list-style-image: var(--icon-new-address-book); +} + +#appmenu_newIMAccountMenuItem { + list-style-image: var(--icon-chat); +} + +#appmenu_newFeedAccountMenuItem { + list-style-image: var(--icon-rss); +} + +#appmenu_newNewsgroupAccountMenuItem { + list-style-image: var(--icon-newsletter); +} + +#appmenu_calendar-new-event-menu-item { + list-style-image: var(--icon-new-event); +} + +#appmenu_calendar-new-task-menu-item { + list-style-image: var(--icon-new-task); +} + +#appmenu_open { + list-style-image: var(--icon-draft); +} + +#appmenu_OpenMessageFileMenuitem { + list-style-image: var(--icon-mail); +} + +#appmenu_OpenCalendarFileMenuitem { + list-style-image: var(--icon-calendar); +} + +#appmenu_View { + list-style-image: var(--icon-eye); +} + +#appmenu_Toolbars { + list-style-image: var(--icon-spaces-menu); +} + +#appmenu_MessagePaneLayout { + list-style-image: var(--icon-layout); +} + +#appmenu_FolderViews { + list-style-image: var(--icon-folder); +} + +#appMenu-uiDensity-controls .toolbarbutton-icon { + content: var(--icon-spaces-menu); +} + +#appMenu-fontSize-controls .toolbarbutton-icon { + content: var(--icon-font); +} + +#appmenu_newCard { + list-style-image: var(--icon-new-contact); +} + +/* Settings */ + +#appmenu_addons { + list-style-image: var(--icon-extension); +} + +#appmenu_accountmgr { + list-style-image: var(--icon-account-settings); +} + +#appmenu_preferences { + list-style-image: var(--icon-settings); +} + +/* Density Settings */ + +#appmenu_uiDensityCompact { + list-style-image: var(--icon-density-compact); +} + +#appmenu_uiDensityNormal { + list-style-image: var(--icon-density-default); +} + +#appmenu_uiDensityTouch { + list-style-image: var(--icon-density-relaxed); +} + +/* Font scaling */ + +#appMenu-fontSizeReduce-button { + list-style-image: var(--font-size-decrease); +} +#appMenu-fontSizeEnlarge-button { + list-style-image: var(--font-size-increase); +} + +#appMenu-fontSizeReduce-button:hover, +#appMenu-fontSizeReduce-button:focus, +#appMenu-fontSizeReduce-button:active, +#appMenu-fontSizeReset-button:hover, +#appMenu-fontSizeReset-button:focus, +#appMenu-fontSizeReset-button:active, +#appMenu-fontSizeEnlarge-button:hover, +#appMenu-fontSizeEnlarge-button:focus, +#appMenu-fontSizeEnlarge-button:active, +#appMenu-fullscreen-button:hover, +#appMenu-fullscreen-button:focus, +#appMenu-fullscreen-button:active { + color: unset; + background-color: unset; + box-shadow: unset; +} + +#appMenu-fontSizeReduce-button > .toolbarbutton-icon, +#appMenu-fontSizeEnlarge-button > .toolbarbutton-icon { + width: var(--appmenu-fontsize-icon-size); + height: var(--appmenu-fontsize-icon-size); + -moz-context-properties: fill, stroke; + fill: var(--button-background-color, ButtonFace); + stroke: var(--button-color); + border-radius: 50%; + margin-block-start: 1px; + padding: 0; +} + +/* Compensate the smaller icon. */ +#appMenu-fontSizeEnlarge-button > .toolbarbutton-icon { + margin-inline-end: -2px; +} + +:root[uidensity="compact"] #appMenu-fontSizeEnlarge-button > .toolbarbutton-icon { + margin-inline-end: -1px; +} + +#appMenu-fontSizeReset-button > .toolbarbutton-text { + display: flex; + justify-content: center; + border: 1px solid var(--appmenu-button-border-color); + border-radius: 2px; + min-width: var(--appmenu-fontsize-reset-button-width); + text-align: center; + padding: 2px; +} + +#appMenu-fontSizeReset-button:hover > .toolbarbutton-text { + background-color: var(--button-hover-background-color); +} +#appMenu-fontSizeReduce-button:hover > .toolbarbutton-icon, +#appMenu-fontSizeEnlarge-button:hover > .toolbarbutton-icon { + fill: var(--button-hover-background-color); +} + +#appMenu-fontSizeReset-button:active > .toolbarbutton-text { + background-color: var(--button-active-background-color); +} +#appMenu-fontSizeReduce-button:active > .toolbarbutton-icon, +#appMenu-fontSizeEnlarge-button:active > .toolbarbutton-icon { + fill: var(--button-active-background-color); +} + +#appMenu-fontSizeReset-button:focus > .toolbarbutton-text, +#appMenu-fontSizeReduce-button:focus > .toolbarbutton-icon, +#appMenu-fontSizeEnlarge-button:focus > .toolbarbutton-icon { + outline: var(--focus-outline); + outline-offset: var(--focus-outline-offset); +} + +#appMenu-fontSize-controls > .subviewbutton { + margin-inline-start: 2px; + padding: 3px; +} + +#appMenu-fontSize-controls > #appMenu-fontSizeEnlarge-button { + padding-inline-end: 0; +} + +:root[uidensity="compact"] #appMenu-fontSizeReduce-button > .toolbarbutton-icon, +:root[uidensity="compact"] #appMenu-fontSizeEnlarge-button > .toolbarbutton-icon { + margin-block-start: 2px; +} + +/* Tools */ + +#appmenu_import { + list-style-image: var(--icon-import); +} + +#appmenu_export { + list-style-image: var(--icon-export); +} + +#appmenu_searchCmd { + list-style-image: var(--icon-search); +} + +#appmenu_filtersCmd { + list-style-image: var(--icon-filter); +} + +#appmenu_openSavedFilesWnd { + list-style-image: var(--icon-download); +} + +#appmenu_manageKeysOpenPGP { + list-style-image: var(--icon-key); +} + +#appmenu_activityManager { + list-style-image: var(--icon-paste); +} + +#appmenu_toolsMenu, +#appmenu_devtoolsToolbox { + list-style-image: var(--icon-tools); +} + +/* Help */ + +#appmenu_help, +#appmenu_openHelp { + list-style-image: var(--icon-question); +} + +#appmenu_openTour { + list-style-image: var(--icon-features); +} + +#appmenu_keyboardShortcuts { + list-style-image: var(--icon-shortcut); +} + +#appmenu_getInvolved { + list-style-image: var(--icon-handshake); +} + +#appmenu_makeDonation { + list-style-image: var(--icon-heart); +} + +#appmenu_submitFeedback { + list-style-image: var(--icon-chat); +} + +#appmenu_troubleshootMode { + list-style-image: var(--icon-tools); +} + +#appmenu_troubleshootingInfo { + list-style-image: var(--icon-draft); +} + +#appmenu_about { + list-style-image: var(--icon-info); +} + +/* Quit */ + +#appmenu-quit { + list-style-image: var(--icon-quit); +} |