.video-js.vjs-peertube-skin {
font-size: $font-size;
- color: var(--embedForegroundColor);
+ color: pvar(--embedForegroundColor);
.vjs-dock-text {
padding-right: 10px;
background-image: url('#{$assets-path}/player/images/big-play-button.svg');
}
- &:hover {
- opacity: 0.8;
+ &.focus-visible, &:hover {
+ background-color: var(--mainColor, dimgray);
}
+
}
// Small effect when we click on the play button
.vjs-control-bar,
.vjs-big-play-button,
.vjs-settings-dialog {
- background-color: var(--embedBigPlayBackgroundColor);
+ background-color: pvar(--embedBigPlayBackgroundColor);
}
.vjs-poster {
.vjs-theater-control,
.vjs-settings
{
- color: var(--embedForegroundColor) !important;
+ color: pvar(--embedForegroundColor) !important;
opacity: $primary-foreground-opacity;
transition: opacity .1s;
.vjs-current-time,
.vjs-duration,
.vjs-peertube {
- color: var(--embedForegroundColor);
+ color: pvar(--embedForegroundColor);
opacity: $primary-foreground-opacity;
}
transition: none;
.vjs-play-progress {
- background: var(--embedForegroundColor);
+ background: pvar(--embedForegroundColor);
// Not display the circle if the progress is not hovered
&::before {
line-height: $control-bar-height;
text-align: right;
margin-right: 6px;
+ overflow: hidden;
.vjs-peertube-displayed {
display: block;