@import "config.less";

@unit_base_multimediaview : @unit_base * 0.5;

.ui-multimediaview {
	background-color : @color_multimediaview_bg;
	overflow : hidden;
}

.ui-multimediaview-wrap {
	width : 100%;
	padding : 0;
	position : relative;
}

.ui-multimediaview-fullscreen {
	position : absolute !important;
	z-index : @z_base_header_footer + 1;
}

.ui-multimediaview-siblings-off {
	display : none !important;
}

.ui-multimediaview-control span {
	display : inline-block;
}

.ui-multimediaview-video {
	position : absolute;
}

.ui-multimediaview-control {
	display : block;
	z-index : @z_base_header_footer + 2;
	padding : 0;
	margin : 0;
	outline : 0;
	border : 0;
	height : 84 * @unit_base_multimediaview;
	text-align: left;
	overflow: hidden;
}

.ui-multimediaview-control span.ui-button {
	background-position : center center;
	background-size : 80%;
	background-repeat : no-repeat;
	width : 74 * @unit_base_multimediaview;
	height : 74 * @unit_base_multimediaview;
	margin : 4 * @unit_base_multimediaview;
}

.ui-multimediaview-control .ui-playpausebutton {
	float : left;
}

.ui-multimediaview-control .ui-timestamplabel {
	text-align : center;
	float : left;
}

.ui-multimediaview-control .ui-timestamplabel p {
	margin-top : -9.8 * @unit_base_multimediaview;
	margin-left : 4 * @unit_base_multimediaview;
	padding : 0;
	text-align : center;
	font-size : 22 * @unit_base_multimediaview;
	line-height : 28 * @unit_base_multimediaview;
	text-align : left;
}

.ui-multimediaview-control .ui-durationlabel {
	text-align : center;
	float : right;
}

.ui-multimediaview-control .ui-durationlabel p {
	margin-top : -9.8 * @unit_base_multimediaview;
	margin-right : 4 * @unit_base_multimediaview;
	padding : 0;
	text-align : center;
	font-size : 22 * @unit_base_multimediaview;
	line-height : 28 * @unit_base_multimediaview;
	text-align : right;
}

.ui-multimediaview-bar {
	margin-top : 9.8 * @unit_base_multimediaview;
	float : left;
}

.ui-multimediaview-bar-bg {
	height : 16 * @unit_base_multimediaview;
	border-radius : 1.5em;
}

.ui-multimediaview-bar-highlight {
	height : 16 * @unit_base_multimediaview;
	position : absolute;
	border-radius : 1.5em;
}

.ui-multimediaview-control .ui-seekbar {
	margin-left : 4 * @unit_base_multimediaview;
}

.ui-multimediaview-control .ui-seekbar .ui-duration {
	width : 100%;
}

.ui-multimediaview-control .ui-volumecontrol {
	width : 220 * @unit_base_multimediaview;
	height : 100%;
	float : left;
}

.ui-multimediaview-control .ui-volumecontrol .ui-volumebar {
	margin-left : 30 * @unit_base_multimediaview;
}

.ui-multimediaview-control .ui-volumecontrol .ui-volumebar .ui-guide {
	width : 170 * @unit_base_multimediaview;
}

.ui-multimediaview-control .ui-volumecontrol .ui-volumebar .ui-handle {
	margin : 0;
	padding : 0;
	width : 30 * @unit_base_multimediaview;
	height : 30 * @unit_base_multimediaview;
	border-style: solid;
	border-width: 1px;
	border-radius : 1.5em;
}

.ui-fullscreen-parents {
	padding: 0 !important;
	margin: 0 !important;
	width: 100% !important;
	height: 100% !important;
}

/* S
-----------------------------------------------------------------------------------------------------------*/

.ui-multimediaview-s {
	.ui-multimediaview-video {
		background-color : @color_multimediaview_control_bg;
	}

	.ui-timestamplabel {
		color : @color_multimediaview_timestamp_text;
	}

	.ui-durationlabel {
		color : @color_multimediaview_duration_text;
	}

	span.ui-button {
		background-color : @color_multimediaview_button_bg;
	}

	span.ui-play-icon {
		background-image : url(./images/00_button_play.png);
	}

	span.ui-pause-icon {
		background-image : url(./images/00_button_pause.png);
	}

	span.ui-volume-icon {
		background-image : url(./images/controls/00_slider_button_volume_02.png);
	}

	span.ui-mute-icon {
		background-image : url(./images/controls/00_slider_button_volume_01.png);
	}

	span.ui-fullscreen-on {
		background-image : url(./images/00_button_fullscreen_on.png);
	}

	span.ui-fullscreen-off {
		background-image : url(./images/00_button_fullscreen_off.png);
	}

	.ui-seekbar {
		.ui-duration {
			background-color : @color_multimediaview_bar_gray;
		}

		.ui-currenttime {
			.LESSmultimediaview_bar_active_style();
		}
	}

	.ui-volumebar {
		.ui-guide {
			background-color : @color_multimediaview_bar_gray;
		}

		.ui-value {
			.LESSmultimediaview_bar_active_style();
		}

		.ui-handle {
			.LESSmultimediaview_bar_handle_style();
			border-color : @color_multimediaview_button_border;
		}
	}
}