playground
/
TimelineJS
mirror of https://github.com/NUKnightLab/TimelineJS.git
1
0
Fork 0
Code Issues Releases Activity
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.
558 Commits
8 Branches
41 Tags
20 MiB
 
 
 
 
Tree: 71f310232f
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '71f310232f'
${ noResults }
TimelineJS/source/less/VMM.Timeline.TimeNav.less

881 lines
19 KiB
Raw Blame History

/*
Navigation
UI for Navigation
------------------------------------------------------------------------------------------- */
/* HOVER ELEMENTS
================================================== */
.vco-notouch {
.vco-navigation {
.vco-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;
}
}
}
}
}
}
}
}
.vco-timeline {
.vco-navigation {
clear:both;
cursor:move;
width: 100%;
height:@navigation-height;
border-top: 1px solid @color-dark-fifth;
position: relative;
.vco-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();
}
}
}
.vco-toolbar.touch {
.border-radius(10px);
background-color: transparent;
.box-shadow(none);
.zoom-in, .zoom-out, .back-home {
//line-height: 48px;
width: 40px;
height: 40px;
padding:5px;
background-color: @color-base;
border: 1px solid @color-line;
.box-shadow(1px 1px 0px rgba(0,0,0,.20));
.border-radius(10px);
.opacity(100);
//.buttonBackground(darken(@color-base, 5%), darken(@color-navigation-major-time, 5%));
//.box-shadow(~"inset 0 1px 0 rgba(255,255,255,.1), 0 1px 0 rgba(255,255,255,.075)");
}
.zoom-in {
.icon {
.icon-touch-zoom-in();
}
}
.zoom-out {
.icon {
.icon-touch-zoom-out();
}
}
.back-home {
.icon {
.icon-touch-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;
}
}
}
}
}
}
}
/* RETINA
================================================== */
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
.vco-notouch {
.vco-navigation {
.vco-toolbar {
.zoom-in {
.icon {
.icon-zoom-in2x();
}
}
.zoom-out {
.icon {
.icon-zoom-out2x();
}
}
.back-home {
.icon {
.icon-back-home2x();
}
}
}
.vco-toolbar.touch {
.zoom-in {
.icon {
.icon-touch-zoom-in2x();
}
}
.zoom-out {
.icon {
.icon-touch-zoom-out2x();
}
}
.back-home {
.icon {
.icon-touch-back-home2x();
}
}
}
.timenav {
.content {
.marker {
.flag:hover {
.time-flag-active2x();
}
.flag-small:hover {
.time-flag-active2x();
}
.flag-small.flag-small-last:hover {
.time-flag-small-active2x();
}
}
}
}
.timenav-background {
.timenav-indicator {
.icon-currenttime2x();
}
}
}
}
.vco-timeline {
.vco-navigation {
.timenav {
.content {
}
}
}
}
}