user.css 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. /**
  2. * @file
  3. * Theme styling for user module.
  4. */
  5. /* Visual styling for the Password strength indicator */
  6. .password-strength__meter {
  7. margin-top: 0.5em;
  8. background-color: #ebeae4;
  9. }
  10. .password-strength__indicator {
  11. background-color: #77b259;
  12. -webkit-transition: width 0.5s ease-out;
  13. transition: width 0.5s ease-out;
  14. }
  15. .password-strength__indicator.is-weak {
  16. background-color: #e62600;
  17. }
  18. .password-strength__indicator.is-fair {
  19. background-color: #e09600;
  20. }
  21. .password-strength__indicator.is-good {
  22. background-color: #0074bd;
  23. }
  24. .password-strength__indicator.is-strong {
  25. background-color: #77b259;
  26. }
  27. .password-confirm,
  28. .password-field,
  29. .password-strength,
  30. .password-confirm-match {
  31. width: 55%;
  32. }
  33. .password-suggestions {
  34. padding: 0.2em 0.5em;
  35. margin: 0.7em 0;
  36. max-width: 34.7em;
  37. border: 1px solid #b4b4b4;
  38. }
  39. .password-suggestions ul {
  40. margin-bottom: 0;
  41. }
  42. .confirm-parent,
  43. .password-parent {
  44. clear: left; /* LTR */
  45. margin: 0;
  46. max-width: 33em;
  47. overflow: hidden;
  48. }
  49. [dir="rtl"] .confirm-parent,
  50. [dir="rtl"] .password-parent {
  51. clear: right;
  52. }
  53. /* Styling for the status indicator of the passwords match test. */
  54. .password-confirm .ok {
  55. color: #325e1c;
  56. font-weight: bold;
  57. }
  58. .password-confirm .error {
  59. color: #a51b00;
  60. font-weight: bold;
  61. }