auth.css 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. /* General Reset */
  2. * {
  3. margin: 0;
  4. padding: 0;
  5. box-sizing: border-box;
  6. font-family: Arial, sans-serif;
  7. }
  8. body {
  9. display: grid;
  10. place-items: center;
  11. min-height: 100vh;
  12. background-color: #f4f4f9;
  13. margin: 0;
  14. }
  15. .container {
  16. background: white;
  17. padding: 20px;
  18. border-radius: 8px;
  19. box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  20. width: 100%;
  21. max-width: 400px;
  22. display: grid;
  23. grid-template-rows: auto 1fr;
  24. gap: 20px;
  25. }
  26. .form {
  27. display: grid;
  28. grid-template-rows: repeat(4, auto);
  29. gap: 15px;
  30. }
  31. h2 {
  32. text-align: center;
  33. color: #333;
  34. margin-bottom: 10px;
  35. }
  36. .input-group {
  37. display: grid;
  38. grid-template-rows: auto auto;
  39. gap: 10px;
  40. margin-top: 10px;
  41. }
  42. .input-group label {
  43. font-size: 14px;
  44. color: #555;
  45. }
  46. .input-group input {
  47. padding: 10px;
  48. border: 1px solid #ccc;
  49. border-radius: 4px;
  50. font-size: 14px;
  51. transition: border-color 0.3s;
  52. }
  53. .input-group input:focus {
  54. border-color: #6c63ff;
  55. outline: none;
  56. }
  57. button {
  58. margin-top: 40px;
  59. padding: 10px;
  60. border: none;
  61. background: #6c63ff;
  62. color: white;
  63. font-size: 16px;
  64. cursor: pointer;
  65. border-radius: 4px;
  66. transition: background 0.3s;
  67. }
  68. button:hover {
  69. background: #5750d9;
  70. }
  71. #btn-register {
  72. background: #e0e0e0;
  73. color: #333;
  74. margin-top: -10px; /* Adjust spacing between buttons */
  75. }
  76. #btn-register:hover {
  77. background: #cacaca;
  78. }
  79. #login-error {
  80. margin-top: 10px;
  81. color: red;
  82. }