From bd570bee4675caf4d26e1619ddd6dbbbe3955c53 Mon Sep 17 00:00:00 2001
From: Kyle Fiedler <kfiedler@thoughtbot.com>
Date: Mon, 30 Jan 2012 15:51:08 -0500
Subject: [PATCH] Added styles for the video player

---
 sass/_courseware-video.scss | 113 +++++++++++++++++++++++++++++-------
 video.html                  |  19 ++++--
 2 files changed, 105 insertions(+), 27 deletions(-)

diff --git a/sass/_courseware-video.scss b/sass/_courseware-video.scss
index 10504ff39c..bb8dde7d58 100644
--- a/sass/_courseware-video.scss
+++ b/sass/_courseware-video.scss
@@ -3,7 +3,6 @@ section.course-content {
   div.video-wrapper {
     float: left;
     width: flex-grid(6, 9);
-
     margin-right: flex-gutter(9);
 
     div.video-player {
@@ -32,40 +31,112 @@ section.course-content {
       }
     }
 
-    section {
-      ul {
-        display: inline-block;
+    // ul {
+    //   float: left;
+
+    //   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;
+
+      div#slider {
+        @extend .clearfix;
+        @include border-radius(0);
+        @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-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();
 
         li {
-          margin-top: 5px;
-          display: inline-block;
-          cursor: pointer;
-          border: 0;
-          padding: 0;
+          float: left;
 
-          div {
-            &:empty {
-              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 {
         float: left;
+        font-weight: bold;
+        line-height: 46px; //height of play pause buttons
+        -webkit-font-smoothing: antialiased;
       }
 
-      div#video_speeds {
+      div.speeds {
         float: right;
-        cursor: pointer;
+        line-height: 46px; //height of play pause buttons
+        margin-right: lh();
+        -webkit-font-smoothing: antialiased;
 
-        span {
-          &:hover {
-            color: $mit-red;
+        div#video_speeds {
+          @include inline-block();
+          font-weight: bold;
+
+          span {
+            cursor: pointer;
+
+            &:hover {
+              color: $mit-red;
+            }
           }
         }
       }
diff --git a/video.html b/video.html
index 20dd38d063..a68476548e 100644
--- a/video.html
+++ b/video.html
@@ -8,13 +8,20 @@
   </div>
 
   <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="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>
 
 </div>