Merge pull request 'fix(ui): align identity badge dimensions' (#430) from worktree-zibll-badge-entry-replica into main

Reviewed-on: CYL/wordpress-theme-aksrt#430
This commit is contained in:
2026-08-11 19:54:37 +08:00
5 changed files with 57 additions and 50 deletions
+35 -11
View File
@@ -163,31 +163,55 @@ 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.
* All compact identity marks share one line-height baseline: VIP, level,
* certification, and worn medals remain visually aligned in every surface.
*/
.aksrt-vip-badge,
.aksrt-user-level-badge,
.aksrt-user-level-icon,
.aksrt-identity-medal,
.aksrt-identity-certification-icon {
display: inline-block;
.aksrt-identity-certification-icon,
.aksrt-header-user-medal {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: 1.1em;
max-width: 6em;
object-fit: contain;
vertical-align: -.15em;
flex: 0 0 auto;
box-sizing: border-box;
}
/* Comment context: a touch smaller to fit the 14px author line. */
.aksrt-vip-badge__icon {
display: block;
width: auto;
height: 1.1em;
max-width: 6em;
object-fit: contain;
}
.aksrt-vip-badge > i {
font-size: .9em;
line-height: 1;
}
.aksrt-user-level-badge {
padding: 0 .35em;
font-size: .78em;
line-height: 1.1;
white-space: nowrap;
}
/* Comment context: keep all identity marks inside the compact author line. */
.aksrt-identity-medal--comment,
.aksrt-user-level-icon--comment {
.aksrt-user-level-icon--comment,
.aksrt-header-user-medal--comment {
height: 1em;
vertical-align: -.12em;
}
.aksrt-vip-badge--sm {
height: 1.1em;
padding: 0;
font-size: inherit;
}
/* 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 /
+10 -18
View File
@@ -353,45 +353,37 @@
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: 1.1em;
padding: 0;
border-radius: 0;
font: inherit;
line-height: 1;
background: transparent;
color: inherit;
vertical-align: middle;
}
.aksrt-vip-level-icon {
display: inline-block;
width: auto;
height: 1.5em;
max-width: 6em;
object-fit: contain;
vertical-align: -.2em;
vertical-align: -.15em;
}
.aksrt-vip-level-icon,
.aksrt-vip-badge__icon {
display: inline-block;
display: block;
width: auto;
height: 1.35em;
height: 1.1em;
max-width: 6em;
object-fit: contain;
vertical-align: -.18em;
}
.aksrt-vip-badge i {
font-size: 10px;
font-size: .9em;
line-height: 1;
}
.aksrt-vip-badge--sm {
height: 1.1em;
padding: 0;
font-size: inherit;
}
.aksrt-vip-badge--sm i {
font-size: 9px;
}
.aksrt-vip-badge--lg {
padding: 4px 12px;
font-size: 13px;
+4 -3
View File
@@ -232,9 +232,10 @@
}
.sub-user-box .user-right .aksrt-user-level-icon,
.sub-user-box .user-right .aksrt-identity-medal,
.sub-user-box .user-right .aksrt-header-user-medal {
height: 1em;
vertical-align: -.12em;
.sub-user-box .user-right .aksrt-header-user-medal,
.sub-user-box .user-right .aksrt-vip-badge {
height: 1.1em;
vertical-align: -.15em;
flex: 0 0 auto;
}
+4 -3
View File
@@ -282,14 +282,15 @@
.article-avatar .aksrt-vip-badge,
.article-avatar .aksrt-identity-chip {
font-size: 12px;
line-height: 1.2;
vertical-align: middle;
line-height: 1.1;
vertical-align: -.15em;
}
.article-avatar .aksrt-vip-badge,
.article-avatar .medal-icon.img-icon,
.article-avatar .aksrt-identity-medal,
.article-avatar .aksrt-user-level-icon {
width: auto;
height: 1.2em;
height: 1.1em;
max-width: 6em;
object-fit: contain;
vertical-align: -.15em;
+4 -15
View File
@@ -25,29 +25,18 @@
padding: 0 0 40px;
}
/* VIP icon alignment in UC header h1 name row. */
/* VIP, level and worn-medal marks share the global identity baseline. */
.uc-header__name .aksrt-vip-badge__icon,
h1.uc-header__name .aksrt-vip-badge__icon {
width: auto;
height: 1.2em;
max-width: 6em;
object-fit: contain;
vertical-align: middle;
margin-left: 4px;
display: inline-block;
border: none;
}
h1.uc-header__name .aksrt-vip-badge__icon,
.uc-header__name .medal-icon.img-icon,
.uc-header__name .aksrt-identity-medal,
h1.uc-header__name .medal-icon.img-icon,
h1.uc-header__name .aksrt-identity-medal {
width: auto;
height: 1.2em;
height: 1.1em;
max-width: 6em;
object-fit: contain;
vertical-align: middle;
vertical-align: -.15em;
margin-left: 4px;
display: inline-block;
border: none;