tabs.css 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. .sphinx-tabs {
  2. margin-bottom: 1rem;
  3. }
  4. [role="tablist"] {
  5. border-bottom: 1px solid #a0b3bf;
  6. }
  7. .sphinx-tabs-tab {
  8. position: relative;
  9. font-family: Lato,'Helvetica Neue',Arial,Helvetica,sans-serif;
  10. color: #1D5C87;
  11. line-height: 24px;
  12. margin: 0;
  13. font-size: 16px;
  14. font-weight: 400;
  15. background-color: rgba(255, 255, 255, 0);
  16. border-radius: 5px 5px 0 0;
  17. border: 0;
  18. padding: 1rem 1.5rem;
  19. margin-bottom: 0;
  20. }
  21. .sphinx-tabs-tab[aria-selected="true"] {
  22. font-weight: 700;
  23. border: 1px solid #a0b3bf;
  24. border-bottom: 1px solid white;
  25. margin: -1px;
  26. background-color: white;
  27. }
  28. .sphinx-tabs-tab:focus {
  29. z-index: 1;
  30. outline-offset: 1px;
  31. }
  32. .sphinx-tabs-panel {
  33. position: relative;
  34. padding: 1rem;
  35. border: 1px solid #a0b3bf;
  36. margin: 0px -1px -1px -1px;
  37. border-radius: 0 0 5px 5px;
  38. border-top: 0;
  39. background: white;
  40. }
  41. .sphinx-tabs-panel.code-tab {
  42. padding: 0.4rem;
  43. }
  44. .sphinx-tab img {
  45. margin-bottom: 24 px;
  46. }
  47. /* Dark theme preference styling */
  48. @media (prefers-color-scheme: dark) {
  49. body[data-theme="auto"] .sphinx-tabs-panel {
  50. color: white;
  51. background-color: rgb(50, 50, 50);
  52. }
  53. body[data-theme="auto"] .sphinx-tabs-tab {
  54. color: white;
  55. background-color: rgba(255, 255, 255, 0.05);
  56. }
  57. body[data-theme="auto"] .sphinx-tabs-tab[aria-selected="true"] {
  58. border-bottom: 1px solid rgb(50, 50, 50);
  59. background-color: rgb(50, 50, 50);
  60. }
  61. }
  62. /* Explicit dark theme styling */
  63. body[data-theme="dark"] .sphinx-tabs-panel {
  64. color: white;
  65. background-color: rgb(50, 50, 50);
  66. }
  67. body[data-theme="dark"] .sphinx-tabs-tab {
  68. color: white;
  69. background-color: rgba(255, 255, 255, 0.05);
  70. }
  71. body[data-theme="dark"] .sphinx-tabs-tab[aria-selected="true"] {
  72. border-bottom: 2px solid rgb(50, 50, 50);
  73. background-color: rgb(50, 50, 50);
  74. }