login.css 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137
  1. * {
  2. margin: 0;
  3. padding: 0;
  4. box-sizing: border-box;
  5. }
  6. body {
  7. font-family:
  8. -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  9. background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  10. min-height: 100vh;
  11. display: flex;
  12. align-items: center;
  13. justify-content: center;
  14. padding: 20px;
  15. }
  16. .login-container {
  17. background: white;
  18. border-radius: 10px;
  19. box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  20. padding: 40px;
  21. width: 100%;
  22. max-width: 400px;
  23. animation: slideDown 0.3s;
  24. }
  25. @keyframes slideDown {
  26. from {
  27. transform: translateY(-50px);
  28. opacity: 0;
  29. }
  30. to {
  31. transform: translateY(0);
  32. opacity: 1;
  33. }
  34. }
  35. .login-header {
  36. text-align: center;
  37. margin-bottom: 30px;
  38. }
  39. .login-header h1 {
  40. color: #333;
  41. font-size: 28px;
  42. margin-bottom: 10px;
  43. }
  44. .login-header p {
  45. color: #6b7280;
  46. font-size: 14px;
  47. }
  48. .form-group {
  49. margin-bottom: 20px;
  50. }
  51. .form-group label {
  52. display: block;
  53. margin-bottom: 8px;
  54. color: #374151;
  55. font-weight: 500;
  56. font-size: 14px;
  57. }
  58. .form-group input {
  59. width: 100%;
  60. padding: 12px;
  61. border: 1px solid #d1d5db;
  62. border-radius: 5px;
  63. font-size: 14px;
  64. transition: all 0.3s;
  65. }
  66. .form-group input:focus {
  67. outline: none;
  68. border-color: #667eea;
  69. box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
  70. }
  71. .btn {
  72. width: 100%;
  73. padding: 12px;
  74. border: none;
  75. border-radius: 5px;
  76. font-size: 16px;
  77. font-weight: 500;
  78. cursor: pointer;
  79. transition: all 0.3s;
  80. }
  81. .btn-primary {
  82. background: #667eea;
  83. color: white;
  84. }
  85. .btn-primary:hover {
  86. background: #5568d3;
  87. transform: translateY(-2px);
  88. box-shadow: 0 4px 8px rgba(102, 126, 234, 0.3);
  89. }
  90. .btn-primary:active {
  91. transform: translateY(0);
  92. }
  93. .btn-primary:disabled {
  94. background: #9ca3af;
  95. cursor: not-allowed;
  96. transform: none;
  97. }
  98. .error-message {
  99. background: #fee2e2;
  100. color: #dc2626;
  101. padding: 12px;
  102. border-radius: 5px;
  103. margin-bottom: 20px;
  104. font-size: 14px;
  105. display: none;
  106. }
  107. .error-message.show {
  108. display: block;
  109. }
  110. .loading {
  111. display: none;
  112. text-align: center;
  113. color: #6b7280;
  114. margin-top: 10px;
  115. }
  116. .loading.show {
  117. display: block;
  118. }