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/coins-rules/coins-rules-screen.module.css
+23 -23
View File
@@ -33,10 +33,10 @@
.hero::after {
position: absolute;
right: -34px;
bottom: -42px;
width: 150px;
height: 150px;
right: clamp(-34px, -6.296vw, -28px);
bottom: clamp(-42px, -7.778vw, -34px);
width: clamp(124px, 27.778vw, 150px);
height: clamp(124px, 27.778vw, 150px);
border-radius: 999px;
background: radial-gradient(circle, rgba(246, 87, 160, 0.2), transparent 68%);
content: "";
@@ -44,11 +44,11 @@
.heroIcon {
display: inline-flex;
width: 46px;
height: 46px;
width: var(--responsive-control-height, 46px);
height: var(--responsive-control-height, 46px);
align-items: center;
justify-content: center;
border-radius: 16px;
border-radius: clamp(14px, 2.963vw, 16px);
background: linear-gradient(180deg, #ffe89c 0%, #f8b83e 100%);
color: #8f5400;
box-shadow:
@@ -57,7 +57,7 @@
}
.eyebrow {
margin: 16px 0 0;
margin: var(--page-section-gap, 16px) 0 0;
color: #f657a0;
font-size: var(--responsive-micro, 12px);
font-weight: 850;
@@ -76,8 +76,8 @@
}
.subtitle {
max-width: 300px;
margin: 10px 0 0;
max-width: min(100%, 300px);
margin: clamp(8px, 1.852vw, 10px) 0 0;
color: #6d5d64;
font-size: var(--responsive-body, 15px);
font-weight: 650;
@@ -87,7 +87,7 @@
.freeCard {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
gap: 12px;
gap: var(--spacing-md, 12px);
align-items: center;
margin-top: var(--page-section-gap, 16px);
padding: var(--responsive-card-padding, 16px);
@@ -99,11 +99,11 @@
.freeIcon {
display: inline-flex;
width: 40px;
height: 40px;
width: var(--responsive-icon-button-size, 40px);
height: var(--responsive-icon-button-size, 40px);
align-items: center;
justify-content: center;
border-radius: 14px;
border-radius: clamp(12px, 2.593vw, 14px);
background: #ffffff;
color: #d98100;
box-shadow: 0 8px 18px rgba(142, 93, 18, 0.1);
@@ -128,14 +128,14 @@
.ruleList {
display: flex;
flex-direction: column;
gap: 10px;
gap: clamp(8px, 1.852vw, 10px);
margin-top: var(--page-section-gap, 16px);
}
.ruleCard {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: 12px;
gap: var(--spacing-md, 12px);
align-items: center;
padding: var(--responsive-card-padding, 14px);
border: 1px solid rgba(25, 19, 22, 0.06);
@@ -153,11 +153,11 @@
.ruleIcon {
display: inline-flex;
width: 36px;
height: 36px;
width: clamp(34px, 6.667vw, 36px);
height: clamp(34px, 6.667vw, 36px);
align-items: center;
justify-content: center;
border-radius: 14px;
border-radius: clamp(12px, 2.593vw, 14px);
background: #fff0f6;
color: #f657a0;
}
@@ -210,16 +210,16 @@
@media (max-width: 360px) {
.screen {
padding-right: 16px;
padding-left: 16px;
padding-right: calc(var(--page-padding-x, 16px) + var(--app-safe-right, 0px));
padding-left: calc(var(--page-padding-x, 16px) + var(--app-safe-left, 0px));
}
.hero {
padding: 20px;
padding: var(--responsive-card-padding-lg, 20px);
}
.title {
font-size: 27px;
font-size: var(--responsive-page-title, 27px);
}
.ruleCard {