zero2prod/templates/input.css

@import "tailwindcss";
@plugin "@tailwindcss/typography";

@layer utilities {
  .htmx-indicator {
    @apply hidden;
  }

  .htmx-request .htmx-indicator {
    @apply inline-flex items-center ml-2;
  }

  #load-more .htmx-indicator {
    @apply block;
  }

  .htmx-request .continue-text {
    @apply hidden;
  }
}

@layer components {
  .prose-compact {
    @apply prose prose-slate max-w-none;

    --tw-prose-body: theme(colors.gray.700);
    --tw-prose-headings: theme(colors.gray.900);
    --tw-prose-links: theme(colors.blue.600);
    --tw-prose-code: theme(colors.gray.800);
  }

  .prose-compact p {
    @apply mb-2 mt-0;
  }

  .prose-compact h1 {
    @apply pb-2 mb-3 border-b-2 border-gray-100;
  }

  .prose-compact h2 {
    @apply mt-4 pb-2 mb-3 border-b-2 border-gray-100 font-semibold;
  }

  .prose-compact h3 {
    @apply mt-3 mb-1;
  }

  .prose-compact h4,
  .prose-compact h5,
  .prose-compact h6 {
    @apply mt-2 mb-1;
  }

  .prose-compact ul,
  .prose-compact ol {
    @apply my-2 space-y-0;
  }

  .prose-compact li {
    @apply my-0;
  }

  .prose-compact blockquote {
    @apply my-3 py-2;
  }

  .prose-compact img {
    @apply m-0 align-top;
  }

  .prose-compact a:has(img) {
    @apply no-underline border-0 inline-block align-top;
  }

  .prose-compact a img {
    @apply inline-block align-top;
  }

  .prose-compact :not(pre) > code {
    @apply bg-gray-100 text-gray-800 px-1.5 py-0.5 rounded text-sm font-mono font-normal;
  }

  .prose-compact :not(pre) > code::before,
  .prose-compact :not(pre) > code::after {
    content: none !important;
  }

  .prose-compact pre {
    @apply my-3 p-4 bg-gray-100 text-gray-800 rounded-sm overflow-x-auto border border-gray-200;
    overflow-x: auto;
    max-width: 100%;
    width: 0;
    min-width: 100%;
  }

  .prose-compact pre code {
    @apply bg-transparent text-gray-800 p-0 rounded-none;
  }

  .prose-compact pre code::before,
  .prose-compact pre code::after {
    content: none !important;
  }

  .prose-compact table {
    border-collapse: collapse;
    border-spacing: 0;
    @apply my-6;
    font-size: 14px;
    line-height: 1.45;
    display: block;
    overflow-x: auto;
    width: 100%;
    min-width: 100%;
    max-width: 100%;
  }

  .prose-compact table thead,
  .prose-compact table tbody {
    display: table;
    width: 100%;
    table-layout: fixed;
  }

  .prose-compact table tr {
    display: table-row;
    background-color: #fff;
    border-top: 1px solid #c6cbd1;
  }

  .prose-compact table tr:nth-child(2n) {
    background-color: #f6f8fa;
  }

  .prose-compact table th,
  .prose-compact table td {
    display: table-cell;
    padding: 6px 13px;
    border: 1px solid #dfe2e5;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
  }

  .prose-compact table th {
    font-weight: 600;
    background-color: #f6f8fa;
  }
}