Skip to content

E
edx-platform
Commit c8a436eb by Reda Lemeden
Options

Merge pull request #6 from MITx/kf-captions 

Added some styles to make videos more cohesive
parents ceb8d4bf 34627fb0
Showing with 588 additions and 69 deletions
static/css/application.css
...@@ -2556,6 +2556,93 @@ button.ui-button::-moz-focus-inner { ...@@ -2556,6 +2556,93 @@ button.ui-button::-moz-focus-inner {
margin: -1px; margin: -1px;
height: 100%; } height: 100%; }
.ui-tooltip, .qtip {
position: absolute;
left: -28000px;
top: -28000px;
display: none;
max-width: 280px;
min-width: 50px;
font-size: 10.5px;
line-height: 12px; }
.ui-tooltip-fluid {
display: block;
visibility: hidden;
position: static!important;
float: left!important; }
.ui-tooltip-content {
position: relative;
padding: 5px 9px;
overflow: hidden;
border: 1px solid #000001;
text-align: left;
word-wrap: break-word;
overflow: hidden; }
.ui-tooltip-titlebar {
position: relative;
min-height: 14px;
padding: 5px 35px 5px 10px;
overflow: hidden;
border: 1px solid #000001;
border-width: 1px 1px 0;
font-weight: bold; }
.ui-tooltip-titlebar + .ui-tooltip-content {
border-top-width: 0!important; }
/*Default close button class */
.ui-tooltip-titlebar .ui-state-default {
position: absolute;
right: 4px;
top: 50%;
margin-top: -9px;
cursor: pointer;
outline: medium none;
border-width: 1px;
border-style: solid; }
* html .ui-tooltip-titlebar .ui-state-default {
top: 16px; }
.ui-tooltip-titlebar .ui-icon, .ui-tooltip-icon .ui-icon {
display: block;
text-indent: -1000em; }
.ui-tooltip-icon, .ui-tooltip-icon .ui-icon {
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px; }
.ui-tooltip-icon .ui-icon {
width: 18px;
height: 14px;
text-align: center;
text-indent: 0;
font: normal bold 10px/13px Tahoma, sans-serif;
color: inherit;
background: transparent none no-repeat -100em -100em; }
/*Default tooltip style */
.ui-tooltip-default .ui-tooltip-titlebar, .ui-tooltip-default .ui-tooltip-content {
border-color: #F1D031;
background-color: #FFFFA3;
color: #555; }
.ui-tooltip-default .ui-tooltip-titlebar {
background-color: #FFEF93; }
.ui-tooltip-default .ui-tooltip-icon {
border-color: #CCC;
background: #F1F1F1;
color: #777; }
.ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover {
border-color: #AAA;
color: #111; }
div.course-wrapper ul, div.course-wrapper ol { div.course-wrapper ul, div.course-wrapper ol {
list-style: none; } list-style: none; }
div.course-wrapper section.course-content p { div.course-wrapper section.course-content p {
...@@ -2679,12 +2766,18 @@ div.course-wrapper section.course-content section.tutorials ul { ...@@ -2679,12 +2766,18 @@ div.course-wrapper section.course-content section.tutorials ul {
list-style: disc outside none; list-style: disc outside none;
margin-left: 22.652px; } margin-left: 22.652px; }
div.course-wrapper section.course-content div.staff_info { div.course-wrapper section.course-content div.staff_info {
zoom: 1;
white-space: pre-wrap; white-space: pre-wrap;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
padding-top: 22.652px; padding-top: 22.652px;
margin-top: 22.652px; margin-top: 22.652px;
line-height: 22.652px; line-height: 22.652px;
font-family: Consolas, "Lucida Console", Monaco, "Courier New", Courier, monospace; } font-family: Consolas, "Lucida Console", Monaco, "Courier New", Courier, monospace; }
div.course-wrapper section.course-content div.staff_info:before, div.course-wrapper section.course-content div.staff_info:after {
content: "";
display: table; }
div.course-wrapper section.course-content div.staff_info:after {
clear: both; }
div.course-wrapper section.course-content div.ui-slider { div.course-wrapper section.course-content div.ui-slider {
border: 1px solid #aaa; border: 1px solid #aaa;
background: #ddd; background: #ddd;
...@@ -2771,7 +2864,18 @@ section.course-index div#accordion ul.ui-accordion-content li a p.subtitle { ...@@ -2771,7 +2864,18 @@ section.course-index div#accordion ul.ui-accordion-content li a p.subtitle {
color: #666; } color: #666; }
section.course-content div.video-subtitles { section.course-content div.video-subtitles {
position: relative; } padding: 6px 22.652px;
margin: 0 -22.652px;
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
background: #f3f3f3;
position: relative;
zoom: 1; }
section.course-content div.video-subtitles:before, section.course-content div.video-subtitles:after {
content: "";
display: table; }
section.course-content div.video-subtitles:after {
clear: both; }
section.course-content div.video-subtitles div.video-wrapper { section.course-content div.video-subtitles div.video-wrapper {
float: left; float: left;
width: 65.761%; width: 65.761%;
...@@ -2800,6 +2904,7 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr ...@@ -2800,6 +2904,7 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
background: #333; background: #333;
position: relative; position: relative;
border: 1px solid #000; border: 1px solid #000;
border-top: 0;
color: #ccc; } color: #ccc; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider { section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider {
-webkit-border-radius: 0; -webkit-border-radius: 0;
...@@ -2812,27 +2917,127 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr ...@@ -2812,27 +2917,127 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
box-shadow: inset 0 1px 0 #eeeeee, 0 1px 0 #555555; box-shadow: inset 0 1px 0 #eeeeee, 0 1px 0 #555555;
background: #c2c2c2; background: #c2c2c2;
border: none; border: none;
border-top: 1px solid #000;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
height: 14px; } height: 7px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider div.ui-widget-header {
background: #777;
-webkit-box-shadow: inset 0 1px 0 #999999;
-moz-box-shadow: inset 0 1px 0 #999999;
box-shadow: inset 0 1px 0 #999999; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider .ui-tooltip.qtip .ui-tooltip-content {
background: #993333;
border: 1px solid #4d1919;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
-o-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 0 #bf4040;
-moz-box-shadow: inset 0 1px 0 #bf4040;
box-shadow: inset 0 1px 0 #bf4040;
color: #fff;
font: bold 12px "Open Sans", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
margin-bottom: 6px;
padding: 4px;
text-align: center;
-webkit-font-smoothing: antialiased;
text-shadow: 0 -1px 0 #732626;
overflow: visible; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider .ui-tooltip.qtip .ui-tooltip-content::after {
content: " ";
width: 7px;
height: 7px;
display: block;
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -3px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background: #993333;
border-right: 1px solid #4d1919;
border-bottom: 1px solid #4d1919; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider a.ui-slider-handle { section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider a.ui-slider-handle {
-webkit-border-radius: 20px; -webkit-border-radius: 15px;
-moz-border-radius: 20px; -moz-border-radius: 15px;
-ms-border-radius: 20px; -ms-border-radius: 15px;
-o-border-radius: 20px; -o-border-radius: 15px;
border-radius: 20px; border-radius: 15px;
-webkit-box-shadow: inset 0 1px 0 #bf4040; -webkit-box-shadow: inset 0 1px 0 #bf4040;
-moz-box-shadow: inset 0 1px 0 #bf4040; -moz-box-shadow: inset 0 1px 0 #bf4040;
box-shadow: inset 0 1px 0 #bf4040; box-shadow: inset 0 1px 0 #bf4040;
background: #993333 url(/static/images/slider-handle.png) center center no-repeat; background: #993333 url(/static/images/slider-handle.png) center center no-repeat;
border: 1px solid #4d1919; border: 1px solid #4d1919;
cursor: pointer; cursor: pointer;
height: 20px; height: 15px;
margin-left: -10px; margin-left: -7px;
top: -4px; top: -4px;
width: 20px; } width: 15px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0;
-webkit-background-size: 50%;
-moz-background-size: 50%;
-ms-background-size: 50%;
-o-background-size: 50%;
background-size: 50%; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider a.ui-slider-handle:focus, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider a.ui-slider-handle:hover { section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider a.ui-slider-handle:focus, section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider a.ui-slider-handle:hover {
background-color: #bf4040; background-color: #bf4040;
outline: none; } outline: none; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:hover {
height: 14px;
margin-top: -7px; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider:hover a.ui-slider-handle {
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
-ms-border-radius: 20px;
-o-border-radius: 20px;
border-radius: 20px;
height: 20px;
margin-left: -10px;
top: -4px;
width: 20px; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr { section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr {
float: left; float: left;
margin-right: 22.652px; } margin-right: 22.652px; }
...@@ -2848,9 +3053,29 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr ...@@ -2848,9 +3053,29 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
display: block; display: block;
cursor: pointer; cursor: pointer;
height: 14px; height: 14px;
padding: 16.989px 22.652px; padding: 16.989px;
text-indent: -9999px; text-indent: -9999px;
width: 14px; } width: 14px;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr li a.play { section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr li a.play {
background: url("/static/images/play-icon.png") center center no-repeat; } background: url("/static/images/play-icon.png") center center no-repeat; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr li a.play:hover { section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr li a.play:hover {
...@@ -2860,23 +3085,22 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr ...@@ -2860,23 +3085,22 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr li a.pause:hover { section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr li a.pause:hover {
background-color: #444; } background-color: #444; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr li div#vidtime { section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr li div#vidtime {
padding-left: 22.652px; padding-left: 16.989px;
font-weight: bold; font-weight: bold;
line-height: 46px; line-height: 46px;
-webkit-font-smoothing: antialiased; } -webkit-font-smoothing: antialiased; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls {
float: right; } float: right; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds {
border-right: 1px solid #000;
border-left: 1px solid #000; border-left: 1px solid #000;
border-right: 1px solid #000;
-webkit-box-shadow: 1px 0 0 #555555, inset 1px 0 0 #555555; -webkit-box-shadow: 1px 0 0 #555555, inset 1px 0 0 #555555;
-moz-box-shadow: 1px 0 0 #555555, inset 1px 0 0 #555555; -moz-box-shadow: 1px 0 0 #555555, inset 1px 0 0 #555555;
box-shadow: 1px 0 0 #555555, inset 1px 0 0 #555555; box-shadow: 1px 0 0 #555555, inset 1px 0 0 #555555;
float: left; float: left;
line-height: 46px; line-height: 46px;
margin-right: 0; margin-right: 0;
-webkit-font-smoothing: antialiased; position: relative;
opacity: .7;
-webkit-transition-property: all; -webkit-transition-property: all;
-moz-transition-property: all; -moz-transition-property: all;
-ms-transition-property: all; -ms-transition-property: all;
...@@ -2896,7 +3120,10 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr ...@@ -2896,7 +3120,10 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
-moz-transition-delay: 0; -moz-transition-delay: 0;
-ms-transition-delay: 0; -ms-transition-delay: 0;
-o-transition-delay: 0; -o-transition-delay: 0;
transition-delay: 0; } transition-delay: 0;
width: 110px;
cursor: pointer;
-webkit-font-smoothing: antialiased; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds h3, section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds div#wiki_panel input[type="button"], div#wiki_panel section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds input[type="button"] { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds h3, section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds div#wiki_panel input[type="button"], div#wiki_panel section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds input[type="button"] {
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
...@@ -2905,9 +3132,13 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr ...@@ -2905,9 +3132,13 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
padding: 0 11.326px; padding: 0 5.663px 0 11.326px;
font-weight: normal; } font-weight: normal;
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds { text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
color: #999; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds p.active {
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
display: inline-block; display: inline-block;
...@@ -2915,34 +3146,61 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr ...@@ -2915,34 +3146,61 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; *vertical-align: auto;
padding-right: 11.326px; } padding: 0 11.326px 0 0;
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds li { margin-bottom: 0;
cursor: pointer; font-weight: bold; }
color: #fff; section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds {
background-color: #444;
border: 1px solid #000;
border-top: 0;
-webkit-box-shadow: inset 1px 0 0 #555555;
-moz-box-shadow: inset 1px 0 0 #555555;
box-shadow: inset 1px 0 0 #555555;
display: -moz-inline-box; display: -moz-inline-box;
-moz-box-orient: vertical; -moz-box-orient: vertical;
display: inline-block; display: inline-block;
vertical-align: baseline; vertical-align: baseline;
zoom: 1; zoom: 1;
*display: inline; *display: inline;
*vertical-align: auto; } *vertical-align: auto;
left: -1px;
position: absolute;
top: 48px;
width: 100%;
z-index: 10; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds li {
border-bottom: 1px solid #000;
-webkit-box-shadow: 0 1px 0 #555555;
-moz-box-shadow: 0 1px 0 #555555;
box-shadow: 0 1px 0 #555555;
color: #fff;
cursor: pointer;
padding: 0 11.326px; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds li.active { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds li.active {
font-weight: bold; } font-weight: bold; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds li:last-child {
border-bottom: 0;
margin-top: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds li:hover { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds ol#video_speeds li:hover {
color: #aaa; } color: #aaa;
background-color: #666; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds:hover { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds:hover {
opacity: 1; opacity: 1;
background-color: #444; } background-color: #444; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles {
float: left; float: left;
display: block; display: block;
padding-right: 11.326px; padding: 0 11.326px;
margin-left: 0; margin-left: 0;
color: #797979; color: #797979;
padding-left: 50px;
line-height: 46px; line-height: 46px;
width: 30px;
text-indent: -9999px;
font-weight: 800; font-weight: 800;
background: url("/static/images/cc.png") 16px center no-repeat; background: url("/static/images/cc.png") center no-repeat;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-webkit-transition-property: all; -webkit-transition-property: all;
-moz-transition-property: all; -moz-transition-property: all;
...@@ -2963,25 +3221,88 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr ...@@ -2963,25 +3221,88 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
-moz-transition-delay: 0; -moz-transition-delay: 0;
-ms-transition-delay: 0; -ms-transition-delay: 0;
-o-transition-delay: 0; -o-transition-delay: 0;
transition-delay: 0;
opacity: 1;
position: relative; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles:after {
text-indent: 0;
position: absolute;
top: 0;
right: -40px;
content: "turn off";
display: block;
width: 70px;
opacity: 0;
visibility: hidden;
-webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.15s;
-moz-transition-duration: 0.15s;
-ms-transition-duration: 0.15s;
-o-transition-duration: 0.15s;
transition-duration: 0.15s;
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; } transition-delay: 0; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles:hover { section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles:hover {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
background-color: #444; } background-color: #444;
padding-right: 80px;
background-position: 11px center; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles:hover:after {
right: 0;
opacity: 1;
visibility: visible; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles.off {
opacity: .7; }
section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.hide-subtitles.off:after {
content: "turn on"; }
section.course-content div.video-subtitles ol.subtitles { section.course-content div.video-subtitles ol.subtitles {
float: left; float: left;
width: 31.522%; width: 31.522%;
height: 530px; padding-top: 10px;
max-height: 460px;
overflow: hidden; } overflow: hidden; }
section.course-content div.video-subtitles ol.subtitles li { section.course-content div.video-subtitles ol.subtitles li {
margin-bottom: 0px;
cursor: pointer;
border: 0; border: 0;
color: #666;
cursor: pointer;
margin-bottom: 0px;
padding: 0; padding: 0;
color: #666; } -webkit-transition-property: all;
-moz-transition-property: all;
-ms-transition-property: all;
-o-transition-property: all;
transition-property: all;
-webkit-transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;
-o-transition-duration: 0.5s;
transition-duration: 0.5s;
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-ms-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-delay: 0;
-moz-transition-delay: 0;
-ms-transition-delay: 0;
-o-transition-delay: 0;
transition-delay: 0; }
section.course-content div.video-subtitles ol.subtitles li.current { section.course-content div.video-subtitles ol.subtitles li.current {
background-color: #f3f3f3; color: #333;
color: #333; } font-weight: 700; }
section.course-content div.video-subtitles ol.subtitles li:hover { section.course-content div.video-subtitles ol.subtitles li:hover {
color: #993333; } color: #993333; }
section.course-content div.video-subtitles ol.subtitles li div { section.course-content div.video-subtitles ol.subtitles li div {
...@@ -2994,6 +3315,9 @@ section.course-content div.video-subtitles.closed ol.subtitles { ...@@ -2994,6 +3315,9 @@ section.course-content div.video-subtitles.closed ol.subtitles {
width: 0px; width: 0px;
height: 0; } height: 0; }
div.course-wrapper.closed section.course-content div.video-subtitles ol.subtitles {
max-height: 577px; }
nav.sequence-nav { nav.sequence-nav {
-webkit-box-sizing: border-box; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box; -moz-box-sizing: border-box;
......
static/js/jquery.qtip.min.js 0 → 100644
/*
* qTip2 - Pretty powerful tooltips
* http://craigsworks.com/projects/qtip2/
*
* Version: nightly
* Copyright 2009-2010 Craig Michael Thompson - http://craigsworks.com
*
* Dual licensed under MIT or GPLv2 licenses
* http://en.wikipedia.org/wiki/MIT_License
* http://en.wikipedia.org/wiki/GNU_General_Public_License
*
* Date: Mon Apr 2 13:46:17.0000000000 2012
*//*jslint browser: true, onevar: true, undef: true, nomen: true, bitwise: true, regexp: true, newcap: true, immed: true, strict: true *//*global window: false, jQuery: false, console: false, define: false */(function(a){typeof define==="function"&&define.amd?define(["jquery"],a):a(jQuery)})(function(a){function z(d){var e=this,f=d.elements.tooltip,g=d.options.content.ajax,h=".qtip-ajax",i=/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi,j=b,k=c,l;d.checks.ajax={"^content.ajax":function(a,b,c){b==="ajax"&&(g=c),b==="once"?e.init():g&&g.url?e.load():f.unbind(h)}},a.extend(e,{init:function(){g&&g.url&&f.unbind(h)[g.once?"one":"bind"]("tooltipshow"+h,e.load);return e},load:function(b,f){function r(a,b,c){!k&&a.status!==0&&d.set("content.text",b+": "+c)}function q(b){k||(m&&(b=a("<div/>").append(b.replace(i,"")).find(m)),d.set("content.text",b))}function p(){k||(n&&(d.show(b.originalEvent),f=c),a.isFunction(g.complete)&&g.complete.apply(this,arguments))}var h=g.url.indexOf(" "),j=g.url,m,n=g.once&&!g.loading&&f;if(n)try{b.preventDefault()}catch(o){}else if(b&&b.isDefaultPrevented())return e;l&&l.abort&&l.abort(),h>-1&&(m=j.substr(h),j=j.substr(0,h)),l=a.ajax(a.extend({success:q,error:r,context:d},g,{url:j,complete:p}))},destroy:function(){l&&l.abort&&l.abort(),k=b}}),e.init()}function y(e,h){var i,j,k,l,m,n=a(this),o=a(document.body),p=this===document?o:n,q=n.metadata?n.metadata(h.metadata):d,r=h.metadata.type==="html5"&&q?q[h.metadata.name]:d,s=n.data(h.metadata.name||"qtipopts");try{s=typeof s==="string"?(new Function("return "+s))():s}catch(u){v("Unable to parse HTML5 attribute data: "+s)}l=a.extend(b,{},f.defaults,h,typeof s==="object"?w(s):d,w(r||q)),j=l.position,l.id=e;if("boolean"===typeof l.content.text){k=n.attr(l.content.attr);if(l.content.attr!==c&&k)l.content.text=k;else{v("Unable to locate content for tooltip! Aborting render of tooltip on element: ",n);return c}}j.container.length||(j.container=o),j.target===c&&(j.target=p),l.show.target===c&&(l.show.target=p),l.show.solo===b&&(l.show.solo=j.container.closest("body")),l.hide.target===c&&(l.hide.target=p),l.position.viewport===b&&(l.position.viewport=j.container),j.container=j.container.eq(0),j.at=new g.Corner(j.at),j.my=new g.Corner(j.my);if(a.data(this,"qtip"))if(l.overwrite)n.qtip("destroy");else if(l.overwrite===c)return c;l.suppress&&(m=a.attr(this,"title"))&&a(this).removeAttr("title").attr(t,m),i=new x(n,l,e,!!k),a.data(this,"qtip",i),n.bind("remove.qtip-"+e+" removeqtip.qtip-"+e,function(){i.destroy()});return i}function x(r,s,v,x){function Q(){var b=[s.show.target[0],s.hide.target[0],y.rendered&&F.tooltip[0],s.position.container[0],s.position.viewport[0],window,document];y.rendered?a([]).pushStack(a.grep(b,function(a){return typeof a==="object"})).unbind(E):s.show.target.unbind(E+"-create")}function P(){function o(a){D.is(":visible")&&y.reposition(a)}function n(a){if(D.hasClass(l))return c;clearTimeout(y.timers.inactive),y.timers.inactive=setTimeout(function(){y.hide(a)},s.hide.inactive)}function k(b){if(D.hasClass(l)||B||C)return c;var f=a(b.relatedTarget||b.target),g=f.closest(m)[0]===D[0],h=f[0]===e.show[0];clearTimeout(y.timers.show),clearTimeout(y.timers.hide);if(d.target==="mouse"&&g||s.hide.fixed&&(/mouse(out|leave|move)/.test(b.type)&&(g||h)))try{b.preventDefault(),b.stopImmediatePropagation()}catch(i){}else s.hide.delay>0?y.timers.hide=setTimeout(function(){y.hide(b)},s.hide.delay):y.hide(b)}function j(a){if(D.hasClass(l))return c;clearTimeout(y.timers.show),clearTimeout(y.timers.hide);var d=function(){y.toggle(b,a)};s.show.delay>0?y.timers.show=setTimeout(d,s.show.delay):d()}var d=s.position,e={show:s.show.target,hide:s.hide.target,viewport:a(d.viewport),document:a(document),body:a(document.body),window:a(window)},g={show:a.trim(""+s.show.event).split(" "),hide:a.trim(""+s.hide.event).split(" ")},i=a.browser.msie&&parseInt(a.browser.version,10)===6;D.bind("mouseenter"+E+" mouseleave"+E,function(a){var b=a.type==="mouseenter";b&&y.focus(a),D.toggleClass(p,b)}),s.hide.fixed&&(e.hide=e.hide.add(D),D.bind("mouseover"+E,function(){D.hasClass(l)||clearTimeout(y.timers.hide)})),/mouse(out|leave)/i.test(s.hide.event)?s.hide.leave==="window"&&e.window.bind("mouseout"+E+" blur"+E,function(a){/select|option/.test(a.target)&&!a.relatedTarget&&y.hide(a)}):/mouse(over|enter)/i.test(s.show.event)&&e.hide.bind("mouseleave"+E,function(a){clearTimeout(y.timers.show)}),(""+s.hide.event).indexOf("unfocus")>-1&&d.container.closest("html").bind("mousedown"+E,function(b){var c=a(b.target),d=!D.hasClass(l)&&D.is(":visible"),e=c.parents(m).filter(D[0]).length>0;c[0]!==r[0]&&c[0]!==D[0]&&!e&&!r.has(c[0]).length&&!c.attr("disabled")&&y.hide(b)}),"number"===typeof s.hide.inactive&&(e.show.bind("qtip-"+v+"-inactive",n),a.each(f.inactiveEvents,function(a,b){e.hide.add(F.tooltip).bind(b+E+"-inactive",n)})),a.each(g.hide,function(b,c){var d=a.inArray(c,g.show),f=a(e.hide);d>-1&&f.add(e.show).length===f.length||c==="unfocus"?(e.show.bind(c+E,function(a){D.is(":visible")?k(a):j(a)}),delete g.show[d]):e.hide.bind(c+E,k)}),a.each(g.show,function(a,b){e.show.bind(b+E,j)}),"number"===typeof s.hide.distance&&e.show.add(D).bind("mousemove"+E,function(a){var b=G.origin||{},c=s.hide.distance,d=Math.abs;(d(a.pageX-b.pageX)>=c||d(a.pageY-b.pageY)>=c)&&y.hide(a)}),d.target==="mouse"&&(e.show.bind("mousemove"+E,function(a){h={pageX:a.pageX,pageY:a.pageY,type:"mousemove"}}),d.adjust.mouse&&(s.hide.event&&(D.bind("mouseleave"+E,function(a){(a.relatedTarget||a.target)!==e.show[0]&&y.hide(a)}),F.target.bind("mouseenter"+E+" mouseleave"+E,function(a){G.onTarget=a.type==="mouseenter"})),e.document.bind("mousemove"+E,function(a){G.onTarget&&!D.hasClass(l)&&D.is(":visible")&&y.reposition(a||h)}))),(d.adjust.resize||e.viewport.length)&&(a.event.special.resize?e.viewport:e.window).bind("resize"+E,o),(e.viewport.length||i&&D.css("position")==="fixed")&&e.viewport.bind("scroll"+E,o)}function O(b,d){function g(b){function i(e){e&&(delete h[e.src],clearTimeout(y.timers.img[e.src]),a(e).unbind(E)),a.isEmptyObject(h)&&(y.redraw(),d!==c&&y.reposition(G.event),b())}var g,h={};if((g=f.find("img[src]:not([height]):not([width])")).length===0)return i();g.each(function(b,c){if(h[c.src]===e){var d=0,f=3;(function g(){if(c.height||c.width||d>f)return i(c);d+=1,y.timers.img[c.src]=setTimeout(g,700)})(),a(c).bind("error"+E+" load"+E,function(){i(this)}),h[c.src]=c}})}var f=F.content;if(!y.rendered||!b)return c;a.isFunction(b)&&(b=b.call(r,G.event,y)||""),b.jquery&&b.length>0?f.empty().append(b.css({display:"block"})):f.html(b),y.rendered<0?D.queue("fx",g):(C=0,g(a.noop));return y}function N(b,d){var e=F.title;if(!y.rendered||!b)return c;a.isFunction(b)&&(b=b.call(r,G.event,y));if(b===c||!b&&b!=="")return J(c);b.jquery&&b.length>0?e.empty().append(b.css({display:"block"})):e.html(b),y.redraw(),d!==c&&y.rendered&&D.is(":visible")&&y.reposition(G.event)}function M(a){var b=F.button,d=F.title;if(!y.rendered)return c;a?(d||L(),K()):b.remove()}function L(){var c=A+"-title";F.titlebar&&J(),F.titlebar=a("<div />",{"class":j+"-titlebar "+(s.style.widget?"ui-widget-header":"")}).append(F.title=a("<div />",{id:c,"class":j+"-title","aria-atomic":b})).insertBefore(F.content).delegate(".ui-tooltip-close","mousedown keydown mouseup keyup mouseout",function(b){a(this).toggleClass("ui-state-active ui-state-focus",b.type.substr(-4)==="down")}).delegate(".ui-tooltip-close","mouseover mouseout",function(b){a(this).toggleClass("ui-state-hover",b.type==="mouseover")}),s.content.title.button?K():y.rendered&&y.redraw()}function K(){var b=s.content.title.button,d=typeof b==="string",e=d?b:"Close tooltip";F.button&&F.button.remove(),b.jquery?F.button=b:F.button=a("<a />",{"class":"ui-state-default ui-tooltip-close "+(s.style.widget?"":j+"-icon"),title:e,"aria-label":e}).prepend(a("<span />",{"class":"ui-icon ui-icon-close",html:"&times;"})),F.button.appendTo(F.titlebar).attr("role","button").click(function(a){D.hasClass(l)||y.hide(a);return c}),y.redraw()}function J(a){F.title&&(F.titlebar.remove(),F.titlebar=F.title=F.button=d,a!==c&&y.reposition())}function I(){var a=s.style.widget;D.toggleClass(k,a).toggleClass(n,s.style.def&&!a),F.content.toggleClass(k+"-content",a),F.titlebar&&F.titlebar.toggleClass(k+"-header",a),F.button&&F.button.toggleClass(j+"-icon",!a)}function H(a){var b=0,c,d=s,e=a.split(".");while(d=d[e[b++]])b<e.length&&(c=d);return[c||s,e.pop()]}var y=this,z=document.body,A=j+"-"+v,B=0,C=0,D=a(),E=".qtip-"+v,F,G;y.id=v,y.rendered=c,y.elements=F={target:r},y.timers={img:{}},y.options=s,y.checks={},y.plugins={},y.cache=G={event:{},target:a(),disabled:c,attr:x,onTarget:c},y.checks.builtin={"^id$":function(d,e,g){var h=g===b?f.nextid:g,i=j+"-"+h;h!==c&&h.length>0&&!a("#"+i).length&&(D[0].id=i,F.content[0].id=i+"-content",F.title[0].id=i+"-title")},"^content.text$":function(a,b,c){O(c)},"^content.title.text$":function(a,b,c){if(!c)return J();!F.title&&c&&L(),N(c)},"^content.title.button$":function(a,b,c){M(c)},"^position.(my|at)$":function(a,b,c){"string"===typeof c&&(a[b]=new g.Corner(c))},"^position.container$":function(a,b,c){y.rendered&&D.appendTo(c)},"^show.ready$":function(){y.rendered?y.toggle(b):y.render(1)},"^style.classes$":function(a,b,c){D.attr("class",j+" qtip ui-helper-reset "+c)},"^style.widget|content.title":I,"^events.(render|show|move|hide|focus|blur)$":function(b,c,d){D[(a.isFunction(d)?"":"un")+"bind"]("tooltip"+c,d)},"^(show|hide|position).(event|target|fixed|inactive|leave|distance|viewport|adjust)":function(){var a=s.position;D.attr("tracking",a.target==="mouse"&&a.adjust.mouse),Q(),P()}},a.extend(y,{render:function(d){if(y.rendered)return y;var e=s.content.text,f=s.content.title.text,h=s.position,i=a.Event("tooltiprender");a.attr(r[0],"aria-describedby",A),D=F.tooltip=a("<div/>",{id:A,"class":j+" qtip ui-helper-reset "+n+" "+s.style.classes+" "+j+"-pos-"+s.position.my.abbrev(),width:s.style.width||"",height:s.style.height||"",tracking:h.target==="mouse"&&h.adjust.mouse,role:"alert","aria-live":"polite","aria-atomic":c,"aria-describedby":A+"-content","aria-hidden":b}).toggleClass(l,G.disabled).data("qtip",y).appendTo(s.position.container).append(F.content=a("<div />",{"class":j+"-content",id:A+"-content","aria-atomic":b})),y.rendered=-1,B=C=1,f&&(L(),a.isFunction(f)||N(f,c)),a.isFunction(e)||O(e,c),y.rendered=b,I(),a.each(s.events,function(b,c){a.isFunction(c)&&D.bind(b==="toggle"?"tooltipshow tooltiphide":"tooltip"+b,c)}),a.each(g,function(){this.initialize==="render"&&this(y)}),P(),D.queue("fx",function(a){i.originalEvent=G.event,D.trigger(i,[y]),B=C=0,y.redraw(),(s.show.ready||d)&&y.toggle(b,G.event,c),a()});return y},get:function(a){var b,c;switch(a.toLowerCase()){case"dimensions":b={height:D.outerHeight(),width:D.outerWidth()};break;case"offset":b=g.offset(D,s.position.container);break;default:c=H(a.toLowerCase()),b=c[0][c[1]],b=b.precedance?b.string():b}return b},set:function(e,f){function m(a,b){var c,d,e;for(c in k)for(d in k[c])if(e=(new RegExp(d,"i")).exec(a))b.push(e),k[c][d].apply(y,b)}var g=/^position\.(my|at|adjust|target|container)|style|content|show\.ready/i,h=/^content\.(title|attr)|style/i,i=c,j=c,k=y.checks,l;"string"===typeof e?(l=e,e={},e[l]=f):e=a.extend(b,{},e),a.each(e,function(b,c){var d=H(b.toLowerCase()),f;f=d[0][d[1]],d[0][d[1]]="object"===typeof c&&c.nodeType?a(c):c,e[b]=[d[0],d[1],c,f],i=g.test(b)||i,j=h.test(b)||j}),w(s),B=C=1,a.each(e,m),B=C=0,D.is(":visible")&&y.rendered&&(i&&y.reposition(s.position.target==="mouse"?d:G.event),j&&y.redraw());return y},toggle:function(e,f){function r(){e?(a.browser.msie&&D[0].style.removeAttribute("filter"),D.css("overflow",""),"string"===typeof i.autofocus&&a(i.autofocus,D).focus(),i.target.trigger("qtip-"+v+"-inactive")):D.css({display:"",visibility:"",opacity:"",left:"",top:""}),q=a.Event("tooltip"+(e?"visible":"hidden")),q.originalEvent=f?G.event:d,D.trigger(q,[y])}if(!y.rendered)return e?y.render(1):y;var g=e?"show":"hide",i=s[g],j=D.is(":visible"),k=!f||i.target.length<2||G.target[0]===f.target,l=f&&i.target.add(f.target).length!==i.target.length,n=s.position,o=s.content,p,q;(typeof e).search("boolean|number")&&(e=!j);if(!D.is(":animated")&&j===e&&k)return y;if(f){if(/over|enter/.test(f.type)&&/out|leave/.test(G.event.type)&&s.show.target.add(f.target).length===s.show.target.length&&D.has(f.relatedTarget).length)return y;G.event=a.extend({},f)}q=a.Event("tooltip"+g),q.originalEvent=f?G.event:d,D.trigger(q,[y,90]);if(q.isDefaultPrevented())return y;a.attr(D[0],"aria-hidden",!e),e?(G.origin=a.extend({},h),y.focus(f),a.isFunction(o.text)&&O(o.text,c),a.isFunction(o.title.text)&&N(o.title.text,c),!u&&n.target==="mouse"&&n.adjust.mouse&&(a(document).bind("mousemove.qtip",function(a){h={pageX:a.pageX,pageY:a.pageY,type:"mousemove"}}),u=b),y.reposition(f,arguments[2]),(q.solo=!!i.solo)&&a(m,i.solo).not(D).qtip("hide",q)):(clearTimeout(y.timers.show),delete G.origin,u&&!a(m+'[tracking="true"]:visible',i.solo).not(D).length&&(a(document).unbind("mousemove.qtip"),u=c),y.blur(f)),D.stop(l,!l),i.effect===c?(D[g](),r.call(D)):a.isFunction(i.effect)?(i.effect.call(D,y),D.queue("fx",function(a){r(),a()})):D.fadeTo(90,e?1:0,r),e&&i.target.trigger("qtip-"+v+"-inactive");return y},show:function(a){return y.toggle(b,a)},hide:function(a){return y.toggle(c,a)},focus:function(b){if(!y.rendered)return y;var c=a(m),d=parseInt(D[0].style.zIndex,10),e=f.zindex+c.length,g=a.extend({},b),h,i;D.hasClass(o)||(i=a.Event("tooltipfocus"),i.originalEvent=g,D.trigger(i,[y,e]),i.isDefaultPrevented()||(d!==e&&(c.each(function(){this.style.zIndex>d&&(this.style.zIndex=this.style.zIndex-1)}),c.filter("."+o).qtip("blur",g)),D.addClass(o)[0].style.zIndex=e));return y},blur:function(b){var c=a.extend({},b),d;D.removeClass(o),d=a.Event("tooltipblur"),d.originalEvent=c,D.trigger(d,[y]);return y},reposition:function(b,d){if(!y.rendered||B)return y;B=1;var e=s.position.target,f=s.position,i=f.my,k=f.at,l=f.adjust,m=l.method.split(" "),n=D.outerWidth(),o=D.outerHeight(),p=0,q=0,r=a.Event("tooltipmove"),t=D.css("position")==="fixed",u=f.viewport,v={left:0,top:0},w=f.container,x=c,A=y.plugins.tip,C={horizontal:m[0],vertical:m[1]=m[1]||m[0],enabled:u.jquery&&e[0]!==window&&e[0]!==z&&l.method!=="none",left:function(a){var b=C.horizontal==="shift",c=-w.offset.left+u.offset.left+u.scrollLeft,d=i.x==="left"?n:i.x==="right"?-n:-n/2,e=k.x==="left"?p:k.x==="right"?-p:-p/2,f=A&&A.size?A.size.width||0:0,g=A&&A.corner&&A.corner.precedance==="x"&&!b?f:0,h=c-a+g,j=a+n-u.width-c+g,m=d-(i.precedance==="x"||i.x===i.y?e:0)-(k.x==="center"?p/2:0),o=i.x==="center";b?(g=A&&A.corner&&A.corner.precedance==="y"?f:0,m=(i.x==="left"?1:-1)*d-g,v.left+=h>0?h:j>0?-j:0,v.left=Math.max(-w.offset.left+u.offset.left+(g&&A.corner.x==="center"?A.offset:0),a-m,Math.min(Math.max(-w.offset.left+u.offset.left+u.width,a+m),v.left))):(h>0&&(i.x!=="left"||j>0)?v.left-=m:j>0&&(i.x!=="right"||h>0)&&(v.left-=o?-m:m),v.left!==a&&o&&(v.left-=l.x),v.left<c&&-v.left>j&&(v.left=a));return v.left-a},top:function(a){var b=C.vertical==="shift",c=-w.offset.top+u.offset.top+u.scrollTop,d=i.y==="top"?o:i.y==="bottom"?-o:-o/2,e=k.y==="top"?q:k.y==="bottom"?-q:-q/2,f=A&&A.size?A.size.height||0:0,g=A&&A.corner&&A.corner.precedance==="y"&&!b?f:0,h=c-a+g,j=a+o-u.height-c+g,m=d-(i.precedance==="y"||i.x===i.y?e:0)-(k.y==="center"?q/2:0),n=i.y==="center";b?(g=A&&A.corner&&A.corner.precedance==="x"?f:0,m=(i.y==="top"?1:-1)*d-g,v.top+=h>0?h:j>0?-j:0,v.top=Math.max(-w.offset.top+u.offset.top+(g&&A.corner.x==="center"?A.offset:0),a-m,Math.min(Math.max(-w.offset.top+u.offset.top+u.height,a+m),v.top))):(h>0&&(i.y!=="top"||j>0)?v.top-=m:j>0&&(i.y!=="bottom"||h>0)&&(v.top-=n?-m:m),v.top!==a&&n&&(v.top-=l.y),v.top<0&&-v.top>j&&(v.top=a));return v.top-a}},E;if(a.isArray(e)&&e.length===2)k={x:"left",y:"top"},v={left:e[0],top:e[1]};else if(e==="mouse"&&(b&&b.pageX||G.event.pageX))k={x:"left",y:"top"},b=(b&&(b.type==="resize"||b.type==="scroll")?G.event:b&&b.pageX&&b.type==="mousemove"?b:h&&h.pageX&&(l.mouse||!b||!b.pageX)?{pageX:h.pageX,pageY:h.pageY}:!l.mouse&&G.origin&&G.origin.pageX&&s.show.distance?G.origin:b)||b||G.event||h||{},v={top:b.pageY,left:b.pageX};else{e==="event"?b&&b.target&&b.type!=="scroll"&&b.type!=="resize"?e=G.target=a(b.target):e=G.target:e=G.target=a(e.jquery?e:F.target),e=a(e).eq(0);if(e.length===0)return y;e[0]===document||e[0]===window?(p=g.iOS?window.innerWidth:e.width(),q=g.iOS?window.innerHeight:e.height(),e[0]===window&&(v={top:(u||e).scrollTop(),left:(u||e).scrollLeft()})):e.is("area")&&g.imagemap?v=g.imagemap(e,k,C.enabled?m:c):e[0].namespaceURI==="http://www.w3.org/2000/svg"&&g.svg?v=g.svg(e,k):(p=e.outerWidth(),q=e.outerHeight(),v=g.offset(e,w)),v.offset&&(p=v.width,q=v.height,x=v.flipoffset,v=v.offset);if(g.iOS<4.1&&g.iOS>3.1||g.iOS==4.3||!g.iOS&&t)E=a(window),v.left-=E.scrollLeft(),v.top-=E.scrollTop();v.left+=k.x==="right"?p:k.x==="center"?p/2:0,v.top+=k.y==="bottom"?q:k.y==="center"?q/2:0}v.left+=l.x+(i.x==="right"?-n:i.x==="center"?-n/2:0),v.top+=l.y+(i.y==="bottom"?-o:i.y==="center"?-o/2:0),C.enabled?(u={elem:u,height:u[(u[0]===window?"h":"outerH")+"eight"](),width:u[(u[0]===window?"w":"outerW")+"idth"](),scrollLeft:t?0:u.scrollLeft(),scrollTop:t?0:u.scrollTop(),offset:u.offset()||{left:0,top:0}},w={elem:w,scrollLeft:w.scrollLeft(),scrollTop:w.scrollTop(),offset:w.offset()||{left:0,top:0}},v.adjusted={left:C.horizontal!=="none"?C.left(v.left):0,top:C.vertical!=="none"?C.top(v.top):0},v.adjusted.left+v.adjusted.top&&D.attr("class",D[0].className.replace(/ui-tooltip-pos-\w+/i,j+"-pos-"+i.abbrev())),x&&v.adjusted.left&&(v.left+=x.left),x&&v.adjusted.top&&(v.top+=x.top)):v.adjusted={left:0,top:0},r.originalEvent=a.extend({},b),D.trigger(r,[y,v,u.elem||u]);if(r.isDefaultPrevented())return y;delete v.adjusted,d===c||isNaN(v.left)||isNaN(v.top)||e==="mouse"||!a.isFunction(f.effect)?D.css(v):a.isFunction(f.effect)&&(f.effect.call(D,y,a.extend({},v)),D.queue(function(b){a(this).css({opacity:"",height:""}),a.browser.msie&&this.style.removeAttribute("filter"),b()})),B=0;return y},redraw:function(){if(y.rendered<1||C)return y;var a=s.position.container,b,c,d,e;C=1,s.style.height&&D.css("height",s.style.height),s.style.width?D.css("width",s.style.width):(D.css("width","").addClass(q),c=D.width()+1,d=D.css("max-width")||"",e=D.css("min-width")||"",b=(d+e).indexOf("%")>-1?a.width()/100:0,d=(d.indexOf("%")>-1?b:1)*parseInt(d,10)||c,e=(e.indexOf("%")>-1?b:1)*parseInt(e,10)||0,c=d+e?Math.min(Math.max(c,e),d):c,D.css("width",Math.round(c)).removeClass(q)),C=0;return y},disable:function(b){"boolean"!==typeof b&&(b=!D.hasClass(l)&&!G.disabled),y.rendered?(D.toggleClass(l,b),a.attr(D[0],"aria-disabled",b)):G.disabled=!!b;return y},enable:function(){return y.disable(c)},destroy:function(){var b=r[0],c=a.attr(b,t),d=r.data("qtip");y.rendered&&(D.stop(1,0).remove(),a.each(y.plugins,function(){this.destroy&&this.destroy()})),clearTimeout(y.timers.show),clearTimeout(y.timers.hide),Q();if(!d||y===d)a.removeData(b,"qtip"),s.suppress&&c&&(a.attr(b,"title",c),r.removeAttr(t)),r.removeAttr("aria-describedby");r.unbind(".qtip-"+v),delete i[y.id];return r}})}function w(b){var e;if(!b||"object"!==typeof b)return c;if(b.metadata===d||"object"!==typeof b.metadata)b.metadata={type:b.metadata};if("content"in b){if(b.content===d||"object"!==typeof b.content||b.content.jquery)b.content={text:b.content};e=b.content.text||c,!a.isFunction(e)&&(!e&&!e.attr||e.length<1||"object"===typeof e&&!e.jquery)&&(b.content.text=c);if("title"in b.content){if(b.content.title===d||"object"!==typeof b.content.title)b.content.title={text:b.content.title};e=b.content.title.text||c,!a.isFunction(e)&&(!e&&!e.attr||e.length<1||"object"===typeof e&&!e.jquery)&&(b.content.title.text=c)}}if("position"in b)if(b.position===d||"object"!==typeof b.position)b.position={my:b.position,at:b.position};if("show"in b)if(b.show===d||"object"!==typeof b.show)b.show.jquery?b.show={target:b.show}:b.show={event:b.show};if("hide"in b)if(b.hide===d||"object"!==typeof b.hide)b.hide.jquery?b.hide={target:b.hide}:b.hide={event:b.hide};if("style"in b)if(b.style===d||"object"!==typeof b.style)b.style={classes:b.style};a.each(g,function(){this.sanitize&&this.sanitize(b)});return b}function v(){v.history=v.history||[],v.history.push(arguments);if("object"===typeof console){var a=console[console.warn?"warn":"log"],b=Array.prototype.slice.call(arguments),c;typeof arguments[0]==="string"&&(b[0]="qTip2: "+b[0]),c=a.apply?a.apply(console,b):a(b)}}"use strict";var b=!0,c=!1,d=null,e,f,g,h,i={},j="ui-tooltip",k="ui-widget",l="ui-state-disabled",m="div.qtip."+j,n=j+"-default",o=j+"-focus",p=j+"-hover",q=j+"-fluid",r="-31000px",s="_replacedByqTip",t="oldtitle",u;f=a.fn.qtip=function(g,h,i){var j=(""+g).toLowerCase(),k=d,l=a.makeArray(arguments).slice(1),m=l[l.length-1],n=this[0]?a.data(this[0],"qtip"):d;if(!arguments.length&&n||j==="api")return n;if("string"===typeof g){this.each(function(){var d=a.data(this,"qtip");if(!d)return b;m&&m.timeStamp&&(d.cache.event=m);if(j!=="option"&&j!=="options"||!h)d[j]&&d[j].apply(d[j],l);else if(a.isPlainObject(h)||i!==e)d.set(h,i);else{k=d.get(h);return c}});return k!==d?k:this}if("object"===typeof g||!arguments.length){n=w(a.extend(b,{},g));return f.bind.call(this,n,m)}},f.bind=function(d,j){return this.each(function(k){function r(b){function d(){p.render(typeof b==="object"||l.show.ready),m.show.add(m.hide).unbind(o)}if(p.cache.disabled)return c;p.cache.event=a.extend({},b),p.cache.target=b?a(b.target):[e],l.show.delay>0?(clearTimeout(p.timers.show),p.timers.show=setTimeout(d,l.show.delay),n.show!==n.hide&&m.hide.bind(n.hide,function(){clearTimeout(p.timers.show)})):d()}var l,m,n,o,p,q;q=a.isArray(d.id)?d.id[k]:d.id,q=!q||q===c||q.length<1||i[q]?f.nextid++:i[q]=q,o=".qtip-"+q+"-create",p=y.call(this,q,d);if(p===c)return b;l=p.options,a.each(g,function(){this.initialize==="initialize"&&this(p)}),m={show:l.show.target,hide:l.hide.target},n={show:a.trim(""+l.show.event).replace(/ /g,o+" ")+o,hide:a.trim(""+l.hide.event).replace(/ /g,o+" ")+o},/mouse(over|enter)/i.test(n.show)&&!/mouse(out|leave)/i.test(n.hide)&&(n.hide+=" mouseleave"+o),m.show.bind("mousemove"+o,function(a){h={pageX:a.pageX,pageY:a.pageY,type:"mousemove"},p.cache.onTarget=b}),m.show.bind(n.show,r),(l.show.ready||l.prerender)&&r(j)})},g=f.plugins={Corner:function(a){a=(""+a).replace(/([A-Z])/," $1").replace(/middle/gi,"center").toLowerCase(),this.x=(a.match(/left|right/i)||a.match(/center/)||["inherit"])[0].toLowerCase(),this.y=(a.match(/top|bottom|center/i)||["inherit"])[0].toLowerCase();var b=a.charAt(0);this.precedance=b==="t"||b==="b"?"y":"x",this.string=function(){return this.precedance==="y"?this.y+this.x:this.x+this.y},this.abbrev=function(){var a=this.x.substr(0,1),b=this.y.substr(0,1);return a===b?a:a==="c"||a!=="c"&&b!=="c"?b+a:a+b},this.clone=function(){return{x:this.x,y:this.y,precedance:this.precedance,string:this.string,abbrev:this.abbrev,clone:this.clone}}},offset:function(b,c){function j(a,b){d.left+=b*a.scrollLeft(),d.top+=b*a.scrollTop()}var d=b.offset(),e=b.closest("body")[0],f=c,g,h,i;if(f){do f.css("position")!=="static"&&(h=f.position(),d.left-=h.left+(parseInt(f.css("borderLeftWidth"),10)||0)+(parseInt(f.css("marginLeft"),10)||0),d.top-=h.top+(parseInt(f.css("borderTopWidth"),10)||0)+(parseInt(f.css("marginTop"),10)||0),!g&&(i=f.css("overflow"))!=="hidden"&&i!=="visible"&&(g=f));while((f=a(f[0].offsetParent)).length);g&&g[0]!==e&&j(g,1)}return d},iOS:parseFloat((""+(/CPU.*OS ([0-9_]{1,3})|(CPU like).*AppleWebKit.*Mobile/i.exec(navigator.userAgent)||[0,""])[1]).replace("undefined","3_2").replace("_","."))||c,fn:{attr:function(b,c){if(this.length){var d=this[0],e="title",f=a.data(d,"qtip");if(b===e&&f&&"object"===typeof f&&f.options.suppress){if(arguments.length<2)return a.attr(d,t);f&&f.options.content.attr===e&&f.cache.attr&&f.set("content.text",c);return this.attr(t,c)}}return a.fn["attr"+s].apply(this,arguments)},clone:function(b){var c=a([]),d="title",e=a.fn["clone"+s].apply(this,arguments);b||e.filter("["+t+"]").attr("title",function(){return a.attr(this,t)}).removeAttr(t);return e}}},a.each(g.fn,function(c,d){if(!d||a.fn[c+s])return b;var e=a.fn[c+s]=a.fn[c];a.fn[c]=function(){return d.apply(this,arguments)||e.apply(this,arguments)}}),a.ui||(a["cleanData"+s]=a.cleanData,a.cleanData=function(b){for(var c=0,d;(d=b[c])!==e;c++)try{a(d).triggerHandler("removeqtip")}catch(f){}a["cleanData"+s](b)}),f.version="nightly",f.nextid=0,f.inactiveEvents="click dblclick mousedown mouseup mousemove mouseleave mouseenter".split(" "),f.zindex=15e3,f.defaults={prerender:c,id:c,overwrite:b,suppress:b,content:{text:b,attr:"title",title:{text:c,button:c}},position:{my:"top left",at:"bottom right",target:c,container:c,viewport:c,adjust:{x:0,y:0,mouse:b,resize:b,method:"flip flip"},effect:function(b,d,e){a(this).animate(d,{duration:200,queue:c})}},show:{target:c,event:"mouseenter",effect:b,delay:90,solo:c,ready:c,autofocus:c},hide:{target:c,event:"mouseleave",effect:b,delay:0,fixed:c,inactive:c,leave:"window",distance:c},style:{classes:"",widget:c,width:c,height:c,def:b},events:{render:d,move:d,show:d,hide:d,toggle:d,visible:d,hidden:d,focus:d,blur:d}},g.ajax=function(a){var b=a.plugins.ajax;return"object"===typeof b?b:a.plugins.ajax=new z(a)},g.ajax.initialize="render",g.ajax.sanitize=function(a){var b=a.content,c;b&&"ajax"in b&&(c=b.ajax,typeof c!=="object"&&(c=a.content.ajax={url:c}),"boolean"!==typeof c.once&&c.once&&(c.once=!!c.once))},a.extend(b,f.defaults,{content:{ajax:{loading:b,once:b}}})})
\ No newline at end of file
static/js/video_player.js
...@@ -352,6 +352,8 @@ function updateytplayerInfo() { ...@@ -352,6 +352,8 @@ function updateytplayerInfo() {
} }
if (player_state == 1){ if (player_state == 1){
update_captions(getCurrentTime()); update_captions(getCurrentTime());
handle = $('.ui-slider-handle', $('#slider'));
handle.qtip('option', 'content.text', '' + format_time(getCurrentTime()));
} }
// updateHTML("videoduration", getDuration()); // updateHTML("videoduration", getDuration());
// updateHTML("videotime", getCurrentTime()); // updateHTML("videotime", getCurrentTime());
...@@ -420,7 +422,7 @@ function stop() { ...@@ -420,7 +422,7 @@ function stop() {
function getPlayerState() { function getPlayerState() {
if (ytplayer) { if (ytplayer) {
return ytplayer.getPlayerState(); return ytplayer.getPlayerState();
} }
} }
......
templates/main.html
...@@ -107,6 +107,7 @@ ...@@ -107,6 +107,7 @@
<script type="text/javascript" src="${ settings.LIB_URL }jquery.treeview.js"></script> <script type="text/javascript" src="${ settings.LIB_URL }jquery.treeview.js"></script>
<script type="text/javascript" src="/static/js/jquery.leanModal.min.js"></script> <script type="text/javascript" src="/static/js/jquery.leanModal.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.qtip.min.js"></script>
<script type="text/javascript" src="/static/js/jquery.cookie.js"></script> <script type="text/javascript" src="/static/js/jquery.cookie.js"></script>
<script type="text/javascript" src="/static/js/video_player.js"></script> <script type="text/javascript" src="/static/js/video_player.js"></script>
<script type="text/javascript" src="/static/js/schematic.js"></script> <script type="text/javascript" src="/static/js/schematic.js"></script>
......
templates/sass/application.scss
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
@import "base/reset", "base/font-face"; @import "base/reset", "base/font-face";
@import "base/variables", "base/functions", "base/extends", "base/base"; @import "base/variables", "base/functions", "base/extends", "base/base";
@import "layout/layout", "layout/header", "layout/footer", "layout/calculator", "layout/leanmodal"; @import "layout/layout", "layout/header", "layout/footer", "layout/calculator", "layout/leanmodal";
@import "plugins/jquery-ui-1.8.16.custom"; @import "plugins/jquery-ui-1.8.16.custom", "plugins/jquery.qtip.min";
// pages // pages
@import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav", "courseware/amplifier"; @import "courseware/courseware", "courseware/sidebar", "courseware/video", "courseware/sequence-nav", "courseware/amplifier";
......
templates/sass/courseware/_courseware.scss
...@@ -175,6 +175,7 @@ div.course-wrapper { ...@@ -175,6 +175,7 @@ div.course-wrapper {
} }
div.staff_info { div.staff_info {
@include clearfix();
white-space: pre-wrap; white-space: pre-wrap;
border-top: 1px solid #ccc; border-top: 1px solid #ccc;
padding-top: lh(); padding-top: lh();
......
templates/sass/courseware/_video.scss
section.course-content { section.course-content {
div.video-subtitles { div.video-subtitles {
padding: 6px lh();
margin: 0 (-(lh()));
border-top: 1px solid #e1e1e1;
border-bottom: 1px solid #e1e1e1;
background: #f3f3f3;
position: relative; position: relative;
@include clearfix();
div.video-wrapper { div.video-wrapper {
float: left; float: left;
...@@ -56,6 +62,7 @@ section.course-content { ...@@ -56,6 +62,7 @@ section.course-content {
background: #333; background: #333;
position: relative; position: relative;
border: 1px solid #000; border: 1px solid #000;
border-top: 0;
color: #ccc; color: #ccc;
div#slider { div#slider {
...@@ -64,25 +71,77 @@ section.course-content { ...@@ -64,25 +71,77 @@ section.course-content {
@include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555); @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
background: #c2c2c2; background: #c2c2c2;
border: none; border: none;
border-top: 1px solid #000;
border-bottom: 1px solid #000; border-bottom: 1px solid #000;
height: 14px; height: 7px;
@include transition();
div.ui-widget-header {
background: #777;
@include box-shadow(inset 0 1px 0 #999);
}
.ui-tooltip.qtip .ui-tooltip-content {
background: $mit-red;
border: 1px solid darken($mit-red, 20%);
@include border-radius(2px);
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
color: #fff;
font: bold 12px $body-font-family;
margin-bottom: 6px;
padding: 4px;
text-align: center;
-webkit-font-smoothing: antialiased;
text-shadow: 0 -1px 0 darken($mit-red, 10%);
overflow: visible;
&::after {
content: " ";
width: 7px;
height: 7px;
display: block;
position: absolute;
bottom: -5px;
left: 50%;
margin-left: -3px;
@include transform(rotate(45deg));
background: $mit-red;
border-right: 1px solid darken($mit-red, 20%);
border-bottom: 1px solid darken($mit-red, 20%);
}
}
a.ui-slider-handle { a.ui-slider-handle {
@include border-radius(20px); @include border-radius(15px);
@include box-shadow(inset 0 1px 0 lighten($mit-red, 10%)); @include box-shadow(inset 0 1px 0 lighten($mit-red, 10%));
background: $mit-red url(/static/images/slider-handle.png) center center no-repeat; background: $mit-red url(/static/images/slider-handle.png) center center no-repeat;
border: 1px solid darken($mit-red, 20%); border: 1px solid darken($mit-red, 20%);
cursor: pointer; cursor: pointer;
height: 20px; height: 15px;
margin-left: -10px; margin-left: -7px;
top: -4px; top: -4px;
width: 20px; width: 15px;
@include transition();
@include background-size(50%);
&:focus, &:hover { &:focus, &:hover {
background-color: lighten($mit-red, 10%); background-color: lighten($mit-red, 10%);
outline: none; outline: none;
} }
} }
&:hover {
height: 14px;
margin-top: -7px;
a.ui-slider-handle {
@include border-radius(20px);
height: 20px;
margin-left: -10px;
top: -4px;
width: 20px;
}
}
} }
ul.vcr { ul.vcr {
...@@ -100,9 +159,10 @@ section.course-content { ...@@ -100,9 +159,10 @@ section.course-content {
display: block; display: block;
cursor: pointer; cursor: pointer;
height: 14px; height: 14px;
padding: lh(.75) lh(); padding: lh(.75);
text-indent: -9999px; text-indent: -9999px;
width: 14px; width: 14px;
@include transition();
&.play { &.play {
background: url('/static/images/play-icon.png') center center no-repeat; background: url('/static/images/play-icon.png') center center no-repeat;
...@@ -123,7 +183,7 @@ section.course-content { ...@@ -123,7 +183,7 @@ section.course-content {
} }
div#vidtime { div#vidtime {
padding-left: lh(); padding-left: lh(.75);
font-weight: bold; font-weight: bold;
line-height: 46px; //height of play pause buttons line-height: 46px; //height of play pause buttons
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
...@@ -135,38 +195,68 @@ section.course-content { ...@@ -135,38 +195,68 @@ section.course-content {
float: right; float: right;
div.speeds { div.speeds {
border-right: 1px solid #000;
border-left: 1px solid #000; border-left: 1px solid #000;
border-right: 1px solid #000;
@include box-shadow(1px 0 0 #555, inset 1px 0 0 #555); @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
float: left; float: left;
line-height: 46px; //height of play pause buttons line-height: 46px; //height of play pause buttons
margin-right: 0; margin-right: 0;
-webkit-font-smoothing: antialiased; position: relative;
opacity: .7;
@include transition(); @include transition();
width: 110px;
cursor: pointer;
-webkit-font-smoothing: antialiased;
h3 { h3 {
@include inline-block(); @include inline-block();
padding: 0 lh(.5); padding: 0 lh(.25) 0 lh(.5);
font-weight: normal; font-weight: normal;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 1px;
color: #999;
}
p.active {
@include inline-block();
padding: 0 lh(.5) 0 0;
margin-bottom: 0;
font-weight: bold;
} }
// fix for now // fix for now
ol#video_speeds { ol#video_speeds {
background-color: #444;
border: 1px solid #000;
border-top: 0;
@include box-shadow(inset 1px 0 0 #555);
@include inline-block(); @include inline-block();
padding-right: lh(.5); left: -1px;
position: absolute;
top: 48px;
width: 100%;
z-index: 10;
li { li {
cursor: pointer; border-bottom: 1px solid #000;
@include box-shadow( 0 1px 0 #555);
color: #fff; color: #fff;
@include inline-block(); cursor: pointer;
padding: 0 lh(.5);
&.active { &.active {
font-weight: bold; font-weight: bold;
} }
&:last-child {
border-bottom: 0;
margin-top: 0;
@include box-shadow(none);
}
&:hover { &:hover {
color: #aaa; color: #aaa;
background-color: #666;
} }
} }
} }
...@@ -180,20 +270,52 @@ section.course-content { ...@@ -180,20 +270,52 @@ section.course-content {
a.hide-subtitles { a.hide-subtitles {
float: left; float: left;
display: block; display: block;
padding-right: lh(.5); padding: 0 lh(.5);
margin-left: 0; margin-left: 0;
color: #797979; color: #797979;
padding-left: 50px;
line-height: 46px; //height of play pause buttons line-height: 46px; //height of play pause buttons
width: 30px;
text-indent: -9999px;
font-weight: 800; font-weight: 800;
background: url('/static/images/cc.png') 16px center no-repeat; background: url('/static/images/cc.png') center no-repeat;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@include transition(); @include transition();
opacity: 1;
position: relative;
&:after {
text-indent: 0;
position: absolute;
top: 0;
right: -40px;
content: "turn off";
display: block;
width: 70px;
opacity: 0;
visibility: hidden;
@include transition();
}
&:hover { &:hover {
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
background-color: #444; background-color: #444;
padding-right: 80px;
background-position: 11px center;
&:after {
right: 0;
opacity: 1;
visibility: visible;
}
}
&.off {
opacity: .7;
&:after {
content: "turn on";
}
} }
} }
} }
...@@ -203,19 +325,21 @@ section.course-content { ...@@ -203,19 +325,21 @@ section.course-content {
ol.subtitles { ol.subtitles {
float: left; float: left;
width: flex-grid(3, 9); width: flex-grid(3, 9);
height: 530px; padding-top: 10px;
max-height: 460px;
overflow: hidden; overflow: hidden;
li { li {
margin-bottom: 0px;
cursor: pointer;
border: 0; border: 0;
padding: 0;
color: #666; color: #666;
cursor: pointer;
margin-bottom: 0px;
padding: 0;
@include transition(all, .5s, ease-in);
&.current { &.current {
background-color: #f3f3f3;
color: #333; color: #333;
font-weight: 700;
} }
&:hover { &:hover {
...@@ -246,3 +370,9 @@ section.course-content { ...@@ -246,3 +370,9 @@ section.course-content {
} }
} }
} }
div.course-wrapper.closed section.course-content div.video-subtitles {
ol.subtitles {
max-height: 577px;
}
}
templates/sass/plugins/_jquery.qtip.min.scss 0 → 100644
.ui-tooltip,.qtip{position:absolute;left:-28000px;top:-28000px;display:none;max-width:280px;min-width:50px;font-size:10.5px;line-height:12px;}.ui-tooltip-fluid{display:block;visibility:hidden;position:static!important;float:left!important;}.ui-tooltip-content{position:relative;padding:5px 9px;overflow:hidden;border:1px solid #000001;text-align:left;word-wrap:break-word;overflow:hidden;}.ui-tooltip-titlebar{position:relative;min-height:14px;padding:5px 35px 5px 10px;overflow:hidden;border:1px solid #000001;border-width:1px 1px 0;font-weight:bold;}.ui-tooltip-titlebar+.ui-tooltip-content{border-top-width:0!important;}/*!Default close button class */ .ui-tooltip-titlebar .ui-state-default{position:absolute;right:4px;top:50%;margin-top:-9px;cursor:pointer;outline:medium none;border-width:1px;border-style:solid;}* html .ui-tooltip-titlebar .ui-state-default{top:16px;}.ui-tooltip-titlebar .ui-icon,.ui-tooltip-icon .ui-icon{display:block;text-indent:-1000em;}.ui-tooltip-icon,.ui-tooltip-icon .ui-icon{-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}.ui-tooltip-icon .ui-icon{width:18px;height:14px;text-align:center;text-indent:0;font:normal bold 10px/13px Tahoma,sans-serif;color:inherit;background:transparent none no-repeat -100em -100em;}/*!Default tooltip style */ .ui-tooltip-default .ui-tooltip-titlebar,.ui-tooltip-default .ui-tooltip-content{border-color:#F1D031;background-color:#FFFFA3;color:#555;}.ui-tooltip-default .ui-tooltip-titlebar{background-color:#FFEF93;}.ui-tooltip-default .ui-tooltip-icon{border-color:#CCC;background:#F1F1F1;color:#777;}.ui-tooltip-default .ui-tooltip-titlebar .ui-state-hover{border-color:#AAA;color:#111;}
\ No newline at end of file
templates/video.html
...@@ -29,10 +29,11 @@ ...@@ -29,10 +29,11 @@
<div class="secondary-controls"> <div class="secondary-controls">
<div class="speeds"> <div class="speeds">
<h3>Speed</h3> <h3>Speed</h3>
<p class="active"></p>
<ol id="video_speeds"></ol> <ol id="video_speeds"></ol>
</div> </div>
<a href="#" class="hide-subtitles">turn off</a> <a href="#" class="hide-subtitles">Captions</a>
</div> </div>
</section> </section>
</section> </section>
...@@ -54,7 +55,7 @@ ...@@ -54,7 +55,7 @@
<li id="stt_p5"><div id="std_p5" onclick="title_seek( 5);"></div></li> <li id="stt_p5"><div id="std_p5" onclick="title_seek( 5);"></div></li>
<li id="stt_p6"><div id="std_p7" onclick="title_seek( 6);"></div></li> <li id="stt_p6"><div id="std_p7" onclick="title_seek( 6);"></div></li>
<li id="stt_p6"><div id="std_p7" onclick="title_seek( 7);"></div></li> <li id="stt_p6"><div id="std_p7" onclick="title_seek( 7);"></div></li>
<!-- <li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li> --> <li id="stt_p6"><div id="std_p7" onclick="title_seek( 8);"></div></li>
</ol> </ol>
</div> </div>
...@@ -65,10 +66,15 @@ ...@@ -65,10 +66,15 @@
$('.hide-subtitles').click(function() { $('.hide-subtitles').click(function() {
$('div.video-subtitles').toggleClass('closed'); $('div.video-subtitles').toggleClass('closed');
var link_text = $('.hide-subtitles').text(); $(this).toggleClass("off");
$(this).text((link_text == 'turn off') ? 'turn on' : 'turn off');
return false; return false;
}); });
$("ol#video_speeds").hide();
$("div.speeds").click(function() {
$("ol#video_speeds").slideToggle(150);
});
}); });
</script> </script>
</%block> </%block>
templates/video_init.js
...@@ -20,9 +20,47 @@ if (swfobject.hasFlashPlayerVersion("10.1")){ ...@@ -20,9 +20,47 @@ if (swfobject.hasFlashPlayerVersion("10.1")){
// Make sure the callback is called once API ready, YT seems to be buggy // Make sure the callback is called once API ready, YT seems to be buggy
loadHTML5Video(); loadHTML5Video();
} }
var captions=0; var captions=0;
$("#slider").slider({slide:function(event,ui){seek_slide('slide',event.originalEvent,ui.value);},
stop:function(event,ui){seek_slide('stop',event.originalEvent,ui.value);}}); /* Cache a reference to our slider element */
var slider = $('#slider')
.slider({
range: "min",
slide: function(event,ui) {
var slider_time = format_time(ui.value)
seek_slide('slide',event.originalEvent,ui.value);
handle.qtip('option', 'content.text', '' + slider_time);
},
stop:function(event,ui){seek_slide('stop',event.originalEvent,ui.value);}
}),
/* Grab and cache the newly created slider handle */
handle = $('.ui-slider-handle', slider);
/*
* Selector needs changing here to match your elements.
*
* Notice the second argument to the $() constructor, which tells
* jQuery to use that as the top-level element to seareh down from.
*/
handle.qtip({
content: '' + slider.slider('option', 'value'), // Use the current value of the slider
position: {
my: 'bottom center',
at: 'top center',
container: handle // Stick it inside the handle element so it keeps the position synched up
},
hide: {
delay: 700 // Give it a longer delay so it doesn't hide frequently as we move the handle
},
style: {
classes: 'ui-tooltip-slider',
widget: true // Make it Themeroller compatible
}
});
function good() { function good() {
window['console'].log(ytplayer.getCurrentTime()); window['console'].log(ytplayer.getCurrentTime());
...@@ -37,7 +75,8 @@ function add_speed(key, stream) { ...@@ -37,7 +75,8 @@ function add_speed(key, stream) {
var id = 'speed_' + stream; var id = 'speed_' + stream;
if (key == video_speed) { if (key == video_speed) {
$("#video_speeds").append(' <li class=active id="'+id+'">'+key+'x</li>'); $("#video_speeds").append(' <li class="active" id="'+id+'">'+key+'x</li>');
$("p.active").text(key + 'x');
} else { } else {
$("#video_speeds").append(' <li id="'+id+'">'+key+'x</li>'); $("#video_speeds").append(' <li id="'+id+'">'+key+'x</li>');
} }
...@@ -46,6 +85,8 @@ function add_speed(key, stream) { ...@@ -46,6 +85,8 @@ function add_speed(key, stream) {
change_video_speed(key, stream); change_video_speed(key, stream);
$(this).siblings().removeClass("active"); $(this).siblings().removeClass("active");
$(this).addClass("active"); $(this).addClass("active");
var active = $(this).text();
$("p.active").text(active);
}); });
} }
...@@ -89,8 +130,6 @@ $(document).ready(function() { ...@@ -89,8 +130,6 @@ $(document).ready(function() {
}); });
function toggleVideo(){ function toggleVideo(){
if ($("#video_control").hasClass("play")){ if ($("#video_control").hasClass("play")){
play(); play();
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment