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:
@@ -1,31 +1,11 @@
|
||||
/**
|
||||
* AKSRT Comment Tools
|
||||
*
|
||||
* 评论内容中的代码块样式。工具栏（表情/代码/图片/快捷回复）的 UI
|
||||
* 由 assets/css/frontend/comments/shell.css 按 zibll 选择器提供。
|
||||
* 评论相关样式（工具栏下拉、内容中的代码块/图片等）全部由 vendor
|
||||
* zibll main.min.css 提供，本文件不复制以免覆盖正版样式。
|
||||
* 仅保留页面级的投稿表单 / 分享按钮 / TOC 样式。
|
||||
*/
|
||||
|
||||
/* ========== 评论代码块 ========== */
|
||||
.comment-form textarea code,
|
||||
.comment-content code {
|
||||
padding: 2px 6px;
|
||||
background: var(--surface-secondary, #f5f5f5);
|
||||
border-radius: 4px;
|
||||
font-family: var(--font-mono, 'Fira Code', monospace);
|
||||
font-size: 0.875em;
|
||||
}
|
||||
|
||||
.comment-form textarea pre,
|
||||
.comment-content pre {
|
||||
padding: 12px;
|
||||
background: var(--surface-secondary, #f5f5f5);
|
||||
border-radius: 8px;
|
||||
overflow-x: auto;
|
||||
font-family: var(--font-mono, 'Fira Code', monospace);
|
||||
font-size: 0.875em;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
/* ========== 投稿页面增强 ========== */
|
||||
.aksrt-submit-form__cover-preview {
|
||||
width: 100%;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,679 +1,17 @@
|
||||
/* ============================================================
|
||||
* AKSRT Comments — Zibll 1:1 移植
|
||||
* AKSRT Comments — 补充层
|
||||
*
|
||||
* 来源：zibll/css/main.css L9412–9751（评论模块 + 分页）及评论所依赖的
|
||||
* 基础组件（title-theme / dropdown-menu / line-form / tab-nav-theme /
|
||||
* 工具栏下拉 / placeholder 骨架）。除 Zibll 原生 #comments/#postcomments
|
||||
* 作用域外，缺失的全局基础类一律以 #comments 前缀作用域移植，避免影响
|
||||
* 主题其它模块。
|
||||
* 评论区的全部样式以 vendor 的 Zibll 正版样式为准：
|
||||
* assets/vendor/zibll/css/main.min.css（含 #comments/#postcomments
|
||||
* 桌面规则与移动端媒体查询：.mobile-fixed/.virtual-input/.pagenav/
|
||||
* .tab-nav-theme/.dropdown-menu/.line-form/.placeholder 等）
|
||||
* + bootstrap 3（.list-unstyled/.list-inline）
|
||||
*
|
||||
* 本文件只补 AKSRT 特有标记的样式，禁止复制 Zibll 规则——
|
||||
* 带 #comments id 前缀的副本会覆盖 vendor 正版样式造成 UI 偏差。
|
||||
* ============================================================ */
|
||||
|
||||
/*------评论模块------*/
|
||||
#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;
|
||||
margin-left: 0;
|
||||
}
|
||||
|
||||
#comments .list-inline > li {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
#comment {
|
||||
margin-bottom: 5px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.smilie-icon {
|
||||
width: 30px !important;
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
.content-after-box,
|
||||
.comment-content {
|
||||
word-wrap: break-word;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.comment-content .enlighter-default {
|
||||
margin-bottom: 0;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
#postcomments .comment-content img:not(.smilie-icon) {
|
||||
max-width: 260px;
|
||||
max-height: 350px;
|
||||
display: block;
|
||||
width: auto;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.virtual-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.commentlist .no-more,
|
||||
#comments .theme-pagination.pagenav {
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
/*--------AJAX翻页按钮-----*/
|
||||
#comments .theme-pagination {
|
||||
margin: 20px 0;
|
||||
}
|
||||
|
||||
#comments .chat-next a,
|
||||
#comments .theme-pagination .ajax-next a,
|
||||
#comments .theme-pagination .order-ajax-next a {
|
||||
border-radius: 30px;
|
||||
padding: 5px 15px;
|
||||
color: var(--muted-color);
|
||||
opacity: 0.6;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#comments .chat-next a:hover,
|
||||
#comments .theme-pagination .ajax-next a:hover,
|
||||
#comments .theme-pagination .order-ajax-next a:hover {
|
||||
background: var(--main-border-color);
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#comments .chat-next a .fa,
|
||||
#comments .theme-pagination .ajax-next .fa,
|
||||
#comments .theme-pagination .ajax-next .icon,
|
||||
#comments .theme-pagination .order-ajax-next .fa,
|
||||
#comments .theme-pagination .order-ajax-next .icon {
|
||||
margin-right: 15px;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
#comments .chat-next a:hover .fa,
|
||||
#comments .theme-pagination .ajax-next a:hover .fa,
|
||||
#comments .theme-pagination .ajax-next a:hover .icon,
|
||||
#comments .theme-pagination .order-ajax-next a:hover .fa,
|
||||
#comments .theme-pagination .order-ajax-next a:hover .icon {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
/*--------数字分页按钮-----*/
|
||||
#comments .pagenav {
|
||||
overflow: hidden;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
transition: 0.2s;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
#comments .pagenav .current,
|
||||
#comments .pagenav .page-numbers,
|
||||
#comments .pagenav a {
|
||||
padding: 6px 9px 5px;
|
||||
color: var(--muted-color);
|
||||
display: inline-block;
|
||||
border-radius: 3px;
|
||||
background-color: var(--main-border-color);
|
||||
margin: 3px;
|
||||
min-width: 31px;
|
||||
}
|
||||
|
||||
#comments .pagenav .current {
|
||||
background-color: var(--focus-color) !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
#comments .pagenav a:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
#comments .pagenav .pag-jump {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#comments .pagenav .pag-jump .jump-icon {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
#comments .pagenav .pag-jump .jump-icon:hover {
|
||||
color: var(--focus-color);
|
||||
}
|
||||
|
||||
#comments .pagenav .pag-jump .jump-input {
|
||||
opacity: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border-radius: 3px;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
transition: 0.2s;
|
||||
padding: 5px 22px 5px 5px;
|
||||
}
|
||||
|
||||
#comments .pagenav .jump-input:focus,
|
||||
#comments .pagenav .pag-jump:hover .jump-input {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ============================================================
|
||||
* 评论依赖的基础组件（zibll main.css，作用域 #comments）
|
||||
* ============================================================ */
|
||||
|
||||
/* 标题（zibll .title-theme） */
|
||||
#comments .title-theme {
|
||||
position: relative;
|
||||
padding-left: 1.2em;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
#comments .title-theme small {
|
||||
font-size: 80%;
|
||||
opacity: 0.7;
|
||||
margin-left: 0.4em;
|
||||
}
|
||||
|
||||
#comments .title-theme::before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
width: 4px;
|
||||
background: var(--theme-color);
|
||||
top: 10%;
|
||||
left: 2px;
|
||||
bottom: 10%;
|
||||
border-radius: 5px;
|
||||
box-shadow: 1px 1px 3px -1px var(--theme-color);
|
||||
}
|
||||
|
||||
/* 下拉菜单（zibll .dropdown-menu） */
|
||||
#comments .dropdown-menu {
|
||||
border-color: transparent;
|
||||
background: var(--main-bg-color);
|
||||
--this-color: var(--main-color);
|
||||
color: var(--this-color);
|
||||
box-shadow: 0 0 10px 8px var(--main-shadow);
|
||||
min-width: 100px;
|
||||
opacity: 0;
|
||||
transform: translateY(6px);
|
||||
transition: 0.3s;
|
||||
display: block;
|
||||
margin-top: 6px;
|
||||
visibility: hidden;
|
||||
list-style: none !important;
|
||||
z-index: 992;
|
||||
border-radius: var(--main-radius);
|
||||
}
|
||||
|
||||
#comments .dropdown-menu a {
|
||||
border-radius: var(--mini-radius);
|
||||
}
|
||||
|
||||
#comments .dropup {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#comments span.dropup,
|
||||
#comments span.dropdown {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#comments .dropup .dropdown-menu {
|
||||
bottom: 100%;
|
||||
margin-bottom: 6px;
|
||||
margin-top: 0;
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
|
||||
#comments .open > .dropdown-menu,
|
||||
#comments .dropdown.open > .dropdown-menu {
|
||||
visibility: unset;
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
#comments .dropdown-menu > li > a {
|
||||
color: var(--this-color);
|
||||
padding: 6px 20px;
|
||||
text-shadow: none;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#comments .dropdown-menu > li > a:hover {
|
||||
background: var(--focus-color-opacity05);
|
||||
}
|
||||
|
||||
/* 游客信息 line-form（zibll .line-form / .scale-placeholder / .line-form-input） */
|
||||
#comments .line-form {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#comments .line-form .abs-right {
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
#comments .line-form-input {
|
||||
outline: 0 !important;
|
||||
border: none;
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 1em 2em 0.4em 0.3em;
|
||||
opacity: 0.8;
|
||||
transition: 0.3s;
|
||||
background: transparent !important;
|
||||
}
|
||||
|
||||
#comments .line-form-input::-webkit-input-placeholder {
|
||||
color: var(--muted-2-color);
|
||||
}
|
||||
|
||||
#comments .line-form-input:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#comments .scale-placeholder {
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
opacity: 0.5;
|
||||
transition: 0.2s;
|
||||
padding-left: 4px;
|
||||
transform-origin: left top;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
backface-visibility: hidden;
|
||||
z-index: 1;
|
||||
cursor: text;
|
||||
}
|
||||
|
||||
#comments .scale-placeholder.is-focus,
|
||||
#comments input:focus ~ .scale-placeholder {
|
||||
transform: translateY(-20px);
|
||||
font-size: 11px;
|
||||
}
|
||||
|
||||
#comments input:focus ~ .scale-placeholder {
|
||||
color: var(--focus-color);
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
/* 排序筛选标签（zibll .tab-nav-theme） */
|
||||
#comments .tab-nav-theme {
|
||||
border-bottom: 1px solid var(--main-border-color);
|
||||
padding-bottom: 6px;
|
||||
margin: 8px 0 5px;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#comments .tab-nav-theme li,
|
||||
#comments .tab-nav-theme ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
#comments .tab-nav-theme li {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 8px 6px;
|
||||
}
|
||||
|
||||
#comments .tab-nav-theme li::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 20px;
|
||||
height: 2px;
|
||||
background: var(--theme-color);
|
||||
border-radius: 5px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
margin: auto;
|
||||
bottom: 5px;
|
||||
opacity: 0;
|
||||
transition: 0.4s;
|
||||
}
|
||||
|
||||
#comments .tab-nav-theme li.active::before {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#comments .tab-nav-theme li a {
|
||||
color: var(--muted-color);
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#comments .tab-nav-theme li.active a {
|
||||
color: var(--focus-color);
|
||||
}
|
||||
|
||||
/* 置顶徽章（zibll badge.badge-topping） */
|
||||
#comments badge.badge-topping {
|
||||
min-width: 1.4em;
|
||||
padding: 0 2px;
|
||||
line-height: 1.4em;
|
||||
border-radius: 0.45em 2px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 工具栏下拉（zibll .dropdown-smilie / .dropdown-code / .dropdown-image / .dropdown-link / quick） */
|
||||
#comments .dropdown-smilie {
|
||||
width: 260px;
|
||||
height: 300px;
|
||||
padding: 8px 10px;
|
||||
white-space: inherit;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#comments .dropdown-smilie .smilie-icon {
|
||||
display: inline-block;
|
||||
padding: 3px;
|
||||
width: 38px !important;
|
||||
}
|
||||
|
||||
#comments .dropdown-smilie .smilie-icon img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#comments .dropdown-quick-often {
|
||||
width: 260px;
|
||||
}
|
||||
|
||||
#comments .dropdown-quick-often .scroll-y {
|
||||
max-height: 280px;
|
||||
}
|
||||
|
||||
#comments .dropdown-quick-often .list-inline {
|
||||
padding: 0 10px !important;
|
||||
}
|
||||
|
||||
#comments .quick-reply-item {
|
||||
padding: 6px 0;
|
||||
color: var(--muted-color);
|
||||
margin: 0 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#comments .quick-reply-item + .quick-reply-item {
|
||||
border-top: 1px solid var(--main-border-color);
|
||||
}
|
||||
|
||||
#comments .quick-reply-item:hover {
|
||||
color: var(--focus-color);
|
||||
}
|
||||
|
||||
#comments .dropdown-link,
|
||||
#comments .dropdown-code,
|
||||
#comments .dropdown-image {
|
||||
width: 250px;
|
||||
padding: 8px 10px;
|
||||
}
|
||||
|
||||
#comments .dropdown-menu .dropdown-link,
|
||||
#comments .dropdown-menu .dropdown-code,
|
||||
#comments .dropdown-menu .dropdown-image,
|
||||
#comments .dropdown-menu .dropdown-quick-often {
|
||||
box-shadow: none;
|
||||
background: transparent;
|
||||
min-width: 0;
|
||||
opacity: 1;
|
||||
visibility: unset;
|
||||
transform: none;
|
||||
margin: 0;
|
||||
display: block;
|
||||
}
|
||||
|
||||
#comments .scroll-y {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
/* 占位骨架（zibll .placeholder） */
|
||||
#comments .placeholder {
|
||||
background: linear-gradient(118deg, rgba(121, 121, 121, 0.1) 25%, rgba(121, 121, 121, 0.2) 37%, rgba(121, 121, 121, 0.1) 63%);
|
||||
opacity: 1;
|
||||
border-radius: 4px;
|
||||
animation: aksrt-comment-placeholder 1.5s ease infinite !important;
|
||||
background-size: 400% 100% !important;
|
||||
}
|
||||
|
||||
#comments .placeholder.k2 {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
#comments .placeholder.s1 {
|
||||
width: 70px;
|
||||
height: 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#comments .placeholder.radius {
|
||||
border-radius: 50%;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
#comments .post_ajax_loader {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes aksrt-comment-placeholder {
|
||||
0% {
|
||||
background-position: 100% 50%;
|
||||
}
|
||||
100% {
|
||||
background-position: 0 50%;
|
||||
}
|
||||
}
|
||||
|
||||
/* 工具类（zibll，作用域 #comments） */
|
||||
#comments .text-right {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
#comments .hide-sm {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
#comments .pw-1em {
|
||||
padding-left: 1em;
|
||||
padding-right: 1em;
|
||||
}
|
||||
|
||||
#comments .p2-10 {
|
||||
padding: 2px 10px;
|
||||
}
|
||||
|
||||
#comments .padding-6 {
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
#comments .mb6 {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
/* 评论作者行布局补充（zibll author-box / name） */
|
||||
#comments .comment-header .author-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#comments .comment-header name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
#comments .comment-header name a,
|
||||
#comments .comment-header name b {
|
||||
max-width: 14em;
|
||||
}
|
||||
|
||||
#comments .comment-header .action-comment-like {
|
||||
text-decoration: none;
|
||||
color: var(--muted-2-color);
|
||||
}
|
||||
|
||||
#comments .comment-header .action-comment-like.actived,
|
||||
#comments .comment-header .action-comment-like.actived .fa {
|
||||
color: var(--focus-color);
|
||||
}
|
||||
|
||||
#comments .comt-meta {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#comments .comt-meta .dropdown-menu a {
|
||||
display: block;
|
||||
}
|
||||
|
||||
/* 身份徽章（AKSRT 渲染于 <name> 内，随 zibll ml3 间距） */
|
||||
/* 身份徽章（AKSRT 渲染于 <name> 内，对应 zibll 的认证/等级徽章位） */
|
||||
#comments .comment-header .aksrt-identity-chip {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
Reference in New Issue
Block a user