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

@import "./mixin.less";

.memo-content-wrapper {
  @apply w-full flex flex-col justify-start items-start;

  > .memo-content-text {
    @apply w-full break-words text-base leading-7;

    &.expanded {
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 8;
      overflow: hidden;
    }

    > p {
      @apply w-full h-auto mb-1 last:mb-0 text-base leading-6 whitespace-pre-wrap break-words;
      min-height: 24px;
    }

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

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

    .memo-link-text {
      @apply inline-block text-blue-600 cursor-pointer font-bold border-none no-underline hover:opacity-80;
    }

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

    .ol-block,
    .ul-block,
    .todo-block {
      @apply inline-block box-border text-right w-8 mr-px font-mono select-none whitespace-nowrap;
    }

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

    .todo-block {
      @apply w-4 h-4 leading-4 border rounded box-border text-lg cursor-pointer shadow-inner hover:opacity-80;
      transform: translateY(2px);
      margin-left: 6px;
      margin-right: 6px;
    }

    pre {
      @apply w-full my-1 p-3 rounded bg-gray-100 whitespace-pre-wrap;

      code {
        @apply block;
      }
    }

    code {
      @apply bg-gray-100 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;
    }
  }

  > .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 border-gray-200 opacity-80 shadow hover:opacity-60;

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