fix(vip): preserve cards and align level icons
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
@@ -363,18 +363,20 @@
|
||||
|
||||
.aksrt-vip-level-icon {
|
||||
display: inline-block;
|
||||
width: 1.4em;
|
||||
height: 1.4em;
|
||||
width: auto;
|
||||
height: 1.1em;
|
||||
max-width: 6em;
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
vertical-align: -.15em;
|
||||
}
|
||||
|
||||
.aksrt-vip-badge__icon {
|
||||
display: inline-block;
|
||||
width: 1.35em;
|
||||
height: 1.35em;
|
||||
width: auto;
|
||||
height: 1.1em;
|
||||
max-width: 6em;
|
||||
object-fit: contain;
|
||||
vertical-align: middle;
|
||||
vertical-align: -.15em;
|
||||
}
|
||||
|
||||
.aksrt-vip-badge i {
|
||||
|
||||
@@ -160,9 +160,9 @@
|
||||
}
|
||||
|
||||
.pay-vip-info {
|
||||
padding: 0;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
background: var(--surface-2, rgba(0, 0, 0, 0.04));
|
||||
}
|
||||
|
||||
.pay-vip-info.level-1 {
|
||||
@@ -219,10 +219,10 @@
|
||||
.vip-product {
|
||||
position: relative;
|
||||
padding: 12px 8px;
|
||||
border-radius: 0;
|
||||
border: 0;
|
||||
background: transparent;
|
||||
transition: none;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.08);
|
||||
background: var(--main-bg-color, #fff);
|
||||
transition: border-color 0.15s, box-shadow 0.15s;
|
||||
}
|
||||
|
||||
.aksrt-vip-product-label input:checked + .vip-product {
|
||||
|
||||
@@ -699,9 +699,10 @@ body.uc-modal-open {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.uc-vip-card__icon .aksrt-vip-level-icon {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
.uc-vip-card__icon .aksrt-vip-level-icon,
|
||||
.uc-vip-level-card .aksrt-vip-level-icon {
|
||||
width: auto;
|
||||
height: 1.1em;
|
||||
}
|
||||
|
||||
.uc-vip-card__header {
|
||||
@@ -1211,11 +1212,11 @@ body.uc-modal-open {
|
||||
/* Defensive: modal stylesheet also styles .pay-vip-info; keep UC cards independent */
|
||||
.uc-vip-tab .uc-vip-level-card.pay-vip-info {
|
||||
display: block;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
background: var(--main-bg-color, var(--surface-1, #fff));
|
||||
border: 1px solid var(--color-line-soft, rgba(0, 0, 0, 0.06));
|
||||
box-shadow: var(--shadow-sm);
|
||||
border-radius: var(--radius, 10px);
|
||||
padding: 16px;
|
||||
}
|
||||
.uc-vip-level-card.level-1 {
|
||||
background: linear-gradient(180deg, rgba(246, 196, 83, 0.16), rgba(255, 255, 255, 0.02)) !important;
|
||||
@@ -1227,19 +1228,28 @@ body.uc-modal-open {
|
||||
display: none;
|
||||
}
|
||||
.uc-vip-level-card .v-iconbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
gap: 0;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
width: 100%;
|
||||
}
|
||||
.uc-vip-level-card .v-icon {
|
||||
display: inline-flex;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: transparent !important;
|
||||
flex: 0 0 auto;
|
||||
color: inherit;
|
||||
}
|
||||
.uc-vip-level-card .v-info {
|
||||
display: none;
|
||||
display: block;
|
||||
text-align: left;
|
||||
min-width: 0;
|
||||
}
|
||||
.uc-vip-level-card__inner {
|
||||
position: relative;
|
||||
@@ -1258,23 +1268,19 @@ body.uc-modal-open {
|
||||
width: 100%;
|
||||
}
|
||||
.uc-vip-level-card .v-icon {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
width: auto;
|
||||
height: auto;
|
||||
border-radius: 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
background: transparent !important;
|
||||
flex: 0 0 auto;
|
||||
color: inherit;
|
||||
}
|
||||
.uc-vip-level-card.level-1 .v-icon {
|
||||
background: rgba(246, 196, 83, 0.22);
|
||||
color: #866127;
|
||||
}
|
||||
.uc-vip-level-card.level-1 .v-icon,
|
||||
.uc-vip-level-card.level-2 .v-icon {
|
||||
background: rgba(142, 68, 173, 0.16);
|
||||
color: #6b4aa8;
|
||||
background: transparent !important;
|
||||
}
|
||||
.uc-vip-level-card .v-info {
|
||||
text-align: left;
|
||||
|
||||
@@ -24,9 +24,9 @@
|
||||
padding-inline-end: 84px;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
border-radius: var(--radius, 8px);
|
||||
background: #fff;
|
||||
box-shadow: var(--shadow-sm);
|
||||
color: var(--color-ink-2);
|
||||
}
|
||||
|
||||
@@ -112,11 +112,11 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: auto;
|
||||
height: auto;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
flex: 0 0 auto;
|
||||
border-radius: 0;
|
||||
background: transparent;
|
||||
border-radius: 50%;
|
||||
background: var(--vip-card-soft);
|
||||
color: var(--vip-card-accent);
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
@@ -101,6 +101,7 @@ $status_html = '<div class="uc-vip-status" role="status">'
|
||||
. '</div>'
|
||||
. '<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__level">' . esc_html($vip_level_name) . '</span>'
|
||||
. '</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>'
|
||||
|
||||
Reference in New Issue
Block a user