Clean up look of progress bar

* Widen progress bar
* Increase height of elements contained within the progress bar to
  match my change from the last commit
* Stagger the drag handles so that the time is visible even if they
  are close together. Unfortunately, the clip line appears above the
  start drag handle when they are close together & I can't seem to fix
  this using z-index. I will update this to make the drag handles
  aligned horizontally again, but will nudge them so that the side of
  a handle juts up against the clip line.

1 files changed, 11 insertions, 3 deletions

diff --git a/assets/css/sample-editor.css b/assets/css/sample-editor.css
index 7b64171..da04ef8 100644
--- a/assets/css/sample-editor.css
+++ b/assets/css/sample-editor.css
@@ -8,7 +8,7 @@
 
 .progress-bar {
 	border: 1px solid #777;
-	width: 50%;
+	width: 90%;
 	height: 3em;
 	position: relative;
 	background-color: #ddd; /* change to something more pleasant later */
@@ -19,7 +19,7 @@
 	position: relative;
 	z-index: 5;
 	width: 1px;
-	height: 2em;
+	height: 3em;
 	background-color: #222;
 }
 
@@ -33,9 +33,17 @@
 	background-color: yellow;
 }
 
+.start-drag-handle {
+	top: 0.4em;
+}
+
+.stop-drag-handle {
+	top: 1.6em;
+}
+
 .selected-bar {
 	width: 0;
-	height: 2em;
+	height: 3em;
 	position: absolute;
 	top: 0;
 	background-color: #4087a0;