fix(ui): render user level icon inline beside the name
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>
This commit is contained in:
@@ -162,6 +162,53 @@ main.container,
|
||||
}
|
||||
}
|
||||
|
||||
/* ========== User identity inline icons ==========
|
||||
* Level / medal icons ride inline to the right of a username. Centralized here
|
||||
* so every route (header panel, user center, author hero, single, comments,
|
||||
* widgets) renders the same compact badge instead of the raw intrinsic PNG size.
|
||||
*
|
||||
* Mirrors zibll `.img-icon { height: 1.1em; display: inline-block; vertical-align: -.15em }`
|
||||
* — sizes to the surrounding line height, never dominates the row. Localized
|
||||
* exceptions (UC level hero, admin column) override `height` per context.
|
||||
*/
|
||||
.aksrt-user-level-icon,
|
||||
.aksrt-identity-medal {
|
||||
display: inline-block;
|
||||
width: auto;
|
||||
height: 1.1em;
|
||||
max-width: 6em;
|
||||
object-fit: contain;
|
||||
vertical-align: -.15em;
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
/* Comment context: a touch smaller to fit the 14px author line. */
|
||||
.aksrt-identity-medal--comment,
|
||||
.aksrt-user-level-icon--comment {
|
||||
height: 1em;
|
||||
vertical-align: -.12em;
|
||||
}
|
||||
|
||||
/* No-wrap inline name rows — keep the level icon on the same line as the name.
|
||||
* The non-standard <name> element (zibll compat) plus .user-name / author-hero /
|
||||
* uc-header name rows must not flex-wrap, or the badge drops to a new line.
|
||||
* The comment header may still wrap (avatar + name + like can overflow on
|
||||
* narrow viewports), so it keeps flex-wrap but the inner <name> never does. */
|
||||
.article-avatar name,
|
||||
.article-avatar .name,
|
||||
.user-name,
|
||||
.aksrt-author-hero__name,
|
||||
.uc-header__name,
|
||||
.aksrt-header-badges {
|
||||
flex-wrap: nowrap;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.aksrt-author-hero__name,
|
||||
.uc-header__name {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
/* ========== 通用空状态 ========== */
|
||||
.no-results {
|
||||
padding: 48px 20px;
|
||||
|
||||
Reference in New Issue
Block a user