forge/resources/css/app.css

@tailwind base;
@tailwind components;
@tailwind utilities;

[x-cloak] {
    display: none;
}

main a:not(.mod-list-component):not(.tab):not([role="menuitem"]) {
    @apply underline text-gray-800 hover:text-black dark:text-gray-200 dark:hover:text-white;
}

.badge-version {
    @apply bg-gray-100 dark:bg-gray-700 text-gray-700 dark:text-gray-100;

    &.red {
        @apply bg-red-100 dark:bg-red-700 text-red-700 dark:text-red-100;
    }

    &.green {
        @apply bg-green-100 dark:bg-green-700 text-green-700 dark:text-green-100;
    }

    &.emerald {
        @apply bg-emerald-100 dark:bg-emerald-700 text-emerald-700 dark:text-emerald-100;
    }

    &.lime {
        @apply bg-lime-100 dark:bg-lime-700 text-lime-700 dark:text-lime-100;
    }

    &.yellow {
        @apply bg-yellow-100 dark:bg-yellow-700 text-yellow-700 dark:text-yellow-100;
    }
}

.user-markdown {
    b, strong {
        @apply font-bold;
    }

    i, em {
        @apply italic
    }

    h1, h2, h3, h4, h5, h6 {
        @apply font-bold mt-4 mb-2 text-black dark:text-white;
    }

    h1 {
        @apply text-2xl;
    }

    h2 {
        @apply text-xl;
    }

    h3 {
        @apply text-lg;
    }

    h4 {
        @apply text-base;
    }

    h5 {
        @apply text-sm;
    }

    h6 {
        @apply text-xs;
    }

    p {
        @apply my-2 text-gray-800 dark:text-gray-300;
    }

    ul {
        @apply list-disc mb-2;
    }

    ol {
        @apply list-decimal mb-2;
    }

    li {
        @apply my-2 ml-7 text-gray-800 dark:text-gray-300;
    }
}

.ribbon {
    font-size: 18px;
    font-weight: bold;
    color: #fff;
}

.ribbon {
    --f: .5em;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.5;
    padding-inline: 1lh;
    padding-bottom: var(--f);
    border-image: conic-gradient(#0008 0 0) 51%/var(--f);
    clip-path: polygon(100% calc(100% - var(--f)), 100% 100%, calc(100% - var(--f)) calc(100% - var(--f)), var(--f) calc(100% - var(--f)), 0 100%, 0 calc(100% - var(--f)), 999px calc(100% - var(--f) - 999px), calc(100% - 999px) calc(100% - var(--f) - 999px));
    transform: translate(calc((cos(45deg) - 1) * 100%), -100%) rotate(-45deg);
    transform-origin: 100% 100%;
    background-color: #0e7490;
}

.rainbow {
    height: 100%;
    width: 100%;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: absolute;
    background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
    background-size: 1800% 1800%;
    -webkit-animation: rainbow 18s ease infinite;
    -o-animation: rainbow 18s ease infinite;
    animation: rainbow 18s ease infinite;
}

@-webkit-keyframes rainbow {
    0% {
        background-position: 0 82%
    }
    50% {
        background-position: 100% 19%
    }
    100% {
        background-position: 0 82%
    }
}

@-moz-keyframes rainbow {
    0% {
        background-position: 0 82%
    }
    50% {
        background-position: 100% 19%
    }
    100% {
        background-position: 0 82%
    }
}

@-o-keyframes rainbow {
    0% {
        background-position: 0 82%
    }
    50% {
        background-position: 100% 19%
    }
    100% {
        background-position: 0 82%
    }
}

@keyframes rainbow {
    0% {
        background-position: 0 82%
    }
    50% {
        background-position: 100% 19%
    }
    100% {
        background-position: 0 82%
    }
}