diff --git a/argontheme.js b/argontheme.js index 62d3114..0c2b66b 100644 --- a/argontheme.js +++ b/argontheme.js @@ -955,6 +955,11 @@ if (argonConfig.waterflow_columns != "1") { !function(){ //回复评论 let replying = false , replyID = 0; + + /** + * 显示回复框 + * @param {number} commentID - 评论ID + */ function reply(commentID){ cancelEdit(false); replying = true; @@ -978,17 +983,33 @@ if (argonConfig.waterflow_columns != "1") { $("body,html").animate({ scrollTop: $('#post_comment').offset().top - 100 }, 400, 'easeOutCirc'); - $('#post_comment_reply_info').slideDown(350, 'easeOutCirc'); + + // 使用 CSS 动画显示回复框 + let replyInfo = $('#post_comment_reply_info'); + replyInfo.removeClass('reply-leaving').css('display', 'block'); + // 触发重排以确保动画生效 + replyInfo[0].offsetHeight; + replyInfo.addClass('reply-entering'); + setTimeout(function(){ $("#post_comment_content").focus(); - }, 350); + }, 300); } + + /** + * 取消回复 + */ function cancelReply(){ replying = false; replyID = 0; - $('#post_comment_reply_info').slideUp(250, 'easeOutCirc'); + let replyInfo = $('#post_comment_reply_info'); + replyInfo.removeClass('reply-entering').addClass('reply-leaving'); + setTimeout(function(){ + replyInfo.css('display', 'none').removeClass('reply-leaving'); + }, 200); $("#post_comment").removeClass("post-comment-force-privatemode-on post-comment-force-privatemode-off"); } + $(document).on("click" , ".comment-reply" , function(){ reply(this.getAttribute("data-id")); }); @@ -998,7 +1019,7 @@ if (argonConfig.waterflow_columns != "1") { $(document).on("pjax:click" , function(){ replying = false; replyID = 0; - $('#post_comment_reply_info').css("display", "none"); + $('#post_comment_reply_info').css("display", "none").removeClass('reply-entering reply-leaving'); $("#post_comment").removeClass("post-comment-force-privatemode-on post-comment-force-privatemode-off"); }); //编辑评论 diff --git a/comments.php b/comments.php index c6779eb..7d635b9 100644 --- a/comments.php +++ b/comments.php @@ -314,9 +314,19 @@ function resetGeetestCaptcha() {
diff --git a/style.css b/style.css index b970bce..55b6ea7 100644 --- a/style.css +++ b/style.css @@ -6010,77 +6010,147 @@ html.darkmode #post_comment.card:hover { } +/* ---------- 评论回复提示框 ---------- */ .post-comment-reply { - margin-top: 12px; margin-bottom: 12px; - + border-radius: 12px; + overflow: hidden; + background: linear-gradient(135deg, rgba(var(--themecolor-rgbstr), 0.08) 0%, rgba(var(--themecolor-rgbstr), 0.03) 100%); border: 1px solid rgba(var(--themecolor-rgbstr), 0.15); + transform-origin: top center; +} - border-radius: 10px; - +.post-comment-reply-header { + display: flex; + align-items: center; padding: 12px 16px; - - background: rgba(var(--themecolor-rgbstr), 0.03); + gap: 12px; + background: rgba(var(--themecolor-rgbstr), 0.05); + border-bottom: 1px solid rgba(var(--themecolor-rgbstr), 0.1); +} +.post-comment-reply-icon { + width: 32px; + height: 32px; + border-radius: 50%; + background: var(--themecolor); + color: #fff; + display: flex; + align-items: center; + justify-content: center; + font-size: 14px; + flex-shrink: 0; + box-shadow: 0 2px 8px rgba(var(--themecolor-rgbstr), 0.3); +} + +.post-comment-reply-meta { + flex: 1; + min-width: 0; +} + +.post-comment-reply-label { + font-size: 12px; + color: var(--color-text-light, #8898aa); + display: block; + line-height: 1.2; +} + +.post-comment-reply-name { + font-size: 14px; + font-weight: 600; + color: var(--themecolor); + display: block; + line-height: 1.3; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; +} + +.post-comment-reply-close { + width: 28px; + height: 28px; + border-radius: 50%; + border: none; + background: rgba(var(--themecolor-rgbstr), 0.1); + color: var(--themecolor); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: 12px; + flex-shrink: 0; + transition: all 0.2s ease; +} + +.post-comment-reply-close:hover { + background: var(--themecolor); + color: #fff; + transform: rotate(90deg); } .post-comment-reply-preview { - - margin-top: 10px; - - border-left: 3px solid var(--themecolor); - - padding: 10px 14px; - - max-height: 150px; - - overflow: hidden; - - position: relative; - - background: rgba(var(--themecolor-rgbstr), 0.02); - - border-radius: 0 8px 8px 0; - + padding: 12px 16px; font-size: 13px; - + line-height: 1.6; + color: var(--color-text, #525f7f); + max-height: 80px; + overflow: hidden; + position: relative; + background: rgba(255, 255, 255, 0.5); } -#post_comment_reply_preview:after { +html.darkmode .post-comment-reply-preview { + background: rgba(0, 0, 0, 0.2); +} +.post-comment-reply-preview::after { content: ""; - - background: linear-gradient(180deg, transparent 0%, var(--color-foreground) 100%); - - display: block; - - left: 0; - - right: 0; - - bottom: 0; - - height: 30px; - position: absolute; - + left: 0; + right: 0; + bottom: 0; + height: 30px; + background: linear-gradient(180deg, transparent 0%, rgba(var(--themecolor-rgbstr), 0.05) 100%); pointer-events: none; +} - transition: all 0.3s ease; +/* 回复框动画 */ +@keyframes replySlideIn { + from { + opacity: 0; + transform: scaleY(0.8) translateY(-10px); + } + to { + opacity: 1; + transform: scaleY(1) translateY(0); + } +} +@keyframes replySlideOut { + from { + opacity: 1; + transform: scaleY(1) translateY(0); + } + to { + opacity: 0; + transform: scaleY(0.8) translateY(-10px); + } +} + +.post-comment-reply.reply-entering { + animation: replySlideIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards; +} + +.post-comment-reply.reply-leaving { + animation: replySlideOut 0.2s ease-out forwards; } #post_comment_reply_cancel { - margin-top: 10px; - border-radius: 8px; - padding: 6px 14px; - font-size: 13px; - } #post_comment_content {