autocomplete.css (7877B)
1 /* This Source Code Form is subject to the terms of the Mozilla Public 2 * License, v. 2.0. If a copy of the MPL was not distributed with this 3 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ 4 5 @namespace html url("http://www.w3.org/1999/xhtml"); 6 7 /* General popup rules */ 8 9 #PopupAutoComplete > richlistbox { 10 padding: 0; 11 } 12 13 /* Define the minimum width based on the style of result rows. 14 The order of the min-width rules below must be in increasing order. */ 15 #PopupAutoComplete:is([resultstyles~="loginsFooter"], [resultstyles~="insecureWarning"])::part(content) { 16 min-width: 22em; 17 } 18 19 #PopupAutoComplete:is([resultstyles~="importableLogins"], [resultstyles~="generatedPassword"])::part(content) { 20 min-width: 22em; 21 } 22 23 #PopupAutoComplete > richlistbox > richlistitem { 24 min-height: 20px; 25 border: 0; 26 border-radius: 0; 27 padding: 0 1px; 28 29 --status-text-color: currentColor; 30 --status-background-color: rgba(248, 232, 28, 0.2); 31 32 > .ac-site-icon { 33 margin-inline: 4px 0; 34 } 35 36 > .ac-login-item { 37 display: flex; 38 justify-content: center; 39 align-items: center; 40 width: 100%; 41 42 > .ac-secondary-action { 43 visibility: hidden; 44 height: 16px; 45 width: 16px; 46 border: 0; 47 color: inherit; 48 -moz-context-properties: fill; 49 fill: currentColor; 50 margin-inline: 8px; 51 cursor: pointer; 52 background: url("chrome://global/skin/icons/settings.svg") center no-repeat; 53 } 54 } 55 56 &:is(:hover, [selected]) > .ac-login-item > .ac-secondary-action { 57 visibility: visible; 58 } 59 60 > .ac-title { 61 font: icon; 62 margin-inline-start: 4px; 63 } 64 65 &[originaltype="importableLearnMore"] { 66 padding-bottom: 2px; 67 padding-inline-start: 21px; 68 } 69 70 &[originaltype="loginsFooter"] { 71 background-color: transparent; 72 color: currentColor; 73 min-height: 2.6666em; 74 position: relative; 75 76 &:hover, 77 &[selected] { 78 background-color: hsla(0, 0%, 80%, 0.5); /* match arrowpanel-dimmed-further */ 79 } 80 } 81 82 &[originaltype="loginsFooter"]::before { 83 content: ""; 84 position: absolute; 85 top: 0; 86 inset-inline-start: 4px; 87 width: calc(100% - 8px); 88 border-top: 1px solid var(--panel-separator-color); 89 } 90 91 &[originaltype="insecureWarning"] { 92 height: auto; 93 94 & > .ac-title > .ac-text-overflow-container > .ac-title-text { 95 text-overflow: initial; 96 white-space: initial; 97 } 98 99 & > .ac-title > label { 100 margin-inline-start: 0; 101 } 102 } 103 104 &[originaltype="loginWithOrigin"] > .ac-site-icon, 105 &[originaltype="insecureWarning"] > .ac-site-icon { 106 margin-inline-start: 0; 107 display: initial; 108 } 109 110 &[originaltype="login"] > .ac-site-icon, 111 &[originaltype="possible-username"] > .ac-site-icon, 112 > .two-line-wrapper > .ac-site-icon { 113 display: block; 114 margin-inline: 4px; 115 } 116 117 &[originaltype="possible-username"] > .ac-site-icon { 118 visibility: hidden; 119 } 120 121 /* Autocomplete richlistitem support for a two-line label display */ 122 123 > .two-line-wrapper { 124 box-sizing: border-box; 125 display: flex; 126 align-items: center; 127 flex-direction: row; 128 gap: 8px; 129 margin: 0; 130 min-width: 0; 131 132 > .ac-site-icon { 133 margin-left: 6px; 134 } 135 136 > .ac-site-icon[src=""] { 137 display: none; 138 } 139 140 > .labels-wrapper { 141 /* The text should flex while the icon should not */ 142 flex: 1; 143 /* min-width is needed to get the text-overflow: ellipsis to work for the children */ 144 min-width: 0; 145 146 > .label-row { 147 overflow: hidden; 148 text-overflow: ellipsis; 149 white-space: nowrap; 150 } 151 152 .line2-label { 153 padding-top: 2px !important; 154 color: var(--text-color-deemphasized); 155 } 156 } 157 } 158 159 &[originaltype="generatedPassword"] > .two-line-wrapper > .labels-wrapper > .generated-password-autosave, 160 &[originaltype="importableLearnMore"] > .ac-title, 161 > .two-line-wrapper > .labels-wrapper > .line2-label { 162 padding-top: 2px !important; 163 color: var(--text-color-deemphasized); 164 } 165 166 /* Login form autocompletion (with and without origin showing) and generated passwords */ 167 &[originaltype="generatedPassword"] > .two-line-wrapper > .ac-site-icon, 168 &[originaltype="loginWithOrigin"] > .two-line-wrapper > .ac-site-icon, 169 &[originaltype="login"] > .ac-site-icon { 170 fill: GrayText; 171 } 172 173 &[originaltype="importableLogins"] > .two-line-wrapper > .ac-site-icon { 174 fill: GrayText; 175 list-style-image: url(chrome://browser/skin/import.svg); 176 } 177 178 &[originaltype="generatedPassword"][selected] > .two-line-wrapper > .ac-site-icon, 179 &[originaltype="importableLogins"][selected] > .two-line-wrapper > .ac-site-icon, 180 &[originaltype="loginWithOrigin"][selected] > .two-line-wrapper > .ac-site-icon, 181 &[originaltype="login"] > .ac-site-icon[selected] { 182 fill: SelectedItemText; 183 } 184 185 /* Login form autocompletion */ 186 > .two-line-wrapper { 187 padding: 4px; 188 padding-inline-start: 6px; 189 } 190 191 &[originaltype="action"] > .two-line-wrapper { 192 flex: 1; 193 } 194 195 &[originaltype="generatedPassword"] { 196 &:not([collapsed]) { 197 /* Workaround bug 451997 and/or bug 492645 */ 198 display: block; 199 } 200 201 > .two-line-wrapper > .labels-wrapper { 202 &.line2-label > span { 203 /* The font-family is only adjusted on the inner span so that the 204 line-height of .line2-label matches that of .line1-label */ 205 font-family: monospace; 206 } 207 208 > .generated-password-autosave > span { 209 /* The font-* properties are only adjusted on the inner span so that the 210 line-height of .generated-password-autosave matches that of .line1-label */ 211 font-style: italic; 212 font-size: 0.85em; 213 white-space: normal; 214 } 215 } 216 } 217 218 &[originaltype="login"] + richlistitem[originaltype="generatedPassword"], 219 &[originaltype="loginWithOrigin"] + richlistitem[originaltype="generatedPassword"] { 220 /* Separator between logins and generated passwords. This uses --panel-separator-color from default 221 * themes since autocomplete doesn't yet switch to dark. */ 222 border-top: 1px solid hsla(210, 4%, 10%, 0.14); 223 } 224 225 &[originaltype="action"] { 226 text-align: center; 227 } 228 229 /* status items */ 230 > .ac-status { 231 padding: var(--space-xsmall) var(--space-small); 232 text-align: center; 233 background-color: var(--status-background-color); 234 color: var(--status-text-color); 235 width: 100%; 236 border-bottom: 1px solid var(--panel-separator-color); 237 font-size: calc(10 / 12 * 1em); 238 } 239 240 &:has(> .ac-status) { 241 opacity: 1; 242 } 243 244 &[originaltype="autofill"][ac-image]:not([ac-image=""]) > .two-line-wrapper { 245 display: grid; 246 grid-template-columns: 32px 1fr; 247 248 > .ac-site-icon { 249 width: auto; 250 height: 16px; 251 max-width: 32px; 252 max-height: 16px; 253 } 254 } 255 256 /* Insecure field warning */ 257 &[originaltype="insecureWarning"] { 258 background-color: var(--arrowpanel-dimmed); 259 color: inherit; 260 border-bottom: 1px solid var(--panel-separator-color); 261 padding-block: 4px; 262 263 &[selected] { 264 background-color: var(--arrowpanel-dimmed-further); 265 color: inherit; 266 } 267 268 > .ac-title { 269 font-size: 1em; 270 } 271 272 > .ac-title .ac-emphasize-text-title { 273 font-weight: var(--heading-font-weight); 274 } 275 276 > .ac-site-icon { 277 list-style-image: url(chrome://global/skin/icons/security-broken.svg); 278 } 279 } 280 } 281 282 /* Popup states */ 283 .autocomplete-richlistitem { 284 &:not([disabled]):not([selected]):hover { 285 background-color: var(--arrowpanel-dimmed); 286 @media (forced-colors) { 287 background-color: ButtonText; 288 color: ButtonFace; 289 } 290 } 291 292 &[selected] { 293 background-color: SelectedItem; 294 color: SelectedItemText; 295 @media (forced-colors) { 296 &:not(:active) { 297 box-shadow: inset 0 0 0 3px CanvasText; 298 color: ButtonText; 299 background-color: ButtonFace; 300 } 301 } 302 } 303 }