Advertisement
TomaszKula

globals.css

Oct 19th, 2023
9
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.66 KB | None | 0 0
  1. @tailwind base;
  2. @tailwind components;
  3. @tailwind utilities;
  4.  
  5. @import url("../styles/theme.css");
  6.  
  7. body {
  8. font-family: "Inter", sans-serif;
  9. }
  10.  
  11. @layer utilities {
  12. .flex-center {
  13. @apply flex justify-center items-center;
  14. }
  15.  
  16. .flex-between {
  17. @apply flex justify-between items-center;
  18. }
  19.  
  20. .flex-start {
  21. @apply flex justify-start items-center;
  22. }
  23.  
  24. .card-wrapper {
  25. @apply bg-light-900 dark:dark-gradient shadow-light-100 dark:shadow-dark-100;
  26. }
  27.  
  28. .btn {
  29. @apply bg-light-800 dark:bg-dark-300 !important;
  30. }
  31.  
  32. .btn-secondary {
  33. @apply bg-light-800 dark:bg-dark-400 !important;
  34. }
  35.  
  36. .btn-tertiary {
  37. @apply bg-light-700 dark:bg-dark-300 !important;
  38. }
  39.  
  40. .markdown {
  41. @apply max-w-full prose dark:prose-p:text-light-700 dark:prose-ol:text-light-700 dark:prose-ul:text-light-500 dark:prose-strong:text-white dark:prose-headings:text-white prose-headings:text-dark-400 prose-h1:text-dark-300 prose-h2:text-dark-300 prose-p:text-dark-500 prose-ul:text-dark-500 prose-ol:text-dark-500;
  42. }
  43.  
  44. .primary-gradient {
  45. background: linear-gradient(129deg, #ff7000 0%, #e2995f 100%);
  46. }
  47.  
  48. .dark-gradient {
  49. background: linear-gradient(
  50. 232deg,
  51. rgba(23, 28, 35, 0.41) 0%,
  52. rgba(19, 22, 28, 0.7) 100%
  53. );
  54. }
  55.  
  56. .tab {
  57. @apply min-h-full dark:bg-dark-400 bg-light-800 text-light-500 dark:data-[state=active]:bg-dark-300 data-[state=active]:bg-primary-100 data-[state=active]:text-primary-500 !important;
  58. }
  59. }
  60.  
  61. .no-focus {
  62. @apply focus-visible:ring-0 focus-visible:ring-transparent focus-visible:ring-offset-0 !important;
  63. }
  64.  
  65. .active-theme {
  66. filter: invert(53%) sepia(98%) saturate(3332%) hue-rotate(0deg)
  67. brightness(104%) contrast(106%) !important;
  68. }
  69.  
  70. .light-gradient {
  71. background: linear-gradient(
  72. 132deg,
  73. rgba(247, 249, 255, 0.5) 0%,
  74. rgba(229, 237, 255, 0.25) 100%
  75. );
  76. }
  77.  
  78. .primary-text-gradient {
  79. background: linear-gradient(129deg, #ff7000 0%, #e2995f 100%);
  80. background-clip: text;
  81. -webkit-background-clip: text;
  82. -webkit-text-fill-color: transparent;
  83. }
  84.  
  85. .custom-scrollbar::-webkit-scrollbar {
  86. width: 3px;
  87. height: 3px;
  88. border-radius: 2px;
  89. }
  90.  
  91. .custom-scrollbar::-webkit-scrollbar-track {
  92. background: #ffffff;
  93. }
  94.  
  95. .custom-scrollbar::-webkit-scrollbar-thumb {
  96. background: #888;
  97. border-radius: 50px;
  98. }
  99.  
  100. .custom-scrollbar::-webkit-scrollbar-thumb:hover {
  101. background: #555;
  102. }
  103.  
  104. /* Markdown Start */
  105. .markdown a {
  106. color: #1da1f2;
  107. }
  108.  
  109. .markdown a,
  110. code {
  111. /* These are technically the same, but use both */
  112. overflow-wrap: break-word;
  113. word-wrap: break-word;
  114.  
  115. -ms-word-break: break-all;
  116. /* This is the dangerous one in WebKit, as it breaks things wherever */
  117. word-break: break-all;
  118. /* Instead use this non-standard one: */
  119. word-break: break-word;
  120.  
  121. /* Adds a hyphen where the word breaks, if supported (No Blink) */
  122. -ms-hyphens: auto;
  123. -moz-hyphens: auto;
  124. -webkit-hyphens: auto;
  125. hyphens: auto;
  126.  
  127. padding: 2px;
  128. color: #ff7000 !important;
  129. }
  130.  
  131. .markdown pre {
  132. display: grid;
  133. width: 100%;
  134. }
  135.  
  136. .markdown pre code {
  137. width: 100%;
  138. display: block;
  139. overflow-x: auto;
  140.  
  141. color: inherit !important;
  142. }
  143. /* Markdown End */
  144.  
  145. /* Clerk */
  146. .cl-internal-b3fm6y {
  147. background: linear-gradient(129deg, #ff7000 0%, #e2995f 100%) !important;
  148. }
  149.  
  150. .hash-span {
  151. margin-top: -140px;
  152. padding-bottom: 140px;
  153. display: block;
  154. }
  155.  
  156. /* Hide scrollbar for Chrome, Safari and Opera */
  157. .no-scrollbar::-webkit-scrollbar {
  158. display: none;
  159. }
  160.  
  161. /* Hide scrollbar for IE, Edge and Firefox */
  162. .no-scrollbar {
  163. -ms-overflow-style: none; /* IE and Edge */
  164. scrollbar-width: none; /* Firefox */
  165. }
  166.  
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement