From a430284aa21e3ae1f0d5654e55b2ad2852519cc2 Mon Sep 17 00:00:00 2001 From: wwf <yearningwang@iqtogether.com> Date: 星期三, 04 六月 2025 15:17:49 +0800 Subject: [PATCH] 初始化 --- app/components/base/premium-badge/index.css | 52 ++++++++++++++++++++++------------------------------ 1 files changed, 22 insertions(+), 30 deletions(-) diff --git a/app/components/base/premium-badge/index.css b/app/components/base/premium-badge/index.css index 61031cd..be8f9e6 100644 --- a/app/components/base/premium-badge/index.css +++ b/app/components/base/premium-badge/index.css @@ -2,55 +2,47 @@ @layer components { .premium-badge { - @apply shrink-0 relative inline-flex justify-center items-center rounded-md box-border border border-transparent text-white shadow-xs hover:shadow-lg bg-origin-border overflow-hidden transition-all duration-100 ease-out; - background-clip: padding-box, border-box; - } - .allowHover { - @apply cursor-pointer; + @apply inline-flex justify-center items-center rounded-full border box-border border-[rgba(255,255,255,0.8)] text-white } /* m is for the regular button */ .premium-badge-m { - @apply !p-1 h-6 w-auto + @apply border shadow-lg !p-1 h-6 w-auto } .premium-badge-s { - @apply border-[0.5px] !px-1 !py-[3px] h-[18px] w-auto + @apply border-[0.5px] shadow-xs !px-1 !py-[3px] h-[18px] w-auto } .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%); - } - .premium-badge-blue.allowHover: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%); + @apply bg-gradient-to-r from-[#5289ffe6] to-[#155aefe6] bg-util-colors-blue-blue-200 } .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%); - } - .premium-badge-indigo.allowHover: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%); + @apply bg-gradient-to-r from-[#8098f9e6] to-[#444ce7e6] bg-util-colors-indigo-indigo-200 } .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%); - } - .premium-badge-gray.allowHover: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%); + @apply bg-gradient-to-r from-[#98a2b2e6] to-[#676f83e6] bg-util-colors-gray-gray-200 } .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%); + @apply bg-gradient-to-r from-[#ff692ee6] to-[#e04f16e6] bg-util-colors-orange-orange-200 } + + .premium-badge-blue.allowHover:hover { + @apply bg-gradient-to-r from-[#296dffe6] to-[#004aebe6] bg-util-colors-blue-blue-300 cursor-pointer + } + + .premium-badge-indigo.allowHover:hover { + @apply bg-gradient-to-r from-[#6172f3e6] to-[#2d31a6e6] bg-util-colors-indigo-indigo-300 cursor-pointer + } + + .premium-badge-gray.allowHover:hover { + @apply bg-gradient-to-r from-[#676f83e6] to-[#354052e6] bg-util-colors-gray-gray-300 cursor-pointer + } + .premium-badge-orange.allowHover: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%); + @apply bg-gradient-to-r from-[#ff4405e6] to-[#b93815e6] bg-util-colors-orange-orange-300 cursor-pointer } -} +} \ No newline at end of file -- Gitblit v1.8.0