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.
101 lines
2.3 KiB
101 lines
2.3 KiB
13 years ago
|
/* Variables.less
|
||
|
|
* Variables to customize the look and feel
|
||
|
|
* ----------------------------------------------------- */
|
||
|
|
|
||
|
|
|
||
|
|
/* Colors
|
||
|
|
================================================== */
|
||
|
|
|
||
|
|
@color-line: #CCC;
|
||
|
|
@color-line-hover: #666;
|
||
|
|
|
||
|
|
@color-dark:#000;
|
||
|
|
@color-dark-second: #333;
|
||
|
|
@color-dark-third: #666;
|
||
|
|
@color-dark-fourth: #999;
|
||
|
|
@color-dark-fifth: #E3E3E3;
|
||
|
|
@color-dark-fifth: #E3E3E3;
|
||
|
|
|
||
|
|
|
||
|
|
/* COLOR SCHEME
|
||
|
|
================================================== */
|
||
|
|
|
||
|
|
@color-theme: #08C; //#FF3712; //#FF0000;
|
||
|
|
@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-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-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: #FFF;
|
||
|
|
@color-background-dark: #E9E9E9;
|
||
|
|
|
||
|
|
@white: #FFF;
|
||
|
|
|
||
|
|
|
||
|
|
/* CLEANUP IN PROGRESS
|
||
|
|
================================================== */
|
||
|
|
|
||
|
|
// Navigation
|
||
|
|
@color-nav-date: #AAA; // 33%
|
||
|
|
@color-nav-description: #999; // 40%
|
||
|
|
@color-nav-title: #999;
|
||
|
|
|
||
|
|
// Feature
|
||
|
|
@color-feature-date: #666;
|
||
|
|
@color-feature-description: #666;
|
||
|
|
@color-feature-title: #000;
|
||
|
|
|
||
|
|
|
||
|
|
@color-caption:#666;
|
||
|
|
@color-credit:#999;
|
||
|
|
|
||
|
|
// Navigation
|
||
|
|
@color-navigation-time: #666; // 60%
|
||
|
|
@color-navigation-major-time: #333; // 80%
|
||
|
|
@color-navigation-time-strong: #000; // 100%
|
||
|
|
|
||
|
|
|
||
|
|
@era-background: #E2E2E2; //#E3E3E3; // 11%
|
||
|
|
@era-line:@color-line;
|
||
|
|
@era-text:@color-feature-date;
|
||
|
|
/* Sizes
|
||
|
|
================================================== */
|
||
|
|
|
||
|
|
// Baseline grid
|
||
|
|
@base-font: 14px;
|
||
|
|
@base-line: 20px;
|
||
|
|
@base-space: 15px;
|
||
|
|
@base-font-small: 11px;
|
||
|
|
|
||
|
|
// Feature Element Sizes
|
||
|
|
@feature-content-text: 200px;
|
||
|
|
@feature-content-width: 720px;
|
||
|
|
@feature-content-height: 400px;
|
||
|
|
|
||
|
|
// Feature Navigation
|
||
|
|
@feature-nav-width: 100px;
|
||
|
|
@feature-nav-height: 200px;
|
||
|
|
|
||
|
|
// Navigation
|
||
|
|
@navigation-height: 200px;
|
||
|
|
@navigation-time-height: 50px;
|
||
|
|
@navigation-content-height: @navigation-height - @navigation-time-height;
|
||
|
|
|
||
|
|
// Marker
|
||
|
|
@navigation-marker-height:6px;
|
||
|
|
|
||
|
|
@font-sansserif: "Helvetica Neue", Helvetica, Arial, sans-serif;
|
||
|
|
@font-serif: "Georgia", Times New Roman, Times, serif;
|
||
|
|
|