style.scss

$topheight: 35em;

@mixin gradient($start, $end){
	background-image: -webkit-linear-gradient(top, $start, $end);
	background-image: -moz-linear-gradient(top, $start, $end);
	background-image: -ms-linear-gradient(top, $start, $end);
	background-image: -o-linear-gradient(top, $start, $end);
	background-image: linear-gradient(top, $start, $end);
}

@mixin transition-duration($duration){
	-webkit-transition-duration: $duration;
	-moz-transition-duration: $duration;
	-ms-transition-duration: $duration;
	-o-transition-duration: $duration;
	transition-duration: $duration;
}

@mixin transition-ease($ease){
	-webkit-transition-timing-function: $ease;
}

@mixin transform($transform){
	-webkit-transform: $transform;
	-moz-transform: $transform;
	-ms-transform: $transform;
	-o-transform: $transform;
	transform: $transform;

	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-ms-transform-style: preserve-3d;
	-o-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

@mixin hide-backface(){
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	-o-backface-visibility: hidden;
	backface-visibility: hidden;
}

@mixin perspective($per){
	-webkit-perspective: $per;
	-moz-perspective: $per;
	-ms-perspective: $per;
	-o-perspective: $per;
	perspective: $per;
}

@mixin animation($ani){
	-webkit-animation-name: $ani;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-fill-mode: backwards;

	-moz-animation-name: $ani;
	-moz-animation-duration: 0.5s;
	-moz-animation-fill-mode: backwards;

	-ms-animation-name: $ani;
	-ms-animation-duration: 0.5s;
	-ms-animation-fill-mode: backwards;

	-o-animation-name: $ani;
	-o-animation-duration: 0.5s;
	-o-animation-fill-mode: backwards;

	animation-name: $ani;
	animation-duration: 0.5s;
	animation-fill-mode: backwards;
}

@mixin keyframes($name) {
    @-webkit-keyframes #{$name} { @content; }
    @-moz-keyframes #{$name} { @content; }
    @-ms-keyframes #{$name} { @content; }
    @-o-keyframes #{$name} { @content; }
    @keyframes #{$name} { @content; }
}

@include keyframes(slide-in){
	0%{
		@include transform(translate3d(-100%, 0, 0));
		margin-bottom: -2.5em;
	}

	25%{
		margin-bottom: 0;
		@include transform(translate3d(-100%, 0, 0));
		opacity: 0;
	}

	100%{
		@include transform(translate3d(0, 0, 0));
		opacity: 1;
	}
}

@include keyframes(slide-out){
	0%{
		@include transform(translate3d(0, 0, 0));
		opacity: 1;
	}

	75%{
		margin-bottom: 0;
		@include transform(translate3d(-100%, 0, 0));
		opacity: 0;
	}

	100%{
		@include transform(translate3d(-100%, 0, 0));
		margin-bottom: -2.5em;
	}
}



html{
	height: 100%;
}

body{
	margin: 0;
	padding: 0;
	box-shadow: inset 0 0 10px black;
	height: 100%;
	padding-bottom: $topheight;
	background: #777;
	-webkit-tap-highlight-color: transparent;
	font-family: sans-serif;
}

#youtube-container{
	display: block;
	height: 300px;
}

