External/OpenCut
1
0
Fork 0
mirror of https://github.com/OpenCut-app/OpenCut.git synced 2026-07-13 21:52:53 +02:00
Code Issues Packages Projects Releases Wiki Activity

Lay groundwork for Tailwind v4 upgrade

Browse Source
This commit is contained in:
Brandon McConnell
2025-07-30 13:15:09 -04:00
parent 1c20027d33
commit df1e80b528
65 changed files with 318 additions and 382 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/blog/[slug]/page.tsx
+2 -2
View File
@@ -87,8 +87,8 @@ async function Page({ params }: PageProps) {
<main className="relative">
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
<div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
<div className="absolute -top-40 -right-40 w-96 h-96 bg-linear-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
<div className="absolute top-1/2 -left-40 w-80 h-80 bg-linear-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
</div>
<div className="relative container max-w-3xl mx-auto px-4 py-16">
apps/web/src/app/blog/page.tsx
+2 -2
View File
@@ -28,8 +28,8 @@ export default async function BlogPage() {
<main className="relative">
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
<div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
<div className="absolute -top-40 -right-40 w-96 h-96 bg-linear-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
<div className="absolute top-1/2 -left-40 w-80 h-80 bg-linear-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
</div>
<div className="relative container max-w-3xl mx-auto px-4 py-16">
apps/web/src/app/contributors/page.tsx
+5 -5
View File
@@ -77,8 +77,8 @@ export default async function ContributorsPage() {
<main className="relative">
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
<div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
<div className="absolute -top-40 -right-40 w-96 h-96 bg-linear-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
<div className="absolute top-1/2 -left-40 w-80 h-80 bg-linear-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
</div>
<div className="relative container mx-auto px-4 py-16">
@@ -138,8 +138,8 @@ export default async function ContributorsPage() {
className="group block flex-1"
>
<div className="relative mx-auto max-w-md">
<div className="absolute inset-0 bg-gradient-to-r from-muted/50 to-muted/30 rounded-2xl blur group-hover:blur-md transition-all duration-300" />
<Card className="relative bg-background/80 backdrop-blur-sm border-2 group-hover:border-muted-foreground/20 transition-all duration-300 group-hover:shadow-xl">
<div className="absolute inset-0 bg-linear-to-r from-muted/50 to-muted/30 rounded-2xl blur-sm group-hover:blur-md transition-all duration-300" />
<Card className="relative bg-background/80 backdrop-blur-xs border-2 group-hover:border-muted-foreground/20 transition-all duration-300 group-hover:shadow-xl">
<CardContent className="p-8 text-center">
<div className="relative mb-6">
<Avatar className="h-24 w-24 mx-auto ring-4 ring-background shadow-2xl">
@@ -268,7 +268,7 @@ export default async function ContributorsPage() {
animationDelay: `${index * 100}ms`,
}}
>
<Card className="h-full bg-background/80 backdrop-blur-sm border-2 group-hover:border-muted-foreground/20 transition-all duration-300 group-hover:shadow-xl">
<Card className="h-full bg-background/80 backdrop-blur-xs border-2 group-hover:border-muted-foreground/20 transition-all duration-300 group-hover:shadow-xl">
<CardContent className="p-6 text-center h-full flex flex-col">
<div className="mb-4">
<div className="w-12 h-12 mx-auto rounded-full bg-muted/50 flex items-center justify-center group-hover:bg-muted/70 transition-colors">
apps/web/src/app/globals.css
+21 -3
View File
@@ -1,6 +1,24 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import 'tailwindcss';
@config '../../tailwind.config.ts';
/*
The default border color has changed to `currentcolor` in Tailwind CSS v4,
so we've added these compatibility styles to make sure everything still
looks the same as it did with Tailwind CSS v3.
If we ever want to remove these styles, we need to add an explicit border
color utility to any element that depends on these defaults.
*/
@layer base {
*,
::after,
::before,
::backdrop,
::file-selector-button {
border-color: var(--color-gray-200, currentcolor);
}
}
@layer base {
:root {
apps/web/src/app/privacy/page.tsx
+3 -3
View File
@@ -24,8 +24,8 @@ export default function PrivacyPage() {
<Header />
<main className="relative">
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
<div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
<div className="absolute -top-40 -right-40 w-96 h-96 bg-linear-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
<div className="absolute top-1/2 -left-40 w-80 h-80 bg-linear-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
</div>
<div className="relative container mx-auto px-4 py-16">
<div className="max-w-4xl mx-auto">
@@ -47,7 +47,7 @@ export default function PrivacyPage() {
have any questions.
</p>
</div>
<Card className="bg-background/80 backdrop-blur-sm border-2 border-muted/30">
<Card className="bg-background/80 backdrop-blur-xs border-2 border-muted/30">
<CardContent className="p-8 text-base leading-relaxed space-y-8">
<section>
<h2 className="text-2xl font-semibold mb-4">
apps/web/src/app/projects/page.tsx
+9 -9
View File
@@ -142,7 +142,7 @@ export default function ProjectsPage() {
href="/"
className="flex items-center gap-1 hover:text-muted-foreground transition-colors"
>
<ChevronLeft className="!size-5 shrink-0" />
<ChevronLeft className="size-5! shrink-0" />
<span className="text-sm font-medium">Back</span>
</Link>
<div className="block md:hidden">
@@ -153,7 +153,7 @@ export default function ProjectsPage() {
size="sm"
onClick={handleCancelSelection}
>
<X className="!size-4" />
<X className="size-4!" />
Cancel
</Button>
{selectedProjects.size > 0 && (
@@ -162,7 +162,7 @@ export default function ProjectsPage() {
size="sm"
onClick={() => setIsBulkDeleteDialogOpen(true)}
>
<Trash2 className="!size-4" />
<Trash2 className="size-4!" />
Delete ({selectedProjects.size})
</Button>
)}
@@ -192,7 +192,7 @@ export default function ProjectsPage() {
{isSelectionMode ? (
<div className="flex items-center gap-2">
<Button variant="outline" onClick={handleCancelSelection}>
<X className="!size-4" />
<X className="size-4!" />
Cancel
</Button>
{selectedProjects.size > 0 && (
@@ -200,7 +200,7 @@ export default function ProjectsPage() {
variant="destructive"
onClick={() => setIsBulkDeleteDialogOpen(true)}
>
<Trash2 className="!size-4" />
<Trash2 className="size-4!" />
Delete Selected ({selectedProjects.size})
</Button>
)}
@@ -399,7 +399,7 @@ function ProjectCard({
>
{isSelectionMode && (
<div className="absolute top-3 left-3 z-10">
<div className="w-5 h-5 rounded bg-background/80 backdrop-blur-sm border flex items-center justify-center">
<div className="w-5 h-5 rounded bg-background/80 backdrop-blur-xs border flex items-center justify-center">
<Checkbox
checked={isSelected}
onCheckedChange={(checked) =>
@@ -426,7 +426,7 @@ function ProjectCard({
/>
) : (
<div className="w-full h-full bg-muted/50 flex items-center justify-center">
<Video className="h-12 w-12 flex-shrink-0 text-muted-foreground" />
<Video className="h-12 w-12 shrink-0 text-muted-foreground" />
</div>
)}
</div>
@@ -501,7 +501,7 @@ function ProjectCard({
<div className="space-y-1">
<div className="flex items-center gap-1.5 text-sm text-muted-foreground">
<Calendar className="!size-4" />
<Calendar className="size-4!" />
<span>Created {formatDate(project.createdAt)}</span>
</div>
</div>
@@ -543,7 +543,7 @@ function ProjectCard({
function CreateButton({ onClick }: { onClick?: () => void }) {
return (
<Button className="flex" onClick={onClick}>
<Plus className="!size-4" />
<Plus className="size-4!" />
<span className="text-sm font-medium">New project</span>
</Button>
);
apps/web/src/app/roadmap/page.tsx
+7 -7
View File
@@ -122,8 +122,8 @@ export default function RoadmapPage() {
<Header />
<main className="relative">
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
<div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
<div className="absolute -top-40 -right-40 w-96 h-96 bg-linear-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
<div className="absolute top-1/2 -left-40 w-80 h-80 bg-linear-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
</div>
<div className="relative container mx-auto px-4 py-16">
<div className="max-w-4xl mx-auto">
@@ -148,7 +148,7 @@ export default function RoadmapPage() {
{roadmapItems.map((item, index) => (
<div key={index} className="relative">
<div className="flex items-start gap-2">
<span className="text-lg font-medium text-muted-foreground select-none leading-[1.5]">
<span className="text-lg font-medium text-muted-foreground select-none leading-normal">
{index + 1}.
</span>
<div className="flex-1 pt-[2px]">
@@ -156,13 +156,13 @@ export default function RoadmapPage() {
<h3 className="font-medium text-lg">{item.title}</h3>
<Badge
className={cn("shadow-none", {
"!bg-green-500 text-white":
"bg-green-500! text-white":
item.status.type === "complete",
"!bg-yellow-500 text-white":
"bg-yellow-500! text-white":
item.status.type === "pending",
"!bg-blue-500 text-white":
"bg-blue-500! text-white":
item.status.type === "info",
"!bg-foreground/10 text-accent-foreground":
"bg-foreground/10! text-accent-foreground":
item.status.type === "default",
})}
>
apps/web/src/app/terms/page.tsx
+3 -3
View File
@@ -24,8 +24,8 @@ export default function TermsPage() {
<Header />
<main className="relative">
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
<div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
<div className="absolute -top-40 -right-40 w-96 h-96 bg-linear-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
<div className="absolute top-1/2 -left-40 w-80 h-80 bg-linear-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
</div>
<div className="relative container mx-auto px-4 py-16">
<div className="max-w-4xl mx-auto">
@@ -47,7 +47,7 @@ export default function TermsPage() {
editor.
</p>
</div>
<Card className="bg-background/80 backdrop-blur-sm border-2 border-muted/30">
<Card className="bg-background/80 backdrop-blur-xs border-2 border-muted/30">
<CardContent className="p-8 text-base leading-relaxed space-y-8">
<section>
<h2 className="text-2xl font-semibold mb-4">
apps/web/src/app/why-not-capcut/page.tsx
+2 -2
View File
@@ -7,8 +7,8 @@ export default function WhyNotCapcut() {
<main className="relative mt-12">
<div className="absolute inset-0 overflow-hidden pointer-events-none">
<div className="absolute -top-40 -right-40 w-96 h-96 bg-gradient-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
<div className="absolute top-1/2 -left-40 w-80 h-80 bg-gradient-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
<div className="absolute -top-40 -right-40 w-96 h-96 bg-linear-to-br from-muted/20 to-transparent rounded-full blur-3xl" />
<div className="absolute top-1/2 -left-40 w-80 h-80 bg-linear-to-tr from-muted/10 to-transparent rounded-full blur-3xl" />
</div>
<div className="relative container mx-auto px-4 py-16">