Added arrow to show the dropdown

static/css/application.css

@@ -3129,10 +3129,13 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
   -webkit-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;
+  cursor: pointer;
   float: left;
-  line-height: 0;
-  padding-right: 5.663px;
+  line-height: 46px;
   margin-right: 0;
+  padding-left: 15px;
+  background: url("/static/images/closed-arrow.png") 10px center no-repeat;
+  position: relative;
   -webkit-transition-property: all;
   -moz-transition-property: all;
   -ms-transition-property: all;
@@ -3153,18 +3156,26 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
   -ms-transition-delay: 0;
   -o-transition-delay: 0;
   transition-delay: 0;
-  cursor: pointer;
-  -webkit-font-smoothing: antialiased; }
+  -webkit-font-smoothing: antialiased;
+  width: 110px; }
+section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds.open {
+  background: url("/static/images/open-arrow.png") 10px center no-repeat; }
 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"] {
-  float: left;
-  padding: 0 5.663px 0 11.326px;
-  font-weight: normal;
-  text-transform: uppercase;
+  color: #999;
   font-size: 12px;
+  font-weight: normal;
+  display: -moz-inline-box;
+  -moz-box-orient: vertical;
+  display: inline-block;
+  vertical-align: baseline;
+  zoom: 1;
+  *display: inline;
+  *vertical-align: auto;
   letter-spacing: 1px;
-  color: #999;
-  line-height: 46px; }
+  padding: 0 5.663px 0 11.326px;
+  text-transform: uppercase; }
 section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls div.speeds p.active {
+  font-weight: bold;
   display: -moz-inline-box;
   -moz-box-orient: vertical;
   display: inline-block;
@@ -3172,24 +3183,35 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
   zoom: 1;
   *display: inline;
   *vertical-align: auto;
-  padding: 0 11.326px 0 0;
   margin-bottom: 0;
-  font-weight: bold;
-  display: none; }
+  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 {
+  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;
   -moz-box-orient: vertical;
   display: inline-block;
   vertical-align: baseline;
   zoom: 1;
   *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 {
-  float: left;
+  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 5.663px;
-  line-height: 46px; }
+  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 {
   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 {
@@ -3199,9 +3221,11 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
   -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 {
-  background-color: #444; }
+  color: #aaa;
+  background-color: #666; }
 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; }
 section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls a.add-fullscreen {
   background: url(/static/images/fullscreen.png) center no-repeat;
   border-right: 1px solid #000;

templates/sass/courseware/_video.scss

@@ -194,43 +194,57 @@ section.course-content {
             border-left: 1px solid #000;
             border-right: 1px solid #000;
             @include box-shadow(1px 0 0 #555, inset 1px 0 0 #555);
+            cursor: pointer;
             float: left;
-            line-height: 0;
-            padding-right: lh(.25);
+            line-height: 46px; //height of play pause buttons
             margin-right: 0;
+            padding-left: 15px;
+            background: url('/static/images/closed-arrow.png') 10px center no-repeat;
+            position: relative;
             @include transition();
-            cursor: pointer;
             -webkit-font-smoothing: antialiased;
+            width: 110px;
+
+            &.open {
+              background: url('/static/images/open-arrow.png') 10px center no-repeat;
+            }
 
             h3 {
-              float: left;
-              padding: 0 lh(.25) 0 lh(.5);
-              font-weight: normal;
-              text-transform: uppercase;
+              color: #999;
               font-size: 12px;
+              font-weight: normal;
+              @include inline-block();
               letter-spacing: 1px;
-              color: #999;
-              line-height: 46px; //height of play pause buttons
+              padding: 0 lh(.25) 0 lh(.5);
+              text-transform: uppercase;
             }
 
             p.active {
+              font-weight: bold;
               @include inline-block();
-              padding: 0 lh(.5) 0 0;
               margin-bottom: 0;
-              font-weight: bold;
-              display: none;
+              padding: 0 lh(.5) 0 0;
             }
 
             // fix for now
             ol#video_speeds {
+              background-color: #444;
+              border: 1px solid #000;
+              border-top: 0;
+              @include box-shadow(inset 1px 0 0 #555);
               @include inline-block();
+              left: -1px;
+              position: absolute;
+              top: 48px;
+              width: 100%;
+              z-index: 10;
 
               li {
-                float: left;
+                border-bottom: 1px solid #000;
+                @include box-shadow( 0 1px 0 #555);
                 color: #fff;
                 cursor: pointer;
-                padding: 0 lh(.25);
-                line-height: 46px; //height of play pause buttons
+                padding: 0 lh(.5);
 
                 &.active {
                   font-weight: bold;
@@ -243,13 +257,15 @@ section.course-content {
                 }
 
                 &:hover {
-                  background-color: #444;
+                  color: #aaa;
+                  background-color: #666;
                 }
               }
             }
 
             &:hover {
               opacity: 1;
+              background-color: #444;
             }
           }
 

templates/video.html

@@ -115,9 +115,9 @@ at: 'bottom center', // at the bottom right
       $("ol#video_speeds").hide();
 
       $("div.speeds").click(function() {
+        $(this).toggleClass("open");
         $("ol#video_speeds").slideToggle(150);
         });
-
-      });
+  });
 </script>
 </%block>