kita/static/app.css

@import "tailwindcss";
@plugin "@tailwindcss/typography";
@custom-variant dark (&:where(.dark, .dark *));

html,
body {
  @apply h-full;
}

html {
  --bg: transparent;
  --bg-dark: transparent;
  --header: transparent;
  --header-dark: transparent;
}

body {
  -webkit-tap-highlight-color: transparent;
  background: var(--bg);

  &:where(.dark *) {
    background: var(--bg-dark);
  }
}

.not-ready * {
  @apply transition-none!;
}

article {
  @apply text-lg;

  /* Auto direction for text */
  *,
  ::before,
  ::after {
    unicode-bidi: plaintext;
  }

  /* Footnote */
  .footnote-definition {
    @apply flex;

    p {
      @apply m-0;
    }

    .footnote-definition-label {
      @apply static mr-2 text-base;

      &::after {
        @apply content-['.'];
      }
    }
  }

  /* Code block */
  pre {
    @apply text-base;

    mark {
      @apply mx-[-18px] my-0 block px-[18px] py-0 text-inherit;
    }

    table {
      @apply m-0 w-full border-collapse text-base;

      tr {
        @apply border-0 border-none;
      }

      td {
        @apply p-0;

        &:nth-of-type(1) {
          @apply min-w-4 select-none;
          mark {
            @apply mr-0 pr-0;
          }
        }

        &:not(:nth-of-type(1)) {
          mark {
            @apply ml-0 pl-0;
          }
        }
      }
    }
  }

  /* Figure */
  figure {
    @apply max-w-full;

    svg {
      @apply h-auto max-w-full scheme-light! dark:scheme-dark!;
    }
  }
}

.header {
  background-color: var(--header);

  &:where(.dark *) {
    background: var(--header-dark);
  }
}

.btn-menu {
  &::before,
  &::after {
    @apply block h-[2px] w-5 bg-black duration-200 content-[''];
  }

  @apply dark:before:invert dark:after:invert;

  &:where(.open *) {
    &::before {
      @apply w-6 translate-y-[5.5px] rotate-45;
    }

    &::after {
      @apply w-6 -translate-y-[5.5px] -rotate-45;
    }
  }
}

.nav-wrapper {
  @apply hidden lg:flex;

  &:where(.open *) {
    @apply flex;
  }
}

@utility blur-header {
  @apply bg-black/10 backdrop-blur dark:bg-white/10;
}

@utility block-bg {
  @apply bg-black/[3%] dark:bg-white/[8%];
}

@utility block-hover {
  @apply hover:bg-black/[5%] dark:hover:bg-white/[11%];
}

@utility block-hover-mask {
  @apply hover:bg-black/[2%] dark:hover:bg-white/[3%];
}

@utility primary-link {
  @apply text-black no-underline hover:opacity-80 dark:text-white;
}

@utility secondary-link {
  @apply text-[var(--tw-prose-body)] no-underline hover:text-black dark:hover:text-white;
}