2018-03-18 18:09:58 +00:00
|
|
|
const video-padding = 56.25%
|
2018-12-09 04:53:46 +00:00
|
|
|
const video-control-color = rgba(255, 255, 255, 0.85)
|
2018-12-08 00:12:50 +00:00
|
|
|
const video-progress-height = 0.35rem
|
|
|
|
const video-progress-clickable-height-buffer = 0.4rem
|
2017-10-12 15:52:46 +00:00
|
|
|
|
2016-11-28 16:06:00 +00:00
|
|
|
.video-container
|
2017-11-04 07:45:39 +00:00
|
|
|
position relative
|
2016-11-28 16:06:00 +00:00
|
|
|
width 100%
|
2017-11-07 08:57:52 +00:00
|
|
|
min-height 100px
|
2017-11-04 16:11:47 +00:00
|
|
|
padding-bottom video-padding
|
2017-11-04 07:45:39 +00:00
|
|
|
border-radius ui-element-border-radius
|
|
|
|
overflow hidden
|
2016-11-28 16:06:00 +00:00
|
|
|
|
2018-12-07 00:54:17 +00:00
|
|
|
:hover
|
|
|
|
.video-controls
|
|
|
|
opacity 1
|
|
|
|
|
2016-11-28 16:06:00 +00:00
|
|
|
.video
|
2017-11-04 07:45:39 +00:00
|
|
|
position absolute
|
2016-11-28 16:06:00 +00:00
|
|
|
width 100%
|
2017-11-04 07:45:39 +00:00
|
|
|
height 100%
|
|
|
|
left 0
|
2018-04-14 14:18:46 +00:00
|
|
|
top 0
|
2018-12-07 00:54:17 +00:00
|
|
|
background-color black
|
|
|
|
|
|
|
|
.video-controls
|
2018-12-08 02:05:15 +00:00
|
|
|
horizontal
|
|
|
|
align-items center
|
2018-12-07 00:54:17 +00:00
|
|
|
position absolute
|
2018-12-07 20:19:50 +00:00
|
|
|
bottom 0
|
|
|
|
right 0
|
|
|
|
padding 0.5rem 0.75rem
|
2018-12-07 00:54:17 +00:00
|
|
|
opacity 0
|
2018-12-07 20:19:50 +00:00
|
|
|
width 100%
|
2018-12-07 00:54:17 +00:00
|
|
|
default-transition
|
|
|
|
|
2018-12-07 19:40:27 +00:00
|
|
|
:hover
|
|
|
|
opacity 1 !important
|
|
|
|
|
2018-12-08 00:12:50 +00:00
|
|
|
.video-progress-clickable
|
2018-12-07 20:19:50 +00:00
|
|
|
flex 1
|
2018-12-08 00:12:50 +00:00
|
|
|
padding video-progress-clickable-height-buffer 0
|
|
|
|
|
2018-12-08 06:01:07 +00:00
|
|
|
:hover
|
|
|
|
cursor pointer
|
|
|
|
|
2018-12-08 00:12:50 +00:00
|
|
|
.video-progress-container
|
|
|
|
height video-progress-height
|
2018-12-07 21:01:06 +00:00
|
|
|
background rgba(255, 255, 255, 0.3)
|
2018-12-07 20:19:50 +00:00
|
|
|
border-radius ui-element-border-radius
|
2018-12-07 23:06:31 +00:00
|
|
|
transform translateZ(0)
|
2018-12-07 20:19:50 +00:00
|
|
|
overflow hidden
|
|
|
|
|
2018-12-07 21:01:06 +00:00
|
|
|
.video-progress
|
2018-12-09 04:53:46 +00:00
|
|
|
background link-color
|
2018-12-07 20:19:50 +00:00
|
|
|
width 100%
|
2018-12-08 00:12:50 +00:00
|
|
|
height video-progress-height
|
2018-12-07 20:19:50 +00:00
|
|
|
transform scaleX(0)
|
|
|
|
transform-origin 0
|
2018-12-07 23:06:31 +00:00
|
|
|
will-change transform
|
2018-12-07 20:19:50 +00:00
|
|
|
|
|
|
|
.video-time
|
2018-12-07 19:40:27 +00:00
|
|
|
color video-control-color
|
2018-12-07 20:19:50 +00:00
|
|
|
margin-left 0.5rem
|
2018-12-07 19:40:27 +00:00
|
|
|
|
2018-12-07 00:54:17 +00:00
|
|
|
.video-control
|
2018-12-07 19:40:27 +00:00
|
|
|
background transparent !important
|
|
|
|
color video-control-color
|
2018-12-07 00:54:17 +00:00
|
|
|
border none
|
2018-12-07 19:40:27 +00:00
|
|
|
line-height 1em
|
|
|
|
height auto
|
|
|
|
padding 0
|
|
|
|
|
|
|
|
:hover
|
|
|
|
color white
|
2018-12-07 00:54:17 +00:00
|
|
|
|
2018-12-09 02:57:37 +00:00
|
|
|
.video-control-fullscreen
|
|
|
|
margin-left 0.5rem
|
|
|
|
|
|
|
|
.video-control-play,
|
|
|
|
.video-control-pause
|
|
|
|
margin-right 0.5rem
|
|
|
|
|
|
|
|
.video-control-pause
|
|
|
|
display none
|
|
|
|
|
2018-12-09 04:36:01 +00:00
|
|
|
::cue
|
|
|
|
background transparent
|
|
|
|
font-family "Ubuntu", "Trebuchet MS", sans-serif
|
|
|
|
line-height 1.5em
|
|
|
|
|
|
|
|
// Use a blurry shadow and a solid outline on each side
|
2018-12-09 04:46:19 +00:00
|
|
|
text-shadow 0 0 0.5em rgba(0, 0, 0, 0.8), -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black
|
2018-12-09 04:36:01 +00:00
|
|
|
|
2018-12-07 00:54:17 +00:00
|
|
|
::-webkit-media-controls
|
|
|
|
display none !important
|