kate522
ee39024549
The top-nav account row carried min-height: 50px on top of the 8px margin-top that Bootstrap base .navbar-form rule keeps at >=768px (the override only zeroes the horizontal margins). The 8px was counted twice, so the row ran from 8px to 58px: its icon tiles landed 8px below the 25px midline that the 50px menu row and the logo define, and the navbar grew from 50px to 58px, which also broke the body.nav-fixed offset. Drop the min-height so the row takes its natural 34px height from the icon tiles, and give the theme/language group the same 34px cross-size so its 29px toggle shares that midline instead of sitting 2.5px above it. Measured against the reference theme, the navbar goes from 66px to 50.05px (reference 50.28px) and the logo, menu, publish chip, VIP chip, theme toggle and account icons all centre on 25px. The desktop navbar stays visible below 991px (only the menu folds into a dropdown there), so the same fix applies at the mobile and tablet breakpoints: the top bar drops from 68px to 52.05px. Verified: node --test across tests/ (603 passing), and a stubbed navbar render measured in a headless browser against the reference theme stylesheet.
203 lines
5.8 KiB
CSS
203 lines
5.8 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;
|
|
}
|
|
|
|
.navbar-top .navbar-form .toggle-radius {
|
|
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;
|
|
}
|