mirror of
https://github.com/langgenius/dify.git
synced 2026-07-21 18:58:35 +08:00
94 lines
3.6 KiB
CSS
94 lines
3.6 KiB
CSS
@utility premium-badge {
|
|
@apply relative box-border inline-flex shrink-0 items-center justify-center overflow-hidden rounded-md border border-transparent bg-origin-border text-white shadow-xs transition-[background-color,background-image,box-shadow] duration-100 ease-out hover:shadow-lg motion-reduce:transition-none;
|
|
background-clip: padding-box, border-box;
|
|
}
|
|
|
|
@utility pb-allow-hover {
|
|
@apply cursor-pointer;
|
|
&.premium-badge-blue:hover {
|
|
@apply bg-util-colors-blue-blue-300;
|
|
background-image:
|
|
linear-gradient(90deg, #296dffe6 0%, #004aebe6 100%),
|
|
linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #00329e 100%);
|
|
}
|
|
&.premium-badge-indigo:hover {
|
|
@apply bg-util-colors-indigo-indigo-300;
|
|
background-image:
|
|
linear-gradient(90deg, #6172f3e6 0%, #2d31a6e6 100%),
|
|
linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #2d31a6 100%);
|
|
}
|
|
&.premium-badge-gray:hover {
|
|
@apply bg-util-colors-gray-gray-300;
|
|
background-image:
|
|
linear-gradient(90deg, #676f83e6 0%, #354052e6 100%),
|
|
linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #354052 100%);
|
|
}
|
|
&.premium-badge-orange:hover {
|
|
@apply bg-util-colors-orange-orange-300;
|
|
background-image:
|
|
linear-gradient(90deg, #ff4405e6 0%, #b93815e6 100%),
|
|
linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #e62e05 100%);
|
|
}
|
|
}
|
|
|
|
@utility premium-badge-m {
|
|
/* m is for the regular button */
|
|
@apply h-6 w-auto p-1!;
|
|
}
|
|
|
|
@utility premium-badge-s {
|
|
@apply h-[18px] w-auto border-[0.5px] px-1! py-[3px]!;
|
|
}
|
|
|
|
@utility premium-badge-blue {
|
|
@apply bg-util-colors-blue-blue-200;
|
|
background-image:
|
|
linear-gradient(90deg, #5289ffe6 0%, #155aefe6 100%),
|
|
linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #155aef 100%);
|
|
&.pb-allow-hover:hover {
|
|
@apply bg-util-colors-blue-blue-300;
|
|
background-image:
|
|
linear-gradient(90deg, #296dffe6 0%, #004aebe6 100%),
|
|
linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #00329e 100%);
|
|
}
|
|
}
|
|
|
|
@utility premium-badge-indigo {
|
|
@apply bg-util-colors-indigo-indigo-200;
|
|
background-image:
|
|
linear-gradient(90deg, #8098f9e6 0%, #444ce7e6 100%),
|
|
linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #6172f3 100%);
|
|
&.pb-allow-hover:hover {
|
|
@apply bg-util-colors-indigo-indigo-300;
|
|
background-image:
|
|
linear-gradient(90deg, #6172f3e6 0%, #2d31a6e6 100%),
|
|
linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #2d31a6 100%);
|
|
}
|
|
}
|
|
|
|
@utility premium-badge-gray {
|
|
@apply bg-util-colors-gray-gray-200;
|
|
background-image:
|
|
linear-gradient(90deg, #98a2b2e6 0%, #676f83e6 100%),
|
|
linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #676f83 100%);
|
|
&.pb-allow-hover:hover {
|
|
@apply bg-util-colors-gray-gray-300;
|
|
background-image:
|
|
linear-gradient(90deg, #676f83e6 0%, #354052e6 100%),
|
|
linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #354052 100%);
|
|
}
|
|
}
|
|
|
|
@utility premium-badge-orange {
|
|
@apply bg-util-colors-orange-orange-200;
|
|
background-image:
|
|
linear-gradient(90deg, #ff692ee6 0%, #e04f16e6 100%),
|
|
linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #e62e05 100%);
|
|
&.pb-allow-hover:hover {
|
|
@apply bg-util-colors-orange-orange-300;
|
|
background-image:
|
|
linear-gradient(90deg, #ff4405e6 0%, #b93815e6 100%),
|
|
linear-gradient(135deg, var(--color-premium-badge-border-highlight-color) 0%, #e62e05 100%);
|
|
}
|
|
}
|