wordpress-theme-aksrt/assets/css/build/comments.css

/* source: assets/css/frontend/comments/layout.css */
/* ============================================================
 * Jio 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;
    /* 阻断外部作者卡片样式（如 single-post/author-actions 的 .author-box 卡片）
       渗入评论头部：legacy 中评论头部是无装饰的 flex 行。 */
    margin-bottom: 0;
    padding: 0;
    background: none;
    border-radius: 0;
    box-shadow: none;
}

#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;
}

/* walker 输出的 <ol class="children"> 不带 .list-unstyled，而全局 reset 只覆盖 ul，
   必须在此重置，否则二级评论回潮出 ol 默认的 "1." 序号和 40px 缩进。 */
#postcomments .children {
    list-style: none;
    padding-left: 0;
    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;
}

/* 假输入条仅移动端显示。必须带 #comments 前缀（id 特异性）：
   标记上自带的 .flex{display:flex} 等单类工具规则无论加载顺序
   如何都压不过它，宽屏不会再重复出现假输入条。 */
#comments .virtual-input {
    display: none;
}

.commentlist .no-more {
    margin: 0;
    padding-bottom: 10px;
}

/* source: assets/css/frontend/comments/shell.css */
/* ============================================================
 * Jio Comments — 补充层
 *
 * 评论区布局样式已硬切换为自有版权（见 layout.css / mobile-item.css），
 * vendor main.min.css 不再提供评论区规则。
 * 本文件放 Jio 特有标记与评论图片上传的补充规则。
 * 共享基础样式仍由 bundle 中更早加载的 bootstrap 3 与
 * core/tokens.css 提供。
 * ============================================================ */

#comments .comment-image-tabs .comment-image-upload {
  margin: 0;
}

#comments .comment-image-upload-label {
  display: block;
  width: 100%;
}

#comments .comment-image-upload .preview {
  width: 100%;
  height: 96px;
  min-height: 96px;
  margin-bottom: 6px;
  overflow: hidden;
  border: 1px dashed var(--muted-border-color);
  border-radius: var(--main-radius);
  background: var(--main-shadow);
}

#comments .comment-image-upload .preview img {
  display: block;
  width: 100%;
  height: 96px;
  object-fit: cover;
}

#comments .comment-image-upload .input-expand-upload {
  min-width: 88px;
}

/* 上传中：按钮内容换成「加载点 + 文案 + 铺满按钮的条纹进度层」。
   按钮作为定位祖先，.progress 沿用 main.css 的绝对铺满（inset:0 / 100%）
   与负 z-index，progress-bar 走 Bootstrap 的 progress-bar-success 条纹；
   负层绘制在按钮背景之上、正文之下，因此文案与进度条同时可见。 */
#comments .comment-image-upload .input-expand-upload {
  position: relative;
  overflow: hidden;
}
#comments .comment-header .jio-identity-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  vertical-align: middle;
  max-width: 9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
}

#comments .comment-header .jio-identity-medal {
  display: inline-block;
  width: auto;
  height: 1.1em;
  max-width: 6em;
  object-fit: contain;
  vertical-align: -0.15em;
}

/* source: assets/css/frontend/comments/mobile-item.css */
/* ============================================================
 * Jio Comments — 移动端（1:1 自有版权）
 *
 * 自参考主题评论区移动端媒体查询段全量移植（表情与快捷短语
 * 不在复刻范围），vendor main.min.css 已剥离同段规则。
 * 依赖：bundle 中更早加载的 bootstrap 3 与 core/tokens.css 变量。
 * ============================================================ */

@media (max-width: 767px) {
    /* 与 layout.css 的桌面隐藏同特异性，靠 bundle 内靠后顺序在移动端反转。 */
    #comments .virtual-input {
        display: flex;
        height: 36px;
        border-radius: 120px;
        background: var(--main-shadow);
        color: var(--muted-2-color);
    }

    .virtual-input .but,
    .virtual-input img {
        width: 28px;
        height: 28px;
        border-radius: 120px;
        margin: 0 4px;
        flex-shrink: 0;
    }

    .virtual-input .but {
        width: auto;
        padding: 3px 10px;
    }

    .drop-fixed-sm .dropdown-menu,
    .mobile-fixed {
        position: fixed;
        transform: translateY(220%);
        transition: 0.6s;
        opacity: 1;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 22px 16px;
        background: var(--main-bg-color);
        z-index: 1080;
        border-radius: 10px 10px 0 0;
        margin: 0;
    }

    .drop-fixed-sm.open .dropdown-menu,
    .mobile-fixed.show {
        box-shadow: 0 -50px 50px rgba(0, 0, 0, 0.2);
        transition: 0.6s cubic-bezier(0.28, 0.9, 0.34, 0.99);
        transform: unset;
    }

    .mobile-fixed.show .fixed-body {
        visibility: unset;
        z-index: -1;
    }

    #respond.mobile-fixed {
        z-index: 1040;
    }

    .drop-fixed-sm .dropdown-menu {
        z-index: 1045;
        padding: 10px;
        top: auto !important;
        right: 0 !important;
        left: 0 !important;
        max-height: 50vh;
        overflow: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .drop-fixed-sm .dropdown-menu > li > a {
        font-size: 16px !important;
        padding: 10px 20px;
    }

    .modal-open .drop-fixed-sm.open .dropdown-menu {
        opacity: 0;
    }

    .drop-fixed-sm .dropdown-menu::before {
        display: none;
    }
}

@media (max-width: 640px) {
    #comments .comt-title {
        display: none;
    }

    #comments .comt-box {
        width: 100%;
        padding: 0;
    }

    #comments .list-inline {
        padding: 15px 0;
        margin: 0;
    }

    .comment-signarea h3 {
        font-size: 13px;
    }

    .comt-tips-left .but svg,
    .comt-tips-left .but .fa {
        margin: 0;
    }

    .btn-input-expand {
        width: 31px;
        padding: 0;
        height: 31px;
        line-height: 31px;
    }

    #postcomments .comment-header {
        font-size: 14px;
    }

    #postcomments .comt-meta {
        font-size: 12px;
    }

    #postcomments .comment .list-inline > li {
        padding: 0;
    }

    #postcomments .comment .list-inline > li + li {
        padding-left: 10px;
    }

    #postcomments .avatar-img {
        --this-size: 36px;
        margin-right: 10px;
    }

    #postcomments .commentlist > .comment > .list-inline .comment-footer {
        margin-left: 45px;
        margin-top: -15px;
    }

    #postcomments .children {
        margin-left: 0px;
    }

    #postcomments .children .children {
        margin-left: 13px;
    }

    #postcomments .children .list-inline {
        padding: 15px;
    }

    #postcomments .post_ajax_loader .ml20 {
        margin-left: 5px;
    }
}