diff --git a/src/renderer/src/Timeline.module.css b/src/renderer/src/Timeline.module.css new file mode 100644 index 00000000..3dde6026 --- /dev/null +++ b/src/renderer/src/Timeline.module.css @@ -0,0 +1,11 @@ +.time { + background: rgba(0,0,0,0.4); + border-radius: 3; + padding: 2px 4px; + color: rgba(255, 255, 255, 0.8); + transition: opacity 0.2s; + pointer-events: auto; +} +.time:hover { + opacity: 0.1; +} \ No newline at end of file diff --git a/src/renderer/src/Timeline.tsx b/src/renderer/src/Timeline.tsx index dcaf1fe5..0bf76c33 100644 --- a/src/renderer/src/Timeline.tsx +++ b/src/renderer/src/Timeline.tsx @@ -10,6 +10,8 @@ import BetweenSegments from './BetweenSegments'; import useContextMenu from './hooks/useContextMenu'; import useUserSettings from './hooks/useUserSettings'; +import styles from './Timeline.module.css'; + import { timelineBackground, darkModeTransition } from './colors'; import { Frame } from './ffmpeg'; @@ -71,7 +73,6 @@ const CommandedTime = memo(({ commandedTimePercent }: { commandedTimePercent: st const timelineHeight = 36; const timeWrapperStyle: CSSProperties = { position: 'absolute', height: timelineHeight, left: 0, right: 0, bottom: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', pointerEvents: 'none' }; -const timeStyle: CSSProperties = { background: 'rgba(0,0,0,0.4)', borderRadius: 3, padding: '2px 4px', color: 'rgba(255, 255, 255, 0.8)' }; function Timeline({ durationSafe, @@ -401,8 +402,8 @@ function Timeline({ -
-
+
+
{formatTimeAndFrames(displayTime)}{isZoomed ? ` ${displayTimePercent}` : ''}