password-validation-inputs.css (1792B)
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 https://mozilla.org/MPL/2.0/. */ 4 5 @import url("chrome://global/skin/in-content/common.css"); 6 @import url("chrome://browser/content/backup/backup-common.css"); 7 8 #password-inputs-form { 9 display: flex; 10 flex-direction: column; 11 row-gap: var(--space-large); 12 13 > #repeat-password-label { 14 display: flex; 15 flex-direction: column; 16 } 17 18 > #new-password-label input, 19 > #repeat-password-label input { 20 margin-inline-start: 0; 21 } 22 } 23 24 #new-password-label { 25 position: relative; 26 27 #new-password-label-wrapper-span-input { 28 display: flex; 29 flex-direction: column; 30 } 31 } 32 33 .hidden { 34 visibility: hidden; 35 transition: visibility 0.5s; 36 } 37 38 #password-rules { 39 position: absolute; 40 z-index: 10; 41 42 /* Default, not zoomed in */ 43 @media (min-width: 1200px) { 44 width: 20rem; 45 inset-inline-start: 100%; 46 transform: translate(-1rem, 1rem); 47 48 &:dir(rtl) { 49 transform: translate(1rem, 1rem); 50 } 51 } 52 53 /* Zoomed in */ 54 @media (max-width: 1200px) { 55 width: 23rem; 56 /* Shift the tooltip under the password input by a few pixels */ 57 transform: translateY(calc(var(--input-text-min-height) + 1.75rem)); 58 } 59 } 60 61 :host([embedded-fx-backup-opt-in]) { 62 #new-password-span, 63 #repeat-password-span { 64 text-align: start; 65 font-weight: var(--heading-font-weight); 66 font-size: var(--font-size-sub-heading); 67 } 68 69 .hidden { 70 visibility: hidden; 71 transition: visibility 0s; 72 } 73 } 74 75 .field-error { 76 display: none; 77 color: var(--text-color-error); 78 font-size: var(--font-size-small); 79 margin-block-start: var(--space-xsmall); 80 } 81 82 input:user-invalid + .field-error { 83 display: block; 84 }