86 lines
2.0 KiB
SCSS
86 lines
2.0 KiB
SCSS
.detailed,
|
|
.fullscreen {
|
|
.video-player__volume__currnt,
|
|
.video-player__volume::before {
|
|
bottom: 27px;
|
|
}
|
|
|
|
.video-player__volume__handle {
|
|
bottom: 23px;
|
|
}
|
|
}
|
|
|
|
.video-player {
|
|
&__controls {
|
|
background: linear-gradient(0deg, #000000d9 0, #00000073 60%, transparent);
|
|
}
|
|
|
|
&__buttons {
|
|
@apply flex min-w-[30px] items-center text-base whitespace-nowrap overflow-hidden text-ellipsis flex-initial;
|
|
flex: 0 1 auto;
|
|
|
|
.player-button {
|
|
@apply inline-block outline-0 bg-transparent text-base border-0 text-white/75 active:text-white hover:text-white focus:text-white;
|
|
flex: 0 0 auto;
|
|
padding: 5px 6px;
|
|
|
|
.svg-icon {
|
|
@apply w-5 h-5;
|
|
}
|
|
|
|
&:active,
|
|
&:hover,
|
|
&:focus {
|
|
@apply text-white;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__volume {
|
|
@apply inline-flex cursor-pointer h-6 relative overflow-hidden before:content-[''] before:w-12 before:bg-white/35 before:rounded before:absolute before:h-1 before:left-0 before:top-1/2;
|
|
flex: 0 0 auto;
|
|
|
|
.no-reduce-motion & {
|
|
transition: all 100ms linear;
|
|
}
|
|
|
|
&::before {
|
|
transform: translate(0, -50%);
|
|
}
|
|
|
|
&__current {
|
|
@apply bg-accent-500 block absolute h-1 rounded left-0 top-1/2;
|
|
transform: translate(0, -50%);
|
|
}
|
|
|
|
&__handle {
|
|
@apply bg-accent-500 absolute z-[3] rounded-[50%] size-3 top-1/2 left-0 -ml-1.5 opacity-0;
|
|
transform: translate(0, -50%);
|
|
box-shadow: 1px 2px 6px #0003;
|
|
|
|
.no-reduce-motion & {
|
|
transition: opacity 100ms linear;
|
|
}
|
|
}
|
|
}
|
|
|
|
&__link {
|
|
a {
|
|
@apply no-underline text-sm font-medium text-white hover:underline active:underline focus:underline;
|
|
}
|
|
}
|
|
|
|
&__seek {
|
|
@apply cursor-pointer h-6 relative before:content-[''] before:w-full before:bg-white/35 before:rounded before:block before:absolute before:h-1 before:top-3.5;
|
|
|
|
&__handle {
|
|
@apply bg-accent-500 absolute z-[3] opacity-0 rounded-[50%] size-3 top-2.5 -ml-1.5;
|
|
box-shadow: 1px 2px 6px #0003;
|
|
|
|
.no-reduce-motion & {
|
|
transition: opacity 0.1s ease;
|
|
}
|
|
}
|
|
}
|
|
}
|