sebastjan/reels-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Edit: triangles INSIDE trim bar (overflow:hidden was clipping them)

Browse Source 
Bug: triangles positioned at top:-14px were outside trim bar bounds.
Trim bar has overflow:hidden, so triangles were clipped (invisible).

Fix: top:0 (inside trim bar, at the very top edge).
Triangle 14px tall now sits at top of trim bar (overlapping waveform
slightly but visible, with drop-shadow to make them stand out).
This commit is contained in:
Sebastjan Artič 2026-04-30 13:57:09 +00:00
parent 5d817c586b
commit 02fbae7c4f
1 changed files with 4 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
templates/index.html
View File

@ -1085,13 +1085,13 @@
<div style="width:4px; height:32px; background:#fff; border-radius:2px;"></div>
</div>
<!-- IN marker (zelen trikotnik — kjer si pritisnil play blizu levega handle) -->
<div id="marker-in" style="position:absolute; top:-14px; left:calc(${pctOfStr(startInit, videoDuration)}% - 7px); width:14px; height:14px; z-index:5; pointer-events:none;">
<!-- IN marker (zelen trikotnik znotraj trim bar-a, na vrhu) -->
<div id="marker-in" style="position:absolute; top:0; left:calc(${pctOfStr(startInit, videoDuration)}% - 7px); width:14px; height:14px; z-index:5; pointer-events:none;">
<div style="width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-top:14px solid #4ade80; filter:drop-shadow(0 0 4px #4ade80);"></div>
</div>
<!-- OUT marker (rdeč trikotnik — kjer si pritisnil play blizu desnega handle) -->
<div id="marker-out" style="position:absolute; top:-14px; left:calc(${pctOfStr(endInit, videoDuration)}% - 7px); width:14px; height:14px; z-index:5; pointer-events:none;">
<!-- OUT marker (rdeč trikotnik znotraj trim bar-a, na vrhu) -->
<div id="marker-out" style="position:absolute; top:0; left:calc(${pctOfStr(endInit, videoDuration)}% - 7px); width:14px; height:14px; z-index:5; pointer-events:none;">
<div style="width:0; height:0; border-left:7px solid transparent; border-right:7px solid transparent; border-top:14px solid #ff6b6b; filter:drop-shadow(0 0 4px #ff6b6b);"></div>
</div>