164 lines
3.5 KiB
CSS
164 lines
3.5 KiB
CSS
/* ============================================================
|
|
* AKSRT 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;
|
|
}
|
|
}
|