💄 style(ui): replace inline gradients with reusable pastel blur balls; improve dark mode
- Introduce a global CSS utility `with-pastel-balls` in `web/src/index.css`, rendering pastel “blur balls” via ::before with CSS variables (`--pb1..--pb4`, `--pb-opacity`, `--pb-blur`) for easy theming. - Apply the utility to pricing header cards and skeletons: - `web/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx` - `web/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx` - Remove per-component inline `linear-gradient(...)` backgrounds and redundant absolute-positioned decoration nodes to reduce duplication. - Dark mode: - Keep the same pastel palette (pink/lavender/mint/peach). - Increase visibility with `--pb-opacity: 0.36`, `--pb-blur: 65px`, and `mix-blend-mode: screen`. - No functional logic changes; UI-only. Lint passes. Affected files: - web/src/index.css - web/src/components/table/model-pricing/layout/header/PricingVendorIntro.jsx - web/src/components/table/model-pricing/layout/header/PricingVendorIntroSkeleton.jsx
This commit is contained in:
@@ -166,7 +166,7 @@ const PricingVendorIntro = ({
|
||||
if (filterVendor === 'all') {
|
||||
return (
|
||||
<div className='mb-4'>
|
||||
<Card className="!rounded-2xl" bodyStyle={{ padding: '16px' }}>
|
||||
<Card className="!rounded-2xl with-pastel-balls" bodyStyle={{ padding: '16px' }}>
|
||||
<div className="flex items-start space-x-3 md:space-x-4">
|
||||
{/* 全部供应商的头像组合 */}
|
||||
<div className="flex-shrink-0">
|
||||
@@ -210,7 +210,7 @@ const PricingVendorIntro = ({
|
||||
|
||||
return (
|
||||
<div className='mb-4'>
|
||||
<Card className="!rounded-2xl" bodyStyle={{ padding: '16px' }}>
|
||||
<Card className="!rounded-2xl with-pastel-balls" bodyStyle={{ padding: '16px' }}>
|
||||
<div className="flex items-start space-x-3 md:space-x-4">
|
||||
{/* 供应商图标 */}
|
||||
<div className="flex-shrink-0">
|
||||
|
||||
@@ -25,7 +25,7 @@ const PricingVendorIntroSkeleton = ({
|
||||
}) => {
|
||||
const placeholder = (
|
||||
<div className='mb-4'>
|
||||
<Card className="!rounded-2xl" bodyStyle={{ padding: '16px' }}>
|
||||
<Card className="!rounded-2xl with-pastel-balls" bodyStyle={{ padding: '16px' }}>
|
||||
<div className="flex items-start space-x-3 md:space-x-4">
|
||||
{/* 供应商图标骨架 */}
|
||||
<div className="flex-shrink-0 min-w-16 h-16 rounded-2xl bg-white shadow-md flex items-center justify-center px-2">
|
||||
|
||||
Reference in New Issue
Block a user