403 lines
8.9 KiB
CSS
403 lines
8.9 KiB
CSS
/* source: assets/css/frontend/comments/layout.css */
|
||
/* ============================================================
|
||
* 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;
|
||
/* 阻断外部作者卡片样式（如 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;
|
||
}
|
||
|
||
#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;
|
||
}
|
||
|
||
/* 假输入条仅移动端显示。必须带 #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 */
|
||
/* ============================================================
|
||
* AKSRT Comments — 补充层
|
||
*
|
||
* 评论区布局样式已硬切换为自有版权（见 layout.css / mobile-item.css），
|
||
* vendor main.min.css 不再提供评论区规则。
|
||
* 本文件只放 AKSRT 特有标记的补充规则（identity chip/medal）。
|
||
* 共享基础样式仍由 bundle 中更早加载的 bootstrap 3 与
|
||
* core/tokens.css 提供。
|
||
* ============================================================ */
|
||
|
||
/* 身份徽章（AKSRT 渲染于 <name> 内，对应 legacy 的认证/等级徽章位） */
|
||
#comments .comment-header .aksrt-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 .aksrt-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 */
|
||
/* ============================================================
|
||
* 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;
|
||
}
|
||
}
|