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.
454 lines
12 KiB
454 lines
12 KiB
11 years ago
|
/*
|
||
|
|
GFX
|
||
|
|
Icons etc
|
||
|
|
----------------------------------------------------------------- */
|
||
|
|
.thumbnail {
|
||
|
|
.base-sprite();
|
||
|
|
}
|
||
|
|
@media only screen and (-webkit-min-device-pixel-ratio: 2),
|
||
|
|
only screen and (min-device-pixel-ratio: 2) {
|
||
|
|
.thumbnail {
|
||
|
|
/* Reference the @2x Sprite */
|
||
|
|
.base-sprite2x();
|
||
|
|
/* Translate the @2x sprite's dimensions back to 1x */
|
||
|
|
background-size: 352px 260px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
/* Feature Navigation
|
||
|
|
----------------------------------------------------------------- */
|
||
|
|
.icon-previous() {
|
||
|
|
height:24px;
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -160px 0; width: 24px; height: 24px;
|
||
|
|
overflow:hidden;
|
||
|
|
}
|
||
|
|
.icon-previous2x() {
|
||
|
|
height:24px;
|
||
|
|
.base-sprite2x();
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
.icon-next2x() {
|
||
|
|
.base-sprite2x();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -184px 0; width: 24px; height: 24px;
|
||
|
|
height:24px;
|
||
|
|
overflow:hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-previous-light() {
|
||
|
|
height:24px;
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -208px 0; width: 24px; height: 24px;
|
||
|
|
overflow:hidden;
|
||
|
|
}
|
||
|
|
.icon-previous-light2x() {
|
||
|
|
height:24px;
|
||
|
|
.base-sprite2x();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -208px 0; width: 24px; height: 24px;
|
||
|
|
overflow:hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-next-light() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -232px 0; width: 24px; height: 24px;
|
||
|
|
height:24px;
|
||
|
|
overflow:hidden;
|
||
|
|
}
|
||
|
|
.icon-next-light2x() {
|
||
|
|
.base-sprite2x();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -232px 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-in2x() {
|
||
|
|
.base-sprite2x();
|
||
|
|
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-zoom-out2x() {
|
||
|
|
.base-sprite2x();
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
.icon-back-home2x() {
|
||
|
|
.base-sprite2x();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -328px 0; width: 24px; height: 24px;
|
||
|
|
}
|
||
|
|
/* TimeNav Navigation Touch
|
||
|
|
----------------------------------------------------------------- */
|
||
|
|
|
||
|
|
.icon-touch-zoom-in() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -208px -160px; width: 40px; height: 40px;
|
||
|
|
}
|
||
|
|
.icon-touch-zoom-in2x() {
|
||
|
|
.base-sprite2x();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -208px -160px; width: 40px; height: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-touch-zoom-out() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -256px -160px; width: 40px; height: 40px;
|
||
|
|
}
|
||
|
|
.icon-touch-zoom-out2x() {
|
||
|
|
.base-sprite2x();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -256px -160px; width: 40px; height: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-touch-back-home() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -304px -160px; width: 40px; height: 40px;
|
||
|
|
}
|
||
|
|
.icon-touch-back-home2x() {
|
||
|
|
.base-sprite2x();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -304px -160px; width: 40px; height: 40px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.icon-touch-gesture() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -160px -160px; width: 48px; height: 48px;
|
||
|
|
}
|
||
|
|
.icon-touch-gesture2x() {
|
||
|
|
.base-sprite2x();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -160px -160px; width: 48px; height: 48px;
|
||
|
|
}
|
||
|
|
/* Time Flag
|
||
|
|
----------------------------------------------------------------- */
|
||
|
|
.time-flag() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: 0 0; width:153px; height: 53px;
|
||
|
|
}
|
||
|
|
.time-flag2x() {
|
||
|
|
.base-sprite2x();
|
||
|
|
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;
|
||
|
|
}
|
||
|
|
.time-flag-active2x() {
|
||
|
|
.base-sprite2x();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: 0 -53px; width:153px; height: 53px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.time-flag-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: 0 -135px; width:153px; height: 26px;
|
||
|
|
}
|
||
|
|
.time-flag-small2x() {
|
||
|
|
.base-sprite2x();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: 0 -135px; width:153px; height: 26px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.time-flag-small-active() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: 0 -109px; width:153px; height: 26px;
|
||
|
|
}
|
||
|
|
.time-flag-small-active2x() {
|
||
|
|
.base-sprite2x();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: 0 -109px; width:153px; height: 26px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 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;
|
||
|
|
}
|
||
|
|
.icon-storify() {
|
||
|
|
//.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -328px -96px;
|
||
|
|
}
|
||
|
|
.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-vine() {
|
||
|
|
//.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -232px -72px;
|
||
|
|
}
|
||
|
|
.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;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Thumbnail Icons Small 10px
|
||
|
|
----------------------------------------------------------------- */
|
||
|
|
.icon-map-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -208px -120px;
|
||
|
|
}
|
||
|
|
.icon-mappin-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -208px -120px;
|
||
|
|
}
|
||
|
|
.icon-website-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -232px -120px;
|
||
|
|
}
|
||
|
|
.icon-document-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -256px -130px;
|
||
|
|
}
|
||
|
|
.icon-quote-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -232px -130px;
|
||
|
|
}
|
||
|
|
.icon-plaintext-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -280px -130px;
|
||
|
|
}
|
||
|
|
.icon-twitter-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -256px -120px;
|
||
|
|
}
|
||
|
|
.icon-video-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -328px -120px;
|
||
|
|
}
|
||
|
|
.icon-audio-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -304px -120px;
|
||
|
|
}
|
||
|
|
.icon-photo-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -280px -120px;
|
||
|
|
}
|
||
|
|
.icon-link-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -232px -120px;
|
||
|
|
}
|
||
|
|
.icon-wikipedia-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -184px -120px;
|
||
|
|
}
|
||
|
|
.icon-instagram-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -208px -96px;
|
||
|
|
}
|
||
|
|
.icon-googleplus-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -208px -130px;
|
||
|
|
}
|
||
|
|
.icon-vine-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -160px -120px;
|
||
|
|
}
|
||
|
|
.icon-vimeo-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -328px -130px;
|
||
|
|
}
|
||
|
|
.icon-youtube-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -304px -130px;
|
||
|
|
}
|
||
|
|
.icon-storify-small() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -184px -130px;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* 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-full() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -280px -96px;
|
||
|
|
width:@base-thumb*2;
|
||
|
|
//height:12px;
|
||
|
|
}
|
||
|
|
.icon-instagram-full() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -232px -96px;
|
||
|
|
width:@base-thumb*2;
|
||
|
|
height:@base-thumb;
|
||
|
|
}
|
||
|
|
|
||
|
|
/* Current Time Indicator
|
||
|
|
----------------------------------------------------------------- */
|
||
|
|
.icon-currenttime() {
|
||
|
|
.base-sprite();
|
||
|
|
background-repeat:no-repeat;
|
||
|
|
background-position: -160px -48px;
|
||
|
|
width:24px;
|
||
|
|
height:24px;
|
||
|
|
}
|
||
|
|
.icon-currenttime2x() {
|
||
|
|
.base-sprite2x();
|
||
|
|
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);
|
||
|
|
|
||
|
|
}
|
||
|
|
.background-time-interval-major() {
|
||
|
|
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAQAQMAAADtUYf0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyOTAzRjI3REIzNDcxMUUxQUQ3QUZCOThEODQ1NDhCNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyOTAzRjI3RUIzNDcxMUUxQUQ3QUZCOThEODQ1NDhCNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI5MDNGMjdCQjM0NzExRTFBRDdBRkI5OEQ4NDU0OEI3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI5MDNGMjdDQjM0NzExRTFBRDdBRkI5OEQ4NDU0OEI3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+DPWNfQAAAANQTFRFzMzMylJEJwAAAAtJREFUCB1jYMAPAAAgAAHDvpOtAAAAAElFTkSuQmCC);
|
||
|
|
}
|