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.
 
 
 
 

188 lines
4.7 KiB

/*
GFX
Icons etc
----------------------------------------------------------------- */
/* Feature Navigation
----------------------------------------------------------------- */
.icon-previous() {
height:24px;
.base-sprite();
background-repeat:no-repeat;
background-position: -160px 0; width: 24px; height: 24px;
overflow:hidden;
}
.icon-next() {
.base-sprite();
background-repeat:no-repeat;
background-position: -184px 0; width: 24px; height: 24px;
height:24px;
overflow:hidden;
}
/* TimeNav Navigation
----------------------------------------------------------------- */
.icon-zoom-in() {
.base-sprite();
background-repeat:no-repeat;
background-position: -256px 0; width: 24px; height: 24px;
}
.icon-zoom-out() {
.base-sprite();
background-repeat:no-repeat;
background-position: -280px 0; width: 24px; height: 24px;
}
.icon-back-home() {
.base-sprite();
background-repeat:no-repeat;
background-position: -328px 0; width: 24px; height: 24px;
}
/* Time Flag
----------------------------------------------------------------- */
.time-flag() {
.base-sprite();
background-repeat:no-repeat;
background-position: 0 0; width:153px; height: 53px;
}
.time-flag-active() {
.base-sprite();
background-repeat:no-repeat;
background-position: 0 -53px; width:153px; height: 53px;
}
/* Thumbnail Icons
----------------------------------------------------------------- */
.icon-map() {
.base-sprite();
background-repeat:no-repeat;
background-position: -208px -24px;
}
.icon-mappin() {
.base-sprite();
background-repeat:no-repeat;
background-position: -208px -48px;
}
.icon-website() {
.base-sprite();
background-repeat:no-repeat;
background-position: -232px -24px;
}
.icon-document() {
.base-sprite();
background-repeat:no-repeat;
background-position: -256px -48px;
}
.icon-quote() {
.base-sprite();
background-repeat:no-repeat;
background-position: -232px -48px;
}
.icon-plaintext() {
.base-sprite();
background-repeat:no-repeat;
background-position: -280px -48px;
}
.icon-twitter() {
.base-sprite();
background-repeat:no-repeat;
background-position: -256px -24px;
}
.icon-video() {
.base-sprite();
background-repeat:no-repeat;
background-position: -328px -24px;
}
.icon-audio() {
.base-sprite();
background-repeat:no-repeat;
background-position: -304px -24px;
}
.icon-photo() {
.base-sprite();
background-repeat:no-repeat;
background-position: -280px -24px;
}
.icon-link() {
.base-sprite();
background-repeat:no-repeat;
background-position: -184px -72px;
}
/* Thumbnail Icons (Extra)
----------------------------------------------------------------- */
.icon-twitter-inline() {
.base-sprite();
background-repeat:no-repeat;
background-position: -160px -96px;
}
.icon-storify-inline() {
.base-sprite();
background-repeat:no-repeat;
background-position: -184px -96px;
}
.icon-storify() {
.base-sprite();
background-repeat:no-repeat;
background-position: -328px -96px;
}
.icon-storify-full() {
.base-sprite();
background-repeat:no-repeat;
background-position: -280px -96px;
width:@base-thumb*2;
//height:12px;
}
.icon-wikipedia() {
.base-sprite();
background-repeat:no-repeat;
background-position: -184px -48px;
}
.icon-instagram() {
.base-sprite();
background-repeat:no-repeat;
background-position: -208px -96px;
}
.icon-instagram-full() {
.base-sprite();
background-repeat:no-repeat;
background-position: -232px -96px;
width:@base-thumb*2;
height:@base-thumb;
}
.icon-vimeo() {
.base-sprite();
background-repeat:no-repeat;
background-position: -328px -48px;
}
.icon-youtube() {
.base-sprite();
background-repeat:no-repeat;
background-position: -328px -72px;
}
/* Current Time Indicator
----------------------------------------------------------------- */
.icon-currenttime() {
.base-sprite();
background-repeat:no-repeat;
background-position: -160px -48px;
width:24px;
height:24px;
}
/* Time Tics
----------------------------------------------------------------- */
.background-time-tic() {
background: @color-background url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAMAAAA8JaR5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBrwkQIABAAHIABkHeR3aAAAAAElFTkSuQmCC);
}
.background-time-interval() {
//background: @color-base url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC);
//background-repeat: no-repeat;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC);
}