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:
@@ -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 /
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user