diff options
author | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
---|---|---|
committer | Daniel Baumann <daniel.baumann@progress-linux.org> | 2024-04-07 19:33:14 +0000 |
commit | 36d22d82aa202bb199967e9512281e9a53db42c9 (patch) | |
tree | 105e8c98ddea1c1e4784a60a5a6410fa416be2de /browser/themes/shared/autocomplete.css | |
parent | Initial commit. (diff) | |
download | firefox-esr-upstream.tar.xz firefox-esr-upstream.zip |
Adding upstream version 115.7.0esr.upstream/115.7.0esrupstream
Signed-off-by: Daniel Baumann <daniel.baumann@progress-linux.org>
Diffstat (limited to 'browser/themes/shared/autocomplete.css')
-rw-r--r-- | browser/themes/shared/autocomplete.css | 191 |
1 files changed, 191 insertions, 0 deletions
diff --git a/browser/themes/shared/autocomplete.css b/browser/themes/shared/autocomplete.css new file mode 100644 index 0000000000..5830e5f528 --- /dev/null +++ b/browser/themes/shared/autocomplete.css @@ -0,0 +1,191 @@ +/* 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/. */ + +@namespace html url("http://www.w3.org/1999/xhtml"); + +/* General popup rules */ + +#PopupAutoComplete > richlistbox > richlistitem { + min-height: 20px; + border: 0; + border-radius: 0; + padding: 0 1px; +} + +#PopupAutoComplete > richlistbox > richlistitem > .ac-site-icon { + margin-inline: 4px 0; +} + +#PopupAutoComplete > richlistbox > richlistitem > .ac-login-item { + display: flex; + justify-content: center; + align-items: center; + width: 100%; +} + +#PopupAutoComplete > richlistbox > richlistitem > .ac-login-item > .ac-settings-button { + visibility: hidden; + height: 16px; + width: 16px; + border: 0; + -moz-context-properties: fill; + fill: currentColor; + margin-inline: 8px; + cursor: pointer; + background: url("chrome://global/skin/icons/settings.svg") center no-repeat; +} + +#PopupAutoComplete > richlistbox > richlistitem:is(:hover, [selected]) > .ac-login-item > .ac-settings-button { + visibility: visible; +} + +#PopupAutoComplete > richlistbox > richlistitem > .ac-title { + font: icon; + margin-inline-start: 4px; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLearnMore"] { + padding-bottom: 2px; + padding-inline-start: 21px; +} + +#PopupAutoComplete > richlistbox { + padding: 0; +} + +/* Popup states */ + +.autocomplete-richlistitem:hover { + background-color: var(--arrowpanel-dimmed); +} + +.autocomplete-richlistitem[selected] { + background-color: SelectedItem; + color: SelectedItemText; +} + +/* Autocomplete richlistitem support for a two-line label display */ + +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper { + box-sizing: border-box; + display: flex; + flex-direction: row; + gap: 8px; + margin: 0; + min-width: 0; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="possible-username"] > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .ac-site-icon { + display: block; + margin-inline: 4px; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="possible-username"] > .ac-site-icon { + visibility: hidden; +} + +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .labels-wrapper { + /* The text should flex while the icon should not */ + flex: 1; + /* min-width is needed to get the text-overflow: ellipsis to work for the children */ + min-width: 0; +} + +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .labels-wrapper > .label-row { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .generated-password-autosave, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLearnMore"] > .ac-title, +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper > .labels-wrapper > .line2-label { + padding-top: 2px !important; + opacity: .6; +} + +/* Login form autocompletion (with and without origin showing) and generated passwords */ +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon { + fill: GrayText; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLogins"] > .two-line-wrapper > .ac-site-icon { + fill: GrayText; + list-style-image: url(chrome://browser/skin/import.svg); +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"][selected] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="importableLogins"][selected] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"][selected] > .two-line-wrapper > .ac-site-icon, +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] > .ac-site-icon[selected] { + fill: SelectedItemText; +} + +/* Login form autocompletion */ +#PopupAutoComplete > richlistbox > richlistitem > .two-line-wrapper { + padding: 4px; + padding-inline-start: 0; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"]:not([collapsed="true"]) { + /* Workaround bug 451997 and/or bug 492645 */ + display: block; +} + + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .line2-label > span { + /* The font-family is only adjusted on the inner span so that the + line-height of .line2-label matches that of .line1-label */ + font-family: monospace; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .generated-password-autosave > span { + /* The font-* properties are only adjusted on the inner span so that the + line-height of .generated-password-autosave matches that of .line1-label */ + font-style: italic; + font-size: 0.85em; + white-space: normal; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="login"] + richlistitem[originaltype="generatedPassword"], +#PopupAutoComplete > richlistbox > richlistitem[originaltype="loginWithOrigin"] + richlistitem[originaltype="generatedPassword"] { + /* Separator between logins and generated passwords. This uses --panel-separator-color from default + * themes since autocomplete doesn't yet switch to dark. */ + border-top: 1px solid hsla(210,4%,10%,.14); +} + +/* Insecure field warning */ +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] { + background-color: var(--arrowpanel-dimmed); + border-bottom: 1px solid var(--panel-separator-color); + padding-block: 4px; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] { + background-color: var(--arrowpanel-dimmed-further); + color: -moz-DialogText; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title { + color: var(--grey-60); + font-size: 1em; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-title .ac-emphasize-text-title { + font-weight: 600; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"][selected] > .ac-title { + color: inherit; +} + +#PopupAutoComplete > richlistbox > richlistitem[originaltype="insecureWarning"] > .ac-site-icon { + list-style-image: url(chrome://global/skin/icons/security-broken.svg); + -moz-context-properties: fill; + fill: var(--grey-60); +} |