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.
774 lines
17 KiB
774 lines
17 KiB
/* |
|
Navigation |
|
UI for Navigation |
|
------------------------------------------------------------------------------------------- */ |
|
|
|
/* HOVER ELEMENTS |
|
================================================== */ |
|
.vmm-notouch { |
|
.navigation { |
|
.toolbar { |
|
.zoom-in:hover, .zoom-out:hover, .back-home:hover { |
|
color: @color-theme; |
|
cursor: pointer; |
|
.opacity(100); |
|
} |
|
} |
|
.timenav { |
|
.content { |
|
.marker.active:hover { |
|
cursor: default; |
|
.flag, .flag-small { |
|
.flag-content { |
|
h3 { |
|
color: @color-theme; |
|
} |
|
h4 { |
|
color:@color-nav-title; |
|
} |
|
} |
|
} |
|
} |
|
.marker:hover { |
|
.line { |
|
z-index:24; |
|
background:@color-nav-title; |
|
} |
|
} |
|
.marker { |
|
.flag:hover, .flag-small:hover { |
|
cursor: pointer; |
|
.flag-content { |
|
h3 { |
|
color:@color-dark-second; |
|
} |
|
h4 { |
|
color:@color-nav-date; |
|
} |
|
.thumbnail { |
|
.opacity(100); |
|
} |
|
} |
|
} |
|
.flag:hover { |
|
.time-flag-active(); |
|
} |
|
.flag-small:hover { |
|
//.time-flag-small-active(); |
|
height:56px; |
|
.time-flag-active(); |
|
.flag-content { |
|
height:36px; |
|
h3 { |
|
margin-top:5px; |
|
} |
|
} |
|
|
|
} |
|
.flag-small.flag-small-last:hover { |
|
.time-flag-small-active(); |
|
height:26px; |
|
.flag-content { |
|
height:14px; |
|
h3 { |
|
margin-top:4px; |
|
} |
|
} |
|
} |
|
} |
|
|
|
} |
|
} |
|
} |
|
} |
|
.vmm-timeline { |
|
|
|
.navigation { |
|
clear:both; |
|
cursor:move; |
|
width: 100%; |
|
height:@navigation-height; |
|
border-top: 1px solid @color-dark-fifth; |
|
position: relative; |
|
.toolbar { |
|
position:absolute; |
|
top:45px; |
|
left:0px; |
|
z-index:202; |
|
background-color: @color-base; |
|
border: 1px solid @color-line; |
|
.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; |
|
top: 0px; |
|
z-index:202; |
|
width: 18px; |
|
height: 18px; |
|
color: @color-navigation-major-time;//@color-nav-description; |
|
text-align:center; |
|
font-weight: bold; |
|
border: 1px solid @color-base; |
|
padding:5px; |
|
.opacity(50); |
|
} |
|
.zoom-in { |
|
.icon { |
|
.icon-zoom-in(); |
|
} |
|
} |
|
.zoom-out { |
|
.icon { |
|
.icon-zoom-out(); |
|
} |
|
} |
|
.back-home { |
|
.icon { |
|
.icon-back-home(); |
|
} |
|
} |
|
} |
|
|
|
.timenav-background { |
|
position:absolute; |
|
cursor:move; |
|
top:0px; |
|
left:0px; |
|
height: @navigation-content-height; |
|
width:100%; |
|
background-color:@color-background-dark; |
|
.timenav-interval-background { |
|
position:absolute; |
|
top:@navigation-content-height + 1; |
|
left:0px; |
|
background:@color-base; |
|
width:100%; |
|
height:@navigation-time-height - 1; |
|
.box-shadow(-1px -1px 7px rgba(0,0,0,.1)); |
|
.top-highlight { |
|
position:absolute; |
|
top:-1px; |
|
left:0px; |
|
z-index:30; |
|
width:100%; |
|
height:1px; |
|
background:@color-base; |
|
.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: @color-theme; |
|
//background-color: @color-background; |
|
z-index:1; |
|
.box-shadow(); |
|
} |
|
.timenav-indicator { |
|
position:absolute; |
|
top: -1px; |
|
left: 50%; |
|
z-index:202; |
|
.icon-currenttime(); |
|
} |
|
.timenav-tag { |
|
div { |
|
height:@navigation-time-height; |
|
display:table; |
|
h3 { |
|
display:table-cell; |
|
vertical-align:middle; |
|
padding-left:@navigation-time-height + @base-space; |
|
font-size:@base-font; |
|
color: darken(@color-background-dark, 10%); |
|
font-weight: bold; |
|
text-shadow: 0px 1px 1px lighten(@color-background-dark, 30%); |
|
} |
|
|
|
} |
|
|
|
} |
|
.timenav-tag-size-half { |
|
height: @navigation-time-height/2; |
|
div { |
|
height:@navigation-time-height/2; |
|
} |
|
} |
|
.timenav-tag-size-full { |
|
height: @navigation-time-height; |
|
div { |
|
height:@navigation-time-height; |
|
} |
|
} |
|
.timenav-tag-row-2, .timenav-tag-row-4, .timenav-tag-row-6 { |
|
background: lighten(@color-background-dark, 3%); |
|
} |
|
.timenav-tag-row-1, .timenav-tag-row-3, .timenav-tag-row-5 { |
|
background:@color-background-dark; |
|
} |
|
|
|
} |
|
|
|
.timenav { |
|
position:absolute; |
|
top: 0px; |
|
left: -250px; |
|
z-index:1; |
|
.content { |
|
position: relative; |
|
.marker.start { |
|
display:none; |
|
} |
|
.marker.active { |
|
.dot { |
|
background: @color-theme; |
|
z-index:200; |
|
} |
|
.line { |
|
z-index:199; |
|
background: @color-theme; |
|
width:1px; |
|
.event-line { |
|
background: @color-theme; |
|
.opacity(75 ); |
|
} |
|
} |
|
.flag, .flag-small { |
|
z-index:200; |
|
.flag-content { |
|
height:36px; |
|
h3 { |
|
color: @color-theme; |
|
margin-top:5px; |
|
} |
|
.thumbnail { |
|
.opacity(100); |
|
} |
|
} |
|
} |
|
|
|
|
|
.flag.row1, .flag.row2, .flag.row3, .flag-small.row1, .flag-small.row2, .flag-small.row3 { |
|
z-index:200; |
|
} |
|
.flag { |
|
.time-flag-active(); |
|
} |
|
.flag-small { |
|
//.time-flag-active(); |
|
//.time-flag-small-active(); |
|
.time-flag-small-active(); |
|
height:26px; |
|
.flag-content { |
|
height:14px; |
|
h3 { |
|
margin-top:4px; |
|
} |
|
} |
|
|
|
} |
|
} |
|
.marker { |
|
position:absolute; |
|
top: 0px; |
|
left: 150px; |
|
display: block; |
|
.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: @color-line; |
|
background-color: fade(@color-line, 50%); |
|
|
|
.box-shadow(1px 0 0 fade(@color-base, 50%)); |
|
|
|
z-index:22; |
|
.event-line { |
|
position:absolute; |
|
z-index:22; |
|
left:0px; |
|
height:1px; |
|
width:1px; |
|
background: @color-theme; |
|
.opacity(15); |
|
} |
|
} |
|
.flag, .flag-small { |
|
position:absolute; |
|
top: 15px; |
|
left: (@navigation-marker-height/2); |
|
padding:0px; |
|
display: block; |
|
z-index:23; |
|
width:153px; |
|
.flag-content { |
|
padding: 0px 7px 2px 6px; |
|
overflow:hidden; |
|
h3 { |
|
font-weight: bold; |
|
font-size: @base-font; |
|
line-height: @base-line; |
|
font-size: 11px; |
|
line-height:11px; |
|
color:@color-nav-title; |
|
|
|
margin-bottom:2px; |
|
small { |
|
display:none; |
|
} |
|
} |
|
h4 { |
|
display:none; |
|
font-weight: normal; |
|
font-size: @base-font; |
|
line-height: @base-line; |
|
margin-top:5px; |
|
font-size: 10px; |
|
line-height:10px; |
|
color:@color-nav-date; |
|
small { |
|
display:none; |
|
} |
|
} |
|
.thumbnail { |
|
margin-bottom: 15px; |
|
margin-right: 3px; |
|
.opacity(50); |
|
img { |
|
width:@base-thumb - 2; |
|
height:@base-thumb - 2; |
|
max-height:none; |
|
max-width:none; |
|
border:0; |
|
border: 1px solid @color-nav-title; |
|
padding:0; |
|
margin:0; |
|
} |
|
} |
|
} |
|
} |
|
.flag { |
|
height:56px; |
|
.time-flag(); |
|
.flag-content { |
|
height:36px; |
|
h3 { |
|
margin-top:5px; |
|
} |
|
} |
|
} |
|
|
|
|
|
.flag-small { |
|
height:26px; |
|
.time-flag-small(); |
|
.flag-content { |
|
height:14px; |
|
h3 { |
|
margin-top:4px; |
|
} |
|
.thumbnail { |
|
width:16px; |
|
height:10px; |
|
margin-right:1px; |
|
margin-top:6px; |
|
} |
|
.thumbnail.thumb-plaintext { |
|
.icon-plaintext-small(); |
|
} |
|
.thumbnail.thumb-quote { |
|
.icon-quote-small(); |
|
} |
|
.thumbnail.thumb-document { |
|
.icon-document-small(); |
|
} |
|
.thumbnail.thumb-photo { |
|
.icon-photo-small(); |
|
} |
|
.thumbnail.thumb-twitter { |
|
.icon-twitter-small(); |
|
} |
|
.thumbnail.thumb-vimeo { |
|
.icon-vimeo-small(); |
|
} |
|
.thumbnail.thumb-youtube { |
|
.icon-youtube-small(); |
|
} |
|
.thumbnail.thumb-video { |
|
.icon-video-small(); |
|
} |
|
.thumbnail.thumb-audio { |
|
.icon-audio-small(); |
|
} |
|
.thumbnail.thumb-map { |
|
.icon-mappin-small(); |
|
} |
|
.thumbnail.thumb-website { |
|
.icon-website-small(); |
|
} |
|
.thumbnail.thumb-link { |
|
.icon-link-small(); |
|
} |
|
.thumbnail.thumb-wikipedia { |
|
.icon-wikipedia-small(); |
|
} |
|
.thumbnail.thumb-storify { |
|
.icon-storify-small(); |
|
} |
|
.thumbnail.thumb-googleplus { |
|
.icon-googleplus-small(); |
|
} |
|
thumbnail.thumb-instagram { |
|
.icon-instagram-small(); |
|
} |
|
} |
|
|
|
} |
|
|
|
|
|
.flag.row1 { |
|
z-index:25; |
|
top:48px; |
|
} |
|
.flag.row2 { |
|
z-index:24; |
|
top:96px; |
|
} |
|
.flag.row3 { |
|
z-index:23; |
|
top:1px; |
|
} |
|
.flag-small.row1 { |
|
z-index:28; |
|
top:24px; |
|
} |
|
.flag-small.row2 { |
|
z-index:27; |
|
top:48px; |
|
} |
|
.flag-small.row3 { |
|
z-index:26; |
|
top:72px; |
|
} |
|
.flag-small.row4 { |
|
z-index:25; |
|
top:96px; |
|
} |
|
.flag-small.row5 { |
|
z-index:24; |
|
top:120px; |
|
} |
|
.flag-small.row6 { |
|
z-index:23; |
|
top:1px; |
|
} |
|
.flag.zFront, .flag-small.zFront { |
|
z-index:201; |
|
} |
|
|
|
} |
|
|
|
.era { |
|
position:absolute; |
|
top: 138px; |
|
left: 150px; |
|
height:12px; |
|
display: block; |
|
overflow:hidden; |
|
div { |
|
height:@navigation-time-height; |
|
//display:table; |
|
width:100%; |
|
height:100%; |
|
//background: @color-theme; |
|
line-height:0px; |
|
//.opacity(10); |
|
//background-color: fade(@color-theme, 10%); |
|
background: @color-background-dark; // IE8 |
|
background: fade(@color-background-dark, 33%); |
|
h3, h4 { |
|
//display:table-cell; |
|
//vertical-align:bottom; |
|
//text-align:center; |
|
position: absolute; |
|
bottom: 1px; |
|
padding-left:@base-space; |
|
font-size:@base-font; |
|
font-weight: bold; |
|
//text-transform: uppercase; |
|
color: fade(@color-theme, 35%); |
|
text-shadow: 0px 1px 1px lighten(@color-background-dark, 30%); |
|
} |
|
|
|
} |
|
} |
|
.era1 { |
|
div { |
|
background: @color-theme-tetrad1; // IE8 |
|
.opacity(10); |
|
//background: fade(@color-theme-tetrad1, 10%); |
|
border-left: 1px solid fade(@color-theme-tetrad1, 10%); |
|
border-right: 1px solid fade(lighten(@color-theme-tetrad1, 10%), 5%); |
|
h3, h4 { |
|
color: fade(@color-theme-tetrad1, 35%); |
|
text-shadow: 0px 1px 1px lighten(@color-background-dark, 30%); |
|
} |
|
} |
|
} |
|
.era2 { |
|
div { |
|
background: @color-theme-tetrad2; // IE8 |
|
.opacity(10); |
|
//background: fade(@color-theme-tetrad2, 10%); |
|
border-left: 1px solid fade(@color-theme-tetrad2, 10%); |
|
border-right: 1px solid fade(lighten(@color-theme-tetrad2, 10%), 5%); |
|
h3, h4 { |
|
color: fade(@color-theme-tetrad2, 35%); |
|
text-shadow: 0px 1px 1px lighten(@color-background-dark, 30%); |
|
} |
|
} |
|
} |
|
.era3 { |
|
div { |
|
background: @color-theme-tetrad3; // IE8 |
|
.opacity(10); |
|
//background: fade(@color-theme-tetrad3, 10%); |
|
border-left: 1px solid fade(@color-theme-tetrad3, 10%); |
|
border-right: 1px solid fade(lighten(@color-theme-tetrad3, 10%), 5%); |
|
h3, h4 { |
|
color: fade(@color-theme-tetrad3, 35%); |
|
text-shadow: 0px 1px 1px lighten(@color-background-dark, 30%); |
|
} |
|
} |
|
} |
|
.era4 { |
|
div { |
|
background: @color-theme-tetrad4; // IE8 |
|
.opacity(10); |
|
//background: fade(@color-theme-tetrad4, 10%); |
|
border-left: 1px solid fade(@color-theme-tetrad4, 10%); |
|
border-right: 1px solid fade(lighten(@color-theme-tetrad4, 10%), 5%); |
|
h3, h4 { |
|
color: fade(@color-theme-tetrad4, 35%); |
|
text-shadow: 0px 1px 1px lighten(@color-background-dark, 30%); |
|
} |
|
} |
|
} |
|
.era5 { |
|
div { |
|
background: @color-theme-tetrad5; // IE8 |
|
.opacity(10); |
|
//background: fade(@color-theme-tetrad5, 10%); |
|
border-left: 1px solid fade(@color-theme-tetrad5, 10%); |
|
border-right: 1px solid fade(lighten(@color-theme-tetrad5, 10%), 5%); |
|
h3, h4 { |
|
color: fade(@color-theme-tetrad5, 35%); |
|
text-shadow: 0px 1px 1px lighten(@color-background-dark, 30%); |
|
} |
|
} |
|
} |
|
.era6 { |
|
div { |
|
background: @color-theme-tetrad6; // IE8 |
|
.opacity(10); |
|
//background: fade(@color-theme-tetrad6, 10%); |
|
border-left: 1px solid fade(@color-theme-tetrad6, 10%); |
|
border-right: 1px solid fade(lighten(@color-theme-tetrad6, 10%), 5%); |
|
h3, h4 { |
|
color: fade(@color-theme-tetrad6, 35%); |
|
text-shadow: 0px 1px 1px lighten(@color-background-dark, 30%); |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
.time { |
|
position:absolute; |
|
left:0px; |
|
top: @navigation-content-height; |
|
height:@navigation-time-height; |
|
background-color:@color-background; |
|
line-height: 0px; |
|
.time-interval-minor { |
|
max-width:none; |
|
height: @navigation-marker-height; |
|
//display:block; |
|
white-space:nowrap; |
|
//overflow:hidden; |
|
position: absolute; |
|
top:-2px; |
|
left:8px; |
|
z-index:10; |
|
//padding-left:7px; |
|
.minor { |
|
position: relative; |
|
top:2px; |
|
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:6px;//@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:0px; |
|
z-index:2; |
|
strong { |
|
font-weight:bold; |
|
color:@color-navigation-time-strong; |
|
} |
|
} |
|
div.era { |
|
font-weight: bold; |
|
padding-top:0px; |
|
margin-top:-3px; |
|
margin-left:2px; |
|
background-image: none; |
|
} |
|
.era1 { |
|
color: @color-theme-tetrad1; // IE8 |
|
.opacity(50); |
|
//color: fade(@color-theme-tetrad1, 50%); |
|
//text-shadow: 0px 1px 1px lighten(@color-background-dark, 30%); |
|
} |
|
.era2 { |
|
color: @color-theme-tetrad2; // IE8 |
|
.opacity(50); |
|
//color: fade(@color-theme-tetrad2, 50%); |
|
//text-shadow: 0px 1px 1px lighten(@color-background-dark, 30%); |
|
} |
|
.era3 { |
|
color: @color-theme-tetrad3; // IE8 |
|
.opacity(50); |
|
//color: fade(@color-theme-tetrad3, 50%); |
|
//text-shadow: 0px 1px 1px lighten(@color-background-dark, 30%); |
|
} |
|
.era4 { |
|
color: @color-theme-tetrad4; // IE8 |
|
.opacity(50); |
|
//color: fade(@color-theme-tetrad4, 50%); |
|
//text-shadow: 0px 1px 1px lighten(@color-background-dark, 30%); |
|
} |
|
.era5 { |
|
color: @color-theme-tetrad5; // IE8 |
|
.opacity(50); |
|
//color: fade(@color-theme-tetrad5, 50%); |
|
//text-shadow: 0px 1px 1px lighten(@color-background-dark, 30%); |
|
} |
|
.era6 { |
|
color: @color-theme-tetrad6; // IE8 |
|
.opacity(50); |
|
//color: fade(@color-theme-tetrad6, 50%); |
|
//text-shadow: 0px 1px 1px lighten(@color-background-dark, 30%); |
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.time-interval-major { |
|
white-space:nowrap; |
|
position:absolute; |
|
top: @navigation-marker-height - 1; |
|
left:0px; |
|
|
|
div { |
|
//.background-time-interval(); |
|
.background-time-interval-major(); |
|
background-position:left top; |
|
background-repeat:no-repeat; |
|
padding-top:@base-space; |
|
position:absolute; |
|
height:@base-space; |
|
//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; |
|
} |
|
} |
|
|
|
|
|
} |
|
|
|
} |
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
} |