diff options
Diffstat (limited to 'browser/components/aboutlogins/content/components/login-alert.css')
-rw-r--r-- | browser/components/aboutlogins/content/components/login-alert.css | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/browser/components/aboutlogins/content/components/login-alert.css b/browser/components/aboutlogins/content/components/login-alert.css new file mode 100644 index 0000000000..b2d17b433e --- /dev/null +++ b/browser/components/aboutlogins/content/components/login-alert.css @@ -0,0 +1,81 @@ +/* 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(login-alert) { + display: grid; + column-gap: 16px; + grid-template-areas: "icon title action" "icon content content"; + grid-template-columns: min-content 1fr auto; + padding: 16px 32px; + color: var(--in-content-text-color); + background-color: var(--in-content-box-background); + border-radius: 4px; + border: 1px solid var(--in-content-border-color); + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .1); + font-size: .9em; +} + +:host([variant="info"]) { + background-color: var(--in-content-box-background); +} + +:host([variant="error"]) { + background-color: #a4000f; + color: white; +} + +:host([variant="warning"]) { + background: #d7b600; + color: black; +} + +:host(login-alert) img { + grid-area: icon; + width: 24px; + -moz-context-properties: fill; + fill: currentColor; +} + +:host(login-alert) h3 { + grid-area: title; + font-size: 1.5em; + font-weight: normal; + margin: 0; + padding: 0; +} + +:host(login-alert) slot[name="action"] { + grid-area: action; +} + +:host(login-alert) slot[name="content"] { + grid-area: content; +} + +:host(login-breach-alert) div[slot="content"], +:host(login-vulnerable-password-alert) div[slot="content"] { + margin-block-start: 8px; +} + +:host(login-vulnerable-password-alert) a { + font-weight: 600; +} + +:host(login-vulnerable-password-alert) div[slot="content"] > a { + color: var(--link-color); +} + +:host(login-vulnerable-password-alert) a[slot="action"] { + color: var(--text-color-deemphasized); +} + +:host(login-breach-alert) h4 { + margin: 0; + padding: 0; +} + +:host(login-breach-alert) a { + font-weight: 600; + color: inherit; +} |