fuwari/src/styles/common.css

.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 active:scale-90;
}
.link-lg {
    @apply transition rounded-md p-1.5 -m-1.5 expand-animation active:scale-90;
}
.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]
}

.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
}

::selection {
    background-color: var(--selection-bg)
}

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
}

@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
}
#content-wrapper {
    animation-delay: var(--content-delay);
}
#footer {
    animation-delay: 400ms;
}
#banner-credit {
    animation-delay: 400ms;
}