TimelineJS/source/less/structure-navigation.less

/*
 * Navigation
 * UI for Navigation
 * ------------------------------------------------------------------------------------------- */

#timeline {
	
	.navigation {
		clear:both;
		cursor:move;
		width: 100%;
		height:@navigation-height;
		//overflow: hidden;
		border-top: 1px solid @color-line;
		
		position: relative;
		//.background-time-tic();
		.toolbar {
			position:absolute;
			//top: -1px;
			top:45px;
			left:0px;
			z-index:1000;
			background-color: @white; 
			//width:59px;
			//height:150px;
			border: 1px solid @color-line;
			//border-top: 1px solid @color-line;
			//border-bottom: 1px solid @color-line;
			//border-right: 1px solid @color-line;
			//.box-shadow();	
			.box-shadow(1px 1px 0px rgba(0,0,0,.20));
			
			.zoom-in, .zoom-out, .back-home {
				#font > .navigation(normal,10px);
				//line-height:5px;
				//position:absolute;
				//display:inline-block;
				top: 0px;
				z-index:1000;
				width: 18px;
				height: 18px;
				color: @color-navigation-major-time;//@color-nav-description;
				text-align:center;
				//font-size:16px;
				font-weight: bold;
				border: 1px solid @white;
				padding:5px;
				//.box-shadow(1px 1px 0px #666);
				//.box-shadow();
				.opacity(50);

			} 
			.zoom-in:hover, .zoom-out:hover, .back-home:hover {
				//background-color: @color-line; //@color-nav-description;
				color: @color-theme;
				cursor: pointer;
				.opacity(100);
			}
			.zoom-in {
				//left:30px;
				.icon {
					//display:inline-block;
					//padding-right:5px;
					.icon-zoom-in();
				}
				
			}
			.zoom-out {
				//left:0px;
				.icon {
					//display:inline-block;
					//padding-right:5px;
					.icon-zoom-out();
				}
				
			}
			.back-home {
				.icon {
					.icon-back-home();
				}
			}
		}
		
		
		.timenav-background {
			position:absolute;
			//z-index:2;
			cursor:move;
			top:0px;
			left:0px;
			height: @navigation-content-height;
			width:100%;
			background-color:@color-background-dark;
			//background: @color-background-dark url(timeline-texture.png) repeat;
			
			.timenav-interval-background {
				position:absolute;
				top:@navigation-content-height + 1;
				left:0px;
				
				background:@white;
				width:100%;
				height:@navigation-time-height - 1;
				
				//.box-shadow(1px -1px 0px rgba(255,255,255,.70));
				.top-highlight {
					position:absolute;
					top:-1px;
					left:0px;
					z-index:30;
					width:100%;
					height:1px;
					background:@white;
					.opacity(50);
					.box-shadow(1px 1px 5px rgba(0,0,0,.20));
				}
					
			}
			
			.timenav-line {
				position:absolute;
				top: 0px;
				left: 50%;
				width:3px;
				height:150px;
				background: @color-theme;
				z-index:500;
				.box-shadow();
			}
		}
		
		.timenav {
			//height:@navigation-height;
			position:absolute;
			top: 0px;
			//left: 0px;
			left: -250px;
			z-index:1;
			//.background-time-tic();
			
			
			.content {
				//height: @navigation-content-height;
				position: relative;
				//z-index:10;
				
				.marker.start {
					display:none;
				}
				
				.marker.active {
					
					.dot {
						background: @color-theme;
						//.box-shadow();
						z-index:200;
					}
					.line {
						z-index:199;
						background: @color-theme;
						width:1px;
						.event-line {
							background: @color-theme;
							.opacity(75	);
							//.box-shadow();
						}
					}
					.flag {
						//.opacity(100);
						z-index:200;
						.time-flag-active();
						//.box-shadow();
						.flag-content {
							h3 {
								color: @color-theme;
							}
						}
					}
					.flag.row1, .flag.row2, .flag.row3 {
						z-index:200;
					}

				}
				.marker.active:hover {
					cursor: default;

					.flag {
						
						.flag-content {
							h3 {
								color: @color-theme;
							}
							h4 {
								color:@color-nav-title;
							}
							
						}
					}
				}
				.marker:hover {
					.line {
						z-index:500;
						background:@color-nav-title;
					}
				}
				.marker {
					
					position:absolute;
					top: 0px;
					left: 150px;
					display: block;
					//z-index:20;
					
					.dot {
						position:absolute;
						top: 150px;
						left: 0px;
						display: block;
						width: @navigation-marker-height;
						height: @navigation-marker-height;
						background: @color-dark-second;
						.border-radius((@navigation-marker-height)/2);
						z-index:21;
					}
					.line {
						position:absolute;
						top: 0px;
						left: (@navigation-marker-height/2);
						width:1px;
						height:150px;
						background: @color-line;
						//background:@color-line-hover;
						//.opacity(25);
						z-index:22;
						.event-line {
							position:absolute;
							z-index:22;
							left:0px;
							height:1px;
							width:1px;
							//background:@color-line-hover;
							background: @color-theme;
							.opacity(15);
						}
					}
					.flag {
						position:absolute;
						top: 15px;
						left: (@navigation-marker-height/2);
						padding:0px;
						display: block;
						z-index:23;
						width:153px;
						height:56px;
						//overflow:hidden;
						.time-flag();
						//.opacity(33);
						//border: 1px solid @color-line;
						//.border-radius(5px);
						//.box-shadow(0px 1px 0px @color-line);
						.flag-content {
							padding: 5px 7px 2px 5px;
							overflow:hidden;
							height:33px;

							h3 {
								#font > .navigation(bold,@base-font,@base-line);
								//font-weight: bold;
								font-size: 11px;
								line-height:11px;
								//color:@color-nav-date;
								color:@color-nav-title;
								margin-bottom:2px;
								small {
									display:none;
								}
							}
							h4 {
								display:none;
								#font > .navigation(normal,@base-font,@base-line);
								font-size: 10px;
								line-height:10px;
								//color:@color-nav-title;
								color:@color-nav-date;
								small {
									display:none;
								}
							}
							.thumbnail {
								//border: 1px solid @color-line;
								margin-bottom:15px;
							}

						}
					}
					.flag:hover {
						cursor: pointer;
						//.opacity(100);
						.time-flag-active();
						.flag-content {
							h3 {
								color:@color-dark-second;
							}
							h4 {
								color:@color-nav-date;
							}
							.thumbnail {
								//border: 1px solid @color-nav-date;
							}
						}
					}
					
					.flag.row1 {
						z-index:25;
						top:48px;
					}
					.flag.row2 {
						z-index:24;
						top:96px;
					}
					.flag.row3 {
						z-index:23;
						top:1px;
					}
					.flag.zFront {
						z-index:100;
					}
					
				}
			
				.era {
					
					position:absolute;
					top: 138px;
					left: 150px;
					//height:17px;
					height:12px;
					display: block;
					//background-color:@era-background;
					background: @color-theme;
					//.opacity(15);
					overflow:hidden;
					border-left: 1px solid @era-line;
					border-right: 1px solid @era-line;
					border-top: 1px solid @era-line;
					//background:@color-line-hover;
					
					.opacity(75);
					//.border-radius(20);
					-moz-border-radius-topleft: 7px;
						-webkit-border-top-left-radius: 7px;
						border-top-left-radius: 7px;
						
					-moz-border-radius-topright: 7px;
						-webkit-border-top-right-radius: 7px;
						border-top-right-radius: 7px;
						
						
						
					z-index:-10;
					h3 {
						#font > .navigation(bold,10px,10px);
						color:@white;
						position:absolute;
						top:-1px;
						left:9px;
						
					}
				}
				
			}

			.time {
				position:absolute;
				left:0px;
				top: @navigation-content-height;
				height:@navigation-time-height;
				background-color:@color-background;

				.time-interval-minor {
					
					height: @navigation-marker-height;
					//display:block;
					white-space:nowrap;	
					//overflow:hidden;
					position: absolute;
					top:-9px;
					left:8px;
					z-index:10;
					//padding-left:7px;
					.minor {
						position: relative;
						top:0px;
						display:inline-block;
						.background-time-interval();
						width:100px;
						//width:15px;
						height: @navigation-marker-height;
						background-position: center top;
						white-space:nowrap;
						color: @color-navigation-time;
						margin-top:0px;
						padding-top:0px;
					}
					
				}
				.time-interval {
					white-space:nowrap;	
					position:absolute;
					top: @navigation-marker-height - 1;
					left:0px;	
					
					div {
						.background-time-interval();
						background-position:left top;
						background-repeat:no-repeat;
						padding-top:3px;//@base-space;
						position:absolute;
						height:3px;//15px;
						//top:-5px;//@base-space;
						left:0px;
						display:block;
						//width:150px;
						#font > .navigation(normal,10px,@base-line);
						text-transform: uppercase;
						text-align:left;
						text-indent: 0px;
						white-space:nowrap;
						color: @color-navigation-time;
						margin-left:0px;
						margin-right:0px;
						margin-top:1px;
						z-index:2;
						strong {
							font-weight:bold;
							color:@color-navigation-time-strong;
						}
					}
					

				}
				
				.time-interval-major {
					white-space:nowrap;	
					position:absolute;
					top: @navigation-marker-height - 1;
					left:0px;	
					
					div {
						.background-time-interval();
						background-position:left top;
						background-repeat:no-repeat;
						padding-top:@base-space;
						position:absolute;
						height:15px;
						//top:-5px;//@base-space;
						left:0px;
						display:block;
						//width:150px;
						#font > .navigation(bold,12px,@base-line);
						text-transform: uppercase;
						text-align:left;
						text-indent: 0px;
						white-space:nowrap;
						color: @color-navigation-major-time;
						margin-left:0px;
						margin-right:0px;
						margin-top:1px;
						z-index:5;
						strong {
							font-weight:bold;
							color:@color-navigation-time-strong;
						}
					}
					

				}

			}
		}
		
		
		
		
	}
	
}