src/styles/twikoo.css

@reference "tailwindcss";

:root {
  --tk-text: black;
  --code-block-text: #333; /* 调整为深色但在浅色背景下仍然舒适的值 */
}

html.dark {
  --tk-text: #d1d5db;
  --code-block-text: #d1d5db; /* 在深色模式下使用更亮的颜色 */
}

.tk-comments {
  @apply text-(--tk-text);
}

.tk-submit {
  .tk-avatar {
    @apply hidden;
  }
}

/* Text Area */
.tk-row {
  .tk-col {
    @apply flex-col-reverse;
    .tk-input {
      textarea {
        @apply rounded-(--radius-large) py-4 px-6 min-h-[150px]! focus:border-(--primary)
               border-(--line-divider) bg-(--card-bg) text-(--btn-content)
               placeholder:text-(--content-meta) transition-all duration-300
               focus:ring-2 focus:ring-(--primary)/20;
        resize: vertical;
      }
    }
  }
}

/* 表情和图片按钮位置调整 */
.tk-row .tk-col .tk-actions {
  @apply order-1 mt-4 mb-2 flex gap-2;
}

.tk-row .tk-col .tk-meta-input {
  @apply order-2;
}

/* 表情和图片按钮样式优化 */
.tk-owo,
.tk-upload {
  @apply rounded-lg p-2 hover:bg-(--btn-plain-bg-hover) transition-colors duration-200
         border border-(--line-divider) bg-(--card-bg) text-(--btn-content)
         hover:border-(--primary) hover:shadow-xs;
}

.tk-owo:hover,
.tk-upload:hover {
  @apply bg-(--btn-plain-bg-hover) border-(--primary) shadow-xs;
}

/* Meta */
.tk-meta-input {
  @apply relative mt-4;
  div {
    @apply min-h-12 rounded-lg border border-(--line-divider) bg-(--card-bg) overflow-hidden
           hover:border-(--primary) hover:shadow-xs transition-all duration-200 flex items-center;

    .el-input-group__prepend {
      @apply bg-(--btn-regular-bg)! text-(--btn-content)! px-4 font-medium text-sm
             border-r border-(--line-divider) flex items-center justify-center min-w-[80px] shrink-0
             rounded-l-lg rounded-r-none;
      min-height: inherit;
    }

    input {
      @apply px-4 bg-transparent text-(--btn-content) placeholder:text-(--content-meta)
             focus:!border-(--primary) transition-all duration-200 flex-1
             rounded-r-lg rounded-l-none;
      min-height: inherit;

      &::placeholder {
        @apply text-(--content-meta) opacity-70;
      }

      &:focus {
        @apply outline-hidden;
      }
    }

    &:focus-within {
      @apply border-(--primary) shadow-md;
    }
  }
}

/* Button */
.tk-row.actions {
  @apply w-full ml-0! mt-6! flex gap-3 justify-end;
  .__markdown {
    @apply !hidden;
  }
  .tk-send,
  .tk-cancel {
    @apply border-none rounded-lg px-6 py-2 h-10 font-medium transition-all duration-300
           bg-(--btn-regular-bg)! hover:bg-(--btn-regular-bg-hover)!
           active:bg-(--btn-regular-bg-active)! disabled:bg-(--btn-regular-bg)!
           text-(--btn-content)! disabled:text-(--content-meta)!
           hover:scale-105 active:scale-95 shadow-xs hover:shadow-md;
  }
}

/* 隐藏预览按钮 */
.tk-preview {
  display: none !important;
}

/* 强制统一按钮样式 */
.tk-send,
.tk-cancel {
  background: var(--btn-regular-bg) !important;
  color: var(--btn-content) !important;
  border: none !important;
  border-radius: 0.5rem !important;
  padding: 0.5rem 1.5rem !important;
  height: 2.5rem !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

.tk-send:hover,
.tk-cancel:hover {
  background: var(--btn-regular-bg-hover) !important;
  transform: scale(1.05) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
}

.tk-send:active,
.tk-cancel:active {
  background: var(--btn-regular-bg-active) !important;
  transform: scale(0.95) !important;
}

.tk-send:disabled,
.tk-cancel:disabled {
  background: var(--btn-regular-bg) !important;
  color: var(--content-meta) !important;
  transform: none !important;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Comment title */
.tk-comments-title {
  @apply hidden; /* 隐藏默认标题，使用自定义标题 */

  .__comments svg {
    @apply fill-(--primary);
  }
}

.tk-comment {
  @apply border-[1px] border-(--line-divider) p-4 rounded-2xl hover:shadow-lg hover:border-(--primary) transition-all duration-300;
  background: linear-gradient(135deg, var(--card-bg) 0%, rgba(var(--primary), 0.02) 100%);

  .tk-action-icon svg {
    @apply fill-(--primary) hover:scale-110 transition-transform duration-200;
  }

  &:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    z-index: 2;
  }
}

.tk-meta {
  .tk-tag {
    @apply border-none rounded-lg text-(--btn-content);
  }

  .tk-tag-green {
    @apply bg-(--btn-regular-bg) dark:bg-(--primary) dark:text-(--deep-text);
  }
}

/* Content & Preview */
.tk-content,
.tk-preview-container {
  /* by @microsic

    Make the picture type emoticons display without wrapping

  */
  img {
    @apply inline align-bottom!;
  }

  a {
    @apply underline text-(--primary) font-medium;
  }

  .tk-ruser {
    @apply no-underline;
  }

  :not(pre) > code {
    @apply bg-(--inline-code-bg) rounded-md text-(--inline-code-color) px-1 py-0.5 font-semibold;
  }

  li {
    @apply before:content-["•"] before:text-(--primary);
  }
}

/* Replies */
.tk-replies {


  .tk-comment {
    @apply border-l-4 border-l-(--btn-regular-bg)/30 p-3 hover:border-(--primary) transition-all duration-300;
    .tk-content {
      > span:first-of-type {
        @apply text-xs text-(--content-meta);
      }
    }
  }

  /* 回复层级指示器 */
  &::before {
    content: '';
    @apply absolute left-0 top-0 w-0.5 h-full bg-gradient-to-b  to-transparent opacity-30;
  }
}

.twikoo .code-block {
  pre {
    @apply rounded-xl!;
  }

  /* Code block fall back */
  pre:not([class]) {
    @apply bg-(--codeblock-bg) overflow-auto p-2 text-(--code-block-text);
  }

  .copy-btn-icon {
    width: inherit !important;
    height: inherit !important;
  }
}

.tk-expand-wrap .tk-expand,
.tk-collapse-wrap .tk-expand {
  @apply border-[1px] border-(--line-divider) rounded-lg mt-1 bg-(--btn-regular-bg) text-(--btn-content) hover:text-(--primary) hover:bg-(--btn-regular-bg-hover);
}

/* by @SirTamago

Make the emoji component display correctly when there are too many emoji packs

*/
.card-base {
  overflow: visible;
}

/* 防止 Twikoo 操作时的意外滚动 */
.tk-action-icon,
.tk-owo,
.tk-submit,
.tk-cancel,
.tk-admin,
.tk-delete,
.tk-edit {
  cursor: pointer;
  transition: all 0.2s ease;
}

/* 确保点击区域足够大 */
.tk-action {
  min-height: 24px;
  display: flex;
  align-items: center;
}

/* 防止表单提交时的意外跳转 */
.tk-submit-wrapper {
  position: relative;
}

/* 管理面板样式优化 */
.tk-admin-panel {
  position: relative;
  z-index: 100;
}



.el-loading-spinner {
  display: flex !important;
  justify-content: center !important;

}