133 lines
2.5 KiB
SCSS
133 lines
2.5 KiB
SCSS
@import '../../node_modules/plyr/src/sass/plyr.scss';
|
|
.plyr {
|
|
font-family: 'Saira', sans-serif;
|
|
font-weight: 400;
|
|
border-radius: 0;
|
|
|
|
aspect-ratio: 16/9;
|
|
// margin-top: 30px;
|
|
// border: 1px solid #d5d5d5;
|
|
// border: 1px solid #000;
|
|
}
|
|
|
|
.plyr__tooltip {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.plyr__tab-focus {
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
.plyr__control {
|
|
border-radius: 0px;
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.plyr {
|
|
// margin-top: 40px;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 1200px) {
|
|
.plyr {
|
|
// margin-right: 30px;
|
|
}
|
|
|
|
.plyr__controls {
|
|
padding: 20px !important;
|
|
}
|
|
}
|
|
|
|
.plyr__menu__container .plyr__control {
|
|
transition: 0s ease;
|
|
}
|
|
|
|
.plyr__control.plyr__control--overlaid {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.plyr--video {
|
|
.plyr__control {
|
|
&.plyr__tab-focus, &:hover, &[aria-expanded="true"] {
|
|
background: none;
|
|
background-color: theme('colors.primary');
|
|
}
|
|
}
|
|
|
|
.plyr__control--overlaid {
|
|
background-color: theme('colors.primary');
|
|
box-shadow: none;
|
|
padding: 26px;
|
|
transition: 0.5s ease;
|
|
color: #fff;
|
|
border: 3px solid #fff;
|
|
opacity: 1;
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
top: 0;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
margin: 0;
|
|
border-radius: 50%;
|
|
background: url("../images/play.svg") no-repeat center;
|
|
z-index: 1;
|
|
transform: scale(1.8);
|
|
@apply scale-100 md:scale-150;
|
|
}
|
|
|
|
svg {
|
|
display: none;
|
|
}
|
|
|
|
&:hover, &.plyr__tab-focus {
|
|
background-color: theme('colors.elbg');
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.plyr__progress__buffer {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 768px) {
|
|
.plyr--video .plyr__control--overlaid {
|
|
padding: 33px;
|
|
|
|
&:before {
|
|
background-size: 20px auto;
|
|
}
|
|
}
|
|
}
|
|
|
|
.plyr__progress__buffer {
|
|
border-radius: 0;
|
|
}
|
|
|
|
.plyr--full-ui input[type="range"] {
|
|
color: theme('colors.primary');
|
|
border-radius: 0;
|
|
}
|
|
|
|
.plyr__control.plyr__tab-focus {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.plyr__menu__container .plyr__control[role="menuitemradio"][aria-checked="true"]::before {
|
|
background: none;
|
|
background-color: theme('colors.primary');
|
|
}
|
|
|
|
.plyr--video .plyr__control svg {
|
|
filter: none;
|
|
}
|
|
:root {
|
|
--plyr-color-main: theme('colors.primary');
|
|
}
|