Skip to content

E
edx-platform
Commit bd570bee by Kyle Fiedler
Options

Added styles for the video player

parent 712b9711
Showing with 105 additions and 27 deletions
sass/_courseware-video.scss
...@@ -3,7 +3,6 @@ section.course-content { ...@@ -3,7 +3,6 @@ section.course-content {
div.video-wrapper { div.video-wrapper {
float: left; float: left;
width: flex-grid(6, 9); width: flex-grid(6, 9);
margin-right: flex-gutter(9); margin-right: flex-gutter(9);
div.video-player { div.video-player {
...@@ -32,40 +31,112 @@ section.course-content { ...@@ -32,40 +31,112 @@ section.course-content {
} }
} }
section { // ul {
ul { // float: left;
display: inline-block;
// li {
// margin-top: 5px;
// display: inline-block;
// cursor: pointer;
// border: 0;
// padding: 0;
// div {
// &:empty {
// display: none;
// }
// }
// }
// }
section.video-controls {
@extend .clearfix;
background: #333;
border: 1px solid #000;
color: #ccc;
li { div#slider {
margin-top: 5px; @extend .clearfix;
display: inline-block; @include border-radius(0);
cursor: pointer; @include box-shadow(inset 0 1px 0 #eee, 0 1px 0 #555);
background: #c2c2c2;
border: none;
border-bottom: 1px solid #000;
height: 22px;
a.ui-slider-handle {
@include border-radius(0);
background: $mit-red url(/static/images/slider-handle.png) center center no-repeat;
border: 0; border: 0;
padding: 0; border-right: 1px solid darken($mit-red, 20%);
border-left: 1px solid darken($mit-red, 20%);
cursor: pointer;
height: 22px;
margin: 0;
top: 0;
width: 22px;
}
}
ul.vcr {
float: left;
margin-right: lh();
div { li {
&:empty { float: left;
display: none;
a {
@include box-shadow(1px 0 0 #555);
border-right: 1px solid #000;
display: block;
cursor: pointer;
height: 14px;
padding: lh(.75) lh();
text-indent: -9999px;
width: 14px;
&.play {
background: url('/static/images/play-icon.png') center center no-repeat;
&:hover {
background-color: #444;
}
}
&.pause {
background: url('/static/images/pause-icon.png') center center no-repeat;
&:hover {
background-color: #444;
}
} }
} }
} }
} }
div#slider {
margin: -14px 0 10px 60px;
}
div#vidtime { div#vidtime {
float: left; float: left;
font-weight: bold;
line-height: 46px; //height of play pause buttons
-webkit-font-smoothing: antialiased;
} }
div#video_speeds { div.speeds {
float: right; float: right;
cursor: pointer; line-height: 46px; //height of play pause buttons
margin-right: lh();
-webkit-font-smoothing: antialiased;
div#video_speeds {
@include inline-block();
font-weight: bold;
span { span {
&:hover { cursor: pointer;
color: $mit-red;
&:hover {
color: $mit-red;
}
} }
} }
} }
......
video.html
...@@ -8,13 +8,20 @@ ...@@ -8,13 +8,20 @@
</div> </div>
<section class="video-controls"> <section class="video-controls">
<ul>
<li><span class="ui-icon ui-icon-play" onclick="play();"></span></li>
<li><span class="ui-icon ui-icon-pause" onclick="pause();"></span></li>
</ul>
<div id="slider"></div> <div id="slider"></div>
<div id="vidtime">0:00/0:00</div>
<div id="video_speeds"></div> <section>
<ul class="vcr">
<li><a class="play" onclick="play();">Play</a></li>
<li><a class="pause" onclick="pause();">Pause</a></li>
</ul>
<div id="vidtime">0:00 / 0:00</div>
<div class="speeds">
Speed: <div id="video_speeds"></div>
</div>
</section>
</section> </section>
</div> </div>
......
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