Browse Source

Getting ready to merge with StoryJS CSS Core

pull/197/head
Zach Wise 13 years ago
parent
commit
09a8f497dc
  1. 37
      source/less/Core/Font.Default.less
  2. 297
      source/less/Core/GFX.less
  3. 216
      source/less/Core/Mixins.less
  4. 105
      source/less/Core/Reset.less
  5. 188
      source/less/Core/Typography.less
  6. 662
      source/less/Core/VMM.Slider.less
  7. 86
      source/less/Core/VMM.Tooltip.less
  8. 86
      source/less/Core/Variables.less

37
source/less/Core/Font.Default.less

@ -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;
}

297
source/less/Core/GFX.less

@ -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);
}

216
source/less/Core/Mixins.less

@ -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
}
}

105
source/less/Core/Reset.less

@ -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
}
}

188
source/less/Core/Typography.less

@ -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;
}
}

662
source/less/Core/VMM.Slider.less

@ -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%;
}
}
}
}
}

86
source/less/Core/VMM.Tooltip.less

@ -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;
}

86
source/less/Core/Variables.less

@ -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…
Cancel
Save