styles/video.scarlet

const video-padding = 56.25%
const video-control-color = rgba(255, 255, 255, 0.75)
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
	position absolute
	bottom 0
	right 0
	padding 0.5rem 0.75rem
	opacity 0
	width 100%
	horizontal
	align-items center
	default-transition

	:hover
		opacity 1 !important

.video-progress-clickable
	flex 1
	padding video-progress-clickable-height-buffer 0

.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 white
	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
	margin-left 0.5rem

	:hover
		color white

::-webkit-media-controls
	display none !important
Using constants for most CSS variables now 2018-03-18 18:09:58 +00:00			`const video-padding = 56.25%`
Improved video controls 2018-12-07 19:40:27 +00:00			`const video-control-color = rgba(255, 255, 255, 0.75)`
Use a height buffer for video seek clicks 2018-12-08 00:12:50 +00:00			`const video-progress-height = 0.35rem`
			`const video-progress-clickable-height-buffer = 0.4rem`
Improved soundtrack editing 2017-10-12 15:52:46 +00:00
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`.video-container`
Redesign 2017-11-04 07:45:39 +00:00			`position relative`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`width 100%`
Improved iframes in Firefox 2017-11-07 08:57:52 +00:00			`min-height 100px`
Redesign 2017-11-04 16:11:47 +00:00			`padding-bottom video-padding`
Redesign 2017-11-04 07:45:39 +00:00			`border-radius ui-element-border-radius`
			`overflow hidden`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00
Started using custom video controls 2018-12-07 00:54:17 +00:00			`:hover`
			`.video-controls`
			`opacity 1`

Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`.video`
Redesign 2017-11-04 07:45:39 +00:00			`position absolute`
Translated the basic style files to scarlet 2016-11-28 16:06:00 +00:00			`width 100%`
Redesign 2017-11-04 07:45:39 +00:00			`height 100%`
			`left 0`
Changed video style 2018-04-14 14:18:46 +00:00			`top 0`
Started using custom video controls 2018-12-07 00:54:17 +00:00			`background-color black`

			`.video-controls`
			`position absolute`
Added video progress bar 2018-12-07 20:19:50 +00:00			`bottom 0`
			`right 0`
			`padding 0.5rem 0.75rem`
Started using custom video controls 2018-12-07 00:54:17 +00:00			`opacity 0`
Added video progress bar 2018-12-07 20:19:50 +00:00			`width 100%`
Improved video controls 2018-12-07 19:40:27 +00:00			`horizontal`
			`align-items center`
Started using custom video controls 2018-12-07 00:54:17 +00:00			`default-transition`

Improved video controls 2018-12-07 19:40:27 +00:00			`:hover`
			`opacity 1 !important`

Use a height buffer for video seek clicks 2018-12-08 00:12:50 +00:00			`.video-progress-clickable`
Added video progress bar 2018-12-07 20:19:50 +00:00			`flex 1`
Use a height buffer for video seek clicks 2018-12-08 00:12:50 +00:00			`padding video-progress-clickable-height-buffer 0`

			`.video-progress-container`
			`height video-progress-height`
Enabled seeking video position 2018-12-07 21:01:06 +00:00			`background rgba(255, 255, 255, 0.3)`
Added video progress bar 2018-12-07 20:19:50 +00:00			`border-radius ui-element-border-radius`
Some rendering optimizations 2018-12-07 23:06:31 +00:00			`transform translateZ(0)`
Added video progress bar 2018-12-07 20:19:50 +00:00			`overflow hidden`

Enabled seeking video position 2018-12-07 21:01:06 +00:00			`.video-progress`
Some rendering optimizations 2018-12-07 23:06:31 +00:00			`background white`
Added video progress bar 2018-12-07 20:19:50 +00:00			`width 100%`
Use a height buffer for video seek clicks 2018-12-08 00:12:50 +00:00			`height video-progress-height`
Added video progress bar 2018-12-07 20:19:50 +00:00			`transform scaleX(0)`
			`transform-origin 0`
Some rendering optimizations 2018-12-07 23:06:31 +00:00			`will-change transform`
Added video progress bar 2018-12-07 20:19:50 +00:00
			`.video-time`
Improved video controls 2018-12-07 19:40:27 +00:00			`color video-control-color`
Added video progress bar 2018-12-07 20:19:50 +00:00			`margin-left 0.5rem`
Improved video controls 2018-12-07 19:40:27 +00:00
Started using custom video controls 2018-12-07 00:54:17 +00:00			`.video-control`
Improved video controls 2018-12-07 19:40:27 +00:00			`background transparent !important`
			`color video-control-color`
Started using custom video controls 2018-12-07 00:54:17 +00:00			`border none`
Improved video controls 2018-12-07 19:40:27 +00:00			`line-height 1em`
			`height auto`
			`padding 0`
			`margin-left 0.5rem`

			`:hover`
			`color white`
Started using custom video controls 2018-12-07 00:54:17 +00:00
			`::-webkit-media-controls`
			`display none !important`