配置twikoo评论为卡片风格

  1.twikoo {
  2  .el-input-group__append,
  3  .el-input-group__prepend,
  4  .el-textarea__inner {
  5      border: 1px solid #dcdfe6;
  6      box-shadow: none;
  7  }
  8  .el-input-group__prepend {
  9      border-right: none;
 10  }
 11  .el-button--small {
 12      height: auto;
 13  }
 14  .el-textarea > .el-textarea__inner {
 15      min-height: 117px !important;
 16      border-radius: 8px;
 17      margin-top: 16px;
 18  }
 19  .tk-preview-container {
 20      border-radius: 8px;
 21  }
 22  .tk-comments-count {
 23      font-size: 14px;
 24      color: #666;
 25  }
 26  .tk-nick,
 27  .tk-replies .tk-nick-link {
 28      font-size: 15px;
 29      margin-right: 8px;
 30      color: #409eff;
 31  }
 32  .tk-tag {
 33      margin-right: 8px;
 34  }
 35  .tk-comments-container > .tk-comment {
 36      border: solid 1px #f3f4f6;
 37      border-radius: 1rem;
 38      padding: 24px;
 39      margin-top: 0;
 40      margin-bottom: 24px;
 41      transition: all 0.3s ease;
 42  }
 43  .tk-comments-container > .tk-comment:hover {
 44      box-shadow: 0 4px 12px var(--vp-c-brand-1);
 45  }
 46  .tk-replies-expand > .tk-comment {
 47      border-top: solid 1px #f7f7f7;
 48      padding-top: 24px;
 49  }
 50  .tk-content p {
 51      line-height: 1.6;
 52  }
 53  a:not(.tk-ruser):not(.tk-nick-link) {
 54      color: #3072b3;
 55      font-weight: 500;
 56      text-underline-offset: 2px;
 57  }
 58  a:not(.tk-ruser):not(.tk-nick-link):hover {
 59      color: #409eff;
 60  }
 61  /* 代码块 */
 62  div.code-toolbar {
 63      border-radius: 8px !important;
 64      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
 65  }
 66  div.code-toolbar :not(pre) > code[class*="language-"],
 67  div.code-toolbar pre[class*="language-"] {
 68      background: #f5f5f5;
 69      border-radius: 8px;
 70  }
 71  div.code-toolbar pre[class*="language-"] {
 72      border-radius: 8px;
 73  }
 74  div.code-toolbar pre[class*="language-"]::before,
 75  div.code-toolbar pre[class*="language-"]::after {
 76      content: none;
 77  }
 78  div.code-toolbar pre[class*="language-"] > code {
 79      padding: 1em;
 80      border-left: 4px solid #409eff;
 81      border-radius: 8px;
 82  }
 83  div.code-toolbar > div.toolbar {
 84      z-index: 1;
 85      top: 8px;
 86      right: 8px;
 87  }
 88  div.code-toolbar > div.toolbar > .toolbar-item > button {
 89      display: none;
 90      padding: 0 6px;
 91      font-size: 12px;
 92      color: black;
 93  }
 94  div.code-toolbar:hover > div.toolbar > .toolbar-item > button {
 95      display: block;
 96  }
 97  .tk-admin-container {
 98      z-index: 1;
 99  }
100}
101
102.tk-avatar {
103  background-color: #ffffff00;
104}
105
106.tk-avatar .tk-avatar-img {
107  height: 41px !important;
108}
109.dark .twikoo {
110  .tk-comments-container > .tk-comment {
111      border-color: #454545;
112  }
113  .tk-comments-container > .tk-comment:hover {
114      box-shadow: 0 4px 12px var(--vp-c-brand-1);
115  }
116  .tk-replies-expand > .tk-comment {
117      border-color: #343434;
118  }
119  /* 代码块 */
120  div.code-toolbar pre[class*="language-"] > code {
121      filter: brightness(0.8);
122  }
123}

1@use "./Twikoo.scss" as *; // 评论框样式 - Hyde出品