AboutMe/src/styles/markdown.css

@reference "tailwindcss";

.custom-md {
    h1 {
        @apply text-3xl;
    }

    h1, h2, h3, h4, h5, h6 {
        .anchor {
            @apply transition! -m-0.5! ml-[0.2ch]! p-0.5! select-none! opacity-0! no-underline!;

            .anchor-icon {
                @apply mx-[0.45ch]!;
            }
        }

        &:hover {
            .anchor {
                @apply opacity-100!;
            }
        }
    }

    a:not(.no-styling) {
        @apply relative bg-none font-medium text-(--primary)
        underline decoration-(--link-underline) decoration-1 decoration-dashed underline-offset-4;
        box-decoration-break: clone;
        -webkit-box-decoration-break: clone;
        &:hover, &:active {
            @apply decoration-transparent;
            background: var(--btn-plain-bg-hover);
            border-bottom: 1px dashed var(--link-hover);
            text-decoration: none;
        }
    }

    code {
        @apply bg-(--inline-code-bg) text-(--inline-code-color) px-1 py-0.5 rounded-md overflow-hidden;

        font-family: 'JetBrains Mono Variable', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, Liberation Mono, Courier New, monospace;
        &:before {
            content:none;
        }
        &:after {
            content:none;
        }

        counter-reset: line;
        span.line {
            &:before {
                @apply text-black/25 dark:text-white/25 mr-4 w-4 inline-block;
                content: counter(line);
                counter-increment: line;
                direction: rtl;
            }
            &:last-child:empty, &:last-child:has(> span:empty:only-child) {
                display: none;
            }
        }
    }


    .collapse-btn {
        all: initial;
        @apply opacity-0 absolute active:scale-90 h-6 w-6 top-2 right-10 text-xs rounded transition-all ease-in-out z-20 cursor-pointer bg-(--btn-regular-bg) hover:bg-(--btn-regular-bg-hover) text-(--btn-content);
    }
    .expressive-code:hover .collapse-btn {
        opacity: 1;
    }
    .collapse-btn-icon {
        @apply absolute top-1/2 left-1/2 transition -translate-x-1/2 -translate-y-1/2 w-3 h-3 fill-current pointer-events-none;
    }
    .expressive-code.collapsed .collapse-icon {
        @apply -rotate-90;
    }
    .expressive-code.collapsed pre {
        @apply max-h-[5.5rem] overflow-hidden;
    }
    .expressive-code.collapsed .frame {
        @apply relative;
    }
    .expressive-code.collapsed .frame::before {
        content: "";
        @apply absolute bottom-0 left-0 right-0 h-12 bg-linear-to-t from-(--codeblock-bg) to-transparent pointer-events-none z-10;
    }

    .copy-btn {
        all: initial;
        @apply opacity-0 absolute active:scale-90 h-6 w-6 top-2 right-2 text-xs rounded transition-all ease-in-out z-20 cursor-pointer bg-(--btn-regular-bg) hover:bg-(--btn-regular-bg-hover) text-(--btn-content);
    }
    .expressive-code:hover .copy-btn {
        opacity: 1;
    }
    .copy-btn-icon {
        @apply absolute top-1/2 left-1/2 transition -translate-x-1/2 -translate-y-1/2 w-3 h-3 fill-current pointer-events-none;
    }
    .copy-btn .copy-icon {
        @apply opacity-100;
    }
    .copy-btn.success .copy-icon {
        @apply opacity-0;
    }
    .copy-btn .success-icon {
        @apply opacity-0;
    }
    .copy-btn.success .success-icon {
        @apply opacity-100;
    }

    .expressive-code {
        @apply my-4;
        ::selection {
            @apply bg-(--codeblock-selection);
        }
    }


    ul, ol {
        li::marker {
            @apply text-(--primary);
        }
    }

    blockquote {
        @apply not-italic border-transparent relative;
        font-weight: inherit;

        &:before {
            @apply content-[''] absolute -left-1 block transition bg-(--btn-regular-bg) h-full w-1 rounded-full;
        }

        /* Remove the double quotes from default styles */
        p:before, p:after {
            @apply content-none;
        }

    }

    .katex-display {
        @apply my-4;
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        scrollbar-color: rgba(0,0,0,0.3) transparent;

        &::-webkit-scrollbar {
            height: 6px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
        &::-webkit-scrollbar-thumb {
            background: rgba(0,0,0,0.3);
            border-radius: 3px;
        }
        &::-webkit-scrollbar-thumb:hover {
            background: rgba(0,0,0,0.5);
        }
    }

}

/* 修复代码块内列表项标记颜色问题 */
.custom-md .expressive-code ul li::marker,
.custom-md .expressive-code ol li::marker {
    @apply text-inherit;
}