
| Current Path : /var/www/html1/testsite/web/core/themes/claro/css/components/ |
Linux ift1.ift-informatik.de 5.4.0-216-generic #236-Ubuntu SMP Fri Apr 11 19:53:21 UTC 2025 x86_64 |
| Current File : /var/www/html1/testsite/web/core/themes/claro/css/components/form--password-confirm.css |
/*
* DO NOT EDIT THIS FILE.
* See the following change record for more information,
* https://www.drupal.org/node/2815083
* @preserve
*/
/**
* @file
* Visual styles for the Password widgets.
*/
:root {
/* Weak */
/* Fair */
/* Good */
/* Strong */
}
/**
* Password confirm widget styles.
*/
.password-confirm {
max-width: 25rem;
}
.password-confirm__password {
margin-bottom: 0;
}
.password-confirm__confirm {
margin-bottom: 0;
}
.js .password-confirm__confirm {
max-height: 10rem;
transition: max-height 0.2s ease-in-out, margin 0.2s ease-in-out;
}
@media screen and (prefers-reduced-motion: reduce) {
.js .password-confirm__confirm {
transition: none;
}
}
/* Password confirm widget states. */
.js .is-initial:not(.form-item--error) .form-item__description {
margin-top: 0;
}
.js .is-initial.is-password-empty.is-confirm-empty:not(.form-item--error) .password-confirm__confirm {
display: none;
max-height: 0;
margin-top: 0;
}
/**
* Password strength
*
* Description and strength indicator for the main input.
*/
.password-strength {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
}
.password-strength__track {
height: calc(0.5rem - 2px);
margin-top: 0.5rem;
margin-bottom: 0.5rem;
border: 1px solid #8e929c;
border-radius: 0.5rem;
background-color: #d4d4d8;
}
.password-strength__track::after {
display: table;
clear: both;
content: "";
}
.password-strength__bar {
min-width: calc(0.5rem - 2px);
height: calc(0.5rem - 2px);
margin: -1px;
transition: width
0.5s
ease-out;
border: 1px solid transparent;
border-radius: 0.5rem;
background-color: transparent;
}
@media screen and (prefers-reduced-motion: reduce) {
.password-strength__bar {
transition: none;
}
}
@media screen and (-ms-high-contrast: active) {
.password-strength__bar {
background-color: windowText;
}
.is-initial .password-strength__bar {
border-color: transparent;
background-color: transparent;
}
}
.password-strength__title {
overflow: hidden;
margin-top: 0.5rem;
margin-bottom: 0.5rem;
color: #545560;
font-size: 0.79rem;
line-height: 1rem;
}
.password-strength__text {
color: #222330;
font-weight: bold;
}
/* Password strength states */
.password-strength__bar.is-weak {
border-color: #d72222;
background-color: #d72222;
}
.password-strength__bar.is-fair {
border-color: #977405;
background-color: #ffd23f;
}
.password-strength__bar.is-good {
border-color: #26a769;
background-color: #26a769;
}
.password-strength__bar.is-strong {
border-color: #26a769;
background-color: #26a769;
}
.is-initial.is-password-empty .password-strength__title {
margin: 0;
line-height: 0;
}
/**
* Password match message.
*
* This is the description-like message on the bottom of the password confirm
* input.
*/
.password-match-message {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
color: #545560;
font-size: 0.79rem;
}
.password-match-message__text {
color: #222330;
font-weight: bold;
}
.is-confirm-empty .password-match-message {
visibility: hidden;
}
/**
* Password suggestions.
*
* Tips for improving the password.
*/
.password-suggestions {
margin-top: 0.5rem;
margin-bottom: 0.5rem;
padding: 1rem;
color: #545560;
border: 1px solid #d4d4d8;
border-radius: 2px;
background-color: #fff;
box-shadow: 0
2px
4px
rgba(0, 0, 0, 0.1);
font-size: 0.79rem;
}
.password-suggestions__tips {
margin: 0.5rem 0 0 1.5rem; /* LTR */
}
[dir="rtl"] .password-suggestions__tips {
margin-right: 1.5rem;
margin-left: 0;
}