diff --git a/src/features/authFiles/components/AuthFileCard.tsx b/src/features/authFiles/components/AuthFileCard.tsx index de8ed5b6..f44e6ac4 100644 --- a/src/features/authFiles/components/AuthFileCard.tsx +++ b/src/features/authFiles/components/AuthFileCard.tsx @@ -171,6 +171,8 @@ export function AuthFileCard(props: AuthFileCardProps) { ? styles.subscriptionBadgeError : subscriptionData?.plan === 'free' ? styles.subscriptionBadgeFree + : subscriptionData?.plan === 'ultra' || subscriptionData?.plan === 'ultra-lite' + ? styles.subscriptionBadgePremium : subscriptionData?.plan === 'unknown' ? styles.subscriptionBadgeUnknown : styles.subscriptionBadgePaid; diff --git a/src/pages/AuthFilesPage.module.scss b/src/pages/AuthFilesPage.module.scss index 48316943..203078e8 100644 --- a/src/pages/AuthFilesPage.module.scss +++ b/src/pages/AuthFilesPage.module.scss @@ -734,22 +734,200 @@ } .premiumPlanValue { + position: relative; display: inline-flex; align-items: center; font-weight: 700; font-size: 12px; padding: 2px 8px; - border-radius: 6px; - background: rgba(217, 165, 22, 0.15); - border: 1px solid rgba(217, 165, 22, 0.3); - color: #e0aa14; + border-radius: 999px; + overflow: visible; + isolation: isolate; + background: + radial-gradient( + circle at 18% 24%, + rgba(255, 255, 255, 0.96) 0%, + rgba(255, 255, 255, 0.72) 18%, + rgba(255, 255, 255, 0) 42% + ), + linear-gradient(135deg, #fff9e3 0%, #ffe07f 52%, #e0aa14 100%); + border: 1px solid rgba(217, 165, 22, 0.72); + box-shadow: + 0 1px 3px rgba(133, 92, 0, 0.16), + 0 0 0 1px rgba(255, 255, 255, 0.22) inset, + 0 0 16px rgba(255, 214, 98, 0.28); + color: #6b4b00; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55); text-transform: capitalize; + + &::before { + content: ''; + position: absolute; + inset: -6px -9px; + border-radius: inherit; + background: radial-gradient( + circle at 18% 22%, + rgba(255, 255, 255, 0.9) 0%, + rgba(255, 237, 158, 0.58) 32%, + rgba(255, 215, 91, 0) 72% + ); + --glass-blur: 9px; + filter: var(--glass-filter); + opacity: 0.75; + pointer-events: none; + z-index: -1; + } + + @media (dynamic-range: high) { + background: + radial-gradient( + circle at 18% 24%, + color(display-p3 1 0.99 0.94) 0%, + color(display-p3 1 0.97 0.82 / 0.82) 18%, + color(display-p3 1 0.95 0.7 / 0) 42% + ), + linear-gradient( + 135deg, + color(display-p3 1 0.98 0.88), + color(display-p3 0.99 0.86 0.34), + color(display-p3 0.92 0.68 0.05) + ); + border-color: color(display-p3 0.9 0.73 0.12 / 0.85); + box-shadow: + 0 1px 4px color(display-p3 0.45 0.28 0 / 0.22), + 0 0 0 1px color(display-p3 1 0.98 0.86 / 0.3) inset, + 0 0 18px color(display-p3 1 0.89 0.2 / 0.36); + color: color(display-p3 0.43 0.3 0); + } + + @supports (color: #{'color(rec2100-linear 1 1 1)'}) { + @media (dynamic-range: high) { + dynamic-range-limit: no-limit; + box-shadow: + 0 1px 4px color(display-p3 0.45 0.28 0 / 0.22), + 0 0 0 1px color(display-p3 1 0.98 0.86 / 0.3) inset, + 0 0 14px color(display-p3 1 0.89 0.2 / 0.36), + 0 0 30px #{'color(rec2100-linear 3.6 2.9 0.7 / 0.48)'}; + + &::before { + background: radial-gradient( + circle at 18% 22%, + #{'color(rec2100-linear 6.5 6.2 5.4 / 0.92)'} 0%, + #{'color(rec2100-linear 2.4 2 0.6 / 0.62)'} 34%, + #{'color(rec2100-linear 1 0.85 0.12 / 0)'} 76% + ); + opacity: 0.92; + } + } + } } :global([data-theme='dark']) .premiumPlanValue { - background: rgba(226, 180, 50, 0.12); - border-color: rgba(226, 180, 50, 0.28); - color: #ffd862; + background: + radial-gradient( + circle at 18% 24%, + rgba(255, 229, 138, 0.32) 0%, + rgba(255, 214, 98, 0.18) 18%, + rgba(255, 214, 98, 0) 44% + ), + linear-gradient(135deg, #4f3d0b 0%, #6e5510 48%, #8f6d10 100%); + border-color: rgba(226, 180, 50, 0.7); + box-shadow: + 0 1px 6px rgba(0, 0, 0, 0.28), + 0 0 0 1px rgba(255, 220, 120, 0.16) inset, + 0 0 18px rgba(255, 196, 44, 0.22); + color: #fff0a8; + text-shadow: 0 0 10px rgba(255, 212, 79, 0.22); + + &::before { + background: radial-gradient( + circle at 18% 24%, + rgba(255, 229, 138, 0.42) 0%, + rgba(255, 197, 66, 0.28) 34%, + rgba(255, 187, 0, 0) 74% + ); + opacity: 0.8; + } + + @media (dynamic-range: high) { + background: + radial-gradient( + circle at 18% 24%, + color(display-p3 1 0.89 0.38 / 0.38) 0%, + color(display-p3 1 0.82 0.2 / 0.2) 18%, + color(display-p3 1 0.82 0.2 / 0) 44% + ), + linear-gradient( + 135deg, + color(display-p3 0.33 0.25 0.04), + color(display-p3 0.48 0.36 0.08), + color(display-p3 0.62 0.46 0.09) + ); + border-color: color(display-p3 0.78 0.6 0.16 / 0.78); + box-shadow: + 0 1px 8px color(display-p3 0 0 0 / 0.32), + 0 0 0 1px color(display-p3 0.95 0.8 0.24 / 0.18) inset, + 0 0 20px color(display-p3 1 0.76 0.1 / 0.28); + color: color(display-p3 1 0.93 0.58); + } + + @supports (color: #{'color(rec2100-linear 1 1 1)'}) { + @media (dynamic-range: high) { + dynamic-range-limit: no-limit; + box-shadow: + 0 1px 8px color(display-p3 0 0 0 / 0.32), + 0 0 0 1px color(display-p3 0.95 0.8 0.24 / 0.18) inset, + 0 0 16px color(display-p3 1 0.76 0.1 / 0.28), + 0 0 28px #{'color(rec2100-linear 4.8 3.5 0.45 / 0.4)'}; + + &::before { + background: radial-gradient( + circle at 18% 24%, + #{'color(rec2100-linear 5.6 4.1 0.75 / 0.64)'} 0%, + #{'color(rec2100-linear 2.2 1.5 0.2 / 0.34)'} 34%, + #{'color(rec2100-linear 1.2 0.9 0.06 / 0)'} 74% + ); + opacity: 0.95; + } + } + } +} + +@include mobile { + .premiumPlanValue { + overflow: hidden; + background: + radial-gradient( + circle at 18% 24%, + rgba(255, 255, 255, 0.88) 0%, + rgba(255, 255, 255, 0.58) 18%, + rgba(255, 255, 255, 0) 42% + ), + linear-gradient(135deg, #fff9e3 0%, #ffe07f 52%, #e0aa14 100%); + box-shadow: + 0 1px 3px rgba(133, 92, 0, 0.16), + 0 0 0 1px rgba(255, 255, 255, 0.22) inset, + 0 0 10px rgba(255, 214, 98, 0.22); + + &::before { + content: none; + } + } + + :global([data-theme='dark']) .premiumPlanValue { + background: + radial-gradient( + circle at 18% 24%, + rgba(255, 229, 138, 0.28) 0%, + rgba(255, 214, 98, 0.14) 18%, + rgba(255, 214, 98, 0) 44% + ), + linear-gradient(135deg, #4f3d0b 0%, #6e5510 48%, #8f6d10 100%); + box-shadow: + 0 1px 6px rgba(0, 0, 0, 0.28), + 0 0 0 1px rgba(255, 220, 120, 0.16) inset, + 0 0 10px rgba(255, 196, 44, 0.18); + } } // 单个认证文件卡片 @@ -853,7 +1031,8 @@ .typeBadge, .stateBadge, - .subscriptionBadge { + .subscriptionBadge, + .subscriptionBadgePremium { padding: 3px 7px; font-size: 10px; } @@ -1075,6 +1254,14 @@ border-color: color-mix(in srgb, var(--danger-color) 70%, transparent); } +.subscriptionBadgePremium { + @extend .premiumPlanValue; + + font-size: 10px; + padding: 3px 8px; + text-transform: none; +} + .fileName { font-size: 14px; font-weight: 800;