diff options
| -rw-r--r-- | assets/css/application.css | 1 | ||||
| -rw-r--r-- | assets/css/sample-editor.css | 27 | ||||
| -rw-r--r-- | index.html | 2 |
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 { @@ -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> |