@import url(http://fonts.googleapis.com/css?family=Open+Sans);

@sidebar-width:  300px;
@sidebar-padding: 30px;

@sidebar-color: #222;
@button-color: #fd3;
@header-color: #ddd;

@button-width: @sidebar-width - (2 * @sidebar-padding);
@button-height: 42px;
@button-border-radius: 10px;
@button-border-width: 1px;

@button-changes-duration: 0.5s;

@content-padding: 20px;
.content() {
	font-family: Consolas, Monaco, Menlo, "DejaVu Sans Mono", "Lucida Console", monospace;
	font-size: 15px;
}
@content-color: #2d2d2d;
@content-background-color: #f4f4f4;

@link-color: #ccc;

@bar-height: 50px;
@bar-margin: 10px;
@bar-button-width: 120px;
@bar-button-height: @bar-height - @bar-margin;

* {
	box-sizing: border-box;
}

html {
	height: 100%;
	overflow: hidden;
}

body {
	width: @sidebar-width;
	height: 100%;
	margin: 0;
	
	background: @sidebar-color;
	color: #bbb;
	font-family: "Open Sans", sans-serif;
	line-height: 1.5em;
	font-size: 14px;
	> div {
		padding: @sidebar-padding;
	}
}
::selection {
	background: @button-color;
	color: @sidebar-color;
}
::-moz-selection {
	background: @button-color;
	color: @sidebar-color;
}

h1 {
	font-weight: normal;
	margin: 0;
	color: @header-color;
	word-wrap: break-word;
	line-height: 1em;
	z-index: 10;
}
h2 {
	margin: 0;
	font-size: 20px;
	font-weight: normal;
	color: @header-color;
}
p, ul {
	&:first-child {
		margin-top: 0;
	}
	&:last-child {
		margin-bottom: 0;
	}
}

#header {
	#button-container {
		position: relative;
		input {
			-webkit-appearance: none;
			display: block;
			border: 0;
			width:  @button-width;
			height: @button-height;
			padding: 10px; margin: 0;
			border-radius: @button-border-radius;
			font: inherit;
			
			background: @button-color;
			outline: none;
			cursor: pointer;
			font-weight: normal;
			&:hover {
				background: lighten(@button-color, 10%);
			}
			&:active {
				background: darken(@button-color, 5%);
			}
			&[disabled] {
			}
		}
		// Button text
		&::before {
			box-sizing: border-box;
			display: block;
			position: absolute;
			left: 0;
			bottom: 11px;
			width:  @button-width;
			
			content: attr(text);
			color: @sidebar-color;
			text-align: center;
			pointer-events: none;
			z-index: 1;
			transition-duration: @button-changes-duration;
			transition-timing-function: cubic-bezier(1,0,0,1);
		}
		// Gray cover
		&::after {
			box-sizing: border-box;
			display: block;
			position: absolute;
			left:   @button-height / 2;
			bottom: @button-height / 2;
			width:  @button-width - @button-height;
			height: 0;
			border-radius: 0;
			
			content: "";
			background: @sidebar-color;
			pointer-events: none;
			transition-duration: @button-changes-duration;
		}
		&.saving {
			pointer-events: none;
			input {
				background-image: url("/edit-res/uploading.gif");
				-webkit-animation: background-move 1.5s linear infinite;
				@-webkit-keyframes background-move {
					0% {
						background-position: 0 0;
					}
					100% {
						background-position: 200px -133px;
					}
				}
			}
		}
		&.saved {
			pointer-events: none;
			&::before {
				color: @button-color;
			}
			&::after {
				left:   @button-border-width;
				bottom: @button-border-width;
				width:  @button-width  - 2 * @button-border-width;
				height: @button-height - 2 * @button-border-width;
				border-radius: @button-border-radius - @button-border-width;
			}
		}
	}
	
	#saved {
		width: 100%;
		text-align: center;
		padding: 15px 5px 5px 5px;
		border-radius: 0 0 10px 10px;
		position: relative;
		top: -10px;
		z-index: -1;
		overflow: hidden;
		
		background: lighten(@sidebar-color, 10%);

		-webkit-animation-delay: 1s;
		-webkit-animation-name: disappear;
		-webkit-animation-duration: 1s;
		-webkit-animation-fill-mode: both;
		@-webkit-keyframes disappear {
		  from {
		    height: 41px;
			padding: 15px 5px 5px 5px;
		  }

		  to {
		    height: 0;
			padding: 0 5px 5px 5px;
		  }
		}
	}


	#text {
		// z-index: -1;
		position: absolute;
		left: 0; top: 0;
		padding-left: @sidebar-width;
		width: 100%; height: 100%;
		line-height: 0;
		overflow: hidden;

		textarea {
			border: none; margin: 0; outline: none;
			width: 100%; height: 100%;
			border-radius: 0;
			
			resize: none;
			padding: @content-padding;
			background: @content-background-color;
			color: @content-color;
			.content();
			transition: 0.5s;
		}
		div {
			height: 50%;
			margin: 0;
			padding: @content-padding;
			line-height: normal;
			overflow: auto;
			
			color: darken(@content-color, 20%);
			background: darken(@content-background-color, 20%);
			h2 {
				color: inherit;
			}
			p {
				margin-bottom: 24px;
			}
		}
		&.conflict-message {
			textarea {
				height: 50%;
			}
		}
	}
}

