styles.css 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105
  1. /* home */
  2. :root {
  3. --vp-home-hero-name-color: transparent;
  4. --vp-home-hero-name-background: -webkit-linear-gradient(120deg, #42d392 30%, #41d1ff);
  5. --vp-home-hero-image-background-image: linear-gradient(-45deg, #4acf93 50%, #c3edda 50%);
  6. --vp-home-hero-image-filter: blur(44px);
  7. }
  8. @media (min-width: 640px) {
  9. :root {
  10. --vp-home-hero-image-filter: blur(56px);
  11. }
  12. .VPHero .text {
  13. max-width: 600px;
  14. }
  15. }
  16. @media (min-width: 960px) {
  17. :root {
  18. --vp-home-hero-image-filter: blur(68px);
  19. }
  20. }
  21. /* button */
  22. :root {
  23. --vp-button-brand-border: transparent;
  24. --vp-button-brand-text: var(--vp-c-white);
  25. --vp-button-brand-bg: var(--vp-c-brand-3);
  26. --vp-button-brand-hover-border: transparent;
  27. --vp-button-brand-hover-text: var(--vp-c-black);
  28. --vp-button-brand-hover-bg: var(--vp-c-brand-2);
  29. --vp-button-brand-active-border: transparent;
  30. --vp-button-brand-active-text: var(--vp-c-black);
  31. --vp-button-brand-active-bg: var(--vp-c-brand-1);
  32. }
  33. :root {
  34. .VPButton.big,
  35. .VPButton.alt,
  36. .VPButton.medium,
  37. .VPButton.brand {
  38. border-radius: 8px;
  39. }
  40. }
  41. /* colors */
  42. :root {
  43. --vp-c-default-1: var(--vp-c-gray-1);
  44. --vp-c-default-2: var(--vp-c-gray-2);
  45. --vp-c-default-3: var(--vp-c-gray-3);
  46. --vp-c-default-soft: var(--vp-c-gray-soft);
  47. --vp-c-brand-1: #4acf93;
  48. --vp-c-brand-2: #42d392;
  49. --vp-c-brand-3: #42b883;
  50. --vp-c-brand-soft: var(--vp-c-indigo-soft);
  51. --vp-c-tip-1: var(--vp-c-brand-1);
  52. --vp-c-tip-2: var(--vp-c-brand-2);
  53. --vp-c-tip-3: var(--vp-c-brand-3);
  54. --vp-c-tip-soft: var(--vp-c-brand-soft);
  55. --vp-c-warning-1: var(--vp-c-yellow-1);
  56. --vp-c-warning-2: var(--vp-c-yellow-2);
  57. --vp-c-warning-3: var(--vp-c-yellow-3);
  58. --vp-c-warning-soft: var(--vp-c-yellow-soft);
  59. --vp-c-danger-1: var(--vp-c-red-1);
  60. --vp-c-danger-2: var(--vp-c-red-2);
  61. --vp-c-danger-3: var(--vp-c-red-3);
  62. --vp-c-danger-soft: var(--vp-c-red-soft);
  63. }
  64. /* custom block */
  65. :root {
  66. --vp-custom-block-tip-border: transparent;
  67. --vp-custom-block-tip-text: var(--vp-c-text-1);
  68. --vp-custom-block-tip-bg: var(--vp-c-brand-soft);
  69. --vp-custom-block-tip-code-bg: var(--vp-c-brand-soft);
  70. }
  71. /* algolia */
  72. .DocSearch {
  73. --docsearch-primary-color: var(--vp-c-brand-1) !important;
  74. }
  75. /* sidebar */
  76. :root {
  77. --vp-sidebar-width: 300px;
  78. --vp-sidebar-bg-color: var(--vp-c-bg-alt);
  79. }
  80. /* Mobile only ads */
  81. @media (min-width: 1280px) {
  82. .mobile-only-ads {
  83. display: none;
  84. }
  85. }
  86. /* Hide right sidebar carbon ads on post pages */
  87. body.is-post .VPDocAside .VPDocAsideCarbonAds,
  88. body.is-post .VPDocAside .VPCarbonAds {
  89. display: none !important;
  90. }