c8659cc44b
## Issue - Closes 5998 Theme color problems - "_Seeing the theme go blue when a modal pops up. There's a change in color on Odysee branch also when this happens (but not as apparent)_" ## 1. Fix overlay background color back to gray theme. 2. Also, fixed the Active Toggle Button back to primary colors. 3. Fix hard-to-read "videojs time tooltip". Using the primary colors is a nice touch, but people have complained in Discord that it's too dim given it's transparent background. Just use 'white' instead. Don't use '--color-white' since that's a bit dimmed down. 4. Fix odd highlight in the volume slider (the bright primary color was used in the background).
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);
|
|
}
|