background-color: rgba($primary-background-color, 0.5);
}
- .vjs-slider {
- background-color: rgba(255, 255, 255, .3);
- border-radius: 2px;
- height: 5px;
-
- .vjs-slider-bar {
- background: $primary-foreground-color;
- }
- }
-
- .vjs-play-progress {
-
- &::before {
- top: -0.3em;
-
- &:hover {
- top: -0.372em;
- }
- }
-
- .vjs-time-tooltip {
- display: none;
- }
- }
-
- .vjs-load-progress {
- background: rgba($slider-bg-color, 0.5);
-
- div {
- background: rgba($slider-bg-color, 0.75);
- }
- }
-
.vjs-poster {
outline: none; /* Remove Blue Outline on Click*/
outline: 0;
opacity: $primary-foreground-opacity;
}
+ .vjs-slider {
+ background-color: rgba(255, 255, 255, .2);
+ border-radius: 2px;
+ height: 5px;
+
+ .vjs-slider-bar {
+ background: $primary-foreground-color;
+ }
+ }
+
+ .vjs-play-progress {
+ padding-right: 4px;
+
+ &::before {
+ top: -0.3em;
+
+ &:hover {
+ top: -0.372em;
+ }
+ }
+
+ .vjs-time-tooltip {
+ display: none;
+ }
+ }
+
+ .vjs-load-progress {
+ &, & div {
+ background: rgba(255, 255, 255, .2);
+ }
+ }
+
.vjs-progress-control {
bottom: 34px;
width: 100%;
}
.vjs-time-control {
+ line-height: inherit;
+
&.vjs-current-time {
font-size: $font-size;
display: inline-block;