Merge remote-tracking branch 'upstream/main'

ruibaby · Mar 5, 2024 · c33a91f · c33a91f
2 parents 95c452b + 4cbbce1
commit c33a91f
Show file tree

Hide file tree

Showing 9 changed files with 32 additions and 13 deletions.
diff --git a/README.md b/README.md
@@ -48,6 +48,7 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c
 
 | 变量名                                                                  | 描述                     |
 |-------------------------------------------------------------------------|------------------------|
+| `--halo-comment-widget-base-color`                                      | 基础文字颜色             |
 | `--halo-comment-widget-base-border-radius`                              | 基础元素的圆角           |
 | `--halo-comment-widget-base-font-size`                                  | 基础字体大小             |
 | `--halo-comment-widget-base-line-height`                                | 基础行高                 |
@@ -85,6 +86,8 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c
 
 ```css
 :root {
+
+  --halo-comment-widget-base-color: ;
   --halo-comment-widget-base-border-radius: ;
   --halo-comment-widget-base-font-size: ;
   --halo-comment-widget-base-line-height: ;
@@ -132,6 +135,8 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c
   .color-scheme-auto,
   [data-color-scheme='auto'] {
     color-scheme: dark;
+
+    --halo-comment-widget-base-color: #ffffff;
     --halo-comment-widget-component-form-input-bg-color: #475569;
     --halo-comment-widget-component-form-input-color: #ffffff;
     --halo-comment-widget-component-form-input-border-color: #495056;
@@ -166,6 +171,7 @@ Halo 插件的详细开发文档可查阅 [插件开发](https://docs.halo.run/c
 [data-color-scheme='dark'] {
   color-scheme: dark;
 
+  --halo-comment-widget-base-color: #ffffff;
   --halo-comment-widget-component-form-input-bg-color: #475569;
   --halo-comment-widget-component-form-input-color: #ffffff;
   --halo-comment-widget-component-form-input-border-color: #495056;

diff --git a/packages/comment-widget/src/base-comment-item.ts b/packages/comment-widget/src/base-comment-item.ts
@@ -82,7 +82,7 @@ export class BaseCommentItem extends LitElement {
       }
 
       .item__author {
-        color: initial;
+        color: var(--base-color);
         font-weight: 500;
         font-size: 0.875em;
       }
@@ -98,7 +98,7 @@ export class BaseCommentItem extends LitElement {
       }
 
       .item__content pre {
-        color: initial;
+        color: var(--base-color);
         white-space: pre-wrap;
         overflow-wrap: break-word;
         word-break: break-all;

diff --git a/packages/comment-widget/src/base-form.ts b/packages/comment-widget/src/base-form.ts
@@ -244,7 +244,7 @@ export class BaseForm extends LitElement {
       }
 
       .form__anonymous-inputs a:hover {
-        color: inherit;
+        color: var(--base-color);
       }
 
       input,
@@ -274,11 +274,11 @@ export class BaseForm extends LitElement {
       }
 
       .form__account-info {
+        color: var(--base-color);
         display: flex;
         align-items: center;
         flex-wrap: wrap;
         gap: 0.75em;
-        color: initial;
       }
 
       .form__account-info img {

diff --git a/packages/comment-widget/src/comment-pagination.ts b/packages/comment-widget/src/comment-pagination.ts
@@ -158,8 +158,8 @@ export class CommentPagination extends LitElement {
       .pagination__button button,
       .pagination__number button {
         border-radius: var(--base-border-radius);
+        color: var(--base-color);
         font-size: 0.875em;
-        color: initial;
         display: inline-flex;
         align-items: center;
         font-weight: 600;

diff --git a/packages/comment-widget/src/comment-widget.ts b/packages/comment-widget/src/comment-widget.ts
@@ -207,10 +207,10 @@ export class CommentWidget extends LitElement {
       }
 
       .comment-widget__stats {
+        color: var(--base-color);
         font-size: 0.875em;
         margin: 0.875em 0;
         font-weight: 500;
-        color: initial;
       }
     `,
   ];

diff --git a/packages/comment-widget/src/emoji-button.ts b/packages/comment-widget/src/emoji-button.ts
@@ -119,7 +119,7 @@ export class EmojiButton extends LitElement {
       }
 
       .emoji-button:hover {
-        color: initial;
+        color: var(--base-color);
       }
 
       .form__emoji-panel {
@@ -129,13 +129,26 @@ export class EmojiButton extends LitElement {
         box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.1);
         border-radius: 0.875em;
         overflow: hidden;
+        animation: fadeInUp 0.3s both;
       }
 
       @media (max-width: 640px) {
         .form__emoji-panel {
           right: -7.8em;
         }
       }
+
+      @keyframes fadeInUp {
+        from {
+          opacity: 0;
+          transform: translate3d(0, 5%, 0);
+        }
+
+        to {
+          opacity: 1;
+          transform: translate3d(0, 0, 0);
+        }
+      }
     `,
   ];
 }

diff --git a/packages/comment-widget/src/reply-item.ts b/packages/comment-widget/src/reply-item.ts
@@ -228,14 +228,10 @@ export class ReplyItem extends LitElement {
         flex-direction: row;
         align-items: center;
         gap: 0.25em;
-        padding-left: 0.25em;
-        padding-right: 0.25em;
-        padding-top: 0.125em;
-        padding-bottom: 0.125em;
+        padding: 0 0.3em;
         font-weight: 500;
         font-size: 0.75em;
-        line-height: 1em;
-        border-radius: 0.25em;
+        border-radius: 0.3em;
         background-color: #e5e7eb;
         color: #4b5563;
         cursor: pointer;

diff --git a/packages/comment-widget/src/styles/var.ts b/packages/comment-widget/src/styles/var.ts
@@ -3,6 +3,7 @@ import { css } from 'lit';
 const varStyles = css`
   :host {
     /* Base */
+    --base-color: var(--halo-comment-widget-base-color, #333);
     --base-border-radius: var(--halo-comment-widget-base-border-radius, 0.4em);
     --base-font-size: var(--halo-comment-widget-base-font-size, 1rem);
     --base-line-height: var(--halo-comment-widget-base-line-height, 1.25em);

diff --git a/packages/comment-widget/var.css b/packages/comment-widget/var.css
@@ -2,6 +2,8 @@
   .color-scheme-auto,
   [data-color-scheme='auto'] comment-widget {
     color-scheme: dark;
+
+    --halo-comment-widget-base-color: #ffffff;
     --halo-comment-widget-component-form-input-bg-color: #475569;
     --halo-comment-widget-component-form-input-color: #ffffff;
     --halo-comment-widget-component-form-input-border-color: #495056;
@@ -36,6 +38,7 @@
 [data-color-scheme='dark'] comment-widget {
   color-scheme: dark;
 
+  --halo-comment-widget-base-color: #ffffff;
   --halo-comment-widget-component-form-input-bg-color: #475569;
   --halo-comment-widget-component-form-input-color: #ffffff;
   --halo-comment-widget-component-form-input-border-color: #495056;