vhAstro-Theme/src/styles/components/Comment.less

.vh-comment {
  box-sizing: border-box;
  padding: 2rem 1rem 1rem;
  width: 100%;
  height: max-content;
  border-radius: 0.5rem;
  background: #fff;
  box-shadow: 0 3px 8px 6px rgba(7, 17, 27, 0.05);
  overflow: hidden;

  // 评论样式
  .twikoo {
    font-size: 0.88rem;

    &:not(.tk-admin-container) {

      // p标签样式
      // ul标签样式
      ul:not(.OwO-items):not(.OwO-packages),
      ol {
        margin: 0.618rem 0;
        font-size: 0.9375rem;
        line-height: 1.6;

        li {
          color: #33333388;
          font-size: 0.875rem;
          line-height: 1.6;
        }

        // 其下面的code标签样式
        code {
          background: transparent;
        }

        :not(pre) {
          &>code {
            background-color: #edeef3;
            padding: .125rem .375rem;
            font-size: 0.8125rem;
          }
        }

      }

      ul:not(.OwO-items):not(.OwO-packages),
      ol {
        padding-left: 1.25rem;
      }

      p {
        color: #4c4948;
        font-weight: 300;
        font-size: 0.875rem;

        a {
          box-shadow: inset 0 -.12em #60a5fa;
          transition: box-shadow .2s ease-in-out, color .2s ease-in-out;

          &:hover {
            box-shadow: inset 0 -1.5em #60a5fa7f
          }
        }
      }
    }

    // 评论输入框Focus边框颜色
    .el-input__inner:focus,
    .el-textarea__inner:focus {
      border-color: #9999ff !important;
    }

    // 及背景颜色
    .el-input-group__append,
    .el-input-group__prepend {
      background-color: #F5F6F8 !important;
    }

    // 评论内容样式
    .tk-comments {

      // 评论输入框样式
      .tk-submit {
        &>.tk-row {
          &>.tk-col {
            &>.tk-input.el-textarea {
              box-sizing: border-box;
              padding: 6px 0 26px;
              border: 1px solid #f0f0f0;

              &>textarea {
                border: none;
                min-height: 188px !important;

                &::placeholder {
                  line-height: 1.88;
                }
              }

              &>span {
                opacity: 0 !important;
              }
            }
          }
        }
      }

      .tk-comments-container {
        .tk-comment {

          // 作者的UI
          &.tk-master {
            &>.tk-main {
              &>.tk-row {
                &>.tk-meta {
                  &>.tk-nick {
                    position: relative;
                    color: #9999ff;
                    line-height: 1.18rem;

                    &.tk-nick-link {
                      cursor: pointer;

                      &::after {
                        position: absolute;
                        content: "";
                        right: 0;
                        left: auto;
                        bottom: 0;
                        width: 0;
                        height: 1px;
                        background: #9999ff;
                        transition: all 0.28s;
                      }

                      &:hover {
                        &::after {
                          left: 0;
                          right: auto;
                          width: 100%;
                        }
                      }
                    }
                  }
                }
              }
            }

            .tk-avatar {
              position: relative;
              overflow: visible;
              box-shadow: 0px 0px 16px 0px rgba(0, 0, 0, 0.1);
              user-select: none;

              &>img.tk-avatar-img {
                border-radius: 20%;
              }

              &::after {
                content: "";
                display: block;
                position: absolute;
                right: -0.4rem;
                bottom: -0.4rem;
                width: 0.8rem;
                height: 0.8rem;
                background: #fff;
                background: url("/public/assets/images/admin.svg") no-repeat;
                background-size: cover;
              }
            }
          }

          &:nth-last-of-type(1) {
            .tk-main {
              border-bottom: none;
            }
          }

          .tk-main {
            padding-bottom: 20px;
            border-bottom: 1px dashed #ddd;

            // 头部
            .tk-row {
              .tk-meta {
                display: flex;
                align-items: center;
                gap: 0.36rem;

                &>.tk-nick {
                  position: relative;
                  color: #4c4948;
                  line-height: 1.18rem;

                  &.tk-nick-link {
                    cursor: pointer;

                    &::after {
                      position: absolute;
                      content: "";
                      right: 0;
                      left: auto;
                      bottom: 0;
                      width: 0;
                      height: 1px;
                      background: #4c4948;
                      transition: all 0.28s;
                    }

                    &:hover {
                      &::after {
                        left: 0;
                        right: auto;
                        width: 100%;
                      }
                    }
                  }
                }

                .tk-tag {
                  color: #000;
                  border-color: #000;
                  background: transparent;
                  border-radius: 2px;
                  font-size: 0.72rem;
                  border-radius: 4px;
                  font-weight: bold;
                  line-height: 1.6;
                }

                .tk-time {
                  color: #999;
                }
              }
            }

            // 内容
            .tk-content {
              p {
                margin: 0;
              }

              img {
                width: auto;
                max-height: 66px;
                vertical-align: text-bottom;

                &.tk-owo-emotion {
                  height: 28px;
                }
              }
            }

            // UA信息
            .tk-extras {
              padding-bottom: 0.28rem;
              font-size: 0.68rem;

              .tk-extra {
                box-sizing: border-box;
                padding: 4px;
                border-radius: 0.2rem;
                background-color: #F5F6F8;
              }
            }

            // 主体
            &>.tk-replies {
              padding-left: 1rem;
              border-left: 0.25rem solid rgba(0, 0, 0, 0.06);
            }
          }
        }
      }
    }

    // 评论表情框样式
    .OwO .OwO-body {
      top: auto;
      bottom: 100%;

      .OwO-bar {
        .OwO-packages {
          flex-direction: row;
          gap: 0;
        }
      }
    }
  }
}