116 lines
4.0 KiB
CSS
116 lines
4.0 KiB
CSS
.video-js {
|
|
.vjs-skip-button-component {
|
|
position: absolute;
|
|
top: 0;
|
|
width: calc(50% - 48px);
|
|
height: calc(100% - 73px);
|
|
|
|
opacity: 1;
|
|
transition: opacity 1s;
|
|
|
|
&.vjs-skip-backward {
|
|
left: 0;
|
|
}
|
|
|
|
&.vjs-skip-forward {
|
|
right: 0;
|
|
}
|
|
|
|
.vjs-skip-button {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
&:focus {
|
|
outline: none;
|
|
box-shadow: none;
|
|
}
|
|
|
|
.icon-placeholder {
|
|
width: 30px;
|
|
height: 30px;
|
|
align-content: center;
|
|
position: absolute;
|
|
top: calc(50% + calc(48px / 2));
|
|
}
|
|
|
|
.scroll-info {
|
|
width: 100%;
|
|
height: calc(100% + 73px);
|
|
position: absolute;
|
|
top: 0;
|
|
|
|
padding: 6%;
|
|
border-radius: 50%;
|
|
box-sizing: border-box;
|
|
|
|
align-content: center;
|
|
|
|
color: var(--Light-theme-Default-White, #fff);
|
|
text-align: center;
|
|
/* app/bold/Headline */
|
|
font-family: Inter;
|
|
font-size: 1.3vw;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
@media (min-width: 1200px) {
|
|
font-size: 1vw;
|
|
}
|
|
}
|
|
|
|
&.vjs-skip-button-backward {
|
|
.icon-placeholder {
|
|
right: 10px;
|
|
background-repeat: no-repeat;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M31.8191 5.58705C29.3458 4.53678 26.6859 3.99697 23.9988 4.00001C17.4569 4.00039 11.6487 7.14174 8 11.9982V8.00001C8 6.89544 7.10457 6.00001 6 6.00001C4.89543 6.00001 4 6.89544 4 8.00001V24C4 25.1046 4.89543 26 6 26C7.10457 26 8 25.1046 8 24C8 15.1636 15.1636 8.00001 24 8.00001L24.0024 8.00001C26.151 7.99745 28.278 8.42902 30.2557 9.26884C32.2334 10.1087 34.021 11.3394 35.5113 12.8872C36.2774 13.6829 37.5435 13.7069 38.3392 12.9407C39.1349 12.1746 39.1589 10.9085 38.3927 10.1128C36.5287 8.17687 34.2928 6.63748 31.8191 5.58705ZM42 22C40.8954 22 40 22.8954 40 24C40 32.8364 32.8364 40 24 40H23.9973C19.8528 40.0056 15.8691 38.3968 12.8908 35.5148C12.0971 34.7466 10.8309 34.7674 10.0628 35.5612C9.29464 36.3549 9.31542 37.6211 10.1092 38.3892C13.8348 41.9945 18.8182 44.007 24.0027 44L24 42V44H24.0027C35.047 43.9985 44 35.0447 44 24C44 22.8954 43.1046 22 42 22Z' fill='white'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
|
|
}
|
|
.scroll-info {
|
|
left: -65%;
|
|
align-items: end;
|
|
background: linear-gradient(
|
|
270deg,
|
|
rgba(0, 0, 0, 0.25) 0%,
|
|
rgba(0, 0, 0, 0) 73.42%
|
|
);
|
|
}
|
|
}
|
|
|
|
&.vjs-skip-button-forward {
|
|
.icon-placeholder {
|
|
left: 10px;
|
|
background-repeat: no-repeat;
|
|
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M16.1809 5.58705C18.6542 4.53678 21.3141 3.99697 24.0012 4.00001C30.5431 4.00039 36.3513 7.14174 40 11.9982V8.00001C40 6.89544 40.8954 6.00001 42 6.00001C43.1046 6.00001 44 6.89544 44 8.00001V24C44 25.1046 43.1046 26 42 26C40.8954 26 40 25.1046 40 24C40 15.1636 32.8364 8.00001 24 8.00001L23.9976 8.00001C21.849 7.99745 19.722 8.42902 17.7443 9.26884C15.7666 10.1087 13.979 11.3394 12.4887 12.8872C11.7226 13.6829 10.4565 13.7069 9.66082 12.9407C8.86512 12.1746 8.84114 10.9085 9.60727 10.1128C11.4713 8.17687 13.7072 6.63748 16.1809 5.58705ZM6 22C7.10457 22 8 22.8954 8 24C8 32.8364 15.1636 40 24 40H24.0027C28.1472 40.0056 32.1309 38.3968 35.1092 35.5148C35.9029 34.7466 37.1691 34.7674 37.9372 35.5612C38.7054 36.3549 38.6846 37.6211 37.8908 38.3892C34.1652 41.9945 29.1818 44.007 23.9973 44L24 42V44H23.9973C12.953 43.9985 4 35.0447 4 24C4 22.8954 4.89543 22 6 22Z' fill='white'/%3E%3C/svg%3E") no-repeat center / 24px 24px;
|
|
}
|
|
.scroll-info {
|
|
align-items: start;
|
|
right: -65%;
|
|
background: linear-gradient(
|
|
90deg,
|
|
rgba(0, 0, 0, 0.25) 0%,
|
|
rgba(0, 0, 0, 0) 73.42%
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.vjs-user-inactive {
|
|
.vjs-skip-button-component {
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
/* &.vjs-hls-live, */
|
|
&.vjs-controls-disabled {
|
|
.vjs-skip-button-component {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|