Fixed input and output cards

src/web/Manager.mjs

@@ -166,7 +166,7 @@ class Manager {
         this.addMultiEventListener("#output-text", "mousedown dblclick select",  this.highlighter.outputMousedown, this.highlighter);
         this.addMultiEventListener("#output-html", "mousedown dblclick select",  this.highlighter.outputHtmlMousedown, this.highlighter);
         this.addDynamicListener("#output-file-download", "click", this.output.downloadFile, this.output);
-        this.addDynamicListener("#output-file-slice", "click", this.output.displayFileSlice, this.output);
+        this.addDynamicListener("#output-file-slice i", "click", this.output.displayFileSlice, this.output);
         document.getElementById("show-file-overlay").addEventListener("click", this.output.showFileOverlayClick.bind(this.output));
 
         // Options

src/web/html/index.html

@@ -294,10 +294,12 @@
                                         <img aria-hidden="true" src="<%- require('../static/images/file-128x128.png') %>" alt="File icon"/>
                                         <div class="card-body">
                                             Size: <span id="output-file-size"></span><br>
-                                            <button id="output-file-download" type="button" class="btn btn-primary">Download</button>
+                                            <button id="output-file-download" type="button" class="btn btn-primary btn-outline">Download</button>
                                             <div class="input-group">
                                                 <span class="input-group-btn">
-                                                    <button id="output-file-slice" type="button" class="btn btn-secondary" title="View slice">&#x1f50d;</button>
+                                                    <button id="output-file-slice" type="button" class="btn btn-secondary bmd-btn-icon" title="View slice">
+                                                          <i class="material-icons">search</i>
+                                                    </button>
                                                 </span>
                                                 <input type="number" class="form-control" id="output-file-slice-from" placeholder="From" value="0" step="1024" min="0">
                                                 <div class="input-group-addon">to</div>

src/web/stylesheets/components/_pane.css

@@ -46,6 +46,7 @@
     color: var(--primary-font-colour);
     line-height: 30px;
     background-color: var(--primary-background-colour);
+    flex-direction: row;
 }
 
 .card:hover {
@@ -63,7 +64,7 @@
 .card-body .close {
     position: absolute;
     right: 10px;
-    top: 10px;
+    top: 4px;
 }
 
 .card-body {
@@ -77,7 +78,7 @@
 }
 
 .card-body>.btn {
-    margin-bottom: 15px;
+    margin-bottom: 5px;
     margin-top: 5px;
 }