Improve styling of drag handles

3 files changed, 25 insertions, 5 deletions

diff --git a/assets/css/application.css b/assets/css/application.css
index 7f751f7..0de3a55 100644
--- a/assets/css/application.css
+++ b/assets/css/application.css
@@ -6,6 +6,7 @@
 body {
 	background: url('../images/background.png') repeat;
 	padding: 0 2.8em;
+	font-family: Helvetica, sans-serif;
 }
 
 
diff --git a/assets/css/sample-editor.css b/assets/css/sample-editor.css
index 3e98d15..4df9152 100644
--- a/assets/css/sample-editor.css
+++ b/assets/css/sample-editor.css
@@ -22,25 +22,44 @@
 	z-index: 5;
 	width: 1px;
 	height: 3em;
-	background-color: #222;
+	background-color: #797979;
 }
 
 .drag-handle {
 	width: 2em;
 	height: 1em;
 	position: relative;
-	top: 1em;
+	top: 0.7em;
 	left: -1em;
+	padding: 0.3em;
 	cursor: ew-resize;
-	background-color: yellow;
+	color: #414141;
+	background-color: #dfe100;
+	
+	background: #e5e500; /* Old browsers */
+	background: -moz-linear-gradient(top,  #e5e500 0%, #dfe100 100%); /* FF3.6+ */
+	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e5e500), color-stop(100%,#dfe100)); /* Chrome,Safari4+ */
+	background: -webkit-linear-gradient(top,  #e5e500 0%,#dfe100 100%); /* Chrome10+,Safari5.1+ */
+	background: -o-linear-gradient(top,  #e5e500 0%,#dfe100 100%); /* Opera 11.10+ */
+	background: -ms-linear-gradient(top,  #e5e500 0%,#dfe100 100%); /* IE10+ */
+	background: linear-gradient(to bottom,  #e5e500 0%,#dfe100 100%); /* W3C */
+	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e5e500', endColorstr='#dfe100',GradientType=0 ); /* IE6-9 */
 }
 
 .start-drag-handle {
-	left: -2em;
+	left: -2.6em;
+	-webkit-border-radius: 3px 0px 0px 3px;
+	border-radius: 3px 0px 0px 3px;
+	-webkit-box-shadow: -2px 1px 1px 0px rgba(0, 0, 0, 0.2);
+	box-shadow: -2px 1px 1px 0px rgba(0, 0, 0, 0.2);
 }
 
 .stop-drag-handle {
 	left: 0.05em;
+	-webkit-border-radius: 0px 3px 3px 0px;
+	border-radius: 0px 3px 3px 0px;
+	-webkit-box-shadow: 2px 1px 1px 0px rgba(0, 0, 0, 0.2);
+	box-shadow: 2px 1px 1px 0px rgba(0, 0, 0, 0.2);
 }
 
 .selected-bar {
diff --git a/index.html b/index.html
index ed43984..411135c 100644
--- a/index.html
+++ b/index.html
@@ -51,7 +51,7 @@
 			<div class="progress-bar">
 				<div class="clip-line js-clip-line js-start-position">
 					<div class="drag-handle start-drag-handle js-drag-handle">
-						<span class="js-time"></span>
+						<span class="clip-time js-time"></span>
 					</div>
 				</div>