strengthify.css 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
  1. /**
  2. * Strengthify - show the weakness of a password (uses zxcvbn for this)
  3. * https://github.com/MorrisJobke/strengthify
  4. * Version: 0.5.2
  5. * License: The MIT License (MIT)
  6. * Copyright (c) 2013-2016 Morris Jobke <morris.jobke@gmail.com>
  7. */
  8. .strengthify-wrapper {
  9. position: relative;
  10. }
  11. .strengthify-wrapper > * {
  12. -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  13. filter: alpha(opacity=0);
  14. opacity: 0;
  15. -webkit-transition:all .5s ease-in-out;
  16. -moz-transition:all .5s ease-in-out;
  17. transition:all .5s ease-in-out;
  18. }
  19. .strengthify-bg, .strengthify-container, .strengthify-separator {
  20. height: 3px;
  21. }
  22. .strengthify-bg, .strengthify-container {
  23. display: block;
  24. position: absolute;
  25. width: 100%;
  26. }
  27. .strengthify-bg {
  28. background-color: #BBB;
  29. }
  30. .strengthify-separator {
  31. display: inline-block;
  32. position: absolute;
  33. background-color: #FFF;
  34. width: 1px;
  35. z-index: 10;
  36. }
  37. .password-bad {
  38. background-color: #C33;
  39. }
  40. .password-medium {
  41. background-color: #F80;
  42. }
  43. .password-good {
  44. background-color: #3C3;
  45. }
  46. div[data-strengthifyMessage] {
  47. padding: 3px 8px;
  48. }
  49. .strengthify-tiles{
  50. float: right;
  51. }