fix(vip): render membership icons without wrappers
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -352,12 +352,12 @@
|
|||||||
.aksrt-vip-badge {
|
.aksrt-vip-badge {
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 4px;
|
justify-content: center;
|
||||||
padding: 2px 8px;
|
padding: 0;
|
||||||
border-radius: 4px;
|
border-radius: 0;
|
||||||
font: 600 11px/1 var(--font-ui);
|
font: inherit;
|
||||||
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
|
background: transparent;
|
||||||
color: #fff;
|
color: inherit;
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -371,10 +371,10 @@
|
|||||||
|
|
||||||
.aksrt-vip-badge__icon {
|
.aksrt-vip-badge__icon {
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
width: 1.1em;
|
width: 1.35em;
|
||||||
height: 1.1em;
|
height: 1.35em;
|
||||||
object-fit: contain;
|
object-fit: contain;
|
||||||
vertical-align: -.15em;
|
vertical-align: middle;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aksrt-vip-badge i {
|
.aksrt-vip-badge i {
|
||||||
|
|||||||
@@ -160,9 +160,9 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.pay-vip-info {
|
.pay-vip-info {
|
||||||
padding: 12px;
|
padding: 0;
|
||||||
border-radius: 10px;
|
border-radius: 0;
|
||||||
background: var(--surface-2, rgba(0, 0, 0, 0.04));
|
background: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
.pay-vip-info.level-1 {
|
.pay-vip-info.level-1 {
|
||||||
@@ -219,10 +219,10 @@
|
|||||||
.vip-product {
|
.vip-product {
|
||||||
position: relative;
|
position: relative;
|
||||||
padding: 12px 8px;
|
padding: 12px 8px;
|
||||||
border-radius: 10px;
|
border-radius: 0;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
border: 0;
|
||||||
background: var(--main-bg-color, #fff);
|
background: transparent;
|
||||||
transition: border-color 0.15s, box-shadow 0.15s;
|
transition: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.aksrt-vip-product-label input:checked + .vip-product {
|
.aksrt-vip-product-label input:checked + .vip-product {
|
||||||
|
|||||||
@@ -1211,7 +1211,11 @@ body.uc-modal-open {
|
|||||||
/* Defensive: modal stylesheet also styles .pay-vip-info; keep UC cards independent */
|
/* Defensive: modal stylesheet also styles .pay-vip-info; keep UC cards independent */
|
||||||
.uc-vip-tab .uc-vip-level-card.pay-vip-info {
|
.uc-vip-tab .uc-vip-level-card.pay-vip-info {
|
||||||
display: block;
|
display: block;
|
||||||
background: var(--main-bg-color, var(--surface-1, #fff));
|
background: transparent;
|
||||||
|
border: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 0;
|
||||||
|
padding: 0;
|
||||||
}
|
}
|
||||||
.uc-vip-level-card.level-1 {
|
.uc-vip-level-card.level-1 {
|
||||||
background: linear-gradient(180deg, rgba(246, 196, 83, 0.16), rgba(255, 255, 255, 0.02)) !important;
|
background: linear-gradient(180deg, rgba(246, 196, 83, 0.16), rgba(255, 255, 255, 0.02)) !important;
|
||||||
@@ -1220,18 +1224,22 @@ body.uc-modal-open {
|
|||||||
background: linear-gradient(180deg, rgba(142, 68, 173, 0.12), rgba(255, 255, 255, 0.02)) !important;
|
background: linear-gradient(180deg, rgba(142, 68, 173, 0.12), rgba(255, 255, 255, 0.02)) !important;
|
||||||
}
|
}
|
||||||
.uc-vip-level-card .vip-baicon {
|
.uc-vip-level-card .vip-baicon {
|
||||||
position: absolute !important;
|
display: none;
|
||||||
left: auto !important;
|
}
|
||||||
right: 8px !important;
|
.uc-vip-level-card .v-iconbox {
|
||||||
top: 6px !important;
|
justify-content: flex-start;
|
||||||
bottom: auto !important;
|
gap: 0;
|
||||||
width: auto !important;
|
}
|
||||||
transform: none !important;
|
.uc-vip-level-card .v-icon {
|
||||||
opacity: 0.08;
|
display: inline-flex;
|
||||||
font-size: 64px;
|
width: auto;
|
||||||
line-height: 1;
|
height: auto;
|
||||||
pointer-events: none;
|
border-radius: 0;
|
||||||
z-index: 0;
|
background: transparent !important;
|
||||||
|
color: inherit;
|
||||||
|
}
|
||||||
|
.uc-vip-level-card .v-info {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
.uc-vip-level-card__inner {
|
.uc-vip-level-card__inner {
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|||||||
@@ -24,9 +24,9 @@
|
|||||||
padding-inline-end: 84px;
|
padding-inline-end: 84px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
border-radius: var(--radius, 8px);
|
border-radius: 0;
|
||||||
background: #fff;
|
background: transparent;
|
||||||
box-shadow: var(--shadow-sm);
|
box-shadow: none;
|
||||||
color: var(--color-ink-2);
|
color: var(--color-ink-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -112,11 +112,11 @@
|
|||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 36px;
|
width: auto;
|
||||||
height: 36px;
|
height: auto;
|
||||||
flex: 0 0 auto;
|
flex: 0 0 auto;
|
||||||
border-radius: 50%;
|
border-radius: 0;
|
||||||
background: var(--vip-card-soft);
|
background: transparent;
|
||||||
color: var(--vip-card-accent);
|
color: var(--vip-card-accent);
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -367,7 +367,7 @@ function aksrt_render_vip_badge(int $user_id = 0, string $size = 'sm'): string {
|
|||||||
? '<img class="aksrt-vip-badge__icon" src="' . $icon_url . '" alt="" loading="lazy" decoding="async" />'
|
? '<img class="aksrt-vip-badge__icon" src="' . $icon_url . '" alt="" loading="lazy" decoding="async" />'
|
||||||
: '<i class="fas fa-crown" aria-hidden="true"></i>';
|
: '<i class="fas fa-crown" aria-hidden="true"></i>';
|
||||||
|
|
||||||
return '<span class="aksrt-vip-badge aksrt-vip-badge--gold ' . esc_attr($size_class . ' ' . $level_class) . '">' . $icon . ' ' . esc_html($badge_text) . '</span>';
|
return '<span class="aksrt-vip-badge aksrt-vip-badge--gold ' . esc_attr($size_class . ' ' . $level_class) . '" title="' . esc_attr($badge_text) . '">' . $icon . '</span>';
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|||||||
@@ -101,7 +101,6 @@ $status_html = '<div class="uc-vip-status" role="status">'
|
|||||||
. '</div>'
|
. '</div>'
|
||||||
. '<div class="uc-vip-status__main uc-vip-status__main--level-' . (int) $vip_level_number . '">'
|
. '<div class="uc-vip-status__main uc-vip-status__main--level-' . (int) $vip_level_number . '">'
|
||||||
. '<span class="uc-vip-status__icon" aria-hidden="true">' . $status_icon . '</span>'
|
. '<span class="uc-vip-status__icon" aria-hidden="true">' . $status_icon . '</span>'
|
||||||
. '<span class="uc-vip-status__level">' . esc_html($vip_level_name) . '</span>'
|
|
||||||
. '</div>'
|
. '</div>'
|
||||||
. '<div class="uc-vip-status__desc">' . esc_html($vip_description) . '</div>'
|
. '<div class="uc-vip-status__desc">' . esc_html($vip_description) . '</div>'
|
||||||
. '<div class="uc-vip-status__expiry"><i class="fas fa-clock" aria-hidden="true"></i><span>' . esc_html($vip_expiry_text) . '</span></div>'
|
. '<div class="uc-vip-status__expiry"><i class="fas fa-clock" aria-hidden="true"></i><span>' . esc_html($vip_expiry_text) . '</span></div>'
|
||||||
@@ -148,8 +147,6 @@ foreach ([1, 2] as $lv) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
$cards .= '<div class="zib-widget text-center pay-vip-info flex1 level-' . $lv . ' uc-vip-level-card">';
|
$cards .= '<div class="zib-widget text-center pay-vip-info flex1 level-' . $lv . ' uc-vip-level-card">';
|
||||||
// Decorative gem: do NOT use .abs-center (that utility is full-width header/search placement).
|
|
||||||
$cards .= '<div class="vip-baicon" aria-hidden="true"><i class="fas fa-gem"></i></div>';
|
|
||||||
$cards .= '<div class="relative uc-vip-level-card__inner">';
|
$cards .= '<div class="relative uc-vip-level-card__inner">';
|
||||||
$cards .= '<div class="v-iconbox mb10 flex jc ac">';
|
$cards .= '<div class="v-iconbox mb10 flex jc ac">';
|
||||||
$cards .= '<div class="v-icon flex jc ac">' . $lv_icon . '</div>';
|
$cards .= '<div class="v-icon flex jc ac">' . $lv_icon . '</div>';
|
||||||
|
|||||||
Reference in New Issue
Block a user