51 lines
1.3 KiB
CSS
51 lines
1.3 KiB
CSS
/* ChatQuotaExhaustedBanner — 游客配额耗尽横幅
|
|
* 视觉规格（与设计稿对齐）：
|
|
* - 粉→品红渐变背景（与 splash gradient 一致）
|
|
* - 居中文案 + 渐变 pill 按钮
|
|
* - 圆角 + 阴影（与 /sidebar 已有卡片的视觉重量对齐）
|
|
*/
|
|
|
|
.banner {
|
|
flex: 0 0 auto;
|
|
margin: 0 var(--spacing-lg, 16px) var(--spacing-lg, 16px);
|
|
padding: var(--spacing-xl, 24px) var(--spacing-lg, 16px);
|
|
border-radius: 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: 1.125rem;
|
|
font-weight: 600;
|
|
line-height: 1.4;
|
|
margin: 0 0 var(--spacing-lg, 16px);
|
|
/* 与 splash 标题的粉色字保持视觉一致（白底渐变叠加层需要白字保证可读性） */
|
|
opacity: 0.95;
|
|
}
|
|
|
|
.cta {
|
|
width: 100%;
|
|
padding: 0.875rem 1.5rem;
|
|
border: none;
|
|
border-radius: 999px;
|
|
background: linear-gradient(135deg, #ffb8e0 0%, #f57ec0 100%);
|
|
color: #fff;
|
|
font-size: 1.125rem;
|
|
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);
|
|
}
|