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.
349 lines
6.2 KiB
349 lines
6.2 KiB
/* |
|
* VMM Timeline Core |
|
* Basic and global styles for generating structural layout |
|
* ------------------------------------------------------------------------------------------- */ |
|
|
|
/* TIMELINE EMBED |
|
================================================== */ |
|
#timeline-embed { |
|
background-color: @color-base; |
|
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; |
|
|
|
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.35); |
|
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,.35); |
|
box-shadow: 1px 1px 3px rgba(0,0,0,.35); |
|
} |
|
#timeline-embed.full-embed { |
|
overflow:hidden; |
|
border: 0 !important; |
|
padding: 0 !important; |
|
margin: 0 !important; |
|
clear:both; |
|
-webkit-border-radius: 0 !important; |
|
-moz-border-radius: 0 !important; |
|
border-radius: 0 !important; |
|
-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important; |
|
-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important; |
|
box-shadow:0px 0px 0px rgba(0, 0, 0, 0.25) !important; |
|
} |
|
#timeline-embed.sized-embed { |
|
overflow:hidden; |
|
border: 1px solid @color-line; |
|
padding-top:7px; |
|
padding-bottom:7px; |
|
margin: 0 !important; |
|
clear:both; |
|
-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important; |
|
-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important; |
|
box-shadow:0px 0px 0px rgba(0, 0, 0, 0.25) !important; |
|
|
|
} |
|
|
|
/* 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; |
|
|
|
.vmm-clear:before, |
|
.vmm-clear:after { |
|
content:""; |
|
display:table; |
|
} |
|
.vmm-clear:after { |
|
clear:both; |
|
} |
|
.vmm-clear { |
|
*zoom:1; |
|
} |
|
|
|
/* 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-base; |
|
} |
|
div.loading { |
|
display:table; |
|
text-align:center; |
|
min-width: 100px; |
|
margin-top:@base-space; |
|
height:100%; |
|
width:100%; |
|
background-color: @color-background; |
|
.loading-container { |
|
display:table-cell; |
|
vertical-align:middle; |
|
.loading-icon { |
|
display:block; |
|
background-repeat:no-repeat; |
|
vertical-align:middle; |
|
margin-left:auto; |
|
margin-right:auto; |
|
text-align:center; |
|
.loading-sprite(); |
|
width:28px; |
|
height:28px; |
|
} |
|
.message { |
|
display:block; |
|
} |
|
.message, .message p { |
|
text-align:center; |
|
font-size: @base-font-small; |
|
line-height:@base-font-small + 2; |
|
text-transform: uppercase; |
|
margin-top:@base-space/2; |
|
margin-bottom:@base-space/2; |
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
/* 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; |
|
} |
|
|
|
|
|
.vcard { |
|
float:right; |
|
margin-bottom:@base-space; |
|
//position: relative; |
|
a { |
|
color: @color-dark-second; |
|
} |
|
a:hover { |
|
text-decoration: none; |
|
.fn { |
|
text-decoration: underline; |
|
} |
|
} |
|
.fn, .nickname { |
|
|
|
padding-left: 42px; |
|
} |
|
.fn { |
|
display:block; |
|
//display:inline; |
|
font-weight: bold; |
|
|
|
} |
|
.nickname { |
|
margin-top:1px; |
|
display:block; |
|
color: @color-dark-third; |
|
} |
|
|
|
.avatar { |
|
float:left; |
|
//position: absolute; |
|
display: block; |
|
width: 32px; |
|
height: 32px; |
|
img { |
|
//border: 0px solid #999; |
|
-moz-border-radius: 5px; |
|
-webkit-border-radius: 5px; |
|
border-radius: 5px; |
|
} |
|
} |
|
} |
|
|
|
.thumbnail { |
|
width:@base-thumb; |
|
height:@base-thumb; |
|
overflow:hidden; |
|
float:left; |
|
margin:0; |
|
margin-right:1px; |
|
margin-top:6px; |
|
|
|
//Fixes for bootstrap sites |
|
border:0; |
|
padding:0; |
|
-webkit-border-radius: 0; |
|
-moz-border-radius: 0; |
|
border-radius: 0; |
|
-webkit-box-shadow: none; |
|
-moz-box-shadow: none; |
|
box-shadow: none; |
|
} |
|
// fixes for bootstrap sites |
|
a.thumbnail:hover { |
|
-webkit-box-shadow: none; |
|
-moz-box-shadow: none; |
|
box-shadow: none; |
|
} |
|
|
|
.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-link { |
|
.icon-link(); |
|
} |
|
.thumbnail.thumb-wikipedia { |
|
.icon-wikipedia(); |
|
} |
|
.thumbnail.thumb-storify { |
|
.icon-storify(); |
|
} |
|
.thumbnail.thumb-googleplus { |
|
.icon-googleplus(); |
|
} |
|
thumbnail.thumb-instagram { |
|
.icon-instagram(); |
|
} |
|
|
|
thumbnail.thumb-instagram-full { |
|
.icon-instagram-full(); |
|
} |
|
.thumb-storify-full { |
|
//display:inline-block; |
|
height:12px; |
|
.icon-storify-full(); |
|
} |
|
|
|
.thumbnail-inline { |
|
width:16px; |
|
height:14px; |
|
overflow:hidden; |
|
display:inline-block; |
|
margin-right:1px; |
|
margin-left:3px; |
|
margin-top:2px; |
|
//float:left; |
|
.opacity(50); |
|
} |
|
.twitter { |
|
.thumbnail-inline { |
|
.icon-twitter-inline(); |
|
} |
|
} |
|
.storify { |
|
.thumbnail-inline { |
|
.icon-storify-inline(); |
|
} |
|
} |
|
.googleplus { |
|
.thumbnail-inline { |
|
.icon-googleplus-inline(); |
|
} |
|
} |
|
|
|
|
|
.zFront { |
|
z-index:204; |
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|