diff options
| author | Maze Winther <mazewinther@gmail.com> | 2025-08-16 19:11:50 +0200 |
|---|---|---|
| committer | Maze Winther <mazewinther@gmail.com> | 2025-08-16 19:11:50 +0200 |
| commit | 11d2a66c95543eb2f8e5f21a375c9ee967dc47a6 (patch) | |
| tree | 4194fa8d2f37ef5819b44db99eaad50bd8954790 /apps/web/src/components/editor | |
| parent | 77d8c6c77423b065e69043a7fd67584190b7c21f (diff) | |
| download | opencut-11d2a66c95543eb2f8e5f21a375c9ee967dc47a6.tar.gz | |
style: improve ui for selected timeline elements
Diffstat (limited to 'apps/web/src/components/editor')
| -rw-r--r-- | apps/web/src/components/editor/timeline/timeline-element.tsx | 16 |
1 files changed, 10 insertions, 6 deletions
diff --git a/apps/web/src/components/editor/timeline/timeline-element.tsx b/apps/web/src/components/editor/timeline/timeline-element.tsx index f2623161..98e5acfc 100644 --- a/apps/web/src/components/editor/timeline/timeline-element.tsx +++ b/apps/web/src/components/editor/timeline/timeline-element.tsx @@ -208,7 +208,7 @@ export function TimelineElement({ }`} > <div - className={`absolute top-[0.15rem] bottom-[0.15rem] left-0 right-0`} + className={`absolute top-[0.25rem] bottom-[0.25rem] left-0 right-0`} style={{ backgroundImage: imageUrl ? `url(${imageUrl})` : "none", backgroundRepeat: "repeat-x", @@ -271,7 +271,7 @@ export function TimelineElement({ onMouseLeave={resizing ? handleResizeEnd : undefined} > <div - className={`relative h-full rounded-[0.15rem] cursor-pointer overflow-hidden ${getTrackElementClasses( + className={`relative h-full rounded-[0.5rem] cursor-pointer overflow-hidden ${getTrackElementClasses( track.type )} ${isSelected ? "" : ""} ${ isBeingDragged ? "z-50" : "z-10" @@ -299,13 +299,17 @@ export function TimelineElement({ {isSelected && ( <> <div - className="absolute left-0 top-0 bottom-0 w-[0.2rem] cursor-w-resize bg-primary z-50" + className="absolute left-0 top-0 bottom-0 w-[0.6rem] cursor-w-resize bg-primary z-50 flex items-center justify-center" onMouseDown={(e) => handleResizeStart(e, element.id, "left")} - /> + > + <div className="w-[0.2rem] h-[1.5rem] bg-foreground/75 rounded-full" /> + </div> <div - className="absolute right-0 top-0 bottom-0 w-[0.2rem] cursor-e-resize bg-primary z-50" + className="absolute right-0 top-0 bottom-0 w-[0.6em] cursor-e-resize bg-primary z-50 flex items-center justify-center" onMouseDown={(e) => handleResizeStart(e, element.id, "right")} - /> + > + <div className="w-[0.2rem] h-[1.5rem] bg-foreground/75 rounded-full" /> + </div> </> )} </div> |