wordpress-theme-aksrt/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;
    }
}