kate522
5641c40958
The top-nav guest popover rendered its quick-login buttons as 29px circles
with zero gap: github, gitee and qq were touching. The user-card widget, which
uses the same .social_loginbar markup, was fine at 32px with 10px gaps.
header-userbox.css carries an AKSRT-specific rule, absent from the reference
theme, that gives every .toggle-radius inside .navbar-form a 29px midline
circle:
.navbar-top .navbar-form .toggle-radius { flex: 0 0 29px; margin: 0; }
It exists for the account-row .badg chips, the theme toggle and the language
toggle. The popover social buttons are .toggle-radius too and also sit inside
.navbar-form, so they were caught by it. Two independent mechanisms broke the
geometry: flex-basis outranks width in a flex container, so flex: 0 0 29px beat
the .social_loginbar .social-login-item width: 32px !important; and the rule
(0,3,0) specificity outranked the (0,2,0) margin: 3px 5px.
Exempt the social buttons with :not(). The chips, the theme toggle and the
language toggle still match, and the popover buttons fall back to the
.social_loginbar geometry ported 1:1 from the reference.
Verified on the live site by measuring computed styles in headless Edge: the
popover buttons go from 29px/0px margins/0px gap to 32px/5px margins/10px gap,
the user-card widget is unchanged, and the account-row chips keep 29px (theme
toggle) and 36px (.badg). Rebuilt the public bundle so the exemption survives
the build, and contract-locked the selector plus the bundle copy.
Verification: node --test across widget-system, navigation, admin,
asset-ledger, dev, front-submit and visual (615 tests).
209 lines
6.3 KiB
CSS
209 lines
6.3 KiB
CSS
/**
|
|
* Header account popover.
|
|
*
|
|
* The shared legacy navigation styles provide the popover shell, and every
|
|
* account row (avatar, VIP bar, check-in, wallet tiles, stats badges) renders
|
|
* through the reference legacy classes. This module only owns the navigation
|
|
* shell anchoring plus the account action-row geometry.
|
|
*/
|
|
|
|
/* The reference keeps the right cluster as three floated .navbar-form groups.
|
|
* Bootstrap's base .navbar-form rule carries margin-top: 8px and the >=768px
|
|
* override only zeroes the horizontal margins, so every right-cluster group
|
|
* starts 8px below the top of .navbar-collapse. The 50px menu row and the logo
|
|
* put the navbar midline at 25px, so a 34px cross-size lands a group's midline
|
|
* at 8 + 17 = 25px. The publish/VIP chips already reach that line through their
|
|
* own 0.4em margin stacked on the group's 8px; the account row reaches it from
|
|
* its 34px icon tiles, and the theme group needs the same cross-size because
|
|
* its 29px toggle is otherwise 2.5px high. Nothing here may restate a 50px
|
|
* min-height: it would double-count the 8px and push that group's content 8px
|
|
* below the line while inflating the navbar from 50px to 58px. */
|
|
.navbar-top .aksrt-navbar-account {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 4px;
|
|
margin: 0;
|
|
}
|
|
|
|
.navbar-top .aksrt-navbar-account > li {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex: 0 0 auto;
|
|
padding: 0;
|
|
overflow: visible;
|
|
}
|
|
|
|
.navbar-top .aksrt-navbar-account > li > .sub-menu {
|
|
top: calc(100% + 5px);
|
|
right: 0;
|
|
left: auto;
|
|
z-index: 1002;
|
|
margin: 0;
|
|
}
|
|
|
|
.navbar-top .aksrt-nav-icon,
|
|
.navbar-top .aksrt-nav-avatar {
|
|
display: inline-flex !important;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 34px;
|
|
height: 34px;
|
|
padding: 0 !important;
|
|
overflow: visible !important;
|
|
border: 0 !important;
|
|
border-radius: 0;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
}
|
|
|
|
.navbar-top .aksrt-nav-icon .icon {
|
|
width: 1.2em;
|
|
height: 1.2em;
|
|
}
|
|
|
|
.navbar-top .aksrt-nav-avatar {
|
|
margin-top: 0;
|
|
}
|
|
|
|
.navbar-top .aksrt-nav-avatar .avatar {
|
|
display: block;
|
|
width: 29px;
|
|
height: 29px;
|
|
border-radius: 50%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* The account-row chips, the theme and the language toggles all want the 29px
|
|
* midline circle. The popover's quick-login buttons are .toggle-radius too and
|
|
* also live inside .navbar-form, but they must keep the .social_loginbar
|
|
* geometry from main.css: in a flex container flex-basis outranks width, so
|
|
* without this exemption the buttons collapse to 29px and lose the 5px side
|
|
* margins that space them apart. */
|
|
.navbar-top .navbar-form .toggle-radius:not(.social-login-item):not(.xh-social-item) {
|
|
flex: 0 0 29px;
|
|
margin: 0;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
/* Match the account row's 34px cross-size so the 29px toggle shares the 25px
|
|
* midline instead of sitting 2.5px above it. */
|
|
.navbar-top .navbar-form.flex.ac {
|
|
min-height: 34px;
|
|
}
|
|
|
|
.navbar-top .navbar-form .aksrt-navbar-language {
|
|
margin: 0;
|
|
}
|
|
|
|
/* The reference keeps the publish/VIP hover wrapper a plain inline-block, so the
|
|
* absolutely positioned .sub-vip-card takes its normal-flow static position.
|
|
* The shared action cluster otherwise forces inline-flex on every child, which
|
|
* would move that static position to the flex container's cross-start. */
|
|
.navbar-top .navbar-but > .hover-show {
|
|
display: inline-block;
|
|
}
|
|
|
|
/* Keep the drop-down search panel above a fixed header (z-index: 999). */
|
|
.navbar-search {
|
|
z-index: 1001;
|
|
opacity: 0;
|
|
transform: translate3d(0, -24px, 0);
|
|
transition: transform .24s ease, opacity .18s ease, visibility 0s linear .24s;
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
.navbar-search.show {
|
|
opacity: 1;
|
|
transform: translate3d(0, 0, 0);
|
|
transition-delay: 0s;
|
|
}
|
|
|
|
.navbar-search .line-form-input:focus,
|
|
.navbar-search .line-form-input:focus-visible {
|
|
outline: 0;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.navbar-search .search-close-box {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
max-width: 660px;
|
|
margin: 16px auto 0;
|
|
}
|
|
|
|
.navbar-search .search-close-box > .but {
|
|
float: none;
|
|
}
|
|
|
|
.aksrt-header-userbox {
|
|
color: var(--color-ink-2);
|
|
line-height: 1.42857143;
|
|
}
|
|
|
|
/* public.css redeclares .muted-box after the legacy utility rules, which
|
|
* otherwise overrides the wallet tiles' padding-6 and radius4 utilities. */
|
|
.aksrt-header-userbox .muted-box.padding-6 {
|
|
background-color: var(--this-bg, var(--color-line-soft));
|
|
border-radius: 4px;
|
|
padding: 6px;
|
|
}
|
|
|
|
/* core/buttons.css restates the legacy .but block after main.css, so its
|
|
* background / color / border / text-shadow declarations outrank .payvip-icon
|
|
* and replace the payvip surface with whatever .jb-* skin is on the element.
|
|
* The reference theme has no such compatibility layer, so its .payvip-icon
|
|
* declarations are the last word in the cascade. Re-assert them here, which
|
|
* loads after core/buttons.css, so every payvip surface (top-nav chip, user
|
|
* card status bar and CTA, guest CTA) keeps the legacy metallic gradient. */
|
|
.payvip-icon {
|
|
background: linear-gradient(300deg, #4c4d51, #2a2a31 15%, #85858a 40%, #393a3c 60%, #393838 80%, #5e5f62 100%);
|
|
color: #ece0e0;
|
|
--this-color: #ece0e0;
|
|
border: none;
|
|
text-shadow: none;
|
|
}
|
|
|
|
/* Keep the header check-in action flush with the VIP row's padded inner width. */
|
|
.aksrt-header-userbox > .mt6.em09 > .but.block {
|
|
display: block;
|
|
box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
|
|
/* Top-nav bell badge (the card itself uses the legacy badge.top element). */
|
|
.aksrt-nav-notification .aksrt-notification-badge {
|
|
position: absolute;
|
|
top: 2px;
|
|
right: 2px;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
min-width: 16px;
|
|
height: 16px;
|
|
padding: 0 4px;
|
|
border: 2px solid var(--surface-1);
|
|
border-radius: 999px;
|
|
background: #e74c3c;
|
|
color: #fff;
|
|
font-size: 9px;
|
|
font-weight: 700;
|
|
line-height: 1;
|
|
}
|
|
|
|
/* Navigation links are globally capped at 50px. Account actions are taller
|
|
* icon tiles and must opt out or their labels overlap the following row.
|
|
* The tile geometry itself stays with the shared legacy rules
|
|
* (.header-user-href > a and .header-user-href .toggle-radius in main.css)
|
|
* so the action row keeps the reference proportions. */
|
|
.navbar-top .aksrt-header-userbox .header-user-href > a,
|
|
.aksrt-header-userbox .header-user-href > a {
|
|
max-height: none;
|
|
}
|
|
|
|
.mobile-navbar .aksrt-header-userbox {
|
|
width: auto;
|
|
max-width: 400px;
|
|
margin: auto;
|
|
}
|