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>
96 lines
6.1 KiB
CSS
96 lines
6.1 KiB
CSS
/* User level — dedicated center panel.
|
|
* Base level icon sizing lives in assets/css/frontend/base.css (1.1em, inline).
|
|
* This file keeps only the UC-level-specific hero/road overrides + admin column. */
|
|
.aksrt-user-level-icon--admin { height: 22px; }
|
|
|
|
.uc-level-page { display: grid; gap: 16px; }
|
|
.uc-level-page .zib-widget {
|
|
margin: 0;
|
|
padding: 18px;
|
|
border: 1px solid var(--color-line-soft, rgba(0,0,0,.06));
|
|
border-radius: var(--main-radius, 10px);
|
|
background: var(--main-bg-color, var(--surface-1, #fff));
|
|
box-shadow: 0 0 10px var(--main-shadow, rgba(116,116,116,.08));
|
|
}
|
|
.uc-level-hero {
|
|
position: relative;
|
|
overflow: hidden;
|
|
background: linear-gradient(135deg, rgba(124,58,237,.12), rgba(236,72,153,.10)) !important;
|
|
}
|
|
.uc-level-hero::after {
|
|
content: '';
|
|
position: absolute;
|
|
width: 220px;
|
|
height: 220px;
|
|
right: -80px;
|
|
top: -100px;
|
|
border-radius: 50%;
|
|
background: rgba(255,255,255,.2);
|
|
pointer-events: none;
|
|
}
|
|
.uc-level-hero__identity { display: flex; align-items: center; gap: 14px; position: relative; z-index: 1; }
|
|
.uc-level-hero__identity p { margin: 0 0 3px; color: var(--muted-2-color, #8b9198); font-size: 12px; }
|
|
.uc-level-hero__identity h2 { margin: 0; font-size: 22px; }
|
|
.uc-level-hero__icon {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 62px;
|
|
height: 62px;
|
|
border-radius: 16px;
|
|
background: rgba(255,255,255,.62);
|
|
box-shadow: inset 0 0 0 1px rgba(255,255,255,.55);
|
|
}
|
|
.uc-level-hero__icon .aksrt-user-level-icon { max-width: 48px; height: 42px; }
|
|
.uc-level-hero__stats { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 20px 0 16px; position: relative; z-index: 1; }
|
|
.uc-level-hero__stats > div { padding: 12px; border-radius: 10px; background: rgba(255,255,255,.46); }
|
|
.uc-level-hero__stats strong, .uc-level-hero__stats span { display: block; }
|
|
.uc-level-hero__stats strong { font-size: 18px; }
|
|
.uc-level-hero__stats span { margin-top: 3px; font-size: 11px; color: var(--muted-2-color, #747b83); }
|
|
.uc-level-hero__progress { position: relative; z-index: 1; }
|
|
.uc-level-hero__progress-meta { display: flex; justify-content: space-between; margin-bottom: 7px; font-size: 12px; font-weight: 700; }
|
|
.uc-level-progress { height: 9px; overflow: hidden; border-radius: 999px; background: rgba(127,127,127,.18); }
|
|
.uc-level-progress > span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7c3aed, #ec4899); }
|
|
|
|
.uc-level-section__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
|
|
.uc-level-section__head h3 { margin: 0; font-size: 16px; }
|
|
.uc-level-section__head span { color: var(--muted-2-color, #8b9198); font-size: 11px; }
|
|
.uc-level-road { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 10px; }
|
|
.uc-level-road__item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 8px; border: 1px solid var(--color-line-soft, rgba(0,0,0,.06)); border-radius: 10px; opacity: .58; text-align: center; }
|
|
.uc-level-road__item.is-done { opacity: .78; }
|
|
.uc-level-road__item.is-current { opacity: 1; border-color: #8b5cf6; box-shadow: 0 0 0 2px rgba(139,92,246,.12); }
|
|
.uc-level-road__item.is-current::after { content: '当前'; position: absolute; top: 6px; right: 6px; padding: 1px 5px; border-radius: 999px; background: #8b5cf6; color: #fff; font-size: 9px; }
|
|
.uc-level-road__icon { display: grid; place-items: center; height: 40px; }
|
|
.uc-level-road__icon img { max-width: 52px; max-height: 38px; object-fit: contain; }
|
|
.uc-level-road__icon span { font-weight: 800; color: #7c3aed; }
|
|
.uc-level-road__item strong { font-size: 12px; }
|
|
.uc-level-road__item small { color: var(--muted-2-color, #8b9198); font-size: 10px; }
|
|
|
|
.uc-level-methods { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
|
|
.uc-level-methods__item { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 10px; padding: 11px; border: 1px solid var(--color-line-soft, rgba(0,0,0,.06)); border-radius: 9px; }
|
|
.uc-level-methods__item > span { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: rgba(245,158,11,.12); color: #d97706; }
|
|
.uc-level-methods__item strong, .uc-level-methods__item small { display: block; }
|
|
.uc-level-methods__item strong { font-size: 12px; }
|
|
.uc-level-methods__item small { margin-top: 2px; color: var(--muted-2-color, #8b9198); font-size: 10px; }
|
|
.uc-level-methods__item b { color: #7c3aed; }
|
|
.uc-level-ledger__row time + small { display: block; margin-top: 2px; color: var(--muted-2-color, #8b9198); font-size: 10px; }
|
|
|
|
.uc-level-history-grid { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(240px,.65fr); gap: 16px; }
|
|
.uc-level-ledger, .uc-level-dates { display: grid; }
|
|
.uc-level-ledger__row { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 10px; padding: 11px 0; border-bottom: 1px solid var(--color-line-soft, rgba(0,0,0,.05)); }
|
|
.uc-level-ledger__row:last-child, .uc-level-dates > div:last-child { border-bottom: 0; }
|
|
.uc-level-ledger__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: rgba(124,58,237,.10); color: #7c3aed; }
|
|
.uc-level-ledger__row strong, .uc-level-ledger__row time { display: block; }
|
|
.uc-level-ledger__row strong { font-size: 13px; }
|
|
.uc-level-ledger__row time { margin-top: 2px; color: var(--muted-2-color, #8b9198); font-size: 10px; }
|
|
.uc-level-ledger__row b { color: #16a34a; font-size: 13px; }
|
|
.uc-level-dates > div { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--color-line-soft, rgba(0,0,0,.05)); font-size: 12px; }
|
|
.uc-level-dates span { color: #16a34a; font-weight: 700; }
|
|
.uc-level-empty { margin: 0; padding: 24px 0; color: var(--muted-2-color, #8b9198); text-align: center; }
|
|
|
|
@media (max-width: 767px) {
|
|
.uc-level-hero__stats { grid-template-columns: 1fr; }
|
|
.uc-level-history-grid { grid-template-columns: 1fr; }
|
|
.uc-level-methods { grid-template-columns: 1fr; }
|
|
.uc-level-road { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
|
}
|