Pull styling out out into it's own file
Also restores the CSS for vjs-overlay which I commented out previously for *some* reason (but I don't know why, and it doesn't seem to make a difference whether I comment it out or not)
This commit is contained in:
DispatchCommit
Sean Yesmunt
parent
d21a4fe8ab
commit
46f58c63c8
3 changed files with 158 additions and 158 deletions
|
|
@ -1,4 +1,4 @@
|
|||
/*.video-js {
|
||||
.video-js {
|
||||
$bottom: 3.5em;
|
||||
$nudge: 5px;
|
||||
$middle: 50%;
|
||||
|
|
@ -81,161 +81,4 @@
|
|||
.vjs-no-flex .vjs-overlay-right {
|
||||
margin-top: $offset-v;
|
||||
}
|
||||
}*/
|
||||
|
||||
.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,.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 .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-primary);
|
||||
}
|
||||
|
||||
// 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: .2s;
|
||||
}
|
||||
|
||||
.vjs-volume-control.vjs-volume-horizontal {
|
||||
transition: .2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tooltip
|
||||
.vjs-mouse-display .vjs-time-tooltip {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
// 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: .1s;
|
||||
}
|
||||
|
||||
&.vjs-user-inactive.vjs-playing {
|
||||
.vjs-control-bar {
|
||||
opacity: 0;
|
||||
transition: .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);
|
||||
}
|
||||
|
|
|
|||
156
ui/component/viewers/videoViewer/videojs.scss
Normal file
156
ui/component/viewers/videoViewer/videojs.scss
Normal file
|
|
@ -0,0 +1,156 @@
|
|||
.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,.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 .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-primary);
|
||||
}
|
||||
|
||||
// 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: .2s;
|
||||
}
|
||||
|
||||
.vjs-volume-control.vjs-volume-horizontal {
|
||||
transition: .2s;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Tooltip
|
||||
.vjs-mouse-display .vjs-time-tooltip {
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
// 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: .1s;
|
||||
}
|
||||
|
||||
&.vjs-user-inactive.vjs-playing {
|
||||
.vjs-control-bar {
|
||||
opacity: 0;
|
||||
transition: .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);
|
||||
}
|
||||
|
|
@ -13,6 +13,7 @@ import FileViewerEmbeddedEnded from 'web/component/fileViewerEmbeddedEnded';
|
|||
import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
|
||||
import LoadingScreen from 'component/common/loading-screen';
|
||||
import { addTheaterModeButton } from './internal/theater-mode';
|
||||
import './videojs.scss';
|
||||
|
||||
const PLAY_TIMEOUT_ERROR = 'play_timeout_error';
|
||||
const PLAY_TIMEOUT_LIMIT = 2000;
|
||||
|
|
|
|||
Loading…
Reference in a new issue