Updating
This commit is contained in:
@@ -3,6 +3,28 @@
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--background: 1 0 0;
|
||||
--foreground: 0.145 0 0;
|
||||
--card: 1 0 0;
|
||||
--card-foreground: 0.145 0 0;
|
||||
--popover: 1 0 0;
|
||||
--popover-foreground: 0.145 0 0;
|
||||
--primary: 0.205 0 0;
|
||||
--primary-foreground: 0.985 0 0;
|
||||
--secondary: 0.97 0 0;
|
||||
--secondary-foreground: 0.205 0 0;
|
||||
--muted: 0.97 0 0;
|
||||
--muted-foreground: 0.556 0 0;
|
||||
--accent: 0.97 0 0;
|
||||
--accent-foreground: 0.205 0 0;
|
||||
--destructive: 0.577 0.245 27.325;
|
||||
--destructive-foreground: 0.985 0 0;
|
||||
--border: 0.922 0 0;
|
||||
--input: 0.922 0 0;
|
||||
--ring: 0.708 0 0;
|
||||
}
|
||||
|
||||
:root {
|
||||
color-scheme: light;
|
||||
}
|
||||
@@ -17,10 +39,7 @@
|
||||
|
||||
body {
|
||||
@apply min-h-screen bg-background font-sans text-foreground antialiased;
|
||||
background-image:
|
||||
radial-gradient(circle at top left, rgba(15, 92, 77, 0.16), transparent 28%),
|
||||
radial-gradient(circle at top right, rgba(207, 111, 46, 0.18), transparent 24%),
|
||||
linear-gradient(180deg, #fcfaf5 0%, #f7f1e5 50%, #f2e7d4 100%);
|
||||
background-image: radial-gradient(circle at top, rgba(0, 0, 0, 0.035), transparent 32%);
|
||||
}
|
||||
|
||||
a {
|
||||
@@ -30,7 +49,7 @@
|
||||
|
||||
@layer components {
|
||||
.app-surface {
|
||||
@apply rounded-3xl border border-white/70 bg-card/85 shadow-panel backdrop-blur;
|
||||
@apply rounded-3xl border bg-card shadow-panel;
|
||||
}
|
||||
|
||||
.field-label {
|
||||
@@ -38,6 +57,6 @@
|
||||
}
|
||||
|
||||
.field-select {
|
||||
@apply flex h-11 w-full rounded-2xl border border-input bg-white/90 px-4 py-2 text-sm text-foreground shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring;
|
||||
@apply flex h-11 w-full rounded-2xl border border-input bg-background px-4 py-2 text-sm text-foreground shadow-sm transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,16 +27,17 @@ export function AppShell({
|
||||
|
||||
return (
|
||||
<div className="container py-4 md:py-8">
|
||||
<header className="relative overflow-hidden rounded-[2rem] bg-[linear-gradient(135deg,rgba(8,35,47,0.98)_0%,rgba(14,87,72,0.96)_52%,rgba(203,105,48,0.92)_100%)] p-6 text-white shadow-glow md:p-10">
|
||||
<div className="pointer-events-none absolute inset-0 bg-hero-grid bg-[size:38px_38px] opacity-20" />
|
||||
<header className="relative overflow-hidden rounded-[2rem] border bg-primary p-6 text-primary-foreground shadow-glow md:p-10">
|
||||
<div className="pointer-events-none absolute inset-0 bg-hero-grid bg-[size:38px_38px] opacity-[0.08]" />
|
||||
<div className="pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-white/10 to-transparent" />
|
||||
<div className="relative flex flex-col gap-6 lg:flex-row lg:items-start lg:justify-between">
|
||||
<div className="max-w-3xl">
|
||||
<div className="mb-4 inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/10 px-4 py-2 text-sm font-medium text-white/90 backdrop-blur">
|
||||
<div className="mb-4 inline-flex items-center gap-2 rounded-full border border-white/10 bg-white/5 px-4 py-2 text-sm font-medium text-white/80">
|
||||
<Trophy className="h-4 w-4" />
|
||||
Little League Coach Console
|
||||
</div>
|
||||
<h1 className="font-display text-4xl font-semibold leading-none tracking-tight md:text-6xl">{title}</h1>
|
||||
<p className="mt-4 max-w-2xl text-base text-white/80 md:text-lg">{subtitle}</p>
|
||||
<p className="mt-4 max-w-2xl text-base text-white/70 md:text-lg">{subtitle}</p>
|
||||
</div>
|
||||
{actions ? <div className="relative flex items-start">{actions}</div> : null}
|
||||
</div>
|
||||
@@ -53,8 +54,8 @@ export function AppShell({
|
||||
className={cn(
|
||||
"inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm font-medium transition",
|
||||
active
|
||||
? "bg-white text-foreground shadow-panel"
|
||||
: "text-muted-foreground hover:bg-white/80 hover:text-foreground"
|
||||
? "bg-primary text-primary-foreground shadow-panel"
|
||||
: "text-muted-foreground hover:bg-accent hover:text-accent-foreground"
|
||||
)}
|
||||
>
|
||||
<Icon className="h-4 w-4" />
|
||||
|
||||
+19
-19
@@ -12,34 +12,34 @@ const config: Config = {
|
||||
},
|
||||
extend: {
|
||||
colors: {
|
||||
border: "hsl(32 22% 86%)",
|
||||
input: "hsl(32 22% 86%)",
|
||||
ring: "hsl(157 63% 27%)",
|
||||
background: "hsl(42 43% 96%)",
|
||||
foreground: "hsl(205 32% 12%)",
|
||||
border: "oklch(var(--border))",
|
||||
input: "oklch(var(--input))",
|
||||
ring: "oklch(var(--ring))",
|
||||
background: "oklch(var(--background))",
|
||||
foreground: "oklch(var(--foreground))",
|
||||
primary: {
|
||||
DEFAULT: "hsl(157 63% 27%)",
|
||||
foreground: "hsl(48 100% 98%)"
|
||||
DEFAULT: "oklch(var(--primary))",
|
||||
foreground: "oklch(var(--primary-foreground))"
|
||||
},
|
||||
secondary: {
|
||||
DEFAULT: "hsl(25 69% 54%)",
|
||||
foreground: "hsl(48 100% 98%)"
|
||||
DEFAULT: "oklch(var(--secondary))",
|
||||
foreground: "oklch(var(--secondary-foreground))"
|
||||
},
|
||||
muted: {
|
||||
DEFAULT: "hsl(36 28% 92%)",
|
||||
foreground: "hsl(211 15% 42%)"
|
||||
DEFAULT: "oklch(var(--muted))",
|
||||
foreground: "oklch(var(--muted-foreground))"
|
||||
},
|
||||
accent: {
|
||||
DEFAULT: "hsl(194 52% 18%)",
|
||||
foreground: "hsl(48 100% 98%)"
|
||||
DEFAULT: "oklch(var(--accent))",
|
||||
foreground: "oklch(var(--accent-foreground))"
|
||||
},
|
||||
card: {
|
||||
DEFAULT: "hsl(48 100% 99%)",
|
||||
foreground: "hsl(205 32% 12%)"
|
||||
DEFAULT: "oklch(var(--card))",
|
||||
foreground: "oklch(var(--card-foreground))"
|
||||
},
|
||||
destructive: {
|
||||
DEFAULT: "hsl(6 72% 54%)",
|
||||
foreground: "hsl(48 100% 98%)"
|
||||
DEFAULT: "oklch(var(--destructive))",
|
||||
foreground: "oklch(var(--destructive-foreground))"
|
||||
}
|
||||
},
|
||||
borderRadius: {
|
||||
@@ -48,8 +48,8 @@ const config: Config = {
|
||||
"3xl": "2rem"
|
||||
},
|
||||
boxShadow: {
|
||||
glow: "0 24px 80px rgba(13, 52, 63, 0.15)",
|
||||
panel: "0 10px 30px rgba(23, 34, 45, 0.08)"
|
||||
glow: "0 24px 80px rgba(0, 0, 0, 0.18)",
|
||||
panel: "0 8px 24px rgba(0, 0, 0, 0.06)"
|
||||
},
|
||||
fontFamily: {
|
||||
sans: ['"Inter"', '"Segoe UI"', "sans-serif"],
|
||||
|
||||
Reference in New Issue
Block a user