From a06f01c04a3c2f989f1d4b2465b4ee0ffb037634 Mon Sep 17 00:00:00 2001
From: John McLear <john@mclear.co.uk>
Date: Tue, 18 Nov 2014 22:21:36 +0000
Subject: [PATCH] some timeslider styling but this wont be completed by me

---
 src/static/css/timeslider.css | 107 ++++++++++++++++++++--------------
 1 file changed, 62 insertions(+), 45 deletions(-)

diff --git a/src/static/css/timeslider.css b/src/static/css/timeslider.css
index 6608df3e6..a45a79377 100644
--- a/src/static/css/timeslider.css
+++ b/src/static/css/timeslider.css
@@ -14,14 +14,14 @@
   top: 0;
 }
 #timeslider-left {
-  background-image: url(../../static/img/timeslider_left.png);
+  background-color:#fff;
   height: 63px;
   left: 0;
   position: absolute;
   width: 134px;
 }
 #timeslider-right {
-  background-image: url(../../static/img/timeslider_right.png);
+  background-color:#fff;
   height: 63px;
   position: absolute;
   right: 0;
@@ -29,7 +29,6 @@
   width: 155px;
 }
 #timeslider {
-  background-image: url(../../static/img/timeslider_background.png);
   height: 63px;
   margin: 0 9px;
   -webkit-touch-callout: none;
@@ -50,7 +49,7 @@
   -webkit-user-select: none;
   -moz-user-select: none;
   user-select: none;
-  background-image: url(../../static/img/crushed_current_location.png);
+  background-color: #666;
   cursor: pointer;
   height: 61px;
   left: 0;
@@ -63,66 +62,95 @@
   -moz-user-select: none;
   user-select: none;
   cursor: pointer;
-  height: 35px;
+  height: 60px;
   margin-left: 5px;
   margin-right: 150px;
   position: relative;
-  top: 20px;
+  top: 0px;
 }
+
 #playpause_button,
 #playpause_button_icon {
-  height: 47px;
+  height: 44px;
   position: absolute;
-  width: 47px;
+  width: 44px;
+  text-align:center;
+  vertical-align:middle;
 }
 #playpause_button {
-  background-image: url(../../static/img/crushed_button_undepressed.png);
   right: 77px;
   top: 9px;
+  height:50px;
+  height:50px;
+  background: background-linear-gradient( #F7F7F7, #F1F1F1 80%) repeat scroll 0 0 transparent;
+  border-radius:24px;
 }
+#playpause_button_icon:before {
+  line-height:44px;  
+  padding-left:2px;
+  font-family: fontawesome-etherpad;
+  content: "\e810";
+  font-size:24px;
+  color:#666;
+}
+
 #playpause_button_icon {
-  background-image: url(../../static/img/play.png);
   left: 0;
   top: 0;
+  border-radius:48px;
+  border: solid 1px #666;
 }
-.pause#playpause_button_icon {
-  background-image: url(../../static/img/pause.png)
+.pause:before {
+  line-height:48px;  
+  padding-left:4px;
+  font-family: fontawesome-etherpad;
+  content: "\e811";
+  font-size:24px;
+  color:#666;
 }
 #leftstar,
 #rightstar,
 #leftstep,
 #rightstep {
-  background: url(../../static/img/stepper_buttons.png) 0 0 no-repeat;
-  height: 21px;
+  background-color: white;
   overflow: hidden;
   position: absolute;
 }
-#leftstar {
-  background-position: 0 -44px;
-  right: 34px;
-  top: 8px;
-  width: 30px;
+
+.stepper{
+  font-family: fontawesome-etherpad;
+  border-radius:2px;
+  border: #666 solid 1px;
+  line-height:18px;
+  text-align:center;
+  height:22px;
+  color:#666;
 }
-#rightstar {
-  background-position: -29px -44px;
-  right: 5px;
-  top: 8px;
-  width: 29px;
+
+stepper:active{
+  color:#000;
 }
+
 #leftstep {
-  background-position: 0 -22px;
-  right: 34px;
+  right: 36px;
   top: 20px;
-  width: 30px;
+  width: 25px;
 }
+#leftstep:before{
+  content: '\e811';
+  vertical-align:middle;
+}
+#rightstep:before{
+  content: "\e812";
+  vertical-align:middle;
+}
+
 #rightstep {
-  background-position: -29px -22px;
-  right: 5px;
+  right: 10px;
   top: 20px;
-  width: 30px;
+  width: 25px;
 }
 #timeslider .star {
-  background-image: url(../../static/img/star.png);
   cursor: pointer;
   height: 16px;
   position: absolute;
@@ -130,7 +158,9 @@
   width: 15px;
 }
 #timeslider #timer {
-  color: #fff;
+  background: linear-gradient(#F7F7F7, #F1F1F1 80%) repeat scroll 0% 0% transparent;
+  padding:2px;
+  border-radius:2px;
   font-family: Arial, sans-serif;
   font-size: 11px;
   left: 7px;
@@ -291,16 +321,3 @@ OL {
 .list-number6 {
   list-style-type: lower-roman
 }
-/* IE 6/7 fixes */
-* HTML #ui-slider-handle {
-  background-image: url(../../static/img/current_location.gif)
-}
-* HTML #timeslider .star {
-  background-image: url(../../static/img/star.gif)
-}
-* HTML #playpause_button_icon {
-  background-image: url(../../static/img/play.gif)
-}
-* HTML .pause#playpause_button_icon {
-  background-image: url(../../static/img/pause.gif)
-}