Style fixes, added a "clear" button

lib/gulp-control-view.coffee

@@ -14,6 +14,7 @@ class GulpControlView extends View
     @div class: 'gulp-control', =>
       @ul class: 'tasks', outlet: 'taskList'
       @div class: 'output', outlet: 'outputPane'
+      @aside class: 'clear', 'Clear'
 
   serialize: ->
 
@@ -25,11 +26,14 @@ class GulpControlView extends View
       @writeOutput 'No project path found, aborting', 'error'
       return
 
-    @click '.tasks li.task', (event) =>
+    @on 'click', '.tasks li.task', (event) =>
       task = event.target.textContent
       for t in @tasks when t is task
         return @runGulp(task)
 
+    @on 'click', '.clear', =>
+      @outputPane.empty()
+
     @getGulpTasks()
     return
 

styles/gulp-control.less

@@ -6,6 +6,7 @@
 
 .gulp-control {
   color: @text-color;
+  font: @font-family;
 
   .tasks {
     float: left;
@@ -46,6 +47,8 @@
 
     pre {
       padding: 0;
+      margin: 0;
+      border: 0;
       font-size: 11px;
       background: @tool-panel-background-color;
 
@@ -54,4 +57,22 @@
       }
     }
   }
+
+  .clear {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    background: rgba(0, 0, 0, 0);
+    border: 1px solid @text-color;
+    border-radius: 5px;
+    z-index: 1000;
+    padding: 10px;
+
+    &:hover {
+      background-color: @text-color-highlight;
+      border: 1px solid @text-color-highlight;
+      color: @tool-panel-background-color;
+      cursor: pointer;
+    }
+  }
 }