playground
/
TimelineJS
mirror of https://github.com/NUKnightLab/TimelineJS.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

New Dark Theme

pull/33/merge
Zach Wise 13 years ago
parent
24af8bae0d
commit
140838b8a6
7 changed files with 1668 additions and 0 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. BIN
      source/gfx/timeline-dark.png
  2. BIN
      source/gfx/timeline-dark.psd
  3. 105
      source/less/gfx-dark.less
  4. 26
      source/less/timeline-dark.less
  5. 100
      source/less/variables-dark.less
  6. 1437
      timeline-dark.css
  7. BIN
      timeline-dark.png

BIN
source/gfx/timeline-dark.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

BIN
source/gfx/timeline-dark.psd
View File

Binary file not shown.

105
source/less/gfx-dark.less
Unescape View File

@ -0,0 +1,105 @@
/* Icons.less
* Base64 Icons
* ----------------------------------------------------------------- */
// Next and Back Icons
.icon-previous() {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAWCAMAAAD6gTxzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF2dnZWVlZsrKyv7+/TU1NzMzMjY2Nc3Nz5eXlgICAQEBA8vLymZmZZmZmMzMz////CXz3iwAAABB0Uk5T////////////////////AOAjXRkAAAB1SURBVHjafNFXDsAgDAPQAKWDUd//tq2EnS6p+eNJECcYWLmzklFq2Ud1iAKlVNFG2c/zoCiJIJlkA6lOlFBFXU+vIM26lkHypxvzmCnjgg91J6TPRaDJktMVwvATFc+ur7Gb02MCrfA2py/6amGe2b/jEGAA5cYUouw7P64AAAAASUVORK5CYII=) no-repeat scroll 0% 50%;
}
.icon-next() {
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAWCAMAAAD6gTxzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF2dnZWVlZsrKyv7+/TU1NzMzMjY2Nc3Nz5eXlgICAQEBA8vLymZmZZmZmMzMz////CXz3iwAAABB0Uk5T////////////////////AOAjXRkAAABySURBVHjabNFLEoAgDAPQAiJ/ev/buqCJONjlm5GkVcKwEbWR5uaaq4E0V7NB0mg0b5J2mCdpMqpC+kasaNkjrE3Ac530RgSSDkaQ0kFbN6N9g0X5KPFTteAzLuSPtQVScJyGpx1PyNo8NH9HxB6PAAMAzkAUorcBvvAAAAAASUVORK5CYII=) no-repeat scroll 100% 50%;
}
.icon-twitter() {
background-image: url(timeline-dark.png);
background-repeat:no-repeat;
background-position: 0 -889px; width: 24px; height: 24px;
}
.icon-vimeo() {
background-image: url(timeline-dark.png);
background-repeat:no-repeat;
background-position: 0 -963px; width: 24px; height: 24px;
}
.icon-youtube() {
background-image: url(timeline-dark.png);
background-repeat:no-repeat;
background-position: 0 -1111px; width: 24px; height: 24px;
}
.icon-website() {
background-image: url(timeline-dark.png);
background-repeat:no-repeat;
background-position: 0 -1037px; width: 24px; height: 24px;
}
.icon-soundcloud() {
background-image: url(timeline-dark.png);
background-repeat:no-repeat;
background-position: 0 -659px; width: 24px; height: 24px;
}
.icon-map() {
background-image: url(timeline-dark.png);
background-repeat:no-repeat;
background-position: 0 -514px; width: 26px; height: 21px;
}
.icon-map-pin() {
background-image: url(timeline-dark.png);
background-repeat:no-repeat;
background-position: 0 -438px; width: 16px; height: 26px;
}
.icon-zoom-in() {
background-image: url(timeline-dark.png);
background-repeat:no-repeat;
//background-position: 0 -1433px; width: 24px; height: 24px;
background-position: 0 -1507px; width: 16px; height: 16px;
}
.icon-zoom-out() {
background-image: url(timeline-dark.png);
background-repeat:no-repeat;
//background-position: 0 -1573px; width: 24px; height: 24px;
background-position: 0 -1647px; width: 16px; height: 16px;
}
.icon-back-home() {
background-image: url(timeline-dark.png);
background-repeat:no-repeat;
background-position: 0 -1303px; width: 16px; height: 12px;
//background-position: 0 -1365px; width: 24px; height: 18px;
}
.icon-microphone() {
background-image: url(timeline-dark.png);
background-repeat:no-repeat;
background-position: 0 -585px; width: 12px; height: 24px;
}
.time-flag() {
background-image: url(timeline-dark.png);
background-repeat:no-repeat;
background-position: 0 0; width: 153px; height: 60px;
}
.time-flag-active() {
background-image: url(timeline-dark.png);
background-repeat:no-repeat;
background-position: 0 -110px; width: 153px; height: 60px;
}
.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);
}

26
source/less/timeline-dark.less
Unescape View File

@ -0,0 +1,26 @@
/* Timeline
* Dark
* Copyright 2012 Zach Wise
* Designed and built by Zach Wise digitalartwork.net
* ----------------------------------------------------- */
// CSS Reset
@import "reset.less";
// Core variables and mixins
@import "variables-dark.less";
@import "mixins.less";
@import "gfx-dark.less";
// Grid system and page structure
@import "structure.less";
// Typography
@import "type.less";
// Elements
@import "elements.less"; // UI Elements etc
// Grid system and page structure
@import "tooltip.less";

100
source/less/variables-dark.less
Unescape View File

@ -0,0 +1,100 @@
/* Variables.less
* Variables to customize the look and feel
* ----------------------------------------------------- */
/* Colors
================================================== */
@color-base: #1A1A1A;
@color-line: #333; //#414141;
@color-line-hover: #666;
@color-dark: #FFF;
@color-dark-second: #AAA;
@color-dark-third: #AAA;
@color-dark-fourth: #999;
@color-dark-fifth: #E3E3E3;
@color-dark-fifth: #E3E3E3;
//262626
/* COLOR SCHEME
================================================== */
@color-theme: #0BD4E3; //#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: @color-base;
@color-background-dark: #262626;
@white: @color-base;
/* CLEANUP IN PROGRESS
================================================== */
// Navigation
@color-nav-date: #AAA; // 33%
@color-nav-description: @color-dark-fourth; // 40%
@color-nav-title: @color-dark-fourth;
// Feature
@color-feature-date: @color-dark-third;
@color-feature-description: @color-dark-third;
@color-feature-title: @color-dark;
@color-caption: @color-dark-third;
@color-credit: @color-dark-fourth;
// Navigation
@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;
/* Sizes
================================================== */
// Baseline grid
@base-font: 15px;
@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;

1437
timeline-dark.css
View File

File diff suppressed because it is too large Load Diff

BIN
timeline-dark.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

Write Preview
Loading…
Cancel
Save