diff options
Diffstat (limited to 'toolkit/content/widgets/message-bar.css')
-rw-r--r-- | toolkit/content/widgets/message-bar.css | 219 |
1 files changed, 0 insertions, 219 deletions
diff --git a/toolkit/content/widgets/message-bar.css b/toolkit/content/widgets/message-bar.css deleted file mode 100644 index eddc5a3ae6..0000000000 --- a/toolkit/content/widgets/message-bar.css +++ /dev/null @@ -1,219 +0,0 @@ -/* 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); } -} |