options.less

@import url(http://fonts.googleapis.com/css?family=Ubuntu+Mono);
@import url(http://fonts.googleapis.com/css?family=Open+Sans:400,600);
body {
	background-color: #F2F5F6;
	width: 960px;
	font-family: 'Open Sans', sans-serif;
	font-size: 12px;
	padding: 10px;
}

#header {
	.title {
		font-size: 14px;
		font-weight: 600;
	}
	
	.subtitle {
		font-size: 11px;
		font-weight: 600;
		margin-bottom: 0.5em;
	}
	
	.description {
		font-size: 11px;
		margin-bottom: 10px;
		
		.feat {margin-bottom: 0; }
		.feat_list {margin-top: 5px; }
		.debug {
			font-weight: 700;
			font-size: 24px;
		}
	}
	
	.add, .delete-all, .import, .export {
		margin: 4px 0px 4px 0px;
		display: block;
		padding: 4px;
		border-style: solid;
		border-width: 0 1px 1px 1px;
		border-color: #D9D9D9;
		background-color: #FFF;
		position: relative;
		border-top-width: 1px;
		-webkit-border-radius: 4px;
		text-align: center;
		cursor: pointer;
		
		label {
			cursor: pointer;
			font-size: 11px;
		}
	}
}

#content {
	&.empty {
		.empty-msg {
			padding-top: 100px;
			display: block;
			text-align: center;
			text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
			font-size: 16px;
		}
	}
	
	.empty-msg {
		display: none;
	}
	
	.row {
		border-style: solid;
		border-width: 1px;
		border-color: #D9D9D9;
		background-color: white;
		overflow: hidden;
		margin-bottom: 10px;
		-webkit-border-radius: 4px;
		
		div {
			position: relative;
		}
		
		&.template {
			display: none;
		}
		
		&:not(.template) {
			display: block;
		}
		
		.detail {
			width: 419px;
			float: left;
				
			.description, .url, .script, .style {
				padding: 4px;
				border-bottom: solid 1px #D9D9D9;
				border-right: solid 1px #D9D9D9;
				&:last-child {border-bottom: none; }
				
				label {
					top: 8px;
					left: 4px;
					color: #777;
					position: absolute;
					white-space: nowrap;
					cursor: text;
					text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
					-webkit-transition: opacity .4s, font-size .5s;
					
					&.hasome {
						opacity: 0;
						font-size: 0!important;
					}
				}
				
				input[type="text"] {
					border: 0;
					font-family: 'Open Sans', sans-serif;
					font-size: 12px;
					width: 100%;
				}
				
				textarea {
					border: 0;
					font-family: 'Ubuntu Mono', sans-serif;
					font-size: 12px;
					width: 100%;
					height: 96px;
				}
			}
		}
			
		.action {
			width: 99px;
			float: right;
			
			div {
				padding: 8px;			
				overflow: hidden;
				border-bottom: solid 1px #D9D9D9;
				&:last-child {border-bottom: none; }
				
				&.save, &.delete {
					text-align: center;
					background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0,#E0EFD3),color-stop(1,#EFF8E6));
					font-size: 16px;
					font-weight: 600;
					text-shadow: #EDF6E5 1px 1px 0;
					cursor: pointer;
					font-size: 11px;
					label {cursor: pointer; }
					
					&:hover {
						background-image: -webkit-gradient(linear,left bottom,left top,color-stop(1,#E0EFD3),color-stop(0,#EFF8E6));
					}
				}
				
				&.autorun, &.jquery, &.regex, &.autorun, &.less {
					text-align: center;
					font-size: 11px;
					padding-bottom: 7px;
					
					input[type="checkbox"] {
						float: right;
					}				
				}
			}
		}
		
		.status {
			float: left;
			width: 100%;
			padding: 0px 4px 0px 4px;
			border-top: solid 1px #D9D9D9;
			font-size: 11px;
			display: none;
			
			&.unsaved {
				background-color: #FF0000;
			}
		}
	}
}