slideshow-generator/src/styles/App.less

Slideshow generator

html {
	height:100%;
}
body {
	height:100%;
	color: black;
	background: gray;
	font-family:sans-serif;
	letter-spacing:0.02em;
	* {
		user-select:none;
		-webkit-user-select:none;
	}
}
#app {
	position:absolute;
	top:0;
	left:0;
	right:0;
	min-height:100%;
}
.app-component {
	&.fullscreen {
		cursor:none;
	}
}
.app-input {
	position:fixed;
	top:0;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	justify-content:center;
	align-items:center;
	.app-input-container {
		width:80%;
		max-width:240px;
		input {
			border-radius:2px;
			background:white;
			outline:none;
			box-sizing:border-box;
			border:0;
			padding:10px;
			width:100%;
			font-family:monospace;
			font-size:24px;
		}
	}
}
.app-fullscreen {
	cursor:pointer;
	width:32px;
	height:32px;
	position:fixed;
	bottom:6px;
	right:6px;
	background:data-uri('./res/ic_fullscreen_white_24px.svg') center center no-repeat;
	z-index:10;
}
.app-start {
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	z-index:10;
	display:flex;
	justify-content:center;
	align-items:center;
	background:#424242;
	color:white;
	.app-start-button {
		min-width:200px;
		position:relative;
		&:before {
			display:block;
			content:'START ';
			font-weight:normal;
			font-size:80%;
			margin-bottom:1em;
		}
		&:after {
			content:'';
			display:block;
			position:absolute;
			top:0;
			left:0;
			right:0;
			bottom:0;
		}
		font-weight:bold;
		cursor:pointer;
		padding:20px;
		background:lighten(#424242,10%);
		border-radius:3px;
		&:hover {
			background:lighten(#424242,15%);
		}
	}
}