agenda-libre-ruby/public/webshims/shims/jme/controls.scss

/* thx to http://icomoon.io */
@import "_icons";
@font-face {
	font-family: 'jme';
	src: url('jme.eot');
}
@font-face {
	font-family: 'jme';
	src: url(data:application/font-woff;charset=utf-8;base64,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
	url('jme.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

%clearfix {
	zoom: 1;

	&:before,
	&:after {
		display: table;
		clear: both;
		content: ' ';
	}
}


$browser-context: 16; // Default

@function em($pixels, $context: $browser-context) {
	@return #{$pixels/$context}em
}

@-webkit-keyframes jmespin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

@keyframes jmespin {
	0% {
		-webkit-transform: rotate(0deg);
		transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
		transform: rotate(360deg);
	}
}


.jme-controlbar {
	display: table;
	width: 100%;
}

.jme-cb-box {
	display: table-row;
	> div {
		display: table-cell;
		padding: em(3.5);
		vertical-align: middle;
	}
	.progress-container {
		width: 100%;
	}
	.mute-container {
		padding-right: em(1);
	}
	.volume-container {
		padding-left: em(1);
	}
}

[data-playersizes~="xs"] > .jme-controlbar {
	padding-top: em(4);

	.time-slider {
		position: absolute;
		top: em(-2);
		left: 0;
		right: 0;
	}
	.progress-container {
		width: auto;

		&:before {
			content: "/";
		}
	}

	.duration-container {
		width: 100%;
	}
}

[data-playersize="xx-small"] > .jme-controlbar {
	.progress-container:before {
		content: "";
	}

	.duration-display,
	.volume-container {
		display: none;
	}
}

.mediaplayer {
	position: relative;
	display: block;
	width: 512px;
	font-size: 16px;

	video {
		display: block;
		width: 100%;
		height: auto;
	}
}


.audioplayer .media-controls .fullscreen-container {
	display: none;
}

.mediaplayer {


	button {
		overflow: visible;
		-webkit-appearance: none;
		background: none;
		padding: 0;
		border: 0;
		font-size: inherit;
		outline: none;
	}
	button::-moz-focus-inner {
		padding: 0;
		border: 0;
	}

	> .jme-media-overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		font-size: 400%;
		color: #f6f6f6;
		text-align: center;
		background: url(../styles/transparent.png)\9;


		&:before {
			content: '\0020';
			position: absolute;
			display: block;
			width: 1em;
			height: 1em;
			top: 50%;
			left: 50%;
			margin: -0.5em 0 0 -0.5em;
			background: url(../styles/transparent.png)\9;
			text-shadow: 0 0 0.5em rgba(0, 0, 0, 0.5);
		}
	}

	&[data-playersize="x-large"] > .jme-media-overlay {
		font-size: 550%;
	}

	&[data-playersize="large"] > .jme-media-overlay {
		font-size: 450%;
	}

	&[data-playersize="small"] > .jme-media-overlay {
		font-size: 350%;
	}


	&[data-playersize="x-small"] > .jme-media-overlay {
		font-size: 300%;
	}

	&[data-playersize="xx-small"] > .jme-media-overlay {
		font-size: 240%;
	}



	&[data-state="idle"] {
		cursor: pointer;
	}

	&.initial-state {
		> .jme-media-overlay {
			@extend %icon-play-circle;
			background-position: 1px 1px;
		}

		&.has-ytposter.no-backgroundsize > .jme-media-overlay:before {
			content: "";
			background-position: 2px 2px;
		}
	}

	&.ended-state {
		cursor: pointer;
		> .jme-media-overlay {
			@extend %icon-loop;
			background-position: 3px 3px;
		}
	}

	//remove as soon as possible: https://code.google.com/p/gdata-issues/issues/detail?id=5415
	&.yt-video.has-yt-bug.initial-state {
		> .jme-media-overlay,
		> .ws-poster,
		> .jme-controlbar {
			pointer-events: none;
		}

		.fullscreen-container,
		.playlist-container,
		.subtitle-container,
		.mediaconfig-container {
			pointer-events: auto;
		}
	}

	&[data-state="waiting"] {
		cursor: default;
		> .jme-media-overlay {
			@extend %icon-spinner;
			background-position: 4px 4px;

			&:before {
				-webkit-animation-name: jmespin;
				-webkit-animation-iteration-count: infinite;
				-webkit-animation-duration: 1100ms;
				-webkit-animation-timing-function: linear;

				animation-name: jmespin;
				animation-iteration-count: infinite;
				animation-duration: 1100ms;
				animation-timing-function: linear;
				background-position: 5px 5px;
			}
		}
	}

	&[data-state="playing"][data-useractivity="false"] .jme-controlbar {
		opacity: 0;
		visibility: hidden;
	}

	.cue-display span.cue-wrapper {
		transition: bottom 300ms;
		bottom: 0;
	}

	&[data-state="playing"][data-useractivity="false"] .cue-display span.cue-wrapper {
		bottom: -35px;
	}

	.ws-poster {
		display: none;
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: #000 no-repeat center;
		background-size: contain;
	}

	&.initial-state .ws-poster,
	&.ended-state .ws-poster {
		display: block;
	}

	&.no-poster .ws-poster,
	&.no-backgroundsize div.ws-poster {
		display: none;
	}

	> .jme-controlbar {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		width: auto;
		cursor: default;
		outline: none;
		background: #333;
		background: rgba(0, 0, 0, 0.6);
		color: #e1e1e1;
		transition: all 300ms;

		button {
			display: inline-block;
			color: inherit;
			width: em(24);
			height: em(24);
			cursor: pointer;
			text-align: center;
			transition: color 400ms;

			&:hover,
			&:focus {
				color: #fefefe;
			}

			&:active {
				color: #fff;
			}


			&[disabled] {
				color: #ccc;
				cursor: default;
				cursor: not-allowed;
			}
		}
	}


	.currenttime-display,
	.duration-display,
	.time-select {
		font-size: 81.3%;
		font-family: sans-serif;
		margin-top: 0.03em;
	}

	button.play-pause {
		@extend %icon-play;
		&.state-playing {
			@extend %icon-pause;
		}
	}

	.mute-unmute {
		@extend %icon-volume-high;
	}

	&[data-volume="medium"] .mute-unmute {
		@extend %icon-volume-medium;
	}

	&[data-volume="low"] .mute-unmute {
		@extend %icon-volume-low;
	}

	&[data-volume="no"] .mute-unmute {
		@extend %icon-volume-mute;
	}

	.state-unmute.mute-unmute  {
		@extend %icon-volume-mute2;
	}

	.playlist-container {
		display: none;
	}

	.playlist-box,
	.playlist-button-container,
	&.has-playlist .playlist-container {
		display: table-cell;
	}

	.playlist-prev {
		@extend %icon-previous;
	}

	.playlist-next {
		@extend %icon-next;
	}

	.no-volume-api {
		.volume-container,
		.mute-container {
			padding: 0;
		}

		.mute-unmute,
		.volume-slider {
			display: none;
		}
	}

	.chapters-container {
		display: none;
	}

	&.has-chapter-tracks .chapters-container {
		display: table-cell;
	}

	.captions {
		@extend %icon-cc;
	}

	.chapters {
		@extend %icon-olist;
	}

	.captions[role="checkbox"] {
		color: #999;

		&[aria-checked="true"] {
			color: inherit;
		}
	}

	&[data-tracks="0"] .subtitle-container {
		display: none;
	}

	&[data-tracks="1"] {
		.captions[aria-haspopup],
		.subtitle-menu {
			display: none;
		}
	}

	&[data-tracks="many"] .captions[role="checkbox"] {
		display: none;

	}

	.mediamenu-wrapper {
		position: relative;
		zoom: 1;
	}

	.mediamenu {
		position: absolute;
		bottom: em(28);
		margin-bottom: 3px;
		width: 400px;
		right: em(-10);
		visibility: hidden;



		h5 {
			font-size: 100%;
			margin: em(5) 0;
			padding: 0;
		}

		ul, li {margin: 0; padding: 0;list-style: none;}

		li > ul {
			margin-left: 10px;
		}

		button {
			position: relative;
			display: block;
			zoom: 1;
			width: 100%;
			text-align: left;
			height: auto;
			padding: 2px;
			font-size: 81.3%;
		}

		> div {
			position: relative;
			zoom: 1;
			visibility: hidden;
			float: right;
			padding: em(5);
			background: #333;
			background: rgba(0, 0, 0, 0.6);
			opacity: 0;
			transform: translateY(-3%);
			transition: all 200ms;

			> .media-submenu {
				margin: em(5) 0;
				padding: em(5) 0;
				border-top: em(1) solid #eee;
				border-top: em(1) solid rgba(255, 255, 255, 0.4);

				&:first-child {
					margin-top: 0;
					border-top: none;
				}
			}

			iframe {
				visibility: inherit !important;
			}
		}

		&.visible-menu > div {
			visibility: visible;
			opacity: 1;
			transform:  translateY(0);
		}
	}

	.subtitle-menu {
		button {
			@extend %icon-checkbox-unchecked;


			&:before {
				display: inline-block;
				vertical-align: middle;
				padding: 0 5px 0 0;
			}

			&[aria-checked="true"] {
				@extend %icon-checkbox-checked;
			}
		}
	}

	.mediaconfig-container {
		display: none;
	}

	&.has-config-menu .mediaconfig-container {
		display: table-cell;
	}

	.mediaconfigmenu {
		@extend %icon-config;
	}

	.fullscreen {
		@extend %icon-expand;

		&.state-exitfullscreen {
			@extend %icon-contract;
		}
	}

	.buffer-progress {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		overflow: hidden;
	}

	.buffer-progress-indicator {
		cursor: pointer;
		height: 100%;
		background: #bbb;
		background: rgba(255, 255, 255, 0.2);
	}

	.media-range {
		position: relative;
		zoom: 1;
		height: em(7);
		border: 1px solid #999;
		border-color: rgba(255, 255, 255, 0.4);
		outline: none;
	}

	.ws-range-progress,
	.ws-range-track,
	.ws-range-thumb,
	.time-select {
		position: absolute;
		display: block;
	}

	.time-select {
		display: inline-block;
		overflow: hidden;
		text-align: center;
		visibility: hidden;
		opacity: 0;
		transition: 400ms opacity, 400ms visibility;
		background: #333;
		background: rgba(0, 0, 0, 0.6);
		color: #eee;
		bottom: em(20);
		margin: 0 0 4px 0;
		padding: em(4) em(2) em(2);
		min-width: 2.8em;

		&.show-time-select {
			opacity: 1;
			visibility: visible;
		}
	}
/*
	.mediachapter-bar {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		padding: 0;
		margin: 0;
		list-style: none;

		ul, li {
			position: relative;
			padding: 0;
			margin: 0;
			height: 100%;
			float: left;
			list-style: none;
		}
		ul {
			width: 100%;
		}
		li {
			background: rgba(255, 255, 255, 0.2);
		}


		span {
			display: none;
		}
	}
*/
	.ws-range-track {
		top: 0;
		left: 0;
		bottom: 0;
	}

	.ws-range-progress {
		-moz-box-sizing: content-box;
		box-sizing: content-box;
		cursor: pointer;
		background: #e1e1e1;
		background: rgba(255, 255, 255, 0.3);
		left: 0;
		height: 100%;
	}

	.ws-range-thumb {
		cursor: pointer;
		width: em(9);
		height: em(9);
		background: #f1f1f1;
		background: rgba(255, 255, 255, 0.9);
	}

	[aria-disabled="true"] .ws-range-thumb {
		cursor: default;
	}

	.ws-focus .ws-range-thumb {
		background: #fff;
	}

	.time-slider {

		.ws-range-thumb {
			width: em(12);
		}
	}

	.volume-slider {
		width: 60px;
	}

	&[data-playersize="medium"] .volume-slider {
		width: 80px;
	}

	&[data-playersize="large"] .volume-slider {
		width: 110px;
	}


	&[data-playersize="x-large"] .volume-slider {
		width: 130px;
	}

	&.state-muted .volume-slider {
		.ws-range-progress {
			width: 0 !important;
		}

		.ws-range-thumb {
			left: 0 !important;
		}
	}

	.ws-a11y-focus {
		outline: 1px dotted #eee;
		outline: 1px dotted rgba(255, 255, 255, 0.8);

		&:hover {
			outline: none;
		}
	}
}


.has-media-fullscreen {
	overflow: hidden;
}

.player-fullscreen {
	position: fixed !important;
	z-index: 999999;
	background: #000;
}

.mediaplayer[data-useractivity="false"][data-state="playing"].player-fullscreen {
	&,
	.jme-media-overlay,
	.cue-display {
		cursor: none !important;
	}
}

.media-fullscreen,
.player-fullscreen .polyfill-mediaelement,
.player-fullscreen {
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	bottom: 0 !important;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.media-fullscreen {
	position: relative;
}