diff options
| author | Teddy Wing | 2013-11-10 06:14:15 -0500 |
|---|---|---|
| committer | Teddy Wing | 2013-11-10 06:14:15 -0500 |
| commit | f06d084d179746f53b5b969628f119195366769c (patch) | |
| tree | 93d39a5c3acd0338004295edb181e68c5cad104c /assets | |
| parent | 65bf73caaa1685e83d57a50f32df2fae5d063720 (diff) | |
| download | clip-play-f06d084d179746f53b5b969628f119195366769c.tar.bz2 | |
Improve styling of drag handles
Diffstat (limited to 'assets')
| -rw-r--r-- | assets/css/application.css | 1 | ||||
| -rw-r--r-- | assets/css/sample-editor.css | 27 |
2 files changed, 24 insertions, 4 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 { |