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>
350 lines
8.4 KiB
CSS
350 lines
8.4 KiB
CSS
/**
|
|
* Header user-box density (check-in / wallet / payvip / signout modal).
|
|
* Light-theme contrast fixes.
|
|
*
|
|
* @package AKSRT
|
|
*/
|
|
|
|
.aksrt-header-wallet {
|
|
display: flex;
|
|
gap: 10px;
|
|
justify-content: space-between;
|
|
padding: 8px 10px;
|
|
border-radius: 8px;
|
|
background: var(--surface-2, rgba(0, 0, 0, 0.04));
|
|
color: var(--color-ink, #222);
|
|
text-decoration: none;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.aksrt-header-wallet__item {
|
|
color: var(--color-ink-2, #444);
|
|
}
|
|
|
|
.aksrt-header-wallet__item b {
|
|
margin-left: 2px;
|
|
color: var(--color-ink, #1a1a1a);
|
|
font-weight: 700;
|
|
}
|
|
|
|
.aksrt-header-wallet__item i {
|
|
margin-right: 2px;
|
|
color: var(--color-ink-3, #666);
|
|
}
|
|
|
|
/* Check-in: beat generic `.user-dropdown button { height:44px; background:none }` */
|
|
.user-dropdown button.aksrt-header-checkin,
|
|
.aksrt-header-checkin {
|
|
width: 100% !important;
|
|
max-width: 100%;
|
|
height: auto !important;
|
|
min-height: 36px;
|
|
border: 0 !important;
|
|
border-radius: 6px !important;
|
|
padding: 8px 10px !important;
|
|
margin: 0;
|
|
cursor: pointer;
|
|
background: #fff6db !important;
|
|
color: #8a5a00 !important;
|
|
font-weight: 600;
|
|
font-size: 13px !important;
|
|
line-height: 1.3;
|
|
display: inline-flex !important;
|
|
flex-direction: row !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
gap: 6px !important;
|
|
text-align: center !important;
|
|
box-sizing: border-box;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.user-dropdown button.aksrt-header-checkin > i,
|
|
.aksrt-header-checkin > i {
|
|
margin: 0 !important;
|
|
color: #b78103 !important;
|
|
flex: 0 0 auto;
|
|
line-height: 1;
|
|
}
|
|
|
|
.user-dropdown button.aksrt-header-checkin > span,
|
|
.aksrt-header-checkin > span {
|
|
line-height: 1.3;
|
|
color: inherit;
|
|
}
|
|
|
|
.user-dropdown button.aksrt-header-checkin.is-done,
|
|
.aksrt-header-checkin.is-done,
|
|
.user-dropdown button.aksrt-header-checkin:disabled,
|
|
.aksrt-header-checkin:disabled {
|
|
opacity: 0.85;
|
|
cursor: default;
|
|
background: #f3f4f6 !important;
|
|
color: #555 !important;
|
|
}
|
|
|
|
.user-dropdown button.aksrt-header-checkin.is-done > i,
|
|
.aksrt-header-checkin.is-done > i,
|
|
.user-dropdown button.aksrt-header-checkin:disabled > i,
|
|
.aksrt-header-checkin:disabled > i {
|
|
color: #777 !important;
|
|
}
|
|
|
|
.user-dropdown button.aksrt-header-checkin:hover,
|
|
.aksrt-header-checkin:hover {
|
|
background: #fff0c2 !important;
|
|
color: #8a5a00 !important;
|
|
}
|
|
|
|
.user-dropdown button.aksrt-header-checkin.is-done:hover,
|
|
.aksrt-header-checkin.is-done:hover,
|
|
.user-dropdown button.aksrt-header-checkin:disabled:hover,
|
|
.aksrt-header-checkin:disabled:hover {
|
|
background: #f3f4f6 !important;
|
|
color: #555 !important;
|
|
}
|
|
|
|
.aksrt-header-checkin-details {
|
|
color: var(--color-ink-3, #666) !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* VIP open CTA: same geometry as .aksrt-header-checkin (full width, 6px radius).
|
|
* Override any leftover .navbar-cta / .but.radius pill rules from top-nav. */
|
|
.user-dropdown .aksrt-header-payvip .payvip-icon,
|
|
.user-dropdown .aksrt-header-payvip .but,
|
|
.user-dropdown .aksrt-header-payvip__cta,
|
|
.aksrt-header-payvip .payvip-icon,
|
|
.aksrt-header-payvip .but,
|
|
.aksrt-header-payvip__cta {
|
|
display: inline-flex !important;
|
|
flex-direction: row !important;
|
|
align-items: center !important;
|
|
justify-content: center !important;
|
|
gap: 6px !important;
|
|
width: 100% !important;
|
|
max-width: 100% !important;
|
|
min-width: 0 !important;
|
|
height: auto !important;
|
|
min-height: 36px;
|
|
max-height: none !important;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
padding: 8px 10px !important;
|
|
margin: 0 !important;
|
|
border: 0 !important;
|
|
border-radius: 6px !important;
|
|
font-size: 13px !important;
|
|
font-weight: 600;
|
|
line-height: 1.3;
|
|
white-space: nowrap;
|
|
background: linear-gradient(90deg, #ff6b6b, #f04494) !important;
|
|
color: #fff !important;
|
|
flex: none !important;
|
|
transform: none !important;
|
|
}
|
|
|
|
.user-dropdown .aksrt-header-payvip .payvip-icon > i,
|
|
.user-dropdown .aksrt-header-payvip .but > i,
|
|
.user-dropdown .aksrt-header-payvip__cta > i,
|
|
.aksrt-header-payvip .payvip-icon > i,
|
|
.aksrt-header-payvip .but > i,
|
|
.aksrt-header-payvip__cta > i {
|
|
margin: 0 !important;
|
|
flex: 0 0 auto;
|
|
line-height: 1;
|
|
color: inherit !important;
|
|
}
|
|
|
|
.user-dropdown .aksrt-header-payvip__cta > span,
|
|
.aksrt-header-payvip__cta > span {
|
|
line-height: 1.3;
|
|
color: inherit;
|
|
}
|
|
|
|
.user-dropdown .aksrt-header-payvip__cta:hover,
|
|
.aksrt-header-payvip__cta:hover {
|
|
opacity: 0.92;
|
|
color: #fff !important;
|
|
}
|
|
|
|
/* Active VIP: level on line 1, smaller expiry on line 2 (no orange pill). */
|
|
.aksrt-header-payvip .payvip-icon.aksrt-header-payvip__active,
|
|
.aksrt-header-payvip__active {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 2px;
|
|
line-height: 1.25;
|
|
}
|
|
|
|
.aksrt-header-payvip__level {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 6px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.aksrt-header-payvip__level > i {
|
|
margin: 0 !important;
|
|
}
|
|
|
|
.aksrt-header-payvip__exp {
|
|
display: block;
|
|
font-size: 0.85em;
|
|
font-weight: 400;
|
|
line-height: 1.3;
|
|
opacity: 0.9;
|
|
background: none !important;
|
|
border: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
color: inherit;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.aksrt-header-badges {
|
|
flex-wrap: wrap;
|
|
gap: 4px;
|
|
}
|
|
/* Inline name + level badge in the dropdown profile row — one line, no wrap. */
|
|
.sub-user-box .user-right > .flex1 {
|
|
min-width: 0;
|
|
}
|
|
.sub-user-box .user-right b {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
flex-wrap: nowrap;
|
|
white-space: nowrap;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
.sub-user-box .user-right b .display-name {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
min-width: 0;
|
|
max-width: 100%;
|
|
}
|
|
.sub-user-box .user-right .aksrt-user-level-icon,
|
|
.sub-user-box .user-right .aksrt-identity-medal {
|
|
height: 1em;
|
|
vertical-align: -.12em;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* User dropdown light-theme text contrast */
|
|
.user-dropdown.sub-user-box,
|
|
.user-dropdown {
|
|
color: var(--color-ink, #222);
|
|
background: var(--main-bg-color, #fff);
|
|
}
|
|
|
|
.user-dropdown__name,
|
|
.user-dropdown__meta,
|
|
.user-dropdown__email,
|
|
.user-dropdown .muted-2-color {
|
|
color: var(--color-ink-2, #555) !important;
|
|
}
|
|
|
|
.user-dropdown__email {
|
|
opacity: 1;
|
|
}
|
|
|
|
.user-dropdown__action,
|
|
.user-dropdown__action span {
|
|
color: var(--color-ink, #222);
|
|
}
|
|
|
|
#modal_signout.modal {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1100;
|
|
display: none;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: rgba(0, 0, 0, 0.45);
|
|
padding: 16px;
|
|
}
|
|
|
|
#modal_signout.modal.is-open,
|
|
#modal_signout.modal.show {
|
|
display: flex;
|
|
}
|
|
|
|
#modal_signout .modal-content {
|
|
background: var(--main-bg-color, #fff);
|
|
border-radius: 10px;
|
|
min-width: 280px;
|
|
max-width: 92vw;
|
|
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.18);
|
|
color: var(--color-ink, #222);
|
|
}
|
|
|
|
#modal_signout .but.c-red {
|
|
background: #e74c3c;
|
|
color: #fff;
|
|
text-decoration: none;
|
|
padding: 8px 14px;
|
|
border-radius: 6px;
|
|
}
|
|
|
|
#modal_signout .but {
|
|
border: 0;
|
|
background: var(--surface-2, #f0f0f0);
|
|
color: var(--color-ink, #222);
|
|
padding: 8px 14px;
|
|
border-radius: 6px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.user-dropdown .social_loginbar {
|
|
padding: 0 10px 12px;
|
|
}
|
|
|
|
/* Dark theme overrides */
|
|
html.dark .user-dropdown button.aksrt-header-checkin,
|
|
html.dark .aksrt-header-checkin,
|
|
body.dark-theme .user-dropdown button.aksrt-header-checkin,
|
|
body.dark-theme .aksrt-header-checkin,
|
|
body.theme-dark .user-dropdown button.aksrt-header-checkin,
|
|
body.theme-dark .aksrt-header-checkin {
|
|
background: rgba(255, 193, 7, 0.18) !important;
|
|
color: #f0c14b !important;
|
|
}
|
|
|
|
html.dark .user-dropdown button.aksrt-header-checkin > i,
|
|
html.dark .aksrt-header-checkin > i,
|
|
body.dark-theme .user-dropdown button.aksrt-header-checkin > i,
|
|
body.dark-theme .aksrt-header-checkin > i,
|
|
body.theme-dark .user-dropdown button.aksrt-header-checkin > i,
|
|
body.theme-dark .aksrt-header-checkin > i {
|
|
color: #f0c14b !important;
|
|
}
|
|
|
|
html.dark .user-dropdown button.aksrt-header-checkin.is-done,
|
|
html.dark .aksrt-header-checkin.is-done,
|
|
body.dark-theme .user-dropdown button.aksrt-header-checkin.is-done,
|
|
body.dark-theme .aksrt-header-checkin.is-done {
|
|
background: rgba(255, 255, 255, 0.08) !important;
|
|
color: #bbb !important;
|
|
}
|
|
|
|
html.dark .aksrt-header-wallet,
|
|
body.dark-theme .aksrt-header-wallet,
|
|
body.theme-dark .aksrt-header-wallet {
|
|
background: rgba(255, 255, 255, 0.06);
|
|
color: inherit;
|
|
}
|
|
|
|
html.dark .aksrt-header-wallet__item,
|
|
html.dark .aksrt-header-wallet__item b,
|
|
body.dark-theme .aksrt-header-wallet__item,
|
|
body.dark-theme .aksrt-header-wallet__item b {
|
|
color: inherit;
|
|
}
|