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.
624 lines
13 KiB
624 lines
13 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; |
|
width:100px; |
|
position:absolute; |
|
} |
|
.icon { |
|
margin-top:@feature-nav-icon-wh/2; |
|
margin-bottom:@base-space; |
|
} |
|
.date, .title { |
|
line-height:14px; |
|
a { |
|
color: @color-nav-description; |
|
} |
|
small { |
|
display:none; |
|
} |
|
} |
|
.date { |
|
font-size: @base-font-small + 2; |
|
line-height: @base-font-small + 2; |
|
|
|
//font-size: @base-font; |
|
//line-height: @base-line; |
|
font-weight: bold; |
|
|
|
text-transform: uppercase; |
|
margin-bottom:5px; |
|
} |
|
.title { |
|
font-size: @base-font-small; |
|
line-height: @base-font-small + 2; |
|
} |
|
} |
|
|
|
.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; |
|
//overflow-x:hidden; |
|
overflow-y:auto; |
|
|
|
.content { |
|
display:table-cell; |
|
vertical-align:middle; |
|
|
|
/* All Slides |
|
================================================== */ |
|
.pad-top { |
|
.text { |
|
.container { |
|
padding-top: @base-space; |
|
} |
|
} |
|
} |
|
.pad-right { |
|
.text { |
|
.container { |
|
padding-right: @base-space; |
|
} |
|
} |
|
} |
|
.pad-left { |
|
.text { |
|
.container { |
|
padding-left: @base-space*2; |
|
} |
|
} |
|
.media.text-media { |
|
.media-wrapper { |
|
.media-container { |
|
border: none; |
|
background-color: @white; |
|
} |
|
} |
|
} |
|
|
|
} |
|
.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; |
|
p { |
|
-webkit-hyphens:auto; |
|
-moz-hyphens:auto; |
|
-ms-hyphens:auto; |
|
hyphens:auto; |
|
word-wrap:break-word; |
|
} |
|
} |
|
} |
|
.media { |
|
width:100%; |
|
min-width:50%; |
|
float: left; |
|
.media-wrapper { |
|
display:inline-block; |
|
margin-left: auto; |
|
margin-right: auto; |
|
.media-container { |
|
display:inline-block; |
|
line-height:0px; |
|
padding:0px; |
|
max-height:100%; |
|
//overflow:hidden; |
|
|
|
/* MEDIA SHADOWS AND BORDERS |
|
================================================== */ |
|
.media-frame, .media-image img { |
|
border: 1px solid; |
|
border-color: @color-line @color-dark-fourth @color-dark-fourth @color-line; |
|
background:@color-background; |
|
} |
|
.soundcloud { |
|
border: 0; |
|
} |
|
.media-image { |
|
display: inline-block; |
|
} |
|
|
|
.media-shadow { |
|
position: relative; |
|
z-index: 1; |
|
background:@color-background; |
|
|
|
} |
|
.media-shadow:before, .media-shadow:after { |
|
z-index: -1; |
|
position: absolute; |
|
content: ""; |
|
bottom: 15px; |
|
left: 10px; |
|
width: 50%; |
|
top: 80%; |
|
max-width:300px; |
|
background: @color-dark-fourth; |
|
-webkit-box-shadow: 0 15px 10px @color-dark-fourth; |
|
-moz-box-shadow: 0 15px 10px @color-dark-fourth; |
|
box-shadow: 0 15px 10px @color-dark-fourth; |
|
-webkit-transform: rotate(-2deg); |
|
-moz-transform: rotate(-2deg); |
|
-o-transform: rotate(-2deg); |
|
-ms-transform: rotate(-2deg); |
|
transform: rotate(-2deg); |
|
} |
|
.media-shadow::after { |
|
-webkit-transform: rotate(2deg); |
|
-moz-transform: rotate(2deg); |
|
-o-transform: rotate(2deg); |
|
-ms-transform: rotate(2deg); |
|
transform: rotate(2deg); |
|
right: 10px; |
|
left: auto; |
|
} |
|
span.messege { |
|
display:block; |
|
vertical-align:middle; |
|
margin-left:auto; |
|
margin-right:auto; |
|
text-align:center; |
|
background:@color-background; |
|
//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; |
|
} |
|
} |
|
} |
|
.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; |
|
font-size: 13px; |
|
line-height: 19px; |
|
font-style: italic; |
|
} |
|
h4 { |
|
border-bottom: 1px solid @color-line; |
|
margin-bottom:5px; |
|
} |
|
h4 a { |
|
color: @color-feature-title; |
|
} |
|
h4 a:hover { |
|
color: @color-theme; |
|
text-decoration: none; |
|
} |
|
|
|
p { |
|
font-size: 13px; |
|
line-height: 19px; |
|
} |
|
} |
|
.map { |
|
line-height: normal; |
|
z-index:200; |
|
text-align:left; |
|
background-color:@white; |
|
|
|
img { |
|
max-height:none !important; |
|
max-width:none !important; |
|
border:0; |
|
-webkit-box-shadow: none; |
|
-moz-box-shadow: none; |
|
box-shadow: none; |
|
|
|
} |
|
.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; |
|
display: block; |
|
margin: 0 auto; |
|
margin-top:6px; |
|
.text-font(@base-font-small - 1); |
|
//max-height:16px; |
|
//overflow:auto; |
|
} |
|
.caption { |
|
text-align:left; |
|
margin-top:@base-font-small - 1; |
|
color: @color-caption; |
|
.text-font(@base-font-small); |
|
text-rendering: optimizeLegibility; |
|
word-wrap: break-word; |
|
//max-height:45px; |
|
//overflow-x:hidden; |
|
//overflow-y:auto; |
|
} |
|
} |
|
} |
|
} |
|
.media.text-media { |
|
.media-wrapper { |
|
.media-container { |
|
border: none; |
|
background-color: @white; |
|
} |
|
} |
|
} |
|
.created-at { |
|
width:24px; |
|
height:24px; |
|
overflow:hidden; |
|
margin-left:@base-space/2; |
|
margin-top:2px; |
|
display:inline-block; |
|
float:right; |
|
.opacity(25); |
|
} |
|
.created-at:hover { |
|
.opacity(100); |
|
} |
|
.storify { |
|
.created-at { |
|
.icon-storify(); |
|
} |
|
} |
|
.twitter { |
|
.created-at { |
|
.icon-twitter(); |
|
} |
|
} |
|
.googleplus { |
|
.googleplus-content { |
|
font-size: 13px; |
|
line-height: 19px; |
|
|
|
margin-bottom: 6px; |
|
padding-top: 10px; |
|
background-color:@white; |
|
color: @color-feature-description; |
|
p { |
|
font-size: 13px; |
|
line-height: 19px; |
|
} |
|
.googleplus-title { |
|
font-size: @base-font-large; |
|
line-height: @base-line-large; |
|
margin-bottom: 6px; |
|
padding-top: 10px; |
|
background-color:@white; |
|
color:@color-feature-title; |
|
} |
|
.googleplus-annotation { |
|
font-size: @base-font; |
|
line-height: @base-line; |
|
color: @color-feature-title; |
|
border-bottom: 1px solid @color-dark-fifth; |
|
padding-bottom: @base-space/2; |
|
margin-bottom: @base-space/2; |
|
} |
|
.googleplus-attachments { |
|
border-top: 1px solid @color-dark-fifth; |
|
padding-top: @base-space; |
|
margin-top: @base-space; |
|
border-bottom: 1px solid @color-dark-fifth; |
|
padding-bottom: @base-space; |
|
margin-bottom: @base-space; |
|
.clearfix(); |
|
h5 { |
|
margin-bottom:5px; |
|
} |
|
a:hover { |
|
text-decoration: none; |
|
h5 { |
|
text-decoration: underline; |
|
} |
|
} |
|
div { |
|
width: 50%; |
|
padding-left: @base-space; |
|
display:inline-block; |
|
} |
|
|
|
p { |
|
.text-font(@base-font-small); |
|
margin-bottom: 5px; |
|
//float:left; |
|
} |
|
img { |
|
float:left; |
|
display: block; |
|
bottom: 0; |
|
left: 0; |
|
margin: auto; |
|
position: relative; |
|
right: 0; |
|
top: 0; |
|
width: 40%; |
|
//display:inline-block; |
|
} |
|
|
|
} |
|
} |
|
.proflinkPrefix { |
|
color:@color-theme; |
|
} |
|
.created-at { |
|
.icon-googleplus(); |
|
} |
|
} |
|
|
|
.twitter, .plain-text-quote, .storify, .googleplus { |
|
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: @base-font-large; |
|
line-height: @base-line-large; |
|
margin-bottom: 6px; |
|
padding-top: 10px; |
|
background-color:@white; |
|
color:@color-feature-title; |
|
} |
|
.quote-mark { |
|
color:@color-dark-third; |
|
} |
|
} |
|
} |
|
|
|
|
|
} |
|
|
|
|
|
/* Text and Media Slides |
|
================================================== */ |
|
|
|
.content-container.layout-text-media { |
|
.text-media { |
|
border-top: 1px solid @color-dark-fifth; |
|
padding-top:@base-space; |
|
padding-right:0; |
|
} |
|
|
|
} |
|
.content-container.layout-text-media.pad-left { |
|
.text-media { |
|
padding-right:@base-space; |
|
padding-top:0; |
|
border-right: 1px solid @color-dark-fifth; |
|
border-top: 0px solid @color-dark-fifth; |
|
} |
|
} |
|
|
|
/* 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, .googleplus { |
|
max-width:70%; |
|
} |
|
|
|
} |
|
} |
|
} |
|
} |