From ccaf58e006f2fad16c97e29e1a5844b0cd39dad9 Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sun, 10 Nov 2013 05:32:09 -0500 Subject: Improve positioning of edit sample area * Vertical align middle * Increase height of progress bar --- assets/css/sample-editor.css | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) (limited to 'assets/css/sample-editor.css') diff --git a/assets/css/sample-editor.css b/assets/css/sample-editor.css index 90ac195..7b64171 100644 --- a/assets/css/sample-editor.css +++ b/assets/css/sample-editor.css @@ -3,12 +3,13 @@ .edit-sample > div { display: inline-block; + vertical-align: middle; } .progress-bar { border: 1px solid #777; width: 50%; - height: 2em; + height: 3em; position: relative; background-color: #ddd; /* change to something more pleasant later */ } @@ -38,4 +39,10 @@ position: absolute; top: 0; background-color: #4087a0; +} + + +/* Key input */ +.edit-sample .key-input { + margin-top: 0.1em; } \ No newline at end of file -- cgit v1.2.3 From 8221c6541907b700e13a3746dccfdcf364e3d6eb Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sun, 10 Nov 2013 05:43:12 -0500 Subject: 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. --- assets/css/sample-editor.css | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) (limited to 'assets/css/sample-editor.css') 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; -- cgit v1.2.3 From 70a9c5f87708b30036aa86066e438612b41e4c0a Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sun, 10 Nov 2013 05:49:04 -0500 Subject: Reposition clip line drag handles Move start handle so that its right side touches the clip handle. Move stop handle so that its left side touches the clip handle. --- assets/css/sample-editor.css | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) (limited to 'assets/css/sample-editor.css') diff --git a/assets/css/sample-editor.css b/assets/css/sample-editor.css index da04ef8..bd85f20 100644 --- a/assets/css/sample-editor.css +++ b/assets/css/sample-editor.css @@ -27,18 +27,18 @@ width: 2em; height: 1em; position: relative; - top: 0.5em; + top: 1em; left: -1em; cursor: ew-resize; background-color: yellow; } .start-drag-handle { - top: 0.4em; + left: -2em; } .stop-drag-handle { - top: 1.6em; + left: 0.05em; } .selected-bar { -- cgit v1.2.3 From 8e76f32162a533b592211d14bfb254a81b486936 Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sun, 10 Nov 2013 05:59:12 -0500 Subject: Improve background colours/shadows of progress bar --- assets/css/sample-editor.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) (limited to 'assets/css/sample-editor.css') diff --git a/assets/css/sample-editor.css b/assets/css/sample-editor.css index bd85f20..f7b6868 100644 --- a/assets/css/sample-editor.css +++ b/assets/css/sample-editor.css @@ -7,11 +7,13 @@ } .progress-bar { - border: 1px solid #777; + border: 1px solid #b9b9b9; width: 90%; height: 3em; position: relative; - background-color: #ddd; /* change to something more pleasant later */ + background-color: #ddd; + -webkit-box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.15); + box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, 0.15); } .clip-line { -- cgit v1.2.3 From 65bf73caaa1685e83d57a50f32df2fae5d063720 Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sun, 10 Nov 2013 06:01:45 -0500 Subject: Add gradient to selected bar in progress bar --- assets/css/sample-editor.css | 8 ++++++++ 1 file changed, 8 insertions(+) (limited to 'assets/css/sample-editor.css') diff --git a/assets/css/sample-editor.css b/assets/css/sample-editor.css index f7b6868..3e98d15 100644 --- a/assets/css/sample-editor.css +++ b/assets/css/sample-editor.css @@ -49,6 +49,14 @@ position: absolute; top: 0; background-color: #4087a0; + background: #499db7; /* Old browsers */ + background: -moz-linear-gradient(top, #499db7 0%, #4087a0 100%); /* FF3.6+ */ + background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#499db7), color-stop(100%,#4087a0)); /* Chrome,Safari4+ */ + background: -webkit-linear-gradient(top, #499db7 0%,#4087a0 100%); /* Chrome10+,Safari5.1+ */ + background: -o-linear-gradient(top, #499db7 0%,#4087a0 100%); /* Opera 11.10+ */ + background: -ms-linear-gradient(top, #499db7 0%,#4087a0 100%); /* IE10+ */ + background: linear-gradient(to bottom, #499db7 0%,#4087a0 100%); /* W3C */ + filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#499db7', endColorstr='#4087a0',GradientType=0 ); /* IE6-9 */ } -- cgit v1.2.3 From f06d084d179746f53b5b969628f119195366769c Mon Sep 17 00:00:00 2001 From: Teddy Wing Date: Sun, 10 Nov 2013 06:14:15 -0500 Subject: Improve styling of drag handles --- assets/css/sample-editor.css | 27 +++++++++++++++++++++++---- 1 file changed, 23 insertions(+), 4 deletions(-) (limited to 'assets/css/sample-editor.css') 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 { -- cgit v1.2.3