trix.css 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465
  1. @custom-variant active {
  2. &:where(&:active, [data-trix-active]) {
  3. @slot;
  4. }
  5. }
  6. .trix-content {
  7. @apply prose leading-[1.5];
  8. @apply prose-h1:text-xl prose-h1:mt-0 prose-h1:mb-2;
  9. @apply prose-p:mt-0 prose-p:mb-2;
  10. @apply prose-a:underline;
  11. @apply prose-blockquote:mt-0 prose-blockquote:mb-2;
  12. @apply prose-pre:mt-0 prose-pre:mb-2;
  13. @apply prose-ol:mt-0 prose-ol:mb-2;
  14. @apply prose-ul:mt-0 prose-ul:mb-2;
  15. @apply prose-li:my-0;
  16. & :is(div, p) + h1 {
  17. @apply mt-4;
  18. }
  19. & :first-child {
  20. @apply mt-0;
  21. }
  22. & :last-child {
  23. @apply mb-0;
  24. }
  25. --tw-prose-body: var(--p-text-color);
  26. --tw-prose-headings: var(--p-primary-color);
  27. --tw-prose-lead: var(--p-primary-color);
  28. --tw-prose-links: var(--p-primary-color);
  29. --tw-prose-bold: var(--p-text-hover-color);
  30. --tw-prose-counters: var(--p-text-color);
  31. --tw-prose-bullets: var(--p-primary-color);
  32. --tw-prose-hr: var(--p-text-muted-color);
  33. --tw-prose-quotes: var(--p-text-color);
  34. --tw-prose-quote-borders: var(--p-primary-color);
  35. --tw-prose-captions: var(--p-text-hover-color);
  36. --tw-prose-code: var(--p-text-muted-color);
  37. --tw-prose-pre-code: var(--p-content-hover-color);
  38. --tw-prose-pre-bg: var(--p-content-hover-background);
  39. --tw-prose-th-borders: var(--p-content-border-color);
  40. --tw-prose-td-borders: var(--p-content-border-color);
  41. /*
  42. --tw-prose-invert-body: var(--color-pink-200);
  43. --tw-prose-invert-headings: var(--color-white);
  44. --tw-prose-invert-lead: var(--color-pink-300);
  45. --tw-prose-invert-links: var(--color-white);
  46. --tw-prose-invert-bold: var(--color-white);
  47. --tw-prose-invert-counters: var(--color-pink-400);
  48. --tw-prose-invert-bullets: var(--color-pink-600);
  49. --tw-prose-invert-hr: var(--color-pink-700);
  50. --tw-prose-invert-quotes: var(--color-pink-100);
  51. --tw-prose-invert-quote-borders: var(--color-pink-700);
  52. --tw-prose-invert-captions: var(--color-pink-400);
  53. --tw-prose-invert-code: var(--color-white);
  54. --tw-prose-invert-pre-code: var(--color-pink-300);
  55. --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  56. --tw-prose-invert-th-borders: var(--color-pink-600);
  57. --tw-prose-invert-td-borders: var(--color-pink-700);
  58. */
  59. }