kate522/wordpress-theme-aksrt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(vip): simplify user center membership summary

Browse Source 
Remove profile identity chrome from the VIP header, keep the crown watermark, and flatten the summary into one thin card while preserving membership purchase cards.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
kate522
2026-08-04 18:34:28 +08:00
co-authored by Claude Fable 5
parent 54e0ad4026
commit 480a0bb498
3 changed files with 117 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/routes/user-center.css
+1
View File
@@ -1,5 +1,6 @@
@import url("user-center/shell.css");
@import url("user-center/credits.css");
@import url("user-center/vip.css");
@import url("user-center/level.css");
@import url("user-center/settings.css");
@import url("revenue.css");
assets/css/routes/user-center/vip.css
+95
View File
@@ -0,0 +1,95 @@
/**
* User Center — compact membership summary.
*
* The VIP tab keeps one thin status surface; personal profile chrome and
* decorative stacked-card layers belong to the user-center header, not here.
*/
.uc-vip-summary {
position: relative;
min-width: 0;
margin: 0 0 16px;
padding: 12px 16px;
overflow: hidden;
border: 1px solid var(--color-line-soft, rgba(15, 23, 42, 0.08));
border-radius: var(--main-radius, var(--radius, 8px));
background: var(--surface-1, #fff);
box-shadow: none;
isolation: isolate;
}
.uc-vip-summary__watermark {
position: absolute;
top: 50%;
right: -10px;
z-index: 0;
color: currentColor;
font-size: 160px;
line-height: 1;
opacity: 0.15;
pointer-events: none;
transform: translateY(-50%);
}
.uc-vip-summary__watermark i {
font-size: inherit;
line-height: 1;
}
.uc-vip-status {
position: relative;
z-index: 1;
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: start;
column-gap: 16px;
row-gap: 2px;
min-width: 0;
}
.uc-vip-status__label {
padding-top: 2px;
color: var(--muted-2-color, var(--color-ink-4));
font-size: 13px;
font-weight: 600;
line-height: 1.45;
white-space: nowrap;
}
.uc-vip-status__body {
min-width: 0;
}
.uc-vip-status__main {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 6px;
min-width: 0;
}
.uc-vip-status__main > .em16 {
margin-right: 0;
font-size: 1.2em;
line-height: 1.25;
}
.uc-vip-status__desc {
margin-top: 3px;
line-height: 1.4;
}
@media (max-width: 767px) {
.uc-vip-summary {
padding: 10px 12px;
}
.uc-vip-summary__watermark {
font-size: 110px;
opacity: 0.12;
}
.uc-vip-status {
column-gap: 12px;
}
}