slideshow-generator/src/styles/Slide.less

Slideshow generator

.animation(@duration:300ms) {
  animation: animation @duration linear both;
}
@keyframes animation {
  0%			{ 	transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  4.2%		{ 	transform: matrix3d(0.923, 0, 0, 0, 0, 0.923, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  8.34%		{ 	transform: matrix3d(0.876, 0, 0, 0, 0, 0.876, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  12.55%	{ 	transform: matrix3d(0.846, 0, 0, 0, 0, 0.846, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  16.68%	{ 	transform: matrix3d(0.828, 0, 0, 0, 0, 0.828, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  25.03%	{ 	transform: matrix3d(0.81, 0, 0, 0, 0, 0.81, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.23%	{ 	transform: matrix3d(0.803, 0, 0, 0, 0, 0.803, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.33%	{ 	transform: matrix3d(0.803, 0, 0, 0, 0, 0.803, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  33.37%	{ 	transform: matrix3d(0.804, 0, 0, 0, 0, 0.804, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  37.54%	{ 	transform: matrix3d(0.879, 0, 0, 0, 0, 0.879, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  41.68%	{ 	transform: matrix3d(0.925, 0, 0, 0, 0, 0.925, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  45.88%	{ 	transform: matrix3d(0.955, 0, 0, 0, 0, 0.955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50.02%	{ 	transform: matrix3d(0.973, 0, 0, 0, 0, 0.973, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  50.05%	{ 	transform: matrix3d(0.973, 0, 0, 0, 0, 0.973, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  58.36%	{ 	transform: matrix3d(0.99, 0, 0, 0, 0, 0.99, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.67%	{ 	transform: matrix3d(0.997, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  66.7%		{ 	transform: matrix3d(0.997, 0, 0, 0, 0, 0.997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  83.38%	{ 	transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
  100%		{ 	transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); } 
}

@duration:300ms;

.slide-component {
	font-size:28px;
	@media(max-width:840px) {
		font-size:18px;
	}
	@media(max-width:640px) {
		font-size:15px;
	}
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	color:white;
	background:#424242;
	//&:after {
	//	display:block;
	//	content:'';
	//	position:absolute;
	//	top:0;
	//	left:0;
	//	right:0;
	//	bottom:0;
	//	z-index:1;
	//}
	.slide-container {
		width:100%;
		height:100%;
		transform-origin:0 0;
		position:relative;
	}
	&.transition {
		.slide-container {
			transition:transform @duration ease-in-out;
		}
	}
	.slide-footer {
		position:absolute;
		left:0;
		right:0;
		bottom:0;
		text-align:center;
		a {
			color:white;
			text-decoration:none;
		}
		font-size:40%;
		@media(max-width:840px) {
			font-size:60%;
		}
		@media(max-width:640px) {
			font-size:80%;
		}
		line-height:2em/0.4;
		.slide-title {
			display:inline;
			margin-right:1em;
		}
		.slide-bar {
			position:fixed;
			left:0;
			right:0;
			bottom:0;
			height:4px;
			background:black;
			.slide-progress {
				background:white;
				display:block;
				transition:width 0.2s ease-in-out;
			}
		}
	}
}