274 lines
12 KiB
Plaintext
274 lines
12 KiB
Plaintext
/**
|
|
* AKSRT Color Utilities — 多色按钮 / 渐变按钮 / 文字渐变 / Badge
|
|
* ------------------------------------------------------------
|
|
* 所有颜色走 CSS 变量（定义在 tokens.css），不硬编码十六进制。
|
|
*/
|
|
|
|
/* ============================================================
|
|
* 1. 多色按钮 — .aksrt-btn--{color}
|
|
* ============================================================ */
|
|
.aksrt-btn--rose { background: var(--aksrt-rose); color: #fff; }
|
|
.aksrt-btn--rose:hover,
|
|
.aksrt-btn--rose:focus-visible { background: #e11d48; }
|
|
|
|
.aksrt-btn--blue { background: var(--aksrt-blue); color: #fff; }
|
|
.aksrt-btn--blue:hover,
|
|
.aksrt-btn--blue:focus-visible { background: #2563eb; }
|
|
|
|
.aksrt-btn--green { background: var(--aksrt-green); color: #fff; }
|
|
.aksrt-btn--green:hover,
|
|
.aksrt-btn--green:focus-visible { background: #059669; }
|
|
|
|
.aksrt-btn--orange { background: var(--aksrt-orange); color: #fff; }
|
|
.aksrt-btn--orange:hover,
|
|
.aksrt-btn--orange:focus-visible { background: #ea580c; }
|
|
|
|
.aksrt-btn--purple { background: var(--aksrt-purple); color: #fff; }
|
|
.aksrt-btn--purple:hover,
|
|
.aksrt-btn--purple:focus-visible { background: #7c3aed; }
|
|
|
|
.aksrt-btn--cyan { background: var(--aksrt-cyan); color: #fff; }
|
|
.aksrt-btn--cyan:hover,
|
|
.aksrt-btn--cyan:focus-visible { background: #0891b2; }
|
|
|
|
.aksrt-btn--yellow { background: var(--aksrt-yellow); color: #422006; }
|
|
.aksrt-btn--yellow:hover,
|
|
.aksrt-btn--yellow:focus-visible { background: #ca8a04; color: #fff; }
|
|
|
|
.aksrt-btn--red { background: var(--aksrt-red); color: #fff; }
|
|
.aksrt-btn--red:hover,
|
|
.aksrt-btn--red:focus-visible { background: #dc2626; }
|
|
|
|
.aksrt-btn--teal { background: var(--aksrt-teal); color: #fff; }
|
|
.aksrt-btn--teal:hover,
|
|
.aksrt-btn--teal:focus-visible { background: #0d9488; }
|
|
|
|
.aksrt-btn--indigo { background: var(--aksrt-indigo); color: #fff; }
|
|
.aksrt-btn--indigo:hover,
|
|
.aksrt-btn--indigo:focus-visible { background: #4f46e5; }
|
|
|
|
.aksrt-btn--pink { background: var(--aksrt-pink); color: #fff; }
|
|
.aksrt-btn--pink:hover,
|
|
.aksrt-btn--pink:focus-visible { background: #db2777; }
|
|
|
|
/* Soft variant — 浅色背景 + 深色文字 */
|
|
.aksrt-btn--rose-soft { background: var(--aksrt-rose-soft); color: var(--aksrt-rose); }
|
|
.aksrt-btn--blue-soft { background: var(--aksrt-blue-soft); color: var(--aksrt-blue); }
|
|
.aksrt-btn--green-soft { background: var(--aksrt-green-soft); color: var(--aksrt-green); }
|
|
.aksrt-btn--orange-soft { background: var(--aksrt-orange-soft); color: var(--aksrt-orange); }
|
|
.aksrt-btn--purple-soft { background: var(--aksrt-purple-soft); color: var(--aksrt-purple); }
|
|
.aksrt-btn--cyan-soft { background: var(--aksrt-cyan-soft); color: var(--aksrt-cyan); }
|
|
.aksrt-btn--yellow-soft { background: var(--aksrt-yellow-soft); color: #92400e; }
|
|
.aksrt-btn--red-soft { background: var(--aksrt-red-soft); color: var(--aksrt-red); }
|
|
.aksrt-btn--teal-soft { background: var(--aksrt-teal-soft); color: var(--aksrt-teal); }
|
|
.aksrt-btn--indigo-soft { background: var(--aksrt-indigo-soft); color: var(--aksrt-indigo); }
|
|
.aksrt-btn--pink-soft { background: var(--aksrt-pink-soft); color: var(--aksrt-pink); }
|
|
|
|
/* ============================================================
|
|
* 2. 渐变按钮 — .aksrt-btn--grad-{name}
|
|
* ============================================================ */
|
|
.aksrt-btn--grad-vip {
|
|
background: linear-gradient(135deg, var(--aksrt-vip-gold-1), var(--aksrt-vip-gold-2));
|
|
color: #5a3d00;
|
|
border: none;
|
|
}
|
|
|
|
.aksrt-btn--grad-sunset {
|
|
background: linear-gradient(135deg, var(--aksrt-grad-sunset-1), var(--aksrt-grad-sunset-2));
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
|
|
.aksrt-btn--grad-ocean {
|
|
background: linear-gradient(135deg, var(--aksrt-grad-ocean-1), var(--aksrt-grad-ocean-2));
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
|
|
.aksrt-btn--grad-forest {
|
|
background: linear-gradient(135deg, var(--aksrt-grad-forest-1), var(--aksrt-grad-forest-2));
|
|
color: #064e3b;
|
|
border: none;
|
|
}
|
|
|
|
.aksrt-btn--grad-night {
|
|
background: linear-gradient(135deg, var(--aksrt-grad-night-1), var(--aksrt-grad-night-2));
|
|
color: #4c1d95;
|
|
border: none;
|
|
}
|
|
|
|
.aksrt-btn--grad-fire {
|
|
background: linear-gradient(135deg, var(--aksrt-grad-fire-1), var(--aksrt-grad-fire-2));
|
|
color: #fff;
|
|
border: none;
|
|
}
|
|
|
|
.aksrt-btn--grad-primary {
|
|
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active));
|
|
color: var(--color-on-primary);
|
|
border: none;
|
|
}
|
|
|
|
/* 渐变按钮 hover — 亮度微调 */
|
|
.aksrt-btn--grad-vip:hover,
|
|
.aksrt-btn--grad-sunset:hover,
|
|
.aksrt-btn--grad-ocean:hover,
|
|
.aksrt-btn--grad-forest:hover,
|
|
.aksrt-btn--grad-night:hover,
|
|
.aksrt-btn--grad-fire:hover,
|
|
.aksrt-btn--grad-primary:hover {
|
|
filter: brightness(1.08);
|
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* ============================================================
|
|
* 3. 文字渐变 — .aksrt-text-grad-{name}
|
|
* ============================================================ */
|
|
.aksrt-text-grad-primary {
|
|
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.aksrt-text-grad-vip {
|
|
background: linear-gradient(135deg, var(--aksrt-vip-gold-1), var(--aksrt-vip-gold-2));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.aksrt-text-grad-sunset {
|
|
background: linear-gradient(135deg, var(--aksrt-grad-sunset-1), var(--aksrt-grad-sunset-2));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.aksrt-text-grad-ocean {
|
|
background: linear-gradient(135deg, var(--aksrt-grad-ocean-1), var(--aksrt-grad-ocean-2));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.aksrt-text-grad-forest {
|
|
background: linear-gradient(135deg, var(--aksrt-grad-forest-1), var(--aksrt-grad-forest-2));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.aksrt-text-grad-night {
|
|
background: linear-gradient(135deg, var(--aksrt-grad-night-1), var(--aksrt-grad-night-2));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
.aksrt-text-grad-fire {
|
|
background: linear-gradient(135deg, var(--aksrt-grad-fire-1), var(--aksrt-grad-fire-2));
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
background-clip: text;
|
|
}
|
|
|
|
/* ============================================================
|
|
* 4. Badge 系统 — .aksrt-badge / .aksrt-badge--{color}
|
|
* ============================================================ */
|
|
.aksrt-badge {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: var(--aksrt-badge-h, 22px);
|
|
padding: 0 8px;
|
|
border-radius: var(--radius-pill, 100px);
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
line-height: 1;
|
|
white-space: nowrap;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.aksrt-badge--primary { background: var(--color-primary-soft); color: var(--color-primary); }
|
|
.aksrt-badge--success { background: rgba(16, 185, 129, 0.12); color: var(--color-success); }
|
|
.aksrt-badge--warning { background: rgba(245, 158, 11, 0.12); color: var(--color-warning); }
|
|
.aksrt-badge--error { background: rgba(239, 68, 68, 0.12); color: var(--color-error); }
|
|
.aksrt-badge--info { background: rgba(59, 130, 246, 0.12); color: var(--color-info); }
|
|
|
|
.aksrt-badge--rose { background: var(--aksrt-rose-soft); color: var(--aksrt-rose); }
|
|
.aksrt-badge--blue { background: var(--aksrt-blue-soft); color: var(--aksrt-blue); }
|
|
.aksrt-badge--green { background: var(--aksrt-green-soft); color: var(--aksrt-green); }
|
|
.aksrt-badge--orange { background: var(--aksrt-orange-soft); color: var(--aksrt-orange); }
|
|
.aksrt-badge--purple { background: var(--aksrt-purple-soft); color: var(--aksrt-purple); }
|
|
.aksrt-badge--cyan { background: var(--aksrt-cyan-soft); color: var(--aksrt-cyan); }
|
|
.aksrt-badge--yellow { background: var(--aksrt-yellow-soft); color: #92400e; }
|
|
.aksrt-badge--red { background: var(--aksrt-red-soft); color: var(--aksrt-red); }
|
|
.aksrt-badge--teal { background: var(--aksrt-teal-soft); color: var(--aksrt-teal); }
|
|
.aksrt-badge--indigo { background: var(--aksrt-indigo-soft); color: var(--aksrt-indigo); }
|
|
.aksrt-badge--pink { background: var(--aksrt-pink-soft); color: var(--aksrt-pink); }
|
|
|
|
/* 渐变 Badge */
|
|
.aksrt-badge--grad-vip {
|
|
background: linear-gradient(135deg, var(--aksrt-vip-gold-1), var(--aksrt-vip-gold-2));
|
|
color: #5a3d00;
|
|
}
|
|
|
|
.aksrt-badge--grad-primary {
|
|
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-active));
|
|
color: var(--color-on-primary);
|
|
}
|
|
|
|
/* Solid badge variant — 纯色背景 + 白色文字 */
|
|
.aksrt-badge--solid-primary { background: var(--color-primary); color: #fff; }
|
|
.aksrt-badge--solid-success { background: var(--color-success); color: #fff; }
|
|
.aksrt-badge--solid-warning { background: var(--color-warning); color: #fff; }
|
|
.aksrt-badge--solid-error { background: var(--color-error); color: #fff; }
|
|
.aksrt-badge--solid-info { background: var(--color-info); color: #fff; }
|
|
.aksrt-badge--solid-rose { background: var(--aksrt-rose); color: #fff; }
|
|
.aksrt-badge--solid-blue { background: var(--aksrt-blue); color: #fff; }
|
|
.aksrt-badge--solid-green { background: var(--aksrt-green); color: #fff; }
|
|
.aksrt-badge--solid-orange { background: var(--aksrt-orange); color: #fff; }
|
|
.aksrt-badge--solid-purple { background: var(--aksrt-purple); color: #fff; }
|
|
.aksrt-badge--solid-cyan { background: var(--aksrt-cyan); color: #fff; }
|
|
.aksrt-badge--solid-yellow { background: var(--aksrt-yellow); color: #422006; }
|
|
.aksrt-badge--solid-red { background: var(--aksrt-red); color: #fff; }
|
|
.aksrt-badge--solid-teal { background: var(--aksrt-teal); color: #fff; }
|
|
.aksrt-badge--solid-indigo { background: var(--aksrt-indigo); color: #fff; }
|
|
.aksrt-badge--solid-pink { background: var(--aksrt-pink); color: #fff; }
|
|
|
|
/* Badge sizes */
|
|
.aksrt-badge--sm { height: 18px; padding: 0 6px; font-size: 11px; }
|
|
.aksrt-badge--lg { height: 28px; padding: 0 12px; font-size: 13px; }
|
|
|
|
/* ============================================================
|
|
* 5. 背景色工具类 — .aksrt-bg-{color}
|
|
* ============================================================ */
|
|
.aksrt-bg-rose { background-color: var(--aksrt-rose-soft); }
|
|
.aksrt-bg-blue { background-color: var(--aksrt-blue-soft); }
|
|
.aksrt-bg-green { background-color: var(--aksrt-green-soft); }
|
|
.aksrt-bg-orange { background-color: var(--aksrt-orange-soft); }
|
|
.aksrt-bg-purple { background-color: var(--aksrt-purple-soft); }
|
|
.aksrt-bg-cyan { background-color: var(--aksrt-cyan-soft); }
|
|
.aksrt-bg-yellow { background-color: var(--aksrt-yellow-soft); }
|
|
.aksrt-bg-red { background-color: var(--aksrt-red-soft); }
|
|
.aksrt-bg-teal { background-color: var(--aksrt-teal-soft); }
|
|
.aksrt-bg-indigo { background-color: var(--aksrt-indigo-soft); }
|
|
.aksrt-bg-pink { background-color: var(--aksrt-pink-soft); }
|
|
|
|
/* ============================================================
|
|
* 6. 文字色工具类 — .aksrt-text-{color}
|
|
* ============================================================ */
|
|
.aksrt-text-rose { color: var(--aksrt-rose); }
|
|
.aksrt-text-blue { color: var(--aksrt-blue); }
|
|
.aksrt-text-green { color: var(--aksrt-green); }
|
|
.aksrt-text-orange { color: var(--aksrt-orange); }
|
|
.aksrt-text-purple { color: var(--aksrt-purple); }
|
|
.aksrt-text-cyan { color: var(--aksrt-cyan); }
|
|
.aksrt-text-yellow { color: var(--aksrt-yellow); }
|
|
.aksrt-text-red { color: var(--aksrt-red); }
|
|
.aksrt-text-teal { color: var(--aksrt-teal); }
|
|
.aksrt-text-indigo { color: var(--aksrt-indigo); }
|
|
.aksrt-text-pink { color: var(--aksrt-pink); }
|
|
|