评论区硬切换实现

2026-08-30 17:34:29 +08:00
1 parent ed914d2eec
commit b8ef4d81a4
@@ -0,0 +1,193 @@
+/* ============================================================
+ * AKSRT Comments — 主布局（1:1 自有版权）
+ *
+ * 自参考主题评论区段全量移植（表情与快捷短语不在复刻范围），
+ * 是评论区布局规则的唯一来源；vendor main.min.css 已剥离同段规则。
+ * 依赖 bundle 中更早加载的 bootstrap 3（.list-unstyled/.list-inline/
+ * .dropdown-menu）与 core/tokens.css 的 CSS 变量。
+ * ============================================================ */
+
+#comments .comment-box .comments-closed,
+#comments .action-text,
+#comments #cancel-comment-reply-link {
+    display: none;
+}
+
+#comments #postcomments .action-text,
+#comments #postcomments #cancel-comment-reply-link {
+    display: inline-block;
+}
+
+#comments .comt-title {
+    width: 90px;
+}
+
+#comments .comt-title .comt-avatar .avatar {
+    width: 60px;
+    height: 60px;
+}
+
+#comments #postcomments .comt-title {
+    display: none;
+}
+
+#respond:not(.mobile-fixed) #postcomments .comt-box {
+    padding: 5px 5px 4px 5px;
+    background: var(--main-bg-color);
+    border-radius: 4px;
+    margin-top: 12px;
+}
+
+#comments #postcomments .comt-ctrl .but {
+    margin-bottom: 2px;
+}
+
+#comments .list-inline {
+    padding: 15px;
+}
+
+#comment {
+    margin-bottom: 5px;
+}
+
+.comment-signarea {
+    background: var(--main-shadow);
+}
+
+#respond + #postcomments .comment-filter,
+.comment-signarea + #postcomments .comment-filter {
+    margin-top: 20px;
+}
+
+#postcomments .tab-nav-theme {
+    margin-top: 0;
+}
+
+#postcomments .tab-nav-theme li {
+    padding-bottom: 1px;
+}
+
+#postcomments .tab-nav-theme li::before {
+    bottom: -2px;
+}
+
+#postcomments .comment-footer {
+    position: relative;
+}
+
+#postcomments .avatar-img {
+    --this-size: 45px;
+    margin-right: 20px;
+}
+
+#postcomments .children .avatar-img {
+    --this-size: 26px;
+    vertical-align: 2px;
+    margin-right: 6px;
+}
+
+#postcomments .commentlist > .comment > .list-inline .author-box {
+    align-items: start;
+}
+
+#postcomments .commentlist > .comment > .list-inline .comment-footer {
+    margin-left: 65px;
+    margin-top: -25px;
+}
+
+#postcomments .comment .list-inline > .comt-main {
+    width: 100%;
+}
+
+#postcomments .commentlist .comment + .comment {
+    border-top: 1px solid var(--main-border-color);
+}
+
+#postcomments .comment .list-inline > li {
+    padding: 10px;
+    vertical-align: top;
+}
+
+#postcomments .comment-header {
+    font-size: 15px;
+    position: relative;
+}
+
+.comment-header .badge-status {
+    margin-top: 0;
+    width: 68px;
+    z-index: 0;
+}
+
+#postcomments .action count {
+    margin-left: 4px;
+}
+
+#postcomments .comt-meta > span:not(:empty) {
+    margin-right: 10px;
+    vertical-align: middle;
+}
+
+#postcomments .comt-meta > span a {
+    color: inherit;
+}
+
+#postcomments .comt-meta > span .but {
+    padding: 0.2em 0.8em;
+}
+
+#postcomments .comment-approve-link.unapprove {
+    color: #e87725;
+}
+
+#postcomments .comment-approve-link.approve {
+    color: #3695ff;
+}
+
+#postcomments .comt-meta > span .comment-trash-link {
+    color: #ff4b4b;
+}
+
+#postcomments .children {
+    margin-left: 86px;
+    background: var(--main-shadow);
+    border-radius: var(--main-radius);
+    margin-bottom: 6px;
+}
+
+#postcomments .children .children {
+    margin-left: 23px;
+}
+
+#postcomments .children .avatar-icontag {
+    font-size: 8px;
+    height: 14px;
+    width: 14px;
+}
+
+.comment-content {
+    word-wrap: break-word;
+    white-space: pre-wrap;
+}
+
+.comment-content .enlighter-default {
+    margin-bottom: 0;
+    opacity: 0.9;
+}
+
+#postcomments .comment-content img {
+    max-width: 260px;
+    max-height: 350px;
+    display: block;
+    width: auto;
+    height: auto;
+}
+
+.virtual-input {
+    display: none;
+}
+
+.commentlist .no-more {
+    margin: 0;
+    padding-bottom: 10px;
+}