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.
439 lines
8.8 KiB
439 lines
8.8 KiB
/* Slider |
|
------------------------------------------------------------------------------------------- */ |
|
|
|
/* SLIDER CONTAINERS |
|
================================================== */ |
|
.slider { |
|
width:100%; |
|
height:100%; |
|
overflow:hidden; |
|
.slider-container-mask { |
|
text-align: center; |
|
width: 100%; |
|
height: 100%; |
|
overflow: hidden; |
|
|
|
.slider-container { |
|
position: absolute; |
|
top: 0px; |
|
left: -2160px; |
|
width: 100%; |
|
height: 100%; |
|
text-align: center; |
|
display: block; |
|
|
|
background-color: @white; |
|
|
|
.slider-item-container { |
|
//overflow:hidden; |
|
display:table-cell; |
|
vertical-align:middle; |
|
} |
|
|
|
} |
|
|
|
} |
|
} |
|
|
|
/* SLIDER ELEMENTS |
|
================================================== */ |
|
.slider { |
|
img, embed, object, video, iframe { |
|
max-width: 100%; |
|
} |
|
} |
|
|
|
/* SLIDER NAV |
|
================================================== */ |
|
.slider { |
|
//position: relative; |
|
|
|
.nav-previous, .nav-next { |
|
position:absolute; |
|
top: 0px; |
|
width: @feature-nav-width; |
|
color: #DBDBDB; |
|
font-size:@base-font-small; |
|
.nav-container { |
|
height:100px; |
|
position:absolute; |
|
} |
|
.icon { |
|
margin-top:@feature-nav-icon-wh/2; |
|
margin-bottom:@base-space; |
|
} |
|
.date { |
|
font-size: @base-font; |
|
font-weight: bold; |
|
line-height: @base-line; |
|
|
|
text-transform: uppercase; |
|
margin-bottom:5px; |
|
} |
|
.date, .title { |
|
line-height:14px; |
|
a { |
|
color: @color-nav-description; |
|
} |
|
small { |
|
display:none; |
|
} |
|
|
|
} |
|
} |
|
|
|
.nav-previous:hover, .nav-next:hover { |
|
color: @color-dark-second; |
|
cursor: pointer; |
|
} |
|
.nav-previous { |
|
float: left; |
|
text-align:left; |
|
.icon { |
|
margin-left: @base-space; |
|
.icon-previous(); |
|
} |
|
.date, .title { |
|
text-align:left; |
|
padding-left:@base-space; |
|
} |
|
} |
|
.nav-previous:hover { |
|
.icon { |
|
margin-left: @base-space - 5; |
|
} |
|
} |
|
|
|
.nav-next { |
|
float: right; |
|
text-align:right; |
|
.icon { |
|
margin-left: @feature-nav-width - @base-space - @feature-nav-icon-wh; |
|
.icon-next() |
|
} |
|
.date, .title { |
|
text-align:right; |
|
padding-right:@base-space; |
|
} |
|
} |
|
.nav-next:hover { |
|
.icon { |
|
margin-left: @feature-nav-width - @base-space - @feature-nav-icon-wh + 5; |
|
} |
|
} |
|
|
|
|
|
} |
|
|
|
|
|
/* SLIDE CONTENT |
|
================================================== */ |
|
.slider { |
|
.slider-item { |
|
position:absolute; |
|
width:700px; |
|
height:100%; |
|
padding:0px; |
|
margin:0px; |
|
overflow: hidden; |
|
display:table; |
|
.content { |
|
display:table-cell; |
|
vertical-align:middle; |
|
/* All Slides |
|
================================================== */ |
|
.content-container { |
|
display:table; |
|
vertical-align:middle; |
|
.text { |
|
width:40%; |
|
max-width:50%; |
|
min-width:120px; |
|
display:table-cell; |
|
vertical-align:middle; |
|
.container { |
|
display:table-cell; |
|
vertical-align:middle; |
|
text-align:left; |
|
padding-right: @base-space; |
|
} |
|
} |
|
.media { |
|
width:100%; |
|
min-width:50%; |
|
float: left; |
|
.media-wrapper { |
|
margin-left: auto; |
|
margin-right: auto; |
|
.media-container { |
|
display:inline-block; |
|
overflow: hidden; |
|
line-height:0px; |
|
padding:0px; |
|
//max-height:400px; |
|
span.messege { |
|
display:block; |
|
vertical-align:middle; |
|
margin-left:auto; |
|
margin-right:auto; |
|
text-align:center; |
|
margin-top: 50%; |
|
font-size: 28px; |
|
font-weight: bold; |
|
text-transform: uppercase; |
|
} |
|
.plain-text { |
|
display:table; |
|
.container { |
|
display:table-cell; |
|
vertical-align:middle; |
|
font-size: @base-font; |
|
line-height:@base-line; |
|
color: @color-feature-description; |
|
p { |
|
margin-bottom:@base-line; |
|
} |
|
} |
|
} |
|
.twitter { |
|
text-align:left; |
|
margin-left: auto; |
|
margin-right: auto; |
|
margin-bottom:@base-space; |
|
clear:both; |
|
blockquote { |
|
font-size: @base-font; |
|
line-height: @base-line; |
|
color:@color-feature-description; |
|
p { |
|
font-size: 28px; |
|
line-height: 36px; |
|
margin-bottom: 6px; |
|
padding-top: 10px; |
|
background-color:@white; |
|
color:@color-feature-title; |
|
//margin-left:10px; |
|
} |
|
.quote-mark { |
|
color:@color-dark-third; |
|
} |
|
} |
|
.created-at { |
|
.icon-twitter(); |
|
width:24px; |
|
height:24px; |
|
overflow:hidden; |
|
margin-left:@base-space; |
|
display:inline-block; |
|
float:right; |
|
.opacity(25); |
|
} |
|
.created-at:hover { |
|
.opacity(100); |
|
} |
|
.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:3px; |
|
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; |
|
} |
|
} |
|
} |
|
} |
|
.wikipedia { |
|
font-size: @base-font; |
|
line-height: @base-line; |
|
text-align:left; |
|
margin-left: auto; |
|
margin-right: auto; |
|
margin-bottom:@base-space; |
|
clear:both; |
|
.wiki-source { |
|
margin-bottom:@base-space; |
|
} |
|
h4 { |
|
border-bottom: 1px solid @color-line; |
|
margin-bottom:5px; |
|
font-style: italic; |
|
} |
|
p { |
|
font-size: 13px; |
|
line-height: 19px; |
|
} |
|
} |
|
img, iframe { |
|
border: 1px solid @color-line; |
|
//max-height:350px; |
|
} |
|
.map { |
|
line-height: normal; |
|
border: 1px solid @color-line; |
|
z-index:200; |
|
text-align:left; |
|
background-color:@white; |
|
img { |
|
max-height:none !important; |
|
max-width:none !important; |
|
} |
|
.google-map { |
|
height:100%; |
|
width:100%; |
|
} |
|
.map-attribution { |
|
position: absolute; |
|
z-index: 201; |
|
//right: 0px; |
|
bottom: 0px; |
|
width:100%; |
|
overflow:hidden; |
|
|
|
.attribution-text { |
|
height: 19px; |
|
overflow:hidden; |
|
-webkit-user-select: none; |
|
line-height: 19px; |
|
margin-right: 60px; |
|
padding-left: 65px; |
|
font-family: Arial, sans-serif; |
|
font-size: 10px; |
|
//font-weight: bold; |
|
color: #444; |
|
white-space: nowrap; |
|
color:@color-base; |
|
text-shadow:1px 1px 1px @color-dark-second; |
|
//direction: ltr; |
|
text-align: center; |
|
a { |
|
color:@color-base !important; |
|
|
|
} |
|
|
|
} |
|
} |
|
} |
|
} |
|
.credit { |
|
color: @color-credit; |
|
text-align: right; |
|
font-size: 10px; |
|
line-height: 10px; |
|
display: block; |
|
margin: 0 auto; |
|
margin-top:4px; |
|
} |
|
.caption { |
|
text-align:left; |
|
margin-top:10px; |
|
color: @color-caption; |
|
font-size: 11px; |
|
line-height: 14px; |
|
} |
|
} |
|
} |
|
} |
|
.media.text-media { |
|
.media-wrapper { |
|
.media-container { |
|
border: none; |
|
background-color: @white; |
|
} |
|
} |
|
} |
|
} |
|
|
|
/* Text Only Slides |
|
================================================== */ |
|
.content-container.layout-text { |
|
width:100%; |
|
.text { |
|
width:100%; |
|
max-width:100%; |
|
.container { |
|
display:block; |
|
vertical-align:middle; |
|
text-align:left; |
|
padding:0px; |
|
width: 90%; |
|
text-align:left; |
|
margin-left: auto; |
|
margin-right: auto; |
|
} |
|
} |
|
} |
|
|
|
/* Media Only Slides |
|
================================================== */ |
|
.content-container.layout-media { |
|
width:100%; |
|
.text { |
|
width:100%; |
|
height:100%; |
|
max-width:100%; |
|
display:block; |
|
text-align:center; |
|
.container { |
|
display:block; |
|
text-align:center; |
|
width:100%; |
|
margin-left: none; |
|
margin-right: none; |
|
} |
|
} |
|
.media { |
|
width:100%; |
|
min-width:50%; |
|
float: none; |
|
.media-wrapper { |
|
display:block; |
|
.media-container { |
|
margin-left: auto; |
|
margin-right: auto; |
|
overflow: hidden; |
|
line-height:0px; |
|
padding:0px; |
|
} |
|
|
|
} |
|
} |
|
.twitter, .wikipedia { |
|
max-width:70%; |
|
} |
|
} |
|
} |
|
} |
|
} |