评论区硬切换实现
This commit is contained in:
+359
-13
@@ -1,15 +1,207 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
#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;
|
||||
}
|
||||
|
||||
.virtual-input {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.commentlist .no-more {
|
||||
margin: 0;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
/* source: assets/css/frontend/comments/shell.css */
|
||||
/* ============================================================
|
||||
* AKSRT Comments — 补充层
|
||||
*
|
||||
* 评论区的全部样式以 vendor 的 legacy 正版样式为准：
|
||||
* assets/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 特有标记的样式，禁止复制 legacy 规则——
|
||||
* 带 #comments id 前缀的副本会覆盖 vendor 正版样式造成 UI 偏差。
|
||||
* 评论区布局样式已硬切换为自有版权（见 layout.css / mobile-item.css），
|
||||
* vendor main.min.css 不再提供评论区规则。
|
||||
* 本文件只放 AKSRT 特有标记的补充规则（identity chip/medal）。
|
||||
* 共享基础样式仍由 bundle 中更早加载的 bootstrap 3 与
|
||||
* core/tokens.css 提供。
|
||||
* ============================================================ */
|
||||
|
||||
/* 身份徽章（AKSRT 渲染于 <name> 内，对应 legacy 的认证/等级徽章位） */
|
||||
@@ -36,10 +228,164 @@
|
||||
|
||||
/* source: assets/css/frontend/comments/mobile-item.css */
|
||||
/* ============================================================
|
||||
* AKSRT Comments 移动端 — 补充层
|
||||
* AKSRT Comments — 移动端（1:1 自有版权）
|
||||
*
|
||||
* 移动端评论样式（.mobile-fixed 弹层、.virtual-input 假输入、
|
||||
* 头像/缩进/分页的移动端覆盖）全部由 vendor main.min.css 的
|
||||
* @media (max-width:767px) 提供，此处不复制，避免覆盖正版样式。
|
||||
* 目前无补充规则，保留文件以维持 enqueue 句柄链。
|
||||
* 自参考主题评论区移动端媒体查询段全量移植（表情与快捷短语
|
||||
* 不在复刻范围），vendor main.min.css 已剥离同段规则。
|
||||
* 依赖：bundle 中更早加载的 bootstrap 3 与 core/tokens.css 变量。
|
||||
* ============================================================ */
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.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;
|
||||
}
|
||||
}
|
||||
|
||||
Vendored
+1
-1
@@ -1 +1 @@
|
||||
#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:-.15em}
|
||||
#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;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}#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:.2em .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:.9}#postcomments .comment-content img{max-width:260px;max-height:350px;display:block;width:auto;height:auto}.virtual-input{display:none}.commentlist .no-more{margin:0;padding-bottom:10px}#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:-.15em}@media(max-width:767px){.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:.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 #0003;transition:.6s cubic-bezier(.28,.9,.34,.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:0}#postcomments .children .children{margin-left:13px}#postcomments .children .list-inline{padding:15px}#postcomments .post_ajax_loader .ml20{margin-left:5px}}
|
||||
|
||||
File diff suppressed because one or more lines are too long
Vendored
+1
-1
File diff suppressed because one or more lines are too long
@@ -1386,17 +1386,3 @@ html.dark .post-drop-meta__item:hover {
|
||||
.article-tags .but.c-green { color: #5cb85c; }
|
||||
.article-tags .but.c-purple { color: #9c27b0; }
|
||||
.article-tags .but.c-red { color: #f44336; }
|
||||
|
||||
|
||||
/* ===== legacy user-card after-box ===== */
|
||||
.user-card.author { margin-bottom: 16px; overflow: hidden; }
|
||||
.user-card.author .user-avatar { display: flex; justify-content: center; }
|
||||
.user-card.author .user-avatar .avatar,
|
||||
.user-card.author .user-avatar img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; }
|
||||
.user-card.author .user-name { display: flex; flex-wrap: nowrap; align-items: center; justify-content: center; gap: 4px; }
|
||||
.user-card.author .user-name .display-name { font-weight: 700; color: var(--key-color, inherit); }
|
||||
.user-card.author .user-desc { text-align: center; }
|
||||
.user-card.author .user-btns { text-align: center; }
|
||||
.user-card.author .user-card-posts ul { list-style: none; margin: 0; padding: 0; }
|
||||
.user-card.author .user-card-posts li { padding: 6px 0; border-bottom: 1px dashed var(--color-line, rgba(0,0,0,.06)); }
|
||||
.user-card.author .user-card-posts li:last-child { border-bottom: 0; }
|
||||
|
||||
Vendored
+1
-1
File diff suppressed because one or more lines are too long
Reference in New Issue
Block a user