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

Style tweaks dealing with next/prev buttons and hyphenation

pull/127/head
Zach Wise 13 years ago
parent
7e0e20b1a1
commit
68185945ef
6 changed files with 70 additions and 44 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. 16
      compiled/css/themes/dark.css
  2. 16
      compiled/css/timeline.css
  3. 4
      source/js/VMM.Slider.js
  4. 5
      source/less/Typography.less
  5. 30
      source/less/VMM.Slider.less
  6. 43
      source/less/VMM.Timeline.Core.less

16
compiled/css/themes/dark.css
Unescape View File

@ -27,9 +27,10 @@
.vmm-timeline .feature h1,.vmm-timeline .feature h2,.vmm-timeline .feature h3,.vmm-timeline .feature h4,.vmm-timeline .feature h5,.vmm-timeline .feature h6{font-family:"Georgia",Times New Roman,Times,serif;}
.tooltip{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
#timeline-embed{background-color:#1a1a1a;margin-bottom:20px;border:1px solid #333333;padding-top:20px;padding-bottom:20px;clear:both;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);-moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);}
.vmm-timeline{width:100%;height:100%;padding:0px;margin:0px;background-color:#1a1a1a;position:absolute;z-index:100;clear:both;overflow:hidden;}
.vmm-timeline .feature{width:100%;}.vmm-timeline .feature .slider{width:100%;float:left;position:relative;z-index:10;padding-top:15px;-webkit-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);}
.vmm-timeline .feedback{position:absolute;display:table;overflow:hidden;top:0px;left:0px;z-index:205;width:100%;height:100%;background-color:#262626;border:1px solid #333333;}.vmm-timeline .feedback .messege{display:table-cell;vertical-align:middle;font-size:15px;font-weight:normal;line-height:20px;width:75%;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;text-align:center;}
#timeline-embed.full-embed{overflow:hidden;border:0 !important;padding:0 !important;margin:0 !important;clear:both;-webkit-border-radius:0 !important;-moz-border-radius:0 !important;border-radius:0 !important;-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.25) !important;}
#timeline-embed.sized-embed{overflow:hidden;border:1px solid #333333;padding-top:7px;padding-bottom:7px;margin:0 !important;clear:both;-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.25) !important;}
.vmm-timeline{width:100%;height:100%;padding:0px;margin:0px;background-color:#1a1a1a;position:absolute;z-index:100;clear:both;overflow:hidden;}.vmm-timeline .feature{width:100%;}.vmm-timeline .feature .slider{width:100%;float:left;position:relative;z-index:10;padding-top:15px;-webkit-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);}
.vmm-timeline .feedback{position:absolute;display:table;overflow:hidden;top:0px;left:0px;z-index:205;width:100%;height:100%;background-color:#1a1a1a;}.vmm-timeline .feedback .messege{display:table-cell;vertical-align:middle;font-size:15px;font-weight:normal;line-height:20px;width:75%;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;text-align:center;}
.vmm-timeline .container.main{position:absolute;top:0px: left:0px;padding-bottom:3px;width:auto;height:auto;margin:0px;clear:both;}
.vmm-timeline img,.vmm-timeline embed,.vmm-timeline object,.vmm-timeline video,.vmm-timeline iframe{max-width:100%;}
.vmm-timeline img{max-height:100%;border:1px solid #999999;}
@ -51,11 +52,12 @@
.vmm-timeline .zFront{z-index:204;}
.slider{width:100%;height:100%;overflow:hidden;}.slider .slider-container-mask{text-align:center;width:100%;height:100%;overflow:hidden;}.slider .slider-container-mask .slider-container{position:absolute;top:0px;left:-2160px;width:100%;height:100%;text-align:center;display:block;background-color:#1a1a1a;}.slider .slider-container-mask .slider-container .slider-item-container{display:table-cell;vertical-align:middle;}
.slider img,.slider embed,.slider object,.slider video,.slider iframe{max-width:100%;}
.slider .nav-previous,.slider .nav-next{position:absolute;top:0px;width:100px;color:#DBDBDB;font-size:11px;}.slider .nav-previous .nav-container,.slider .nav-next .nav-container{height:100px;position:absolute;}
.slider .nav-previous,.slider .nav-next{position:absolute;top:0px;width:100px;color:#DBDBDB;font-size:11px;}.slider .nav-previous .nav-container,.slider .nav-next .nav-container{height:100px;width:100px;position:absolute;}
.slider .nav-previous .icon,.slider .nav-next .icon{margin-top:12px;margin-bottom:15px;}
.slider .nav-previous .date,.slider .nav-next .date{font-size:15px;font-weight:bold;line-height:20px;text-transform:uppercase;margin-bottom:5px;}
.slider .nav-previous .date,.slider .nav-next .date,.slider .nav-previous .title,.slider .nav-next .title{line-height:14px;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;}.slider .nav-previous .date a,.slider .nav-next .date a,.slider .nav-previous .title a,.slider .nav-next .title a{color:#999999;}
.slider .nav-previous .date,.slider .nav-next .date,.slider .nav-previous .title,.slider .nav-next .title{line-height:14px;}.slider .nav-previous .date a,.slider .nav-next .date a,.slider .nav-previous .title a,.slider .nav-next .title a{color:#999999;}
.slider .nav-previous .date small,.slider .nav-next .date small,.slider .nav-previous .title small,.slider .nav-next .title small{display:none;}
.slider .nav-previous .date,.slider .nav-next .date{font-size:13px;line-height:13px;font-weight:bold;text-transform:uppercase;margin-bottom:5px;}
.slider .nav-previous .title,.slider .nav-next .title{font-size:11px;line-height:13px;}
.slider .nav-previous:hover,.slider .nav-next:hover{color:#aaaaaa;cursor:pointer;}
.slider .nav-previous{float:left;text-align:left;}.slider .nav-previous .icon{margin-left:15px;height:24px;background-image:url(themes/timeline-dark.png);background-repeat:no-repeat;background-position:-160px 0;width:24px;height:24px;overflow:hidden;}
.slider .nav-previous .date,.slider .nav-previous .title{text-align:left;padding-left:15px;}
@ -146,7 +148,7 @@
.vmm-timeline h1,.vmm-timeline h2,.vmm-timeline h3,.vmm-timeline h4,.vmm-timeline h5,.vmm-timeline h6{font-weight:normal;color:#ffffff;text-transform:none;}.vmm-timeline h1 a,.vmm-timeline h2 a,.vmm-timeline h3 a,.vmm-timeline h4 a,.vmm-timeline h5 a,.vmm-timeline h6 a{color:#999999;}
.vmm-timeline h1 small,.vmm-timeline h2 small,.vmm-timeline h3 small,.vmm-timeline h4 small,.vmm-timeline h5 small,.vmm-timeline h6 small{color:#999999;}
.vmm-timeline h1.date,.vmm-timeline h2.date,.vmm-timeline h3.date,.vmm-timeline h4.date,.vmm-timeline h5.date,.vmm-timeline h6.date{font-weight:bold;}
.vmm-timeline h2.start{font-size:36px;line-height:38px;margin-bottom:15px;}
.vmm-timeline h2.start{font-size:36px;line-height:38px;margin-bottom:15px;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;}
.vmm-timeline h1{margin-bottom:15px;font-size:32px;line-height:34px;}.vmm-timeline h1 small{font-size:18px;}
.vmm-timeline h2{margin-bottom:15px;font-size:28px;line-height:30px;}.vmm-timeline h2 small{font-size:14px;line-height:16px;}
.vmm-timeline h2.date{font-size:16px;line-height:18px;margin-bottom:3.75px;color:#999999;}

16
compiled/css/timeline.css
Unescape View File

@ -27,9 +27,10 @@
.vmm-timeline .feature h1,.vmm-timeline .feature h2,.vmm-timeline .feature h3,.vmm-timeline .feature h4,.vmm-timeline .feature h5,.vmm-timeline .feature h6{font-family:"Georgia",Times New Roman,Times,serif;}
.tooltip{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;}
#timeline-embed{background-color:#ffffff;margin-bottom:20px;border:1px solid #cccccc;padding-top:20px;padding-bottom:20px;clear:both;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);-moz-box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);box-shadow:1px 1px 3px rgba(0, 0, 0, 0.35);}
.vmm-timeline{width:100%;height:100%;padding:0px;margin:0px;background-color:#ffffff;position:absolute;z-index:100;clear:both;overflow:hidden;}
.vmm-timeline .feature{width:100%;}.vmm-timeline .feature .slider{width:100%;float:left;position:relative;z-index:10;padding-top:15px;-webkit-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);}
.vmm-timeline .feedback{position:absolute;display:table;overflow:hidden;top:0px;left:0px;z-index:205;width:100%;height:100%;background-color:#e9e9e9;border:1px solid #cccccc;}.vmm-timeline .feedback .messege{display:table-cell;vertical-align:middle;font-size:15px;font-weight:normal;line-height:20px;width:75%;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;text-align:center;}
#timeline-embed.full-embed{overflow:hidden;border:0 !important;padding:0 !important;margin:0 !important;clear:both;-webkit-border-radius:0 !important;-moz-border-radius:0 !important;border-radius:0 !important;-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.25) !important;}
#timeline-embed.sized-embed{overflow:hidden;border:1px solid #cccccc;padding-top:7px;padding-bottom:7px;margin:0 !important;clear:both;-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;box-shadow:0px 0px 0px rgba(0, 0, 0, 0.25) !important;}
.vmm-timeline{width:100%;height:100%;padding:0px;margin:0px;background-color:#ffffff;position:absolute;z-index:100;clear:both;overflow:hidden;}.vmm-timeline .feature{width:100%;}.vmm-timeline .feature .slider{width:100%;float:left;position:relative;z-index:10;padding-top:15px;-webkit-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);}
.vmm-timeline .feedback{position:absolute;display:table;overflow:hidden;top:0px;left:0px;z-index:205;width:100%;height:100%;background-color:#ffffff;}.vmm-timeline .feedback .messege{display:table-cell;vertical-align:middle;font-size:15px;font-weight:normal;line-height:20px;width:75%;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;text-align:center;}
.vmm-timeline .container.main{position:absolute;top:0px: left:0px;padding-bottom:3px;width:auto;height:auto;margin:0px;clear:both;}
.vmm-timeline img,.vmm-timeline embed,.vmm-timeline object,.vmm-timeline video,.vmm-timeline iframe{max-width:100%;}
.vmm-timeline img{max-height:100%;border:1px solid #999999;}
@ -51,11 +52,12 @@
.vmm-timeline .zFront{z-index:204;}
.slider{width:100%;height:100%;overflow:hidden;}.slider .slider-container-mask{text-align:center;width:100%;height:100%;overflow:hidden;}.slider .slider-container-mask .slider-container{position:absolute;top:0px;left:-2160px;width:100%;height:100%;text-align:center;display:block;background-color:#ffffff;}.slider .slider-container-mask .slider-container .slider-item-container{display:table-cell;vertical-align:middle;}
.slider img,.slider embed,.slider object,.slider video,.slider iframe{max-width:100%;}
.slider .nav-previous,.slider .nav-next{position:absolute;top:0px;width:100px;color:#DBDBDB;font-size:11px;}.slider .nav-previous .nav-container,.slider .nav-next .nav-container{height:100px;position:absolute;}
.slider .nav-previous,.slider .nav-next{position:absolute;top:0px;width:100px;color:#DBDBDB;font-size:11px;}.slider .nav-previous .nav-container,.slider .nav-next .nav-container{height:100px;width:100px;position:absolute;}
.slider .nav-previous .icon,.slider .nav-next .icon{margin-top:12px;margin-bottom:15px;}
.slider .nav-previous .date,.slider .nav-next .date{font-size:15px;font-weight:bold;line-height:20px;text-transform:uppercase;margin-bottom:5px;}
.slider .nav-previous .date,.slider .nav-next .date,.slider .nav-previous .title,.slider .nav-next .title{line-height:14px;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;}.slider .nav-previous .date a,.slider .nav-next .date a,.slider .nav-previous .title a,.slider .nav-next .title a{color:#999999;}
.slider .nav-previous .date,.slider .nav-next .date,.slider .nav-previous .title,.slider .nav-next .title{line-height:14px;}.slider .nav-previous .date a,.slider .nav-next .date a,.slider .nav-previous .title a,.slider .nav-next .title a{color:#999999;}
.slider .nav-previous .date small,.slider .nav-next .date small,.slider .nav-previous .title small,.slider .nav-next .title small{display:none;}
.slider .nav-previous .date,.slider .nav-next .date{font-size:13px;line-height:13px;font-weight:bold;text-transform:uppercase;margin-bottom:5px;}
.slider .nav-previous .title,.slider .nav-next .title{font-size:11px;line-height:13px;}
.slider .nav-previous:hover,.slider .nav-next:hover{color:#333333;cursor:pointer;}
.slider .nav-previous{float:left;text-align:left;}.slider .nav-previous .icon{margin-left:15px;height:24px;background-image:url(timeline.png);background-repeat:no-repeat;background-position:-160px 0;width:24px;height:24px;overflow:hidden;}
.slider .nav-previous .date,.slider .nav-previous .title{text-align:left;padding-left:15px;}
@ -146,7 +148,7 @@
.vmm-timeline h1,.vmm-timeline h2,.vmm-timeline h3,.vmm-timeline h4,.vmm-timeline h5,.vmm-timeline h6{font-weight:normal;color:#000000;text-transform:none;}.vmm-timeline h1 a,.vmm-timeline h2 a,.vmm-timeline h3 a,.vmm-timeline h4 a,.vmm-timeline h5 a,.vmm-timeline h6 a{color:#999999;}
.vmm-timeline h1 small,.vmm-timeline h2 small,.vmm-timeline h3 small,.vmm-timeline h4 small,.vmm-timeline h5 small,.vmm-timeline h6 small{color:#999999;}
.vmm-timeline h1.date,.vmm-timeline h2.date,.vmm-timeline h3.date,.vmm-timeline h4.date,.vmm-timeline h5.date,.vmm-timeline h6.date{font-weight:bold;}
.vmm-timeline h2.start{font-size:36px;line-height:38px;margin-bottom:15px;}
.vmm-timeline h2.start{font-size:36px;line-height:38px;margin-bottom:15px;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;word-wrap:break-word;}
.vmm-timeline h1{margin-bottom:15px;font-size:32px;line-height:34px;}.vmm-timeline h1 small{font-size:18px;}
.vmm-timeline h2{margin-bottom:15px;font-size:28px;line-height:30px;}.vmm-timeline h2 small{font-size:14px;line-height:16px;}
.vmm-timeline h2.date{font-size:16px;line-height:18px;margin-bottom:3.75px;color:#999999;}

4
source/js/VMM.Slider.js
Unescape View File

@ -172,8 +172,8 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
VMM.Lib.css(navigation.nextBtn, "left", (current_width - config.slider.nav.width));
VMM.Lib.height(navigation.prevBtn, config.slider.height);
VMM.Lib.height(navigation.nextBtn, config.slider.height);
VMM.Lib.css(navigation.nextBtnContainer, "top", ( (config.slider.height/2) - (config.slider.nav.height/2) ) );
VMM.Lib.css(navigation.prevBtnContainer, "top", ( (config.slider.height/2) - (config.slider.nav.height/2) ) );
VMM.Lib.css(navigation.nextBtnContainer, "top", ( (config.slider.height/2) - (config.slider.nav.height/2) ) + 10 );
VMM.Lib.css(navigation.prevBtnContainer, "top", ( (config.slider.height/2) - (config.slider.nav.height/2) ) + 10 );
// Animate Changes
VMM.Lib.height($slider_mask, config.slider.height);

5
source/less/Typography.less
Unescape View File

@ -71,6 +71,11 @@
line-height: 38px;
margin-bottom: @base-space;
-webkit-hyphens:auto;
-moz-hyphens:auto;
-ms-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
}
h1 {

30
source/less/VMM.Slider.less
Unescape View File

@ -56,36 +56,36 @@
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 {
font-size: @base-font;
font-weight: bold;
line-height: @base-line;
text-transform: uppercase;
margin-bottom:5px;
}
.date, .title {
line-height:14px;
//width: @feature-nav-width;
-webkit-hyphens:auto;
-moz-hyphens:auto;
-ms-hyphens:auto;
hyphens:auto;
word-wrap:break-word;
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;
}
}

43
source/less/VMM.Timeline.Core.less
Unescape View File

@ -6,20 +6,45 @@
/* TIMELINE EMBED
================================================== */
#timeline-embed {
background-color: @color-background;
background-color: @color-base;
margin-bottom:20px;
border: 1px solid @color-line;
padding-top:20px;
padding-bottom:20px;
clear:both;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
-webkit-box-shadow: 1px 1px 3px rgba(0,0,0,.35);
-moz-box-shadow: 1px 1px 3px rgba(0,0,0,.35);
box-shadow: 1px 1px 3px rgba(0,0,0,.35);
}
}
#timeline-embed.full-embed {
overflow:hidden;
border: 0 !important;
padding: 0 !important;
margin: 0 !important;
clear:both;
-webkit-border-radius: 0 !important;
-moz-border-radius: 0 !important;
border-radius: 0 !important;
-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;
-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;
box-shadow:0px 0px 0px rgba(0, 0, 0, 0.25) !important;
}
#timeline-embed.sized-embed {
overflow:hidden;
border: 1px solid @color-line;
padding-top:7px;
padding-bottom:7px;
margin: 0 !important;
clear:both;
-webkit-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;
-moz-box-shadow:0 0px 0px rgba(0, 0, 0, 0.25) !important;
box-shadow:0px 0px 0px rgba(0, 0, 0, 0.25) !important;
}
/* TIMELINE
================================================== */
@ -37,13 +62,6 @@
clear:both;
overflow:hidden;
.hyphenate {
//white-space:nowrap;
//width:200px;
//overflow-x:hidden;
//display:inline-block;
//height:@base-line;
}
/* FEATURE
================================================== */
.feature {
@ -69,8 +87,7 @@
z-index:205;
width: 100%;
height:100%;
background-color:@color-background-dark;
border: 1px solid @color-line;
background-color: @color-base;
//.opacity(80);
.messege {
display:table-cell;

Write Preview
Loading…
Cancel
Save