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.
525 lines
10 KiB
525 lines
10 KiB
/* |
|
Navigation |
|
UI for Navigation |
|
------------------------------------------------------------------------------------------- */ |
|
|
|
.vmm-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:202; |
|
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-weight: normal; |
|
font-size: 10px; |
|
line-height: 20px; |
|
|
|
//line-height:5px; |
|
//position:absolute; |
|
//display:inline-block; |
|
top: 0px; |
|
z-index:202; |
|
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:201; |
|
.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:201; |
|
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; |
|
-moz-box-shadow: 1px 0 0 @color-base; |
|
-webkit-box-shadow: 1px 0 0 @color-base; |
|
box-shadow: 1px 0 0 @color-base; |
|
|
|
//.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-weight: bold; |
|
font-size: @base-font; |
|
line-height: @base-line; |
|
|
|
font-size: 11px; |
|
line-height:11px; |
|
//color:@color-nav-date; |
|
color:@color-nav-title; |
|
margin-bottom:2px; |
|
small { |
|
display:none; |
|
} |
|
} |
|
h4 { |
|
display:none; |
|
|
|
font-weight: normal; |
|
font-size: @base-font; |
|
line-height: @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:201; |
|
} |
|
|
|
} |
|
|
|
.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-weight: bold; |
|
font-size: 10px; |
|
line-height: 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 { |
|
max-width:none; |
|
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-weight: normal; |
|
font-size: 10px; |
|
line-height: @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-weight: bold; |
|
font-size: 12px; |
|
line-height: @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; |
|
} |
|
} |
|
|
|
|
|
} |
|
|
|
} |
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |