appointments.css 1.4 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273
  1. :root {
  2. --primary-color: #ff6b6b;
  3. --edit-link-color: #54ccac;
  4. --share-link-color: #7ccc54;
  5. --participants-link-color: #cc54c6;
  6. --hover-color: #5750d9;
  7. --dark-hover-color: #e05555;
  8. }
  9. .content {
  10. box-sizing: border-box;
  11. }
  12. .container {
  13. width: 90%;
  14. max-width: 1200px;
  15. padding: 20px;
  16. border-radius: 10px;
  17. overflow-x: auto; /* Ensure content is scrollable on smaller screens */
  18. }
  19. /* Modern A-Tag Styling */
  20. td a {
  21. text-decoration: none;
  22. padding: 8px 12px;
  23. border-radius: 4px;
  24. color: white;
  25. font-size: 14px;
  26. transition: background-color 0.3s ease, transform 0.2s ease;
  27. }
  28. td a.edit-link {
  29. background-color: var(--edit-link-color);
  30. }
  31. td a.share-link {
  32. background-color: var(--share-link-color);
  33. }
  34. td a.participants-link {
  35. background-color: var(--participants-link-color);
  36. }
  37. td a:hover {
  38. background-color: var(--hover-color);
  39. transform: translateY(-2px);
  40. }
  41. /* Modern Button Styling */
  42. td button {
  43. padding: 8px 12px;
  44. border: none;
  45. border-radius: 4px;
  46. font-size: 14px;
  47. color: white;
  48. background-color: var(--primary-color);
  49. cursor: pointer;
  50. transition: background-color 0.3s ease, transform 0.2s ease;
  51. }
  52. td button:hover {
  53. background-color: var(--dark-hover-color);
  54. transform: translateY(-2px);
  55. }
  56. h2 {
  57. margin-bottom: 20px;
  58. }
  59. /* Ensure table stays scrollable on smaller screens */
  60. .container {
  61. overflow-x: auto;
  62. }