nanhaoluo/argon-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 优化评论表单布局，减少空白并统一输入框样式

Browse Source 
- 减少卡片内边距 (24px -> 20px)
- 减少标题字号和下边距
- 减少文本框高度和边距
- 统一输入框样式：圆角、边框、聚焦效果
- 输入框聚焦时显示主题色边框和阴影
- 优化 checkbox 和表情按钮的间距
- 整体布局更紧凑
This commit is contained in:
nanhaoluo
2026-01-12 14:37:45 +08:00
parent 7fea81d18f
commit 8cf05f68ea
1 changed files with 81 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

109
style.css
View File

@@ -6018,7 +6018,7 @@ html.darkmode .comment-edit-history-item {
/* 发送评论卡片优化 */ /* 发送评论卡片优化 */
#post_comment.card { #post_comment.card {
border-radius: 16px; border-radius: 16px;
padding: 24px; padding: 20px;
background: var(--color-foreground); background: var(--color-foreground);
box-shadow: box-shadow:
0 2px 8px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04),
@@ -6028,6 +6028,10 @@ html.darkmode .comment-edit-history-item {
transform var(--animation-normal) var(--ease-standard); transform var(--animation-normal) var(--ease-standard);
} }
#post_comment.card .card-body {
padding: 0;
}
#post_comment.card:hover { #post_comment.card:hover {
box-shadow: box-shadow:
0 4px 12px rgba(0, 0, 0, 0.06), 0 4px 12px rgba(0, 0, 0, 0.06),
@@ -6048,9 +6052,9 @@ html.darkmode #post_comment.card:hover {
.post-comment-title { .post-comment-title {
font-size: 20px; font-size: 18px;
font-weight: 600; font-weight: 600;
margin-bottom: 20px; margin-bottom: 12px;
} }
@@ -6063,13 +6067,14 @@ html.darkmode #post_comment.card:hover {
.post-comment-reply { .post-comment-reply {
margin-top: 20px; margin-top: 12px;
margin-bottom: 12px;
border: 1px solid rgba(var(--themecolor-rgbstr), 0.15); border: 1px solid rgba(var(--themecolor-rgbstr), 0.15);
border-radius: 12px; border-radius: 10px;
padding: 16px 20px; padding: 12px 16px;
background: rgba(var(--themecolor-rgbstr), 0.03); background: rgba(var(--themecolor-rgbstr), 0.03);
@@ -6077,13 +6082,13 @@ html.darkmode #post_comment.card:hover {
.post-comment-reply-preview { .post-comment-reply-preview {
margin-top: 12px; margin-top: 10px;
border-left: 3px solid var(--themecolor); border-left: 3px solid var(--themecolor);
padding: 12px 16px; padding: 10px 14px;
max-height: 200px; max-height: 150px;
overflow: hidden; overflow: hidden;
@@ -6092,6 +6097,8 @@ html.darkmode #post_comment.card:hover {
background: rgba(var(--themecolor-rgbstr), 0.02); background: rgba(var(--themecolor-rgbstr), 0.02);
border-radius: 0 8px 8px 0; border-radius: 0 8px 8px 0;
font-size: 13px;
} }
@@ -6109,7 +6116,7 @@ html.darkmode #post_comment.card:hover {
bottom: 0; bottom: 0;
height: 35px; height: 30px;
position: absolute; position: absolute;
@@ -6121,11 +6128,11 @@ html.darkmode #post_comment.card:hover {
#post_comment_reply_cancel { #post_comment_reply_cancel {
margin-top: 16px; margin-top: 10px;
border-radius: 8px; border-radius: 8px;
padding: 8px 16px; padding: 6px 14px;
font-size: 13px; font-size: 13px;
@@ -6137,7 +6144,7 @@ html.darkmode #post_comment.card:hover {
overflow: hidden; overflow: hidden;
min-height: 100px; min-height: 80px;
resize: none; resize: none;
@@ -6145,19 +6152,21 @@ html.darkmode #post_comment.card:hover {
word-wrap: break-word; word-wrap: break-word;
margin-bottom: 18px; margin-bottom: 12px;
margin-top: 16px; margin-top: 0;
border-radius: 12px; border-radius: 10px;
border: 1px solid var(--color-border-on-foreground-deeper); border: 1px solid var(--color-border-on-foreground-deeper);
padding: 14px 16px; padding: 12px 14px;
font-size: 14px; font-size: 14px;
line-height: 1.6; line-height: 1.6;
background-color: var(--color-widgets);
} }
@@ -6166,6 +6175,41 @@ html.darkmode #post_comment.card:hover {
box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.1); box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.1);
} }
/* 评论表单输入框统一样式 */
#post_comment .input-group-alternative {
margin-bottom: 12px !important;
border-radius: 10px;
overflow: hidden;
border: 1px solid var(--color-border-on-foreground-deeper);
box-shadow: none;
background-color: var(--color-widgets);
transition: border-color var(--animation-normal) var(--ease-standard), box-shadow var(--animation-normal) var(--ease-standard);
}
#post_comment .input-group-alternative:focus-within {
border-color: var(--themecolor);
box-shadow: 0 0 0 3px rgba(var(--themecolor-rgbstr), 0.1);
}
#post_comment .input-group-alternative .input-group-text {
background-color: transparent;
border: none;
color: var(--themecolor);
padding: 10px 12px;
}
#post_comment .input-group-alternative .form-control {
border: none;
background-color: transparent;
padding: 10px 12px 10px 0;
height: auto;
font-size: 14px;
}
#post_comment .input-group-alternative .form-control:focus {
box-shadow: none;
}
#post_comment_content_hidden { #post_comment_content_hidden {
font-family: inherit !important; font-family: inherit !important;
@@ -6312,17 +6356,19 @@ html.darkmode #post_comment.card:hover {
display: inline-block; display: inline-block;
margin-top: 15px; margin-top: 8px;
height: 30px; height: 28px;
margin-right: 10px; margin-right: 8px;
} }
.comment-post-checkbox .custom-control-label { .comment-post-checkbox .custom-control-label {
line-height: 28px; line-height: 26px;
font-size: 13px;
} }
@@ -6402,7 +6448,7 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri
.comment-btn { .comment-btn {
margin-top: 5px; margin-top: 0;
margin-right: 8px; margin-right: 8px;
@@ -6442,13 +6488,13 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri
border-radius: 100px; border-radius: 100px;
width: 42px; width: 38px;
height: 42px; height: 38px;
padding: 0; padding: 0;
font-size: 25px; font-size: 22px;
background: transparent !important; background: transparent !important;
@@ -6460,21 +6506,28 @@ html.darkmode #post_comment.post-comment-force-privatemode-off .comment-post-pri
transform: none; transform: none;
opacity: 0.8; opacity: 0.7;
margin-top: 6px; margin-top: 0;
margin-right: 10px; margin-right: 8px;
transition: all 0.3s ease; transition: all 0.3s ease;
} }
#comment_emotion_btn:hover {
opacity: 1;
color: var(--themecolor);
}
#comment_emotion_btn.comment-emotion-keyboard-open { #comment_emotion_btn.comment-emotion-keyboard-open {
border-radius: 100px; border-radius: 100px;
color: var(--themecolor); color: var(--themecolor);
opacity: 1;
} }