98 lines
1.7 KiB
SCSS
98 lines
1.7 KiB
SCSS
.RoundVideo {
|
|
position: relative;
|
|
width: 15rem;
|
|
height: 15rem;
|
|
cursor: var(--custom-cursor, pointer);
|
|
|
|
&.non-interactive {
|
|
pointer-events: none;
|
|
}
|
|
|
|
.video-wrapper {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.thumbnail {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.progress {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.progress-circle {
|
|
stroke: white;
|
|
fill: transparent;
|
|
stroke-width: 4;
|
|
stroke-opacity: 0.35;
|
|
stroke-linecap: round;
|
|
}
|
|
|
|
video::-internal-media-controls-cast-button,
|
|
video::-webkit-media-controls,
|
|
video::-webkit-media-controls-start-playback-button {
|
|
display: none;
|
|
}
|
|
|
|
.play-wrapper {
|
|
position: absolute;
|
|
|
|
.icon-play {
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.icon-view-once {
|
|
position: absolute;
|
|
background-color: rgba(0, 0, 0, 0.75);
|
|
padding: 0.125rem;
|
|
left: 1.625rem;
|
|
bottom: 0;
|
|
font-size: 1rem;
|
|
border-radius: 50%;
|
|
color: var(--color-white);
|
|
z-index: var(--z-badge);
|
|
}
|
|
}
|
|
|
|
.loading-svg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
border-radius: 0.5rem;
|
|
width: 1.875rem;
|
|
height: 1.3125rem;
|
|
}
|
|
|
|
.loading-rect {
|
|
animation: 1s linear loader-rectangle infinite;
|
|
}
|
|
|
|
.transcribe-button {
|
|
position: absolute;
|
|
width: 1.875rem;
|
|
height: 1.3125rem;
|
|
left: 0.1875rem;
|
|
top: 1.6875rem;
|
|
border-radius: 0.5rem;
|
|
background: var(--pattern-color);
|
|
&:hover {
|
|
background: var(--pattern-color) !important;
|
|
opacity: 0.8;
|
|
}
|
|
}
|
|
}
|