diff --git a/assets/css/frontend/comment-tools.css b/assets/css/frontend/comment-tools.css index dba32dbe..994ee989 100644 --- a/assets/css/frontend/comment-tools.css +++ b/assets/css/frontend/comment-tools.css @@ -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%; diff --git a/assets/css/frontend/comments/mobile-item.css b/assets/css/frontend/comments/mobile-item.css index 9ac7217d..2bc45018 100644 --- a/assets/css/frontend/comments/mobile-item.css +++ b/assets/css/frontend/comments/mobile-item.css @@ -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; - } -} diff --git a/assets/css/frontend/comments/shell.css b/assets/css/frontend/comments/shell.css index 50e6c782..21577856 100644 --- a/assets/css/frontend/comments/shell.css +++ b/assets/css/frontend/comments/shell.css @@ -1,696 +1,34 @@ /* ============================================================ - * 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 渲染于 内,随 zibll ml3 间距) */ +/* 身份徽章(AKSRT 渲染于 内,对应 zibll 的认证/等级徽章位) */ #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; + 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; + display: inline-block; + width: auto; + height: 1.1em; + max-width: 6em; + object-fit: contain; + vertical-align: -0.15em; }