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.
135 lines
2.9 KiB
135 lines
2.9 KiB
/*! |
|
TIMELINE CSS |
|
|
|
Designed and built by Zach Wise at VeriteCo |
|
|
|
This program is free software: you can redistribute it and/or modify |
|
it under the terms of the GNU General Public License as published by |
|
the Free Software Foundation, either version 3 of the License, or |
|
(at your option) any later version. |
|
|
|
This program is distributed in the hope that it will be useful, |
|
but WITHOUT ANY WARRANTY; without even the implied warranty of |
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|
GNU General Public License for more details. |
|
|
|
http://www.gnu.org/licenses/ |
|
|
|
*/ |
|
|
|
/* THEME DARK |
|
----------------------------------------------------- */ |
|
//GFX |
|
.base-sprite() { |
|
background-image: url(themes/timeline-dark.png?v3.4); |
|
} |
|
.loading-sprite() { |
|
background-image: url(themes/loading.gif?v3.4); |
|
} |
|
|
|
// 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-background-dark: #262626; |
|
// COLOR THEME |
|
@color-theme: #0BD4E3; |
|
|
|
/* BASE |
|
----------------------------------------------------- */ |
|
|
|
// CSS Reset |
|
@import "../Reset.less"; |
|
|
|
// Core variables and mixins |
|
@import "../Font.Default.less"; |
|
@import "../Variables.less"; |
|
@import "../Mixins.less"; |
|
@import "../GFX.less"; |
|
|
|
// Grid system and page structure |
|
@import "../VMM.Timeline.Core.less"; |
|
@import "../VMM.Slider.less"; |
|
@import "../VMM.Timeline.TimeNav.less"; |
|
|
|
// Typography |
|
@import "../Typography.less"; |
|
|
|
// Grid system and page structure |
|
@import "../VMM.Timeline.Tooltip.less"; |
|
|
|
|
|
/* MEDIA QUERIES |
|
================================================== */ |
|
|
|
/* Mobile and iPhone |
|
================================================== */ |
|
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) { |
|
|
|
} |
|
|
|
/* BELOW 600px |
|
================================================== */ |
|
|
|
@media (max-width: 600px) { |
|
.slider { |
|
.slider-item { |
|
.content { |
|
.content-container { |
|
display:block; |
|
.text { |
|
width:100%; |
|
max-width:100%; |
|
min-width:120px; |
|
display:block; |
|
.container { |
|
display:block; |
|
-webkit-hyphens:auto; |
|
-moz-hyphens:auto; |
|
-ms-hyphens:auto; |
|
hyphens:auto; |
|
word-wrap:break-word; |
|
|
|
} |
|
} |
|
.media { |
|
width:100%; |
|
min-width:50%; |
|
float: none; |
|
.media-wrapper { |
|
margin-left:0px; |
|
margin-right:0px; |
|
width:100%; |
|
display:block; |
|
.media-container { |
|
img, iframe { |
|
//width:100%; |
|
//max-height:350px; |
|
} |
|
} |
|
} |
|
} |
|
.media.text-media { |
|
.media-wrapper { |
|
.media-container { |
|
border: none; |
|
} |
|
} |
|
} |
|
} |
|
.content-container.layout-text { |
|
|
|
} |
|
.content-container.layout-media { |
|
|
|
} |
|
} |
|
} |
|
} |
|
|
|
}
|
|
|