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

style: complete re-design of whole editor

Browse Source
This commit is contained in:
Maze Winther
2025-08-01 19:57:26 +02:00
parent 09cb8c8d98
commit 68da487f30
19 changed files with 628 additions and 507 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/app/editor/[project_id]/page.tsx
+3 -3
View File
@@ -167,7 +167,7 @@ export default function Editor() {
{/* Main content area */}
<ResizablePanelGroup
direction="horizontal"
className="h-full w-full gap-[0.19rem] px-2"
className="h-full w-full gap-[0.19rem] px-3"
>
{/* Tools Panel */}
<ResizablePanel
@@ -175,7 +175,7 @@ export default function Editor() {
minSize={15}
maxSize={40}
onResize={setToolsPanel}
className="min-w-0"
className="min-w-0 rounded-sm"
>
<MediaPanel />
</ResizablePanel>
@@ -214,7 +214,7 @@ export default function Editor() {
minSize={15}
maxSize={70}
onResize={setTimeline}
className="min-h-0 px-2 pb-2"
className="min-h-0 px-3 pb-3"
>
<Timeline />
</ResizablePanel>
apps/web/src/app/globals.css
+51 -32
View File
@@ -9,38 +9,40 @@
:root {
/* Custom colors - light mode (default) */
--background: hsl(0 0% 100%);
--foreground: hsl(0 0% 3.9%);
--card: hsl(0 0% 100%);
--card-foreground: hsl(0 0% 3.9%);
--popover: hsl(0 0% 100%);
--popover-foreground: hsl(0 0% 3.9%);
--primary: hsl(0 0% 9%);
--primary-foreground: hsl(0 0% 98%);
--secondary: hsl(0 0% 96.1%);
--secondary-foreground: hsl(0 0% 9%);
--muted: hsl(0 0% 96.1%);
--muted-foreground: hsl(0 0% 45.1%);
--accent: hsl(0 0% 96.1%);
--accent-foreground: hsl(0 0% 9%);
--destructive: hsl(0 84.2% 60.2%);
--destructive-foreground: hsl(0 0% 98%);
--border: hsl(0 0% 89.8%);
--input: hsl(0 0% 89.8%);
--ring: hsl(0 0% 3.9%);
--chart-1: hsl(12 76% 61%);
--chart-2: hsl(173 58% 39%);
--chart-3: hsl(197 37% 24%);
--chart-4: hsl(43 74% 66%);
--chart-5: hsl(27 87% 67%);
--sidebar-background: hsl(0 0% 100%);
--sidebar-foreground: hsl(0 0% 3.9%);
--sidebar-primary: hsl(0 0% 9%);
--sidebar-primary-foreground: hsl(0 0% 98%);
--sidebar-accent: hsl(0 0% 96.1%);
--sidebar-accent-foreground: hsl(0 0% 9%);
--sidebar-border: hsl(0 0% 89.8%);
--sidebar-ring: hsl(0 0% 3.9%);
--background: hsl(0, 0%, 100%);
--foreground: hsl(0 0% 11%);
--card: hsl(0 0% 85.1%);
--card-foreground: hsl(0 0% 2%);
--popover: hsl(0, 0%, 100%);
--popover-foreground: hsl(0 0% 2%);
--primary: hsl(205, 84%, 47%);
--primary-foreground: hsl(0 0% 91%);
--secondary: hsl(216, 13%, 92%);
--secondary-foreground: hsl(0 0% 2%);
--muted: hsl(0 0% 85.1%);
--muted-foreground: hsl(0 0% 36.1%);
--accent: hsl(216, 13%, 92%);
--accent-foreground: hsl(0 0% 2%);
--destructive: hsl(0 100% 40%);
--destructive-foreground: hsl(0, 0%, 100%);
--border: hsl(0 0% 83%);
--input: hsl(0 0% 85.1%);
--ring: hsl(0, 0%, 55%);
--chart-1: hsl(220 70% 50%);
--chart-2: hsl(160 60% 45%);
--chart-3: hsl(30 80% 55%);
--chart-4: hsl(280 65% 60%);
--chart-5: hsl(340 75% 55%);
--sidebar-background: hsl(0 0% 96.1%);
--sidebar-foreground: hsl(0 0% 2%);
--sidebar-primary: hsl(0 0% 2%);
--sidebar-primary-foreground: hsl(0 0% 91%);
--sidebar-accent: hsl(0 0% 85.1%);
--sidebar-accent-foreground: hsl(0 0% 2%);
--sidebar-border: hsl(0 0% 85.1%);
--sidebar-ring: hsl(0 0% 16.9%);
--panel-background: hsl(216 13% 92%);
--panel-accent: hsl(216, 8%, 86%);
/* Radius base */
--radius: 1rem;
@@ -224,3 +226,20 @@
display: none;
}
}
@utility scrollbar-thin {
&::-webkit-scrollbar {
width: 8px;
height: 8px;
}
&::-webkit-scrollbar-track {
background: transparent;
}
&::-webkit-scrollbar-thumb {
background: var(--border);
border-radius: 4px;
}
&::-webkit-scrollbar-thumb:hover {
background: var(--muted-foreground);
}
}
apps/web/src/app/layout.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export default function RootLayout({
<BotIdClient protect={protectedRoutes} />
</head>
<body className={`${defaultFont.className} font-sans antialiased`}>
<ThemeProvider attribute="class" forcedTheme="dark">
<ThemeProvider attribute="class" defaultTheme="dark">
<TooltipProvider>
<StorageProvider>{children}</StorageProvider>
<Analytics />