125 lines
No EOL
2.3 KiB
SCSS
125 lines
No EOL
2.3 KiB
SCSS
.plyr {
|
|
font-family: 'Inter', sans-serif;
|
|
font-weight: 400;
|
|
// border-radius: 16px;
|
|
// margin-top: 30px;
|
|
}
|
|
|
|
.plyr__tooltip {
|
|
font-weight: 400;
|
|
}
|
|
|
|
.plyr__tab-focus {
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
.plyr__control {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
@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-color;
|
|
}
|
|
}
|
|
|
|
.plyr__control--overlaid {
|
|
background-color: $theme-color;
|
|
box-shadow: none;
|
|
padding: 26px;
|
|
transition: 0.5s ease;
|
|
color: #fff;
|
|
border: 3px solid #fff;
|
|
opacity: 1;
|
|
|
|
// &:before {
|
|
// content: '';
|
|
// position: absolute;
|
|
// flexbox: flex;
|
|
// 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;
|
|
// background-size: 18px auto;
|
|
// z-index: 1;
|
|
// }
|
|
|
|
// svg {
|
|
// display: none;
|
|
// }
|
|
|
|
&:hover, &.plyr__tab-focus {
|
|
background-color: #151f30;
|
|
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-color;
|
|
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-color;
|
|
}
|
|
|
|
.plyr--video .plyr__control svg {
|
|
filter: none;
|
|
} |