diff options
Diffstat (limited to 'comm/mail/themes/shared/mail/message-bar.css')
| -rw-r--r-- | comm/mail/themes/shared/mail/message-bar.css | 432 |
1 files changed, 432 insertions, 0 deletions
diff --git a/comm/mail/themes/shared/mail/message-bar.css b/comm/mail/themes/shared/mail/message-bar.css new file mode 100644 index 0000000000..a4a7a02e10 --- /dev/null +++ b/comm/mail/themes/shared/mail/message-bar.css @@ -0,0 +1,432 @@ +/* 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/. */ + +@import url("chrome://messenger/skin/shared/contextMenu.css"); + +:host { + --icon-size: 16px; + --close-icon-size: 32px; + --in-content-button-color: #0c0c0d; + --in-content-button-border: #c2c2c3; + --in-content-button-background: #e2e2e3; + --in-content-button-text-color-hover: #0c0c0d; + --in-content-button-background-hover: #d2d2d3; + --in-content-button-border-active: #a2a2a3; + --in-content-button-text-color-active: #0c0c0d; + --in-content-button-background-active: #c2c2c3; + --panel-border-radius: 3px; +} + +@media (prefers-contrast) { + :host { + --in-content-box-info-background: -moz-Dialog; + --in-content-button-color: ButtonText; + --in-content-button-border: ThreeDLightShadow; + --in-content-button-background: ButtonFace; + --in-content-button-text-color-hover: SelectedItemText; + --in-content-button-background-hover: SelectedItem; + --in-content-button-border-active: ThreeDFace; + --in-content-button-text-color-active: SelectedItemText; + --in-content-button-background-active: SelectedItem; + } +} + +:host([message-bar-type=infobar]) { + --close-icon-size: 24px; +} + +/* MessageBar colors by message type */ +/* Colors from: https://design.firefox.com/photon/components/message-bars.html#type-specific-style */ + +:host { + --message-bar-background-color: var(--in-content-page-background); + --message-bar-text-color: var(--in-content-text-color); + --message-bar-icon-url: var(--icon-info); + /* The default values of --in-content-button* are sufficient, even for dark themes */ +} + +:host([type=warning]) { + --message-bar-background-color: #fff160; + --message-bar-text-color: #000; + --message-bar-icon-url: var(--icon-warning); +} + +@media (prefers-color-scheme: dark) { + :host { + --in-content-box-info-background: var(--color-gray-60); + } + + :host([type=warning]) { + --message-bar-background-color: #ffe900; + } +} + +:host([type=success]) { + --message-bar-background-color: var(--green-60); + --message-bar-text-color: #ffffff; + --message-bar-icon-url: var(--icon-check); +} + +:host([type=error]), +:host([type=critical]) { + --message-bar-background-color: var(--red-60); + --message-bar-text-color: #fff; +} +:host([type=error]), +:host([type=critical]) { + --message-bar-icon-url: var(--icon-error-circle); +} + +:host([value=attachmentReminder]) { + --message-bar-icon-url: var(--icon-attachment); +} + +:host([value=draftMsgContent]) { + --message-bar-icon-url: var(--icon-pencil); +} + +:host([value=junkContent]) { + --message-bar-icon-url: var(--icon-spam); +} + +:host([value=remoteContent]) { + --message-bar-icon-url: var(--icon-photo-ban); +} + +:host { + border-radius: 4px; +} + +/* Make the host to behave as a block by default, but allow hidden to hide it. */ +:host(:not([hidden])) { + display: block; +} + +::slotted(button) { + /* Enforce micro-button width. */ + min-width: -moz-fit-content !important; +} + +/* MessageBar Grid Layout */ + +.container { + background: var(--message-bar-background-color); + color: var(--message-bar-text-color); + padding: 4px 8px; + position: relative; + border-radius: 4px; + display: flex; + /* Ensure that the message bar shadow dom elements are vertically aligned. */ + align-items: center; +} + +:host([align="center"]) .container { + justify-content: center; +} + +.content { + margin: 0 4px; + display: inline-block; + /* Ensure that the message bar content is vertically aligned. */ + align-items: center; + /* Ensure that the message bar content is wrapped. */ + word-break: break-word; +} + +/* MessageBar icon style */ + +.icon { + padding: 4px; + width: var(--icon-size); + height: var(--icon-size); + flex-shrink: 0; +} + +.icon::after { + appearance: none; + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb ,currentColor 20%, transparent); + stroke: currentColor; + content: var(--message-bar-icon-url); +} + +@media (prefers-reduced-motion: no-preference) { + :host([value=accountSetupLoading]) .icon { + position: relative; + overflow: hidden; + } + + :host([value=accountSetupLoading]) .icon::after { + position: absolute; + content: ''; + background-image: url("chrome://messenger/skin/icons/loading.svg"); + background-position: left center; + background-repeat: no-repeat; + width: 480px; + height: 100%; + animation: loading-animation 1.05s steps(30) infinite; + } + + :host([value=accountSetupLoading]) .icon:-moz-locale-dir(rtl)::after { + background-position-x: right; + animation: loading-animation-rtl 1.05s steps(30) infinite; + } + + @keyframes loading-animation { + 0% { transform: translateX(0); } + 100% { transform: translateX(-100%); } + } + + @keyframes loading-animation-rtl { + 0% { transform: translateX(0); } + 100% { transform: translateX(100%); } + } +} + +/* Close icon styles */ + +:host(:not([dismissable])) .close { + display: none; +} + +.close { + color: inherit !important; /* Override common.css */ + background-image: var(--icon-close); + background-repeat: no-repeat; + background-position: center center; + -moz-context-properties: fill, stroke; + fill: color-mix(in srgb ,currentColor 20%, transparent); + stroke: currentColor; + min-width: auto; + min-height: auto; + width: var(--close-icon-size); + height: var(--close-icon-size); + margin: 0; + padding: 0; + flex-shrink: 0; +} + +button.ghost-button:not(.semi-transparent):enabled:hover { + background-color: color-mix(in srgb, currentColor 15%, transparent); +} + +button.ghost-button:not(.semi-transparent):enabled:hover:active { + background-color: color-mix(in srgb, currentColor 25%, transparent); +} + +@media not (prefers-contrast) { + .container.infobar { + box-shadow: 0 1px 2px rgba(58, 57, 68, 0.3); + } +} + +@media (prefers-color-scheme: dark) { + :host([type="info"]) .container.infobar { + --message-bar-background-color: var(--in-content-box-info-background); + } +} + +:host([message-bar-type=infobar]:first-of-type) { + margin-top: 4px; +} + +:host([message-bar-type=infobar]) { + margin: 0 4px 4px; +} + +.container.infobar { + /* Don't let lwthemes set a text-shadow. */ + text-shadow: none; + padding: 0; +} + +.container.infobar { + align-items: center; +} + +/* Infobars styling. */ +.notification-content { + flex-grow: 1; + flex-wrap: wrap; + display: flex; + margin: 0; + margin-inline-start: 8px; +} + +:host([value=accountSetupLoading]) .notification-content { + flex-grow: unset; +} + +.notification-message { + flex-grow: 1; + min-height: 16px; + margin-inline-end: 20px; + margin-block: 6px; +} + +.notification-button-container, +.notification-message { + display: flex; +} + +:host(:not([dismissable])) .notification-message { + margin-inline-end: 6px; +} + +:host([type=success]) .notification-message { + font-weight: 500; +} + +.notification-message > hbox { + flex: 100 100; +} + +.notification-button { + border: 1px solid var(--in-content-button-border); + border-radius: 3px; + color: var(--in-content-button-color); +} + +.notification-button:hover:active { + border-color: var(--in-content-button-border-active); +} + +/* Button variations */ + +button.button-menu-list { + appearance: none; + padding-inline-end: 18px; + background-repeat: no-repeat; + background-position: right 4px center; + background-size: 12px; + background-image: var(--icon-nav-down-sm); + -moz-context-properties: stroke; + stroke: currentColor; +} + +button:-moz-locale-dir(rtl).button-menu-list { + background-position-x: left 4px; +} + +toolbarbutton.notification-button[is="toolbarbutton-menu-button"] { + align-items: center; + margin: 4px 6px; + padding-block: 0; + padding-inline: 0 11px; + background-color: var(--in-content-button-background); +} + +toolbarbutton[is="toolbarbutton-menu-button"] > toolbarbutton { + margin-block: 0; + margin-inline: 0 2px; + min-height: 22px; + border-start-start-radius: 2px; + border-start-end-radius: 2px; + border-start-end-radius: 0; + border-end-end-radius: 0; + padding: 2px 15px; + font-weight: inherit; + background-color: var(--in-content-button-background); + border-width: 0; + border-inline-end: 1px solid var(--in-content-button-border); +} + +toolbarbutton.notification-button[is="toolbarbutton-menu-button"]:hover, +toolbarbutton.notification-button[is="toolbarbutton-menu-button"] > toolbarbutton:hover { + background-color: var(--in-content-button-background-hover); + color: var(--in-content-button-text-color-hover); + border-color: var(--in-content-button-border-color-hover); +} + +toolbarbutton.notification-button[is="toolbarbutton-menu-button"]:hover:active, +toolbarbutton.notification-button[is="toolbarbutton-menu-button"] > toolbarbutton:hover:active { + background-color: var(--in-content-button-background-active); + color: var(--in-content-button-text-color-active); + border-color: var(--in-content-button-border-color-active); +} + +toolbarbutton.notification-button[is="toolbarbutton-menu-button"] > dropmarker { + appearance: none; + list-style-image: var(--icon-nav-down-sm); + -moz-context-properties: stroke; + stroke: currentColor; + margin-inline-end: -5px; + padding-inline-start: 5px; + border-start-start-radius: 0; + border-start-end-radius: 0; + pointer-events: none; + display: inline-flex; +} + +.close { + margin: 4px 8px; + background-size: 16px; +} + +.notification-button.small-button { + font-size: inherit; + font-weight: 400; +} + +.notification-button:first-of-type { + /* When the buttons wrap to their own line we want to match the 8px on the message. */ + margin-inline-start: 0; +} + +strong { + font-weight: 600; +} + +.text-link:hover { + cursor: pointer; +} + +.infobar > .icon { + padding: 0; + margin: 8px 0; +} + +.infobar > .icon, +:host([type=system]) .notification-content { + margin-inline-start: 12px; +} + +:host([type=system]) .icon { + display: none; +} + +:host([type=info]) .icon { + color: #0090ed; +} + +@media (prefers-color-scheme: dark) { + :host { + --in-content-button-color: #f9f9fa; + --in-content-button-border: #828283; + --in-content-button-background: #636364; + --in-content-button-text-color-hover: #f9f9fa; + --in-content-button-background-hover: #777778; + --in-content-button-text-color-active: #f9f9fa; + --in-content-button-border-active: #878788; + --in-content-button-background-active: #878788; + --in-content-focus-outline-color: #45a1ff; + } + + :host([type=info]) .icon { + color: #45a1ff; + } +} + +:host([value=draftMsgContent]) .icon { + color: inherit; +} + +/* Attachment reminder variations */ + +#attachmentKeywords { + font-weight: bold; + margin-inline-start: 3px; + text-decoration: underline; + cursor: pointer; +} |