99 lines
2.2 KiB
CSS
99 lines
2.2 KiB
CSS
/* 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 https://mozilla.org/MPL/2.0/. */
|
|
|
|
#password-rules-wrapper[popover] {
|
|
margin: 0;
|
|
padding: var(--space-large) var(--space-xlarge);
|
|
background-color: var(--background-color-box);
|
|
border: var(--border-width) solid var(--border-color-interactive);
|
|
border-radius: var(--border-radius-small);
|
|
overflow: visible;
|
|
|
|
ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
text-align: start;
|
|
}
|
|
|
|
li {
|
|
list-style-image: url(chrome://global/skin/icons/check.svg);
|
|
list-style-position: inside;
|
|
-moz-context-properties: fill;
|
|
fill: currentColor;
|
|
|
|
&:last-child {
|
|
margin-block-start: 0.5rem;
|
|
margin-block-end: 0.5rem;
|
|
}
|
|
|
|
span {
|
|
position: relative;
|
|
top: -3px;
|
|
}
|
|
}
|
|
|
|
.warning {
|
|
-moz-context-properties: fill, stroke;
|
|
color: var(--icon-color-critical);
|
|
fill: var(--icon-color-critical);
|
|
stroke: var(--icon-color-critical);
|
|
list-style-image: url(chrome://global/skin/icons/warning.svg);
|
|
}
|
|
|
|
/* Arrow */
|
|
&::before {
|
|
width: 0.75rem;
|
|
height: 0.75rem;
|
|
position: absolute;
|
|
content: "";
|
|
background-color: var(--background-color-box);
|
|
border-block-start: var(--border-width) solid var(--border-color-interactive);
|
|
border-inline-start: var(--border-width) solid var(--border-color-interactive);
|
|
}
|
|
|
|
/* Default, not zoomed in */
|
|
@media (min-width: 1200px) {
|
|
&::before {
|
|
inset-inline-start: -0.4rem;
|
|
inset-block-start: 1.25rem;
|
|
rotate: -45deg;
|
|
}
|
|
|
|
&:dir(rtl)::before {
|
|
rotate: 45deg;
|
|
}
|
|
}
|
|
|
|
/* Zoomed in */
|
|
@media (max-width: 1200px) {
|
|
&::before {
|
|
inset-inline-start: 1.25rem;
|
|
inset-block-start: -0.46rem;
|
|
rotate: 45deg;
|
|
}
|
|
|
|
&:dir(rtl)::before {
|
|
rotate: -45deg;
|
|
}
|
|
}
|
|
}
|
|
|
|
#password-rules-header {
|
|
margin-block-start: 0;
|
|
font-size: 14px;
|
|
font-weight: var(--font-weight-heading);
|
|
}
|
|
|
|
.rule-description {
|
|
font-size: 12px;
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
:host([embedded-fx-backup-opt-in]) {
|
|
#password-rules-wrapper {
|
|
margin: 0.5rem -100px;
|
|
}
|
|
}
|
|
}
|