You are here

Home » API reference » Password Strength 7

password.css in Password Strength 7

Same filename and directory in other branches
  1. 6.2 css/password.css
/* Widen the core password field so the strength message fits underneath. */
input.password-confirm, input.password-field {
    width: 20em;
}

.password-strength-check { position: relative;}
.password-strength-message-strength,
.password-strength-message-requirements,
.password-strength-message-flaws {font-size: 12px;}

/* Bar */
.password-strength-strength-bar { position: absolute; top: 0; z-index: 100; }
.password-strength-strength-bar .bar,
.password-strength-strength-bar .value { height: 3px; }
.password-strength-strength-bar .bar { position: relative; background-color: #e9e9e9; overflow: hidden; }
.password-strength-strength-bar .value {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  background-color: transparent;

  -webkit-transition: width 0.75s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.2s linear, background-color 0.75s linear;
     -moz-transition: width 0.75s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.2s linear, background-color 0.75s linear;
      -ms-transition: width 0.75s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.2s linear, background-color 0.75s linear;
       -o-transition: width 0.75s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.2s linear, background-color 0.75s linear;
          transition: width 0.75s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.2s linear, background-color 0.75s linear;
}

/* Message: Strength */
.password-strength-message-strength { margin-bottom: 9px; }
.password-strength-message-strength .name { float: left; }
.password-strength-message-strength .value { float: right; text-transform: capitalize; font-weight: bold; text-align: right; padding-left: 25px; }
.password-strength-message-strength .check-mark { background: url("../images/check.png") no-repeat top left; }

/* Message: Requirements */
.password-strength-message-requirements .value { text-transform: capitalize; font-weight: bold; }

/* Message: Flaws */
.password-strength-message-flaws ul li { line-height: 18px; }

/* Colors! */
.password-strength-check .bg-score-0 { background-color: #FD5C56; }
.password-strength-check .bg-score-1 { background-color: #FD5C56; }
.password-strength-check .bg-score-2 { background-color: #F59500; }
.password-strength-check .bg-score-3 { background-color: #90B70E; }
.password-strength-check .bg-score-4 { background-color: #90B70E; }
.password-strength-check .text-score-0 { color: #FD5C56; }
.password-strength-check .text-score-1 { color: #FD5C56; }
.password-strength-check .text-score-2 { color: #F59500; }
.password-strength-check .text-score-3 { color: #90B70E; }
.password-strength-check .text-score-4 { color: #90B70E; }

/* Registration page */
#user-register-form .password-strength-check { color: #bababa; }
#user-register-form .password-strength-message-flaws .hint { cursor: pointer; color: #fff; }

File

css/password.css
View source 
  1. /* Widen the core password field so the strength message fits underneath. */

  2. input.password-confirm, input.password-field {

  3.     width: 20em;

  4. }

  5. 

  6. .password-strength-check { position: relative;}

  7. .password-strength-message-strength,

  8. .password-strength-message-requirements,

  9. .password-strength-message-flaws {font-size: 12px;}

  10. 

  11. /* Bar */

  12. .password-strength-strength-bar { position: absolute; top: 0; z-index: 100; }

  13. .password-strength-strength-bar .bar,

  14. .password-strength-strength-bar .value { height: 3px; }

  15. .password-strength-strength-bar .bar { position: relative; background-color: #e9e9e9; overflow: hidden; }

  16. .password-strength-strength-bar .value {

  17.   position: absolute;

  18.   top: 0;

  19.   left: 0;

  20.   width: 0;

  21.   background-color: transparent;

  22. 

  23.   -webkit-transition: width 0.75s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.2s linear, background-color 0.75s linear;

  24.      -moz-transition: width 0.75s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.2s linear, background-color 0.75s linear;

  25.       -ms-transition: width 0.75s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.2s linear, background-color 0.75s linear;

  26.        -o-transition: width 0.75s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.2s linear, background-color 0.75s linear;

  27.           transition: width 0.75s cubic-bezier(0.785, 0.135, 0.15, 0.86), opacity 0.2s linear, background-color 0.75s linear;

  28. }

  29. 

  30. /* Message: Strength */

  31. .password-strength-message-strength { margin-bottom: 9px; }

  32. .password-strength-message-strength .name { float: left; }

  33. .password-strength-message-strength .value { float: right; text-transform: capitalize; font-weight: bold; text-align: right; padding-left: 25px; }

  34. .password-strength-message-strength .check-mark { background: url("../images/check.png") no-repeat top left; }

  35. 

  36. /* Message: Requirements */

  37. .password-strength-message-requirements .value { text-transform: capitalize; font-weight: bold; }

  38. 

  39. /* Message: Flaws */

  40. .password-strength-message-flaws ul li { line-height: 18px; }

  41. 

  42. /* Colors! */

  43. .password-strength-check .bg-score-0 { background-color: #FD5C56; }

  44. .password-strength-check .bg-score-1 { background-color: #FD5C56; }

  45. .password-strength-check .bg-score-2 { background-color: #F59500; }

  46. .password-strength-check .bg-score-3 { background-color: #90B70E; }

  47. .password-strength-check .bg-score-4 { background-color: #90B70E; }

  48. .password-strength-check .text-score-0 { color: #FD5C56; }

  49. .password-strength-check .text-score-1 { color: #FD5C56; }

  50. .password-strength-check .text-score-2 { color: #F59500; }

  51. .password-strength-check .text-score-3 { color: #90B70E; }

  52. .password-strength-check .text-score-4 { color: #90B70E; }

  53. 

  54. /* Registration page */

  55. #user-register-form .password-strength-check { color: #bababa; }

  56. #user-register-form .password-strength-message-flaws .hint { cursor: pointer; color: #fff; }