66 lines
1.7 KiB
CSS
66 lines
1.7 KiB
CSS
/* ChatInsufficientCreditsBanner — 积分不足横幅
|
|
* 视觉规格（与设计稿对齐）：
|
|
* - 粉→品红渐变背景（与 splash gradient 一致）
|
|
* - 居中文案 + 渐变 pill 按钮
|
|
* - 圆角 + 阴影（与 /sidebar 已有卡片的视觉重量对齐）
|
|
*/
|
|
|
|
.banner {
|
|
flex: 0 0 auto;
|
|
margin:
|
|
0
|
|
var(--chat-inline-padding, 16px)
|
|
var(--page-section-gap, 16px);
|
|
padding:
|
|
var(--page-section-gap-lg, 24px)
|
|
var(--responsive-card-padding, 16px);
|
|
border-radius: var(--responsive-card-radius-sm, 24px);
|
|
background: linear-gradient(135deg, #f96ade 0%, #f657a0 100%);
|
|
text-align: center;
|
|
box-shadow: 0 4px 16px rgba(248, 77, 150, 0.25);
|
|
}
|
|
|
|
.text {
|
|
color: #fff;
|
|
font-size: var(--responsive-card-title, 18px);
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
margin: 0 0 var(--spacing-sm, 8px);
|
|
/* 与 splash 标题的粉色字保持视觉一致（白底渐变叠加层需要白字保证可读性） */
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.description {
|
|
max-width: min(100%, 360px);
|
|
margin: 0 auto var(--spacing-lg, 16px);
|
|
color: rgba(255, 255, 255, 0.88);
|
|
font-size: var(--responsive-caption, 14px);
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.cta {
|
|
width: 100%;
|
|
min-height: var(--responsive-control-height, 48px);
|
|
padding: 0 var(--responsive-card-padding-lg, 24px);
|
|
border: none;
|
|
border-radius: 999px;
|
|
background: linear-gradient(135deg, #ffb8e0 0%, #f57ec0 100%);
|
|
color: #fff;
|
|
font-size: var(--responsive-card-title, 18px);
|
|
font-weight: 700;
|
|
cursor: pointer;
|
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
|
|
transition:
|
|
transform 0.15s ease,
|
|
box-shadow 0.15s ease;
|
|
}
|
|
|
|
.cta:hover {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
.cta:active {
|
|
transform: scale(0.98);
|
|
}
|