From b95a4d1a894756644cd6d50357ab7e454030c33e Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 11 Aug 2026 19:54:05 +0800 Subject: [PATCH] fix(ui): align identity badge dimensions --- assets/css/frontend/base.css | 46 ++++++++++++++++------ assets/css/frontend/credits.css | 28 +++++-------- assets/css/frontend/nav/header-userbox.css | 7 ++-- assets/css/frontend/single-post/cover.css | 7 ++-- assets/css/routes/user-center/shell.css | 19 ++------- 5 files changed, 57 insertions(+), 50 deletions(-) diff --git a/assets/css/frontend/base.css b/assets/css/frontend/base.css index 41cfa727..5f4f947e 100644 --- a/assets/css/frontend/base.css +++ b/assets/css/frontend/base.css @@ -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 element (zibll compat) plus .user-name / author-hero / diff --git a/assets/css/frontend/credits.css b/assets/css/frontend/credits.css index 9f663b59..51a6a1d7 100644 --- a/assets/css/frontend/credits.css +++ b/assets/css/frontend/credits.css @@ -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; diff --git a/assets/css/frontend/nav/header-userbox.css b/assets/css/frontend/nav/header-userbox.css index fea79320..94a5348a 100644 --- a/assets/css/frontend/nav/header-userbox.css +++ b/assets/css/frontend/nav/header-userbox.css @@ -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; } diff --git a/assets/css/frontend/single-post/cover.css b/assets/css/frontend/single-post/cover.css index b0d983c9..26869e53 100644 --- a/assets/css/frontend/single-post/cover.css +++ b/assets/css/frontend/single-post/cover.css @@ -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; diff --git a/assets/css/routes/user-center/shell.css b/assets/css/routes/user-center/shell.css index 8da14b3c..d56f17db 100644 --- a/assets/css/routes/user-center/shell.css +++ b/assets/css/routes/user-center/shell.css @@ -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;