diff options
Diffstat (limited to 'toolkit/content/widgets/message-bar.css')
| -rw-r--r-- | toolkit/content/widgets/message-bar.css | 219 |
1 files changed, 219 insertions, 0 deletions
diff --git a/toolkit/content/widgets/message-bar.css b/toolkit/content/widgets/message-bar.css new file mode 100644 index 0000000000..eddc5a3ae6 --- /dev/null +++ b/toolkit/content/widgets/message-bar.css @@ -0,0 +1,219 @@ +/* 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/. */ + +:host { + --info-icon-url: url("chrome://global/skin/icons/info-filled.svg"); + --warn-icon-url: url("chrome://global/skin/icons/warning.svg"); + --success-icon-url: url("chrome://global/skin/icons/check.svg"); + --error-icon-url: url("chrome://global/skin/icons/error.svg"); + --close-icon-url: url("chrome://global/skin/icons/close-12.svg"); + --close-fill-color: var(--in-content-icon-color); + --icon-size: 16px; + --close-icon-size: 28px; +} + +:host { + --message-bar-background-color: var(--in-content-box-info-background); + --message-bar-text-color: var(--in-content-text-color); + --message-bar-icon-url: var(--info-icon-url); + /* The default values of --in-content-button* are sufficient, even for dark themes */ +} + +:host([type=warning]) { + --message-bar-icon-url: var(--warn-icon-url); +} + +:host([type=success]) { + --message-bar-icon-url: var(--success-icon-url); +} + +:host([type=error]), +:host([type=critical]) { + --message-bar-icon-url: var(--error-icon-url); +} + +:host { + border: 1px solid transparent; + 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: 3px 7px; + 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 { + display: inline-block; + appearance: none; + -moz-context-properties: fill, stroke; + fill: currentColor; + stroke: currentColor; + content: ""; + background-image: var(--message-bar-icon-url); + background-size: var(--icon-size); + width: var(--icon-size); + height: var(--icon-size); +} + +/* Use a spacer to position the close button at the end, but also support + * centering if required. */ +.spacer { + flex-grow: 1; +} + +/* Close icon styles */ + +:host(:not([dismissable])) .close { + display: none; +} + +.close { + background-image: var(--close-icon-url); + background-repeat: no-repeat; + background-position: center center; + -moz-context-properties: fill; + fill: currentColor; + min-width: auto; + min-height: auto; + width: var(--close-icon-size); + height: var(--close-icon-size); + padding: 0; + flex-shrink: 0; + margin: 4px 8px; + background-size: 12px; +} + +@media (prefers-contrast) { + :host { + border-color: CanvasText; + } +} + +@media not (prefers-contrast) { + /* MessageBar colors by message type */ + /* Colors from: https://design.firefox.com/photon/components/message-bars.html#type-specific-style */ + + :host([type=warning]) { + /* Ensure colors within the bar are adjusted and controls are readable */ + color-scheme: light; + + --message-bar-background-color: var(--yellow-50); + --message-bar-text-color: var(--yellow-90); + + --in-content-button-background: var(--yellow-60); + --in-content-button-background-hover: var(--yellow-70); + --in-content-button-background-active: var(--yellow-80); + + --close-fill-color: var(--message-bar-text-color); + } + + :host([type=success]) { + /* Ensure colors within the bar are adjusted and controls are readable */ + color-scheme: light; + + --message-bar-background-color: var(--green-50); + --message-bar-text-color: var(--green-90); + + --in-content-button-background: var(--green-60); + --in-content-button-background-hover: var(--green-70); + --in-content-button-background-active: var(--green-80); + } + + :host([type=error]) { + --message-bar-background-color: var(--red-60); + --message-bar-text-color: #ffffff; + + --in-content-button-background: var(--red-70); + --in-content-button-background-hover: var(--red-80); + --in-content-button-background-active: var(--red-90); + } + + :host([type=info]) .icon { + color: rgb(0,144,237); + } + + :host([type=warning]) .icon { + color: rgb(255,164,54); + } + + :host([type=critical]) .icon { + color: rgb(226,40,80); + } + + .close { + fill: var(--close-fill-color); + } + + @media (prefers-color-scheme: dark) { + /* Don't set the background in prefers-contrast mode or macOS can end up + * with black on black text. */ + :host([type=info]) .icon { + color: rgb(128,235,255); + } + + :host([type=warning]) .icon { + color: rgb(255,189,79); + } + + :host([type=critical]) .icon { + color: rgb(255,154,162); + } + } +} + +strong { + font-weight: 600; +} + +.text-link:hover { + cursor: pointer; +} + +@keyframes spin { + from { transform: rotate(0); } + to { transform: rotate(360deg); } +} |