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

fix(ui): center float QR titles and repair UC VIP layout

Browse Source
This commit is contained in:
kate522 committed 2026-07-21 19:51:08 +08:00
1 parent 4bbfecb922
commit ee5a16f9a0
6 files changed
+203 -42
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

assets/css/frontend/floating-buttons.css
+25
View File
@@ -176,6 +176,7 @@
font-size: 13px;
line-height: 1.6;
color: var(--color-ink-3);
text-align: center;
}
.float-btn-qrcode {
@@ -193,8 +194,32 @@
.float-right .service-qq .hover-show-con,
.float-right .qrcode-btn .hover-show-con {
padding: 14px;
text-align: center;
}
/* Page QR hover card: keep title/caption centered under the code */
.float-right .qrcode-btn .hover-show-con {
display: flex;
flex-direction: column;
align-items: center;
}
.float-right .qrcode-btn .hover-show-con p {
width: 100%;
text-align: center;
margin-top: 2px;
}
.float-right .qrcode-btn .hover-show-con .float-btn-qrcode__title {
width: 100%;
text-align: center;
margin: 2px 0 0;
font-size: 13px;
line-height: 1.6;
color: var(--color-ink-3);
}
.float-right .service-wechat .hover-show-con img,
.float-right .service-qq .hover-show-con img {
margin: 0 auto;
assets/css/frontend/vip-modal.css
+26 -3
View File
@@ -102,12 +102,35 @@
background: linear-gradient(135deg, rgba(156, 39, 176, 0.12), rgba(63, 81, 181, 0.08));
}
.v-equity {
margin: 0;
padding-left: 1.1em;
/* Modal-only equity list (UC tab has its own stronger rules under .uc-vip-tab) */
.payvip-modal .v-equity,
.aksrt-vip-modal-dialog .v-equity {
display: block;
list-style: none;
margin: 8px 0 0;
padding: 0;
font-size: 12px;
line-height: 1.6;
}
.payvip-modal .v-equity > li,
.aksrt-vip-modal-dialog .v-equity > li {
display: block;
margin: 0 0 6px;
padding-left: 12px;
position: relative;
}
.payvip-modal .v-equity > li::before,
.aksrt-vip-modal-dialog .v-equity > li::before {
content: "";
position: absolute;
left: 0;
top: 0.55em;
width: 5px;
height: 5px;
border-radius: 50%;
background: currentColor;
opacity: 0.45;
}
.aksrt-vip-products {
display: grid;
assets/css/routes/user-center/credits.css
+129 -25
View File
@@ -1076,55 +1076,122 @@ body.uc-modal-open {
background: linear-gradient(90deg, #22c55e, #16a34a);
}
/* VIP tab — zibll 我的会员 */
/* VIP tab — zibll 我的会员 (scoped; no dependence on homepage-only utilities) */
.uc-vip-tab {
min-width: 0;
}
.uc-vip-tab .user-content-myvip {
position: relative;
display: flex;
align-items: center;
gap: 16px;
padding: 16px 18px;
margin-bottom: 16px;
overflow: hidden;
}
.uc-vip-tab .user-content-myvip .vip-img {
position: absolute;
right: 12px;
top: 50%;
transform: translateY(-50%);
opacity: 0.08;
font-size: 3em;
line-height: 1;
pointer-events: none;
z-index: 0;
}
.uc-vip-tab .user-content-myvip .uc-vip-user-row {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
flex: 1 1 auto;
}
.uc-vip-tab .user-content-myvip .avatar-img {
flex: 0 0 auto;
}
.uc-vip-tab .user-content-myvip .avatar-img img {
border-radius: 50%;
display: block;
width: 56px;
height: 56px;
object-fit: cover;
}
.uc-vip-tab .user-content-myvip .min-w-0 {
min-width: 0;
}
.uc-vip-tab .mb3 {
margin-bottom: 3px;
}
.uc-vip-status {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
gap: 6px;
}
.uc-vip-status .flex.ac {
.uc-vip-status__title {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 1.05em;
line-height: 1.3;
}
.uc-vip-status .badg {
display: inline-flex;
align-items: center;
gap: 4px;
width: auto;
max-width: 100%;
}
.uc-vip-level-cards {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: stretch;
}
.uc-vip-level-card {
position: relative;
flex: 1 1 240px;
min-width: 0;
padding: 20px 16px 18px;
overflow: hidden;
text-align: center;
box-sizing: border-box;
}
/* 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: var(--main-bg-color, var(--surface-1, #fff));
}
.uc-vip-level-card.level-1 {
background: linear-gradient(180deg, rgba(246, 196, 83, 0.14), rgba(255,255,255,0.02));
background: linear-gradient(180deg, rgba(246, 196, 83, 0.16), rgba(255, 255, 255, 0.02)) !important;
}
.uc-vip-level-card.level-2 {
background: linear-gradient(180deg, rgba(142, 68, 173, 0.10), rgba(255,255,255,0.02));
background: linear-gradient(180deg, rgba(142, 68, 173, 0.12), rgba(255, 255, 255, 0.02)) !important;
}
.uc-vip-level-card .vip-baicon {
position: absolute;
right: 10px;
top: 8px;
position: absolute !important;
left: auto !important;
right: 8px !important;
top: 6px !important;
bottom: auto !important;
width: auto !important;
transform: none !important;
opacity: 0.08;
font-size: 64px;
line-height: 1;
pointer-events: none;
z-index: 0;
}
.uc-vip-level-card__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
min-height: 100%;
}
.uc-vip-level-card .v-iconbox {
display: flex;
@@ -1132,6 +1199,7 @@ body.uc-modal-open {
justify-content: center;
gap: 10px;
margin-bottom: 10px;
width: 100%;
}
.uc-vip-level-card .v-icon {
width: 36px;
@@ -1140,8 +1208,17 @@ body.uc-modal-open {
display: inline-flex;
align-items: center;
justify-content: center;
background: rgba(0,0,0,0.05);
background: rgba(0, 0, 0, 0.05);
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-2 .v-icon {
background: rgba(142, 68, 173, 0.16);
color: #6b4aa8;
}
.uc-vip-level-card .v-info {
text-align: left;
@@ -1150,40 +1227,45 @@ body.uc-modal-open {
.uc-vip-level-card .v-name {
font-size: 16px;
line-height: 1.3;
font-weight: 700;
}
.uc-vip-level-card .v-desc {
margin-top: 2px;
}
/* CRITICAL: equity must stack as list, never one jammed line */
.uc-vip-level-card .v-equity,
.pay-vip-info .v-equity {
.uc-vip-tab .uc-vip-level-card .v-equity,
.uc-vip-tab .pay-vip-info .v-equity {
display: block !important;
list-style: none;
margin: 12px auto 16px;
padding: 0;
list-style: none !important;
margin: 12px auto 16px !important;
padding: 0 !important;
max-width: 240px;
width: 100%;
text-align: left;
font-size: 13px;
line-height: 1.55;
color: var(--muted-2-color, #888);
flex: 1 1 auto;
}
.uc-vip-level-card .v-equity > li,
.pay-vip-info .v-equity > li {
.uc-vip-tab .uc-vip-level-card .v-equity > li,
.uc-vip-tab .pay-vip-info .v-equity > li {
display: block !important;
position: relative;
margin: 0 0 8px;
padding: 0 0 0 14px;
list-style: none;
white-space: normal;
margin: 0 0 8px !important;
padding: 0 0 0 14px !important;
list-style: none !important;
white-space: normal !important;
word-break: break-word;
float: none !important;
width: auto !important;
}
.uc-vip-level-card .v-equity > li:last-child,
.pay-vip-info .v-equity > li:last-child {
margin-bottom: 0;
.uc-vip-tab .uc-vip-level-card .v-equity > li:last-child,
.uc-vip-tab .pay-vip-info .v-equity > li:last-child {
margin-bottom: 0 !important;
}
.uc-vip-level-card .v-equity > li::before,
.pay-vip-info .v-equity > li::before {
.uc-vip-tab .uc-vip-level-card .v-equity > li::before,
.uc-vip-tab .pay-vip-info .v-equity > li::before {
content: "";
position: absolute;
left: 0;
@@ -1205,14 +1287,19 @@ body.uc-modal-open {
border: 0;
text-decoration: none;
font-weight: 600;
margin-top: auto;
}
.uc-vip-cta > i {
margin: 0 !important;
line-height: 1;
}
.uc-vip-points-link {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
gap: 12px;
margin-top: 10px;
}
.uc-vip-points-link a {
display: inline-flex;
@@ -1224,6 +1311,12 @@ body.uc-modal-open {
.uc-vip-assets-entry {
gap: 12px;
}
.uc-vip-tab .mt15 {
margin-top: 15px;
}
.uc-vip-tab .font-bold {
font-weight: 700;
}
.jb-vip1 {
background: linear-gradient(25deg, #eabe7b 10%, #f5e3c7 70%, #edc788 100%);
@@ -1236,6 +1329,14 @@ body.uc-modal-open {
border: none;
}
/* Light theme contrast for VIP badges/status */
html:not(.dark):not(.theme-dark) .uc-vip-level-card.level-1 .v-name {
color: #6b4e16;
}
html:not(.dark):not(.theme-dark) .uc-vip-level-card.level-2 .v-name {
color: #4c3a7a;
}
@media (max-width: 767px) {
.uc-vip-level-cards {
flex-direction: column;
@@ -1243,4 +1344,7 @@ body.uc-modal-open {
.uc-vip-level-card {
flex: 1 1 auto;
}
.uc-vip-tab .user-content-myvip {
padding: 14px;
}
}