Claude
4325ce0c1c
The level (等级) badge was wrapping to its own line below the username and rendering at the intrinsic PNG size in most surfaces. Centralize the badge sizing after zibll's `.img-icon` (height: 1.1em, inline-block) in base.css so every route gets the same compact inline badge, and keep the name row from flex-wrapping. - Add shared `.aksrt-user-level-icon / .aksrt-identity-medal` rule + nowrap name rows in base.css (loaded on all routes). - Header dropdown: append the level icon next to the display name (was a separate badges row); constrain the name to ellipsis so the badge never wraps. - User center profile header & author hero: render the level icon inside the <h1> name row; drop the duplicate level chip from the signals row. - Single article author bar / after-box author card: nowrap the name row and size the level icon to 1.2em (was unstyled → intrinsic PNG size). - Comments: inner <name> nowrap with a name clamp; medal sized to 1em. - Consolidate the per-route `.aksrt-user-level-icon` duplicates in user-center/level.css and profile/layout.css onto the shared rule. Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
792 lines
17 KiB
CSS
792 lines
17 KiB
CSS
/* ============================================================
|
|
* AKSRT Comments — v4.0 Zibll-Inspired
|
|
*
|
|
* 功能：
|
|
* - 评论表单（头像 + 输入框 + 操作栏）
|
|
* - 评论列表（嵌套回复 + 头像 + 时间）
|
|
* - 排序/过滤栏
|
|
* - 空状态
|
|
* - 移动端固定底部输入框（可选）
|
|
* ============================================================ */
|
|
|
|
/* ============================================================
|
|
* 评论区容器
|
|
* ============================================================ */
|
|
.comments-area {
|
|
margin: 0;
|
|
padding: 0;
|
|
/* 对齐 zibll: 45px */
|
|
--aksrt-comment-avatar: 45px;
|
|
--aksrt-comment-avatar-form: 45px;
|
|
--aksrt-comment-indent: 48px;
|
|
}
|
|
|
|
/* 评论标题 */
|
|
.comments-header {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.comments-title {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
margin: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.comments-title i {
|
|
color: var(--color-primary);
|
|
font-size: 16px;
|
|
}
|
|
|
|
.comments-count {
|
|
font-size: 0.8125rem;
|
|
font-weight: 400;
|
|
color: var(--color-ink-4);
|
|
}
|
|
|
|
/* ============================================================
|
|
* 登录提示
|
|
* ============================================================ */
|
|
.comment-login-prompt {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.comment-login-prompt__inner {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
padding: 16px 18px;
|
|
border-radius: var(--main-radius, var(--radius, 8px));
|
|
background: var(--surface-1);
|
|
border: none;
|
|
box-shadow: var(--shadow-sm);
|
|
font-size: 14px;
|
|
color: var(--color-ink-4);
|
|
}
|
|
|
|
.comment-login-prompt__inner i {
|
|
font-size: 16px;
|
|
color: var(--color-ink-4);
|
|
}
|
|
|
|
.comment-login-prompt__btns {
|
|
margin-left: auto;
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* ============================================================
|
|
* 评论表单
|
|
* ============================================================ */
|
|
.comment-respond {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.comment-form__inner {
|
|
display: flex;
|
|
gap: 10px;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.comment-form__avatar {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.comment-form__avatar img {
|
|
width: var(--aksrt-comment-avatar-form);
|
|
height: var(--aksrt-comment-avatar-form);
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.comment-form__avatar-placeholder {
|
|
width: var(--aksrt-comment-avatar-form);
|
|
height: var(--aksrt-comment-avatar-form);
|
|
border-radius: 50%;
|
|
background: var(--surface-3);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: var(--color-ink-4);
|
|
}
|
|
|
|
.comment-form__body {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.comment-form__reply-info {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ink-4);
|
|
margin-bottom: 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
.comment-form__cancel-reply {
|
|
color: var(--color-error, #ef4444);
|
|
font-size: 12px;
|
|
}
|
|
|
|
.comment-form__textarea {
|
|
width: 100%;
|
|
min-height: 96px;
|
|
resize: vertical;
|
|
border-radius: 10px;
|
|
border: 1px solid var(--color-line);
|
|
padding: 12px 14px;
|
|
font-size: 14px;
|
|
background: var(--surface-4, var(--main-bg-color, var(--surface-1)));
|
|
color: var(--color-ink);
|
|
transition: border-color 0.2s ease, box-shadow 0.2s ease;
|
|
}
|
|
|
|
.comment-form__textarea:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary);
|
|
box-shadow: 0 0 0 3px var(--color-primary-soft);
|
|
}
|
|
|
|
.comment-form__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-top: 10px;
|
|
gap: 8px;
|
|
}
|
|
|
|
.comment-form__tools {
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
.comment-form__submit-area {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-left: auto;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.comment-form__guest {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
gap: 6px;
|
|
}
|
|
|
|
.comment-form__guest-toggle {
|
|
background: none;
|
|
border: 0;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
color: var(--muted-color, #8b9198);
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.comment-form__guest-toggle:hover,
|
|
.comment-form__guest-toggle[aria-expanded="true"] {
|
|
color: var(--focus-color, #f04494);
|
|
}
|
|
|
|
.comment-form__guest-fields {
|
|
display: flex;
|
|
gap: 6px;
|
|
align-items: center;
|
|
max-height: 0;
|
|
overflow: hidden;
|
|
opacity: 0;
|
|
transition: max-height 0.2s ease, opacity 0.15s ease;
|
|
}
|
|
|
|
.comment-form__guest-fields.is-open,
|
|
.comment-form__guest-fields:not([hidden]) {
|
|
max-height: 48px;
|
|
opacity: 1;
|
|
}
|
|
|
|
.comment-form__guest-field {
|
|
width: 110px;
|
|
height: 30px;
|
|
font-size: 12px;
|
|
padding: 0 8px;
|
|
}
|
|
|
|
.comt-box .comt-textarea,
|
|
.comt-box #comment {
|
|
min-height: 72px;
|
|
padding: 10px 12px;
|
|
border-radius: 8px;
|
|
font-size: 13px;
|
|
line-height: 1.5;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.comt-ctrl {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.comment-form__submit {
|
|
height: 30px;
|
|
padding: 0 12px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.comment-form__submit {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
}
|
|
|
|
/* ============================================================
|
|
* 排序/过滤栏
|
|
* ============================================================ */
|
|
.comment-filter {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 10px 0;
|
|
margin-bottom: 12px;
|
|
border-bottom: 1px solid var(--color-line);
|
|
}
|
|
|
|
.comment-filter__tabs {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
gap: 4px;
|
|
}
|
|
|
|
.comment-filter__tabs li a {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--color-ink-4);
|
|
text-decoration: none;
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
}
|
|
|
|
.comment-filter__tabs li a:hover {
|
|
background: var(--surface-3);
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.comment-filter__tabs li.active a {
|
|
background: var(--color-primary-soft, rgba(240, 68, 148, 0.12));
|
|
color: var(--color-primary);
|
|
font-weight: 600;
|
|
}
|
|
|
|
/* Zibll-compatible class names used by aksrt-comments.php */
|
|
.comment-order-box {
|
|
display: flex;
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
gap: 4px;
|
|
}
|
|
.comment-order-box li a,
|
|
.comment-order-box .comment-orderby {
|
|
display: inline-block;
|
|
padding: 4px 12px;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
font-weight: 500;
|
|
color: var(--color-ink-4);
|
|
text-decoration: none;
|
|
transition: background 0.15s ease, color 0.15s ease;
|
|
}
|
|
.comment-order-box li a:hover,
|
|
.comment-order-box .comment-orderby:hover {
|
|
background: var(--surface-3);
|
|
color: var(--color-ink);
|
|
}
|
|
.comment-order-box li.active a,
|
|
.comment-order-box li.active .comment-orderby {
|
|
background: var(--color-primary-soft, rgba(240, 68, 148, 0.12));
|
|
color: var(--color-primary);
|
|
font-weight: 600;
|
|
}
|
|
.btn-only-author,
|
|
.comment-author-filter {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
padding: 4px 12px;
|
|
border-radius: 999px;
|
|
border: 1px solid var(--color-line);
|
|
background: var(--surface-1);
|
|
color: var(--color-ink-3);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
text-decoration: none;
|
|
transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
.btn-only-author:hover,
|
|
.comment-author-filter:hover {
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
.btn-only-author.active,
|
|
.comment-author-filter.active {
|
|
border-color: var(--color-primary);
|
|
background: var(--color-primary-soft, rgba(240, 68, 148, 0.12));
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
/* ============================================================
|
|
* 评论列表
|
|
* ============================================================ */
|
|
.comment-list {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.comment-list .comment {
|
|
padding: 16px 0;
|
|
border-bottom: 1px solid var(--color-line);
|
|
}
|
|
|
|
.comment-list .comment:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
/* 嵌套回复 — 对齐 zibll: 86px 缩进 + 灰色背景 */
|
|
.comment-list .children {
|
|
list-style: none;
|
|
margin: 0;
|
|
margin-left: 86px;
|
|
}
|
|
|
|
.comment-list .children .comment {
|
|
padding: 14px 16px;
|
|
background: var(--surface-4, rgba(0, 0, 0, 0.03));
|
|
border: 1px solid var(--color-line-soft);
|
|
border-radius: var(--radius-lg);
|
|
}
|
|
|
|
/* 深层嵌套缩进递减 */
|
|
.comment-list .children .children {
|
|
margin-left: 13px;
|
|
}
|
|
|
|
/* 评论项内部结构（由 aksrt_comment_callback 渲染） */
|
|
.aksrt-comment__body {
|
|
display: flex;
|
|
gap: 12px;
|
|
}
|
|
|
|
.aksrt-comment__avatar {
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.aksrt-comment__avatar img {
|
|
width: var(--aksrt-comment-avatar);
|
|
height: var(--aksrt-comment-avatar);
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.aksrt-comment__content {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.aksrt-comment__header {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-bottom: 6px;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.aksrt-comment__author {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.aksrt-comment__author a {
|
|
color: inherit;
|
|
}
|
|
|
|
.aksrt-comment__author a:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.aksrt-comment__badge {
|
|
font-size: 10px;
|
|
padding: 1px 6px;
|
|
border-radius: 3px;
|
|
background: var(--color-primary-soft, rgba(240, 68, 148, 0.12));
|
|
color: var(--color-primary);
|
|
font-weight: 500;
|
|
}
|
|
|
|
.aksrt-comment__time {
|
|
font-size: 12px;
|
|
color: var(--color-ink-4);
|
|
}
|
|
|
|
.aksrt-comment__text {
|
|
font-size: 14px;
|
|
line-height: 1.6;
|
|
color: var(--color-ink);
|
|
margin: 0 0 8px;
|
|
word-wrap: break-word;
|
|
white-space: pre-wrap;
|
|
}
|
|
|
|
/* 对齐 zibll: 评论内图片限制 */
|
|
.aksrt-comment__text img:not(.smilie-icon) {
|
|
max-width: 260px;
|
|
max-height: 350px;
|
|
}
|
|
|
|
.aksrt-comment__text p {
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.aksrt-comment__text p:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.aksrt-comment__actions {
|
|
display: flex;
|
|
gap: 12px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.aksrt-comment__actions a,
|
|
.aksrt-comment__actions button {
|
|
color: var(--color-ink-4);
|
|
background: none;
|
|
border: none;
|
|
padding: 0;
|
|
cursor: pointer;
|
|
font-size: 12px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
transition: color 0.15s ease;
|
|
}
|
|
|
|
.aksrt-comment__actions a:hover,
|
|
.aksrt-comment__actions button:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
/* 嵌套回复中的头像更小 */
|
|
/* 对齐 zibll: 嵌套头像 26px */
|
|
.children .aksrt-comment__avatar img {
|
|
width: 26px;
|
|
height: 26px;
|
|
margin-right: 6px;
|
|
vertical-align: 2px;
|
|
}
|
|
|
|
/* ============================================================
|
|
* 空状态
|
|
* ============================================================ */
|
|
.comments-empty {
|
|
text-align: center;
|
|
padding: 40px 20px;
|
|
}
|
|
|
|
.comments-empty__icon {
|
|
font-size: 48px;
|
|
color: var(--color-ink-4);
|
|
opacity: 0.4;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
.comments-empty__text {
|
|
font-size: 1rem;
|
|
font-weight: 600;
|
|
color: var(--color-ink-4);
|
|
margin: 0 0 4px;
|
|
}
|
|
|
|
.comments-empty__hint {
|
|
font-size: 0.8125rem;
|
|
color: var(--color-ink-4);
|
|
margin: 0;
|
|
}
|
|
|
|
.comments-closed {
|
|
text-align: center;
|
|
font-size: 14px;
|
|
color: var(--color-ink-4);
|
|
padding: 20px;
|
|
}
|
|
|
|
/* ============================================================
|
|
* 评论分页
|
|
* ============================================================ */
|
|
.comment-pagination {
|
|
text-align: center;
|
|
padding: 16px 0;
|
|
}
|
|
|
|
/* ============================================================
|
|
* 移动端适配
|
|
* ============================================================ */
|
|
@media (max-width: 767px) {
|
|
.comment-form__inner {
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
}
|
|
|
|
.comment-form__avatar {
|
|
display: none;
|
|
}
|
|
|
|
.comment-form__submit-area {
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.comment-form__guest-field {
|
|
width: 100%;
|
|
}
|
|
|
|
.comment-list .children {
|
|
margin-left: 0;
|
|
}
|
|
|
|
.children .aksrt-comment__avatar img {
|
|
width: 36px;
|
|
height: 36px;
|
|
}
|
|
|
|
/* 移动端评论输入吸底 — 模仿 zibll mobile-fixed */
|
|
.comment-respond.comment-form--mobile-fixed {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
z-index: var(--z-sticky, 200);
|
|
background: var(--surface-1);
|
|
border-top: 1px solid var(--color-line);
|
|
box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.08);
|
|
padding: 12px 16px;
|
|
padding-bottom: max(12px, env(safe-area-inset-bottom));
|
|
}
|
|
|
|
.comment-respond.comment-form--mobile-fixed .comment-form__textarea {
|
|
min-height: 44px;
|
|
max-height: 120px;
|
|
}
|
|
|
|
.comment-respond.comment-form--mobile-fixed .comment-form__submit-area {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* 当评论区可见时隐藏吸底输入框 */
|
|
.comment-respond.comment-form--mobile-fixed.is-visible {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
/* ============================================================
|
|
* 暗色模式
|
|
* ============================================================ */
|
|
html.dark .comment-form__textarea,
|
|
body.dark-theme .comment-form__textarea {
|
|
background: var(--surface-2);
|
|
border-color: var(--color-line);
|
|
}
|
|
|
|
.theme-dark .comment-login-prompt__inner,
|
|
html.dark .comment-login-prompt__inner,
|
|
body.dark-theme .comment-login-prompt__inner {
|
|
background: var(--surface-1);
|
|
}
|
|
|
|
/* ============================================================
|
|
* 评论操作按钮（编辑/删除/审核）
|
|
* ============================================================ */
|
|
.aksrt-comment-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
margin-top: 8px;
|
|
}
|
|
|
|
.aksrt-comment-action-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 3px 10px;
|
|
border: 1px solid var(--color-line, rgba(50, 50, 50, 0.1));
|
|
border-radius: var(--radius, 8px);
|
|
background: var(--surface-1, #fff);
|
|
color: var(--color-ink-3, #777);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
cursor: pointer;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.aksrt-comment-action-btn:hover {
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
background: var(--color-primary-soft, rgba(240, 68, 148, 0.08));
|
|
}
|
|
|
|
.aksrt-comment-action-btn--danger:hover {
|
|
border-color: var(--color-error);
|
|
color: var(--color-error);
|
|
background: rgba(239, 68, 68, 0.08);
|
|
}
|
|
|
|
.aksrt-comment-action-btn--success:hover {
|
|
border-color: var(--color-success);
|
|
color: var(--color-success);
|
|
background: rgba(16, 185, 129, 0.08);
|
|
}
|
|
|
|
.aksrt-comment-edit-form {
|
|
margin: 8px 0;
|
|
}
|
|
|
|
.aksrt-comment-edit-textarea {
|
|
width: 100%;
|
|
min-height: 80px;
|
|
padding: 8px 12px;
|
|
border: 1px solid var(--color-line, #ddd);
|
|
border-radius: var(--radius, 8px);
|
|
font-size: 14px;
|
|
font-family: var(--font-body);
|
|
color: var(--color-ink);
|
|
background: var(--surface-1, #fff);
|
|
resize: vertical;
|
|
transition: border-color 0.15s;
|
|
}
|
|
|
|
.aksrt-comment-edit-textarea:focus {
|
|
outline: none;
|
|
border-color: var(--color-primary);
|
|
}
|
|
|
|
/* ============================================================
|
|
* 评论互动：点赞 / 置顶 / 内联管理动作（统一合同）
|
|
* 这些动作均渲染在 .aksrt-comment__actions 内，复用其文字链按钮样式，
|
|
* 仅补充点赞激活态、置顶徽章与危险/成功色提示。
|
|
* ============================================================ */
|
|
.aksrt-comment__like.is-active,
|
|
.aksrt-comment__like.is-active i {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.aksrt-comment__like-count {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.aksrt-comment__action--danger:hover {
|
|
color: var(--color-error, #ef4444);
|
|
}
|
|
|
|
.aksrt-comment__action--success:hover {
|
|
color: var(--color-success, #10b981);
|
|
}
|
|
|
|
/* 置顶徽章 */
|
|
.aksrt-comment__badge--pinned {
|
|
background: var(--color-warning-soft, rgba(245, 158, 11, 0.14));
|
|
color: var(--color-warning, #d97706);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
|
|
/* 置顶评论容器高亮 */
|
|
.aksrt-comment--pinned > .aksrt-comment__body {
|
|
position: relative;
|
|
}
|
|
|
|
.comment-list .comment.aksrt-comment--pinned {
|
|
background: var(--color-warning-soft, rgba(245, 158, 11, 0.06));
|
|
border-radius: var(--radius, 8px);
|
|
padding-left: 12px;
|
|
padding-right: 12px;
|
|
}
|
|
|
|
/* zibll compat: emoji icon forced 30px */
|
|
.comment-content .smilie-icon,
|
|
.comment-form .smilie-icon {
|
|
width: 30px !important;
|
|
}
|
|
|
|
/* zibll compat: code block in comments */
|
|
.comment-content .enlighter-default {
|
|
margin-bottom: 0;
|
|
opacity: 0.9;
|
|
}
|
|
|
|
|
|
/* Identity chips + 神评 */
|
|
.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;
|
|
}
|
|
.aksrt-identity-chip--comment {
|
|
font-size: 11px;
|
|
padding: 0 6px;
|
|
}
|
|
.medal-icon.img-icon,
|
|
.aksrt-identity-medal {
|
|
display: inline-block;
|
|
width: auto;
|
|
height: 1.1em;
|
|
max-width: 6em;
|
|
object-fit: contain;
|
|
vertical-align: -.15em;
|
|
margin-left: 4px;
|
|
}
|
|
.aksrt-identity-medal--comment {
|
|
width: auto;
|
|
height: 1em;
|
|
}
|
|
.aksrt-identity-medal.is-wear {
|
|
outline: 1px solid rgba(245, 158, 11, 0.45);
|
|
border-radius: 3px;
|
|
}
|
|
.aksrt-comment__badge--hot {
|
|
color: #ea580c;
|
|
background: rgba(234, 88, 12, 0.1);
|
|
border-radius: 999px;
|
|
padding: 0 6px;
|
|
margin-left: 4px;
|
|
font-size: 11px;
|
|
}
|
|
.aksrt-comment__header .author-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
/* Inline name + level badge stay on one line; only the outer author-box wraps. */
|
|
.aksrt-comment__header name,
|
|
.aksrt-comment__header .author-box > name {
|
|
flex-wrap: nowrap;
|
|
white-space: nowrap;
|
|
}
|