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

style(responsive): migrate fixed UI sizes to tokens

Browse Source
This commit is contained in:
chenhang
2026-07-03 10:22:37 +08:00
parent 38d31572dd
commit bb6ebbae7e
28 changed files with 312 additions and 229 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/subscription/components/stripe-payment-dialog.module.css
+19 -9
View File
@@ -5,19 +5,29 @@
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
padding:
calc(var(--dialog-safe-margin, 20px) + var(--app-safe-top, 0px))
calc(var(--dialog-safe-margin, 20px) + var(--app-safe-right, 0px))
calc(var(--dialog-safe-margin, 20px) + var(--app-safe-bottom, 0px))
calc(var(--dialog-safe-margin, 20px) + var(--app-safe-left, 0px));
background: rgba(0, 0, 0, 0.5);
}
.dialog {
width: 100%;
max-width: 420px;
max-height: calc(100vh - 40px);
max-width: var(--dialog-wide-max-width, 420px);
max-height: calc(
var(--app-visible-height, 100dvh) -
calc(var(--dialog-safe-margin, 20px) * 2)
);
overflow-y: auto;
border-radius: 32px;
border-radius: var(--responsive-card-radius, 32px);
background: var(--color-page-background, #ffffff);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
padding: 24px 18px 18px;
padding:
var(--responsive-card-padding-lg, 24px)
var(--responsive-card-padding, 18px)
var(--responsive-card-padding, 18px);
}
.header {
@@ -28,7 +38,7 @@
.title {
margin: 0 0 8px;
color: var(--color-text-foreground, #171717);
font-size: var(--font-size-22, 22px);
font-size: var(--responsive-page-title, 22px);
font-weight: 700;
line-height: 1.2;
}
@@ -36,7 +46,7 @@
.content {
margin: 0;
color: #393939;
font-size: var(--font-size-md, 14px);
font-size: var(--responsive-body, 14px);
line-height: 1.5;
}
@@ -49,7 +59,7 @@
.error {
margin: 0;
color: #c0392b;
font-size: var(--font-size-sm, 13px);
font-size: var(--responsive-caption, 13px);
line-height: 1.45;
}
@@ -64,7 +74,7 @@
min-height: var(--pwa-button-height, 44px);
border: 0;
border-radius: var(--radius-bottom-sheet, 28px);
font-size: var(--font-size-lg, 16px);
font-size: var(--responsive-body, 16px);
font-weight: 600;
cursor: pointer;
}
src/app/subscription/components/subscription-banner.module.css
+8 -7
View File
@@ -1,14 +1,15 @@
.banner {
position: relative;
background: linear-gradient(90deg, #f96ade 0%, #ffb88a 100%);
border-radius: var(--radius-xl);
padding: var(--spacing-lg) var(--spacing-md);
border-radius: var(--responsive-card-radius-sm, var(--radius-xl));
padding: var(--responsive-card-padding, var(--spacing-lg))
var(--responsive-card-padding, var(--spacing-md));
text-align: center;
}
.text {
margin: 0;
font-size: 17px;
font-size: var(--responsive-card-title, 17px);
font-weight: 600;
color: #ffffff;
line-height: 1.3;
@@ -17,12 +18,12 @@
/* 向下指的 CSS 三角 */
.pointer {
position: absolute;
bottom: -8px;
bottom: clamp(-8px, -1.481vw, -6px);
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #ffb88a;
border-left: clamp(8px, 1.852vw, 10px) solid transparent;
border-right: clamp(8px, 1.852vw, 10px) solid transparent;
border-top: clamp(8px, 1.852vw, 10px) solid #ffb88a;
}
src/app/subscription/components/subscription-benefits-card.module.css
+6 -6
View File
@@ -1,6 +1,6 @@
.card {
background-color: #ffffff;
border-radius: 21px;
border-radius: var(--responsive-card-radius-sm, 21px);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
overflow: hidden;
border: solid 1px rgba(0, 0, 0, 0.14);
@@ -9,12 +9,12 @@
.header {
background-color: #fce4ec;
border-radius: 5px;
padding: var(--spacing-md);
padding: var(--responsive-card-padding, var(--spacing-md));
text-align: center;
}
.title {
font-size: var(--font-size-lg);
font-size: var(--responsive-card-title, var(--font-size-lg));
font-weight: 600;
color: #f657a0;
line-height: 1.3;
@@ -22,8 +22,8 @@
.list {
list-style: none;
margin: 18px 0;
padding: 0 0 0 20px;
margin: var(--page-section-gap, 18px) 0;
padding: 0 0 0 var(--responsive-card-padding, 20px);
}
.item {
@@ -31,7 +31,7 @@
align-items: flex-start;
gap: 0;
padding: 0;
font-size: var(--font-size-lg);
font-size: var(--responsive-body, var(--font-size-lg));
color: #1e1e1e;
line-height: normal;
}
src/app/subscription/components/subscription-cta-button.module.css
+6 -6
View File
@@ -3,10 +3,10 @@
align-items: center;
justify-content: center;
width: 100%;
height: 52px;
padding: 0 var(--spacing-lg);
min-height: clamp(48px, 9.63vw, 52px);
padding: 0 var(--responsive-card-padding, var(--spacing-lg));
border: none;
border-radius: 35px;
border-radius: var(--radius-full, 999px);
background-image:
linear-gradient(
269deg,
@@ -19,7 +19,7 @@
background-blend-mode: normal, normal;
box-shadow: 0 5px 7px 0 rgba(247, 89, 168, 0.31);
color: #ffffff;
font-size: var(--font-size-lg);
font-size: var(--responsive-body, var(--font-size-lg));
font-weight: 600;
cursor: pointer;
opacity: 0.85;
@@ -51,8 +51,8 @@
.spinner {
display: inline-block;
width: 18px;
height: 18px;
width: clamp(16px, 3.333vw, 18px);
height: clamp(16px, 3.333vw, 18px);
border-width: 2px;
border-style: solid;
border-color: #ffffff transparent transparent transparent;
src/app/subscription/components/subscription-payment-method.module.css
+7 -7
View File
@@ -1,7 +1,7 @@
.root {
display: flex;
flex-direction: column;
gap: 10px;
gap: clamp(8px, 1.852vw, 10px);
}
.header {
@@ -15,7 +15,7 @@
.title {
margin: 0;
font-family: var(--font-athelas), var(--font-system);
font-size: var(--font-size-lg);
font-size: var(--responsive-card-title, var(--font-size-lg));
font-weight: 700;
color: var(--color-auth-text-primary);
line-height: 1.2;
@@ -23,7 +23,7 @@
.caption {
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
font-size: var(--responsive-caption, var(--font-size-sm));
line-height: 1.2;
white-space: nowrap;
}
@@ -36,12 +36,12 @@
.option {
display: flex;
min-height: 62px;
min-height: clamp(54px, 11.481vw, 62px);
align-items: center;
justify-content: center;
padding: 10px 14px;
padding: clamp(9px, 1.852vw, 10px) clamp(12px, 2.593vw, 14px);
border: 1px solid rgba(246, 87, 160, 0.18);
border-radius: 18px;
border-radius: var(--responsive-card-radius-sm, 18px);
background: #ffffff;
box-shadow: 0 5px 7px 0 rgba(247, 89, 168, 0.08);
color: #3c3b3b;
@@ -74,7 +74,7 @@
.optionTitle {
color: #1e1e1e;
font-size: 16px;
font-size: var(--responsive-body, 16px);
font-weight: 700;
line-height: 1.1;
}
src/app/subscription/components/subscription-payment-success-dialog.module.css
+20 -13
View File
@@ -5,17 +5,24 @@
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
padding:
calc(var(--dialog-safe-margin, 20px) + var(--app-safe-top, 0px))
calc(var(--dialog-safe-margin, 20px) + var(--app-safe-right, 0px))
calc(var(--dialog-safe-margin, 20px) + var(--app-safe-bottom, 0px))
calc(var(--dialog-safe-margin, 20px) + var(--app-safe-left, 0px));
background: rgba(0, 0, 0, 0.45);
}
.dialog {
width: 100%;
max-width: 380px;
border-radius: 32px;
max-width: var(--dialog-max-width, 380px);
border-radius: var(--responsive-card-radius, 32px);
background: var(--color-page-background, #ffffff);
box-shadow: 0 18px 40px rgba(0, 0, 0, 0.16);
padding: 28px 20px 20px;
padding:
var(--responsive-card-padding-lg, 28px)
var(--responsive-card-padding, 20px)
var(--responsive-card-padding, 20px);
text-align: center;
}
@@ -23,13 +30,13 @@
display: inline-flex;
align-items: center;
justify-content: center;
width: 58px;
height: 58px;
margin-bottom: 16px;
width: clamp(52px, 10.741vw, 58px);
height: clamp(52px, 10.741vw, 58px);
margin-bottom: var(--page-section-gap, 16px);
border-radius: 999px;
background: linear-gradient(135deg, #ff67e0 0%, #f657a0 100%);
color: #ffffff;
font-size: 32px;
font-size: clamp(28px, 5.926vw, 32px);
font-weight: 700;
line-height: 1;
box-shadow: 0 8px 18px rgba(247, 89, 168, 0.28);
@@ -38,7 +45,7 @@
.title {
margin: 0 0 8px;
color: var(--color-text-foreground, #171717);
font-size: var(--font-size-22, 22px);
font-size: var(--responsive-page-title, 22px);
font-weight: 700;
line-height: 1.2;
}
@@ -46,14 +53,14 @@
.content {
margin: 0;
color: #393939;
font-size: var(--font-size-md, 14px);
font-size: var(--responsive-body, 14px);
line-height: 1.5;
}
.button {
width: 100%;
min-height: 48px;
margin-top: 22px;
min-height: var(--responsive-control-height, 48px);
margin-top: var(--page-section-gap-lg, 22px);
border: 0;
border-radius: 999px;
background:
@@ -63,7 +70,7 @@
box-shadow: 0 5px 7px rgba(247, 89, 168, 0.31);
color: #ffffff;
cursor: pointer;
font-size: var(--font-size-lg, 16px);
font-size: var(--responsive-body, 16px);
font-weight: 700;
}
src/app/subscription/components/subscription-plan-card.module.css
+12 -9
View File
@@ -3,11 +3,14 @@
display: flex;
flex-direction: column;
align-items: center;
height: 154px;
padding: var(--spacing-sm) var(--spacing-xs) 0;
min-height: clamp(136px, 28.519vw, 154px);
padding:
clamp(7px, 1.481vw, 8px)
clamp(4px, 0.926vw, 5px)
0;
background: #ffffff;
border: 1px solid transparent;
border-radius: 20px;
border-radius: var(--responsive-card-radius-sm, 20px);
border-style: solid;
box-shadow: 0 5px 7px 0 rgba(247, 89, 168, 0.1);
cursor: pointer;
@@ -32,12 +35,12 @@
.selected {
border-color: #f657a0;
border-width: 3px;
border-radius: 20px;
border-radius: var(--responsive-card-radius-sm, 20px);
}
.name {
margin-top: var(--spacing-lg);
font-size: var(--font-size-lg);
font-size: var(--responsive-body, var(--font-size-lg));
font-weight: 500;
color: var(--color-auth-text-primary);
line-height: 1.2;
@@ -53,17 +56,17 @@
}
.currency {
font-size: var(--font-size-lg);
font-size: var(--responsive-body, var(--font-size-lg));
}
.price {
font-size: var(--font-size-40);
font-size: clamp(32px, 7.407vw, var(--font-size-40));
line-height: 1;
}
.originalPrice {
margin: 4px 0 var(--spacing-sm);
font-size: var(--font-size-lg);
font-size: var(--responsive-body, var(--font-size-lg));
color: #999999;
text-decoration: line-through;
line-height: 1;
@@ -75,7 +78,7 @@
padding: 6px 0;
border-radius: 0;
color: #ffffff;
font-size: var(--font-size-md);
font-size: var(--responsive-caption, var(--font-size-md));
font-weight: 600;
text-align: center;
line-height: 1.2;
src/app/subscription/components/subscription-user-row.module.css
+4 -4
View File
@@ -6,8 +6,8 @@
.avatar {
flex: 0 0 auto;
width: 56px;
height: 56px;
width: var(--sidebar-avatar-size, 56px);
height: var(--sidebar-avatar-size, 56px);
border-radius: 50%;
background: var(--color-accent);
display: flex;
@@ -38,7 +38,7 @@
.name {
margin: 0;
font-size: var(--font-size-lg);
font-size: var(--responsive-body, var(--font-size-lg));
font-weight: 600;
color: #000;
line-height: 1.2;
@@ -46,7 +46,7 @@
.subtitle {
margin: 0;
font-size: var(--font-size-sm);
font-size: var(--responsive-caption, var(--font-size-sm));
color: var(--color-text-secondary);
line-height: 1.2;
}