评论区硬切换实现
This commit is contained in:
kate522 committed
1 parent
ed914d2eec
commit
b8ef4d81a4
32 files changed
+946
-1008
No files matched your search
@@ -0,0 +1,193 @@
|
||||
/* ============================================================
|
||||
* 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;
|
||||
}
|
||||
@@ -1,8 +1,162 @@
|
||||
/* ============================================================
|
||||
* 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;
|
||||
}
|
||||
}
|
||||
@@ -1,14 +1,11 @@
|
||||
/* ============================================================
|
||||
* 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 的认证/等级徽章位） */
|
||||
|
||||
Reference in new issue
Block a user