initial commit.

styles/player.scss

@@ -0,0 +1,113 @@
+@import "vars";
+@import "mixins";
+
+
+#player {
+
+  -webkit-overflow-scrolling: touch;
+  position: absolute;
+  border-radius: $radius;
+  
+  top: 100px;
+  left: 100px;
+  bottom: 100px;
+  right: 100px;
+  width: auto;
+  height: auto;
+  z-index: 0;
+  background-color: black;
+  white-space: nowrap;
+  z-index: 10000;
+  display: none;
+
+  #player-controls-1{
+    height: 100px;
+
+    &:hover #player-controls-2{
+      @include scale(1,1);
+    }
+
+    #player-controls-2{
+      @include transition( all 0.4s ease-in-out);
+    }
+
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    opacity: 0;
+    @include transition( all 0.4s ease-in-out);
+    @include translateY (20%);
+    &:hover {
+      @include translateY (0);
+      opacity: 1;
+      #player-controls {
+      @include rotateX(0deg);
+      }
+    }
+
+    @include backface-visibility(hidden);
+    -webkit-perspective: 1000;
+       -moz-perspective: 1000;
+        -ms-perspective: 1000;
+            perspective: 1000;
+
+    @include perspective-origin(bottom center);
+
+    #player-controls {
+      @include rotateX(-90deg);
+      @include transform-origin(bottom center);
+      @include backface-visibility(hidden);
+      @include transition( all 0.4s ease-in-out);
+      
+      background-color: rgba(0,0,0,0.25);
+      background-color: $darker;
+      border-radius: $radius;
+      margin: 20px;
+
+      /*  As of August 2012, only supported in Chrome 21+ */
+      display: -webkit-flex;
+      flex-direction: row;
+      align-items: center;
+
+      .time {
+        font-size: 20px;
+        line-height: 60px;
+        display: block;
+        padding: 0 20px;
+        &.current {border-left: 2px solid rgba(0,0,0,0.1); }
+        &.total {border-right: 2px solid rgba(0,0,0,0.1); }
+      }
+
+      .progress-bar {
+        flex: 1;
+        position: relative;
+      }
+
+      .progress-bar {
+        background-color: rgba(0,0,0,0.25);
+        width: 100%;
+        height: 60px;
+        position: relative;
+
+        .progress-bar-buffer,
+        .progress-bar-progress,
+        .progress-bar-handle {
+          position: absolute;
+          height: 60px;
+        }
+        .progress-bar-handle {
+          width: 4px;
+          background-color: $light;
+          z-index: 10;
+          margin-left: -2px;
+          height: 60px;
+          border-radius: 30px;
+        }
+        .progress-bar-buffer { background-color: rgba(0,0,0,0.25); }
+        .progress-bar-progress { background-color: $blue; }
+        .progress-bar-handle {}
+      }
+    }
+  }
+}