fix(comments): 移除与 vendor 正版样式冲突的移植 CSS，评论区样式回归 zibll 原生
vendor assets/vendor/zibll/css/main.min.css 本就是 Zibll 完整样式表， 已包含评论区全部桌面规则、移动端媒体查询（.mobile-fixed 弹层动画/ .virtual-input/.pagenav/.tab-nav-theme/.dropdown-menu/.line-form/ .placeholder 等）及 <name>/badge/.but/.actived 等组件。此前移植的 comments/shell.css、mobile-item.css、comment-tools.css 大量复制这些 规则且带 #comments id 前缀、加载更晚，覆盖了 vendor 正版值，导致 评论区 UI 与参考主题不一致。 三个文件缩减为「仅补缺口」： - shell.css：只留 AKSRT 身份徽章两条规则 - mobile-item.css：无缺口，仅保留文件维持 enqueue 句柄链 - comment-tools.css：删除评论代码块重复段，只留投稿/分享/TOC
This commit is contained in:
kate522 committed
1 parent
608a1148c9
commit
4f2391fb64
3 files changed
+33
-882
No files matched your search
@@ -1,175 +1,8 @@
|
||||
/* ============================================================
|
||||
* AKSRT Comments — Zibll 1:1 移动端 + FixedInput / virtual-input
|
||||
* AKSRT Comments 移动端 — 补充层
|
||||
*
|
||||
* 移动端规则来源：zibll/css/main.css 移动端媒体查询中的评论段。
|
||||
* 移动端评论样式（.mobile-fixed 弹层、.virtual-input 假输入、
|
||||
* 头像/缩进/分页的移动端覆盖）全部由 vendor main.min.css 的
|
||||
* @media (max-width:767px) 提供，此处不复制，避免覆盖正版样式。
|
||||
* 目前无补充规则，保留文件以维持 enqueue 句柄链。
|
||||
* ============================================================ */
|
||||
|
||||
.virtual-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 移动端虚拟输入条 + 吸底表单（FixedInput） */
|
||||
@media (max-width: 767.98px) {
|
||||
.virtual-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 10px 12px;
|
||||
margin-bottom: 12px;
|
||||
border-radius: 999px;
|
||||
background: var(--surface-1, #fff);
|
||||
box-shadow: var(--shadow-sm, 0 1px 4px rgba(0, 0, 0, .06));
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.virtual-input .avatar,
|
||||
.virtual-input .avatar-img {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.virtual-input .simulation {
|
||||
flex: 1;
|
||||
color: var(--color-ink-4, #999);
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#respond.mobile-fixed {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 1050;
|
||||
background: var(--surface-1, #fff);
|
||||
border-radius: 12px 12px 0 0;
|
||||
box-shadow: 0 -8px 28px rgba(0, 0, 0, .12);
|
||||
padding: 12px 14px max(12px, env(safe-area-inset-bottom));
|
||||
transform: translateY(110%);
|
||||
transition: transform .25s ease;
|
||||
max-height: 85vh;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#respond.mobile-fixed.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
#respond.mobile-fixed .fixed-body {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, .35);
|
||||
z-index: -1;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity .2s ease;
|
||||
}
|
||||
|
||||
#respond.mobile-fixed.show .fixed-body {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#respond.mobile-fixed .comt-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* ---- zibll 移动端评论规则 ---- */
|
||||
#comments .comt-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#comments .comt-box {
|
||||
width: 100%;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#comments .list-inline {
|
||||
padding: 15px 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#comments .comment-signarea h3 {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
#comments .comt-tips-left .but svg,
|
||||
#comments .comt-tips-left .but .fa {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
#comments .hide-sm {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#comments .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: 0;
|
||||
}
|
||||
|
||||
#postcomments .children .children {
|
||||
margin-left: 13px;
|
||||
}
|
||||
|
||||
#postcomments .children .list-inline {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
#comments .pagenav a,
|
||||
#comments .pagination ul > li {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#comments .pagenav a.next,
|
||||
#comments .pagenav a.prev {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#comments .pagenav .page-numbers {
|
||||
font-size: 12px;
|
||||
margin: 2px;
|
||||
min-width: 28px;
|
||||
}
|
||||
|
||||
#postcomments .post_ajax_loader .ml20 {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
.hide-pc {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
Reference in new issue
Block a user