color: pvar(--embedForegroundColor);
.vjs-dock-text {
- padding-right: 10px;
+ padding: $dock-padding;
background: linear-gradient(to bottom, rgba(0, 0, 0, .6) 0, rgba(0, 0, 0, 0.2) 70%, rgba(0, 0, 0, 0) 100%);
}
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
box-shadow: 0 -15px 40px 10px rgba(0, 0, 0, 0.2);
text-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
+ > button:first-child {
+ margin-left: 1em;
+ }
+
.vjs-progress-control,
.vjs-play-control,
.vjs-playback-rate,
cursor: pointer;
font-size: $font-size;
- margin-left: 1em;
width: 3em;
}
}
}
- .vjs-next-video {
+ .vjs-next-video,
+ .vjs-previous-video {
line-height: $control-bar-height;
text-align: right;
.icon {
- &.icon-next {
+ &.icon-next,
+ &.icon-previous {
mask-image: url('#{$assets-path}/player/images/next.svg');
+ -webkit-mask-image: url('#{$assets-path}/player/images/next.svg');
background-color: white;
mask-size: cover;
- transform: scale(2.2);
+ -webkit-mask-size: cover;
+ width: 11px;
+ height: 11px;
+ margin-top: -2px;
+ display: inline-block;
+ }
+
+ &.icon-previous {
+ transform: rotate(180deg);
}
}
}
- .vjs-peertube,
- .vjs-next-video {
+ .vjs-peertube {
.icon {
display: inline-block;
width: 15px;
display: block;
}
}
+
+.vjs-no-next-in-playlist {
+ .vjs-next-video {
+ cursor: default;
+
+ .icon {
+ background-color: rgba(255, 255, 255, 0.5);
+ }
+ }
+}