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.
 
 
 
 

327 lines
5.8 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;
//.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;
}
.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();
}
.thumb-storify-full {
//display:inline-block;
height:12px;
.icon-storify-full();
}
thumbnail.thumb-instagram {
.icon-instagram();
}
thumbnail.thumb-instagram-full {
.icon-instagram-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;
}
}