password-rules-tooltip.css (2209B)
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 #password-rules-wrapper[popover] { 6 margin: 0; 7 padding: var(--space-large) var(--space-xlarge); 8 background-color: var(--background-color-box); 9 border: var(--border-width) solid var(--border-color-interactive); 10 border-radius: var(--border-radius-small); 11 overflow: visible; 12 13 ul { 14 margin: 0; 15 padding: 0; 16 text-align: start; 17 } 18 19 li { 20 list-style-image: url(chrome://global/skin/icons/check.svg); 21 list-style-position: inside; 22 -moz-context-properties: fill; 23 fill: currentColor; 24 25 &:last-child { 26 margin-block-start: 0.5rem; 27 margin-block-end: 0.5rem; 28 } 29 30 span { 31 position: relative; 32 top: -3px; 33 } 34 } 35 36 .warning { 37 -moz-context-properties: fill, stroke; 38 color: var(--icon-color-critical); 39 fill: var(--icon-color-critical); 40 stroke: var(--icon-color-critical); 41 list-style-image: url(chrome://global/skin/icons/warning.svg); 42 } 43 44 /* Arrow */ 45 &::before { 46 width: 0.75rem; 47 height: 0.75rem; 48 position: absolute; 49 content: ""; 50 background-color: var(--background-color-box); 51 border-block-start: var(--border-width) solid var(--border-color-interactive); 52 border-inline-start: var(--border-width) solid var(--border-color-interactive); 53 } 54 55 /* Default, not zoomed in */ 56 @media (min-width: 1200px) { 57 &::before { 58 inset-inline-start: -0.4rem; 59 inset-block-start: 1.25rem; 60 rotate: -45deg; 61 } 62 63 &:dir(rtl)::before { 64 rotate: 45deg; 65 } 66 } 67 68 /* Zoomed in */ 69 @media (max-width: 1200px) { 70 &::before { 71 inset-inline-start: 1.25rem; 72 inset-block-start: -0.46rem; 73 rotate: 45deg; 74 } 75 76 &:dir(rtl)::before { 77 rotate: -45deg; 78 } 79 } 80 } 81 82 #password-rules-header { 83 margin-block-start: 0; 84 font-size: 14px; 85 font-weight: var(--heading-font-weight); 86 } 87 88 .rule-description { 89 font-size: 12px; 90 } 91 92 @media (min-width: 1200px) { 93 :host([embedded-fx-backup-opt-in]) { 94 #password-rules-wrapper { 95 margin: 0.5rem -100px; 96 } 97 } 98 }