_video.scss

.o_video_poster {
	position: relative;
	display: inline-block;
	width: 400px;
	max-width: 100%;
	height: 225px;
	background-size: cover;
	background-repeat: no-repeat;
	border: 1px solid #eee;	
}

.o_video_poster_select {
	text-align: center;
	
	.o_video_poster {
		margin: 5px;
		
		a {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			
			span {
				position: absolute;
				bottom: 0;
				width: 100%;
				display: block;
				line-height: 3em;
				background: #f8f8f8;
				opacity: 0.8;
			}
			&:hover {
				border: 1px solid #bbb;
				span {
					opacity: 0.9;			
				}
			}
		}			
	}
}

.o_video_peekview {
	text-align: center;
}

.o_video_listing {
	
	.o_table_body.container-fluid {
		padding-right: 0px;
		padding-left: 0px;
	}
	
	.o_video_entry {
		position: relative;
		display: inline-block;
		height: 230px;			
		width: 250px;
		vertical-align: top;
		margin-right: 10px;
	}
	.o_video_poster {
		width: 250px;
		max-width: 100%;
		height: 140px;	
		border: 1px solid #eee;
	}
	.o_timecode {
		position: absolute;
		bottom: 2px;
		right: 3px;
		padding: 3px 4px;
		background: #333;
		color: #fff;
		font-size: $font-size-small;
		line-height: $font-size-small;
	}
	.o_meta {
		padding: 2px;
		font-size: ceil(($font-size-base * 0.75));
		h5 {
			font-size: $font-size-base;
			margin-top: 0;
			margin-bottom: 5px;
			max-width: 100%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}	
	.o_date {
		margin-left: 10px;
		display: inline-block;
		&:before {
			content: '\002022';
			margin-right: 10px;
			display: inline-block;
		}	
	}
}

.o_video_run {
	h1 {
		// same as youtube
		font-size: 1.8rem;
		font-weight: normal;
	}
	.o_author {
		margin-top: 0.5em;
		margin-bottom: 1em;
		line-height: normal;
		font-size: 90%;
		color: $o-coursesite-meta-author-color;
	}		
	
	.o_ratings_and_comments {
		margin-top: 2em;
		border-top: 1px solid #eee;
		padding-top: 1em;
	}
}

.o_video_chapter_editor, .o_video_marker_editor  {
	.o_table_wrapper.o_table_flexi .table {
		margin-top: 0;
	}
}

.o_video_marker_editor .o_video_question.mejs__overlay {
	overflow: scroll;
}

.o_video_question.mejs__overlay.o_video_large_question {
	align-items: flex-start;
	padding: 1em 1em 0 1em;
	z-index: 5;
	
	#o_qti_container {
		border: 1px solid $gray-lighter;
	}
}

.o_video_marker {
	position: absolute;
	background-color: $o-video-marker-bg-color;
	opacity: 0.85;
	border-left: 3px solid $o-video-time-marker-default-bg-color;
	padding: 5px;
	
	&.o_video_marker_gray { 
		border-left-color: $gray-dark;
	}
	&.o_video_marker_blue { 
		border-left-color: $state-info-border;
	}
	&.o_video_marker_green { 
		border-left-color: $brand-success;
	}
	&.o_video_marker_yellow { 
		border-left-color: $brand-warning;
	}
	&.o_video_marker_red {
		border-left-color: $brand-danger;
	}
}

.o_video_question {

	&.mejs__overlay {
		width: 100%;
		height: 100%;
		background-color: rgba(255,255,255,0.5);
	}

	#itemBody, .modalFeedback {
		background-color: white;
		opacity: 1.0;
	}
	
	.o_assessmentitem_wrapper .o_qti_item_body {
		min-height: 50px;
	}
	
	#o_qti_assessment_test_timer {
		border: none;
		padding: 5px;
		margin: 0;
	}
	
	#o_qti_progress .progress {
		height: 10px;
	}
	
	#o_qti_container {
		background-color: white;
		padding: 5px;
		border-radius: $border-radius-small;
	}
	
	.o_sel_additional_feedback {
		float: left;
		font-size: 26px;
		
		.o_icon_passed {
			color: $brand-success;
		}
		.o_icon_failed {
			color: $brand-danger;
		}
	}
}

.mejs__time-rail {
	.o_video_marker_gray { 
		background: $gray-dark;
	}
	.o_video_marker_blue { 
		background: $state-info-border;
	}
	.o_video_marker_green { 
		background: $brand-success;
	}
	.o_video_marker_yellow { 
		background: $brand-warning;
	}
	.o_video_marker_red {
		background: $brand-danger;
	}
}

/* beautify source chooser plugin, remove radio button */
.mejs__controls .mejs__sourcechooser-button > button {
    background: transparent;
    display: inline-block;
	font: normal normal normal #{$fa-font-size-base}/1 FontAwesome; // shortening font declaration
	font-size: inherit; // can't have font-size inherit on line above, so need to override
	text-rendering: auto; // optimizelegibility throws things off #1094
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: translate(0, 0); // ensures no half-pixel rendering in firefox
}
.mejs__controls .mejs__sourcechooser-button > button:before {
    content: $fa-var-gear;
    color: white;
    font-size: 18px;
}
.mejs__controls .mejs__sourcechooser-button .mejs__sourcechooser-selector {
	visibility: visible !important;
	width: 170px;
	padding-left: 10px;
	
	ul li {
		label {
			font-weight: normal;
			font-size: 10px;
			
			width: 140px;
			&:hover {
				color: #eee;
			}
			.type {
				display: none;
			}
		}
		input {
			/* hide ugly input radio button */
			visibility: hidden;
			margin: 0;
			width: 0;
			&:checked+label {
				color: $brand-danger;
			}
		}
	}	
}

/* beautify track plugin, remove radio button */
.mejs__controls .mejs__captions-button .mejs__captions-selector {
	right: -26px;
	ul li {
		label {
			font-weight: normal;
			font-size: 10px;
			
			&:hover {
				color: #eee;
			}
			.type {
				display: none;
			}
		}
		input {
			/* hide ugly input radio button */
			visibility: hidden;
			margin: 0;
			width: 0;
			&:checked+label {
				color: $brand-danger;
			}
		}
	}	
}

/* beautify speed plugin */
.mejs__button.mejs__speed-button {
	width: 36px;
}
.mejs__controls .mejs__speed-button > button {
    background: transparent;
    width: 36px;
    margin: 11px 0 0 0;
    font-size: 11px;
    line-height: normal;
    color: #ffffff;
}

.mejs__controls .mejs__speed-button .mejs__speed-selector {
	height: 150px;
	top: auto;
	bottom: 40px;
	
	ul li {
		label {
			font-weight: normal;
			font-size: 10px
		}
	}
}

/* fix overflow of chapters when not enough space */
.mejs__chapters .mejs__chapter .mejs__chapter-block {
	.ch-title,
	.ch-time {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: block;
	}
}

.mejs__time-marker {
	background-color: $o-video-time-marker-default-bg-color;
}