cohost-blogger/src/prose.scss

.prose {
  color: var(--tw-prose-body);
}
.prose :where(p) {
  margin-top: 1.25em;
  margin-bottom: 1.25em;
}
.prose :where([class~="lead"]) {
  color: var(--tw-prose-lead);
  font-size: 1.25em;
  line-height: 1.6;
  margin-top: 1.2em;
  margin-bottom: 1.2em;
}
.prose :where(strong) {
  color: var(--tw-prose-bold);
  font-weight: 600;
}
.prose :where(a strong) {
  color: inherit;
}
.prose :where(blockquote strong) {
  color: inherit;
}
.prose :where(thead th strong) {
  color: inherit;
}
.prose :where(ol) {
  list-style-type: decimal;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol[type="A"]) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a"]) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="A" s]) {
  list-style-type: upper-alpha;
}
.prose :where(ol[type="a" s]) {
  list-style-type: lower-alpha;
}
.prose :where(ol[type="I"]) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i"]) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="I" s]) {
  list-style-type: upper-roman;
}
.prose :where(ol[type="i" s]) {
  list-style-type: lower-roman;
}
.prose :where(ol[type="1"]) {
  list-style-type: decimal;
}
.prose :where(ul) {
  list-style-type: disc;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  padding-left: 1.625em;
}
.prose :where(ol > li) ::marker{
  font-weight: 400;
  color: var(--tw-prose-counters);
}
.prose :where(ul > li) ::marker{
  color: var(--tw-prose-bullets);
}
.prose :where(hr) {
  border-color: var(--tw-prose-hr);
  border-top-width: 1px;
  margin-top: 3em;
  margin-bottom: 3em;
}
.prose :where(blockquote) {
  font-weight: 500;
  font-style: italic;
  color: var(--tw-prose-quotes);
  border-left-width: 0.25rem;
  border-left-color: var(--tw-prose-quote-borders);
  quotes: "\201C""\201D""\2018""\2019";
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding-left: 1em;
}
.prose :where(blockquote p:first-of-type)::before {
  content: open-quote;
}
.prose :where(blockquote p:last-of-type)::after {
  content: close-quote;
}
.prose :where(h1) {
  color: var(--tw-prose-headings);
  font-weight: 800;
  font-size: 2.25em;
  margin-top: 0;
  margin-bottom: 0.8888889em;
  line-height: 1.1111111;
}
.prose :where(h1 strong) {
  font-weight: 900;
  color: inherit;
}
.prose :where(h2) {
  color: var(--tw-prose-headings);
  font-weight: 700;
  font-size: 1.5em;
  margin-top: 2em;
  margin-bottom: 1em;
  line-height: 1.3333333;
}
.prose :where(h2 strong) {
  font-weight: 800;
  color: inherit;
}
.prose :where(h3) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  font-size: 1.25em;
  margin-top: 1.6em;
  margin-bottom: 0.6em;
  line-height: 1.6;
}
.prose :where(h3 strong) {
  font-weight: 700;
  color: inherit;
}
.prose :where(h4) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  margin-top: 1.5em;
  margin-bottom: 0.5em;
  line-height: 1.5;
}
.prose :where(h4 strong) {
  font-weight: 700;
  color: inherit;
}
.prose :where(img) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(figure > *) {
  margin-top: 0;
  margin-bottom: 0;
}
.prose :where(figcaption) {
  color: var(--tw-prose-captions);
  font-size: 0.875em;
  line-height: 1.4285714;
  margin-top: 0.8571429em;
}
.prose :where(code) {
  color: var(--tw-prose-code);
  font-weight: 600;
  font-size: 0.875em;
}
.prose :where(code)::before {
  content: "`";
}
.prose :where(code)::after {
  content: "`";
}
.prose :where(a code) {
  color: inherit;
}
.prose :where(h1 code) {
  color: inherit;
}
.prose :where(h2 code) {
  color: inherit;
  font-size: 0.875em;
}
.prose :where(h3 code) {
  color: inherit;
  font-size: 0.9em;
}
.prose :where(h4 code) {
  color: inherit;
}
.prose :where(blockquote code) {
  color: inherit;
}
.prose :where(thead th code) {
  color: inherit;
}
.prose :where(pre code) {
  background-color: transparent;
  border-width: 0;
  border-radius: 0;
  padding: 0;
  font-weight: inherit;
  color: inherit;
  font-size: inherit;
  font-family: inherit;
  line-height: inherit;
}
.prose :where(pre code)::before {
  content: none;
}
.prose :where(pre code)::after {
  content: none;
}
.prose :where(table) {
  width: 100%;
  table-layout: auto;
  text-align: left;
  margin-top: 2em;
  margin-bottom: 2em;
  font-size: 0.875em;
  line-height: 1.7142857;
}
.prose :where(thead) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-th-borders);
}
.prose :where(thead th) {
  color: var(--tw-prose-headings);
  font-weight: 600;
  vertical-align: bottom;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody tr) {
  border-bottom-width: 1px;
  border-bottom-color: var(--tw-prose-td-borders);
}
.prose :where(tbody tr:last-child) {
  border-bottom-width: 0;
}
.prose :where(tbody td) {
  vertical-align: baseline;
}
.prose :where(tfoot) {
  border-top-width: 1px;
  border-top-color: var(--tw-prose-th-borders);
}
.prose :where(tfoot td) {
  vertical-align: top;
}
.prose{
  --tw-prose-body: #374151;
  --tw-prose-headings: #111827;
  --tw-prose-lead: #4b5563;
  --tw-prose-links: #111827;
  --tw-prose-bold: #111827;
  --tw-prose-counters: #6b7280;
  --tw-prose-bullets: #d1d5db;
  --tw-prose-hr: #e5e7eb;
  --tw-prose-quotes: #111827;
  --tw-prose-quote-borders: #e5e7eb;
  --tw-prose-captions: #6b7280;
  --tw-prose-code: #111827;
  --tw-prose-pre-code: #e5e7eb;
  --tw-prose-pre-bg: #1f2937;
  --tw-prose-th-borders: #d1d5db;
  --tw-prose-td-borders: #e5e7eb;
  --tw-prose-invert-body: #d1d5db;
  --tw-prose-invert-headings: #fff;
  --tw-prose-invert-lead: #9ca3af;
  --tw-prose-invert-links: #fff;
  --tw-prose-invert-bold: #fff;
  --tw-prose-invert-counters: #9ca3af;
  --tw-prose-invert-bullets: #4b5563;
  --tw-prose-invert-hr: #374151;
  --tw-prose-invert-quotes: #f3f4f6;
  --tw-prose-invert-quote-borders: #374151;
  --tw-prose-invert-captions: #9ca3af;
  --tw-prose-invert-code: #fff;
  --tw-prose-invert-pre-code: #d1d5db;
  --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
  --tw-prose-invert-th-borders: #4b5563;
  --tw-prose-invert-td-borders: #374151;
  font-size: 1rem;
  line-height: 1.75;
}
.prose :where(video) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(figure) {
  margin-top: 2em;
  margin-bottom: 2em;
}
.prose :where(li) {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.prose :where(ol > li) {
  padding-left: 0.375em;
}
.prose :where(ul > li) {
  padding-left: 0.375em;
}
.prose :where(.prose > ul > li p) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(.prose > ul > li > *:first-child) {
  margin-top: 1.25em;
}
.prose :where(.prose > ul > li > *:last-child) {
  margin-bottom: 1.25em;
}
.prose :where(.prose > ol > li > *:first-child) {
  margin-top: 1.25em;
}
.prose :where(.prose > ol > li > *:last-child) {
  margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol) {
  margin-top: 0.75em;
  margin-bottom: 0.75em;
}
.prose :where(hr + *) {
  margin-top: 0;
}
.prose :where(h2 + *) {
  margin-top: 0;
}
.prose :where(h3 + *) {
  margin-top: 0;
}
.prose :where(h4 + *) {
  margin-top: 0;
}
.prose :where(thead th:first-child) {
  padding-left: 0;
}
.prose :where(thead th:last-child) {
  padding-right: 0;
}
.prose :where(tbody td, tfoot td) {
  padding-top: 0.5714286em;
  padding-right: 0.5714286em;
  padding-bottom: 0.5714286em;
  padding-left: 0.5714286em;
}
.prose :where(tbody td:first-child, tfoot td:first-child) {
  padding-left: 0;
}
.prose :where(tbody td:last-child, tfoot td:last-child) {
  padding-right: 0;
}
.prose :where(.prose > :first-child) {
  margin-top: 0;
}
.prose :where(.prose > :last-child) {
  margin-bottom: 0;
}

@media (prefers-color-scheme: dark){
  .prose{
    color: #f9fafb;
  }
  .prose :where([class~="lead"]) {
    color: #9ca3af;
  }
  .prose :where(figcaption) {
    color: #9ca3af;
  }
  .prose :where(strong) {
    color: #f3f4f6;
  }
  .prose :where(ul > li)::before {
    background-color: #374151;
  }
  .prose :where(hr) {
    border-color: #1f2937;
  }
  .prose :where(blockquote) {
    color: #f3f4f6;
    border-left-color: #1f2937;
  }
  .prose :where(h1) {
    color: #f3f4f6;
  }
  .prose :where(h2) {
    color: #f3f4f6;
  }
  .prose :where(h3) {
    color: #f3f4f6;
  }
  .prose :where(h4) {
    color: #f3f4f6;
  }
  .prose :where(thead) {
    color: #f3f4f6;
    border-bottom-color: #374151;
  }
  .prose :where(tbody tr) {
    border-bottom-color: #1f2937;
  }
}

@media (prefers-color-scheme: dark){
  .prose{
    color: #f9fafb;
  }
  .prose :where([class~="lead"]) {
    color: #9ca3af;
  }
  .prose :where(figcaption) {
    color: #9ca3af !important;
  }
  .prose :where(strong) {
    color: #f3f4f6;
  }
  .prose :where(ul > li) ::before{
    background-color: #374151;
  }
  .prose :where(hr) {
    border-color: #1f2937;
  }
  .prose :where(blockquote) {
    color: #f3f4f6;
    border-left-color: #1f2937;
  }
  .prose :where(h1) {
    color: #f3f4f6;
  }
  .prose :where(h2) {
    color: #f3f4f6;
  }
  .prose :where(h3) {
    color: #f3f4f6;
  }
  .prose :where(h4) {
    color: #f3f4f6;
  }
  .prose :where(code) {
    color: #f3f4f6;
  }
  .prose :where(a code) {
    color: inherit;
  }
  .prose :where(thead) {
    color: #f3f4f6;
    border-bottom-color: #374151;
  }
  .prose :where(tbody tr) {
    border-bottom-color: #1f2937;
  }
}