settingsTabs.css 1.0 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667
  1. /* Settings Tabs Styles */
  2. .settings-tabs {
  3. margin-bottom: 20px;
  4. border-bottom: 1px solid #e0e0e0;
  5. }
  6. .tab-nav {
  7. list-style: none;
  8. margin: 0;
  9. padding: 0;
  10. display: flex;
  11. flex-wrap: wrap;
  12. }
  13. .tab-nav li {
  14. margin: 0;
  15. padding: 0;
  16. }
  17. .tab-nav li a {
  18. display: block;
  19. padding: 12px 20px;
  20. text-decoration: none;
  21. color: #666;
  22. border-bottom: 3px solid transparent;
  23. transition: all 0.3s ease;
  24. font-weight: 500;
  25. }
  26. .tab-nav li a:hover {
  27. color: #333;
  28. background-color: #f5f5f5;
  29. }
  30. .tab-nav li.active a {
  31. color: #2196F3;
  32. border-bottom-color: #2196F3;
  33. background-color: #f8f9fa;
  34. }
  35. .tab-nav li a i {
  36. margin-right: 8px;
  37. width: 16px;
  38. text-align: center;
  39. }
  40. .tab-content {
  41. padding: 20px 0;
  42. min-height: 400px;
  43. }
  44. /* Responsive design */
  45. @media (max-width: 768px) {
  46. .tab-nav {
  47. flex-direction: column;
  48. }
  49. .tab-nav li a {
  50. border-bottom: 1px solid #e0e0e0;
  51. border-right: none;
  52. }
  53. .tab-nav li.active a {
  54. border-bottom-color: #2196F3;
  55. border-right: 3px solid #2196F3;
  56. }
  57. }