#info {
	padding-top: 0;
	dl {
		margin: 10px 0 0 0;
		dt {
			float: left;
			text-transform: uppercase;
			color: #777;
		}
		dd {
			text-align: right;
			margin-bottom: 5px;
			i {
				line-height: 1em;
				display: block;
				font-style: normal;
				color: #999;
			}
		}
	}
}

#message {
	background: lighten(@sidebar-color, 5%);
	color: lighten(@header-color, 0%);
	ul {
		padding-left: 20px;
	}
}

#footer {
	position: absolute;
	left: 0; bottom: 0;
	width: @sidebar-width;
	p {
		color: #999;
	}
	a {
		margin-left: 20px;
		display: block;
		text-decoration: none;
		position: relative;
		color: @link-color;
		border-color: @link-color;
		margin-bottom: 10px;
		
		&:before {
			content: "";
			display: block;
			position: absolute;
			left: -20px; top: 4px;
			width: 12px; height: 12px;
			border-width: 0 0 1px 1px;
			border-style: solid;
			transform: rotate(45deg);
		}
		&.raw {
			&:before {
				content: none;
			}
		}
		&.backlink {
			margin-bottom: 0;
			color: darken(@link-color, 20%);
			border-color: darken(@link-color, 20%);
		}
	}
}

@media only screen and (max-width: 700px){
	body {
		width: 100%;
		padding: 0;
	}
	#info, #message, #footer {
		display: none;
	}
	#header {
		height: @bar-height;
		padding: 0;
		h1 {
			position: absolute;
			left: 0; top: 0;
			height: @bar-height;
			padding: @bar-margin;
		}
		form {
			float: right;
			height: @bar-height;
			padding: @bar-margin / 2;
			#button-container {
				input {
					width: @bar-button-width;
					height: @bar-button-height;
				}
				&::before {
					width: @bar-button-width;
				}
				&::after {
					left: @bar-button-height / 2;
					top: @bar-button-height / 2;
					width: @bar-button-width - @bar-button-height;
					height: 0;
				}
				&.saved {
					&::after {
						left: @button-border-width;
						top: @button-border-width;
						width: @bar-button-width - 2 * @button-border-width;
						height: @bar-button-height - 2 * @button-border-width;
					}
				}
			}
		}
		p {
			display: none;
		}
		#text {
			padding-top: @bar-height;
			padding-left: 0;
			width: 100%;
		}
	}
}