Beautifully crafted timelines that are easy and intuitive to use. http://timeline.knightlab.com/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

488 lines
9.6 KiB

/*
* 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: 10px;
line-height:10px;
//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;
}
}
}
}
}
}
}