styles.css 1.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. body {
  2. font-family: Arial, sans-serif;
  3. display: flex;
  4. flex-direction: column;
  5. align-items: center;
  6. height: 100vh;
  7. margin: 0;
  8. background-color: #f7f7f7;
  9. }
  10. .back-button {
  11. align-self: flex-start;
  12. margin: 20px;
  13. }
  14. .back-button button {
  15. padding: 10px 20px;
  16. border: none;
  17. background-color: #007bff;
  18. color: #fff;
  19. border-radius: 5px;
  20. cursor: pointer;
  21. }
  22. .upload-container {
  23. text-align: center;
  24. border: 2px dashed #007bff;
  25. padding: 20px;
  26. border-radius: 10px;
  27. background-color: #fff;
  28. box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  29. }
  30. .drop-zone {
  31. border: 2px dashed #007bff;
  32. border-radius: 10px;
  33. padding: 20px;
  34. margin-top: 10px;
  35. cursor: pointer;
  36. background-color: #f9f9f9;
  37. }
  38. .drop-zone.dragover {
  39. background-color: #e2eefd;
  40. }
  41. button {
  42. margin-top: 20px;
  43. padding: 10px 20px;
  44. border: none;
  45. background-color: #007bff;
  46. color: #fff;
  47. border-radius: 5px;
  48. cursor: pointer;
  49. }
  50. button:disabled {
  51. background-color: #cccccc;
  52. }
  53. #status {
  54. margin-top: 20px;
  55. color: red;
  56. }
  57. @media (max-width: 600px) {
  58. .upload-container {
  59. width: 90%;
  60. }
  61. .back-button {
  62. margin: 10px;
  63. }
  64. .back-button button {
  65. padding: 8px 16px;
  66. }
  67. }