spot/style/spot.scss

@CHARSET "UTF-8";

@import 'fa';
@import 'lightbox';
@import 'simplebar';
@import 'leaflet';
@import 'common';

#map {
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 100%;
	background: #EEE;
	
	.loader {
		position: absolute;
		font-size: 3em;
		width: 1em;
		height: 1em;
		top: calc(50% - 0.5em);
		left: calc(50% - 0.5em);
		color: #666;
		@extend .flicker;
	}

	.track_tooltip {
		p {
			margin: 0;
			
			&.name {
				font-weight: bold;
			}
			&.description {
				font-style: italic;
			}
		}
	}

	#legend, .leaflet-control-layers.leaflet-control {
		background-color: rgba(255, 255, 255, 0.5);
		font-family: Roboto, Arial, sans-serif;
		border-radius: 3px;
		border: none;
		margin: 1em;
	}
	#legend {
		right: 30vw;
					
		.line {
			display: inline-block;
			border-left: 2em solid;
			line-height: 2px;
			padding-left: 0.5em;
			margin: 1em;
			font-size: 1em;
			color: #222;
			
			&.te_araroa {
				border-color: #00ff78;
			}
			
			&.routeburn {
				border-color: #0000ff;
			}
			&.hitchhiking {
				border-color: #FF7814;
			}
		}
	}
}

#feed {
	position: absolute;
	right: 1em;
	top: 0em;
	bottom: 0em;
	width: calc(30% - 1em);
	z-index: 999;
	
	input, button {
		border: none;
		padding: 0.5em 1em;
		background: #F7F7F7;
	}
	
	button {
		background: #CCC;
		cursor: pointer;
		font-weight: bold;
	}
	
	button: hover {
		background: #F7F7F7;
	}
	
	#posts {
		font-family: Arial;
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		
		#poster {
			
			input, button {
				border-radius: 3px;
				background-color: #d9deff;
				color: #323268;
			}
			
			#post {
				margin-bottom: 1em;
				width: calc(100% - 2em);
			}
			
			#name {
				width: calc(100% - 6em);
			}
			
			#submit {
				margin-left: 1em;
				background-color: #323268;
				color: #B4BDFF;
				margin-bottom: 0.5em;
				
				&:hover {
					background-color: #d9deff;
					color: #323268;			
				}	
			}
		}
	
		.post {
			margin-bottom: 1em;
			background: #B4BDFF;
			color: #323268;
			border-radius: 3px;
			width: calc(100% - 1em);
			box-shadow: 2px 2px 3px 0px rgba(0,0,0,0.5);
			
			&:first-child {
				margin-top: 2em;
			}
			
			.message {
				margin: 0.3em 0 0 0;
			}
			.signature {
				margin: 0.5em 0 0 0;
				text-align: right;
				font-style: italic;
			}
			.header {
				padding: 0.5em 1em;
				font-style: italic;
				font-size: 0.8em;
				text-align: right;
			
				.index {
					float: left;
					font-style: normal;
				}
				
				.time {
					cursor: default;
				}
			}
			.body {
				clear: both;
				padding: 0em 1em 0.5em;
			}
			&.picture {
				background: #F3EC9F;
				color: #635C28;
				
				a {
					display: inline-block;
					line-height: 0;
					margin: 0;
				}
				
				img {
					width: 100%;
					image-orientation: from-image;
					outline: none;
					border-radius: 3px;
				}
			}
			&.message {
				background: #6DFF58;
				color: #326526;
				
				p {
					font-size: 0.9em;
					margin: 0.5em 0;
				}
				
				p: first-child {
					margin-top: 1em;
				}
			
				.staticmap {
					width: 100%;
					border-radius: 3px;
					cursor: pointer;
				}
			}
			&.loading {
				.spinner {
					padding-top: 0.5em;
					text-align: center;
					
					.fa-spinner {
						font-size: 1.5em;
						color: #323268;
					}
				}
			}
		}
	
		#loading {
			
		}
		
		.fa.push {
			margin-right: 0.5em;
		}
	}
}

/* Info Window */

.info-window {
	h1 {
		font-size: 1.2em;
	}
	
	p {
		font-size: 1.0em;	
	}
	
	i {
		padding-right: 0.5em;
		font-size: 1.33333333em;
		line-height: 0.75em;
		vertical-align: -15%;
		@extend .fa-fw;
	}

	.pics {
		a {
			display: inline-block;
			margin-right: 15px;
			
			img {
				max-width: 200px;
				max-height: 100px;
				border-radius: 3px;
				transition: All 0.2s;
				
				&:hover {
					box-shadow: 2px 2px 3px 0px rgba(0, 0, 0, 0.5);
				}
			}
		}
	}
}

/* Upload */

.bar {
	height: 18px;
	background: green;
}