From 56434a9255b9ffef04a8e30837d873f33044ba25 Mon Sep 17 00:00:00 2001 From: unknown Date: Tue, 21 Jul 2026 18:54:16 +0800 Subject: [PATCH] fix(ui): float VIP duplicates, hover cards, UC menu and light-theme contrast --- .../css/frontend/nav/header-menu-buttons.css | 303 ++++++++++++++---- assets/css/frontend/nav/header-userbox.css | 101 +++++- assets/js/core/theme.js | 14 +- footer.php | 9 +- inc/helpers/aksrt-header-menu-buttons.php | 11 +- inc/helpers/aksrt-runtime-win.php | 2 +- .../user-center-renderers/sidebar-nav.php | 7 +- src/AKSRT/Content/VipServiceModal.php | 49 ++- 8 files changed, 388 insertions(+), 108 deletions(-) diff --git a/assets/css/frontend/nav/header-menu-buttons.css b/assets/css/frontend/nav/header-menu-buttons.css index ad04385b..0b6e1727 100644 --- a/assets/css/frontend/nav/header-menu-buttons.css +++ b/assets/css/frontend/nav/header-menu-buttons.css @@ -1,5 +1,5 @@ /** - * Header multi-function publish cluster + VIP CTA. + * Header multi-function publish cluster + VIP CTA + hover VIP cards. * * @package AKSRT */ @@ -50,7 +50,7 @@ justify-content: center; width: 1em; height: 1em; - margin: 0 !important; /* kill mr3/ml10 utility drift on icons */ + margin: 0 !important; flex: 0 0 auto; line-height: 1; font-size: 1em; @@ -74,51 +74,58 @@ } .navbar-but-cluster .ml10 { - margin-left: 0; /* spacing handled by cluster gap */ -} - -.navbar-but-cluster .theme-toggle-desktop, -.navbar-but-cluster .toggle-theme { - display: inline-flex; - align-items: center; - justify-content: center; - width: 34px; - height: 34px; - padding: 0; - border-radius: 999px; - flex: 0 0 auto; -} - -.navbar-but-cluster .theme-toggle-desktop > i, -.navbar-but-cluster .toggle-theme > i { - margin: 0 !important; - line-height: 1; + margin-left: 0; } +/* Publish multi-type dropdown */ .newadd-btns.hover-show { position: relative; display: inline-flex; align-items: center; + z-index: 20; } .newadd-btns .drop-newadd, .newadd-btns .hover-show-con { - display: none; + display: block; position: absolute; - top: calc(100% + 6px); + top: calc(100% + 0px); right: 0; min-width: 148px; + margin: 0; + padding: 6px 0; + padding-top: 10px; /* bridge gap so pointer can move into menu */ + background: transparent; + border: 0; + box-shadow: none; + opacity: 0; + visibility: hidden; + transform: translateY(6px); + transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; + z-index: 50; + pointer-events: none; +} + +.newadd-btns .drop-newadd::before, +.newadd-btns .hover-show-con.drop-newadd::before { + content: ""; + display: block; background: var(--main-bg-color, #fff); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); - padding: 6px 0; - z-index: 50; + position: absolute; + inset: 6px 0 0 0; + z-index: -1; } .newadd-btns.hover-show:hover .drop-newadd, .newadd-btns.hover-show:hover .hover-show-con, -.newadd-btns.hover-show:focus-within .drop-newadd { - display: block; +.newadd-btns.hover-show:focus-within .drop-newadd, +.newadd-btns.hover-show:focus-within .hover-show-con { + opacity: 1; + visibility: visible; + transform: translateY(0); + pointer-events: auto; } .newadd-btns__item { @@ -129,6 +136,7 @@ color: inherit; text-decoration: none; white-space: nowrap; + position: relative; } .newadd-btns__item > i { @@ -143,29 +151,206 @@ color: var(--focus-color, var(--color-primary)); } -/* Header VIP hover cards */ -.navbar-vip.hover-show { +/* Generic hover-show (zibll parity) */ +.hover-show { + position: relative; + cursor: pointer; + z-index: 20; +} + +.hover-show .hover-show-con { + position: absolute; + top: 100%; + right: 0; + opacity: 0; + visibility: hidden; + transform: translateY(6px); + transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s; + pointer-events: none; + z-index: 60; + /* invisible bridge so moving mouse into panel doesn't close it */ + padding-top: 10px; +} + +.hover-show:hover .hover-show-con, +.hover-show:focus-within .hover-show-con { + opacity: 1; + visibility: visible; + transform: translateY(0); + pointer-events: auto; +} + +/* Header VIP hover cards — zibll .sub-vip-card */ +.navbar-vip-hover, +.navbar-vip .hover-show { + position: relative; + display: inline-block; + z-index: 30; +} + +.sub-vip-card.hover-show-con, +.hover-show-con.sub-vip-card { + font-size: 12px; + padding: 10px 0 0 !important; /* top bridge */ + background: transparent !important; + border: none !important; + box-shadow: none !important; + white-space: nowrap; + left: auto; + right: 0; + min-width: 0; +} + +.sub-vip-card .vip-card { + display: inline-block; + vertical-align: top; + width: 240px; + margin: 5px; + padding: 15px; + border-radius: var(--main-radius, 8px); + overflow: hidden; + position: relative; + box-shadow: 0 0 10px var(--main-shadow, rgba(0, 0, 0, 0.12)); + box-sizing: border-box; + white-space: normal; + transition: 0.3s; +} + +.sub-vip-card .vip-card.vip-theme1, +.sub-vip-card .vip-card.level-1 { + background: linear-gradient(25deg, #e6aa4f 10%, #f1d7ad 70%, #f5b97b 100%); + color: #866127; +} + +.sub-vip-card .vip-card.vip-theme2, +.sub-vip-card .vip-card.level-2 { + background: linear-gradient(132deg, #9b7de4 0%, #4f48b8 30%, #624fba 80%, #574dba); + color: #e4e2fb; +} + +.sub-vip-card .vip-baicon.abs-center, +.sub-vip-card .vip-baicon { + position: absolute; + font-size: 10em; + left: 55%; + top: 50%; + transform: translate(-50%, -50%); + opacity: 0.12; + pointer-events: none; + line-height: 1; +} + +.sub-vip-card .vip-img { + display: none; +} + +.sub-vip-card .vip-name { + font-size: 16px; + position: relative; + z-index: 1; +} + +.sub-vip-card .vip-name .mr6 { + margin-right: 6px; +} + +.sub-vip-card .v-equity, +.sub-vip-card ul.mb10 { + position: relative; + z-index: 1; + margin: 8px 0 12px; + padding: 0; + list-style: none; + text-align: left; + font-size: 12px; + line-height: 1.5; + opacity: 0.95; +} + +.sub-vip-card .v-equity > li, +.sub-vip-card ul.mb10 > li { + display: block; + margin: 0 0 6px; + padding-left: 12px; position: relative; } -.navbar-vip .sub-vip-card { - display: none; +.sub-vip-card .v-equity > li::before, +.sub-vip-card ul.mb10 > li::before { + content: ""; position: absolute; - top: calc(100% + 8px); - right: 0; - z-index: 60; - width: min(420px, 90vw); - padding: 10px; - border-radius: 12px; - background: var(--main-bg-color, #fff); - box-shadow: 0 12px 36px rgba(0, 0, 0, 0.16); - gap: 10px; - flex-wrap: wrap; + left: 0; + top: 0.55em; + width: 5px; + height: 5px; + border-radius: 50%; + background: currentColor; + opacity: 0.5; } -.navbar-vip.hover-show:hover .sub-vip-card, -.navbar-vip.hover-show:focus-within .sub-vip-card { - display: flex; +.sub-vip-card .payvip-button { + font-size: 1em !important; + margin: 0 !important; + display: inline-flex; + align-items: center; + gap: 4px; + background: linear-gradient(135deg, #ff9633 10%, #f14315 100%); + color: #fff; + padding: 4px 15px !important; + border-radius: 999px; + text-decoration: none; + box-shadow: 0 0 10px rgba(26, 22, 15, 0.3); + position: relative; + z-index: 2; + border: 0; +} + +.sub-vip-card .payvip-button:hover { + filter: brightness(1.05); + color: #fff; +} + +/* Theme toggle */ +.navbar-but-cluster .theme-toggle-desktop, +.navbar-but-cluster .toggle-theme { + display: inline-flex; + align-items: center; + justify-content: center; + width: 34px; + height: 34px; + padding: 0; + border-radius: 999px; + flex: 0 0 auto; + position: relative; + overflow: hidden; +} + +.navbar-but-cluster .theme-toggle-desktop > i, +.navbar-but-cluster .toggle-theme > i { + margin: 0 !important; + line-height: 1; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.theme-toggle-desktop, +.theme-toggle-mobile, +.toggle-theme { + position: relative; +} + +.theme-toggle-desktop .theme-icon-moon, +.theme-toggle-desktop .theme-icon-sun, +.theme-toggle-mobile .theme-icon-moon, +.theme-toggle-mobile .theme-icon-sun, +.toggle-theme .theme-icon-moon, +.toggle-theme .theme-icon-sun { + margin: 0 !important; + line-height: 1; + width: 1em; + text-align: center; } /* float commerce */ @@ -198,10 +383,10 @@ color: #f5a623; } -@media (max-width: 768px) { - .navbar-but-cluster .navbar-cta-text { - /* keep text on tablet; hide only on very narrow if needed */ - } +.float-right .float-btn > i { + margin: 0 !important; + line-height: 1; + font-size: 1.1em; } @media (max-width: 520px) { @@ -213,23 +398,7 @@ padding: 6px 10px; font-size: 12px; } -} - - -/* Theme toggle: keep moon/sun icons centered, no double-glyph overlap */ -.theme-toggle-desktop, -.theme-toggle-mobile, -.toggle-theme { - position: relative; -} -.theme-toggle-desktop .theme-icon-moon, -.theme-toggle-desktop .theme-icon-sun, -.theme-toggle-mobile .theme-icon-moon, -.theme-toggle-mobile .theme-icon-sun, -.toggle-theme .theme-icon-moon, -.toggle-theme .theme-icon-sun { - margin: 0 !important; - line-height: 1; - width: 1em; - text-align: center; + .sub-vip-card .vip-card { + width: min(220px, 42vw); + } } diff --git a/assets/css/frontend/nav/header-userbox.css b/assets/css/frontend/nav/header-userbox.css index 9db422c2..dfc8c7ce 100644 --- a/assets/css/frontend/nav/header-userbox.css +++ b/assets/css/frontend/nav/header-userbox.css @@ -1,5 +1,6 @@ /** * Header user-box density (check-in / wallet / payvip / signout modal). + * Light-theme contrast fixes. * * @package AKSRT */ @@ -11,33 +12,69 @@ padding: 8px 10px; border-radius: 8px; background: var(--surface-2, rgba(0, 0, 0, 0.04)); - color: inherit; + color: var(--color-ink, #222); text-decoration: none; font-size: 12px; } -.aksrt-header-wallet__item b { - margin-left: 2px; +.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: readable on light theme */ .aksrt-header-checkin { width: 100%; border: 0; border-radius: 6px; padding: 8px 10px; cursor: pointer; - background: rgba(255, 193, 7, 0.18); + background: #fff6db; + color: #8a5a00; + font-weight: 600; + display: inline-flex; + align-items: center; + justify-content: center; + gap: 6px; +} + +.aksrt-header-checkin > i { + margin: 0 !important; color: #b78103; } .aksrt-header-checkin.is-done { - opacity: 0.75; + opacity: 0.85; cursor: default; + background: #f3f4f6; + color: #555; +} + +.aksrt-header-checkin.is-done > i { + color: #777; +} + +.aksrt-header-checkin-details { + color: var(--color-ink-3, #666) !important; + text-decoration: none; } .aksrt-header-payvip .payvip-icon, .aksrt-header-payvip .but { - display: block; + display: flex; + align-items: center; + justify-content: center; + gap: 6px; text-align: center; text-decoration: none; padding: 8px 10px; @@ -46,11 +83,39 @@ color: #fff; } +.aksrt-header-payvip .payvip-icon > i, +.aksrt-header-payvip .but > i { + margin: 0 !important; +} + .aksrt-header-badges { flex-wrap: wrap; gap: 4px; } +/* 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; @@ -73,6 +138,7 @@ 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 { @@ -86,6 +152,7 @@ #modal_signout .but { border: 0; background: var(--surface-2, #f0f0f0); + color: var(--color-ink, #222); padding: 8px 14px; border-radius: 6px; cursor: pointer; @@ -94,3 +161,25 @@ .user-dropdown .social_loginbar { padding: 0 10px 12px; } + +/* Dark theme overrides */ +html.dark .aksrt-header-checkin, +body.dark-theme .aksrt-header-checkin, +body.theme-dark .aksrt-header-checkin { + background: rgba(255, 193, 7, 0.18); + color: #f0c14b; +} + +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; +} diff --git a/assets/js/core/theme.js b/assets/js/core/theme.js index 1b207a4a..251878a8 100644 --- a/assets/js/core/theme.js +++ b/assets/js/core/theme.js @@ -157,26 +157,22 @@ syncThemeImages(isDark); syncCodeHighlightTheme(isDark); dispatchThemeChange(isDark); - document.querySelectorAll("#theme-toggle, #theme-toggle-desktop, #theme-toggle-mobile, #dropdown-theme-toggle, #float-theme-toggle, .toggle-theme").forEach(function (btn) { + document.querySelectorAll("#theme-toggle, #theme-toggle-desktop, #theme-toggle-mobile, #dropdown-theme-toggle, #float-theme-toggle, .toggle-theme, .theme-toggle-btn, [data-action='toggle-theme']").forEach(function (btn) { if (!btn) return; btn.setAttribute("aria-pressed", isDark ? "true" : "false"); btn.classList.toggle("is-dark", isDark); - var moon = btn.querySelector(".theme-icon-moon"); - var sun = btn.querySelector(".theme-icon-sun"); + var moon = btn.querySelector(".theme-icon-moon, .float-btn__icon-moon"); + var sun = btn.querySelector(".theme-icon-sun, .float-btn__icon-sun"); if (moon && sun) { + // Light mode: show moon (click to go dark). Dark mode: show sun. moon.style.display = isDark ? "none" : ""; sun.style.display = isDark ? "" : "none"; } }); + // Keep legacy float id path for float-btn__icon-* class names already handled above. var floatBtn = document.getElementById("float-theme-toggle"); if (floatBtn) { floatBtn.setAttribute("aria-pressed", isDark ? "true" : "false"); - var moonIcon = floatBtn.querySelector(".float-btn__icon-moon"); - var sunIcon = floatBtn.querySelector(".float-btn__icon-sun"); - if (moonIcon && sunIcon) { - moonIcon.style.display = isDark ? "" : "none"; - sunIcon.style.display = isDark ? "none" : ""; - } } var ddBtn = document.getElementById("dropdown-theme-toggle"); if (ddBtn) ddBtn.setAttribute("aria-pressed", isDark ? "true" : "false"); diff --git a/footer.php b/footer.php index 4b427406..a95e84ef 100644 --- a/footer.php +++ b/footer.php @@ -483,17 +483,14 @@ if ($floating_enabled) : - 'fas fa-shopping-cart']); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped } - if (!in_array('pay_vip', $float_types, true) && function_exists('aksrt_get_float_pay_vip_html')) { - echo aksrt_get_float_pay_vip_html(['icon' => 'fa fa-diamond']); // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped - } ?> - diff --git a/inc/helpers/aksrt-header-menu-buttons.php b/inc/helpers/aksrt-header-menu-buttons.php index 9c5ecf13..e71feb2b 100644 --- a/inc/helpers/aksrt-header-menu-buttons.php +++ b/inc/helpers/aksrt-header-menu-buttons.php @@ -225,17 +225,18 @@ if (!function_exists('aksrt_render_header_menu_buttons')) : if (method_exists($svc, 'render_vip_card')) { $cards = $svc->render_vip_card(1, $user_id) . $svc->render_vip_card(2, $user_id); if ($cards !== '') { - $hover = '
' . $cards . '
'; + $hover = '
' . $cards . '
'; } } } - $html .= '
'; - // FA5: diamond → gem. Keep label in span for flex alignment. - $html .= ' 0 ? ' vip-level="1"' : '') . '>'; $html .= '' . '' . esc_html__('开通会员', 'aksrt') . ''; - $html .= '' . $hover . '
'; + $html .= '' . $hover . ''; } } diff --git a/inc/helpers/aksrt-runtime-win.php b/inc/helpers/aksrt-runtime-win.php index 9771cd90..6c38877c 100644 --- a/inc/helpers/aksrt-runtime-win.php +++ b/inc/helpers/aksrt-runtime-win.php @@ -75,7 +75,7 @@ if (!function_exists('aksrt_get_float_pay_vip_html')) : return ''; } $title = $level === 1 ? __('升级会员', 'aksrt') : __('开通会员', 'aksrt'); - $icon = !empty($item['icon']) ? (string) $item['icon'] : 'fa fa-diamond'; + $icon = !empty($item['icon']) ? (string) $item['icon'] : 'fas fa-gem'; $cls = $user_id > 0 ? 'float-btn pay-vip' : 'float-btn signin-loader'; // Modal path: .pay-vip opens VIP modal (Batch 2+); guests use signin-loader. $href = 'javascript:;'; diff --git a/inc/helpers/user-center-renderers/sidebar-nav.php b/inc/helpers/user-center-renderers/sidebar-nav.php index ef070353..ab4d4cf5 100644 --- a/inc/helpers/user-center-renderers/sidebar-nav.php +++ b/inc/helpers/user-center-renderers/sidebar-nav.php @@ -12,7 +12,12 @@ defined('ABSPATH') || exit;
- $tab) : ?> + $tab) : + // VIP only under 权益与消费 (sidebar-commerce), not duplicated here. + if ((string) $tab_key === 'vip') { + continue; + } + ?> diff --git a/src/AKSRT/Content/VipServiceModal.php b/src/AKSRT/Content/VipServiceModal.php index 38f32819..aedb7822 100644 --- a/src/AKSRT/Content/VipServiceModal.php +++ b/src/AKSRT/Content/VipServiceModal.php @@ -55,28 +55,51 @@ trait VipServiceModal { $name = (string) ($levels[$level]['name'] ?? ('VIP' . $level)); $desc = (string) ($levels[$level]['desc'] ?? ''); $equity = (string) ($levels[$level]['equity'] ?? ''); - $cls = $user_id > 0 ? 'pay-vip' : 'signin-loader'; - $html = '
'; - $html .= '
'; + $cls = $user_id > 0 ? ' pay-vip' : ' signin-loader'; + + $equity_html = ''; + $equity_raw = trim(wp_kses_post($equity)); + if ($equity_raw !== '') { + if (preg_match('/]/i', $equity_raw)) { + $inner = preg_replace('#]*>#i', '', $equity_raw) ?? $equity_raw; + $equity_html = '
    ' . $inner . '
