diff options
| -rw-r--r-- | assets/css/application.css | 42 | ||||
| -rw-r--r-- | assets/css/sample-editor.css | 5 | ||||
| -rw-r--r-- | assets/js/views/sample.js | 7 | ||||
| -rw-r--r-- | index.html | 5 |
4 files changed, 47 insertions, 12 deletions
diff --git a/assets/css/application.css b/assets/css/application.css index 97e9662..9ebfdc2 100644 --- a/assets/css/application.css +++ b/assets/css/application.css @@ -45,17 +45,17 @@ header { -moz-border-radius: 4px; border-radius: 4px; border-top: 1px solid #f5f5f5; - -webkit-box-shadow: + -webkit-box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333; - -moz-box-shadow: + -moz-box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, 0 2px 3px #333; - box-shadow: + box-shadow: inset 0 0 25px #e8e8e8, 0 1px 0 #c3c3c3, 0 2px 0 #c9c9c9, @@ -123,9 +123,7 @@ header { top: -0.07em; -webkit-border-radius: 3px; border-radius: 3px; - -webkit-box-shadow: 0px 4px 1px 0px rgba(40, 150, 44, 1); - box-shadow: 0px 4px 1px 0px rgba(40, 150, 44, 1); - -webkit-transition: all 150ms linear; + -webkit-transition: all 150ms linear; -moz-transition: all 150ms linear; -o-transition: all 150ms linear; -ms-transition: all 150ms linear; @@ -147,6 +145,9 @@ header { border-color: #2faf34; color: #eee; text-shadow: 0px 1px 2px rgba(0,0,0,0.9); + -webkit-box-shadow: 0px 4px 1px 0px rgba(40, 150, 44, 1); + box-shadow: 0px 4px 1px 0px rgba(40, 150, 44, 1); + } .button.green:hover { @@ -163,4 +164,31 @@ header { .button.green.large { font-size: 2em; line-height: 1; -}
\ No newline at end of file +} + + +.button.red{ + background-color: #887c7c; + border-color: #887c7c; + color: #eee; + text-shadow: 0px 1px 2px rgba(0,0,0,0.9); + -webkit-box-shadow: 0px 4px 1px 0px rgba(92, 5, 5, 1); + box-shadow: 0px 4px 1px 0px rgba(92, 5, 5, 1); + +} + +.button.red:hover { + background-color: red; + color: #fff; +} + +.button.red:active { + background-color: #2ea732; + color: #ddd; + text-shadow: 0px 0px 2px rgba(0,0,0,0.9); +} + +.button.red.large { + font-size: 2em; + line-height: 1; +} diff --git a/assets/css/sample-editor.css b/assets/css/sample-editor.css index 35a1e90..20ebd90 100644 --- a/assets/css/sample-editor.css +++ b/assets/css/sample-editor.css @@ -3,6 +3,7 @@ .edit-sample { margin: 0.4em 0; + width:1000px; } .edit-sample > div { @@ -41,7 +42,7 @@ color: #414141; text-shadow: 0 1px 2px #f2f400; 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+ */ @@ -100,4 +101,4 @@ /* Key input */ .edit-sample .key-input { margin-top: 0.1em; -}
\ No newline at end of file +} diff --git a/assets/js/views/sample.js b/assets/js/views/sample.js index 6842ccd..6805e97 100644 --- a/assets/js/views/sample.js +++ b/assets/js/views/sample.js @@ -1,7 +1,8 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({ template: '#sample-view-template', events: { - 'blur .js-keyboard-key': 'on_keyboard_change' + 'blur .js-keyboard-key': 'on_keyboard_change', + 'click .js-remove-sample' : 'remove_sample' }, onRender: function() { @@ -76,5 +77,9 @@ ClipPlay.Views.Sample = Marionette.ItemView.extend({ Mousetrap.bind(this.model.get('key'), function(){ that.model.play(); }); + }, + + remove_sample: function(){ + console.log('removed sample'); } }); @@ -18,7 +18,7 @@ <header> <h1>ClipPlay</h1> </header> - + <div role="main"> <div id="add-sample"> <input type="text" class="url-input js-sample-url" placeholder="http://www.youtube.com/watch?v=_JGaQ3g8WU4" /> @@ -49,7 +49,7 @@ <span class="clip-time js-time"></span> </div> </div> - + <div class="selected-bar js-selected-bar"></div> <div class="clip-line js-clip-line js-end-position"> @@ -62,6 +62,7 @@ <div> <input type="text" class="key key-input js-keyboard-key" placeholder="a" /> </div> + <button type="button" class="button red js-remove-sample">-</button> </div> </script> |