96 lines
1.7 KiB
Plaintext

const video-padding = 56.25%
const video-control-color = rgba(255, 255, 255, 0.85)
const video-progress-height = 0.35rem
const video-progress-clickable-height-buffer = 0.4rem
.video-container
position relative
width 100%
min-height 100px
padding-bottom video-padding
border-radius ui-element-border-radius
overflow hidden
:hover
.video-controls
opacity 1
.video
position absolute
width 100%
height 100%
left 0
top 0
background-color black
.video-controls
horizontal
align-items center
position absolute
bottom 0
right 0
padding 0.5rem 0.75rem
opacity 0
width 100%
default-transition
:hover
opacity 1 !important
.video-progress-clickable
flex 1
padding video-progress-clickable-height-buffer 0
:hover
cursor pointer
.video-progress-container
height video-progress-height
background rgba(255, 255, 255, 0.3)
border-radius ui-element-border-radius
transform translateZ(0)
overflow hidden
.video-progress
background link-color
width 100%
height video-progress-height
transform scaleX(0)
transform-origin 0
will-change transform
.video-time
color video-control-color
margin-left 0.5rem
.video-control
background transparent !important
color video-control-color
border none
line-height 1em
height auto
padding 0
:hover
color white
.video-control-fullscreen
margin-left 0.5rem
.video-control-play,
.video-control-pause
margin-right 0.5rem
.video-control-pause
display none
::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
text-shadow 0 0 0.5em rgba(0, 0, 0, 0.7), -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black
::-webkit-media-controls
display none !important