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.
197 lines
4.9 KiB
197 lines
4.9 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-googleplus-inline() { |
|
.base-sprite(); |
|
background-repeat:no-repeat; |
|
background-position: -208px -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-googleplus() { |
|
.base-sprite(); |
|
background-repeat:no-repeat; |
|
background-position: -208px -72px; |
|
} |
|
.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); |
|
|
|
} |
|
|
|
|