From 628196dd3874681ecb40ed3d108de2420be90f25 Mon Sep 17 00:00:00 2001 From: bender Date: Fri, 26 Jun 2026 20:17:00 +0000 Subject: [PATCH] Update theme style --- src/index.css | 32 ++++++++++++++++++++------------ 1 file changed, 20 insertions(+), 12 deletions(-) diff --git a/src/index.css b/src/index.css index 066dbff..a1239e9 100644 --- a/src/index.css +++ b/src/index.css @@ -158,25 +158,33 @@ h6 { .card { /* WEBILD_CARD_STYLE */ - /* @cards/glass-elevated */ - backdrop-filter: blur(8px); - background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-card) 80%, transparent), color-mix(in srgb, var(--color-card) 40%, transparent)); - box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); - border: 1px solid var(--color-card); + /* @cards/gradient-mesh */ + background: + radial-gradient(at 0% 0%, color-mix(in srgb, var(--color-accent) 15%, transparent) 0px, transparent 50%), + radial-gradient(at 100% 0%, color-mix(in srgb, var(--color-accent) 10%, transparent) 0px, transparent 50%), + radial-gradient(at 100% 100%, color-mix(in srgb, var(--color-accent) 20%, transparent) 0px, transparent 50%), + radial-gradient(at 0% 100%, color-mix(in srgb, var(--color-accent) 12%, transparent) 0px, transparent 50%), + var(--color-card); } .primary-button { /* WEBILD_PRIMARY_BUTTON */ - /* @primaryButtons/glass-shimmer */ - background: linear-gradient(165deg, color-mix(in srgb, var(--color-primary-cta) 85%, var(--color-foreground)) 0%, var(--color-primary-cta) 40%, color-mix(in srgb, var(--color-primary-cta) 90%, var(--color-background)) 100%); - box-shadow: inset 0 1px 1px 0 color-mix(in srgb, var(--color-foreground) 25%, transparent), inset 0 -1px 1px 0 color-mix(in srgb, var(--color-background) 15%, transparent), 0 4px 12px -2px color-mix(in srgb, var(--color-primary-cta) 25%, transparent); + /* @primaryButtons/gradient */ + background: linear-gradient(to bottom, color-mix(in srgb, var(--color-primary-cta) 75%, transparent), var(--color-primary-cta)); + box-shadow: color-mix(in srgb, var(--color-background) 25%, transparent) 0px 1px 1px 0px inset, color-mix(in srgb, var(--color-primary-cta) 15%, transparent) 3px 3px 3px 0px; } .secondary-button { /* WEBILD_SECONDARY_BUTTON */ - /* @secondaryButtons/glass */ - backdrop-filter: blur(8px); - background: linear-gradient(to bottom right, color-mix(in srgb, var(--color-secondary-cta) 80%, transparent), var(--color-secondary-cta)); - box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05); + /* @secondaryButtons/layered */ + background: + linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 59.26%), + linear-gradient(var(--color-secondary-cta), var(--color-secondary-cta)), + linear-gradient(var(--color-secondary-cta), var(--color-secondary-cta)), + linear-gradient(color-mix(in srgb, var(--color-accent) 5%, transparent) 0%, transparent 59.26%), + linear-gradient(color-mix(in srgb, var(--color-secondary-cta) 60%, transparent), color-mix(in srgb, var(--color-secondary-cta) 60%, transparent)), + var(--color-secondary-cta); + box-shadow: + 2.10837px 3.16256px 9.48767px color-mix(in srgb, var(--color-accent) 10%, transparent); border: 1px solid var(--color-secondary-cta); }