'; + } else { + $parts = preg_split('/[\r\n]+|[；;，,|｜]+/u', wp_strip_all_tags($equity_raw)) ?: []; + $parts = array_values(array_filter(array_map('trim', $parts))); + if (count($parts) === 1 && mb_strlen($parts[0]) > 16) { + $chunks = preg_split('/(?=(?:免费|会员|更高|专属|付费|下载|身份|权益|折扣|无限))/u', $parts[0], -1, PREG_SPLIT_NO_EMPTY) ?: []; + $chunks = array_values(array_filter(array_map('trim', $chunks))); + if (count($chunks) > 1) { + $parts = $chunks; + } + } + if ($parts) { + $equity_html = '
    '; + foreach ($parts as $p) { + $equity_html .= '
  • ' . esc_html($p) . '
    • '; + } + $equity_html .= '
'; + } + } + } + + $icon = ''; + $html = '
'; + $html .= '
' . $icon . '
'; + $html .= '
' . $icon . '
'; $html .= '
'; - $html .= '
' . esc_html($name) . '
'; + $html .= '
' . $icon . '' . esc_html($name) . '
'; if ($desc !== '') { - $html .= '
' . esc_html($desc) . '
'; - } - if ($equity !== '') { - $html .= '
    ' . $equity . '
'; + $html .= '
' . esc_html($desc) . '
'; } + $html .= $equity_html; $html .= '' . esc_html(sprintf(__('开通%s', 'aksrt'), $name)) - . ''; + . ''; $html .= '
'; return $html; } - /** - * @param array $catalog - * @param array $vip - */ private function render_modal_pay(int $user_id, array $catalog, array $vip, int $prefer_level): string { $user = get_userdata($user_id); $name = $user ? $user->display_name : '';