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-200;
    }

    .prose-compact h2 {
        @apply mt-4 pb-2 mb-3 border-b-2 border-gray-200 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;
    }
}