#alarm-list{
	padding: 0;
	margin: 0;

	&>li{
		box-shadow: 0 0 4px black;
		display: block;
		margin: 0;
		padding: 1em 0.5em;
		font-size: 1.5em;
		list-style: none;
		@include gradient(#bbb, #777);
		@include transition-duration(0.2s);
		@include transform(translateZ(0));
		@include animation(slide-in);
		//@include perspective(1000px);
		position: relative;
		text-shadow: 0 1px rgba(255,255,255,0.3), 0 -1px rgba(0,0,0,0.5);
		color: #333;

		.progress{
			display: block;
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			background: rgba(red, 0.1);
			@include transition-duration(1s);
			@include transition-ease(linear);
		}

		&:last-child{
			box-shadow: 0 5px 10px black;
		}

		input[type='text']{
			cursor: pointer;
			background: transparent;
			border: none;
			display: inline-block;
			font-size: 1em;
			padding: 0;
			margin: 0;
			max-width: 40%;
			min-width: 1em;
			width: auto;

			&:focus{
				background-color: rgba(white, 0.5);
				border: 1px solid;
			}

			&:disabled{
				color: black;
				opacity: 1;
				text-shadow: 0 1px 1px rgba(white, 0.4), 0 -1px 1px black;
			}
		}

		span[contentEditable]{
			cursor: pointer;
		}

		.right-container{
			position: absolute;
			right: 1em;
			top: 0;
			bottom: 0;
			padding: 0;

			&:before{
				height: 100%;
				content: '';
				display: inline-block;
				vertical-align: middle;
			}

			&>*{
				height: 1.5em;
				display: inline-block;
				vertical-align: middle;
			}

			.checkbox, button{
				font-size: 1em;
				height: 1.5em;
				border: none;
				margin: 0;
			}

			button{
				@include gradient(#d12, #a12);
				color: white;
				text-shadow: 0 -1px black;
				cursor: pointer;
				box-shadow: 0 0 3px black;
				position: relative;
				padding: 0.1em 0.3em;

				&:active{
					box-shadow: inset 0 -1px 2px rgba(white,0.2);
					top: 1px;
				}
			}

			.checkbox{
				background: #ddd;
				box-shadow: inset 0 0 5px black, 0 1px 1px white;
				width: 1.5em;
				border-radius: 1000px;
				position: relative;

				&.disabled{
					opacity: 0.4;
				}

				&.checked:after{
					content: '';
					position: absolute;
					top: 3px;
					bottom: 3px;
					left: 3px;
					right: 3px;
					background: #f12;
					border-radius: 1000px;
					box-shadow: 0 0 5px black, inset 0 1px 1px rgba(255,255,255,0.5), 0 0 15px white;
					@include gradient(#f66, #a12);
				}
			}
		}

		.rotatable{
			background: rgba(black, 0.3);
			box-shadow: inset 0 0 30px black;
			margin-right: 10px;
			@include perspective(200px);
			.rotate-area{
				position: relative;
				@include transition-duration(0.4s);
				@include transform(rotateX(180deg));

				&>*:not(.back){
					@include hide-backface();
				}

				.back{
					@include transform(rotateX(180deg));
					position: absolute;
					@include gradient(#aaa, #888);
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
					@include hide-backface();
				}
			}
		}

		&:not(.mobile):hover, &.tapped{
			@include gradient(#888, #555);

			.rotate-area{
				@include transform(rotateX(0deg));
			}
		};


	}
}

#top-area{
	height: $topheight;
	margin-top: -$topheight;
	padding: 1em;
	box-sizing: border-box;
	position: relative;
	@include transition-duration(0.3s);
	text-shadow: 0 1px 1px rgba(white, 0.4), 0 -1px 1px rgba(black, 0.4);

	&.shown{
		margin-top: 0;
	}

	.top-button{
		border: 1px solid black;
		border-top: none;
		@include gradient(#aaa, #777);
		color: #222;
		text-shadow: 0 1px 1px rgba(white,0.3), 0 -1px 1px rgba(black,0.6);
		font-size: 1em;
		height: 1.5em;
		line-height: 1.5em;
		width: 6em;
		margin: 0 auto;
		display: block;
		z-index: 2;
		text-align: center;
		position: absolute;
		bottom: -1.5em;
		left: 50%;
		margin-left: -3em;
		box-shadow: 0 0 3px black;

		&:hover{
			@include gradient(#eee, #aaa);
		}

		&:active{
			@include gradient(#888, #999);
			box-shadow: none;
		}
	}
}