styles/video.scarlet

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

	:fullscreen
		padding-bottom 0
		height 100%

	: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
Using constants for most CSS variables now 2018-03-18 18:09:58 +00:00			`const video-padding = 56.25%`
Use link-color for the progress bar 2018-12-09 04:53:46 +00:00			`const video-control-color = rgba(255, 255, 255, 0.85)`
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
Don't use forced video ratio on fullscreen 2019-03-04 11:26:25 +00:00			`:fullscreen`
			`padding-bottom 0`
			`height 100%`

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`
Minor changes 2018-12-08 02:05:15 +00:00			`horizontal`
			`align-items center`
Started using custom video controls 2018-12-07 00:54:17 +00:00			`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%`
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`

Hide cursor when hiding controls 2018-12-08 06:01:07 +00:00			`:hover`
			`cursor pointer`

Use a height buffer for video seek clicks 2018-12-08 00:12:50 +00:00			`.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`
Use link-color for the progress bar 2018-12-09 04:53:46 +00:00			`background link-color`
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`

			`:hover`
			`color white`
Started using custom video controls 2018-12-07 00:54:17 +00:00
Added play and pause button 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`

Added subtitles to the stream test 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`
Episode page improvements 2018-12-10 04:42:29 +00:00			`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`
Added subtitles to the stream test 2018-12-09 04:36:01 +00:00
Started using custom video controls 2018-12-07 00:54:17 +00:00			`::-webkit-media-controls`
			`display none !important`