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.
208 lines
3.8 KiB
208 lines
3.8 KiB
/* |
|
* VMM Timeline Core |
|
* Basic and global styles for generating structural layout |
|
* ------------------------------------------------------------------------------------------- */ |
|
|
|
/* TIMELINE EMBED |
|
================================================== */ |
|
#timeline-embed { |
|
background-color: @color-background; |
|
margin-bottom:20px; |
|
border: 1px solid @color-line; |
|
padding-top:20px; |
|
padding-bottom:20px; |
|
clear:both; |
|
-webkit-border-radius: 10px; |
|
-moz-border-radius: 10px; |
|
border-radius: 10px; |
|
-moz-box-shadow: 0 1px 3px rgba(0,0,0,.25); |
|
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25); |
|
box-shadow: 1px 2px 6px rgba(0,0,0,.25); |
|
|
|
} |
|
|
|
/* TIMELINE |
|
================================================== */ |
|
.vmm-timeline { |
|
width: 100%; |
|
height:100%; |
|
//border: 1px solid @color-line; |
|
padding:0px; |
|
margin:0px; |
|
background-color:@color-background; |
|
position: absolute; |
|
//border: 1px solid @color-line; |
|
|
|
z-index:100; |
|
clear:both; |
|
overflow:hidden; |
|
|
|
.hyphenate { |
|
//white-space:nowrap; |
|
//width:200px; |
|
//overflow-x:hidden; |
|
//display:inline-block; |
|
//height:@base-line; |
|
} |
|
/* FEATURE |
|
================================================== */ |
|
.feature { |
|
width: 100%; |
|
.slider { |
|
width: 100%; |
|
float: left; |
|
position: relative; |
|
z-index:10; |
|
padding-top:@base-space; |
|
.box-shadow(); |
|
|
|
} |
|
} |
|
|
|
/* FEEDBACK |
|
================================================== */ |
|
.feedback { |
|
position: absolute; |
|
display:table; |
|
overflow:hidden; |
|
top:0px; |
|
left:0px; |
|
z-index:205; |
|
width: 100%; |
|
height:100%; |
|
background-color:@color-background-dark; |
|
border: 1px solid @color-line; |
|
//.opacity(80); |
|
.messege { |
|
display:table-cell; |
|
vertical-align:middle; |
|
font-size: @base-font; |
|
font-weight: normal; |
|
line-height: @base-line; |
|
width:75%; |
|
margin-left:auto; |
|
margin-right:auto; |
|
margin-top:auto; |
|
margin-bottom:auto; |
|
text-align: center; |
|
|
|
} |
|
} |
|
|
|
/* Container |
|
================================================== */ |
|
.container.main { |
|
//margin-bottom:@base-space; |
|
//margin-top:@base-space; |
|
position: absolute; |
|
top:0px: |
|
left:0px; |
|
padding-bottom:3px; |
|
//margin-top:@base-space; |
|
width: auto; |
|
height: auto; |
|
margin:0px; |
|
clear:both; |
|
} |
|
img, embed, object, video, iframe { |
|
max-width: 100%; |
|
} |
|
iframe { |
|
//margin-bottom:5px; |
|
} |
|
|
|
|
|
img { |
|
max-height:100%; |
|
//border: 1px solid @color-line; |
|
border: 1px solid @color-credit; |
|
} |
|
a { |
|
color:@color-theme; |
|
text-decoration: none; |
|
} |
|
a:hover { |
|
color:@color-theme-dark; |
|
text-decoration: underline; |
|
} |
|
|
|
|
|
|
|
|
|
|
|
.thumbnail { |
|
width:24px; |
|
height:24px; |
|
overflow:hidden; |
|
float:left; |
|
margin-right:1px; |
|
margin-top:6px; |
|
//margin-left:6px; |
|
/* |
|
border: 0px solid @color-line; |
|
border-bottom-width: 1px; |
|
border-right-width: 1px; |
|
//background:#E9E9E9; |
|
-webkit-border-bottom-right-radius:3px; |
|
-moz-border-bottom-right-radius:3px; |
|
border-bottom-right-radius:3px; |
|
-webkit-border-top-left-radius:3px; |
|
-moz-border-top-left-radius:3px; |
|
border-top-left-radius:3px; |
|
|
|
-moz-box-shadow: 1px 1px 0 @color-base; |
|
-webkit-box-shadow: 1px 1px 0 @color-base; |
|
box-shadow: 1px 1px 0 @color-base; |
|
*/ |
|
} |
|
.thumbnail.thumb-plaintext { |
|
.icon-plaintext(); |
|
} |
|
.thumbnail.thumb-quote { |
|
.icon-quote(); |
|
} |
|
.thumbnail.thumb-document { |
|
.icon-document(); |
|
} |
|
.thumbnail.thumb-photo { |
|
.icon-photo(); |
|
border:0; |
|
img { |
|
border:0px none @color-line !important; |
|
} |
|
} |
|
.thumbnail.thumb-twitter { |
|
.icon-twitter(); |
|
} |
|
.thumbnail.thumb-vimeo { |
|
.icon-vimeo(); |
|
} |
|
.thumbnail.thumb-youtube { |
|
.icon-youtube(); |
|
} |
|
.thumbnail.thumb-video { |
|
.icon-video(); |
|
} |
|
.thumbnail.thumb-audio { |
|
.icon-audio(); |
|
} |
|
.thumbnail.thumb-map { |
|
.icon-mappin(); |
|
} |
|
.thumbnail.thumb-website { |
|
.icon-website(); |
|
} |
|
.thumbnail.thumb-wikipedia { |
|
.icon-wikipedia(); |
|
} |
|
|
|
.zFront { |
|
z-index:204; |
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|