Zach Wise
12 years ago
8 changed files with 0 additions and 1677 deletions
@ -1,37 +0,0 @@
|
||||
/* |
||||
FONT |
||||
Default |
||||
------------------------------------------------------------------------------------------- */ |
||||
|
||||
@font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; |
||||
@font-serif: "Georgia", Times New Roman, Times, serif; |
||||
|
||||
.vmm-storyjs { |
||||
font-family: @font-serif; |
||||
/* HEADERS |
||||
------------------------------------------------------------------------------------------- */ |
||||
.twitter, .vcard, .messege, .credit, .caption, .zoom-in, .zoom-out, .back-home, .time-interval div, .time-interval-major div, .nav-container, { |
||||
font-family: @font-sans !important; |
||||
} |
||||
h1.date, h2.date, h3.date, h4.date, h5.date, h6.date { |
||||
font-family: @font-sans !important; |
||||
} |
||||
.timenav, .flag-content, .era { |
||||
h1, h2, h3, h4, h5, h6 { |
||||
font-family: @font-sans !important; |
||||
} |
||||
} |
||||
/* CONTENT |
||||
------------------------------------------------------------------------------------------- */ |
||||
p, blockquote, blockquote p, .twitter blockquote p { |
||||
font-family: @font-serif !important; |
||||
} |
||||
.feature { |
||||
h1, h2, h3, h4, h5, h6 { |
||||
font-family: @font-serif; |
||||
} |
||||
} |
||||
} |
||||
.tooltip { |
||||
font-family: @font-sans; |
||||
} |
||||
@ -1,297 +0,0 @@
|
||||
/* |
||||
GFX |
||||
Icons etc |
||||
----------------------------------------------------------------- */ |
||||
|
||||
/* Feature Navigation |
||||
----------------------------------------------------------------- */ |
||||
.icon-previous() { |
||||
height:24px; |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -160px 0; width: 24px; height: 24px; |
||||
overflow:hidden; |
||||
} |
||||
|
||||
.icon-next() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -184px 0; width: 24px; height: 24px; |
||||
height:24px; |
||||
overflow:hidden; |
||||
|
||||
} |
||||
/* TimeNav Navigation |
||||
----------------------------------------------------------------- */ |
||||
.icon-zoom-in() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -256px 0; width: 24px; height: 24px; |
||||
} |
||||
.icon-zoom-out() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -280px 0; width: 24px; height: 24px; |
||||
} |
||||
.icon-back-home() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -328px 0; width: 24px; height: 24px; |
||||
} |
||||
|
||||
/* Time Flag |
||||
----------------------------------------------------------------- */ |
||||
.time-flag() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: 0 0; width:153px; height: 53px; |
||||
} |
||||
.time-flag-active() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: 0 -53px; width:153px; height: 53px; |
||||
} |
||||
.time-flag-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: 0 -135px; width:153px; height: 26px; |
||||
} |
||||
.time-flag-small-active() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: 0 -109px; width:153px; height: 26px; |
||||
} |
||||
|
||||
/* Thumbnail Icons |
||||
----------------------------------------------------------------- */ |
||||
.icon-map() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -208px -24px; |
||||
} |
||||
.icon-mappin() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -208px -48px; |
||||
} |
||||
.icon-website() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -232px -24px; |
||||
} |
||||
.icon-document() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -256px -48px; |
||||
} |
||||
.icon-quote() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -232px -48px; |
||||
} |
||||
.icon-plaintext() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -280px -48px; |
||||
} |
||||
.icon-twitter() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -256px -24px; |
||||
} |
||||
.icon-video() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -328px -24px; |
||||
} |
||||
.icon-audio() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -304px -24px; |
||||
} |
||||
.icon-photo() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -280px -24px; |
||||
} |
||||
.icon-link() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -184px -72px; |
||||
} |
||||
.icon-storify() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -328px -96px; |
||||
} |
||||
.icon-wikipedia() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -184px -48px; |
||||
} |
||||
.icon-instagram() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -208px -96px; |
||||
} |
||||
.icon-googleplus() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -208px -72px; |
||||
} |
||||
.icon-vimeo() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -328px -48px; |
||||
} |
||||
.icon-youtube() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -328px -72px; |
||||
} |
||||
|
||||
/* Thumbnail Icons Small 10px |
||||
----------------------------------------------------------------- */ |
||||
.icon-map-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -208px -120px; |
||||
} |
||||
.icon-mappin-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -208px -120px; |
||||
} |
||||
.icon-website-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -232px -120px; |
||||
} |
||||
.icon-document-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -256px -130px; |
||||
} |
||||
.icon-quote-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -232px -130px; |
||||
} |
||||
.icon-plaintext-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -280px -130px; |
||||
} |
||||
.icon-twitter-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -256px -120px; |
||||
} |
||||
.icon-video-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -328px -120px; |
||||
} |
||||
.icon-audio-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -304px -120px; |
||||
} |
||||
.icon-photo-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -280px -120px; |
||||
} |
||||
.icon-link-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -232px -120px; |
||||
} |
||||
.icon-wikipedia-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -184px -120px; |
||||
} |
||||
.icon-instagram-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -208px -96px; |
||||
} |
||||
.icon-googleplus-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -208px -130px; |
||||
} |
||||
.icon-vimeo-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -328px -130px; |
||||
} |
||||
.icon-youtube-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -304px -130px; |
||||
} |
||||
.icon-storify-small() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -184px -130px; |
||||
} |
||||
|
||||
/* Thumbnail Icons (Extra) |
||||
----------------------------------------------------------------- */ |
||||
.icon-twitter-inline() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -160px -96px; |
||||
} |
||||
.icon-googleplus-inline() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -208px -96px; |
||||
} |
||||
.icon-storify-inline() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -184px -96px; |
||||
} |
||||
.icon-storify-full() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -280px -96px; |
||||
width:@base-thumb*2; |
||||
//height:12px; |
||||
} |
||||
.icon-instagram-full() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -232px -96px; |
||||
width:@base-thumb*2; |
||||
height:@base-thumb; |
||||
} |
||||
|
||||
/* Current Time Indicator |
||||
----------------------------------------------------------------- */ |
||||
.icon-currenttime() { |
||||
.base-sprite(); |
||||
background-repeat:no-repeat; |
||||
background-position: -160px -48px; |
||||
width:24px; |
||||
height:24px; |
||||
} |
||||
|
||||
/* Time Tics |
||||
----------------------------------------------------------------- */ |
||||
.background-time-tic() { |
||||
background: @color-background url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAMAAAA8JaR5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBrwkQIABAAHIABkHeR3aAAAAAElFTkSuQmCC); |
||||
} |
||||
|
||||
.background-time-interval() { |
||||
//background: @color-base url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC); |
||||
//background-repeat: no-repeat; |
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC); |
||||
|
||||
} |
||||
.background-time-interval-major() { |
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAQAQMAAADtUYf0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyOTAzRjI3REIzNDcxMUUxQUQ3QUZCOThEODQ1NDhCNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDoyOTAzRjI3RUIzNDcxMUUxQUQ3QUZCOThEODQ1NDhCNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjI5MDNGMjdCQjM0NzExRTFBRDdBRkI5OEQ4NDU0OEI3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjI5MDNGMjdDQjM0NzExRTFBRDdBRkI5OEQ4NDU0OEI3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+DPWNfQAAAANQTFRFzMzMylJEJwAAAAtJREFUCB1jYMAPAAAgAAHDvpOtAAAAAElFTkSuQmCC); |
||||
} |
||||
@ -1,216 +0,0 @@
|
||||
/* Mixins.less |
||||
* Snippets of reusable CSS to develop faster and keep code readable |
||||
* ----------------------------------------------------------------- */ |
||||
|
||||
// Text Font |
||||
.text-font(@fontsize: 15px) { |
||||
font-size: @fontsize; |
||||
line-height: round((@fontsize/100) * 130); |
||||
} |
||||
// Border Radius |
||||
.border-radius(@radius: 5px) { |
||||
-webkit-border-radius: @radius; |
||||
-moz-border-radius: @radius; |
||||
border-radius: @radius; |
||||
} |
||||
// User Select |
||||
.user-select(@userselect) { |
||||
-webkit-user-select: @userselect; |
||||
-moz-user-select: @userselect; |
||||
user-select: @userselect; |
||||
} |
||||
// Box Shadow |
||||
.box-shadow(@shadow: 1px 1px 7px rgba(0,0,0,.30)) { |
||||
-webkit-box-shadow: @shadow; |
||||
-moz-box-shadow: @shadow; |
||||
box-shadow: @shadow; |
||||
} |
||||
// Media Shadow |
||||
.media-shadow(@shadow: 0 1px 3px 0px @color-dark-fourth) { |
||||
-webkit-box-shadow: @shadow; |
||||
-moz-box-shadow: @shadow; |
||||
box-shadow: @shadow; |
||||
border: 1px solid; |
||||
border-color: @color-line @color-dark-fourth @color-dark-fourth @color-line; |
||||
} |
||||
// Transform |
||||
.transform(@transform) { |
||||
-webkit-transform: @transform; |
||||
-moz-transform: @transform; |
||||
-ms-transform: @transform; |
||||
-o-transform: @transform; |
||||
transform: @transform; |
||||
} |
||||
// Transitions |
||||
.transition(@transition) { |
||||
-webkit-transition: @transition; |
||||
-moz-transition: @transition; |
||||
-ms-transition: @transition; |
||||
-o-transition: @transition; |
||||
transition: @transition; |
||||
} |
||||
// Background clipping |
||||
.background-clip(@clip) { |
||||
-webkit-background-clip: @clip; |
||||
-moz-background-clip: @clip; |
||||
background-clip: @clip; |
||||
} |
||||
// Opacity |
||||
.opacity(@opacity: 100) { |
||||
filter: e(%("alpha(opacity=%d)", @opacity)); |
||||
-khtml-opacity: @opacity / 100; |
||||
-moz-opacity: @opacity / 100; |
||||
opacity: @opacity / 100; |
||||
} |
||||
// Hyphens |
||||
.hyphens(@hyphens: auto) { |
||||
-webkit-hyphens:@hyphens; |
||||
-moz-hyphens:@hyphens; |
||||
-ms-hyphens:@hyphens; |
||||
hyphens:@hyphens; |
||||
} |
||||
// Clear Fix |
||||
.clearfix() { |
||||
*zoom: 1; |
||||
&:before, |
||||
&:after { |
||||
display: table; |
||||
content: ""; |
||||
} |
||||
&:after { |
||||
clear: both; |
||||
} |
||||
} |
||||
// Reset filters for IE |
||||
.reset-filter() { |
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); |
||||
} |
||||
// Center-align a block level element |
||||
.center-block() { |
||||
display: block; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
} |
||||
|
||||
// Font Stacks |
||||
#font { |
||||
.shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) { |
||||
font-size: @size; |
||||
font-weight: @weight; |
||||
line-height: @lineHeight; |
||||
} |
||||
.sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) { |
||||
font-family: @font-sansserif; |
||||
font-size: @size; |
||||
font-weight: @weight; |
||||
line-height: @lineHeight; |
||||
} |
||||
.font-body(@weight: normal, @size: 14px, @lineHeight: 20px) { |
||||
font-family: @fontBody, Helvetica, Arial, sans-serif; |
||||
font-size: @size; |
||||
font-weight: @weight; |
||||
line-height: @lineHeight; |
||||
} |
||||
.font-header(@weight: normal, @size: 14px, @lineHeight: 20px) { |
||||
font-family: @fontHeader; |
||||
font-size: @size; |
||||
font-weight: @weight; |
||||
line-height: @lineHeight; |
||||
} |
||||
.serif(@weight: normal, @size: 14px, @lineHeight: 20px) { |
||||
font-family: @font-serif; |
||||
font-size: @size; |
||||
font-weight: @weight; |
||||
line-height: @lineHeight; |
||||
} |
||||
.monospace(@weight: normal, @size: 12px, @lineHeight: 20px) { |
||||
font-family: "Monaco", Courier New, monospace; |
||||
font-size: @size; |
||||
font-weight: @weight; |
||||
line-height: @lineHeight; |
||||
} |
||||
|
||||
.navigation(@weight: normal, @size: 14px, @lineHeight: 20px) { |
||||
font-family: @font-sansserif; |
||||
font-size: @size; |
||||
font-weight: @weight; |
||||
line-height: @lineHeight; |
||||
} |
||||
} |
||||
|
||||
// CSS3 Content Columns |
||||
.content-columns(@columnCount, @columnGap: 20px) { |
||||
-webkit-column-count: @columnCount; |
||||
-moz-column-count: @columnCount; |
||||
column-count: @columnCount; |
||||
-webkit-column-gap: @columnGap; |
||||
-moz-column-gap: @columnGap; |
||||
column-gap: @columnGap; |
||||
} |
||||
|
||||
// Add an alphatransparency value to any background or border color (via Elyse Holladay) |
||||
#translucent { |
||||
.background(@color: @white, @alpha: 1) { |
||||
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); |
||||
} |
||||
.border(@color: @white, @alpha: 1) { |
||||
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); |
||||
background-clip: padding-box; |
||||
} |
||||
} |
||||
|
||||
// Gradient Bar Colors for buttons and allerts |
||||
.gradientBar(@primaryColor, @secondaryColor) { |
||||
#gradient > .vertical(@primaryColor, @secondaryColor); |
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25); |
||||
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); |
||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); |
||||
} |
||||
|
||||
// Gradients |
||||
#gradient { |
||||
.horizontal (@startColor: #555, @endColor: #333) { |
||||
background-color: @endColor; |
||||
background-repeat: repeat-x; |
||||
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror |
||||
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ |
||||
background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10 |
||||
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ |
||||
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ |
||||
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 |
||||
background-image: linear-gradient(left, @startColor, @endColor); // Le standard |
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down |
||||
} |
||||
.vertical (@startColor: #555, @endColor: #333) { |
||||
background-color: @endColor; |
||||
background-repeat: repeat-x; |
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror |
||||
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ |
||||
background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10 |
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ |
||||
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ |
||||
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 |
||||
background-image: linear-gradient(top, @startColor, @endColor); // The standard |
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down |
||||
} |
||||
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) { |
||||
background-color: @endColor; |
||||
background-repeat: repeat-x; |
||||
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ |
||||
background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10 |
||||
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ |
||||
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 |
||||
background-image: linear-gradient(@deg, @startColor, @endColor); // The standard |
||||
} |
||||
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { |
||||
background-color: @endColor; |
||||
background-repeat: no-repeat; |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); |
||||
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); |
||||
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); |
||||
background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor); |
||||
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); |
||||
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); |
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback |
||||
} |
||||
} |
||||
@ -1,105 +0,0 @@
|
||||
/* Reset |
||||
------------------------------------------------------------------------------------------- */ |
||||
|
||||
.vmm-storyjs { |
||||
|
||||
/* Reset tags and common classes |
||||
Display in IE6-9 and FF3 |
||||
Based on: http://github.com/necolas/normalize.css |
||||
------------------------------------------------------------------------------------------- */ |
||||
|
||||
div * { |
||||
-webkit-box-sizing:content-box; |
||||
-moz-box-sizing:content-box; |
||||
box-sizing:content-box; |
||||
} |
||||
|
||||
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, |
||||
sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, |
||||
.container, .content-container, .media, .text, .slider, .date, .title, .messege, .map, .credit, .caption, .feedback, .feature, .toolbar, |
||||
.marker, .dot, .line, .flag, .time, .era, .major, .minor, .navigation, .start, .active { |
||||
margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; |
||||
} |
||||
table { border-collapse: collapse; border-spacing: 0;} |
||||
ol, ul { list-style: none;} |
||||
q:before, q:after, blockquote:before, blockquote:after { content: ""; } |
||||
a:focus { outline: thin dotted; } |
||||
a:hover, a:active { outline: 0;} |
||||
article, aside, details, figcaption, figure, footer, header, hgroup, nav, section { |
||||
display: block; |
||||
} |
||||
audio, canvas, video { |
||||
display: inline-block; |
||||
*display: inline; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
/* Prevents modern browsers from displaying 'audio' without controls |
||||
Based on: http://github.com/necolas/normalize.css |
||||
------------------------------------------------------------------------------------------- */ |
||||
audio:not([controls]) { |
||||
display: none; |
||||
} |
||||
div { |
||||
max-width:none; |
||||
} |
||||
|
||||
/* Prevents sub and sup affecting line-height in all browsers |
||||
Based on: http://github.com/necolas/normalize.css |
||||
------------------------------------------------------------------------------------------- */ |
||||
sub, sup { |
||||
font-size: 75%; |
||||
line-height: 0; |
||||
position: relative; |
||||
vertical-align: baseline; |
||||
} |
||||
sup { |
||||
top: -0.5em; |
||||
} |
||||
sub { |
||||
bottom: -0.25em; |
||||
} |
||||
|
||||
/* Img border in a's and image quality |
||||
Based on: http://github.com/necolas/normalize.css |
||||
------------------------------------------------------------------------------------------- */ |
||||
img { |
||||
border: 0; |
||||
-ms-interpolation-mode: bicubic; |
||||
} |
||||
|
||||
/* Forms |
||||
Based on: http://github.com/necolas/normalize.css |
||||
------------------------------------------------------------------------------------------- */ |
||||
button, input, select, textarea { |
||||
font-size: 100%; |
||||
margin: 0; |
||||
vertical-align: baseline; |
||||
*vertical-align: middle; |
||||
} |
||||
button, input { |
||||
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet |
||||
*overflow: visible; // Inner spacing ie IE6/7 |
||||
} |
||||
button::-moz-focus-inner, input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 |
||||
border: 0; |
||||
padding: 0; |
||||
} |
||||
button, input[type="button"], input[type="reset"], input[type="submit"] { |
||||
cursor: pointer; // Cursors on all buttons applied consistently |
||||
-webkit-appearance: button; // Style clicable inputs in iOS |
||||
} |
||||
input[type="search"] { // Appearance in Safari/Chrome |
||||
-webkit-appearance: textfield; |
||||
-webkit-box-sizing: content-box; |
||||
-moz-box-sizing: content-box; |
||||
box-sizing: content-box; |
||||
} |
||||
input[type="search"]::-webkit-search-decoration { |
||||
-webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5 |
||||
} |
||||
textarea { |
||||
overflow: auto; // Remove vertical scrollbar in IE6-9 |
||||
vertical-align: top; // Readability and alignment cross-browser |
||||
} |
||||
} |
||||
@ -1,188 +0,0 @@
|
||||
/* Typography.less |
||||
* Headings, body text, lists, etc |
||||
* ---------------------------------------------------------------------------------------- */ |
||||
|
||||
.vmm-storyjs { |
||||
font-size: @base-font; |
||||
font-weight: normal; |
||||
line-height: @base-line; |
||||
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ |
||||
-webkit-text-size-adjust: 100%; |
||||
|
||||
p { |
||||
font-size: @base-font; |
||||
font-weight: normal; |
||||
line-height: @base-line; |
||||
margin-bottom: @base-line; |
||||
color: @color-feature-description; |
||||
|
||||
small { |
||||
font-size: @base-font - 3; |
||||
line-height: @base-line - 3; |
||||
} |
||||
} |
||||
p:first-child { |
||||
margin-top:@base-line; |
||||
} |
||||
.navigation { |
||||
p { |
||||
color: @color-nav-description; |
||||
} |
||||
} |
||||
.feature { |
||||
h3, h4, h5, h6 { |
||||
margin-bottom: @base-space; |
||||
} |
||||
p { |
||||
color: @color-feature-description; |
||||
} |
||||
blockquote, blockquote p { |
||||
color:@color-feature-title; |
||||
} |
||||
} |
||||
.date, .title { |
||||
a { |
||||
color: @color-nav-description; |
||||
} |
||||
} |
||||
.hyphenate { |
||||
.hyphens(auto); |
||||
word-wrap:break-word; |
||||
} |
||||
|
||||
h1, h2, h3, h4, h5, h6 { |
||||
font-weight: normal; |
||||
color: @color-feature-title; |
||||
text-transform: none; |
||||
a { |
||||
color: @color-nav-description; |
||||
} |
||||
small { |
||||
color: @color-nav-title; |
||||
} |
||||
} |
||||
h1.date, h2.date, h3.date, h4.date, h5.date, h6.date { |
||||
font-weight: bold; |
||||
} |
||||
h2.start { |
||||
//font-size: 42px; |
||||
//line-height: 44px; |
||||
font-size: 36px; |
||||
line-height: 38px; |
||||
|
||||
margin-bottom: @base-space; |
||||
} |
||||
h1 { |
||||
margin-bottom: @base-space; |
||||
font-size: 32px; |
||||
line-height: 34px; |
||||
small { |
||||
font-size: 18px; |
||||
} |
||||
} |
||||
h2 { |
||||
margin-bottom: @base-space; |
||||
font-size: 28px; |
||||
line-height: 30px; |
||||
|
||||
small { |
||||
font-size: 14px; |
||||
line-height: 16px; |
||||
|
||||
//margin-left:5px; |
||||
} |
||||
} |
||||
h2.date { |
||||
font-size: 16px; |
||||
line-height:18px; |
||||
margin-bottom: @base-space/4; |
||||
color:@color-feature-date; |
||||
|
||||
//margin-bottom: @base-space; |
||||
} |
||||
h3, h4, h5, h6 { |
||||
line-height: @base-line * 2; |
||||
.active { |
||||
color: @color-theme; |
||||
} |
||||
} |
||||
h3 { |
||||
font-size: 28px; |
||||
line-height: 30px; |
||||
//font-size: 24px; |
||||
//line-height:26px; |
||||
small { |
||||
font-size: 14px; |
||||
} |
||||
} |
||||
h4 { |
||||
font-size: 20px; |
||||
line-height: 22px; |
||||
//font-size: 16px; |
||||
//line-height:18px; |
||||
small { |
||||
font-size: 12px; |
||||
} |
||||
} |
||||
h5 { |
||||
font-size: 16px; |
||||
line-height:18px; |
||||
|
||||
//font-size: 14px; |
||||
//line-height:16px; |
||||
} |
||||
h6 { |
||||
font-size: 13px; |
||||
line-height:14px; |
||||
text-transform: uppercase; |
||||
} |
||||
strong { |
||||
font-weight:bold; |
||||
font-style:inherit; |
||||
} |
||||
em { |
||||
font-style: italic; |
||||
font-weight: inherit; |
||||
} |
||||
Q { |
||||
quotes: '„' '“'; |
||||
font-style: italic; |
||||
} |
||||
|
||||
/* BLOCKQUOTES |
||||
================================================== */ |
||||
|
||||
blockquote, blockquote p { |
||||
font-size: @base-font-large; |
||||
line-height: @base-line-large; |
||||
text-align:left; |
||||
margin-bottom: 6px; |
||||
padding-top: 10px; |
||||
background-color:@white; |
||||
color:@color-feature-title; |
||||
|
||||
} |
||||
|
||||
/* Caption and Credits |
||||
================================================== */ |
||||
|
||||
.credit { |
||||
color: @color-credit; |
||||
text-align: right; |
||||
font-size: 10px; |
||||
line-height: 10px; |
||||
display: block; |
||||
margin: 0 auto; |
||||
clear:both; |
||||
} |
||||
.caption { |
||||
text-align:left; |
||||
margin-top:5px; |
||||
color: @color-caption; |
||||
font-size: 11px; |
||||
line-height: 14px; |
||||
clear:both; |
||||
} |
||||
|
||||
|
||||
} |
||||
@ -1,662 +0,0 @@
|
||||
/* Slider |
||||
------------------------------------------------------------------------------------------- */ |
||||
|
||||
/* SLIDER CONTAINERS |
||||
================================================== */ |
||||
.vmm-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; |
||||
|
||||
.slider-item-container { |
||||
//overflow:hidden; |
||||
display:table-cell; |
||||
vertical-align:middle; |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
/* HOVER ELEMENTS |
||||
================================================== */ |
||||
.vmm-notouch { |
||||
.vmm-slider { |
||||
.nav-previous:hover, .nav-next:hover { |
||||
color: @color-dark-second; |
||||
cursor: pointer; |
||||
} |
||||
.nav-previous:hover { |
||||
.icon { |
||||
margin-left: @base-space - 5; |
||||
} |
||||
} |
||||
.nav-next:hover { |
||||
.icon { |
||||
margin-left: @feature-nav-width - @base-space - @feature-nav-icon-wh + 5; |
||||
} |
||||
} |
||||
.slider-item { |
||||
.content { |
||||
.content-container { |
||||
.media { |
||||
.media-container { |
||||
.wikipedia { |
||||
h4 a:hover { |
||||
color: @color-theme; |
||||
text-decoration: none; |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
.created-at:hover { |
||||
.opacity(100); |
||||
} |
||||
.googleplus { |
||||
.googleplus-content { |
||||
.googleplus-attachments { |
||||
a:hover { |
||||
text-decoration: none; |
||||
h5 { |
||||
text-decoration: underline; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
/* SLIDER ELEMENTS |
||||
================================================== */ |
||||
.vmm-slider { |
||||
img, embed, object, video, iframe { |
||||
max-width: 100%; |
||||
} |
||||
} |
||||
|
||||
/* SLIDER NAV |
||||
================================================== */ |
||||
.vmm-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 { |
||||
float: left; |
||||
text-align:left; |
||||
.icon { |
||||
margin-left: @base-space; |
||||
.icon-previous(); |
||||
} |
||||
.date, .title { |
||||
text-align:left; |
||||
padding-left:@base-space; |
||||
} |
||||
} |
||||
|
||||
.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; |
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
/* SLIDE CONTENT |
||||
================================================== */ |
||||
.vmm-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; |
||||
} |
||||
h2.date { |
||||
font-size: @base-font; |
||||
line-height: @base-font; |
||||
//margin-bottom: @base-space/2; |
||||
//color:@color-feature-date; |
||||
font-weight: normal; |
||||
} |
||||
|
||||
.slide-tag { |
||||
font-size: @base-font-small; |
||||
font-weight: bold; |
||||
color: @color-base; |
||||
background-color: lighten(@color-feature-date, 20%); |
||||
-webkit-border-radius: 3px; |
||||
-moz-border-radius: 3px; |
||||
border-radius: 3px; |
||||
vertical-align: baseline; |
||||
white-space: nowrap; |
||||
//text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); |
||||
line-height: @base-font-small; |
||||
padding: 1px 3px 1px; |
||||
margin-left:@base-space/2; |
||||
margin-bottom: @base-space/2; |
||||
} |
||||
} |
||||
} |
||||
.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: @color-background; |
||||
} |
||||
.media-frame iframe { |
||||
background-color: @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; |
||||
} |
||||
.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; |
||||
} |
||||
|
||||
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); |
||||
} |
||||
.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; |
||||
} |
||||
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%; |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
} |
||||
@ -1,86 +0,0 @@
|
||||
/* |
||||
* TOOLTIP |
||||
* Styles for tooltip |
||||
* ------------------------------------------------------------------------------------------- */ |
||||
|
||||
.tooltip { |
||||
position: absolute; |
||||
z-index: 205; |
||||
display: block; |
||||
visibility: visible; |
||||
padding: 5px; |
||||
//font-size: 11px; |
||||
opacity: 0; |
||||
filter: alpha(opacity=0); |
||||
|
||||
font-size: @base-font; |
||||
font-weight: bold; |
||||
line-height: @base-line; |
||||
|
||||
font-size: 12px; |
||||
line-height:12px; |
||||
} |
||||
.tooltip.in { |
||||
opacity: 0.8; |
||||
filter: alpha(opacity=80); |
||||
} |
||||
.tooltip.top { |
||||
margin-top: -2px; |
||||
} |
||||
.tooltip.right { |
||||
margin-left: 2px; |
||||
} |
||||
.tooltip.bottom { |
||||
margin-top: 2px; |
||||
} |
||||
.tooltip.left { |
||||
margin-left: -2px; |
||||
} |
||||
.tooltip.top .tooltip-arrow { |
||||
bottom: 0; |
||||
left: 50%; |
||||
margin-left: -5px; |
||||
border-left: 5px solid transparent; |
||||
border-right: 5px solid transparent; |
||||
border-top: 5px solid #000000; |
||||
} |
||||
.tooltip.left .tooltip-arrow { |
||||
top: 50%; |
||||
right: 0; |
||||
margin-top: -5px; |
||||
border-top: 5px solid transparent; |
||||
border-bottom: 5px solid transparent; |
||||
border-left: 5px solid #000000; |
||||
} |
||||
.tooltip.bottom .tooltip-arrow { |
||||
top: 0; |
||||
left: 50%; |
||||
margin-left: -5px; |
||||
border-left: 5px solid transparent; |
||||
border-right: 5px solid transparent; |
||||
border-bottom: 5px solid #000000; |
||||
} |
||||
.tooltip.right .tooltip-arrow { |
||||
top: 50%; |
||||
left: 0; |
||||
margin-top: -5px; |
||||
border-top: 5px solid transparent; |
||||
border-bottom: 5px solid transparent; |
||||
border-right: 5px solid #000000; |
||||
} |
||||
.tooltip-inner { |
||||
max-width: 200px; |
||||
padding: 3px 8px; |
||||
color: #ffffff; |
||||
text-align: center; |
||||
text-decoration: none; |
||||
background-color: #000000; |
||||
-webkit-border-radius: 4px; |
||||
-moz-border-radius: 4px; |
||||
border-radius: 4px; |
||||
} |
||||
.tooltip-arrow { |
||||
position: absolute; |
||||
width: 0; |
||||
height: 0; |
||||
} |
||||
@ -1,86 +0,0 @@
|
||||
/* VARIABLES |
||||
----------------------------------------------------- */ |
||||
|
||||
/* COLOR SCHEME |
||||
================================================== */ |
||||
@color-theme-dark: darken(@color-theme, 15); |
||||
@color-theme-complement: spin(@color-theme, 180); |
||||
@color-theme-complement-dark: darken(@color-theme-complement, 15); |
||||
@color-theme-complement-darker: darken(@color-theme-complement, 30); |
||||
|
||||
@color-theme-split1: spin(@color-theme, -158); |
||||
@color-theme-split2: spin(@color-theme, 158); |
||||
|
||||
@color-theme-triad1: spin(@color-theme, -135); |
||||
@color-theme-triad2: spin(@color-theme, 135); |
||||
|
||||
@color-theme-tetrad1: spin(@color-theme, 180); |
||||
@color-theme-tetrad2: spin(@color-theme, 150); |
||||
@color-theme-tetrad3: spin(@color-theme, 30); |
||||
@color-theme-tetrad4: spin(@color-theme, 210); |
||||
@color-theme-tetrad5: spin(@color-theme, -30); |
||||
@color-theme-tetrad6: @color-theme; |
||||
|
||||
@color-theme-tetra1: spin(@color-theme, -90); |
||||
@color-theme-tetra2: spin(@color-theme, 90); |
||||
|
||||
@color-theme-analog1: spin(@color-theme, -22); |
||||
@color-theme-analog2: spin(@color-theme, 22); |
||||
|
||||
@color-background: @color-base; |
||||
|
||||
@white: @color-base; |
||||
|
||||
/* NAVIGATION COLORS |
||||
================================================== */ |
||||
@color-nav-date: #AAA; // 33% |
||||
@color-nav-description: @color-dark-fourth; // 40% |
||||
@color-nav-title: @color-dark-fourth; |
||||
|
||||
@color-navigation-time: @color-dark-third; // 60% |
||||
@color-navigation-major-time: @color-dark-second; // 80% |
||||
@color-navigation-time-strong: @color-dark; // 100% |
||||
|
||||
@era-background: #E2E2E2; //#E3E3E3; // 11% |
||||
@era-line: @color-line; |
||||
@era-text: @color-feature-date; |
||||
|
||||
/* FEATURE COLORS |
||||
================================================== */ |
||||
@color-feature-date: @color-dark-fourth; |
||||
@color-feature-description: @color-dark-third; |
||||
@color-feature-title: @color-dark; |
||||
|
||||
|
||||
@color-caption: @color-dark-third; |
||||
@color-credit: @color-dark-fourth; |
||||
|
||||
/* BASE SIZES |
||||
================================================== */ |
||||
@base-font-small: 11px; |
||||
@base-font: 15px; |
||||
@base-font-large: 28px; |
||||
|
||||
@base-line: 20px; |
||||
@base-line-large: 36px; |
||||
|
||||
@base-space: 15px; |
||||
@base-thumb: 24px; |
||||
|
||||
|
||||
/* FEATURE SIZES |
||||
================================================== */ |
||||
@feature-content-text: 200px; |
||||
@feature-content-width: 720px; |
||||
@feature-content-height: 400px; |
||||
@feature-nav-width: 100px; |
||||
@feature-nav-height: 200px; |
||||
@feature-nav-icon-wh: 24px; |
||||
|
||||
/* NAVIGATION SIZES |
||||
================================================== */ |
||||
@navigation-height: 200px; |
||||
@navigation-time-height: 50px; |
||||
@navigation-content-height: @navigation-height - @navigation-time-height; |
||||
@navigation-marker-height: 6px; |
||||
|
||||
Loading…
Reference in new issue