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>
650 lines
15 KiB
CSS
650 lines
15 KiB
CSS
/* ===== Author Bar (inside article card) ===== */
|
|
.article-author-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.article-author-bar__avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
flex-shrink: 0;
|
|
}
|
|
|
|
.article-author-bar__info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.article-author-bar__name {
|
|
font-weight: 600;
|
|
font-size: 14px;
|
|
color: var(--color-ink);
|
|
}
|
|
|
|
.article-author-bar__name:hover {
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.article-author-bar__meta {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 10px;
|
|
font-size: 12px;
|
|
color: var(--color-ink-4, var(--color-ink-4));
|
|
margin-top: 2px;
|
|
}
|
|
|
|
.article-author-bar__meta span {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 3px;
|
|
}
|
|
|
|
.article-author-bar__line {
|
|
height: 1px;
|
|
background: var(--color-line);
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
/* ===== Content Footer ===== */
|
|
.article-footer {
|
|
margin-top: 32px;
|
|
padding-top: 20px;
|
|
border-top: 1px solid var(--color-line);
|
|
}
|
|
|
|
.article-copyright {
|
|
font-size: 13px;
|
|
color: var(--color-ink-4, var(--color-ink-4));
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.article-end-separator {
|
|
text-align: center;
|
|
margin: 16px 0;
|
|
position: relative;
|
|
}
|
|
|
|
.article-end-separator::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 0;
|
|
right: 0;
|
|
height: 1px;
|
|
background: var(--color-line);
|
|
}
|
|
|
|
.article-end-separator span {
|
|
position: relative;
|
|
display: inline-block;
|
|
padding: 0 14px;
|
|
background: var(--surface-page);
|
|
font-size: 11px;
|
|
font-weight: 600;
|
|
color: var(--color-ink-4, var(--color-ink-4));
|
|
letter-spacing: 2px;
|
|
}
|
|
|
|
.article-tags {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin-top: 12px;
|
|
}
|
|
|
|
/* ===== Action Buttons Card ===== */
|
|
.post-actions-wrap {
|
|
position: relative;
|
|
text-align: center;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* Zibll .post-actions — text/icon column buttons, not pill chips */
|
|
.post-actions-card,
|
|
.post-actions {
|
|
position: relative;
|
|
text-align: center;
|
|
margin-bottom: 16px;
|
|
padding-bottom: 15px;
|
|
display: block;
|
|
}
|
|
|
|
.post-actions-wrap > .post-actions {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
.post-actions-card__hint {
|
|
font-size: 13px;
|
|
color: var(--color-ink-4, var(--color-ink-4));
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* Legacy card-buttons flex only for non-zibll card variant */
|
|
.post-actions-card__buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* Zibll: .article .action { width:80px; padding:10px 0; inline-block; opacity:.7 } */
|
|
.article .action,
|
|
.post-actions .action {
|
|
width: 80px;
|
|
padding: 10px 0;
|
|
display: inline-block;
|
|
opacity: 0.7;
|
|
vertical-align: top;
|
|
min-width: 0;
|
|
height: auto;
|
|
border-radius: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: var(--muted-color, #777);
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: opacity 0.15s ease, color 0.15s ease;
|
|
gap: 0;
|
|
text-align: center;
|
|
}
|
|
|
|
.article .action:hover,
|
|
.post-actions .action:hover,
|
|
.article .action.is-active,
|
|
.post-actions .action.is-active {
|
|
color: inherit;
|
|
opacity: 1;
|
|
background: transparent;
|
|
border-color: transparent;
|
|
}
|
|
|
|
.article .action i,
|
|
.post-actions .action i {
|
|
font-size: 20px;
|
|
display: block;
|
|
margin: 0 auto 4px;
|
|
line-height: 1;
|
|
}
|
|
|
|
.post-actions .action .action-btn__count,
|
|
.post-actions .action .action-btn__label,
|
|
.action-btn__count,
|
|
.action-btn__label {
|
|
display: block;
|
|
font-size: 12px;
|
|
line-height: 1.2;
|
|
font-weight: 500;
|
|
}
|
|
|
|
/* Keep pill style for non-article .action-btn if used elsewhere */
|
|
.action-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
padding: 0.38em 1.1em;
|
|
border-radius: 50px;
|
|
border: 1px solid transparent;
|
|
background: var(--surface-4, rgba(136, 136, 136, 0.1));
|
|
color: var(--color-ink-3);
|
|
cursor: pointer;
|
|
font-size: 14px;
|
|
transition: all 0.15s ease;
|
|
}
|
|
|
|
.action-btn:hover {
|
|
background: var(--color-primary-soft);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.action-btn.is-active {
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
background: var(--color-primary-soft, rgba(240, 68, 148, 0.08));
|
|
}
|
|
|
|
.action-btn i { font-size: 1.2em; }
|
|
|
|
/* ===== 分享下拉面板 ===== */
|
|
|
|
/* 确保父容器作为定位参考 */
|
|
.share-dropdown {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: calc(100% + 8px);
|
|
transform: translateX(-50%);
|
|
z-index: 100;
|
|
/* 默认隐藏 — 最高优先级确保不被覆盖 */
|
|
display: none !important;
|
|
}
|
|
|
|
.share-dropdown[aria-hidden="false"] {
|
|
display: block !important;
|
|
animation: shareDropdownIn 0.2s ease-out forwards;
|
|
}
|
|
|
|
@keyframes shareDropdownIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateX(-50%) translateY(8px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: translateX(-50%) translateY(0);
|
|
}
|
|
}
|
|
|
|
.share-dropdown__grid {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 12px 16px;
|
|
background: var(--surface-page);
|
|
border: 1px solid var(--color-line);
|
|
border-radius: var(--radius-lg, 8px);
|
|
box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.1));
|
|
}
|
|
|
|
.share-item {
|
|
display: inline-flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 4px;
|
|
padding: 8px 12px;
|
|
border: none;
|
|
border-radius: var(--radius-btn, 6px);
|
|
background: transparent;
|
|
color: var(--color-ink-2, var(--color-ink-3));
|
|
cursor: pointer;
|
|
font-size: 11px;
|
|
transition: background 0.15s, color 0.15s, transform 0.15s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.share-item:hover {
|
|
transform: none;
|
|
}
|
|
|
|
.share-item i {
|
|
font-size: 18px;
|
|
}
|
|
|
|
.share-item[data-platform="qq"]:hover { background: #e8f4fd; color: #12b7f5; }
|
|
.share-item[data-platform="weibo"]:hover { background: #fceae9; color: #ff6a00; }
|
|
.share-item[data-platform="twitter"]:hover { background: #f0f0f0; color: #000; }
|
|
.share-item[data-platform="wechat"]:hover { background: #e6f7ec; color: #07c160; }
|
|
.share-item[data-platform="copy"]:hover { background: #f0f2f5; color: #555; }
|
|
.share-item[data-platform="poster"]:hover { background: #fff4e8; color: #f59e0b; }
|
|
|
|
/* 微信二维码浮层 */
|
|
#share-qrcode-box {
|
|
position: absolute;
|
|
bottom: calc(100% + 10px);
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
padding: 14px;
|
|
background: var(--surface-page);
|
|
border: 1px solid var(--color-line);
|
|
border-radius: var(--radius-lg, 8px);
|
|
box-shadow: var(--shadow-md, 0 4px 16px rgba(0,0,0,0.12));
|
|
text-align: center;
|
|
z-index: 101;
|
|
pointer-events: none;
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease, transform 0.2s ease;
|
|
}
|
|
|
|
#share-qrcode-box.is-visible {
|
|
pointer-events: auto;
|
|
opacity: 1;
|
|
}
|
|
|
|
#share-qrcode-image {
|
|
width: 140px;
|
|
height: 140px;
|
|
display: block;
|
|
}
|
|
|
|
/* 暗色模式 */
|
|
.theme-dark .share-dropdown__grid,
|
|
html.dark .share-dropdown__grid {
|
|
background: var(--surface-1);
|
|
border-color: var(--color-line);
|
|
box-shadow: 0 4px 16px rgba(0,0,0,0.35);
|
|
}
|
|
|
|
.theme-dark #share-qrcode-box,
|
|
html.dark #share-qrcode-box {
|
|
background: var(--surface-1);
|
|
border-color: var(--color-line);
|
|
}
|
|
|
|
.theme-dark .share-item,
|
|
html.dark .share-item {
|
|
color: var(--color-ink-2, #aaa);
|
|
}
|
|
|
|
.theme-dark .share-item[data-platform="qq"]:hover { background: rgba(18,183,245,0.12); color: #12b7f5; }
|
|
.theme-dark .share-item[data-platform="weibo"]:hover { background: rgba(255,106,0,0.12); color: #ff6a00; }
|
|
.theme-dark .share-item[data-platform="twitter"]:hover { background: rgba(255,255,255,0.08); color: #fff; }
|
|
.theme-dark .share-item[data-platform="wechat"]:hover { background: rgba(7,193,96,0.12); color: #07c160; }
|
|
.theme-dark .share-item[data-platform="copy"]:hover { background: rgba(255,255,255,0.06); color: #ccc; }
|
|
.theme-dark .share-item[data-platform="poster"]:hover { background: rgba(245,158,11,0.12); color: #f59e0b; }
|
|
|
|
/* Narrow screens: bottom sheet so dropdown never clips off-screen */
|
|
@media (max-width: 767px) {
|
|
.share-dropdown {
|
|
position: fixed;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
top: auto;
|
|
transform: none;
|
|
width: 100%;
|
|
max-width: none;
|
|
z-index: 1200;
|
|
padding: 0 0 calc(12px + env(safe-area-inset-bottom, 0px));
|
|
background: transparent;
|
|
}
|
|
.share-dropdown[aria-hidden="false"] {
|
|
animation: shareSheetIn 0.22s ease-out forwards;
|
|
}
|
|
@keyframes shareSheetIn {
|
|
from { opacity: 0; transform: translateY(16px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
.share-dropdown__grid {
|
|
justify-content: space-around;
|
|
flex-wrap: wrap;
|
|
gap: 6px;
|
|
margin: 0 10px;
|
|
padding: 14px 12px 16px;
|
|
border-radius: 14px 14px 10px 10px;
|
|
box-shadow: 0 -6px 28px rgba(0, 0, 0, 0.16);
|
|
}
|
|
.share-item {
|
|
min-width: 64px;
|
|
flex: 1 1 28%;
|
|
max-width: 33%;
|
|
}
|
|
#share-qrcode-box {
|
|
position: static;
|
|
margin: 10px auto 0;
|
|
transform: none;
|
|
}
|
|
body.aksrt-share-sheet-open {
|
|
overflow: hidden;
|
|
}
|
|
body.aksrt-share-sheet-open::before {
|
|
content: '';
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.35);
|
|
z-index: 1190;
|
|
}
|
|
}
|
|
|
|
.theme-dark .post-drop-meta__menu,
|
|
html.dark .post-drop-meta__menu {
|
|
background: var(--surface-1, #323335);
|
|
border-color: var(--color-line);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
|
|
}
|
|
|
|
.theme-dark .post-drop-meta__item,
|
|
html.dark .post-drop-meta__item {
|
|
color: var(--color-ink-2, #ccc);
|
|
}
|
|
|
|
.theme-dark .post-drop-meta__item:hover,
|
|
html.dark .post-drop-meta__item:hover {
|
|
background: rgba(255,255,255,0.06);
|
|
color: #fff;
|
|
}
|
|
|
|
/* ===== Author Card — 对齐 zibll 卡片容器 ===== */
|
|
.author-box {
|
|
margin-bottom: 16px;
|
|
padding: 18px;
|
|
background: var(--surface-1, #fff);
|
|
border: none;
|
|
border-radius: var(--radius-2xl, 16px);
|
|
box-shadow: var(--shadow-sm);
|
|
}
|
|
|
|
.single-metabox {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-end;
|
|
gap: 8px;
|
|
}
|
|
|
|
.post-drop-meta {
|
|
position: relative;
|
|
}
|
|
|
|
.post-drop-meta__menu {
|
|
position: absolute;
|
|
top: calc(100% + 8px);
|
|
right: 0;
|
|
min-width: 150px;
|
|
padding: 8px;
|
|
border-radius: var(--radius, 8px);
|
|
border: 1px solid var(--color-line);
|
|
background: var(--surface-page, #fff);
|
|
box-shadow: var(--shadow-md, 0 8px 24px rgba(0, 0, 0, 0.12));
|
|
display: none;
|
|
z-index: 20;
|
|
}
|
|
|
|
.post-drop-meta.is-open .post-drop-meta__menu {
|
|
display: grid;
|
|
gap: 4px;
|
|
}
|
|
|
|
.post-drop-meta__item {
|
|
width: 100%;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
padding: 8px 10px;
|
|
border: 0;
|
|
border-radius: 6px;
|
|
background: transparent;
|
|
color: var(--color-ink-2, var(--color-ink));
|
|
text-decoration: none;
|
|
font-size: 13px;
|
|
text-align: left;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.post-drop-meta__item:hover {
|
|
background: var(--color-line, rgba(50, 50, 50, 0.06));
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.post-drop-meta__item i {
|
|
width: 16px;
|
|
text-align: center;
|
|
}
|
|
|
|
.author-box__header {
|
|
display: flex;
|
|
align-items: flex-start;
|
|
gap: 14px;
|
|
}
|
|
|
|
.author-box__avatar {
|
|
width: 56px;
|
|
height: 56px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
flex-shrink: 0;
|
|
border: 3px solid var(--color-primary-soft, rgba(240, 68, 148, 0.2));
|
|
}
|
|
|
|
.author-box__info {
|
|
flex: 1;
|
|
min-width: 0;
|
|
}
|
|
|
|
.author-box__name {
|
|
font-size: 1rem;
|
|
font-weight: 700;
|
|
color: var(--color-ink);
|
|
display: block;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.author-box__name:hover { color: var(--color-primary); }
|
|
|
|
.author-box__bio {
|
|
font-size: 13px;
|
|
color: var(--color-ink-3, var(--color-ink-4));
|
|
line-height: 1.5;
|
|
margin: 0 0 6px;
|
|
}
|
|
|
|
.author-box__stats {
|
|
font-size: 12px;
|
|
color: var(--color-ink-4, var(--color-ink-4));
|
|
}
|
|
|
|
.author-box__stats strong {
|
|
color: var(--color-ink);
|
|
margin-right: 2px;
|
|
}
|
|
|
|
.author-box__posts {
|
|
margin-top: 14px;
|
|
padding-top: 12px;
|
|
border-top: 1px solid var(--color-line);
|
|
}
|
|
|
|
.author-box__posts-title {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: var(--color-ink-3, var(--color-ink-4));
|
|
margin: 0 0 8px;
|
|
}
|
|
|
|
.author-box__posts ul {
|
|
list-style: none;
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.author-box__posts li { padding: 3px 0; }
|
|
|
|
.author-box__posts a {
|
|
font-size: 13px;
|
|
color: var(--color-ink);
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.author-box__posts a:hover { color: var(--color-primary); }
|
|
.author-box__posts a::before { content: '\2022'; color: var(--color-primary); }
|
|
|
|
|
|
|
|
/* ===== Zibll single-metabox / author bar ===== */
|
|
.article-avatar .user-info {
|
|
width: 100%;
|
|
}
|
|
|
|
.article-avatar .avatar-img {
|
|
--this-size: 42px;
|
|
}
|
|
|
|
.article-avatar .avatar-img img,
|
|
.article-avatar .avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
.article-avatar .display-name {
|
|
font-weight: 600;
|
|
color: var(--key-color, #333);
|
|
}
|
|
|
|
.article-header .article-avatar .relative {
|
|
margin-top: 20px;
|
|
position: relative;
|
|
min-height: 1px;
|
|
}
|
|
|
|
.single-metabox {
|
|
right: 0;
|
|
font-size: 15px;
|
|
--meta-color: var(--muted-color, #777);
|
|
}
|
|
|
|
.single-metabox .post-metas {
|
|
background: var(--body-bg-color, #f5f5f5);
|
|
right: 0;
|
|
padding: 2px 6px;
|
|
border-radius: 100px;
|
|
color: var(--meta-color);
|
|
display: inline-flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 0;
|
|
}
|
|
|
|
.single-metabox .post-metas item,
|
|
.single-metabox .post-metas .item {
|
|
margin: 0 6px;
|
|
font-size: 13px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
}
|
|
|
|
.single-metabox .post-drop-meta {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.single-metabox.cover-meta {
|
|
font-size: 14px;
|
|
right: 1em;
|
|
top: 1.6em;
|
|
--meta-color: rgba(255, 255, 255, 0.8);
|
|
--body-bg-color: rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
/* line-form-line owned by zibll-utilities.css — only context here */
|
|
.article-avatar .line-form-line {
|
|
display: block;
|
|
}
|
|
|
|
.article-tags br { flex-basis: 100%; width: 100%; content: ""; display: block; height: 0; }
|
|
.article-tags .but.c-blue { color: #2196f3; }
|
|
.article-tags .but.c-yellow { color: #f0ad4e; }
|
|
.article-tags .but.c-green { color: #5cb85c; }
|
|
.article-tags .but.c-purple { color: #9c27b0; }
|
|
.article-tags .but.c-red { color: #f44336; }
|
|
|
|
|
|
/* ===== Zibll user-card after-box ===== */
|
|
.user-card.author.zib-widget { 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; }
|