fuwari/src/base.css

/* The integration's default injected base.css file */
@tailwind base;
@tailwind components;
@tailwind utilities;

@layer components {
    .card-base {
        @apply rounded-[var(--radius-large)] overflow-hidden bg-[var(--card-bg)] transition;
    }
    h1, h2, h3, h4, h5, h6, p, a, span, li, ul, ol, blockquote, code, pre, table, th, td, strong {
        @apply transition;
    }
    .card-shadow {
        @apply drop-shadow-[0_2px_4px_rgba(0,0,0,0.005)]
    }
    .expand-animation {
        @apply relative before:ease-out before:transition active:bg-none hover:before:bg-[var(--btn-plain-bg-hover)] active:before:bg-[var(--btn-plain-bg-active)] z-0
        before:absolute before:rounded-[inherit] before:inset-0 before:scale-[0.85] hover:before:scale-100 before:-z-10
    }
    .link {
        @apply transition rounded-md p-1 -m-1 expand-animation;
    }
    .link-lg {
        @apply transition rounded-md p-1.5 -m-1.5 expand-animation;
    }
    .float-panel {
        @apply top-[5.25rem] rounded-[var(--radius-large)] overflow-hidden bg-[var(--float-panel-bg)] transition shadow-xl dark:shadow-none
    }
    .float-panel-closed {
        @apply -translate-y-1 opacity-0 pointer-events-none
    }
    .search-panel mark {
        @apply bg-transparent text-[var(--primary)]
    }

    .btn-card {
        @apply transition flex items-center justify-center bg-[var(--card-bg)] hover:bg-[var(--btn-card-bg-hover)]
        active:bg-[var(--btn-card-bg-active)]
    }
    .btn-card.disabled {
        @apply pointer-events-none text-black/10 dark:text-white/10
    }
    .btn-plain {
        @apply transition relative flex items-center justify-center bg-none
        text-black/75 hover:text-[var(--primary)] dark:text-white/75 dark:hover:text-[var(--primary)];
        &:not(.scale-animation) {
            @apply hover:bg-[var(--btn-plain-bg-hover)] active:bg-[var(--btn-plain-bg-active)]
        }
        &.scale-animation {
            @apply expand-animation;
            &.current-theme-btn {
                @apply before:scale-100 before:opacity-100 before:bg-[var(--btn-plain-bg-hover)] text-[var(--primary)]
            }
        }
    }
    .btn-regular {
        @apply transition flex items-center justify-center bg-[var(--btn-regular-bg)] hover:bg-[var(--btn-regular-bg-hover)] active:bg-[var(--btn-regular-bg-active)]
        text-[var(--btn-content)] dark:text-white/75
    }

    .link-underline {
        @apply transition underline decoration-2 decoration-dashed decoration-[var(--link-underline)]
        hover:decoration-[var(--link-hover)] active:decoration-[var(--link-active)] underline-offset-[0.25rem]
    }

    .toc-hide,
    .toc-not-ready {
        @apply opacity-0 pointer-events-none
    }

    #toc-inner-wrapper {
        mask-image: linear-gradient(to bottom, transparent 0%, black 2rem, black calc(100% - 2rem), transparent 100%);
    }

    .hide-scrollbar {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .hide-scrollbar::-webkit-scrollbar {
        display: none;
    }

    .text-90 {
        @apply text-black/90 dark:text-white/90
    }
    .text-75 {
        @apply text-black/75 dark:text-white/75
    }
    .text-50 {
        @apply text-black/50 dark:text-white/50
    }
    .text-30 {
        @apply text-black/30 dark:text-white/30
    }
    .text-25 {
        @apply text-black/25 dark:text-white/25
    }

    html.is-changing .transition-swup-fade {
        @apply transition-all duration-200
    }
    html.is-animating .transition-swup-fade {
        @apply opacity-0 translate-y-4
    }

    /* PhotoSwipe */
    .pswp__button {
        @apply transition bg-black/40 hover:bg-black/50 active:bg-black/60 flex items-center justify-center mr-0 w-12 h-12 !important;
    }
    .pswp__button--zoom, .pswp__button--close {
        @apply mt-4 rounded-xl active:scale-90 !important;
    }
    .pswp__button--zoom {
        @apply mr-2.5 !important;
    }
    .pswp__button--close {
        @apply mr-4 !important;
    }
    .custom-md img, #post-cover img {
        @apply cursor-zoom-in
    }
}

@layer components {
    .meta-icon {
        @apply w-8 h-8 transition rounded-md flex items-center justify-center bg-[var(--btn-regular-bg)]
        text-[var(--btn-content)] mr-2
    }
    .with-divider {
        @apply before:content-['/'] before:ml-1.5 before:mr-1.5 before:text-[var(--meta-divider)] before:text-sm
        before:font-medium before:first-of-type:hidden before:transition
    }
}

@layer components {
    .btn-regular-dark {
        @apply flex items-center justify-center
        bg-[oklch(0.45_0.01_var(--hue))] hover:bg-[oklch(0.50_0.01_var(--hue))] active:bg-[oklch(0.55_0.01_var(--hue))]
        dark:bg-[oklch(0.30_0.02_var(--hue))] dark:hover:bg-[oklch(0.35_0.03_var(--hue))] dark:active:bg-[oklch(0.40_0.03_var(--hue))]
    }
    .btn-regular-dark.success {
        @apply bg-[oklch(0.75_0.14_var(--hue))] dark:bg-[oklch(0.75_0.14_var(--hue))]
    }

    .copy-btn-icon {
        @apply absolute top-1/2 left-1/2 transition -translate-x-1/2 -translate-y-1/2
    }
    .copy-btn .copy-icon {
        @apply opacity-100 fill-white dark:fill-white/75
    }
    .copy-btn.success .copy-icon {
        @apply opacity-0 fill-[var(--deep-text)]
    }
    .copy-btn .success-icon {
        @apply opacity-0
    }
    .copy-btn.success .success-icon {
        @apply opacity-100
    }
}


@layer components {
    .dash-line {
        position: relative;
    }
        
    .dash-line::before {
        content: "";
        position: absolute;
        width: 10%;
        height: 100%;
        top: 50%;
        left: calc(50% - 1px);
        border-left: 2px dashed var(--line-color);
        pointer-events: none;
        transition: all 0.3s;
        transform: translateY(-50%);
    }
}

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

@keyframes fade-in-up {
    0% {
        transform: translateY(2rem);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.onload-animation {
    opacity: 0;
    animation: 300ms fade-in-up;
    animation-fill-mode: forwards;
}
#navbar {
    animation-delay: 0ms
}
#sidebar {
    animation-delay: 100ms
}
#swup-container {
    outline: none;
}
#content-wrapper {
    animation-delay: var(--content-delay);
}
.footer {
    animation-delay: 250ms;
}
#banner-credit {
    animation-delay: 400ms;
}

.collapsed {
    height: var(--collapsedHeight);
}