banlv/cozsweet-frontend-nextjs
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(responsive): finish responsive token migration

Browse Source
This commit is contained in:
chenhang
2026-07-03 11:19:27 +08:00
parent 489554cd78
commit e5bfb4e373
27 changed files with 132 additions and 98 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/subscription/components/stripe-payment-dialog.module.css
+3 -3
View File
@@ -31,12 +31,12 @@
}
.header {
margin-bottom: 18px;
margin-bottom: var(--page-section-gap, 18px);
text-align: left;
}
.title {
margin: 0 0 8px;
margin: 0 0 clamp(7px, 1.481vw, 8px);
color: var(--color-text-foreground, #171717);
font-size: var(--responsive-page-title, 22px);
font-weight: 700;
@@ -53,7 +53,7 @@
.form {
display: flex;
flex-direction: column;
gap: 18px;
gap: var(--page-section-gap, 18px);
}
.error {
src/app/subscription/components/subscription-back-link.module.css
+2 -2
View File
@@ -2,8 +2,8 @@
display: inline-flex;
align-items: center;
justify-content: center;
padding: 8px;
margin-left: -8px;
padding: var(--spacing-sm, 8px);
margin-left: calc(-1 * var(--spacing-sm, 8px));
color: #000;
text-decoration: none;
border-radius: var(--radius-md);
src/app/subscription/components/subscription-benefits-card.module.css
+1 -1
View File
@@ -8,7 +8,7 @@
.header {
background-color: #fce4ec;
border-radius: 5px;
border-radius: clamp(5px, 1.111vw, 6px);
padding: var(--responsive-card-padding, var(--spacing-md));
text-align: center;
}
src/app/subscription/components/subscription-coins-offer-section.module.css
+30 -21
View File
@@ -29,9 +29,9 @@
.notch {
position: absolute;
left: 50%;
bottom: -12px;
width: 24px;
height: 24px;
bottom: calc(var(--subscription-section-notch-size, 24px) / -2);
width: var(--subscription-section-notch-size, 24px);
height: var(--subscription-section-notch-size, 24px);
background: #fff3c8;
transform: translateX(-50%) rotate(45deg);
}
@@ -51,11 +51,19 @@
.row {
display: grid;
grid-template-columns: 48px minmax(0, 1fr) auto auto;
grid-template-columns:
var(--subscription-coin-column-width, 48px)
minmax(0, 1fr)
auto
auto;
align-items: center;
width: 100%;
min-height: var(--responsive-control-height, 48px);
padding: 8px 12px 8px 6px;
padding:
clamp(7px, 1.481vw, 8px)
clamp(10px, 2.222vw, 12px)
clamp(7px, 1.481vw, 8px)
clamp(5px, 1.111vw, 6px);
border: 1px solid transparent;
border-radius: var(--responsive-card-radius-sm, 18px);
background: #ffffff;
@@ -83,8 +91,8 @@
.coinIcon {
display: inline-flex;
width: 32px;
height: 32px;
width: var(--subscription-coin-icon-size, 32px);
height: var(--subscription-coin-icon-size, 32px);
align-items: center;
justify-content: center;
justify-self: center;
@@ -99,6 +107,8 @@
.coinIcon svg {
display: block;
width: var(--subscription-coin-svg-size, 18px);
height: var(--subscription-coin-svg-size, 18px);
}
.coins {
@@ -110,7 +120,7 @@
.offerBadge {
justify-self: end;
padding: 5px 9px;
padding: var(--subscription-offer-badge-padding, 5px 9px);
border-radius: 999px;
background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
color: #ffffff;
@@ -123,7 +133,7 @@
.priceGroup {
display: inline-flex;
min-width: 54px;
min-width: clamp(48px, 10vw, 54px);
flex-direction: column;
align-items: flex-end;
justify-content: center;
@@ -149,26 +159,25 @@
@media (max-width: 360px) {
.title {
font-size: 20px;
font-size: var(--responsive-section-title, 20px);
}
.panel {
padding-right: 14px;
padding-left: 10px;
padding-right: clamp(10px, 2.593vw, 14px);
padding-left: clamp(10px, 2.222vw, 12px);
}
.row {
grid-template-columns: 46px minmax(0, 1fr) auto auto;
}
.coins,
.price {
font-size: 14px;
grid-template-columns:
clamp(42px, 8.519vw, 46px)
minmax(0, 1fr)
auto
auto;
}
.offerBadge {
padding-right: 6px;
padding-left: 6px;
font-size: 10px;
padding-right: clamp(6px, 1.296vw, 7px);
padding-left: clamp(6px, 1.296vw, 7px);
font-size: var(--responsive-micro, 10px);
}
}
src/app/subscription/components/subscription-coins-offer-section.tsx
+1 -1
View File
@@ -46,7 +46,7 @@ export function SubscriptionCoinsOfferSection({
onClick={() => onSelectPlan(plan.id)}
>
<span className={styles.coinIcon} aria-hidden="true">
<FaCoins size={18} />
<FaCoins />
</span>
<span className={styles.coins}>{plan.coins} Coins</span>
{plan.isFirstRechargeOffer ? (
src/app/subscription/components/subscription-payment-success-dialog.module.css
+1 -1
View File
@@ -43,7 +43,7 @@
}
.title {
margin: 0 0 8px;
margin: 0 0 clamp(7px, 1.481vw, 8px);
color: var(--color-text-foreground, #171717);
font-size: var(--responsive-page-title, 22px);
font-weight: 700;
src/app/subscription/components/subscription-plan-card.module.css
+1 -1
View File
@@ -75,7 +75,7 @@
.perDayBar {
align-self: stretch;
margin: auto calc(-1 * var(--spacing-xs)) 0;
padding: 6px 0;
padding: clamp(5px, 1.111vw, 6px) 0;
border-radius: 0;
color: #ffffff;
font-size: var(--responsive-caption, var(--font-size-md));
src/app/subscription/components/subscription-screen.module.css
+1 -1
View File
@@ -61,7 +61,7 @@
}
.firstRechargeSubtitle {
margin: 4px 0 0;
margin: var(--responsive-inline-gap-xs, 4px) 0 0;
color: #75656d;
font-size: var(--responsive-micro, 12px);
font-weight: 700;
src/app/subscription/components/subscription-vip-offer-section.module.css
+18 -24
View File
@@ -21,7 +21,7 @@
.title {
display: flex;
align-items: baseline;
gap: 10px;
gap: clamp(8px, 1.852vw, 10px);
margin: 0;
line-height: 1.25;
}
@@ -39,7 +39,7 @@
}
.subtitle {
margin: 8px 0 0;
margin: clamp(6px, 1.481vw, 8px) 0 0;
color: rgba(255, 255, 255, 0.9);
font-size: var(--responsive-body, 15px);
font-weight: 700;
@@ -49,9 +49,9 @@
.notch {
position: absolute;
left: 50%;
bottom: -12px;
width: 24px;
height: 24px;
bottom: calc(var(--subscription-section-notch-size, 24px) / -2);
width: var(--subscription-section-notch-size, 24px);
height: var(--subscription-section-notch-size, 24px);
background: #ff61ad;
transform: translateX(-50%) rotate(45deg);
}
@@ -61,7 +61,7 @@
z-index: 1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: clamp(7px, 1.667vw, 9px);
gap: var(--subscription-plan-grid-gap, 9px);
padding:
var(--responsive-card-padding, 18px)
clamp(8px, 1.852vw, 10px)
@@ -72,11 +72,14 @@
position: relative;
display: flex;
min-width: 0;
min-height: clamp(116px, 23.704vw, 128px);
min-height: var(--subscription-plan-card-min-height, 128px);
flex-direction: column;
align-items: center;
justify-content: center;
padding: clamp(10px, 2.222vw, 12px) 6px clamp(9px, 2.037vw, 11px);
padding:
clamp(10px, 2.222vw, 12px)
clamp(5px, 1.111vw, 6px)
clamp(9px, 2.037vw, 11px);
border: 1px solid rgba(246, 87, 160, 0.08);
border-radius: var(--responsive-card-radius-sm, 20px);
background: #ffffff;
@@ -110,10 +113,10 @@
.offerBadge {
position: absolute;
top: 8px;
top: clamp(6px, 1.481vw, 8px);
left: 50%;
max-width: calc(100% - 12px);
padding: 4px 8px;
padding: var(--subscription-offer-badge-padding, 4px 8px);
border-radius: 999px;
background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
color: #ffffff;
@@ -127,7 +130,7 @@
.planTitle {
margin-top: 20px;
font-size: clamp(16px, 3.519vw, 19px);
font-size: var(--subscription-plan-title-size, 19px);
font-weight: 800;
line-height: 1.15;
white-space: nowrap;
@@ -137,12 +140,12 @@
display: inline-flex;
align-items: flex-end;
justify-content: center;
margin-top: 4px;
margin-top: clamp(3px, 0.741vw, 4px);
line-height: 1;
}
.price {
font-size: var(--font-responsive-number-lg, 30px);
font-size: var(--subscription-price-size-lg, 30px);
font-weight: 500;
letter-spacing: -0.8px;
}
@@ -166,16 +169,7 @@
@media (max-width: 360px) {
.planGrid {
gap: 7px;
padding-right: 8px;
padding-left: 8px;
}
.planTitle {
font-size: 17px;
}
.price {
font-size: 27px;
padding-right: clamp(8px, 1.852vw, 10px);
padding-left: clamp(8px, 1.852vw, 10px);
}
}