jessibuca
Version:
a h5 live stream player
67 lines (58 loc) • 1.09 kB
CSS
.timeline-container {
width: 100%;
position: relative;
-webkit-user-select: none;
user-select: none;
}
.timeline-wrapper {
width: 100%;
position: relative;
}
.timeline-label {
font-size: 12px;
color: #666;
margin-bottom: 4px;
}
.canvas-wrapper {
width: 100%;
position: relative;
}
.timeline-canvas {
width: 100%;
height: 100%;
display: block;
cursor: grab;
}
.timeline-canvas:active {
cursor: grabbing;
}
/* 添加一些视觉反馈 */
.canvas-wrapper:hover {
border-color: #d1d1d1;
}
.canvas-wrapper:active {
border-color: #18a058;
}
.timeline-tooltip {
position: fixed;
background-color: rgba(0, 0, 0, 0.9);
color: white;
padding: 4px 8px;
border-radius: 4px;
font-size: 12px;
pointer-events: none;
z-index: 1000;
transform: translate(-50%, -100%);
display: none;
white-space: nowrap;
}
.timeline-tooltip::after {
content: "";
position: absolute;
left: 50%;
top: 100%;
transform: translateX(-50%);
border-width: 4px;
border-style: solid;
border-color: rgba(0, 0, 0, 0.9) transparent transparent transparent;
}