Picker: lighter annotation bar + room below it
Background was nearly black (#181818) which made the bar barely visible against the page. Switched to mid-grey (#555) so the red mark stands out and the bar reads as an interactive element. Added 2rem bottom margin so the tooltip below the mark doesn't crash into the action buttons. Empty (un-annotated) state collapses to zero height so it doesn't add space when there's no mark to show. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
parent
d0f0e2d443
commit
d314c02d05
1 changed files with 4 additions and 3 deletions
|
|
@ -110,10 +110,11 @@
|
||||||
|
|
||||||
/* Annotation bar (existing-mark indicator below the video) */
|
/* Annotation bar (existing-mark indicator below the video) */
|
||||||
#annotation-bar { position: relative; width: 100%; max-width: 1400px;
|
#annotation-bar { position: relative; width: 100%; max-width: 1400px;
|
||||||
height: 18px; background: #181818; border: 1px solid #333;
|
height: 18px; background: #555; border: 1px solid #666;
|
||||||
border-radius: 3px; margin-top: 0.5rem; cursor: pointer; }
|
border-radius: 3px; margin: 0.5rem 0 2rem;
|
||||||
|
cursor: pointer; }
|
||||||
#annotation-bar.empty { background: transparent; border-color: transparent;
|
#annotation-bar.empty { background: transparent; border-color: transparent;
|
||||||
cursor: default; height: 0.6rem; }
|
cursor: default; height: 0; margin: 0; }
|
||||||
#annotation-bar .mark-line { position: absolute; top: -2px; bottom: -2px;
|
#annotation-bar .mark-line { position: absolute; top: -2px; bottom: -2px;
|
||||||
width: 3px; background: #f44;
|
width: 3px; background: #f44;
|
||||||
box-shadow: 0 0 4px rgba(255,80,80,0.7); }
|
box-shadow: 0 0 4px rgba(255,80,80,0.7); }
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue