memos/web/src/less/memo-content.less

.memo-content-wrapper {
  @apply w-full flex flex-col justify-start items-start text-gray-800 dark:text-gray-200;

  > .memo-content-text {
    @apply w-full max-w-full word-break text-base leading-6;

    > h1 {
      @apply text-5xl leading-normal font-bold;
    }

    > h2 {
      @apply text-3xl leading-normal font-medium;
    }

    > h3 {
      @apply text-xl leading-normal font-medium;
    }

    > h4 {
      @apply text-lg;
    }

    > p {
      @apply w-full h-auto mb-1 last:mb-0 text-base;
      min-height: 24px;
    }

    > .li-container {
      @apply w-full flex flex-row flex-nowrap;
    }

    .img {
      @apply block max-w-full rounded cursor-pointer hover:shadow;
    }

    .tag-span {
      @apply inline-block w-auto font-mono text-blue-600 dark:text-blue-400 cursor-pointer;
    }

    .link {
      @apply text-blue-600 dark:text-blue-400 cursor-pointer underline break-all hover:opacity-80 decoration-1;

      code {
        @apply underline decoration-1;
      }
    }

    .ol-block,
    .ul-block,
    .todo-block {
      @apply shrink-0 inline-block box-border text-right w-7 mr-px font-mono text-sm leading-6 select-none whitespace-nowrap;
    }

    .ol-block {
      @apply opacity-80 pr-1 mt-px;
    }

    .ul-block {
      @apply text-center mt-px;
    }

    .todo-block {
      @apply w-4 h-4 leading-4 mx-1 mr-2 mt-1 border rounded box-border text-lg cursor-pointer shadow-inner hover:opacity-80;
    }

    pre {
      @apply w-full my-1 p-3 rounded bg-gray-100 dark:bg-zinc-600 whitespace-pre-wrap relative;

      code {
        @apply block;
      }

      &:hover{
        .codeblock-copy-btn{
          @apply flex;
        }
      }

      .codeblock-copy-btn{
        @apply btn-normal absolute hidden top-2 right-2 border-solid border-2;
      }
    }

    code {
      @apply break-all bg-gray-100 dark:bg-zinc-600 px-1 rounded text-sm font-mono leading-6 inline-block;
    }

    table {
      @apply my-1 table-auto border-collapse border border-gray-300;

      th {
        @apply px-4 py-1 text-center border border-gray-300;
      }

      td {
        @apply px-4 py-1 text-center border border-gray-300;
      }
    }

    blockquote {
      @apply border-l-4 pl-2 text-gray-400 dark:text-gray-300;
    }

    hr {
      @apply my-1 dark:border-zinc-600;
    }
  }

  > .expand-btn-container {
    @apply w-full relative flex flex-row justify-start items-center;

    > .btn {
      @apply flex flex-row justify-start items-center pl-2 pr-1 py-1 my-1 text-xs rounded-lg border bg-gray-100 dark:bg-zinc-600 border-gray-200 dark:border-zinc-600 opacity-80 shadow hover:opacity-60 cursor-pointer;

      &.expand-btn {
        @apply mt-2;

        > .icon-img {
          @apply rotate-90;
        }
      }

      &.fold-btn {
        > .icon-img {
          @apply -rotate-90;
        }
      }

      > .icon-img {
        @apply w-4 h-auto ml-1 transition-all;
      }
    }
  }
}