Skip to content
GitLab
Projects
Groups
Snippets
Help
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
W
web-ausstellung-virtuell.de
Project overview
Project overview
Details
Activity
Releases
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Issues
14
Issues
14
List
Boards
Labels
Service Desk
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Operations
Operations
Incidents
Environments
Analytics
Analytics
CI / CD
Repository
Value Stream
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
ubezi
web-ausstellung-virtuell.de
Commits
30a47e6f
Commit
30a47e6f
authored
Jan 30, 2018
by
Jonas Heinrich
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
integrated new rewritten videre video player
parent
b5e78b7c
Changes
11
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
11 changed files
with
287 additions
and
342 deletions
+287
-342
css/videre.css
css/videre.css
+236
-0
index.html
index.html
+43
-3
js/map.js
js/map.js
+1
-1
js/videre.js
js/videre.js
+3
-14
tests/css/app.css
tests/css/app.css
+0
-3
tests/css/videre.css
tests/css/videre.css
+4
-1
tests/css/videre.css.map
tests/css/videre.css.map
+0
-7
tests/css/videre.sass
tests/css/videre.sass
+0
-254
tests/index.html
tests/index.html
+0
-50
tests/js/app.js
tests/js/app.js
+0
-5
tests/js/jquery-3.2.1.min.js
tests/js/jquery-3.2.1.min.js
+0
-4
No files found.
css/videre.css
0 → 100644
View file @
30a47e6f
body
*,
*
{
padding
:
0
;
margin
:
0
;
outline
:
none
;
box-sizing
:
border-box
;
font-family
:
"Proxima Nova"
;
}
.flex
{
display
:
-webkit-flex
;
display
:
-moz-flex
;
display
:
-ms-flex
;
display
:
-o-flex
;
display
:
flex
;
}
.justify-center
{
justify-content
:
center
;
}
.align-center
{
-ms-align-items
:
center
;
align-items
:
center
;
}
.align-end
{
-ms-align-items
:
flex-end
;
align-items
:
flex-end
;
}
button
{
background-color
:
transparent
;
border
:
none
;
cursor
:
pointer
;
}
/* components end */
.vid-wrapper
{
position
:
relative
;
cursor
:
none
;
}
.vid-wrapper.is-fullscreen
.vid-toggle-layer
{
z-index
:
999999999998
;
}
.vid-wrapper.is-fullscreen
.vid-controls-bottom
,
.vid-wrapper.is-fullscreen
.vid-shadow-layer
,
.vid-wrapper.is-fullscreen
.vid-info-layer
,
.vid-wrapper.is-fullscreen
.vid-quality-selector
{
z-index
:
999999999999
;
}
.vid-wrapper.is-fullscreen
.vid-bottom-progress-bar
{
z-index
:
999999999999
;
opacity
:
0.2
;
}
.vid-wrapper.mouse-entered
,
.vid-wrapper.paused
{
cursor
:
default
;
}
.vid-wrapper.mouse-entered
.vid-bottom-progress-bar
,
.vid-wrapper.paused
.vid-bottom-progress-bar
{
opacity
:
0
;
}
.vid-wrapper.mouse-entered
.vid-controls-bottom
,
.vid-wrapper.paused
.vid-controls-bottom
{
opacity
:
1
;
}
.vid-wrapper.mouse-entered
.vid-shadow-layer
,
.vid-wrapper.paused
.vid-shadow-layer
{
opacity
:
0.8
;
}
.vid-wrapper.mouse-entered
.vid-info-layer
.vid-info-wrapper
h1
,
.vid-wrapper.mouse-entered
.vid-info-layer
.vid-info-wrapper
p
,
.vid-wrapper.mouse-entered
.vid-info-layer
.vid-info-wrapper
h2
,
.vid-wrapper.paused
.vid-info-layer
.vid-info-wrapper
h1
,
.vid-wrapper.paused
.vid-info-layer
.vid-info-wrapper
p
,
.vid-wrapper.paused
.vid-info-layer
.vid-info-wrapper
h2
{
opacity
:
1
;
}
.vid-wrapper.mouse-entered
.vid-quality-selector
,
.vid-wrapper.paused
.vid-quality-selector
{
opacity
:
1
;
visibility
:
hidden
;
}
.vid-wrapper
.vid-html5
{
position
:
relative
;
z-index
:
1
;
}
.vid-wrapper
.vid-html5
video
{
display
:
block
;
background-color
:
black
;
}
.vid-wrapper
.vid-controls-bottom
{
z-index
:
2
;
position
:
absolute
;
bottom
:
20px
;
left
:
0
;
width
:
100%
;
height
:
60px
;
opacity
:
0
;
transition
:
all
550ms
cubic-bezier
(
0.23
,
1
,
0.32
,
1
)
0ms
;
}
.vid-wrapper
.vid-controls-wrapper
{
margin
:
0
-20px
;
width
:
100%
;
}
.vid-wrapper
.vid-toggle-layer
,
.vid-wrapper
.vid-shadow-layer
{
position
:
absolute
;
bottom
:
0
;
left
:
0
;
width
:
100%
;
height
:
100%
;
z-index
:
1
;
}
.vid-wrapper
.vid-bottom-progress-bar
{
position
:
absolute
;
width
:
100%
;
height
:
2px
;
z-index
:
2
;
bottom
:
0
;
left
:
0
;
transition
:
all
550ms
cubic-bezier
(
0.23
,
1
,
0.32
,
1
)
0ms
;
}
.vid-wrapper
.vid-bottom-progress-bar
.progress-bg
,
.vid-wrapper
.vid-bottom-progress-bar
.progress-fg
{
height
:
100%
;
position
:
absolute
;
top
:
0
;
left
:
0
;
}
.vid-wrapper
.vid-bottom-progress-bar
.progress-bg
{
width
:
100%
;
background-color
:
rgba
(
255
,
255
,
255
,
0.4
);
z-index
:
1
;
}
.vid-wrapper
.vid-bottom-progress-bar
.progress-fg
{
width
:
0%
;
background-color
:
white
;
}
.vid-wrapper
.vid-info-layer
{
position
:
absolute
;
bottom
:
80px
;
left
:
0
;
z-index
:
3
;
width
:
100%
;
}
.vid-wrapper
.vid-info-layer
.vid-info-wrapper
{
width
:
90%
;
margin
:
0
auto
;
padding
:
0
20px
;
}
.vid-wrapper
.vid-info-layer
.vid-info-wrapper
h1
{
color
:
white
;
opacity
:
0
;
transition
:
all
550ms
cubic-bezier
(
0.23
,
1
,
0.32
,
1
)
0ms
;
}
.vid-wrapper
.vid-info-layer
.vid-info-wrapper
h2
{
color
:
white
;
opacity
:
0
;
transition
:
all
550ms
cubic-bezier
(
0.23
,
1
,
0.32
,
1
)
0ms
;
}
.vid-wrapper
.vid-info-layer
.vid-info-wrapper
p
{
color
:
rgba
(
255
,
255
,
255
,
0.6
);
opacity
:
0
;
transition
:
all
550ms
cubic-bezier
(
0.23
,
1
,
0.32
,
1
)
0ms
;
}
.vid-wrapper
.vid-info-layer
.vid-info-wrapper
.view-count
{
margin-left
:
auto
;
}
.vid-wrapper
.vid-shadow-layer
{
pointer-events
:
none
;
z-index
:
2
;
opacity
:
0
;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,000000+100 */
background
:
transparent
;
background
:
-moz-linear-gradient
(
top
,
transparent
50%
,
#000000
90%
);
background
:
-webkit-linear-gradient
(
top
,
transparent
50%
,
#000000
90%
);
background
:
linear-gradient
(
to
bottom
,
transparent
50%
,
#000000
90%
);
filter
:
progid
:
DXImageTransform
.
Microsoft
.
gradient
(
startColorstr
=
'#7db9e8'
,
endColorstr
=
'#000000'
,
GradientType
=
0
);
transition
:
all
550ms
cubic-bezier
(
0.23
,
1
,
0.32
,
1
)
0ms
;
}
.vid-wrapper
.vid-quality-selector
{
position
:
absolute
;
top
:
40%
;
right
:
30px
;
z-index
:
3
;
flex-direction
:
column
;
border-radius
:
5px
;
overflow
:
hidden
;
opacity
:
0
;
visibility
:
hidden
;
transition
:
all
550ms
cubic-bezier
(
0.23
,
1
,
0.32
,
1
)
0ms
;
}
.vid-wrapper
.vid-quality-selector
button
{
background-color
:
rgba
(
34
,
34
,
34
,
0.5
);
padding
:
13px
20px
;
font-weight
:
700
;
font-size
:
16px
;
color
:
white
;
}
.vid-wrapper
.vid-quality-selector
button
.active
{
background-color
:
white
;
color
:
#222
;
}
.vid-wrapper
.vid-controls-contents
{
width
:
90%
;
margin
:
0
auto
;
}
.vid-wrapper
.vid-controls-contents
span
{
margin
:
0
10px
;
font-size
:
13px
;
min-width
:
45px
;
display
:
flex
;
justify-content
:
center
;
color
:
rgba
(
255
,
255
,
255
,
0.7
);
}
.vid-wrapper
.vid-controls-contents
button
{
color
:
rgba
(
255
,
255
,
255
,
0.7
);
transition
:
all
550ms
cubic-bezier
(
0.23
,
1
,
0.32
,
1
)
0ms
;
}
.vid-wrapper
.vid-controls-contents
button
:hover
{
color
:
white
;
}
.vid-wrapper
.vid-controls-contents
button
i
{
font-size
:
28px
;
}
.vid-wrapper
.vid-controls-contents
.vid-progress
{
position
:
relative
;
width
:
100%
;
height
:
5px
;
margin
:
0
20px
;
margin-top
:
-2px
;
transition
:
all
550ms
cubic-bezier
(
0.23
,
1
,
0.32
,
1
)
0ms
;
cursor
:
pointer
;
}
.vid-wrapper
.vid-controls-contents
.vid-progress
:hover
{
height
:
13px
;
}
.vid-wrapper
.vid-controls-contents
.vid-progress
.progress-bg
,
.vid-wrapper
.vid-controls-contents
.vid-progress
.progress-fg
,
.vid-wrapper
.vid-controls-contents
.vid-progress
.progress-loaded
{
height
:
100%
;
position
:
absolute
;
top
:
0
;
left
:
0
;
}
.vid-wrapper
.vid-controls-contents
.vid-progress
.progress-bg
{
width
:
100%
;
background-color
:
rgba
(
255
,
255
,
255
,
0.4
);
z-index
:
1
;
}
.vid-wrapper
.vid-controls-contents
.vid-progress
.progress-loaded
{
pointer-events
:
none
;
width
:
0%
;
background-color
:
rgba
(
255
,
255
,
255
,
0.3
);
z-index
:
2
;
}
.vid-wrapper
.vid-controls-contents
.vid-progress
.progress-fg
{
width
:
0%
;
background-color
:
white
;
}
.vid-wrapper
.vid-controls-contents
.vid-progress
.progress-hovertime
{
position
:
absolute
;
top
:
-35px
;
padding
:
5px
10px
;
font-size
:
12px
;
transform
:
translateX
(
-50%
);
color
:
white
;
background-color
:
#333
;
opacity
:
0
;
pointer-events
:
none
;
}
.vid-wrapper
.vid-controls-contents
.vid-progress
.progress-hovertime.hover
{
opacity
:
1
;
pointer-events
:
auto
;
}
.vid-wrapper
.vid-controls-contents
.item
{
padding
:
0
10px
;
margin
:
0
10px
;
}
.vid-wrapper
.vid-volume-control
{
min-width
:
45px
;
}
.vid-wrapper
.vid-volume-slider
{
width
:
0
;
height
:
5px
;
margin-top
:
-2px
;
background-color
:
rgba
(
255
,
255
,
255
,
0.6
);
cursor
:
pointer
;
transition
:
all
550ms
cubic-bezier
(
0.23
,
1
,
0.32
,
1
)
0ms
;
transform-origin
:
left
;
}
.vid-wrapper
.vid-volume-slider
.ui-slider-range
{
height
:
100%
;
background-color
:
white
;
}
video
::-webkit-media-controls
{
display
:
none
!important
;
}
video
{
object-fit
:
cover
;
}
/*# sourceMappingURL=videre.css.map */
index.html
View file @
30a47e6f
...
...
@@ -8,9 +8,12 @@
<link
rel=
"stylesheet"
type=
"text/css"
href=
"css/main.css"
>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"css/overview.css"
>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"css/mapbox-gl-0.43.0.css"
>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"
tests/
css/videre.css"
>
<link
rel=
"stylesheet"
type=
"text/css"
href=
"css/videre.css"
>
<link
rel=
"stylesheet"
href=
"https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"
>
<link
rel=
"stylesheet"
href=
"https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/fonts/ionicons.eot"
>
<script
src=
"js/jquery-3.2.1.min.js"
></script>
<script
src=
"js/videre.js"
></script>
<script
src=
"https://code.jquery.com/ui/1.12.1/jquery-ui.js"
></script>
</head>
<body>
...
...
@@ -31,6 +34,39 @@
</map>
<content>
<div
id=
"player"
class=
"vid-wrapper videre-container mouse-entered"
style=
"width: 100%;"
>
<div
class=
"vid-html5"
>
<video
src=
"video/oceans.mp4"
id=
"html-player"
style=
"width: 100%;"
poster=
"images/video1_poster.png"
></video>
</div>
<div
class=
"vid-toggle-layer"
></div>
<div
class=
"vid-shadow-layer"
></div>
<div
class=
"vid-controls-bottom flex align-center justify-center"
>
<div
class=
"vid-controls-wrapper"
>
<div
class=
"vid-controls-contents flex align-center justify-center"
>
<button
class=
"vid-play-btn item"
><i
class=
"ion-ios-play flex align-center"
></i></button>
<div
class=
"vid-volume-container flex align-center"
>
<button
class=
"vid-volume-control item"
><i
class=
"ion-android-volume-up flex align-center"
></i></button>
<div
id=
"vol-control"
class=
"vid-volume-slider"
></div>
</div>
<span
class=
"vid-current-time"
></span>
<div
class=
"vid-progress"
>
<div
class=
"progress-bg"
></div>
<div
class=
"progress-loaded"
></div>
<div
class=
"progress-fg"
></div>
<div
class=
"progress-hovertime"
></div>
</div>
<span
class=
"vid-duration"
></span>
<button
class=
"vid-request-fullscreen item"
><i
class=
"ion-android-expand flex align-center"
></i></button>
</div>
</div>
</div>
<div
class=
"vid-bottom-progress-bar"
>
<div
class=
"progress-fg"
></div>
</div>
</div>
<div
class=
"description"
>
<h2>
Josef Albers - Ehrung des Quadrats: Gelbe Zentrum (1954)
</h2>
<p
class=
"prose-big"
>
Bla bla
</p>
...
...
@@ -47,11 +83,15 @@
</div>
<script
src=
'js/mapbox-gl-0.43.0.js'
></script>
<script
src=
"js/jquery-3.2.1.min.js"
></script>
<script
src=
"tests/js/videre.js"
></script>
<script
src=
"js/map.js"
></script>
<script
src=
"js/main.js"
></script>
<script
language=
"javascript"
>
$
(
document
).
ready
(
function
(){
$
(
'
#player
'
).
videre
();
});
</script>
</body>
</html>
js/map.js
View file @
30a47e6f
...
...
@@ -8,7 +8,7 @@ var bounds = [
mapboxgl
.
accessToken
=
'
pk.eyJ1Ijoib25ueSIsImEiOiJjajhvdnc1eTgwOTM3MnFudG81MXlpZGJrIn0.lDC0PwJDf704okmeI6w61g
'
;
var
map
=
new
mapboxgl
.
Map
({
container
:
'
map
'
,
style
:
'
mapbox://styles/mapbox/
streets
-v9
'
,
style
:
'
mapbox://styles/mapbox/
light
-v9
'
,
center
:
[
8.404
,
49.0150
],
zoom
:
14
,
pitch
:
0
,
...
...
tests/
js/videre.js
→
js/videre.js
View file @
30a47e6f
...
...
@@ -86,7 +86,6 @@ if (typeof Object.create !== "function") {
var
base
=
this
;
$
(
'
.vid-play-btn
'
).
unbind
().
click
(
function
(){
console
.
log
(
'
clicked
'
)
base
.
togglePlay
();
});
...
...
@@ -173,8 +172,8 @@ if (typeof Object.create !== "function") {
}
else
{
element
.
find
(
'
i
'
).
removeClass
().
addClass
(
'
ion-android-volume-up flex align-center
'
);
}
media
.
volume
=
base
.
options
.
audio
.
volume
/
100
;
$
(
'
#vol-control
'
).
slider
({
value
:
base
.
options
.
audio
.
volume
});
media
.
volume
=
50
/
100
;
$
(
'
#vol-control
'
).
slider
({
value
:
50
});
}
},
...
...
@@ -186,12 +185,11 @@ if (typeof Object.create !== "function") {
$
(
'
#vol-control
'
).
slider
({
min
:
0
,
max
:
100
,
value
:
media
.
volume
===
0
?
0
:
base
.
options
.
audio
.
volume
,
value
:
media
.
volume
===
0
?
0
:
50
,
range
:
"
min
"
,
animate
:
false
,
slide
:
function
(
event
,
ui
)
{
media
.
volume
=
ui
.
value
/
100
;
base
.
options
.
audio
.
volume
=
ui
.
value
;
if
(
ui
.
value
>=
50
)
{
$
(
'
.vid-volume-control i
'
).
removeClass
().
addClass
(
'
ion-android-volume-up flex align-center
'
);
currentVolumeIcon
=
'
ion-android-volume-up flex align-center
'
;
...
...
@@ -312,14 +310,5 @@ if (typeof Object.create !== "function") {
return
Video
.
init
(
options
,
$
(
this
[
0
]));
};
// default options
$
.
fn
.
videre
.
options
=
{
currentTime
:
null
,
audio
:
{
volume
:
50
},
bottomProgressBar
:
true
};
}(
jQuery
,
window
,
document
));
tests/css/app.css
deleted
100644 → 0
View file @
b5e78b7c
#player
{
width
:
100%
;
}
tests/css/videre.css
View file @
30a47e6f
...
...
@@ -31,7 +31,6 @@ button {
/* components end */
.vid-wrapper
{
position
:
relative
;
height
:
100%
;
cursor
:
none
;
}
.vid-wrapper.is-fullscreen
.vid-toggle-layer
{
z-index
:
999999999998
;
}
...
...
@@ -230,4 +229,8 @@ button {
video
::-webkit-media-controls
{
display
:
none
!important
;
}
video
{
object-fit
:
cover
;
}
/*# sourceMappingURL=videre.css.map */
tests/css/videre.css.map
deleted
100644 → 0
View file @
b5e78b7c
{
"version": 3,
"mappings": "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",
"sources": ["videre.sass"],
"names": [],
"file": "videre.css"
}
tests/css/videre.sass
deleted
100644 → 0
View file @
b5e78b7c
$transition
:
all
550ms
cubic-bezier
(
0
.23
,
1
,
0
.32
,
1
)
0ms
body
*,
*
padding
:
0
margin
:
0
outline
:
none
box-sizing
:
border-box
font-family
:
'Proxima Nova'
.flex
display
:
-
webkit-flex
display
:
-
moz-flex
display
:
-
ms-flex
display
:
-
o-flex
display
:
flex
.justify-center
justify-content
:
center
.align-center
-ms-align-items
:
center
align-items
:
center
.align-end
-ms-align-items
:
flex-end
align-items
:
flex-end
button
background-color
:
transparent
border
:
none
cursor
:
pointer
/* components end */
.vid-wrapper
position
:
relative
height
:
100%
cursor
:
none
&
.is-fullscreen
.vid-toggle-layer
z-index
:
999999999998
.vid-controls-bottom
,
.vid-shadow-layer
,
.vid-info-layer
,
.vid-quality-selector
z-index
:
999999999999
.vid-bottom-progress-bar
z-index
:
999999999999
opacity
:
.2
&
.mouse-entered
,
&
.paused
cursor
:
default
.vid-bottom-progress-bar
opacity
:
0
.vid-controls-bottom
opacity
:
1
.vid-shadow-layer
opacity
:
0
.8
.vid-info-layer
.vid-info-wrapper
h1
,
p
,
h2
opacity
:
1
.vid-quality-selector
opacity
:
1
.vid-html5
position
:
relative
z-index
:
1
video
display
:
block
background-color
:
black
.vid-controls-bottom
z-index
:
2
position
:
absolute
bottom
:
20px
left
:
0
width
:
100%
height
:
60px
opacity
:
0
transition
:
$transition
.vid-controls-wrapper
margin
:
0
-20px
width
:
100%
.vid-toggle-layer
,
.vid-shadow-layer
position
:
absolute
bottom
:
0
left
:
0
width
:
100%
height
:
100%
z-index
:
1
.vid-bottom-progress-bar
position
:
absolute
width
:
100%
height
:
2px
z-index
:
2
bottom
:
0
left
:
0
transition
:
$transition
.progress-bg
,
.progress-fg
,
height
:
100%
position
:
absolute
top
:
0
left
:
0
.progress-bg
width
:
100%
background-color
:
rgba
(
white
,.
4
)
z-index
:
1
.progress-fg
width
:
0%
background-color
:
white
.vid-info-layer
position
:
absolute
bottom
:
80px
left
:
0
z-index
:
3
width
:
100%
.vid-info-wrapper
width
:
90%
margin
:
0
auto
padding
:
0
20px
h1
color
:
white
opacity
:
0
transition
:
$transition
h2
color
:
white
opacity
:
0
transition
:
$transition
p
color
:
rgba
(
white
,.
6
)
opacity
:
0
transition
:
$transition
.view-count
margin-left
:
auto
.vid-shadow-layer
pointer-events
:
none
z-index
:
2
opacity
:
0
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#7db9e8+0,000000+100 */
background
:
transparent
/*
Old
browsers
*/
background
:
-moz-linear-gradient
(
top
,
transparent
50%
,
#000000
90%
)
/*
FF3
.6
-15
*/
background
:
-webkit-linear-gradient
(
top
,
transparent
50%
,
#000000
90%
)
/*
Chrome10-25
,
Safari5
.1
-6
*/
background
:
linear-gradient
(
to
bottom
,
transparent
50%
,
#000000
90%
)
/*
W3C
,
IE10
+,
FF16
+,
Chrome26
+,
Opera12
+,
Safari7
+
*/
filter
:
progid
:
DXImageTransform
.
Microsoft
.
gradient
(
startColorstr
=
'#7db9e8'
,
endColorstr
=
'#000000'
,
GradientType
=
0
)
/*
IE6-9
*/
transition
:
$transition
.vid-quality-selector
position
:
absolute
top
:
40%
right
:
30px
z-index
:
3
flex-direction
:
column
border-radius
:
5px
overflow
:
hidden
opacity
:
0
transition
:
$transition
button
background-color
:
rgba
(
#222
,
0
.5
)
padding
:
13px
20px
font-weight
:
700
font-size
:
16px
color
:
white
&
.active
background-color
:
white
color
:
#222
.vid-controls-contents
width
:
90%
margin
:
0
auto
span
margin
:
0
10px
font-size
:
13px
min-width
:
45px
display
:
flex
justify-content
:
center
color
:
rgba
(
white
,
.7
)
button
color
:
rgba
(
white
,
.7
)
transition
:
$transition
&
:hover
color
:
white
i
font-size
:
28px
.vid-progress
position
:
relative
width
:
100%
height
:
5px
margin
:
0
20px
margin-top
:
-2px
transition
:
$transition
cursor
:
pointer
&
:hover
height
:
13px
.progress-bg
,
.progress-fg
,
.progress-loaded
height
:
100%
position
:
absolute
top
:
0
left
:
0
.progress-bg
width
:
100%
background-color
:
rgba
(
white
,.
4
)
z-index
:
1
.progress-loaded
pointer-events
:
none
width
:
0%
background-color
:
rgba
(
white
,.
3
)
z-index
:
2
.progress-fg
width
:
0%
background-color
:
white
.progress-hovertime
position
:
absolute
top
:
-35px
padding
:
5px
10px
font-size
:
12px
transform
:
translateX
(
-50%
)
color
:
white
background-color
:
#333
opacity
:
0
pointer-events
:
none
// display: inline-block
&
.hover
opacity
:
1
pointer-events
:
auto
.item
padding
:
0
10px
margin
:
0
10px
.vid-volume-control
min-width
:
45px
.vid-volume-slider
width
:
0
height
:
5px
margin-top
:
-2px
background-color
:
rgba
(
white
,.
6
)
cursor
:
pointer
transition
:
$transition
transform-origin
:
left
.ui-slider-range
height
:
100%
background-color
:
white