fix(styles): adjust padding and font sizes for improved layout consistency

This commit is contained in:
2026-06-24 17:55:48 +08:00
parent d6e411c8ef
commit 7701c5dbca
5 changed files with 80 additions and 40 deletions
@@ -15,24 +15,36 @@
border: solid 1px #fbbcb6;
border-radius: 21px;
width: 100%;
padding: 28px 12px 28px 28px;
box-sizing: border-box;
overflow: hidden;
}
.header {
.content {
display: flex;
align-items: center;
align-items: flex-start;
justify-content: space-between;
gap: var(--spacing-md, 12px);
padding: var(--spacing-lg, 16px) var(--spacing-lg, 16px) var(--spacing-sm, 8px);
}
.copy {
display: flex;
flex: 1 1 auto;
min-width: 0;
flex-direction: column;
align-items: flex-start;
gap: var(--spacing-sm, 8px);
}
.header {
padding: 0;
}
.title {
margin: 0;
font-size: var(--font-size-lg, 16px);
font-size: var(--font-size-xxl);
font-weight: 700;
color: var(--color-accent, #f84d96);
line-height: 1.3;
}
.micIcon {
@@ -52,39 +64,60 @@
}
.usage {
display: inline-flex;
align-items: baseline;
flex-wrap: wrap;
margin: 0;
padding: 0 var(--spacing-lg, 16px);
padding: 0;
font-size: var(--font-size-md, 14px);
color: var(--color-text-secondary, #9e9e9e);
line-height: 1.4;
}
.usageNumber {
color: var(--color-accent, #f84d96);
.usedNumber {
display: inline-flex;
color: #fa438b;
font-size: 20px;
font-weight: 700;
line-height: 1;
}
.totalNumber {
display: inline-flex;
color: #000000;
font-size: 20px;
font-weight: 700;
line-height: 1;
}
.usageUnit {
color: var(--color-text-secondary, #9e9e9e);
display: inline-flex;
font: 400 var(--font-size-xl, 18px) / 1 var(--font-sans);
}
.usageText {
color: var(--color-text-secondary, #9e9e9e);
color: #adabab;
font-size: 18px;
font-weight: 400;
}
.footer {
padding: var(--spacing-md, 12px) var(--spacing-lg, 16px) var(--spacing-lg, 16px);
padding: 0;
}
.buyBtn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
padding: var(--spacing-xs) var(--spacing-lg, 16px);
border-radius: 22px;
background-image:
linear-gradient(91deg, #f67382 0%, #f66690 44%, #f657a0 100%),
linear-gradient(#f69757, #f69757);
background-blend-mode: normal, normal;
color: var(--color-text-primary, #ffffff);
font-size: var(--font-size-md, 14px);
font-size: var(--font-size-lg);
font-weight: 600;
border: 0;
cursor: pointer;