fix(styles): adjust padding and font sizes for improved layout consistency
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user