5d8e3d8b0a
## Issue
The loading circle wasn't showing up, causing confusion.
Splitting CSS doesn't seem trivial as there seems to be a huge dependency on the load order. Pretty much similar to what this person is facing https://lihautan.com/css-code-splitting/#the-problem
## Change
This reverts videojs-specific changes from 4d638bcf.
152 lines
2.6 KiB
SCSS
152 lines
2.6 KiB
SCSS
.video-js {
|
|
font-size: 12px;
|
|
overflow: hidden;
|
|
|
|
// Control Bar (container)
|
|
.vjs-control-bar {
|
|
background: none;
|
|
|
|
&::before {
|
|
position: absolute;
|
|
bottom: 0;
|
|
content: '';
|
|
height: 5rem;
|
|
width: 100%;
|
|
background: rgba(20, 20, 20, 0.45);
|
|
background: linear-gradient(0deg, rgba(0, 0, 0, 0.85) 10%, rgba(0, 0, 0, 0) 100%);
|
|
}
|
|
}
|
|
|
|
// Progress Bar
|
|
.vjs-progress-control.vjs-control {
|
|
position: absolute;
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
height: 1rem;
|
|
bottom: 90%;
|
|
|
|
// Circle play head
|
|
.vjs-play-progress::before {
|
|
transform: scale(0);
|
|
transition: transform 0.3s;
|
|
}
|
|
|
|
&:hover {
|
|
.vjs-play-progress::before {
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
|
|
// Progress Slider
|
|
.vjs-slider {
|
|
margin: 0 1rem;
|
|
}
|
|
}
|
|
|
|
// Load progress color
|
|
.vjs-load-progress,
|
|
.vjs-load-progress div {
|
|
background-color: rgba(160, 160, 160, 0.5);
|
|
}
|
|
|
|
// Progress Bar Background
|
|
.vjs-slider {
|
|
background-color: rgba(60, 60, 60, 0.5);
|
|
}
|
|
|
|
// Primary Color Progress
|
|
.vjs-slider-bar {
|
|
background-color: var(--color-gray-5);
|
|
}
|
|
|
|
// Inner Progress Bar
|
|
.vjs-play-progress {
|
|
background-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
// Spacer
|
|
.vjs-custom-control-spacer {
|
|
display: flex;
|
|
flex: auto;
|
|
}
|
|
|
|
// Transcoding menu
|
|
/*.vjs-tech {
|
|
height: auto !important;
|
|
position: absolute !important;
|
|
}*/
|
|
|
|
// Menu size
|
|
.vjs-playback-rate .vjs-menu .vjs-menu-content {
|
|
width: 125%;
|
|
font-size: 10px;
|
|
}
|
|
|
|
// Volume slider
|
|
.vjs-volume-panel {
|
|
&.vjs-control {
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.vjs-volume-control.vjs-volume-horizontal {
|
|
transition: 0.2s;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Tooltip
|
|
.vjs-mouse-display .vjs-time-tooltip {
|
|
color: white;
|
|
}
|
|
|
|
// Tooltip
|
|
.video-js {
|
|
.vjs-progress-control {
|
|
.vjs-play-progress {
|
|
.vjs-time-tooltip {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Transitions control bar between active / inactive
|
|
.vjs-has-started {
|
|
.vjs-control-bar {
|
|
opacity: 1;
|
|
transition: 0.1s;
|
|
}
|
|
|
|
&.vjs-user-inactive.vjs-playing {
|
|
.vjs-control-bar {
|
|
opacity: 0;
|
|
transition: 0.3s;
|
|
}
|
|
}
|
|
|
|
&.vjs-user-active.vjs-playing {
|
|
.vjs-control-bar {
|
|
}
|
|
}
|
|
}
|
|
|
|
// Button glow
|
|
.video-js {
|
|
.vjs-control,
|
|
.vjs-time-divider {
|
|
user-select: none;
|
|
|
|
&:focus:before,
|
|
&:hover:before,
|
|
&:focus {
|
|
// Disable builtin button glow
|
|
text-shadow: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.bottom-gradient {
|
|
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.4) 0%, transparent 72px);
|
|
}
|